Port docs to Astro Starlight

packages/shelter-docs/.gitignore

@@ -1,2 +1,22 @@
-docs/.vitepress/cache
-demos/dist
+# build output
+dist/
+demos/dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

packages/shelter-docs/astro.config.mjs

@@ -0,0 +1,64 @@
+// @ts-check
+import { defineConfig } from "astro/config";
+import starlight from "@astrojs/starlight";
+import shelterLogo from "shelter-assets/png/banner.png";
+import shelterIcon from "shelter-assets/png/logo.png";
+
+import UnoCSS from "unocss/astro";
+import vue from "@astrojs/vue";
+import solidJs from "@astrojs/solid-js";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    UnoCSS({}),
+    vue(),
+    solidJs(),
+    starlight({
+      logo: {
+        src: shelterLogo,
+        replacesTitle: true,
+      },
+      favicon: shelterIcon,
+      title: "shelter",
+      social: [
+        { icon: "github", label: "GitHub", href: "https://github.com/uwu/shelter" },
+        { icon: "discord", label: "Discord", href: "https://discord.gg/FhHQQrVs7U" },
+      ],
+      customCss: ["./src/styles/custom.css", "./src/styles/shelter-demo.css"],
+      sidebar: [
+        {
+          label: "Install",
+          slug: "install",
+        },
+        {
+          label: "Plugins",
+          slug: "plugins",
+        },
+        {
+          label: "Dev Guides",
+          items: [
+            { label: "Getting Started", slug: "guides" },
+            { label: "Lune", slug: "guides/lune" },
+            { label: "Lune SSG", slug: "guides/lune-ssg" },
+            { label: "Your First Plugin", slug: "guides/plugin" },
+            { label: "Settings, Storage & UI", slug: "guides/settings" },
+            { label: "Patterns", slug: "guides/patterns" },
+            { label: "Ideals", slug: "guides/ideals" },
+            { label: "Background", slug: "guides/background" },
+            { label: "Injector Integration", slug: "guides/injectors" },
+            { label: "How Injectors Work", slug: "guides/injection" },
+          ],
+        },
+        {
+          label: "API Reference",
+          slug: "reference",
+        },
+        {
+          label: "shelter UI",
+          slug: "ui",
+        },
+      ],
+    }),
+  ],
+});

packages/shelter-docs/package.json

@@ -1,26 +1,27 @@
 {
-  "name": "docs",
-  "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "vitepress dev docs",
-    "build": "vitepress build docs",
-    "preview": "vitepress preview docs"
-  },
-  "devDependencies": {
-    "@iconify-json/carbon": "^1.2.8",
-    "@shikijs/vitepress-twoslash": "^3.4.0",
-    "babel-preset-solid": "1.6.16",
-    "unocss": "^66.1.0",
-    "vite-plugin-solid": "^2.10.1",
-    "vitepress": "^1.6.3"
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
   },
   "dependencies": {
-    "@uwu/shelter-ui": "workspace:^",
+    "@uwu/shelter-ui": "workspace:*",
     "@vueuse/core": "^13.1.0",
     "@vueuse/integrations": "^13.1.0",
-    "fuse.js": "^7.1.0",
-    "shiki": "^1.1.7",
-    "solid-js": "1.6.16",
-    "vue": "^3.5.13"
+    "astro": "^6.0.1",
+    "fuse.js": "^7.3.0",
+    "sharp": "^0.34.2",
+    "shelter-assets": "workspace:*",
+    "solid-js": "^1.9.12",
+    "vue": "^3.5.32"
+  },
+  "devDependencies": {
+    "@astrojs/solid-js": "^6.0.1",
+    "@astrojs/starlight": "^0.38.3",
+    "@astrojs/vue": "^6.0.1",
+    "unocss": "^66.1.0"
   }
 }

packages/shelter-docs/src/components/Internal_ShelterDemo.tsx

@@ -0,0 +1,38 @@
+import { createResource, onCleanup, onMount } from "solid-js";
+
+const [demosModule] = createResource(() => import("../../demos/src/index.tsx"));
+
+export interface ShelterDemoProps {
+  demo: string;
+  margin?: string;
+}
+
+function ShelterDemoInner(props: ShelterDemoProps) {
+  const { mountDemo } = demosModule()!;
+
+  let div: HTMLDivElement | undefined;
+
+  let dispose: () => void | undefined;
+  onMount(() => {
+    dispose = mountDemo(props.demo, div!);
+  });
+
+  onCleanup(() => dispose?.());
+
+  return (
+    <div
+      ref={div}
+      class="shelter-demo"
+      style={{
+        padding: "1rem",
+        "margin-top": props.margin ?? "1rem",
+        "border-radius": "8px",
+        "background-color": "var(--background-surface-high)",
+        border: "1px solid var(--border-subtle)",
+      }}
+    />
+  );
+}
+
+// load bearing fragment
+export default (props: ShelterDemoProps) => <>{demosModule.loading ? <></> : <ShelterDemoInner {...props} />}</>;

packages/shelter-docs/src/components/Pill.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  col?: "red" | "green" | "blue" | "shelter";
+}
+
+const colour = {
+  red: "lch(34.44% 60.47 31.97)",
+  green: "lch(34.44% 60.47 131.97)",
+  blue: "lch(34.44% 60.47 231.97)",
+  shelter: "-webkit-linear-gradient(-90deg, #2a3b4b, #2a7267)",
+}[Astro.props.col ?? "blue"];
+---
+
+<div class="inline-block text-sm mx-2 px-2.5 py-1 font-semibold rounded-full" style={{ background: colour }}>
+  <slot />
+</div>

packages/shelter-docs/docs/.vitepress/theme/components/PluginListing.vue → packages/shelter-docs/src/components/PluginListing.vue

@@ -60,7 +60,7 @@ const plugins = computed(() => (search.value ? results.value.map((i) => i.item)
 </script>
 
 <template>
-  <div h="1px" bg="$vp-c-divider" m="t-4" />
+  <div h="1px" style="background: var(--sl-color-hairline-shade)" m="t-4" />
   <div flex="~" class="children:my-auto" p="2">
     <i i-carbon-search m="r-2" opacity="50" />
     <input class="w-full" v-model="search" type="text" role="search" placeholder="Search..." />

packages/shelter-docs/src/components/ShelterDemo.astro

@@ -0,0 +1,14 @@
+---
+// just a shim component
+
+import InternalShelterDemo from "./Internal_ShelterDemo.tsx";
+
+interface Props {
+  demo: string;
+  margin?: string;
+}
+
+const { demo, margin } = Astro.props;
+---
+
+<InternalShelterDemo client:only="solid-js" demo={demo} margin={margin} />

packages/shelter-docs/src/content.config.ts

@@ -0,0 +1,7 @@
+import { defineCollection } from "astro:content";
+import { docsLoader } from "@astrojs/starlight/loaders";
+import { docsSchema } from "@astrojs/starlight/schema";
+
+export const collections = {
+  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+};