feat(demo): publish

Author: MM25Zamanian

.github/workflows/publish-container.yml

@@ -0,0 +1,114 @@
+# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json
+
+name: Build & Publish Containers
+
+on:
+  workflow_dispatch:
+
+  push:
+    branches:
+      - next
+      - main
+
+env:
+  USER: alwatr
+
+jobs:
+  build:
+    name: Build & Publish Containers
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - name: hybrid-ui-demo-app
+            path: ./demo/
+            context: .
+
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
+
+    steps:
+      - name: ⤵️ Checkout repository
+        uses: actions/[email protected]
+
+      - name: ❔ Check Container files changed
+        id: file_change
+        if: ${{ github.event_name != 'release' && github.event_name != 'workflow_dispatch' }}
+        uses: dorny/[email protected]
+        with:
+          filters: |
+            container_folder:
+              ${{ matrix.context }}/**
+
+      - name: 🏗 Install cosign
+        if: ${{ github.event_name != 'pull_request' && steps.file_change.outputs.container_folder != 'false' }}
+        uses: sigstore/[email protected]
+
+      - name: 🏗 Setup Docker Buildx
+        if: ${{ steps.file_change.outputs.container_folder != 'false' }}
+        uses: docker/[email protected]
+
+      - name: 🏗 Cache Docker Layers
+        if: ${{ steps.file_change.outputs.container_folder != 'false' }}
+        uses: actions/[email protected]
+        with:
+          path: /tmp/.buildx-cache
+          key: container/${{ matrix.name }}
+
+      # - name: 🏗 Log into docker hub registry
+      #   if: ${{ github.event_name != 'pull_request' && steps.file_change.outputs.container_folder != 'false' }}
+      #   uses: docker/[email protected]
+      #   with:
+      #     username: ${{env.USER}}
+      #     password: ${{secrets.DOCKER_HUB_TOKEN}}
+
+      - name: 🏗 Log into ghcr.io registry
+        if: ${{ github.event_name != 'pull_request' && steps.file_change.outputs.container_folder != 'false' }}
+        uses: docker/[email protected]
+        with:
+          registry: ghcr.io
+          username: ${{env.USER}}
+          password: ${{secrets.GITHUB_TOKEN}}
+
+      - name: 🏗 Extract metadata
+        if: ${{ steps.file_change.outputs.container_folder != 'false' }}
+        id: meta
+        uses: docker/[email protected]
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          images: |
+            name=ghcr.io/${{env.USER}}/${{matrix.name}},enable=true
+            name=docker.io/${{env.USER}}/${{matrix.name}},enable=false
+          tags: |
+            type=semver,enable=true,pattern={{major}}
+            type=semver,enable=true,pattern={{major}}.{{minor}}
+            type=semver,enable=true,pattern={{version}}
+            type=ref,enable=true,event=branch
+          labels: |
+            org.opencontainers.image.title="gecut/${{matrix.name}}"
+            org.opencontainers.image.vendor="Gecut"
+            org.opencontainers.image.documentation="https://github.com/gecut/hybrid-ui"
+            org.opencontainers.image.authors="S. MohammadMahdi Zamanian <[email protected]> (https://mm25zamanian.ir)"
+
+      - name: 🚀 Build and push container image
+        if: ${{ steps.file_change.outputs.container_folder != 'false' }}
+        id: build_and_push
+        uses: docker/[email protected]
+        with:
+          context: ${{matrix.context}}
+          file: ${{matrix.path}}/Dockerfile
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache
+
+      # - name: 🏗 Sign the image with GitHub OIDC Token
+      #   if: ${{ github.event_name != 'pull_request' && steps.file_change.outputs.container_folder != 'false' }}
+      #   env:
+      #     COSIGN_EXPERIMENTAL: 'true'
+      #   run: echo "${{steps.meta.outputs.tags}}" | xargs -I {} cosign sign --yes {}@${{steps.build_and_push.outputs.digest}}

demo/.dockerignore

@@ -0,0 +1,7 @@
+.git*
+.github
+.vscode
+deploy
+dist
+Dockerfile
+README.md

demo/Dockerfile

@@ -0,0 +1,23 @@
+FROM ghcr.io/alwatr/node:21.7.1 as builder
+
+RUN apk add --no-cache git;
+RUN set -ex; corepack enable;
+
+COPY . .
+
+RUN set -eux; \
+  yarn install --immutable; \
+  yarn build; \
+  ls -lahF .; \
+  ls -RlahF /app/demo;
+
+# ---
+
+FROM ghcr.io/alwatr/nginx-cdn:2.5.0 as nginx
+LABEL org.opencontainers.image.base.name="ghcr.io/alwatr/nginx-cdn:2.5.0"
+
+COPY --from=builder /app/demo/dist/ .
+
+RUN pwd; ls -lAhF;
+
+EXPOSE 80

demo/assets/tick.svg

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gecut Buttons</title>
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
     <script type="module" src="../main/global.ts"></script>
     <script type="module" src="./scripts.ts"></script>
   </head>

demo/button/index.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gecut Dialog</title>
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
     <script type="module" src="../main/global.ts"></script>
     <script type="module" src="./scripts.ts"></script>
   </head>

demo/dialog/index.html

@@ -4,6 +4,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gecut</title>
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
     <script type="module" src="main/scripts.ts"></script>
     <script type="module" src="main/global.ts"></script>
   </head>

demo/index.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gecut Lists</title>
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
     <script type="module" src="../main/global.ts"></script>
     <script type="module" src="./scripts.ts"></script>
   </head>

demo/lists/index.html

@@ -4,7 +4,7 @@ import {map} from 'lit/directives/map.js';
 import {range} from 'lit/directives/range.js';
 import {html, render} from 'lit/html.js';
 
-import placeHolderImage from '../assets/placeholder.webp';
+import placeHolderImage from '../public/placeholder.webp';
 
 render(
   html`

demo/lists/scripts.ts

@@ -3,9 +3,15 @@ import {classMap} from 'lit/directives/class-map.js';
 import {map} from 'lit/directives/map.js';
 import {html, render} from 'lit/html.js';
 
+import button from '../public/previews/button.png';
+import dialog from '../public/previews/dialog.png';
+import lists from '../public/previews/lists.png';
+import topBar from '../public/previews/top-bar.png';
+
 interface Demo {
   title: string;
   href: string;
+  imageSource: string;
 
   align?: 'center' | 'bottom' | 'top';
 }
@@ -15,21 +21,23 @@ const demos: Demo[] = [
   {
     title: 'Commons Buttons',
     href: '/button/',
-    align: 'center',
+    imageSource: button,
   },
   {
     title: 'Dialog',
     href: '/dialog/',
-    align: 'center',
+    imageSource: dialog,
   },
   {
     title: 'Top App Bar',
     href: '/top-bar/',
+    imageSource: topBar,
     align: 'top',
   },
   {
     title: 'Lists',
     href: '/lists/',
+    imageSource: lists,
     align: 'top',
   },
 ];
@@ -45,7 +53,7 @@ if (container)
         >
           <div class="aspect-w-4 aspect-h-3 w-full overflow-hidden rounded-md relative">
             <img
-              src="${demo.href}preview.png"
+              src=${demo.imageSource}
               class="h-full w-full object-cover invert dark:invert-0 ${classMap({
                 'object-center': demo.align === 'center' || !demo.align,
                 'object-top': demo.align === 'top',