Merge pull request #57 from osoc24/56-ama-setup-deployment

CD Workflow & deployment

.github/workflows/cd.yml

@@ -0,0 +1,111 @@
+name: Loama CD
+
+on:
+  push:
+    branches: [ "root" ]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  controller-build:
+    name: 'Controller Build'
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: controller
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@v4
+        name: Install PNPM
+        with:
+          version: latest
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        id: cache
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v4
+        name: Setup PNPM cache
+        env:
+          STORE_PATH: ${{ steps.cache.outputs.STORE_PATH }}
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Insall dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Run Typescript Check
+        run: pnpm run build >> $GITHUB_STEP_SUMMARY
+      - name: Save distribution files
+        uses: actions/upload-artifact@v4
+        with:
+          name: controller-dist
+          path: ${{github.workspace}}/controller/dist
+
+  build:
+    name: 'Deploy App'
+    runs-on: ubuntu-latest
+    needs: controller-build
+    defaults:
+      run:
+        working-directory: loama
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Download controller dist
+        uses: actions/download-artifact@v4
+        with:
+          name: controller-dist
+          path: ${{github.workspace}}/controller/dist
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@v4
+        name: Install PNPM
+        with:
+          version: latest
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        id: cache
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v4
+        name: Setup PNPM cache
+        env:
+          STORE_PATH: ${{ steps.cache.outputs.STORE_PATH }}
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies of controller
+        working-directory: controller
+        run: pnpm install --frozen-lockfile
+      - name: Install dependencies of loama
+        run: pnpm install --frozen-lockfile
+      - name: Build applicaion
+        run: pnpm run build
+      - name: 'Dup `index.html` to `404.html` for redirects'
+        run: cp dist/index.html dist/404.html
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist folder
+          path: ${{github.workspace}}/loama/dist
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/ci.yml

@@ -1,13 +1,4 @@
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-# ESLint is a tool for identifying and reporting on patterns
-# found in ECMAScript/JavaScript code.
-# More details at https://github.com/eslint/eslint
-# and https://eslint.org
-
-name: AMA ESLint
+name: Loama CI
 
 on:
   push:

loama/src/components/LoginForm.vue

@@ -52,7 +52,7 @@ const login = () => {
 
   store.session.login({
     oidcIssuer: issuer,
-    redirectUrl: new URL('/home/', window.location.href).toString(),
+    redirectUrl: new URL(`${import.meta.env.BASE_URL}home/`, window.location.href).toString(),
     clientName: 'LOAMA',
   })
     .then(() => {

loama/src/components/explorer/ResourceExplorer.vue

@@ -7,15 +7,14 @@
             </ExplorerEntry>
         </div>
         <div class="right-panel">
-            <Vault class="side-image" />
+            <img class="side-image" src="/vault.svg" />
             <strong>No folder or file selected!</strong>
             <i>Select one to get started</i>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import Vault from "@/assets/vault.svg"
 import { store } from "@/store";
 import type { Session } from "@inrupt/solid-client-authn-browser";
 import { getPod } from "loama-controller";

loama/src/components/header/HeaderBase.vue

@@ -1,7 +1,7 @@
 <template>
     <header>
         <div class="wordmark">
-            <Loama />
+            <img src="/loama.svg" />
             <span>Loama</span>
         </div>
         <nav>
@@ -20,7 +20,6 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import Loama from '../../assets/loama.svg'
 import LoButton from '../LoButton.vue'
 import HeaderContextMenu from './HeaderContextMenu.vue'
 import { PhShareFat } from '@phosphor-icons/vue';

loama/src/router/index.ts

@@ -9,12 +9,12 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
+      path: `/`,
       name: 'login',
       component: LoginView
     },
     {
-      path: '/home/:filePath(.*)',
+      path: `/home/:filePath(.*)`,
       name: 'home',
       component: HomeView
     }

loama/src/views/LoginView.vue

@@ -7,7 +7,7 @@
     </div>
     <div class="right-panel">
       <InfoPopup v-show="showPopup" />
-      <img src="../assets/loama.svg" />
+      <img src="/loama.svg" />
     </div>
   </div>
 </template>

loama/vite.config.ts

@@ -7,6 +7,7 @@ import svgLoader from 'vite-svg-loader'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '/loama/',
   plugins: [
     vue(),
     vueDevTools(),