Migrate site to Astro

.github/workflows/ci.yml

@@ -62,9 +62,9 @@ jobs:
           - nix-system: "x86_64-linux"
             runner: "ubuntu-22.04"
     steps:
-    - uses: actions/checkout@v4
-    - uses: DeterminateSystems/nix-installer-action@main
-    - uses: DeterminateSystems/magic-nix-cache-action@main
+      - uses: actions/checkout@v4
+      - uses: DeterminateSystems/nix-installer-action@main
+      - uses: DeterminateSystems/magic-nix-cache-action@main
 
-    - name: Build packages in pkg templates
-      run: ./scripts/build-pkg-templates.sh
+      - name: Build packages in pkg templates
+        run: ./scripts/build-pkg-templates.sh

.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,21 +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)                                                                                            |
-
-> **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].
-> There are other directives available, but [`client:load`][client-load] is the one that we need to use, as it ensures that the component is loaded as soon as the user comes to the page.
+| [`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)                                                                                           |
 
 ## Directory structure
 
@@ -152,7 +148,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 +160,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,41 @@
+import alpinejs from "@astrojs/alpinejs";
+import mdx from "@astrojs/mdx";
+import react from "@astrojs/react";
+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 remarkEmoji from "remark-emoji";
+import remarkHeadingId from "remark-heading-id";
+
+export default defineConfig({
+  integrations: [
+    alpinejs({
+      entrypoint: "./src/entrypoint",
+    }),
+    expressiveCode({
+      themes: ["github-dark"],
+      emitExternalStylesheet: true,
+      defaultProps: {
+        showLineNumbers: false,
+      },
+      plugins: [pluginCollapsibleSections(), pluginLineNumbers()],
+    }),
+    icon(),
+    mdx({
+      //gfm: true,
+      remarkPlugins: [remarkEmoji, remarkHeadingId],
+    }),
+    sitemap(),
+    tailwind(),
+    react(),
+  ],
+  server: {
+    open: true,
+    port: 3000,
+  },
+  site: "https://zero-to-nix.com",
+});

flake.nix

@@ -1,23 +1,14 @@
 {
   description = "Zero to Nix: Your guide to learning Nix and flakes";
 
-  inputs.nixpkgs.url = "https://flakehub.com/f/NixOS/nixpkgs/0.2405.*.tar.gz";
+  inputs.nixpkgs.url = "https://flakehub.com/f/NixOS/nixpkgs/0.1.*";
 
   outputs =
     { self
     , nixpkgs
     }:
 
     let
-      # Conveniences for Nixpkgs
-      overlays = [
-        (self: super: {
-          nodejs = super.nodejs_18;
-          pnpm = super.nodePackages.pnpm;
-          alex = super.nodePackages.alex;
-        })
-      ];
-
       # Systems supported
       allSystems = [
         "x86_64-linux" # 64-bit Intel/AMD Linux
@@ -27,7 +18,7 @@
       ];
 
       forAllSystems = f: nixpkgs.lib.genAttrs allSystems (system: f {
-        pkgs = import nixpkgs { inherit overlays system; };
+        pkgs = import nixpkgs { inherit system; };
       });
 
       # Helper function for scripting
@@ -44,7 +35,6 @@
 
               # Language
               vale
-              alex
 
               # Link checking
               htmltest
@@ -53,6 +43,9 @@
               # JS
               nodejs
               pnpm
+
+              # Serve locally
+              static-web-server
             ];
 
             run = pkg: runPkg pkgs pkg;
@@ -99,14 +92,6 @@
                 ${run "vale"} src/pages
               '')
 
-              (writeScriptBin "check-sensitivity" ''
-                ${run "alex"} --quiet src/pages
-              '')
-
-              (writeScriptBin "check-types" ''
-                ${run "pnpm"} run typecheck
-              '')
-
               (writeScriptBin "preview" ''
                 build
                 ${run "pnpm"} run preview
@@ -118,8 +103,6 @@
                 build-ci
                 check-internal-links
                 lint-style
-                check-sensitivity
-                check-types
               '')
             ];