WEBDEV-8141: Github Pages

.github/workflows/gh-pages-main.yml

@@ -0,0 +1,40 @@
+# This workflow will generate the static page under `main` subdirectory inside the `ghpages` branch
+
+# This workflow will run every time new changes were pushed to the `main` branch
+
+name: App build CI/CD to main branch
+permissions:
+  contents: write
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build-and-deploy:
+    concurrency: ci-${{ github.ref }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v6
+        with:
+          persist-credentials: false
+
+      - name: Set up Git
+        run: |
+          git config --global user.name "Github Actions"
+          git config --global user.email "actions@github.com"
+
+      - name: Install and Build 🔧
+        run: |
+          npm ci
+          npm run ghpages:build
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: ghpages
+          folder: ghpages
+          clean-exclude: pr/
+          force: false
+          target-folder: main

.github/workflows/pr-preview.yml

@@ -0,0 +1,65 @@
+# This workflow will generate the static page under `pr` subdirectory inside the `ghpages` branch
+
+# This workflow will run every time there's a PR opened, reopened, synchronize, or closed
+
+name: Deploy PR previews
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+concurrency: preview-${{ github.ref }}
+
+env:
+  PREVIEW_BRANCH: ghpages
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - uses: actions/setup-node@v4
+
+      - name: Set up Git
+        run: |
+          git config --global user.name "Github Actions"
+          git config --global user.email "actions@github.com"
+
+      - name: Install and Build
+        run: |
+          npm install
+          npm run ghpages:build
+
+      # Reference: https://github.com/rossjrw/pr-preview-action
+      - name: Deploy preview
+        uses: rossjrw/pr-preview-action@v1
+        id: preview-step
+        with:
+          source-dir: ./ghpages/
+          umbrella-dir: pr
+          preview-branch: ${{ env.PREVIEW_BRANCH }}
+          comment: false
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: steps.preview-step.outputs.deployment-action == 'deploy'
+        with:
+          header: pr-preview
+          message: |
+            [PR Preview Action](https://github.com/rossjrw/pr-preview-action) ${{ steps.preview-step.outputs.action-version }}
+            :---:
+            | <p></p> :rocket: View preview at <br> ${{ steps.preview-step.outputs.preview-url }}demo/ <br><br>
+            | <h6>Built to branch [`${{ env.PREVIEW_BRANCH }}`](${{ github.server_url }}/${{ github.repository }}/tree/${{ env.PREVIEW_BRANCH }}) at ${{ steps.preview-step.outputs.action-start-time }}. <br> Preview will be ready when the [GitHub Pages deployment](${{ github.server_url }}/${{ github.repository }}/deployments) is complete. <br><br> </h6>
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: steps.preview-step.outputs.deployment-action == 'remove'
+        with:
+          header: pr-preview
+          message: |
+            [PR Preview Action](https://github.com/rossjrw/pr-preview-action) ${{ steps.preview-step.outputs.action-version }}
+            :---:
+            Preview removed because the pull request was closed.
+            ${{ steps.preview-step.outputs.action-start-time }}

.gitignore

@@ -15,3 +15,4 @@ node_modules/
 dist
 coverage
 __screenshots__
+ghpages

README.md

@@ -65,7 +65,7 @@ import '@demo/story-template';
 ...
 render() {
   return html`
-    <story-template elementTag="ia-button" .exampleUsage=${this.exampleUsage}>
+    <story-template elementTag="ia-button" elementClassName="IAButton" .exampleUsage=${this.exampleUsage}>
       <div slot="demo">
         <ia-button @click=${() => alert('Button clicked!')}
           >Click Me</ia-button

demo/story-template.ts

@@ -35,6 +35,8 @@ export type StyleInputData = {
 export class StoryTemplate extends LitElement {
   @property({ type: String }) elementTag = '';
 
+  @property({ type: String }) elementClassName = '';
+
   @property({ type: String }) exampleUsage = '';
 
   @property({ type: Object }) styleInputData?: StyleInputData;
@@ -135,26 +137,28 @@ export class StoryTemplate extends LitElement {
   }
 
   private get importCode(): string {
-    return `
+    if (this.elementClassName) {
+      return `
 import '${this.modulePath}';
 import { ${this.elementClassName} } from '${this.modulePath}';
     `;
+    } else {
+      return `
+import '${this.modulePath}';
+  `;
+    }
   }
 
   private get cssCode(): string {
     if (!this.appliedStyles) return '';
     return `
 
 ${this.elementTag} {
-  ${this.appliedStyles}     
+  ${this.appliedStyles}
 }
     `;
   }
 
-  private get elementClassName(): string | undefined {
-    return customElements.get(this.elementTag)?.name;
-  }
-
   private get modulePath(): string {
     return this.labs
       ? `@internetarchive/elements/labs/${this.elementTag}/${this.elementTag}`

index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Internet Archive Elements</title>
   <link rel="stylesheet" href="./demo/index.css" />
-  <script type="module" src="/demo/app-root.ts"></script>
+  <script type="module" src="./demo/app-root.ts"></script>
 </head>
 
 <body>

package.json

@@ -23,7 +23,8 @@
     "format": "wireit",
     "circular": "wireit",
     "prepare": "wireit",
-    "test": "wireit"
+    "test": "wireit",
+    "ghpages:build": "wireit"
   },
   "dependencies": {
     "@lit/localize": "^0.12.2",
@@ -109,6 +110,9 @@
       "dependencies": [
         "circular"
       ]
+    },
+    "ghpages:build": {
+      "command": "vite build --config vite.config.ghpages.ts && touch ./ghpages/.nojekyll"
     }
   }
 }

src/elements/ia-button/ia-button-story.ts

@@ -27,6 +27,7 @@ export class IAButtonStory extends LitElement {
     return html`
       <story-template
         elementTag="ia-button"
+        elementClassName="IAButton"
         .exampleUsage=${this.exampleUsage}
         .styleInputData=${{ settings: styleInputSettings }}
       >

src/elements/ia-status-indicator/ia-status-indicator-story.ts

@@ -91,6 +91,7 @@ export class IAStatusIndicatorStory extends LitElement {
     return html`
       <story-template
         elementTag="ia-status-indicator"
+        elementClassName="IAStatusIndicator"
         .exampleUsage=${this.exampleUsage}
         .styleInputData=${{ settings: styleInputSettings }}
       >

src/labs/ia-snow/ia-snow-story.ts

@@ -25,6 +25,7 @@ export class IASnowStory extends LitElement {
     return html`
       <story-template
         elementTag="ia-snow"
+        elementClassName="IASnow"
         .exampleUsage=${this.exampleUsage}
         labs
       >

vite.config.ghpages.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vitest/config';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  resolve: {
+    alias: {
+      '@src': path.resolve(__dirname, './src'),
+      '@demo': path.resolve(__dirname, './demo'),
+    },
+  },
+  build: {
+    outDir: './ghpages/demo',
+    emptyOutDir: true,
+    manifest: true,
+  },
+});