Change techstack to astro with huge design updates etc.

.github/workflows/jekyll.yml → .github/workflows/deploy.yml

@@ -1,15 +1,16 @@
-name: Build Jekyll and Deploy to Firebase
+name: Build Astro and Deploy to Firebase
 
 on:
   push:
     branches-ignore:
       - "dependabot/**"
   pull_request:
   schedule:
+    # Daily build at 2 AM to refresh API data
     - cron: "0 2 * * *"
 
 env:
-  JEKYLL_ENV: production
+  NODE_ENV: production
   YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
   MEETUP_CLIENT_ID: ${{ secrets.MEETUP_CLIENT_ID }}
   MEETUP_PRIVATE_KEY: ${{ secrets.MEETUP_PRIVATE_KEY }}
@@ -23,53 +24,44 @@ jobs:
     steps:
       - name: Clone repository
         uses: actions/checkout@v4
-        with:
-          submodules: recursive
 
+      # Required for node-canvas (OG image generation)
       - name: Install node-canvas dependencies
         uses: awalsh128/cache-apt-pkgs-action@latest
         with:
           packages: build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
           version: 1.0
 
-      - name: Cache Bundler 💾
-        uses: actions/cache@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          path: ~/.firebase, ~/.jekyll-cache, ~/vendor/bundle
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-gems-
+          node-version: "22"
+          cache: "npm"
 
-      - name: Cache NPM packages 💾
-        uses: actions/cache@v3
+      - name: Cache Astro build
+        uses: actions/cache@v4
         with:
-          path: ~/.npm
-          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
+          path: |
+            .astro/
+            node_modules/.astro/
+          key: ${{ runner.os }}-astro-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('src/**') }}
           restore-keys: |
-            ${{ runner.OS }}-node-
-            ${{ runner.OS }}-
+            ${{ runner.os }}-astro-${{ hashFiles('**/package-lock.json') }}-
+            ${{ runner.os }}-astro-
 
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "23"
-          cache: "npm"
+      - name: Install dependencies
+        run: npm ci
 
-      - name: Use Ruby
-        uses: ruby/setup-ruby@v1
-        with:
-          bundler-cache: true
+      - name: Fetch external data (trainers, events, courses)
+        run: npm run fetch:all
 
-      - name: Install dependencies 🔧
-        run: |
-          npm ci
-          bundle config set path vendor/bundle
-          bundle install --jobs 4 --retry 3
+      - name: Generate OG images
+        run: npm run generate:og
 
-      - name: Build 🏗
-        run: bundle exec jekyll build --trace
+      - name: Build Astro site
+        run: npm run build
 
-      - name: Deploy to Firebase
+      - name: Deploy to Firebase (Production)
         if: github.ref == 'refs/heads/master'
         uses: FirebaseExtended/action-hosting-deploy@v0
         with:
@@ -85,3 +77,4 @@ jobs:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"
           firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ANGULAR_DE }}"
           projectId: angular-de
+

.gitignore

@@ -1,17 +1,41 @@
-_site
 node_modules
