wip: deploy preview site for PRs, to make contributing easier

.github/actions/determine-auto-action.sh

@@ -0,0 +1,28 @@
+# Script copied from https://github.com/rossjrw/pr-preview-action/blob/main/lib/determine-auto-action.sh
+
+case $GITHUB_EVENT_NAME in
+  "pull_request" | "pull_request_target")
+    echo "event_name is $GITHUB_EVENT_NAME; proceeding"
+    ;;
+  *)
+    echo "unknown event $GITHUB_EVENT_NAME; no action to take"
+    echo "action=none" >> "$GITHUB_ENV"
+    exit 0
+    ;;
+esac
+
+event_type=$(jq -r ".action" "$GITHUB_EVENT_PATH")
+echo "event_type is $event_type"
+
+case $event_type in
+  "opened" | "reopened" | "synchronize")
+    echo "action=deploy" >> "$GITHUB_ENV"
+    ;;
+  "closed")
+    echo "action=remove" >> "$GITHUB_ENV"
+    ;;
+  *)
+    echo "unknown event type $event_type; no action to take"
+    echo "action=none" >> "$GITHUB_ENV"
+    ;;
+esac

.github/workflows/preview.yml

@@ -0,0 +1,118 @@
+name: Deploy PR previews
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches: main
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+  pull-requests: write
+
+concurrency: preview-${{ github.ref }}
+
+env:
+  INPUT_PATH: "."
+  PREVIEW_FOLDER: "/pr-preview" # subfolder
+  pr: ${{ github.event.number }}
+  OSSI_SITE_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  action: auto
+  preview-branch: main
+  actionref: ${{ github.action_ref }}
+  actionrepo: ${{ github.action_repository }}
+  deployrepo: ${{ github.repository }}
+
+jobs:
+  build:
+    runs-on: composite
+
+    steps:
+      - name: Store environment variables
+        run: |
+          org=$(echo "${{env.deployrepo}}" | cut -d "/" -f 1)
+          thirdleveldomain=$(echo "${{env.deployrepo}}" | cut -d "/" -f 2)
+
+          if [ "${org}.github.io" == "$thirdleveldomain" ]; then
+            pagesurl="${org}.github.io"
+          else
+            pagesurl=$(echo "${{env.deployrepo}}" | sed 's/\//.github.io\//')
+          fi
+          echo "pagesurl=$pagesurl" >> $GITHUB_ENV
+          echo "PREVIEW_PATH=${{env.PREVIEW_FOLDER}}/pr-${{env.pr}}" >> $GITHUB_ENV
+          echo "emptydir=$(mktemp -d)" >> $GITHUB_ENV
+          echo "datetime=$(date '+%Y-%m-%d %H:%M %Z')" >> $GITHUB_ENV
+        shell: bash
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Determine auto action
+        run: .github/actions/determine-auto-action.sh
+        shell: bash
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: npm
+          cache-dependency-path: ${{ env.INPUT_PATH }}/package-lock.json
+
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v4
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ${{ env.INPUT_PATH }}
+
+      - name: Build with Astro
+        run: |
+          npx --no-install astro build \
+            --site "https://${{ env.pagesurl }}" \
+            --base "${{ env.PREVIEW_PATH }}"
+            --outdir "${{env.PREVIEW_PATH}}/dist"
+            --cachedir "${{env.PREVIEW_PATH}}/node_modules/.astro"
+        working-directory: ${{ env.INPUT_PATH}}
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: $${{env.PREVIEW_PATH}}/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+      - name: Expose deployment URL
+        id: url
+        run: echo "url=https://${{ env.pagesurl }}/${{ env.PREVIEW_PATH }}/"  >> $GITHUB_OUTPUT
+        shell: bash
+
+      - name: Leave a comment after deployment
+        uses: marocchino/sticky-pull-request-comment@331f8f5b4215f0445d3c07b4967662a32a2d3e31 # v2.9.0
+        with:
+          header: pr-preview
+          message: "
+            :rocket: Deployed preview to
+            https://${{ env.pagesurl }}/${{ env.PREVIEW_PATH }}/
+
+            on branch [`${{ env.preview-branch }}`](\
+            ${{ github.server_url }}/${{ env.deployrepo }}\
+            /tree/${{ env.preview-branch }})
+            at ${{ env.datetime }}
+            "

