GovAlta · vanessatran-ddi · Apr 27, 2026 · Apr 23, 2026
diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml
@@ -0,0 +1,110 @@
+name: PR Preview (GitHub Pages)
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize, closed]
+    branches:
+      - dev
+
+concurrency:
+  group: preview-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: "24"
+          cache: "npm"
+          cache-dependency-path: |
+            package-lock.json
+            docs/package-lock.json
+
+      - name: Install npm 11
+        run: npm install -g npm@11
+
+      - name: Install dependencies
+        if: github.event.action != 'closed'
+        run: |
+          npm ci
+          cd docs && npm ci --legacy-peer-deps
+
+      - name: Build docs
+        if: github.event.action != 'closed'
+        env:
+          PREVIEW_SITE: https://govalta.github.io
+          PREVIEW_BASE: /ui-components/pr-preview/pr-${{ github.event.number }}/
+        run: npx nx run docs:build
+
+      - name: Build React playground
+        if: github.event.action != 'closed'
+        env:
+          PREVIEW_BASE_REACT: /ui-components/pr-preview-react/pr-${{ github.event.number }}/
+        run: npx nx run react-prs:build:production
+
+      - name: Build Angular playground
+        if: github.event.action != 'closed'
+        env:
+          PREVIEW_BASE_ANGULAR: /ui-components/pr-preview-angular/pr-${{ github.event.number }}/
+        run: npx nx run angular-prs:build:production --base-href=$PREVIEW_BASE_ANGULAR
+
+      - name: Deploy docs preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./dist/docs
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview
+          action: auto
+
+      - name: Deploy React playground preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./dist/apps/prs/react
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview-react
+          action: auto
+
+      - name: Deploy Angular playground preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./dist/apps/prs/angular/browser
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview-angular
+          action: auto
+
+      - name: Post consolidated preview comment
+        if: github.event.action != 'closed'
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-preview-all
+          message: |
+            ## Preview links
+
+            | Target | URL |
+            |---|---|
+            | Docs | https://govalta.github.io/ui-components/pr-preview/pr-${{ github.event.number }}/ |
+            | React playground | https://govalta.github.io/ui-components/pr-preview-react/pr-${{ github.event.number }}/ |
+            | Angular playground | https://govalta.github.io/ui-components/pr-preview-angular/pr-${{ github.event.number }}/ |
+
+            Built from commit ${{ github.event.pull_request.head.sha }}. Previews are removed automatically when this PR closes.
+
+      - name: Post cleanup notice
+        if: github.event.action == 'closed'
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-preview-all
+          message: |
+            ## Preview removed
+
+            All preview folders cleaned from gh-pages branch.
diff --git a/apps/prs/angular/src/app/app.component.html b/apps/prs/angular/src/app/app.component.html
@@ -2,7 +2,7 @@
   <div style="min-height: 100vh; display: flex; flex-direction: column">
     <section slot="header" id="top" class="width" role="header" style="flex: 0 0 auto">
       <goab-microsite-header type="alpha" version="UAT" />
-      <goab-app-header heading="Testing Playground" url="/"></goab-app-header>
+      <goab-app-header heading="Testing Playground" [url]="baseHref"></goab-app-header>
     </section>
 
     <div
@@ -11,7 +11,7 @@
     >
       <goab-work-side-menu
         heading="Testing Playground"
-        url="/"
+        [url]="baseHref"
         [open]="true"
         (onNavigate)="handleNavigate($event)"
         [primaryContent]="primaryTemplate"
@@ -21,30 +21,30 @@
       <ng-template #primaryTemplate>
         <goab-work-side-menu-item
           label="All Components"
-          url="/everything"
+          [url]="baseHref + 'everything'"
           icon="list"
         ></goab-work-side-menu-item>
         <goab-work-side-menu-group icon="alert-circle" heading="Bugs">
           @for (route of bugRouteDefinitions; track route.path) {
             <goab-work-side-menu-item
               [label]="route.id + ' - ' + route.title"
-              [url]="'/' + route.path"
+              [url]="baseHref + route.path"
             ></goab-work-side-menu-item>
           }
         </goab-work-side-menu-group>
         <goab-work-side-menu-group icon="book" heading="Docs">
           @for (route of docsRouteDefinitions; track route.path) {
             <goab-work-side-menu-item
               [label]="route.title"
-              [url]="'/' + route.path"
+              [url]="baseHref + route.path"
             ></goab-work-side-menu-item>
           }
         </goab-work-side-menu-group>
         <goab-work-side-menu-group icon="star" heading="Features">
           @for (route of featureRouteDefinitions; track route.path) {
             <goab-work-side-menu-item
               [label]="route.id + ' - ' + route.title"
-              [url]="'/' + route.path"
+              [url]="baseHref + route.path"
             ></goab-work-side-menu-item>
           }
         </goab-work-side-menu-group>

