Feature/modernize GitHub pages

.github/workflows/pages.yml

@@ -1,8 +1,8 @@
-name: Build HTML and Deploy Pages
+name: Deploy modern site to GitHub Pages
 
 on:
   push:
-    branches: [ "main", "master" ]
+    branches: ["main"]
   workflow_dispatch:
 
 permissions:
@@ -11,152 +11,42 @@ permissions:
   id-token: write
 
 concurrency:
-  group: pages
+  group: "pages"
   cancel-in-progress: true
 
 jobs:
   build:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
-      - name: Checkout source
+      - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Install Pandoc + Chromium deps
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y \
-            pandoc \
-            librsvg2-bin \
-            libgbm1 \
-            libnss3 \
-            libatk1.0-0 \
-            libatk-bridge2.0-0 \
-            libcups2 \
-            libxcomposite1 \
-            libxdamage1 \
-            libxrandr2 \
-            libxss1 \
-            libxtst6 \
-            fonts-liberation \
-            ca-certificates \
-            lsb-release \
-            xdg-utils
-          sudo apt-get install -y libasound2 || sudo apt-get install -y libasound2t64
-
-      - name: Verify rsvg-convert
-        run: |
-          command -v rsvg-convert && rsvg-convert --version || echo "rsvg-convert not found"
-
-      - name: Setup Node.js
+      - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
-
-      - name: Setup Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: "3.11"
-
-      - name: Install Mermaid CLI
-        run: |
-          npm install -g @mermaid-js/mermaid-cli
-
-      - name: Mermaid smoke test (Chromium/Puppeteer)
-        run: |
-          mkdir -p book-output/diagrams
-          cat > book-output/diagrams/smoke.mmd <<'MMD'
-          sequenceDiagram
-              participant A
-              participant B
-              A->>B: hello
-          MMD
-          cat > book-output/diagrams/puppeteer-smoke.json <<'JSON'
-          { "args": ["--no-sandbox", "--disable-setuid-sandbox"] }
-          JSON
-          mmdc \
-            -i book-output/diagrams/smoke.mmd \
-            -o book-output/diagrams/smoke.png \
-            --backgroundColor "#ffffff" \
-            --puppeteerConfigFile book-output/diagrams/puppeteer-smoke.json
-
-      - name: Generate master markdown
-        run: |
-          mkdir -p book-output
-          {
-            printf '%s\n' '---'
-            printf '%s\n' 'title: "Design Patterns in Java"'
-            printf '%s\n' 'subtitle: "Practical, Runnable Examples"'
-            printf 'date: "%s"\n' "$(date -u +'%Y-%m-%d %H:%M UTC')"
-            printf '%s\n' 'lang: en'
-            printf '%s\n\n' '---'
-          } > book-output/design-patterns-book.md
-
-          if [ -f "README.md" ]; then
-            echo "---" >> book-output/design-patterns-book.md
-            echo "" >> book-output/design-patterns-book.md
-            cat README.md >> book-output/design-patterns-book.md
-            echo "" >> book-output/design-patterns-book.md
-          fi
-
-          categories=( \
-            gof-patterns \
-            enterprise-integration-patterns \
-            reliability-patterns \
-            architectural-patterns \
-            miscellaneous-patterns \
-          )
-
-          for category in "${categories[@]}"; do
-            if [ -f "$category/README.md" ]; then
-              echo "---" >> book-output/design-patterns-book.md
-              echo "" >> book-output/design-patterns-book.md
-              cat "$category/README.md" >> book-output/design-patterns-book.md
-              echo "" >> book-output/design-patterns-book.md
-            fi
-
-            for pattern_dir in $(ls -d "$category"/*/ 2>/dev/null | sort); do
-              if [ -f "$pattern_dir/README.md" ]; then
-                echo "---" >> book-output/design-patterns-book.md
-                echo "" >> book-output/design-patterns-book.md
-                cat "$pattern_dir/README.md" >> book-output/design-patterns-book.md
-                echo "" >> book-output/design-patterns-book.md
-              fi
-            done
-          done
+          node-version: 22
+          cache: npm
+          cache-dependency-path: site/package-lock.json
 
-      - name: Render Mermaid diagrams
-        run: |
-          mkdir -p book-output/diagrams
-          python3 scripts/render_mermaid.py \
-            book-output/design-patterns-book.md \
-            book-output/design-patterns-book.with-diagrams.md \
-            book-output/diagrams
+      - name: Install dependencies
+        working-directory: site
+        run: npm ci
 
-      - name: Build HTML
-        run: |
-          mkdir -p book-output/html
-          pandoc book-output/design-patterns-book.with-diagrams.md \
-            -o book-output/html/index.html \
-            --standalone \
-            --css=https://cdn.jsdelivr.net/npm/water.css@2/out/water.css \
-            --resource-path=.:book-output \
-            --table-of-contents \
-            --toc-depth=3 \
-            --number-sections \
-            --highlight-style=pygments
+      - name: Generate pattern index
+        working-directory: site
+        run: npm run build:content
 
-      - name: Copy diagrams into HTML output
-        run: |
-          mkdir -p book-output/html/diagrams
-          cp book-output/diagrams/*.png book-output/html/diagrams/ || true
+      - name: Build site
+        working-directory: site
+        run: npm run build
 
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
-      - name: Upload artifact to GitHub Pages
+      - name: Upload Pages artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: book-output/html
+          path: site/dist
 
   deploy:
     runs-on: ubuntu-latest

.gitignore

@@ -12,3 +12,6 @@ target
 *.uml
 .idea/
 .vscode/
+site/node_modules/
+site/dist/
+book-output/

README.md

@@ -1,6 +1,6 @@
 ![CI](https://github.com/SaumilP/design-patterns/actions/workflows/ci.yml/badge.svg)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-![Java](https://img.shields.io/badge/Java-11%2B-orange)
+![Java](https://img.shields.io/badge/Java-21%2B-orange)
 [![Pages](https://img.shields.io/badge/Github-Pages-green)](https://saumilp.github.io/design-patterns)
 ![GitHub Repo stars](https://img.shields.io/github/stars/saumilp/design-patterns)
 

site/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Searchable catalog of Java design patterns with runnable examples, trade-offs, and GitHub source links." />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Design Patterns | Practical Java examples" />
+    <meta property="og:description" content="Runnable examples, trade-offs, and architecture notes in one searchable catalog." />
+    <meta property="og:image" content="https://saumilp.github.io/design-patterns/social-card.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <link rel="canonical" href="https://saumilp.github.io/design-patterns/" />
+    <link rel="icon" type="image/svg+xml" href="/design-patterns/favicon.svg" />
+    <title>Design Patterns | Practical Java examples</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.tsx"></script>
+  </body>
+  </html>