chore(docs): migrate to astro-pigment, drop custom site infrastructure

Replaces the hand-rolled Astro docs site (layouts, components, stores, attachments, custom CSS pipeline) with astro-pigment documentation theme. Removes ~4000 lines of custom code and unused dependencies (CodeMirror, MDX, sitemap, postcss-preset-env, etc.).

Author: psd-coder

apps/docs/astro.config.mjs

@@ -1,115 +1,43 @@
 // @ts-check
-import { defineConfig, fontProviders } from "astro/config";
-import { createHash } from "node:crypto";
-import path from "node:path";
-import mdx from "@astrojs/mdx";
-import sitemap from "@astrojs/sitemap";
-import postcssPresetEnv from "postcss-preset-env";
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import rehypeSlug from "rehype-slug";
-import { shikiThemes } from "./src/config.ts";
-
-/** Fixes heading anchor links broken by <base href="/">: rewrites #fragment → slug#fragment */
-function rehypeFixBaseAnchors() {
-  return (tree, file) => {
-    const match = file.history[0]?.match(/\/content\/docs\/(.+)\.mdx?$/);
-    if (!match || match[1] === "index") return;
-
-    const slug = match[1];
-    (function walk(node) {
-      if (
-        node.tagName === "a" &&
-        node.properties?.className?.includes("anchor") &&
-        typeof node.properties.href === "string" &&
-        node.properties.href.startsWith("#")
-      ) {
-        node.properties.href = `${slug}${node.properties.href}`;
-      }
-      if (node.children) node.children.forEach(walk);
-    })(tree);
-  };
-}
+import { defineConfig } from "astro/config";
+import docsTheme from "astro-pigment";
 
 const nanoTagsRoot = new URL("../../packages/nanotags", import.meta.url).pathname;
 
 // https://astro.build/config
 export default defineConfig({
-  site: "https://psd-coder.github.io",
-  base: process.env.CI ? "/nanotags/" : "/",
-  integrations: [mdx(), sitemap()],
-  markdown: {
-    shikiConfig: {
-      themes: shikiThemes,
-    },
-    rehypePlugins: [
-      rehypeSlug,
-      [
-        rehypeAutolinkHeadings,
-        {
-          behavior: "prepend",
-          properties: { className: ["anchor"], ariaHidden: true, tabIndex: -1 },
-          content: [],
+  integrations: [
+    docsTheme({
+      project: {
+        name: "nanotags",
+        description:
+          "Tiny Web Components wrapper powered by Nano Stores reactivity. No Shadow DOM, typed builder API, reactive props and refs via nanostores, automatic cleanup on disconnect.",
+        license: {
+          name: "MIT",
+          url: "https://github.com/psd-coder/nanotags/blob/main/LICENSE",
         },
-      ],
-      rehypeFixBaseAnchors,
-    ],
-  },
-  fonts: [
-    {
-      provider: fontProviders.local(),
-      name: "Martian Grotesk",
-      cssVariable: "--font-sans",
-      options: {
-        variants: [
-          {
-            weight: "100 900",
-            style: "normal",
-            src: ["./src/assets/fonts/MartianGrotesk-VF.woff2"],
-          },
-        ],
+        github: { user: "psd-coder", repository: "nanotags" },
       },
-    },
-    {
-      provider: fontProviders.local(),
-      name: "Martian Mono",
-      cssVariable: "--font-mono",
-      options: {
-        variants: [
-          {
-            weight: 400,
-            style: "normal",
-            src: ["./src/assets/fonts/MartianMono-Regular.woff2"],
-          },
+      author: { name: "Pavel Grinchenko", url: "https://x.com/psd_coder" },
+      credits: [{ name: "Evil Martians", url: "https://evilmartians.com/" }],
+      customCss: ["./src/assets/custom.css"],
+      logo: "./src/assets/logo.svg",
+      icon: "./src/assets/favicon.svg",
+      docs: {
+        navLinks: [
+          { href: "/", label: "Getting Started" },
+          { href: "/api", label: "API" },
+          { href: "/cookbook", label: "Cookbook" },
+          { href: "/examples", label: "Examples" },
         ],
       },
-    },
+      extraEntries: "./src/extra-entries.ts",
+    }),
   ],
   vite: {
     optimizeDeps: {
       entries: ["!src/content/examples/**"],
     },
-    css: {
-      modules: {
-        generateScopedName(name, filename) {
-          const dir = path.basename(path.dirname(filename));
-          const hash = createHash("sha256").update(`${filename}:${name}`).digest("hex").slice(0, 5);
-
-          return `${dir}__${name}_${hash}`;
-        },
-      },
-      postcss: {
-        plugins: [
-          postcssPresetEnv({
-            stage: 3,
-            features: {
-              "nesting-rules": true,
-              "custom-media-queries": true,
-              "media-query-ranges": true,
-            },
-          }),
-        ],
-      },
-    },
     plugins: [
       {
         name: "nanotags-source",

apps/docs/package.json

@@ -13,25 +13,15 @@
     "format:styles": "stylelint \"src/**/*.css\" --fix"
   },
   "dependencies": {
-    "@astrojs/mdx": "^5.0.2",
-    "@astrojs/sitemap": "^3.7.1",
-    "@catppuccin/codemirror": "^1.0.3",
-    "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/lang-html": "^6.4.9",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/language": "^6.12.2",
-    "@codemirror/state": "^6.6.0",
     "@nanostores/persistent": "^1.3.3",
     "astro": "^6.0.8",
-    "codemirror": "^6.0.1",
+    "astro-pigment": "^0.11.1",
     "es-toolkit": "^1.45.1",
     "linkedom": "^0.18.12",
-    "nanotags": "workspace:*",
     "nanoid": "^5.1.7",
     "nanostores": "^1.2.0",
-    "rehype-autolink-headings": "^7.1.0",
-    "rehype-slug": "^6.0.0",
+    "nanotags": "workspace:*",
+    "sharp": "^0.34.0",
     "valibot": "^1.3.1"
   },
   "devDependencies": {
@@ -40,7 +30,6 @@
     "@css-modules-kit/codegen": "^0.10.0",
     "@css-modules-kit/ts-plugin": "^0.10.0",
     "@types/node": "^24.12.0",
-    "postcss-preset-env": "^11.2.0",
     "stylelint": "^17.5.0",
     "stylelint-config-clean-order": "^8.0.1",
     "stylelint-config-standard": "^40.0.0",

apps/docs/public/apple-touch-icon.png

@@ -0,0 +1,4 @@
+:root {
+  --theme-hue-override: 135;
+  --layout-width: 1280px;
+}