Other ideas

💡 New tech…

Most examples here use SAAS products or older tech. But some use the new MDX format. It’s a combination of React JSX + HTML + Markdown. You can write each documentation page/article entirely in Markdown if you want to keep it simple. But you have the option of adding HTML elements if you need to render custom tags, styles, or attributes.

When that’s not enough, you can use React JSX to render interactive React components, right alongside the Markdown/HTML content. This can be very useful and powerful, to render a visual or interactive preview of some code, or a table of data that the user can filter/sort/edit. You can use JSX to define a template or widget, then use it in multiple documents. Just pass some content or attributes to it. No need to copy/paste all the markup and styles to each instance.

I have not seen any SAAS products you can buy and get set up without programming. I’m waiting for some no-code/low-code platform to come out with good support for custom React Components. That will be game changing. For now, to use the power of MDX, you have to develop and publish your own React app. But for complex or interactive docs, it’s worth it!

🤓 Weird tech…

This page is edited and published using Notion.so. Notion is a digital notebook with by far the easiest and best UI/UX of any other writing software. It is a pleasure to write long-form unstructured content in Notion. Unlike other writing apps, this has many many powerful features. For example, you can define a block of content once, then use it in multiple places. You can create unlimited nested child-pages, and organize links to child-pages organically in between article text content. It can host images/videos/widgets/tables/charts/code. Adding a content block is super easy, as is changing from one type to another. Organizing content is super easy. You can copy/paste an entire section of text content and child pages all together from one section or page to another. Plus the UI design and typography are pleasant and inspiring.

The company is unknown by most, but already valued at 10 Billion $. For good reason. I see this becoming the future of… something. Not sure what yet though. Haha. People use it for personal homepage dashboards, documentation sites, mind map, 2nd brain, even project management.

This site is customized and published with Notaku.so, a SAAS product with a monthly fee.

🤔 🐢 No tech…

What about instead of writing a typical engineering-made React or similar complicated website, but instead use a popular social platform to write content on? Like Medium.com or Dev.to. Then, instead of the documentation being an internal tool, its turned into a social-media/marketing campaign! Users of that platform will find your content. Just make sure every page has a link back to your website.

For example, an article like this - https://bobbyhadz.com/blog/typescript-error-no-inputs-were-found-in-config-file. It has a lot of code snippets, and Medium’s typography is very good! But, that platform is just an example. This idea is pretty crazy, and not thought out.

Notaku.so

Great documentation site builder service. Uses content from your own Notion.so.

My notion page:

notion.so/49a1dc9aebc1493893b09f4a321879d9

Custom logo:

javascript
<span id="topLogo">
  <svg id="topLogoSvg" style="width:1rem;" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>
  <b style="font-size: 1.1rem;" id="topLogoText">Techy.Tools</b>
</span>

Inject custom CSS/JS:

