docs site: fix styles and make interactive

site/astro.config.mjs

@@ -1,17 +1,14 @@
 // @ts-check
-import { defineConfig } from "astro/config";
+import { defineConfig, fontProviders } from "astro/config";
 import { satteri } from "@astrojs/markdown-satteri";
 import netlify from "@astrojs/netlify";
-import expressiveCode, { ExpressiveCodeTheme } from "astro-expressive-code";
+import expressiveCode from "astro-expressive-code";
 import icon from "astro-iconset";
 
-import {
-  light as nixCodeLight,
-  dark as nixCodeDark,
-} from "./src/assets/nixCodeTheme.ts";
-
 import tailwindcss from "@tailwindcss/vite";
 
+import alpinejs from "@astrojs/alpinejs";
+
 export default defineConfig({
   site: "https://docs.nixos.org/",
 
@@ -22,17 +19,18 @@ export default defineConfig({
       // include: { mdi: [ "github", ] },
     }),
     expressiveCode({
-      themes: [
-        ExpressiveCodeTheme.fromJSONString(JSON.stringify(nixCodeLight)),
-        ExpressiveCodeTheme.fromJSONString(JSON.stringify(nixCodeDark)),
-      ],
+      themes: ["catppuccin-latte", "catppuccin-mocha"],
       defaultProps: {
         wrap: true,
       },
       styleOverrides: {
-        codeFontFamily: '"Fira Code Variable", ui-monospace, monospace',
+        codeFontFamily: "var(--font-fira-code), ui-monospace, monospace",
       },
+      useDarkModeMediaQuery: false,
+      themeCssSelector: (theme, { styleVariants }) =>
+        theme.name === styleVariants[1]?.theme.name ? ".dark" : false,
     }),
+    alpinejs({ entrypoint: "./src/alpine.ts" }),
   ],
 
   markdown: {
@@ -43,6 +41,52 @@ export default defineConfig({
     }),
   },
 
+  fonts: [
+    {
+      provider: fontProviders.local(),
+      name: "Route159",
+      cssVariable: "--font-route159",
+      options: {
+        variants: [
+          {
+            src: ["./src/assets/fonts/route159/Route159-Regular.woff"],
+            weight: "normal",
+            style: "normal",
+          },
+          {
+            src: ["./src/assets/fonts/route159/Route159-Bold.woff"],
+            weight: "bold",
+            style: "normal",
+          },
+        ],
+      },
+    },
+    {
+      provider: fontProviders.npm({ remote: false }),
+      name: "InterVariable",
+      styles: ["normal", "italic"],
+      cssVariable: "--font-inter",
+      weights: ["100 900"],
+      featureSettings: "'dlig'",
+      options: {
+        package: "inter-ui",
+        file: "inter-variable.css",
+      },
+    },
+    {
+      provider: fontProviders.npm({ remote: false }),
+      name: "Fira Code Variable",
+      styles: ["normal", "italic"],
+      cssVariable: "--font-fira-code",
+      weights: ["100 900"],
+      featureSettings: "'dlig'",
+      options: {
+        package: "@fontsource-variable/fira-code",
+        file: "index.css",
+      },
+    },
+  ],
+
   adapter: netlify(),
 
   vite: {

site/package.json

@@ -12,14 +12,17 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
+    "@astrojs/alpinejs": "^1.0.0",
     "@astrojs/check": "^0.9.10",
     "@astrojs/netlify": "^8.2.0",
     "@fontsource-variable/fira-code": "^5.3.0",
-    "@fontsource-variable/inter": "^5.3.0",
     "@tailwindcss/vite": "^4.3.3",
+    "@types/alpinejs": "^3.13.11",
+    "alpinejs": "^3.17.2",
     "astro": "^7.2.0",
     "astro-expressive-code": "^0.44.0",
     "hast": "^0.0.2",
+    "inter-ui": "^4.1.1",
     "satteri": "^0.9.5",
     "sharp": "^0.34.5",
     "tailwindcss": "^4.3.3",

site/src/alpine.ts

@@ -0,0 +1,20 @@
+import type { Alpine } from "alpinejs";
+
+const navStore = {
+  open: false,
+  toggle() {
+    this.open = !this.open;
+  },
+};
+
+const tocStore = {
+  open: false,
+  toggle() {
+    this.open = !this.open;
+  },
+};
+
+export default (alpine: Alpine) => {
+  alpine.store("nav", navStore);
+  alpine.store("toc", tocStore);
+};