{"id":"562b0961fd8bc3bfd6224eb4c7563cc9c3ce569a9062ea81b0ea4b572c3936f6","type":"Contented","path":"/","modifiedDate":1686373756200,"sections":[],"fields":{"title":"Contented"},"html":"<nav class=\"toc\"><ol class=\"toc-level toc-level-1\"><li class=\"toc-item toc-item-h1\"><a class=\"toc-link toc-link-h1\" href=\"#contented\">Contented</a><ol class=\"toc-level toc-level-2\"><li class=\"toc-item toc-item-h2\"><a class=\"toc-link toc-link-h2\" href=\"#motivation\">Motivation</a><ol class=\"toc-level toc-level-3\"><li class=\"toc-item toc-item-h3\"><a class=\"toc-link toc-link-h3\" href=\"#just-another-ssg\">Just Another SSG?</a></li></ol></li><li class=\"toc-item toc-item-h2\"><a class=\"toc-link toc-link-h2\" href=\"#powered-by\">Powered By</a></li><li class=\"toc-item toc-item-h2\"><a class=\"toc-link toc-link-h2\" href=\"#getting-started\">Getting Started</a><ol class=\"toc-level toc-level-3\"><li class=\"toc-item toc-item-h3\"><a class=\"toc-link toc-link-h3\" href=\"#examples\">Examples</a></li></ol></li></ol></li></ol></nav><h1 id=\"contented\"><a aria-hidden=\"true\" tabindex=\"-1\" href=\"#contented\"><span class=\"icon icon-link\"></span></a>Contented</h1>\n<p><a href=\"https://contented.dev\" target=\"_blank\" rel=\"nofollow\">Contented</a> is a Markdown-based authoring workflow that encourage developer authoring within\nits contextual Git repository. <code>npm i @birthdayresearch/contented</code></p>\n<p>With a headless design of 1 config file <code>contented.config.js</code>, developers can start writing\ntheir <a href=\"markdown\">markdown content</a> and preview it on their localhost <code>contented write</code>. Choosing convention over\nconfiguration reduces HTML/UI clutter, allowing developers to focus on authoring.</p>\n<p>Authored content can be continuously delivered (CD) into a hosted static site (e.g., GitHub Pages/Netlify/Vercel) for\npreview <code>contented generate</code>. As code drift, so does documentation; this allows each pull request to have an\naccompanying sharable preview of the documentation. With CD, it effectively shift-left your documentation workflow and\nchecks it is compilable and presentable.</p>\n<p>By encouraging authoring next to the source (in the same git repo), developers can contextually document changes as they\ndevelop. All domain-specific changes will go into the <code>main</code> branch with one Git Pull Request.</p>\n<p>With <code>contented build</code>, you can compile your markdown into sources <code>index.js</code> and <code>*.json</code>. That output\ninto <code>./dist</code>. <code>npm publish</code> them into any registry of your choice, for you can\neasily <code>npm i @your-scope/your-npm-package</code> and use the processed content on any of your downstream sites. Easily\npulling up-to-date content and prose from individual domain-specific repositories and re-presented. Think microservices,\nbut for your prose!</p>\n<h2 id=\"motivation\"><a aria-hidden=\"true\" tabindex=\"-1\" href=\"#motivation\"><span class=\"icon icon-link\"></span></a>Motivation</h2>\n<p>If you don’t make it easy to get something done (authoring), nobody will go out of their way to get it done perfectly\nevery time. Turn it into a GitOps workflow and give people the necessary tools and power to get it done perfectly every\nsingle time — everyone will get it done, as now there is no other way else to get it done. An efficient workflow\nnaturally satisfies.</p>\n<h3 id=\"just-another-ssg\"><a aria-hidden=\"true\" tabindex=\"-1\" href=\"#just-another-ssg\"><span class=\"icon icon-link\"></span></a>Just Another SSG?</h3>\n<p><strong>This is not a static site generator.</strong> This is a markdown processor workflow with a built-in static site generator.\nThe outcome we're trying to achieve is\nthis <a href=\"https://www.jsdelivr.com/package/npm/@birthdayresearch/contented-example\" target=\"_blank\" rel=\"nofollow\">@birthdayresearch/contented-example/dist</a></p>\n<blockquote>\n<p><a href=\"others/limitations\">See Contented Limitations</a></p>\n</blockquote>\n<h2 id=\"powered-by\"><a aria-hidden=\"true\" tabindex=\"-1\" href=\"#powered-by\"><span class=\"icon icon-link\"></span></a>Powered By</h2>\n<ul>\n<li><a href=\"https://nextjs.org/\" target=\"_blank\" rel=\"nofollow\">Next</a></li>\n<li><a href=\"https://tailwindcss.com/\" target=\"_blank\" rel=\"nofollow\">Tailwind</a></li>\n<li><a href=\"https://babeljs.io/docs/en/babel-generator\" target=\"_blank\" rel=\"nofollow\">@babel/generator</a></li>\n<li><a href=\"https://www.npmjs.com/package/unified\" target=\"_blank\" rel=\"nofollow\">unified</a></li>\n</ul>\n<h2 id=\"getting-started\"><a aria-hidden=\"true\" tabindex=\"-1\" href=\"#getting-started\"><span class=\"icon icon-link\"></span></a>Getting Started</h2>\n<p>Your docs can be anywhere as long as contented is configured to pick them up.</p>\n<pre class=\"shiki\" style=\"background-color: #22272e\"><code><span class=\"line\"><span style=\"color: #adbac7\">repo/</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">├─ packages/**</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">├─ docs/</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">│  ├─ 01:Title 1/*.md</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">│  ├─ 02:Title 2/*.md</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">│  ├─ 03:Title 3/</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">│  │  ├─ 01:Subtitle 1/*.md</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">│  │  ├─ 02:overview.md</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">│  │  └─ 03:faq.md</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">│  └─ package.json</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">├─ contented.config.js</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">├─ package.json</span></span>\n<span class=\"line\"><span style=\"color: #adbac7\">└─ README.md</span></span></code></pre>\n<p><strong>package.json</strong></p>\n<pre class=\"shiki\" style=\"background-color: #22272e\"><code><span class=\"line\"><span style=\"color: #ADBAC7\">{</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  </span><span style=\"color: #8DDB8C\">\"name\"</span><span style=\"color: #ADBAC7\">: </span><span style=\"color: #96D0FF\">\"@birthdayresearch/contented-example\"</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  </span><span style=\"color: #8DDB8C\">\"version\"</span><span style=\"color: #ADBAC7\">: </span><span style=\"color: #96D0FF\">\"0.0.0\"</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  </span><span style=\"color: #8DDB8C\">\"private\"</span><span style=\"color: #ADBAC7\">: </span><span style=\"color: #6CB6FF\">false</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  </span><span style=\"color: #8DDB8C\">\"files\"</span><span style=\"color: #ADBAC7\">: [</span><span style=\"color: #96D0FF\">\"dist\"</span><span style=\"color: #ADBAC7\">],</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  </span><span style=\"color: #8DDB8C\">\"main\"</span><span style=\"color: #ADBAC7\">: </span><span style=\"color: #96D0FF\">\"dist/index.js\"</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  </span><span style=\"color: #8DDB8C\">\"scripts\"</span><span style=\"color: #ADBAC7\">: {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">    </span><span style=\"color: #8DDB8C\">\"write\"</span><span style=\"color: #ADBAC7\">: </span><span style=\"color: #96D0FF\">\"contented write\"</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">    </span><span style=\"color: #8DDB8C\">\"generate\"</span><span style=\"color: #ADBAC7\">: </span><span style=\"color: #96D0FF\">\"contented generate\"</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">    </span><span style=\"color: #8DDB8C\">\"build\"</span><span style=\"color: #ADBAC7\">: </span><span style=\"color: #96D0FF\">\"contented build\"</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  },</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  </span><span style=\"color: #8DDB8C\">\"devDependencies\"</span><span style=\"color: #ADBAC7\">: {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">    </span><span style=\"color: #8DDB8C\">\"@birthdayresearch/contented\"</span><span style=\"color: #ADBAC7\">: </span><span style=\"color: #96D0FF\">\"latest\"</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  }</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">}</span></span></code></pre>\n<p><strong>contented.config.js</strong></p>\n<pre class=\"shiki\" style=\"background-color: #22272e\"><code><span class=\"line\"><span style=\"color: #768390\">/** </span><span style=\"color: #F47067\">@type</span><span style=\"color: #768390\"> </span><span style=\"color: #F69D50\">{import('@birthdayresearch/contented').ContentedConfig}</span><span style=\"color: #768390\"> */</span></span>\n<span class=\"line\"><span style=\"color: #6CB6FF\">module</span><span style=\"color: #ADBAC7\">.</span><span style=\"color: #6CB6FF\">exports</span><span style=\"color: #ADBAC7\"> </span><span style=\"color: #F47067\">=</span><span style=\"color: #ADBAC7\"> {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  preview: {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">    url: </span><span style=\"color: #96D0FF\">'https://contented.dev'</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">    name: </span><span style=\"color: #96D0FF\">'Contented'</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">    github: {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">      url: </span><span style=\"color: #96D0FF\">'https://github.com/BirthdayResearch/contented'</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">    },</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  },</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  processor: {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">    pipelines: [</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">      {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">        type: </span><span style=\"color: #96D0FF\">'Docs'</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">        pattern: </span><span style=\"color: #96D0FF\">'docs/**/*.md'</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">        processor: </span><span style=\"color: #96D0FF\">'md'</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">        fields: {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">          title: {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">            type: </span><span style=\"color: #96D0FF\">'string'</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">            required: </span><span style=\"color: #6CB6FF\">true</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">            </span><span style=\"color: #DCBDFB\">resolve</span><span style=\"color: #ADBAC7\">: (</span><span style=\"color: #F69D50\">s</span><span style=\"color: #ADBAC7\">) </span><span style=\"color: #F47067\">=></span><span style=\"color: #ADBAC7\"> s </span><span style=\"color: #F47067\">??</span><span style=\"color: #ADBAC7\"> </span><span style=\"color: #96D0FF\">'Contented'</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">          },</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">          description: {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">            type: </span><span style=\"color: #96D0FF\">'string'</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">          },</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">          tags: {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">            type: </span><span style=\"color: #96D0FF\">'string[]'</span><span style=\"color: #ADBAC7\">,</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">          },</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">        },</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">        </span><span style=\"color: #DCBDFB\">transform</span><span style=\"color: #ADBAC7\">: (</span><span style=\"color: #F69D50\">file</span><span style=\"color: #ADBAC7\">) </span><span style=\"color: #F47067\">=></span><span style=\"color: #ADBAC7\"> {</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">          file.path </span><span style=\"color: #F47067\">=</span><span style=\"color: #ADBAC7\"> file.path.</span><span style=\"color: #DCBDFB\">replaceAll</span><span style=\"color: #ADBAC7\">(</span><span style=\"color: #96D0FF\">/</span><span style=\"color: #F47067\">^</span><span style=\"color: #8DDB8C; font-style: italic\">\\/</span><span style=\"color: #96D0FF\">docs</span><span style=\"color: #8DDB8C; font-style: italic\">\\/</span><span style=\"color: #F47067\">?</span><span style=\"color: #96D0FF\">/</span><span style=\"color: #F47067\">g</span><span style=\"color: #ADBAC7\">, </span><span style=\"color: #96D0FF\">'/'</span><span style=\"color: #ADBAC7\">);</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">          file.sections </span><span style=\"color: #F47067\">=</span><span style=\"color: #ADBAC7\"> file.sections.</span><span style=\"color: #DCBDFB\">slice</span><span style=\"color: #ADBAC7\">(</span><span style=\"color: #6CB6FF\">1</span><span style=\"color: #ADBAC7\">);</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">          </span><span style=\"color: #F47067\">return</span><span style=\"color: #ADBAC7\"> file;</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">        },</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">      },</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">    ],</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">  },</span></span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">};</span></span></code></pre>\n<h3 id=\"examples\"><a aria-hidden=\"true\" tabindex=\"-1\" href=\"#examples\"><span class=\"icon icon-link\"></span></a>Examples</h3>\n<ul>\n<li><a href=\"https://github.com/BirthdayResearch/contented/tree/main/packages/contented-example\" target=\"_blank\" rel=\"nofollow\">BirthdayResearch/contented/packages/contented-example</a></li>\n<li><a href=\"https://github.com/fuxingloh/jellyfishsdk-docs\" target=\"_blank\" rel=\"nofollow\">fuxingloh/jellyfishsdk-docs</a></li>\n</ul>","headings":[{"depth":1,"id":"contented","title":"Contented","children":[{"depth":2,"id":"motivation","title":"Motivation","children":[{"depth":3,"id":"just-another-ssg","title":"Just Another SSG?","children":[]}]},{"depth":2,"id":"powered-by","title":"Powered By","children":[]},{"depth":2,"id":"getting-started","title":"Getting Started","children":[{"depth":3,"id":"examples","title":"Examples","children":[]}]}]}]}