feat: deploy to github pages (#1)

* feat: deploy to github pages

* fix: relative asset paths

* chore: add bootstrap from cdn to deployment index file (wip)

* feat: implement build preview with latest styles (wip)

* fix: missing css file

* fix: missing assets folder

* feat: remove all pages to be build for faster preview page build

.github/workflows/deploy-to-github-pages.yml

@@ -0,0 +1,102 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8.6.2
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm i
+
+      - name: Build
+        run: pnpm build
+
+      - name: Prepare deployment directory
+        run: |
+          BRANCH_NAME=$(echo ${GITHUB_HEAD_REF:-${GITHUB_REF_NAME}} | tr '/' '_')
+          mkdir -p deployment/archives
+          mkdir -p deployment/${BRANCH_NAME}
+          cp -r dist/* deployment/${BRANCH_NAME}/
+
+      - name: Create archive
+        run: |
+          BRANCH_NAME=$(echo ${GITHUB_HEAD_REF:-${GITHUB_REF_NAME}} | tr '/' '_')
+          mkdir -p deployment/archives
+          tar -czf deployment/archives/${BRANCH_NAME}.tar -C deployment/${BRANCH_NAME} .
+
+      - name: Download and unpack existing archives
+        run: |
+          BRANCH_NAME=$(echo ${GITHUB_HEAD_REF:-${GITHUB_REF_NAME}} | tr '/' '_')
+          mkdir -p deployment/archives
+          git fetch --all
+          for branch in $(git branch -r | grep -v '\->' | sed 's/origin\///'); do
+            safe_branch=$(echo ${branch} | tr '/' '_')
+            if [ "${safe_branch}" != "${BRANCH_NAME}" ]; then
+              echo "Checking for existing archive for branch: ${branch}"
+              if curl --head --fail -s https://virtualidentityag.github.io/stadtKoeln-openData-frontend/archives/${safe_branch}.tar; then
+                echo "Downloading archive for branch: ${branch}"
+                curl -L -o deployment/archives/${safe_branch}.tar https://virtualidentityag.github.io/stadtKoeln-openData-frontend/archives/${safe_branch}.tar
+                mkdir -p deployment/${safe_branch}
+                tar -xzf deployment/archives/${safe_branch}.tar -C deployment/${safe_branch}
+              else
+                echo "Branch ${branch} was not deployed to GitHub Pages"
+              fi
+            fi
+            done
+
+      - name: Generate index file
+        run: |
+          branches=$(ls deployment/archives/*.tar | xargs -n 1 basename | sed 's/.tar//')
+          echo "branches=$branches" >> $GITHUB_ENV
+          node scripts/build-preview.js $branches > deployment/index.html
+          rm -rf src/pages/*
+          cp deployment/index.html src/pages/preview.twig
+          pnpm build
+          rm deployment/index.html
+          mkdir -p deployment/assets
+          mv dist/preview.html deployment/index.html
+          mv dist/assets/styles*.css deployment/assets/
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload the deployment directory
+          path: 'deployment'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

scripts/build-preview.js

@@ -0,0 +1,26 @@
+const processBranches = (branches) =>
+  branches
+    .map((branch) => `<li><a href='./${branch}/'>${branch}</a></li>`)
+    .join('')
+
+const main = () => {
+  const branches = process.argv.slice(2)
+  console.log(
+    `
+<html>
+  <head>
+    <title>Stadt Koeln - Open Data</title>
+    <link rel='stylesheet' href='/src/styles/styles.scss'>
+  </head>
+  <body>
+    <h1>Deployed Branches</h1>
+    <ul>
+      ${processBranches(branches)}
+    </ul>
+  </body>
+</html>
+`.trim()
+  )
+}
+
+main()

vite.config.js

@@ -14,4 +14,9 @@ export default {
       },
     }),
   ],
+  experimental: {
+    renderBuiltUrl(filename) {
+      return `./${filename}`
+    },
+  },
 }