From 8998e6f8dab096a2bccd79e852d1803360e076a5 Mon Sep 17 00:00:00 2001 From: spacjalex <57222349+spacjalex@users.noreply.github.com> Date: Tue, 30 Sep 2025 22:05:05 +0200 Subject: [PATCH 1/2] replace Vue with Astro, update components, rm unused links --- README.md | 38 +++++++++++++------------------------- 1 file changed, 13 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 2b1f6680..29e9fba6 100644 --- a/README.md +++ b/README.md @@ -73,8 +73,7 @@ The Zero to Nix site is automatically published on [Vercel], which also provides Zero to Nix's "stack" 🥞: -- [îles][iles] for content management and site generation -- [Vue] for templating +- [Astro] for content management, templating and site generation - [MDX] for content - [Tailwind] for CSS @@ -84,25 +83,22 @@ The site uses a number of custom [MDX] components to spice up the usual Markdown | Component | What it does | | :----------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------- | -| [`Admonition`](./src/components/mdx/Admonition.vue) | An admonition block of type `danger`, `info`, `success`, or `warning`.

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) | +| [`Admonition`](./src/components/mdx/Admonition.astro) | An admonition block of type `danger`, `info`, `success`, or `warning`.

Adding an `id` makes it a stateful callout dropdown. | +| [`Language`](./src/components/mdx/Language.astro) | Displays which (programming) language the user has selected | +| [`Languages`](./src/components/mdx/Languages.astro) | Provides a (programming) language selector | +| [`NixStorePath`](./src/components/mdx/NixStorePath.astro) | Provides a colorful visualization of Nix store path components | +| [`SpecificLanguage`](./src/components/mdx/SpecificLanguage.astro) | Displays the enclosed content only if the user has selected a specific language | +| [`System`](./src/components/mdx/System.vue) | Displays the currently selected system (Linux vs. macOS) | +| [`Systems`](./src/components/Systems.vue) | Provides a system selector (Linux vs. macOS) | ## Directory structure | Directory | What it contains | | :------------------------------------ | :----------------------------------------------------------------------------- | | [`src/assets`](./src/assets/) | Assets to be processed (only CSS for now) | -| [`src/components`](./src/components/) | [Vue] components used throughout the site | -| [`src/layouts`](./src/layouts/) | [Vue] layouts for specific page types | -| [`src/logic`](./src/logic/) | TypeScript helper stuff for state and content management | -| [`src/pages`](./src/pages/) | The content of the site (all [MDX]) plus some Vue templates for specific pages | +| [`src/components`](./src/components/) | [Astro] components used throughout the site | +| [`src/layouts`](./src/layouts/) | [Astro] layouts for specific page types | +| [`src/pages`](./src/pages/) | The content of the site (all [MDX]) plus some Astro templates for specific pages | | [`public`](./public/) | Assets that won't be processed (favicon, etc.) | ## Page metadata @@ -124,17 +120,13 @@ For [concept pages](./src/pages/concepts/): There are a few other important files you should be aware of when working on the site: -- [`src/app.ts`](./src/app.ts) defines global page metadata - [`src/site.ts`](./src/site.ts) defines site-level values, like the title, description, navbar links, and more. -- [`src/logic/content.ts`](./src/logic/content.ts) provides the content management logic for the site (type-safe page frontmatter, functions to fetch and sort documents, and more) -- [`src/logic/state.ts`](./src/logic/state.ts) defines all stateful logic using the [nanostores] library -- [`src/logic/theme.ts`](./src/logic/theme.ts) provides logic for the light/dark theme switcher +- [`src/content/`](./src/content/) provides the content management logic for the site (type-safe page frontmatter, functions to fetch and sort documents, and more) ## Suggested VS Code settings If you happen to use VS Code as your editor, we recommend adding these extensions: -- [`Vue.volar`][vsc-vue] - [`unifiedjs.vscode-mdx`][vsc-mdx] - [`bradlc.vscode-tailwindcss`][vsc-tailwind] - [`esbenp.prettier-vscode`][vsc-prettier] @@ -166,14 +158,12 @@ We also recommend adding these settings to your local `.vscode/settings.json`: } ``` +[astro]: https://astro.build [ci]: ./.github/workflows/test.yml -[client-load]: https://iles.pages.dev/guide/hydration#clientload [detsys]: https://determinate.systems [direnv]: https://direnv.net [flakes]: https://zero-to-nix.com/concepts/flakes [gha]: https://github.com/features/actions -[hydration]: https://iles.pages.dev/guide/hydration#hydration-directives -[iles]: https://github.com/elMassimo/iles [mdx]: https://mdxjs.com [nanostores]: https://github.com/nanostores/nanostores [nix]: https://nixos.org @@ -184,5 +174,3 @@ We also recommend adding these settings to your local `.vscode/settings.json`: [vsc-prettier]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode [vsc-tailwind]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss [vsc-tsc]: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next -[vsc-vue]: https://marketplace.visualstudio.com/items?itemName=Vue.volar -[vue]: https://vuejs.org From ebc53cd0909f5d8ba5cb3b543d4ddd4882521912 Mon Sep 17 00:00:00 2001 From: spacjalex <57222349+spacjalex@users.noreply.github.com> Date: Tue, 30 Sep 2025 22:16:53 +0200 Subject: [PATCH 2/2] rm outdated docs links --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 29e9fba6..e756d29a 100644 --- a/README.md +++ b/README.md @@ -88,8 +88,6 @@ The site uses a number of custom [MDX] components to spice up the usual Markdown | [`Languages`](./src/components/mdx/Languages.astro) | Provides a (programming) language selector | | [`NixStorePath`](./src/components/mdx/NixStorePath.astro) | Provides a colorful visualization of Nix store path components | | [`SpecificLanguage`](./src/components/mdx/SpecificLanguage.astro) | Displays the enclosed content only if the user has selected a specific language | -| [`System`](./src/components/mdx/System.vue) | Displays the currently selected system (Linux vs. macOS) | -| [`Systems`](./src/components/Systems.vue) | Provides a system selector (Linux vs. macOS) | ## Directory structure