Add UI deployment workflow (#6)

* add gh-pages workflow

* fix path

* set permissions

* fix permissions

* set base dir

* fix ergo logo

* update branch

.github/workflows/deploy.yml

@@ -0,0 +1,36 @@
+name: Deploy
+
+permissions:
+  contents: write
+  pages: write
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm --filter ui build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: packages/ui/dist
+          # cname: sigmafi.app # if wanna deploy to custom domain

packages/ui/src/components/AppHeader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useColorMode } from "@vueuse/core";
 import { Moon, Sun } from "lucide-vue-next";
+import ErgoLogo from "@/assets/ergo.svg";
 import { Button } from "@/components/ui/button";
 import { CardHeader, CardTitle } from "@/components/ui/card";
 import { useToast } from "@/components/ui/toast/use-toast";
@@ -28,7 +29,7 @@ function toggleTheme() {
 
 <template>
   <CardHeader class="flex-row items-center gap-2 space-y-0">
-    <img src="../assets/ergo.svg" alt="Nautilus Wallet" class="w-10" />
+    <ErgoLogo class="h-10 w-10" />
     <CardTitle class="flex-grow cursor-default tracking-normal">Ergo Wallet</CardTitle>
 
     <div class="flex gap-2">

packages/ui/vite.config.ts

@@ -4,15 +4,17 @@ import { defineConfig } from "vite";
 import svgLoader from "vite-svg-loader";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue(), svgLoader()],
-  base: "./",
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src")
+export default defineConfig(({ mode }) => {
+  return {
+    plugins: [vue(), svgLoader()],
+    base: mode === "production" ? "/ergsnap/" : "./",
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src")
+      }
+    },
+    server: {
+      port: 8000
     }
-  },
-  server: {
-    port: 8000
-  }
+  };
 });