-opengraph/*
-.sass-cache
-.jekyll-metadata
-.jekyll-cache
-.firebase
+.env
+.env.*
+
+# Astro build output
+dist/
+.astro/
+
+# Generated OG images (created during build)
+public/og/*
+!public/og/.gitkeep
+
+# Copied article images (created during build from src/content/posts/)
+public/artikel/
+
+# Fetched data from API (generated during prebuild)
+src/data/events/*.json
+!src/data/events/.gitkeep
+src/data/related_events/*.json
+!src/data/related_events/.gitkeep
+src/data/course_trainers/*.json
+!src/data/course_trainers/.gitkeep
+src/data/course.json
+src/data/trainers.json
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
 .DS_Store
-_includes/_course_reviews.json
-_data/events/*.json
-_data/related_events/*.json
-_data/course_trainers/*.json
-_data/course.json
-_data/meetups.json
-_data/trainers.json
-_data/videos.json
-firebase-debug.log
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+
+# Optional: Scripts (if you don't want to commit migration scripts)
+# scripts/

BRANDING.md

@@ -0,0 +1,146 @@
+# Branding & Color Configuration
+
+This document explains how colors are managed in the project to make it easy to adapt for different portals (Angular.DE, ReactJS.DE, VueJS.DE).
+
+## Color Configuration Location
+
+Colors are defined in two places:
+
+1. **`src/styles/global.css`** - Full Tailwind color scales (the source of truth)
+2. **`src/config/site.ts`** - Reference values for JS/TS usage (gradients, etc.)
+
+### CSS Variables (global.css)
+
+```css
+@theme {
+  /* Primary color scale (Angular purple - matching angular.dev) */
+  --color-primary-50: #faf5ff;
+  --color-primary-100: #f3e8ff;
+  --color-primary-200: #e9d5ff;
+  --color-primary-300: #d8b4fe;
+  --color-primary-400: #c084fc;
+  --color-primary-500: #a855f7;
+  --color-primary-600: #8514f5; /* Base */
+  --color-primary-700: #7c3aed;
+  --color-primary-800: #6b21a8;
+  --color-primary-900: #581c87;
+  --color-primary-950: #3b0764;
+  --color-primary: #8514f5; /* Alias */
+
+  /* Accent color scale (Pink - matching angular.dev) */
+  --color-accent-50: #fdf2f8;
+  --color-accent-100: #fce7f3;
+  --color-accent-200: #fbcfe8;
+  --color-accent-300: #f9a8d4;
+  --color-accent-400: #f472b6;
+  --color-accent-500: #ec4899; /* Base */
+  --color-accent-600: #db2777;
+  --color-accent-700: #be185d;
+  --color-accent-800: #9d174d;
+  --color-accent-900: #831843;
+  --color-accent-950: #500724;
+  --color-accent: #ec4899; /* Alias */
+}
+```
+
+## Usage Guidelines
+
+### ✅ Correct Usage (Brand-agnostic)
+
+Use these utility classes that automatically adapt to the brand:
+
+**Primary (brand color):**
+
+- `text-primary` or `text-primary-500` - Primary text color
+- `text-primary-600` - Darker primary (hover states)
+- `text-primary-400` - Lighter primary
+- `bg-primary` - Primary background
+- `bg-primary-100` - Light primary background
+- `bg-primary/10` - Primary with 10% opacity
+- `border-primary-200` - Light primary border
+- `hover:text-primary-600` - Primary hover state
+
+**Accent (links, interactive elements):**
+
+- `text-accent` or `text-accent-500` - Accent text color
+- `text-accent-600` - Darker accent (hover states)
+- `bg-accent-100` - Light accent background
+- `border-accent-200` - Light accent border
+
+### ❌ Avoid (Brand-specific hardcoded colors)
+
+Don't use hardcoded color classes for brand colors:
+
+| ❌ Avoid           | ✅ Use Instead       |
+| ------------------ | -------------------- |
+| `text-red-500`     | `text-primary`       |
+| `text-red-600`     | `text-primary-600`   |
+| `bg-red-100`       | `bg-primary-100`     |
+| `border-red-200`   | `border-primary-200` |
+| `text-pink-500`    | `text-accent`        |
+| `text-pink-600`    | `text-accent-600`    |
+| `bg-pink-100`      | `bg-accent-100`      |
+| `text-purple-500`  | `text-primary`       |
+
+### ⚠️ Exceptions (Keep hardcoded)
+
+Some colors are semantic and should remain hardcoded:
+
+- `text-gray-*` - Neutral colors
+- `bg-white` / `bg-black` - Absolute colors
+- `text-red-500` - Error states (not brand color!)
+- `text-yellow-500` - Warning states
+- `text-orange-500` - Caution states
+
+## Adapting for a New Portal
+
+To create a new portal (e.g., VueJS.DE):
+
+1. **Update `src/styles/global.css`** - Change the color values in the `@theme` block:
+
+   ```css
+   @theme {
+     /* Primary color scale (Vue.js green) */
+     --color-primary-50: #f0fdf7;
+     --color-primary-100: #dcfce9;
+     --color-primary-200: #bbf7d4;
+     --color-primary-300: #86efb4;
+     --color-primary-400: #4ade8b;
+     --color-primary-500: #42b883; /* Vue.js green */
+     --color-primary-600: #16a35a;
+     --color-primary-700: #158049;
+     --color-primary-800: #16653c;
+     --color-primary-900: #145333;
+     --color-primary-950: #052e19;
+     --color-primary: #42b883;
+     /* ... accent colors ... */
+   }
+   ```
+
+2. **Update `src/config/site.ts`** - Update the reference values:
+
+   ```typescript
+   branding: {
+     primary: "#42b883",
+     primaryRgb: "66, 184, 131",
+     // ... update color scales and gradients
+   }
+   ```
+
+3. **Update logos and images** in `public/assets/img/`
+
+4. **That's it!** All `text-primary-*`, `bg-primary-*`, `text-accent-*` classes will automatically use the new colors.
+
+## Testing
+
+After changing brand colors, test these areas:
+
+1. Hero section (light & dark mode)
+2. Navigation (active states)
+3. Buttons and CTAs
+4. Category badges
+5. Code blocks
+6. Alert boxes
+7. Form elements
+8. Hover states
+