diff --git a/apps/prs/angular/src/app/app.component.ts b/apps/prs/angular/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, inject } from "@angular/core";
+import { LocationStrategy } from "@angular/common";
 import { Router, NavigationEnd, RouterOutlet } from "@angular/router";
 import { filter } from "rxjs/operators";
 import {
@@ -37,6 +38,7 @@ export class AppComponent {
   readonly bugRouteDefinitions = bugRouteDefinitions;
   readonly featureRouteDefinitions = featureRouteDefinitions;
   readonly docsRouteDefinitions = docsRouteDefinitions;
+  readonly baseHref = inject(LocationStrategy).getBaseHref();
 
   private fullPageRoutes = ["/features/2885"];
   private router = inject(Router);
@@ -52,6 +54,9 @@ export class AppComponent {
   }
 
   handleNavigate(path: string): void {
-    this.router.navigateByUrl(path);
+    const internal = path.startsWith(this.baseHref)
+      ? "/" + path.slice(this.baseHref.length)
+      : path;
+    this.router.navigateByUrl(internal);
   }
 }
diff --git a/apps/prs/angular/src/index.html b/apps/prs/angular/src/index.html
@@ -6,6 +6,19 @@
   <title>Angular Playground</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!-- spa-github-pages: restore deep-link URL after 404.html redirect -->
+  <script type="text/javascript">
+    (function (l) {
+      if (l.search[1] === "/") {
+        var decoded = l.search
+          .slice(1)
+          .split("&")
+          .map(function (s) { return s.replace(/~and~/g, "&"); })
+          .join("?");
+        window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash);
+      }
+    })(window.location);
+  </script>
   <link rel="icon" type="image/x-icon" href="favicon.ico" />
   <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"></script>

diff --git a/apps/prs/angular/src/routes/bugs/3273/bug3273-2.component.html b/apps/prs/angular/src/routes/bugs/3273/bug3273-2.component.html
@@ -14,10 +14,10 @@ <h4>Scenario two</h4>
   <div style="max-width: 300px; margin-top: 24px">
     <goab-side-menu>
       <goab-side-menu-group heading="Parent Group">
-        <a href="/bugs/3273">Parent Item</a>
+        <a routerLink="/bugs/3273">Parent Item</a>
 
         <goab-side-menu-group heading="Child Group">
-          <a href="/bugs/3273-2">Child Item</a>
+          <a routerLink="/bugs/3273-2">Child Item</a>
         </goab-side-menu-group>
       </goab-side-menu-group>
     </goab-side-menu>

diff --git a/apps/prs/angular/src/routes/bugs/3273/bug3273-2.component.ts b/apps/prs/angular/src/routes/bugs/3273/bug3273-2.component.ts
@@ -1,11 +1,12 @@
 import { Component } from "@angular/core";
 import { CommonModule } from "@angular/common";
+import { RouterLink } from "@angular/router";
 import { GoabSideMenu, GoabSideMenuGroup } from "@abgov/angular-components";
 
 @Component({
   standalone: true,
   selector: "abgov-bug3273-2",
   templateUrl: "./bug3273-2.component.html",
-  imports: [CommonModule, GoabSideMenu, GoabSideMenuGroup],
+  imports: [CommonModule, RouterLink, GoabSideMenu, GoabSideMenuGroup],
 })
 export class Bug32732Component {}
diff --git a/apps/prs/angular/src/routes/bugs/3273/bug3273.component.html b/apps/prs/angular/src/routes/bugs/3273/bug3273.component.html
@@ -16,10 +16,10 @@ <h4>Scenario one</h4>
   <div style="max-width: 300px; margin-top: 24px">
     <goab-side-menu>
       <goab-side-menu-group heading="Parent Group">
-        <a href="/bugs/3273">Parent Item</a>
+        <a routerLink="/bugs/3273">Parent Item</a>
 
         <goab-side-menu-group heading="Child Group">
-          <a href="/bugs/3273-2">Child Item</a>
+          <a routerLink="/bugs/3273-2">Child Item</a>
         </goab-side-menu-group>
       </goab-side-menu-group>
     </goab-side-menu>

diff --git a/apps/prs/angular/src/routes/bugs/3273/bug3273.component.ts b/apps/prs/angular/src/routes/bugs/3273/bug3273.component.ts
@@ -1,11 +1,12 @@
 import { Component } from "@angular/core";
 import { CommonModule } from "@angular/common";
+import { RouterLink } from "@angular/router";
 import { GoabSideMenu, GoabSideMenuGroup } from "@abgov/angular-components";
 
 @Component({
   standalone: true,
   selector: "abgov-bug3273",
   templateUrl: "./bug3273.component.html",
-  imports: [CommonModule, GoabSideMenu, GoabSideMenuGroup],
+  imports: [CommonModule, RouterLink, GoabSideMenu, GoabSideMenuGroup],
 })
 export class Bug3273Component {}
