Port handbook to Astro

.github/workflows/test.yml

@@ -45,6 +45,9 @@ jobs:
       - name: Install Dependencies
         run: npm install
         working-directory: 'website'
+      - name: Install Astro Dependencies
+        run: npm install
+        working-directory: 'website/astro'
       - name: Build the forge
         run: npm run build:skip-images
         working-directory: 'website'

astro/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

astro/README.md

@@ -0,0 +1,76 @@
+# Starlight Starter Kit: Basics
+
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+```
+npm create astro@latest -- --template starlight
+```
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro + Starlight project, you'll see the following folders and files:
+
+```
+.
+├── public/
+├── src/
+│   ├── assets/
+│   ├── content/
+│   │   └── docs/
+│   └── content.config.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
+```
+
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+
+Static assets, like favicons, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 📝 Content Management with Keystatic
+
+This project uses [Keystatic](https://keystatic.com/) as a Git-based CMS for editing handbook content.
+
+### Using the CMS locally
+
+1. Start the development server:
+   ```
+   npm run dev
+   ```
+
+2. Open the Keystatic admin interface at `http://localhost:4321/keystatic`
+
+3. Edit handbook pages through the visual editor
+
+4. Changes are saved directly to your local filesystem in `src/content/docs/handbook/`
+
+5. Commit and push your changes to Git as usual
+
+The CMS configuration is in `keystatic.config.ts`.
+
+## 👀 Want to learn more?
+
+Check out [Starlight's docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).
+
+### Migration from Astro
+
+As we migrate away from 11ty to Astro, there's a couple of things to note.
+
+- [ ] `npm run start` starts 2 dev servers and netlify.toml joins the servers's output

astro/astro.config.mjs

@@ -0,0 +1,89 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+import starlightUtils from '@lorenzo_lewis/starlight-utils';
+import keystatic from '@keystatic/astro';
+import react from '@astrojs/react';
+import node from '@astrojs/node';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const handbookDir = path.join(process.cwd(), 'src/content/docs/handbook');
+const handbookFolders = fs.readdirSync(handbookDir, { withFileTypes: true })
+	.filter(dirent => dirent.isDirectory() && !dirent.name.startsWith('.') && dirent.name !== 'images')
+	.map(dirent => ({
+		label: dirent.name.charAt(0).toUpperCase() + dirent.name.slice(1),
+		autogenerate: { directory: `handbook/${dirent.name}` },
+	}));
+
+// https://astro.build/config
+export default defineConfig({
+	adapter: node({ mode: 'standalone' }),
+	base: '/handbook',
+	image: {
+		// Don't process GIFs - they can be too large
+		service: {
+			entrypoint: 'astro/assets/services/sharp',
+			config: {
+				limitInputPixels: false,
+			},
+		},
+	},
+	integrations: [
+		starlight({
+			title: 'FlowFuse Handbook',
+			description: 'How we run FlowFuse, from engineering practices to team rituals.',
+			logo: {
+    		src: '../src/images/ff-logo--wordmark--light.svg',
+  		},
+			favicon: '/favicon.ico',
+			plugins: [
+				starlightUtils({
+					multiSidebar: {
+						switcherStyle: 'hidden',
+					},
+				}),
+			],
+			components: {
+				Footer: './src/components/Footer.astro',
+			},
+			social: [
+				{ icon: 'github', label: 'GitHub', href: 'https://github.com/FlowFuse' },
+				{ icon: 'discord', label: 'Discord', href: 'https://discord.gg/2RrvW8dkrF' },
+				{ icon: 'linkedin', label: 'LinkedIn', href: 'https://www.linkedin.com/company/flowfuse' },
+				{ icon: 'youtube', label: 'YouTube', href: 'https://www.youtube.com/@FlowFuseInc' },
+				{ icon: 'facebook', label: 'Facebook', href: 'https://www.facebook.com/FlowFuse/' },
+				{ icon: 'reddit', label: 'Reddit', href: 'https://www.reddit.com/r/flowfuse' },
+				{ icon: 'rss', label: 'RSS', href: '/blog/index.xml' },
+			],
+			head: [
+				{
+					tag: 'script',
+					attrs: { type: 'module' },
+					content: `
+						import mediumZoom from 'https://esm.sh/medium-zoom@1.1.0';
+						document.addEventListener('DOMContentLoaded', () => {
+							mediumZoom('[data-zoomable]', { margin: 24, background: 'rgba(0, 0, 0, 0.9)' });
+						});
+						document.addEventListener('astro:page-load', () => {
+							mediumZoom('[data-zoomable]', { margin: 24, background: 'rgba(0, 0, 0, 0.9)' });
+						});
+					`,
+				},
+			],
+			sidebar: [
+				{
+					label: 'Handbook',
+					items: [
+						{ label: 'Overview', slug: 'handbook' },
+					],
+				},
+				...handbookFolders,
+			],
+			lastUpdated: true,
+      pagination: false
+		}),
+		react(),
+		keystatic(),
+	],
+});

astro/keystatic.config.ts

@@ -0,0 +1,27 @@
+import { config, fields, collection } from '@keystatic/core';
+
+export default config({
+  storage: {
+    kind: 'github',
+    repo: 'flowfuse/website',
+  },
+  collections: {
+    docs: collection({
+      label: 'Handbook Pages',
+      slugField: 'title',
+      path: 'astro/src/content/docs/handbook/**',
+      format: { contentField: 'content' },
+      entryLayout: 'content',
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        navGroup: fields.text({
+          label: 'Navigation Group',
+          description: 'Group label for sidebar navigation',
+        }),
+        content: fields.mdx({
+          label: 'Content',
+        }),
+      },
+    }),
+  },
+});