docs: implement basic structure for docs

barelyhuman · barelyhuman · commit b67633ea8054 · 2024-11-30T04:14:05.000+05:30
diff --git a/docs/_layout.hbs b/docs/_layout.hbs
diff --git a/docs/_layout.mustache b/docs/_layout.mustache
@@ -0,0 +1,30 @@
+<html lang='en'>
+    <head>
+        <meta charset='UTF-8' />
+        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+        <title>@tinytown/pub | A tiny pre-processor for tiny websites</title>
+        <link rel='stylesheet' href='styles.css' />
+    </head>
+    <body class='p-2 mx-auto max-w-3xl'>
+        {{#showBack}}
+            <header
+                class='flex items-center mb-8 h-10 border-b border-b-zinc-100 shadow-b'
+            >
+                <nav>
+                    <a href='/'>&larr; Home</a>
+                </nav>
+            </header>
+        {{/showBack}}
+        <article class='prose prose-zinc'>
+            {{{content}}}
+        </article>
+        <footer class='mt-10'>
+            Built with ❤️ at
+            <a
+                href='https://tinytown.studio/'
+                class='underline underline-offset-4'
+            >tinytown.studio</a>
+        </footer>
+        <script src='highlight.mjs' type='module'></script>
+    </body>
+</html>
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -1 +1,41 @@
+---
+showBack: true
+---
+
 # Getting Started
+
+## Basics
+
+### Install
+
+```sh
+npm install -D @tinytown/pub
+```
+
+### Usage
+
+```sh
+# dev server
+npx -p @tinytown/pub pub ./src
+
+# build assets
+npx -p @tinytown/pub pub ./dist
+```
+
+## Features
+
+- JS Support
+    - JSX (Defaults to `preact`)
+    - ESM by default
+- Markdown
+    - Custom Layouts
+    - Base URL Support
+    - Front matter
+- HTML
+    - Minifier
+    - Base URL Support
+- CSS
+    - Full PostCSS Support
+        - Comes with postcss-import support (bundles css from `node_module`)
+
+[Guide &rarr;](guide)
diff --git a/docs/guide.md b/docs/guide.md
@@ -0,0 +1 @@
+#### TBD
diff --git a/docs/highlight.mjs b/docs/highlight.mjs
@@ -0,0 +1,28 @@
+import { createHighlighter } from 'shiki'
+
+const theme = 'min-dark'
+const possibleCodeElements = document.querySelectorAll('pre > code')
+
+const highlighter = await createHighlighter({
+    langs: ['js', 'css', 'html', 'bash'],
+    themes: [theme],
+})
+
+possibleCodeElements.forEach(async (el) => {
+    const hasLangDef = [...el.classList.entries()].find((d) =>
+        d[1].includes('language-'),
+    )
+    if (!hasLangDef) return
+
+    const [, langClass] = hasLangDef
+    const [, language] = langClass.split('-')
+
+    el.parentElement.classList.add('not-prose')
+
+    const output = highlighter.codeToHtml(el.innerHTML, {
+        lang: language,
+        theme: theme,
+    })
+
+    el.parentElement.outerHTML = output
+})
diff --git a/docs/index.md b/docs/index.md
@@ -2,6 +2,5 @@
 
 A tiny pre-processor for tiny websites
 
-[Getting Started](./getting-started)
-
-Built with ❤️ at [tinytown.studio](https://tinytown.studio/)
+- [Getting Started](./getting-started)
+- [Guide](./guide)
diff --git a/docs/package.json b/docs/package.json
@@ -16,5 +16,8 @@
         "autoprefixer": "^10.4.20",
         "tailwind": "^4.0.0",
         "tailwindcss": "^3.4.15"
+    },
+    "dependencies": {
+        "shiki": "^1.24.0"
     }
 }
diff --git a/docs/styles.css b/docs/styles.css
@@ -1,3 +1,5 @@
+@import 'highlight.js/styles/1c-light.min.css';
+
 @tailwind base;
 @tailwind utilities;
 @tailwind components;
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./**/*.{html,md,js,hbs}', '!./node_modules'],
+    content: ['./**/*.{html,md,js,mustache}', '!./node_modules'],
     theme: {
         extend: {},
     },

Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,8 @@`
`16`	`16`	`"autoprefixer": "^10.4.20",`
`17`	`17`	`"tailwind": "^4.0.0",`
`18`	`18`	`"tailwindcss": "^3.4.15"`
	`19`	`+ },`
	`20`	`+ "dependencies": {`
	`21`	`+ "shiki": "^1.24.0"`
`19`	`22`	`}`
`20`	`23`	`}`