src/components/Footer.astro

@@ -5,6 +5,9 @@ import janeliaLogoBlack from "../assets/images/HHMI_Janelia_Logo-Black.png";
 import janeliaLogoWhite from "../assets/images/HHMI_Janelia_Logo-White.png";
 
 const baseUrl = import.meta.env.BASE_URL;
+const previewPath = import.meta.env.PREVIEW_PATH
+  ? import.meta.env.PREVIEW_PATH
+  : "";
 ---
 
 <footer
@@ -20,8 +23,9 @@ const baseUrl = import.meta.env.BASE_URL;
     <div class="flex justify-between items-start my-6">
       <div>
         <div class="mb-2">
-          <a class="inline-block font-bold text-xl" href={baseUrl}
-            >🔬 Janelia Software</a
+          <a
+            class="inline-block font-bold text-xl"
+            href={`${baseUrl}${previewPath}`}>🔬 Janelia Software</a
           >
         </div>
         <div class="flex flex-col gap-2 text-sm text-muted">

src/components/Header.astro

@@ -4,6 +4,9 @@ import ToggleTheme from "../components/ToggleTheme.astro";
 import ToggleTheme from "../components/ToggleTheme.astro";
 
 const baseUrl = import.meta.env.BASE_URL;
+const previewPath = import.meta.env.PREVIEW_PATH
+  ? import.meta.env.PREVIEW_PATH
+  : "";
 ---
 
 <header
@@ -14,7 +17,7 @@ const baseUrl = import.meta.env.BASE_URL;
   <div class="absolute inset-0 bg-white dark:bg-dark"></div>
 
   <div class="relative text-default p-3 md:px-6 w-full flex justify-between">
-    <a class="flex items-center" href={baseUrl}>
+    <a class="flex items-center" href={`${baseUrl}${previewPath}`}>
       <span
         class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
       >

src/data/navigation.js

@@ -1,4 +1,7 @@
 const base = import.meta.env.BASE_URL;
+const previewPath = import.meta.env.PREVIEW_PATH
+  ? import.meta.env.PREVIEW_PATH
+  : "";
 
 export const headerData = {
   links: [
@@ -8,19 +11,19 @@ export const headerData = {
     },
     {
       text: "Projects",
-      href: `${base}/projects`,
+      href: `${base}${previewPath}/projects`,
     },
     {
       text: "Ecosystems",
-      href: `${base}/ecosystems`,
+      href: `${base}${previewPath}/ecosystems`,
     },
     {
       text: "OSSI",
-      href: `${base}/ossi`,
+      href: `${base}${previewPath}/ossi`,
     },
     {
       text: "Blog",
-      href: `${base}/blog`,
+      href: `${base}${previewPath}/blog`,
     },
   ],
 };

src/pages/index.astro

@@ -7,6 +7,9 @@ import ContributorList from "../components/ContributorList.astro";
 import Wrapper from "../components/Wrapper.astro";
 
 const baseUrl = import.meta.env.BASE_URL;
+const previewPath = import.meta.env.PREVIEW_PATH
+  ? import.meta.env.PREVIEW_PATH
+  : "";
 ---
 
 <BaseLayout>
@@ -25,11 +28,11 @@ const baseUrl = import.meta.env.BASE_URL;
             {
               variant: "primary",
               text: "Janelia Software Projects",
-              href: `${baseUrl}/projects`,
+              href: `${baseUrl}${previewPath}/projects`,
             },
             {
               text: "Software Ecosystems",
-              href: `${baseUrl}/ecosystems`,
+              href: `${baseUrl}${previewPath}/ecosystems`,
             },
           ]}
         >
@@ -52,7 +55,7 @@ const baseUrl = import.meta.env.BASE_URL;
         {
           variant: "primary",
           text: "Learn more about OSSI",
-          href: `${baseUrl}/ossi`,
+          href: `${baseUrl}${previewPath}/ossi`,
           target: "_blank",
         },
       ]}
@@ -77,7 +80,7 @@ const baseUrl = import.meta.env.BASE_URL;
       information="The latest updates on Janelia software projects."
       content="blog"
       linkText="View all posts"
-      linkUrl={`${baseUrl}/blog`}
+      linkUrl={`${baseUrl}${previewPath}/blog`}
     />
 
     <Fragment slot="bg">