ci: Set up PR previews

HHS · Dec 30, 2024 · 52a1be8 · 52a1be8
1 parent 2d56b5a
commit 52a1be8
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 17 deletions.
diff --git a/.github/workflows/cd-website-preview.yml b/.github/workflows/cd-website-preview.yml
@@ -0,0 +1,48 @@
+name: Deploy PR preview to GitHub Pages
+
+on:
+  pull_request:
+    paths:
+      - "website/**" # Trigger only if changes are in the 'website' directory
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+  pull-requests: write # Required for PR comments
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Set BASE_URL dynamically for each PR preview
+      - name: Install, build, and upload site
+        uses: withastro/action@v3
+        env:
+          BASE_URL: /pr-${{ github.event.pull_request.number }}/ # Dynamic base path for PR preview
+        with:
+          path: ./website # Path to the root of our Astro project
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    # Uses the same github-pages environment, but GitHub Pages automatically
+    # associates the deployment with the PR number instead of the default production URL.
+    environment:
+      name: github-pages
+      url: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/pr-${{ github.event.pull_request.number }}/
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+      # Add a comment to the PR with the preview link
+      - name: Comment Preview Link
+        uses: mshick/add-pr-comment@v2
+        with:
+          message: |
+            🌐 **Preview URL**: [View Preview](https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/pr-${{ github.event.pull_request.number }}/)
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/website/README.md b/website/README.md
@@ -19,25 +19,25 @@ The `website/` sub-directory is organized like this:
 └── tsconfig.json           # Manages TypeScript configuration
 ```
 
-Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name. 
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
 
 For more information about managing content, visit the Starlight docs, check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build)
 
 ## Commands
 
 All commands are run from the root of the project, from a terminal:
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-| `npm run format`          | Run automatic formatting and fix issues          |
-| `npm run lint`            | Run automatic linting and fix issues             |
-| `npm run check:format`    | Check formatting, fail if issues are found       |
-| `npm run check:lint`      | Check linting, fail if issues are found          |
-| `npm run check:spelling`  | Check spelling, fail if issues are found         |
-| `npm run check:astro`     | Check Astro build and type safety                |
-| `npm run checks`          | Run all CI checks listed above                   |
+| Command                   | Action                                       |
+| :------------------------ | :------------------------------------------- |
+| `npm install`             | Installs dependencies                        |
+| `npm run dev`             | Starts local dev server at `localhost:4321`  |
+| `npm run build`           | Build your production site to `./dist/`      |
+| `npm run preview`         | Preview your build locally, before deploying |
+| `npm run astro -- --help` | Get help using the Astro CLI                 |
+| `npm run format`          | Run automatic formatting and fix issues      |
+| `npm run lint`            | Run automatic linting and fix issues         |
+| `npm run check:format`    | Check formatting, fail if issues are found   |
+| `npm run check:lint`      | Check linting, fail if issues are found      |
+| `npm run check:spelling`  | Check spelling, fail if issues are found     |
+| `npm run check:astro`     | Check Astro build and type safety            |
+| `npm run checks`          | Run all CI checks listed above               |
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
@@ -2,10 +2,15 @@
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 
+// Use the BASE_URL environment variable for PR previews, if set,
+// or default to using the production BASE_URL for prod deploys
+const base = process.env.BASE_URL || "/simpler-grants-protocol/";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://hhs.github.io",
-  base: "simpler-grants-protocol",
+  // Dynamically set the base to enable PR previews
+  base: base,
   integrations: [
     starlight({
       title: "Simpler Grant Protocol",

diff --git a/website/eslint.config.js b/website/eslint.config.js
@@ -6,7 +6,7 @@ import eslintPluginAstro from "eslint-plugin-astro";
 /** @type {import('eslint').Linter.Config[]} */
 export default [
   { files: ["**/*.{js,mjs,cjs,ts}"] },
-  { languageOptions: { globals: globals.browser } },
+  { languageOptions: { globals: globals.node } },
   {
     ignores: [
       // Ignore items that are also gitignored