Add dynamic Open Graph image generation for blog posts

.github/workflows/build.yaml

@@ -32,8 +32,10 @@ jobs:
     - name: Set up Node
       uses: actions/setup-node@v4
       with:
-        node-version: '20.x'
-    - name: Install dependencies
+        node-version: '22.x'
+    - name: Install dependencies and set environment variables
+      env:
+        NODE_ENV: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master') && github.event_name == 'push' && 'production' }}
       shell: bash
       run: ./ci/install.sh
     - name: Build site

.gitignore

@@ -305,3 +305,6 @@ dist
 
 # Svelte-kit files
 .svelte-kit
+
+# Generated OG images
+static/assets/og

ci/install.sh

@@ -1,3 +1,25 @@
 #!/bin/bash -ex
 
+# Install project dependencies
 npm install
+
+# Install fonts for OpenGraph image creation
+mkdir -p ~/.fonts/silka
+cp -r static/assets/fonts/silka/desktop/* ~/.fonts/silka/
+fc-cache -fv
+
+# Determine if REVIEW_ID is set to select the URL to export
+if [ -n "$REVIEW_ID" ]; then
+  # Staging URL (Deploy Preview)
+  SITE_URL="https://deploy-preview-${REVIEW_ID}--spyder-svelte-website-preview.netlify.app/"
+else
+  # Default to production URL if REVIEW_ID is empty or false
+  SITE_URL="https://www.spyder-ide.org/"
+fi
+
+export PUBLIC_SITE_URL=$SITE_URL
+
+# Create a .env file for Vite
+cat <<EOF > .env
+PUBLIC_SITE_URL=${SITE_URL}
+EOF