chore: docs setup

.github/workflows/ci.yaml

@@ -6,9 +6,23 @@ on:
   pull_request:
     branches: main
 
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
 jobs:
   pr-checker:
-    name: 🔃 PR Checker
+    name: 🔃 PR
     runs-on: ubuntu-latest
     if: github.actor != 'dependabot[bot]'
     steps:
@@ -22,18 +36,12 @@ jobs:
     name: ☑️ Verify
     runs-on: ubuntu-latest
 
-    permissions:
-      id-token: write
-      contents: read
-
     steps:
       - name: ⬇️ Clone repository
         uses: actions/checkout@v3
 
       - name: 🟢 Install Deno
         uses: denoland/setup-deno@v1
-        with:
-          deno-version: v1.x
 
       - name: 🟢 Install Bun
         uses: oven-sh/setup-bun@v2
@@ -51,18 +59,59 @@ jobs:
       - name: 🟢 Install Yarn
         run: npm install -g yarn
 
+      - name: 🧹 Cleanup
+        run: deno run --allow-read --allow-write scripts/clean/docs.ts
+
       - name: ⏳ Run Install
-        run: deno run --allow-read --allow-env --allow-run scripts/_runInstall.ts
+        run: deno run --allow-read --allow-env --allow-run scripts/run/install.ts
 
       - name: ☰ Run Linter
-        run: deno run --allow-read --allow-env --allow-run --allow-sys scripts/_runFormat.ts
+        run: deno run --allow-read --allow-env --allow-run --allow-sys scripts/run/format.ts
 
       - name: ✅ Run Check
-        run: deno run --allow-read --allow-env --allow-run --allow-sys scripts/_runCheck.ts
+        run: deno run --allow-read --allow-env --allow-run --allow-sys scripts/run/check.ts
 
       - name: ⚡ Run Linter
-        run: deno run --allow-read --allow-env --allow-run --allow-sys scripts/_runLint.ts
+        run: deno run --allow-read --allow-env --allow-run --allow-sys scripts/run/lint.ts
 
       - name: 🧪 Run Test
-        run: deno run --allow-read --allow-env --allow-run scripts/_runTest.ts
-
+        run: deno run --allow-read --allow-env --allow-run scripts/run/test.ts
+
+      - name: 📜 Generate Docs
+        run: deno run --allow-read --allow-env --allow-run scripts/gen/doc.ts
+
+  build:
+    name: 🏗️ Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: ✅ Checkout
+        uses: actions/checkout@v3
+
+      - name: 🗐 Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: 🟢 Install Deno
+        uses: denoland/setup-deno@v1
+
+      - name: 📝 Build Docs
+        run: deno task build
+        working-directory: ./docs
+
+      - name: 📤 Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./docs/_site
+
+  # deploy:
+  #   name: 🚀 Deploy
+
+  #   environment:
+  #     name: github-pages
+  #     url: ${{ steps.deployment.outputs.page_url }}
+
+  #   runs-on: ubuntu-latest
+  #   needs: build
+  #   steps:
+  #     - name: </> Deploy to GitHub Pages
+  #       id: deployment
+  #       uses: actions/deploy-pages@v2

.gitignore

@@ -173,3 +173,11 @@ dist
 
 # Finder (MacOS) folder config
 .DS_Store
+
+# lume
+_site
+_cache
+
+# Custom
+apps/**/docs
+scripts/docs

docs/404.yml

@@ -0,0 +1,11 @@
+layout: layouts/error.vto
+url: /404.html
+title: "404: Page Not Found"
+description: |
+  Sorry, the page you are looking for could not be found.
+
+content:
+  title: "Error 404:<br /><span>Page Not</span> Found"
+  description: Sorry, the page you are looking for could not be found.
+  button:
+    title: Return Home

docs/_config.ts