diff --git a/apps/prs/react/index.html b/apps/prs/react/index.html
@@ -4,10 +4,23 @@
 <head>
   <meta charset="utf-8" />
   <title>React Playground</title>
-  <base href="/" />
+  <base href="%BASE_URL%" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  <!-- spa-github-pages: restore deep-link URL after 404.html redirect -->
+  <script type="text/javascript">
+    (function (l) {
+      if (l.search[1] === "/") {
+        var decoded = l.search
+          .slice(1)
+          .split("&")
+          .map(function (s) { return s.replace(/~and~/g, "&"); })
+          .join("?");
+        window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash);
+      }
+    })(window.location);
+  </script>
+  <link rel="icon" type="image/x-icon" href="%BASE_URL%favicon.ico" />
   <link rel="stylesheet" href="/src/styles.css" />
   <script
     type="module"

diff --git a/apps/prs/react/src/app/app.tsx b/apps/prs/react/src/app/app.tsx
@@ -24,27 +24,33 @@ const appContentStyle: CSSProperties = {
 
 export function App() {
   const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+
+  const handleNavigate = (path: string) => {
+    const internal = path.startsWith(baseUrl) ? "/" + path.slice(baseUrl.length) : path;
+    navigate(internal);
+  };
 
   return (
     <GoabOneColumnLayout>
       <section slot="header" id="top">
         <GoabMicrositeHeader type="alpha" version="UAT" />
-        <GoabAppHeader heading="Testing Playground" url="/" />
+        <GoabAppHeader heading="Testing Playground" url={baseUrl} />
       </section>
       <div style={appContentStyle}>
         <GoabWorkSideMenu
           heading="Testing Playground"
-          url="/"
+          url={baseUrl}
           open={true}
-          onNavigate={(path: string) => navigate(path)}
+          onNavigate={handleNavigate}
           primaryContent={
             <>
               <GoabWorkSideMenuGroup icon="alert-circle" heading="Bugs">
                 {bugRouteDefinitions.map((route) => (
                   <GoabWorkSideMenuItem
                     key={route.path}
                     label={route.id + " - " + route.title}
-                    url={`/${route.path}`}
+                    url={`${baseUrl}${route.path}`}
                   />
                 ))}
               </GoabWorkSideMenuGroup>
@@ -54,7 +60,7 @@ export function App() {
                   <GoabWorkSideMenuItem
                     key={route.path}
                     label={route.id + " - " + route.title}
-                    url={`/${route.path}`}
+                    url={`${baseUrl}${route.path}`}
                   />
                 ))}
               </GoabWorkSideMenuGroup>
@@ -63,11 +69,11 @@ export function App() {
                   <GoabWorkSideMenuItem
                     key={route.path}
                     label={route.title}
-                    url={`/${route.path}`}
+                    url={`${baseUrl}${route.path}`}
                   />
                 ))}
               </GoabWorkSideMenuGroup>
-              <GoabWorkSideMenuItem icon="list" label="Everything" url="/everything" />
+              <GoabWorkSideMenuItem icon="list" label="Everything" url={`${baseUrl}everything`} />
             </>
           }
         />

diff --git a/apps/prs/react/src/main.tsx b/apps/prs/react/src/main.tsx
@@ -11,7 +11,7 @@ const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
 
 root.render(
   <StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename={import.meta.env.BASE_URL}>
       <Routes>
         <Route path="/everything/b" element={<EverythingBRoute />} />
         <Route path="/" element={<App />}>

diff --git a/apps/prs/react/vite.config.ts b/apps/prs/react/vite.config.ts
@@ -5,6 +5,7 @@ import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
 
 export default defineConfig({
   root: __dirname,
+  base: process.env.PREVIEW_BASE_REACT || "/",
   cacheDir: "../../../node_modules/.vite/playground/react",
 
   server: {

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -10,7 +10,8 @@ const workspaceRoot = path.resolve(__dirname, "..");
 
 // https://astro.build/config
 export default defineConfig({
-  site: "https://design.alberta.ca",
+  site: process.env.PREVIEW_SITE || "https://design.alberta.ca",
+  base: process.env.PREVIEW_BASE || "/",
   root: ".",
   outDir: "../dist/docs",
   redirects: {
@@ -50,6 +51,11 @@ export default defineConfig({
     resolve: {
       alias: [
         // More specific aliases must come first
+        // allow to use import { withBase } from '@/lib/base-url' instead of '../../lib/base-url'
+        {
+          find: /^@\/(.*)$/,
+          replacement: path.resolve(__dirname, "src/$1"),
+        },
         {
           find: "@abgov/react-components/experimental",
           replacement: path.resolve(