Release 2024-11-20 (#1)

.env.example.ionos

@@ -0,0 +1,8 @@
+# For the static build, we only need the following variables.
+# They need to be part of `.github/workflows/*build.yaml`
+# They are enforced by `astro.config.mjs` `env.schema``
+
+# KEYSTATIC_STORAGE_KIND: "local"
+# ASTRO_ENV: "production"
+# ASTRO_OUTPUT_MODE: "static"
+# ASTRO_USE_NETLIFY_ADAPTER: "false"

.env.example.local

@@ -0,0 +1,11 @@
+# Keystatic
+# Docs: https://keystatic.com/docs/github-mode
+KEYSTATIC_GITHUB_CLIENT_ID=     # empty
+KEYSTATIC_GITHUB_CLIENT_SECRET= # empty
+KEYSTATIC_SECRET=               # empty
+PUBLIC_KEYSTATIC_GITHUB_APP_SLUG=rsv-info-keystatic
+KEYSTATIC_STORAGE_KIND=local
+
+ASTRO_ENV=development
+ASTRO_OUTPUT_MODE=hybrid
+ASTRO_USE_NETLIFY_ADAPTER=false

.env.example.netlify

@@ -0,0 +1,15 @@
+# Keystatic
+# Docs: https://keystatic.com/docs/github-mode
+KEYSTATIC_GITHUB_CLIENT_ID=     # See Bitwarden
+KEYSTATIC_GITHUB_CLIENT_SECRET= # See Bitwarden
+KEYSTATIC_SECRET=               # See Bitwarden
+PUBLIC_KEYSTATIC_GITHUB_APP_SLUG=rsv-info-keystatic
+KEYSTATIC_STORAGE_KIND=github
+
+ASTRO_ENV=staging
+ASTRO_OUTPUT_MODE=server
+ASTRO_USE_NETLIFY_ADAPTER=true
+
+# Those variables need to be added to the Netlify site settings manually.
+# To create them, setup Keystatic for Github on local, following https://keystatic.com/docs/github-mode#setting-up-git-hub-mode
+# To edit the Github application, see https://github.com/Thinkmill/keystatic/pull/1358/files

.github/workflows/rsv-info-build.yaml

@@ -22,23 +22,19 @@ jobs:
     name: build rsv-info
     runs-on: ubuntu-latest
     steps:
-      - name: checkout
+      - name: Checkout your repository using git
         uses: actions/checkout@v4
-        with:
-          submodules: 'recursive'
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: v22.x
-
-      - name: Build Node assets
+      - name: Install, build, and upload your site output
+        uses: withastro/action@v2
         env:
-          CI: true
-          SITE_URL: ${{ inputs.site-url }}
-        run: |
-          npm ci
-          npm run build
+          KEYSTATIC_STORAGE_KIND: "local"
+          ASTRO_ENV: "production"
+          ASTRO_OUTPUT_MODE: "static"
+          ASTRO_USE_NETLIFY_ADAPTER: "false"
+        # with:
+        # path: . # The root location of your Astro project inside the repository. (optional)
+        # node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
+        # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
 
 # Please do not touch the following action
       - name: Store deployment content

README.md

@@ -9,7 +9,7 @@ This site show's general information about Radschnellverbindungen (cycle highway
 
 TLDR: The (geo)data is available in the [`content/geometries/`](./src/radschnellwege) folder. If you use the data, attribute it like this:
 
-> © [FixMyCity](https://fixmycity.de)/[RSV-Dossier](https://github.com/FixMyBerlin/rsv-dossier) - [ODbL License](https://opendatacommons.org/licenses/odbl/summary/index.html)
+> © [FixMyCity](https://fixmycity.de)/[RSV-Dossier](https://github.com/FixMyBerlin/rsv-info) - [ODbL License](https://opendatacommons.org/licenses/odbl/summary/index.html)
 
 You find the geometry and meta information about the highways under [`./src/radschnellwege/`](./src/radschnellwege/). There is one file for all highways in [`meta/`](./src/radschnellwege/meta) folder containing the meta information. In the [`geometries/`](./src/content/geometries) folder, every cycle highway has one individual file. In [`./data/schema/`](./data/schema/)you'll find the schema for the json files.
 

astro.config.mjs

@@ -1,30 +1,71 @@
-import markdoc from '@astrojs/markdoc'
 import mdx from '@astrojs/mdx'
 import netlify from '@astrojs/netlify'
 import react from '@astrojs/react'
+import sitemap from '@astrojs/sitemap'
 import tailwind from '@astrojs/tailwind'
 import keystatic from '@keystatic/astro'
-import { defineConfig } from 'astro/config'
+import { defineConfig, envField } from 'astro/config'
 
-import sitemap from '@astrojs/sitemap'
+// ABOUT:
+// We have to fetch settings from `.env`
+// Which we have to do manually, see https://docs.astro.build/en/guides/configuring-astro/#environment-variables
+//
+// USAGE:
+// `npm run dev` uses hybrid mode and keystatic()
+// `npm run build` (server) is based on .env and has different settings for Netlify (CMS/Keystatic) vs. IONOS (Static site)
+// `npm run build:local && npm run serve` overwrites the .env settings to have a local test case for what is on IONOS
+import { loadEnv } from 'vite'
+const { ASTRO_OUTPUT_MODE, ASTRO_USE_NETLIFY_ADAPTER } = loadEnv(
+  process.env.NODE_ENV,
+  process.cwd(),
+  '',
+)
 
+// CONFIG:
 // https://astro.build/config
 export default defineConfig({
   site: 'https://radschnellverbindungen.info',
   integrations: [
+    ASTRO_OUTPUT_MODE === 'static' ? undefined : keystatic(),
+    tailwind(),
     react(),
-    markdoc(),
     mdx(),
-    keystatic(),
-    tailwind(),
-    sitemap({
-      filter: (page) => !page.endsWith('--preview/'),
-    }),
+    sitemap(), // We don't exclute inactive pages but rely on the per page `noindex`
   ],
-  redirects: {
-    'abstimmungen/abstimmungsprozesse/':
-      '/kommunikation/radschnellwegeplanung-als-zusammenspiel-vieler-akteur-innen/',
+  // On Netlify and during development we use `hybrid`, on Github Pages we usd `static`.
+  // Using static makes sure features like Astros redirecting work as expected.
+  // Docs https://docs.astro.build/en/basics/rendering-modes/
+  output: ASTRO_OUTPUT_MODE,
+  adapter: ASTRO_USE_NETLIFY_ADAPTER === 'true' ? netlify() : undefined,
+  redirects: {'abstimmungen/abstimmungsprozesse/':
+      '/kommunikation/radschnellwegeplanung-als-zusammenspiel-vieler-akteur-innen/',},
+  experimental: {
+    env: {
+      schema: {
+        ASTRO_OUTPUT_MODE: envField.enum({
+          values: ['static', 'hybrid', 'server'],
+          access: 'secret',
+          context: 'server',
+          optional: false,
+        }),
+        ASTRO_USE_NETLIFY_ADAPTER: envField.boolean({
+          access: 'secret',
+          context: 'server',
+          optional: false,
+        }),
+        KEYSTATIC_STORAGE_KIND: envField.enum({
+          values: ['local', 'github'],
+          access: 'public',
+          context: 'client',
+          optional: false,
+        }),
+        ASTRO_ENV: envField.enum({
+          values: ['development', 'staging', 'production'],
+          access: 'public',
+          context: 'client',
+          optional: false,
+        }),
+      },
+    },
   },
-  output: 'hybrid',
-  adapter: netlify(),
 })

keystatic.config.ts

@@ -1,5 +1,6 @@
 import { collection, config, fields } from '@keystatic/core'
 import { block } from '@keystatic/core/content-components'
+import { KEYSTATIC_STORAGE_KIND } from 'astro:env/client'
 import { contentViewImageDefaultDouble } from './keystatic/utils/contentViewImageDefaultDouble'
 import { contentViewImageHorizontal } from './keystatic/utils/contentViewImageHorizontal'
 import { contentViewImageSquare } from './keystatic/utils/contentViewImageSquare'
@@ -75,11 +76,11 @@ const blogSchema = {
 
 export default config({
   storage: {
-    // kind: 'local',
-    kind: 'github',
+    // https://keystatic.com/docs/github-mode#setting-up-git-hub-mode
+    kind: KEYSTATIC_STORAGE_KIND,
     repo: {
       owner: 'FixMyBerlin',
-      name: 'rsv-dossier',
+      name: 'rsv-info',
     },
   },
   ui: {