@@ -0,0 +1,109 @@
+import lume from "lume/mod.ts";
+import codeHighlight from "lume/plugins/code_highlight.ts";
+import inline from "lume/plugins/inline.ts";
+import resolveUrls from "lume/plugins/resolve_urls.ts";
+import esbuild from "lume/plugins/esbuild.ts";
+import transformImages from "lume/plugins/transform_images.ts";
+import favicon from "lume/plugins/favicon.ts";
+import minifyHTML from "lume/plugins/minify_html.ts";
+import postcss from "lume/plugins/postcss.ts";
+import nesting from "npm:postcss-nesting";
+import sitemap from "lume/plugins/sitemap.ts";
+import metas from "lume/plugins/metas.ts";
+import toc from "lume_markdown_plugins/toc.ts";
+import { alert } from "npm:@mdit/plugin-alert";
+import ventoLang from "vento/highlightjs-vento.js";
+
+const markdown = {
+  plugins: [toc, alert],
+  options: {
+    linkify: true,
+  },
+};
+
+const site = lume(
+  {
+    location: new URL("https://lume.land"),
+  },
+  { markdown },
+);
+
+site
+  .ignore("scripts")
+  .copy("static", ".")
+  .use(codeHighlight({
+    languages: {
+      vento: ventoLang,
+    },
+  }))
+  .use(postcss({
+    plugins: [nesting()],
+  }))
+  .use(favicon())
+  .use(inline())
+  .use(metas())
+  .use(esbuild({
+    extensions: [".js"],
+  }))
+  .use(resolveUrls())
+  .use(transformImages())
+  .use(sitemap())
+  .scopedUpdates(
+    (path) => path.endsWith(".png") || path.endsWith(".jpg"),
+  )
+  .filter("slice", (arr, length) => arr.slice(0, length))
+  .process([".html"], (pages) => {
+    for (const page of pages) {
+      const doc = page.document!;
+      const blocks = doc.querySelectorAll("lume-code");
+
+      blocks.forEach((block, i) => {
+        const pres = block.querySelectorAll(
+          ":scope > pre",
+        );
+
+        const menu = doc.createElement("ul");
+        menu.setAttribute("role", "tablist");
+        menu.setAttribute("aria-label", "Code Tabs");
+        menu.classList.add("lume-code-menu");
+
+        pres.forEach((pre, j) => {
+          const title = pre.querySelector("code")!.getAttribute("title")!;
+
+          const li = doc.createElement("li");
+          li.setAttribute("role", "presentation");
+
+          const button = doc.createElement("button");
+          button.setAttribute("role", "tab");
+          button.setAttribute("aria-selected", j === 0 ? "true" : "false");
+          button.setAttribute("aria-controls", `panel-${i + 1}-${j + 1}`);
+          button.setAttribute("id", `tab-${i + 1}-${j + 1}`);
+          button.setAttribute("tabindex", j === 0 ? "0" : "-1");
+          button.innerText = title;
+          button.classList.add("lume-code-tab");
+
+          if (j > 0) {
+            pre.setAttribute("hidden", "true");
+          } else {
+            button.classList.add("is-active");
+          }
+
+          pre.setAttribute("role", "tabpanel");
+          pre.setAttribute("aria-labelledby", `tab-${i + 1}-${j + 1}`);
+          pre.setAttribute("id", `panel-${i + 1}-${j + 1}`);
+          pre.setAttribute("tabindex", "0");
+
+          li.append(button);
+          menu.appendChild(li);
+        });
+
+        (block as unknown as HTMLElement).prepend(menu as unknown as Node);
+      });
+    }
+  })
+  .use(minifyHTML({
+    options: {
+      minify_css: false, // https://github.com/wilsonzlin/minify-html/issues/173
+    },
+  }));
+export default site;

docs/_data.yml

@@ -0,0 +1,9 @@
+metas:
+  title: =title
+  description: =description
+  twitter: "@rjoydip11"
+  github: "rjoydip"
+  image: /avatar.jpg
+  color: "#141b1f"
+  icon: /apple-touch-icon.png
+  generator: true

docs/_includes/layouts/base.vto

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+  <script type="text/javascript">
+    const root = document.firstElementChild;
+    const mediaQuery = "(prefers-color-scheme: dark)";
+    const mediaMatch = window.matchMedia;
+    const currentMode = mediaMatch(mediaQuery).matches;
+
+    const storeTheme = (targetTheme) => {
+      if ("boolean" === typeof targetTheme) {
+        targetTheme = targetTheme ? "dark" : "light";
+      }
+      root.setAttribute("data-theme", targetTheme);
+      localStorage.setItem("data-theme", targetTheme);
+    };
+
+    const storedTheme = ("data-theme" in localStorage)
+      ? localStorage.getItem("data-theme")
+      : currentMode;
+
+    storedTheme && storeTheme(storedTheme);
+  </script>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }} - OICF</title>
+
+    <meta name="supported-color-schemes" content="light dark">
+
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
+    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
+
+    <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="/fonts/epilogue.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="/fonts/jetbrains-mono.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="/styles/critical.css" inline>
+    <link rel="stylesheet" href="/styles/main.css">
+    <link rel="canonical" href="{{ url |> url(true) }}">
+
+    {{ if it.page_css }}
+      <link rel="stylesheet" href="/styles/pages/{{ page_css }}">
+    {{ /if }}
+
+    <script src="/main.js" type="module"></script>
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@docsearch/[email protected]/dist/style.css"
+      integrity="sha256-brWyd+lKlaU/B5Lhqd/FUXyZQu4rVmbFRsP2E8S2CLw="
+      crossorigin="anonymous">
+  </head>
+  <body>
+    {{ include "templates/navbar.vto" }}
+    <div>
+      {{ content }}
+    </div>
+    {{ include "templates/footer.vto" }}
+
+    <script
+      src="https://cdn.jsdelivr.net/npm/@docsearch/[email protected]/dist/umd/index.js"
+      integrity="sha256-7XYP2JLQrbyOqBKrAn8sT3l8PG/v2j6C3A5EyBDp9to="
+      crossorigin="anonymous" defer></script>
+
+    <script type="text/javascript">
+      window.addEventListener('DOMContentLoaded', () => {
+        document.getElementById("switch-theme").addEventListener("click", (event) => {
+          const currentTheme =
+            localStorage.getItem("data-theme") == "light" || (getComputedStyle(root).getPropertyValue("color-scheme") == "light");
+          storeTheme(!!currentTheme);
+        });
+
+        mediaMatch(mediaQuery).addEventListener("change", (event) => {
+          storeTheme(event.matches);
+        });
+
+        docsearch({
+          appId: "O7U42EOTRQ",
+          apiKey: "bcb89a19824e0100724bc16011dea6f8",
+          indexName: "oifc",
+          container: document.getElementById("search"),
+          debug: false
+        });
+      }, false);
+    </script>
+  </body>
+</html>

docs/_includes/layouts/error.vto

@@ -0,0 +1,16 @@
+---
+layout: ./base.vto
+page_css: error.css
+---
+
+<div class="error">
+  <h1>{{ content.title }}</h1>
+
+  {{ content.description |> md }}
+
+  <a href="{{ '/' |> url }}">
+    <button type="button" class="button is-primary is-big">
+      {{ content.button.title }}
+    </button>
+  </a>
+</div>