Merge pull request #11 from ReproNim/feat/github-pages-deployment

feat: add GitHub Pages deployment workflow

Author: yibeichan

{{cookiecutter.protocol_name}}/.github/workflows/deploy-gh-pages.yml

@@ -0,0 +1,104 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+    tags: [ 'v*' ]
+  workflow_dispatch:
+    inputs:
+      ref:
+        description: 'Branch, tag, or commit SHA to deploy'
+        required: false
+        default: 'main'
+        type: string
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: {% raw %}${{ github.event.inputs.ref || github.ref }}{% endraw %}
+
+      - name: Get deployment ref
+        id: get-ref
+        run: |
+          if [ "{% raw %}${{ github.event_name }}{% endraw %}" = "workflow_dispatch" ] && [ -n "{% raw %}${{ github.event.inputs.ref }}{% endraw %}" ]; then
+            echo "deploy_ref={% raw %}${{ github.event.inputs.ref }}{% endraw %}" >> $GITHUB_OUTPUT
+          elif [ -n "{% raw %}${{ github.ref_name }}{% endraw %}" ]; then
+            echo "deploy_ref={% raw %}${{ github.ref_name }}{% endraw %}" >> $GITHUB_OUTPUT
+          else
+            echo "deploy_ref=main" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Clone reproschema-ui
+        run: |
+          git clone https://github.com/ReproNim/reproschema-ui.git
+          cd reproschema-ui
+          # Pin to specific commit for reproducible builds
+          git checkout 9f7b6b961cdcb516531bbbf1bf1b74648089d04a
+
+      - name: Build reproschema-ui
+        run: |
+          cd reproschema-ui
+          npm ci
+          npm run build
+
+      - name: Copy protocol to reproschema-ui
+        run: |
+          # Copy the entire protocol directory to the reproschema-ui public folder
+          cp -r ./{{cookiecutter.__protocol_slug}} reproschema-ui/dist/
+          cp -r ./activities reproschema-ui/dist/
+          
+          # Update the config to point to our protocol
+          cat > reproschema-ui/dist/config.js << 'EOF'
+          module.exports = {
+            /* eslint-disable */
+            githubSrc: 'https://raw.githubusercontent.com/{{cookiecutter.github_org}}/{{cookiecutter.protocol_name|slugify}}/{% raw %}${{ steps.get-ref.outputs.deploy_ref }}{% endraw %}/{{cookiecutter.__protocol_slug}}/{{cookiecutter.__protocol_slug}}_schema',
+            banner: 'This protocol is deployed from {{cookiecutter.github_org}}/{{cookiecutter.protocol_name|slugify}} (ref: {% raw %}${{ steps.get-ref.outputs.deploy_ref }}{% endraw %})',
+            startButton: 'Start',
+            assetsPublicPath: '/',
+            backendServer: null,
+            showHelp: true,
+            contact: '{{cookiecutter.email}}',
+            emailSubject: 'Help with {{cookiecutter.protocol_name}}',
+            logoSrc: '{{cookiecutter.__protocol_slug}}/about_the_study.svg',
+            auth: {
+              on: false,
+            },
+          };
+          EOF
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'reproschema-ui/dist'
+
+  deploy:
+    environment:
+      name: github-pages
+      url: {% raw %}${{ steps.deployment.outputs.page_url }}{% endraw %}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

{{cookiecutter.protocol_name}}/README.md

@@ -4,7 +4,33 @@
 
 ## Website
 
-[https://{{cookiecutter.github_org}}.github.io/{{cookiecutter.protocol_name}}](https://{{cookiecutter.github_org}}.github.io/{{cookiecutter.protocol_name}})
+[https://{{cookiecutter.github_org}}.github.io/{{cookiecutter.protocol_name|slugify}}](https://{{cookiecutter.github_org}}.github.io/{{cookiecutter.protocol_name|slugify}})
+
+## Deployment to GitHub Pages
+
+This repository includes automatic deployment to GitHub Pages. Follow these steps to enable it:
+
+1. **Enable GitHub Pages in your repository:**
+   - Go to Settings → Pages
+   - Under "Source", select "GitHub Actions"
+   - Click Save
+
+2. **The deployment will trigger automatically when:**
+   - You push to the `main` branch
+   - You push a tag starting with `v` (e.g., `v1.0.0`)
+   - You manually trigger the workflow from the Actions tab
+
+3. **Deploy a specific version:**
+   - Go to the Actions tab
+   - Select "Deploy to GitHub Pages"
+   - Click "Run workflow"
+   - Enter the branch, tag, or commit SHA you want to deploy
+   - Click "Run workflow"
+
+4. **Access your deployed protocol:**
+   - Once deployed, visit: `https://{{cookiecutter.github_org}}.github.io/{{cookiecutter.protocol_name|slugify}}`
+   - The deployment typically takes 2-5 minutes
+   - The deployed version is shown in the banner
 
 ## Repository Structure