javascript
<style>
html {
  background-color: #f9fbfc !important;
}
#topLogoSvg {
    margin-right: 0.33rem;
    margin-left: 0.11rem;
    color: #856B98;
}
#topLogoText {
  background-color: #4c98e4;
  background-image: linear-gradient(135deg, #4c98e4 10%, #856b98);
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a.notion-page-link span,
.tableOfContents > div:nth-child(2) > div:nth-child(2) > div,
.sidenav a div:first-child + div {
  color: #7D8185;
  font-weight: 400 !important;
}
[aria-label="Search"] div {
  font-weight: 500 !important;
}
main a:not(.notion-page-link) {
  color: #5990D5 !important;
}
svg.notion-page-icon {
  transform: scale(0.8);
  transform-origin: center center;
}
main .font-bold {
  opacity: 0.9;
  font-weight: 600;
}
main h2,
main h3 {
  color: #856b98 !important;
}
main h2::after,
main h3::after {
  content: ':';
}
img.notion-page-icon + span,
.navIcon + div {
  font-weight: 600 !important;
  background-color: #4c98e4;
  background-image: linear-gradient(135deg, #4c98e4 10%, #856b98);
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-name="collapse"] {
  border-color: hsla(275deg 18% 51% / 0.25) !important;
}
.sidenav .bg-gray-200\/70 {
  border: solid 1px #856b98 !important;
  background: hsl(245deg 30% 93% / 67%) !important;
}
.sidenav .bg-gray-200\/70 + div {
  color: #856b98 !important;
}


/*
 * Nav
 */
.biaf > div:first-child > div:first-child {
  position:relative;
  z-index: 1000;
}
.biaf nav {
  position: relative;
  top: -1.5rem;
}
.biaf nav > a:first-child {
  opacity: 0.75;
  position: relative;
  top: -1rem;
}
.biaf nav > a:first-child:hover > div {
  background:none !important;
}
.biaf nav > a:first-child div {
  color: #454545 !important;
  background-color: initial;
  background-image: initial;
  background-size: initial;
  background-clip: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}
.biaf > div:first-child > div:first-child > div:first-child > div:first-child > button:first-child {
  position: relative;
  top: 0.5rem;
  right: 0.5rem;
}
nav + div main {
  margin-top: 0.25rem !important;
}
nav + div > div:first-child {
  display:none !important;
}
nav + div main figure {
  border-radius: 0.67rem;
  overflow: hidden;
}
[aria-label="Search"] {
    border: none !important;
    box-shadow: none !important;
}
[aria-label="Search"] > div {
    margin-left: 0.5rem !important; 
}
[aria-label="Search"] > div > div:last-child {
    display:none !important;
}
[aria-label="Search"] > div > div:first-child::after {
    content: ' this site';
}
[aria-label="Search"] > div > div:first-child {
    /*opacity: 0 !important;    
    transition: opacity 0.2sec linear;*/
}
[aria-label="Search"]:hover > div > div:first-child {
    /*opacity: 0.75 !important; */
    font-size: 1rem !important;
}
.feedback label input:not(:checked) {
    background: hsla(244deg, 14%, 70%, 0.5) !important;
    box-shadow: inset 3px -3px 15px hsl(250deg 15% 50% / 5%) !important;
}
@media (max-width: 767px) {
  button svg + div {
    display:none !important;
  }
}
.header .items-center .items-center .transition-opacity:not(:hover) {
  opacity: 0.4 !important;
}
.bg-container.absolute {
  position: fixed !important;
}


/*
 * RIGHT SIDE
 */
.mainContent + div {
  overflow-x: hidden;
  transition: max-width 0.5s linear;
  padding-top: calc(calc(var(--margin-top)) + 4px) !important;
  max-width: 0;
}
.tableOfContents {
  top: 2px !important;
}
.tableOfContents > div:nth-child(1) {
    position: fixed !important;
    bottom: 1.75rem !important;
}
.tableOfContents > div:nth-child(2) {
  margin-top: 4px !important;
}
.tableOfContents > div:nth-child(2) > div:nth-child(2) > div:first-child {
  display:none !important;
}

/*
 * MAIN
 */
.mainContent {
  padding-top: calc(var(--margin-top) + 4px) !important;
}
.mainContent h1 {
  /*display:none !important;*/
  text-transform: capitalize;
}
.mainContent h1 + div {
  display:none !important;
}


/*
 * LEFT SIDEBAR
 */
.sidenav {
  padding-top:calc(var(--margin-top) + 2px) !important;
}
.sidenav > a:first-child {
    display:none !important;
}
.sidenav-bg {
  opacity:0.5;
}


/*
 * CONTENT
 */
main a:not(.notion-page-link) {
  font-weight: inherit !important;
}
main ul,
main li {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}
main .space-y-2 > div:first-child::before,
main li::before {
  color: gray;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-right: 0.25em;
  opacity: 0.4;
}
main .space-y-2 > div:first-child::before {
  content: "⊞";
  margin-left: -1.5px;
}
main li::before {
  content: "╌";
}
.notion-page-icon {
  position: relative;
  top: -1.5px;
}
main .space-y-2 svg {
  display: none !important;
}
main .space-y-2 svg + div {
  margin-left: 0 !important;
}
main .space-y-2 .font-semibold {
  font-weight: 400 !important;
}

s, .line-through {
  display:none !important;
}
</style>

<!--<script
  src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
  integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
  crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
const $el = $('.header > .items-center.w-full > button:last-child')
if ($el && $el.is(":visible")) {
  setTimeout(function(){
    $el.click();  
  },5000);
  setTimeout(function(){
    const $x = $('.biaf nav').prev().find('button');
    if ($x) {
      $x.click();  
    }
  },6000);
}
});
</script>-->

<!--<script>
const hideRightSide = function () {
  document.querySelector('.mainContent + div').style['max-width'] = '0';
}
const showRightSide = function () {
  document.querySelector('.mainContent + div').style['max-width'] = '400px';
}
// on page load
if (window.location.pathname==='/') {
  setTimeout(hideRightSide, 100);
  setTimeout(hideRightSide, 200);
  setTimeout(hideRightSide ,300);
} else {
  setTimeout(showRightSide, 100);
  setTimeout(showRightSide, 200);
  setTimeout(showRightSide ,300);
}
// on route change
setInterval(function(){
  if (window.location.pathname==='/') {
    hideRightSide();
  } else {
    showRightSide();
  }
},100);
</script>-->