Migrate site to Astro

.github/workflows/flakehub-publish-rolling.yml

@@ -18,4 +18,3 @@ jobs:
         with:
           rolling: true
           visibility: "public"
-

.gitignore

@@ -4,17 +4,14 @@
 # Nix artifacts
 result
 
-# Tailwind artifacts
-.temp.*.tailwind.config.cjs
-
 # htmltest artifacts
 /tmp/
 
 # Lychee cache
 .lycheecache
 
-# îles artifacts
-/.iles-ssg-temp/
+# Astro artifacts
+/.astro/
+
+# Site build
 /dist/
-__unconfig_iles.config.ts
-.direnv

.prettierignore

@@ -1,3 +1,8 @@
+/.astro/
 /.direnv/
+/.vscode/
+/dist/
+pnpm-lock.yaml
 *.d.ts
-/nix/
+**/*.mdx
+

README.md

@@ -81,17 +81,17 @@ Zero to Nix's "stack" 🥞:
 
 The site uses a number of custom [MDX] components to spice up the usual Markdown content.
 
-| Component                                                                | What it does                                                                                                                            |
-| :----------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| Component                                                                | What it does                                                                                                                           |
+| :----------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------- |
 | [`Admonition`](./src/components/mdx/Admonition.vue)                      | An admonition block of type `danger`, `info`, `success`, or `warning`.<br /><br />Adding an `id` makes it a stateful callout dropdown. |
-| [`Concept`](./src/components/mdx/concepts/Concept.vue)                   | Add a hoverable tool tip for a concept                                                                                                  |
-| [`Language`](./src/components/mdx/stateful/Language.vue)                 | Displays which (programming) language the user has selected                                                                             |
-| [`Languages`](./src/components/mdx/stateful/Languages.vue)               | Provides a (programming) language selector                                                                                              |
-| [`NixStorePath`](./src/components/concepts/NixStorePath.vue)             | Provides a colorful visualization of Nix store path components                                                                          |
-| [`Shell`](./src/components/code/Shell.vue)                               | Provides language- and system-specific shell commands                                                                                   |
-| [`SpecificLanguage`](./src/components/mdx/stateful/SpecificLanguage.vue) | Displays the enclosed content only if the user has selected a specific language                                                         |
-| [`System`](./src/components/mdx/stateful/System.vue)                     | Displays the currently selected system (Linux vs. macOS)                                                                                |
-| [`Systems`](./src/components/stateful/Systems.vue)                       | Provides a system selector (Linux vs. macOS)                                                                                            |
+| [`Concept`](./src/components/mdx/concepts/Concept.vue)                   | Add a hoverable tool tip for a concept                                                                                                 |
+| [`Language`](./src/components/mdx/stateful/Language.vue)                 | Displays which (programming) language the user has selected                                                                            |
+| [`Languages`](./src/components/mdx/stateful/Languages.vue)               | Provides a (programming) language selector                                                                                             |
+| [`NixStorePath`](./src/components/concepts/NixStorePath.vue)             | Provides a colorful visualization of Nix store path components                                                                         |
+| [`Shell`](./src/components/code/Shell.vue)                               | Provides language- and system-specific shell commands                                                                                  |
+| [`SpecificLanguage`](./src/components/mdx/stateful/SpecificLanguage.vue) | Displays the enclosed content only if the user has selected a specific language                                                        |
+| [`System`](./src/components/mdx/stateful/System.vue)                     | Displays the currently selected system (Linux vs. macOS)                                                                               |
+| [`Systems`](./src/components/stateful/Systems.vue)                       | Provides a system selector (Linux vs. macOS)                                                                                           |
 
 > **Note**: any time you use one of these components in an [MDX] file, you need to add a `client:load` directive to it.
 > This is one of [îles][iles]' so-called [hydration directives][hydration].
@@ -152,7 +152,7 @@ We also recommend adding these settings to your local `.vscode/settings.json`:
     "editor.formatOnSave": false,
     // This is a nice helper for longer sentences
     "editor.wordWrapColumn": 100,
-    "editor.wordWrap": "wordWrapColumn"
+    "editor.wordWrap": "wordWrapColumn",
   },
   // Format everything using the Prettier config
   "editor.defaultFormatter": "esbenp.prettier-vscode",
@@ -164,8 +164,8 @@ We also recommend adding these settings to your local `.vscode/settings.json`:
     "dist": true,
     "pnpm-lock.yaml": true,
     "*.d.ts": true,
-    "tmp": true
-  }
+    "tmp": true,
+  },
 }
 ```
 

astro.config.mjs

@@ -0,0 +1,34 @@
+import alpinejs from "@astrojs/alpinejs";
+import mdx from "@astrojs/mdx";
+import sitemap from "@astrojs/sitemap";
+import tailwind from "@astrojs/tailwind";
+import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
+import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
+import expressiveCode from "astro-expressive-code";
+import icon from "astro-icon";
+import { defineConfig } from "astro/config";
+import remarkHeadingId from "remark-heading-id";
+
+export default defineConfig({
+  site: "https://zero-to-nix.com",
+  integrations: [
+    alpinejs({
+      entrypoint: "./src/entrypoint",
+    }),
+    expressiveCode({
+      themes: ["github-dark"],
+      emitExternalStylesheet: true,
+      defaultProps: {
+        showLineNumbers: false,
+      },
+      plugins: [pluginCollapsibleSections(), pluginLineNumbers()],
+    }),
+    icon(),
+    mdx({
+      //gfm: true,
+      remarkPlugins: [remarkHeadingId],
+    }),
+    sitemap(),
+    tailwind(),
+  ],
+});

flake.nix

@@ -53,6 +53,9 @@
               # JS
               nodejs
               pnpm
+
+              # Serve locally
+              static-web-server
             ];
 
             run = pkg: runPkg pkgs pkg;
@@ -103,10 +106,6 @@
                 ${run "alex"} --quiet src/pages
               '')
 
-              (writeScriptBin "check-types" ''
-                ${run "pnpm"} run typecheck
-              '')
-
               (writeScriptBin "preview" ''
                 build
                 ${run "pnpm"} run preview
@@ -119,7 +118,6 @@
                 check-internal-links
                 lint-style
                 check-sensitivity
-                check-types
               '')
             ];
 

lychee.toml

@@ -1,3 +1,5 @@
 exclude = [
-  'https://github.com\.*',
-] # TODO: remove this when we figure out a way around GitHub's rate limits
+  'https://flakehub.com\.*',
+  'https://github.com\.*',   # TODO: remove this when we figure out a way around GitHub's rate limits
+  'file://*',
+]

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-command = "./scripts/netlify-redirects.sh >> netlify.toml && pnpm run build"
+command = "./scripts/netlify-redirects.sh >> netlify.toml && pnpm run check && pnpm run build"
 publish = "dist"
 
 [context.production]

nix/templates/pkg/javascript/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>An example website built using Nix and Vite</title>