docs: move sites to pkgs/docs-site

pkgs/docs-site/src/config.ts

@@ -1,10 +1,6 @@
-import type { RawNavLink } from "./routes/docs";
+import type { RawNavLink } from "$lib";
 
-export const blog = {
+export default {
-  base: "/blog",
-};
-export const docs = {
-  base: "/docs",
   navLinks: [
     {
       label: "Getting Started",
@@ -25,7 +21,3 @@ export const docs = {
     },
   ] as RawNavLink[],
 };
-
-export const markdown = {
-  minLineNumberLines: 4,
-};

pkgs/docs-site/src/lib/docs.ts

@@ -1,16 +1,16 @@
-import * as config from "~/config";
+import config from "~/config";
 
 export class Docs {
   articles: Record<string, () => Promise<Article>> = {};
   navLinks: NavLink[] = [];
   async init() {
     this.articles = Object.fromEntries(
-      Object.entries(import.meta.glob<Article>("./**/*.md")).map(
+      Object.entries(import.meta.glob<Article>("../routes/docs/**/*.md")).map(
-        ([key, fn]) => [key.slice("./".length, -".md".length), fn],
+        ([key, fn]) => [key.slice("../routes/docs/".length, -".md".length), fn],
       ),
     );
     this.navLinks = await Promise.all(
-      config.docs.navLinks.map((navLink) => this.#normalizeNavLink(navLink)),
+      config.navLinks.map((navLink) => this.#normalizeNavLink(navLink)),
     );
     return this;
   }
@@ -23,7 +23,7 @@ export class Docs {
       }
       return {
         label: (await article()).frontmatter.title,
-        link: `${config.docs.base}/${navLink}`,
+        link: `/${navLink}`,
         external: false,
       };
     }
@@ -46,7 +46,7 @@ export class Docs {
       }
       return {
         label: navLink.label ?? (await article()).frontmatter.title,
-        link: `${config.docs.base}/${navLink.slug}`,
+        link: `/${navLink.slug}`,
         badge: normalizeBadge(navLink.badge),
         external: false,
       };
@@ -98,7 +98,7 @@ export class Docs {
           .map((item) =>
             this.#normalizeNavLink({
               label: item.frontmatter.title,
-              link: `${config.docs.base}/${item.key}`,
+              link: `/${item.key}`,
             }),
           ),
       );

pkgs/docs-site/src/lib/index.ts

@@ -0,0 +1 @@
+export * from "./docs";

pkgs/docs-site/src/lib/markdown/main.css

@@ -1,3 +1,6 @@
+@import url("./shiki.css");
+@import url("./admonition.css");
+
 code {
   font-family:
     ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,

pkgs/docs-site/src/lib/markdown/vite.ts

@@ -14,7 +14,6 @@ import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import { toc } from "mdast-util-toc";
 import type { Nodes } from "mdast";
 import type { Element } from "hast";
-import * as config from "../src/config";
 import {
   transformerNotationDiff,
   transformerNotationHighlight,
@@ -25,7 +24,17 @@ import { visit } from "unist-util-visit";
 import { h } from "hastscript";
 import type { PluginOption } from "vite";
 
-export default function (): PluginOption {
+export type Options = {
+  codeLightTheme?: string;
+  codeDarkTheme?: string;
+  minLineNumberLines?: number;
+};
+
+export default function ({
+  codeLightTheme = "catppuccin-latte",
+  codeDarkTheme = "catppuccin-macchiato",
+  minLineNumberLines = 4,
+}: Options = {}): PluginOption {
   return {
     name: "markdown-loader",
     async transform(code, id) {
@@ -42,8 +51,8 @@ export default function (): PluginOption {
         .use(rehypeShiki, {
           defaultColor: false,
           themes: {
-            light: "catppuccin-latte",
+            light: codeLightTheme,
-            dark: "catppuccin-macchiato",
+            dark: codeDarkTheme,
           },
           transformers: [
             transformerNotationDiff({
@@ -53,7 +62,7 @@ export default function (): PluginOption {
             transformerRenderIndentGuides(),
             transformerMetaHighlight(),
             transformerLineNumbers({
-              minLines: config.markdown.minLineNumberLines,
+              minLines: minLineNumberLines,
             }),
           ],
         })
@@ -187,7 +196,7 @@ function linkMigration() {
       if (!cleanUrl.startsWith("/")) {
         throw new Error(`invalid doc link: ${cleanUrl}`);
       }
-      node.url = `${config.docs.base}/${cleanUrl}`;
+      node.url = `/docs/${cleanUrl}`;
     });
   };
 }

pkgs/docs-site/src/routes/+layout.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
-  import * as config from "~/config";
+  import favicon from "$lib/assets/favicon.svg";
+  import type { NavLink } from "$lib";
+  import { onNavigate } from "$app/navigation";
   import "./index.css";
 
-  import favicon from "$lib/assets/favicon.svg";
-  import type { NavLink } from "./docs";
-  import { onNavigate } from "$app/navigation";
-
   const { data, children } = $props();
+  const docs = $derived(data.docs);
   let menuOpen = $state(false);
   onNavigate(() => {
     menuOpen = false;
-    console.log(menuOpen);
   });
 </script>
 
@@ -19,18 +17,11 @@
 </svelte:head>
 
 <div class="global-bar">
-  <span class="logo">Logo</span>
+  <span class="logo">Clan Docs</span>
   <nav>
     <div class={["menu", menuOpen && "open"]}>
       <button onclick={() => (menuOpen = !menuOpen)}>Menu</button>
-      <ul>
+      {@render navLinks(docs.navLinks)}
-        <li><a href="/">Home</a></li>
-        <li><a href={config.blog.base}>Blog</a></li>
-        <li>
-          <a href={config.docs.base}>Docs</a>
-          {#if data.docs}{@render navLinks(data.docs.navLinks)}{/if}
-        </li>
-      </ul>
     </div>
   </nav>
 </div>

pkgs/docs-site/src/routes/+layout.ts

@@ -0,0 +1,9 @@
+import { Docs } from "$lib";
+
+export const prerender = true;
+
+export async function load() {
+  return {
+    docs: await new Docs().init(),
+  };
+}

pkgs/docs-site/src/routes/[...path]/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import "./markdown.css";
+  import "$lib/markdown/main.css";
-  import "./shiki.css";
-  import "./admonition.css";
   let { data } = $props();
 </script>
 
@@ -16,7 +14,6 @@
   </div>
 </div>
 
-<!-- {JSON.stringify(data.frontmatter)} -->
 <style>
   .container {
     display: flex;

pkgs/docs-site/src/routes/[...path]/+page.ts

@@ -0,0 +1,12 @@
+import { error } from "@sveltejs/kit";
+
+export async function load({ params, parent }) {
+  const { docs } = await parent();
+  const article = docs.articles[params.path];
+  if (!article) {
+    error(404, "");
+  }
+
+  const { frontmatter, toc, content } = await article();
+  return { frontmatter, toc, content };
+}

pkgs/docs-site/vite.config.ts

@@ -1,6 +1,6 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
-import markdown from "./vitePlugins/markdown";
+import markdown from "./src/lib/markdown/vite";
 
 export default defineConfig({
   plugins: [sveltekit(), markdown()],

site/src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

site/src/routes/+layout.ts

@@ -1,17 +0,0 @@
-import * as config from "~/config";
-import { Docs } from "./docs";
-
-export const prerender = true;
-export const trailingSlash = "always";
-
-export async function load({ url }) {
-  const path = url.pathname.endsWith("/")
-    ? url.pathname.slice(0, -1)
-    : url.pathname;
-  return {
-    docs:
-      path != config.docs.base && !path.startsWith(`${config.docs.base}/`)
-        ? null
-        : await new Docs().init(),
-  };
-}

site/src/routes/blog/+page.svelte

@@ -1 +0,0 @@
-<h1>Blog</h1>

site/src/routes/docs/+layout.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import type { NavLink } from ".";
-  let { children, data } = $props();
-  let docs = $derived(data.docs!);
-</script>
-
-{#snippet navLinks(nLinks: NavLink[])}
-  <ul>
-    {#each nLinks as nLink}
-      {@render navLink(nLink)}
-    {/each}
-  </ul>
-{/snippet}
-
-{#snippet navLink(nLink: NavLink)}
-  {#if "items" in nLink}
-    <li>
-      <details open={!nLink.collapsed}>
-        <summary><span class="label group">{nLink.label}</span></summary>
-        {@render navLinks(nLink.items)}
-      </details>
-    </li>
-  {:else}
-    <li>
-      <a href={nLink.link}>{nLink.label}</a>
-    </li>
-  {/if}
-{/snippet}
-
-<div class="container">
-  <nav>
-    {@render navLinks(docs.navLinks)}
-  </nav>
-  <div class="content">
-    {@render children()}
-  </div>
-</div>
-
-<style>
-  .container {
-    display: flex;
-  }
-  nav {
-    display: none;
-  }
-
-  summary {
-    list-style: none;
-    cursor: pointer;
-  }
-</style>

site/src/routes/docs/+page.svelte

@@ -1,3 +0,0 @@
-<h1>What is Clan</h1>
-
-Content

site/src/routes/docs/[...path]/+page.ts

@@ -1,24 +0,0 @@
-import { error } from "@sveltejs/kit";
-
-const articles = Object.fromEntries(
-  Object.entries(
-    import.meta.glob<{
-      content: string;
-      frontmatter: Record<string, any>;
-      toc: string;
-    }>("../**/*.md"),
-  ).map(([key, fn]) => [key.slice("../".length, -".md".length), fn]),
-);
-
-export async function load({ params }) {
-  const path = params.path.endsWith("/")
-    ? params.path.slice(0, -1)
-    : params.path;
-  const article = articles[path];
-  if (!article) {
-    error(404, "");
-  }
-
-  const { frontmatter, toc, content } = await article();
-  return { frontmatter, toc, content };
-}