Store artifact and deploy it as gh-pages

This ensures only the deploy action is granted the write rights.
geoblocks · Aug 21, 2024 · 6e84930 · 6e84930
1 parent c328fd4
commit 6e84930
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 6 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -12,14 +12,17 @@ env:
   IN_CI: "1"
 
 jobs:
-  basic:
+  build:
     timeout-minutes: 3
     runs-on: ubuntu-24.04
     name: Basic checks
     steps:
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
+      - name: Retrieve npm dependencies
+        run: npm ci
       - name: Build
         run: npm run build
       - name: Prettier
@@ -28,3 +31,27 @@ jobs:
         run: npm run lint
       # - name: Api extractor
       #   run: npm run api-extractor-check
+
+      # - name: Setup Pages
+      #   uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "dist"
+
+  deploy:
+    needs: build
+
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/eslint.config.js b/eslint.config.js
@@ -22,6 +22,6 @@ export default tseslint.config(
   },
   prettierConfig,
   {
-    ignores: ["lib/*"],
+    ignores: ["lib/*", "dist/*"],
   },
 );
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/apps/buildings/index.html b/src/apps/buildings/index.html
@@ -6,8 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Revolutionary buildings app</title>
     <!-- <link rel="stylesheet" href="./src/index.css" /> -->
+    <script type="module" src="./index.ts"></script>
   </head>
   <body>
-    THIS IS A CRAZY BUILDINGS app
+    <noscript>Enable JS!</noscript>
+    <ngv-app-buildings></ngv-app-buildings>
   </body>
 </html>
diff --git a/src/apps/buildings/index.ts b/src/apps/buildings/index.ts
@@ -0,0 +1,54 @@
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+import "../../structure/ngv-structure-app.js";
+import { INgvStructureApp } from "../../structure/ngv-structure-app.js";
+
+// @ts-expect-error ?url parameter is a viteJS specificity
+import logoUrl from "../../logo.svg?url";
+
+@customElement("ngv-app-buildings")
+export class NgvAppBuildings extends LitElement {
+  @state()
+  ngvStructureAppConfig: INgvStructureApp;
+
+  constructor() {
+    super();
+    // this.shadowRoot.adoptedStyleSheets.push(styles);
+  }
+
+  protected firstUpdated(): void {
+    // simulate retrieving config from an external config file
+    setTimeout(() => {
+      this.ngvStructureAppConfig = {
+        header: {
+          languages: ["fr", "en", "it", "de"],
+          logo: logoUrl as string,
+          title: {
+            fr: "Ma super app",
+            en: "My super app",
+            de: "Meine supper app",
+            it: "Mia super app",
+          },
+        },
+        footer: {
+          contact: "[email protected]",
+          impressum: {
+            fr: "Bla bla FR impressim",
+            en: "Bla bla EN impressim",
+            de: "Bla bla DE impressim",
+            it: "Bla bla IT impressim",
+          },
+        },
+      };
+    }, 200);
+  }
+
+  render() {
+    return html`
+      <ngv-structure-app .config=${this.ngvStructureAppConfig}>
+        THIS IS A CRAZY BUILDINGS app
+      </ngv-structure-app>
+    `;
+  }
+}
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1 @@
+export const ngv = {};
diff --git a/logo.svg → src/logo.svg b/logo.svg → src/logo.svg
diff --git a/src/structure/ngv-structure-app.ts b/src/structure/ngv-structure-app.ts
@@ -0,0 +1,61 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// Fixme: this should be one of the supported language.
+// Per application?
+type Language = "en" | "it" | "fr" | "de";
+
+export interface INgvStructureApp {
+  header: {
+    logo: string;
+    languages: Language[];
+    title: Record<Language, string>;
+  };
+  footer: {
+    impressum: Record<Language, string>;
+    contact: string;
+  };
+}
+
+/**
+ * This element structures the app using slots.
+ */
+@customElement("ngv-structure-app")
+export class NgvStructureApp extends LitElement {
+  @property({ type: Object })
+  config: INgvStructureApp;
+
+  constructor() {
+    super();
+    // this.shadowRoot.adoptedStyleSheets.push(styles);
+  }
+
+  render() {
+    const { header, footer } = this.config;
+    return html`
+      <header>
+        <img src="${header.logo}" />
+        <div>
+          <label for="language">Lang:</label>
+          <select name="language" id="language">
+            ${header.languages.map(
+              (l) => html`<option value="${l}">${l}</option>`,
+            )}
+          </select>
+        </div>
+      </header>
+      <main>
+        <slot></slot>
+      </main>
+      <footer>
+        <p>${footer.impressum}</p>
+      </footer>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ngv-structure-app": NgvStructureApp;
+  }
+}