chore/sandbox pr previews

.eslintignore

@@ -8,3 +8,6 @@ cli/template
 docs/.vitepress/.temp/
 docs/.vitepress/.cache/
 docs/.vitepress/dist/
+
+# Ignore files in the GitHub Pages deploy previews
+pr-preview/

.github/workflows/github-pages-pr-preview.yaml

@@ -0,0 +1,100 @@
+name: Deploy Sandbox PR Preview to GitHub Pages
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      # Ensure previews are cleaned up when PR is closed
+      - closed
+    # TODO: Update branch name to beta when needed
+    branches:
+      - alpha
+
+concurrency:
+  group: sandbox-pr-preview-${{ github.ref }}
+  cancel-in-progress: true
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+  pull-requests: write
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - name: Remove sandbox preview comment
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-preview
+          delete: true
+          GITHUB_TOKEN: ${{ secrets.KONGPONENTS_BOT_PAT }}
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+         fetch-depth: 0
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build Sandbox
+        env:
+          # Tell the script to use the sandbox directory
+          USE_SANDBOX: true
+        run: yarn sandbox:build
+
+      # - name: Deploy Sandbox PR Preview to GitHub Pages
+      #   id: pr-preview
+      #   uses: rossjrw/pr-preview-action@v1
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.KONGPONENTS_BOT_PAT }}
+      #   with:
+      #     source-dir: ./sandbox/dist
+      #     preview-branch: ${{ github.head_ref || github.ref_name }}
+      #     umbrella-dir: pr-preview
+      #     token: ${{ secrets.KONGPONENTS_BOT_PAT }}
+
+      - name: Log dist contents
+        run:
+          |
+          ls -a sandbox/dist
+
+      - name: Generate target folder path
+        id: target-folder
+        run: |
+          echo "target-folder=pr-preview/pr-${{ github.event.number }}" >> $GITHUB_OUTPUT
+
+      # TODO: Only run when PR is created; create separate step for when PR is closed to remove pr folder
+      - name: Deploy Sandbox PR Preview to GitHub Pages
+        id: pr-preview
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          # TODO: Update branch name to beta when needed
+          branch: ${{ github.head_ref || github.ref_name }}
+          folder: sandbox/dist # The sandbox dist directory name
+          target-folder: ${{ steps.target-folder.outputs.target-folder }}
+          clean-exclude: pr-preview/ # Do not remove other PR preview builds
+          force: true
+          token: ${{ secrets.KONGPONENTS_BOT_PAT }}
+
+      - name: Provide sandbox preview link
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-preview
+          message: |
+            ## Sandbox Deploy Preview
+
+            https://kong.github.io/kongponents/${{ steps.target-folder.outputs.target-folder }}/
+          GITHUB_TOKEN: ${{ secrets.KONGPONENTS_BOT_PAT }}

.github/workflows/github-pages.yaml

@@ -18,21 +18,22 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: 'pages'
+  group: pages-${{ github.ref }}
   cancel-in-progress: false
 
 jobs:
-  # Single deploy job since we're just deploying
   deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+    # environment:
+    #   name: github-pages
+    #   url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     timeout-minutes: 10
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+        with:
+         fetch-depth: 0
 
       - name: Use Node.js
         uses: actions/setup-node@v3
@@ -55,8 +56,18 @@ jobs:
         uses: actions/upload-pages-artifact@v2
         with:
           # Upload sandbox/dist directory
-          path: './sandbox/dist'
+          path: ./sandbox/dist
+
+      # - name: Deploy to GitHub Pages
+      #   id: deployment
+      #   uses: actions/deploy-pages@v2
 
       - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v2
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          # TODO: Update branch name to beta when needed
+          branch: alpha
+          folder: ./sandbox/dist # The folder the action should deploy.
+          clean-exclude: pr-preview/ # Do not remove other PR preview builds
+          force: false
+          token: ${{ secrets.KONGPONENTS_BOT_PAT }}

.gitignore

@@ -18,3 +18,6 @@ docs/.vitepress/.temp
 docs/.vitepress/.cache
 docs/.vitepress/cache
 docs/.vitepress/dist
+
+# Ignore files in the GitHub Pages deploy previews
+pr-preview/

sandbox/index.html

@@ -2,12 +2,16 @@
 <html lang="en">
 
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Kongponents Sandbox</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="robots" content="noindex nofollow" />
+    <link rel="icon" href="/favicon.ico">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap"
+      rel="stylesheet">
+    <title>Kongponents Sandbox</title>
     <style>
       html,
       body {

sandbox/pages/HomePage.vue

@@ -41,10 +41,10 @@
       >
         <h2>Welcome to the Sandbox!</h2>
         <p>
-          The sandbox mode in Kongponents provides developers with a controlled environment to test and ensure that no styles from the docs app leak through into the component library. This feature guarantees that the components look and function as intended, without any external interference.
+          This sandbox (currently pointed to the <code>alpha</code> branch) provides users with a controlled environment to test and interact with components. This feature helps to guarantee that the components look and behave as intended, without external interference.
         </p>
         <p>
-          By using the sandbox mode, you can have confidence that components maintain their visual consistency, regardless of the context in which they are used.
+          By using the sandbox, you can verify that components maintain their visual consistency, regardless of the host app in which they are used.
         </p>
       </div>
       <router-view />

sandbox/router.ts

@@ -1,7 +1,7 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 
 export default createRouter({
-  history: createWebHistory('/kongponents'),
+  history: createWebHashHistory(),
   routes: [
     {
       path: '/',