ci: use Github Action to deploy the website

.github/workflows/check-pr.yml

@@ -0,0 +1,33 @@
+name: Check Pull Request
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build_site:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # If you're using pnpm, uncomment the following step and adjust commands accordingly
+      # - name: Install pnpm
+      #   uses: pnpm/action-setup@v3
+      #   with:
+      #     version: 8
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        env:
+          BASE_PATH: '/${{ github.event.repository.name }}'
+        run: npm run build

.github/workflows/deploy.yml

@@ -0,0 +1,56 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: 
+      - 'main'
+
+jobs:
+  build_site:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # If you're using pnpm, uncomment the following step and adjust commands accordingly
+      # - name: Install pnpm
+      #   uses: pnpm/action-setup@v3
+      #   with:
+      #     version: 8
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        env:
+          BASE_PATH: '/${{ github.event.repository.name }}'
+        run: npm run build
+
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # This should match the `pages` option in your adapter-static options
+          path: 'build/'
+
+  deploy:
+    needs: build_site
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4

src/lib/components/common/AdvantageCard.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { base } from "$app/paths";
+
   type AdvantageCard = {
     title: string;
     description: string;
@@ -12,7 +14,7 @@
   class="border-white/[13%] gap-2 flex flex-col justify-end xl:aspect-[16/10] xl:px-14 xl:py-9 xl:border-2"
 >
   <div class="flex items-center gap-4 xl:items-start xl:flex-col xl:gap-3">
-    <img src={icon} alt="icon" class="size-8 xl:size-12" />
+    <img src="{base}{icon}" alt="icon" class="size-8 xl:size-12" />
     <h1 class="text-2xl font-medium uppercase xl:text-3xl">{title}</h1>
   </div>
   <p class="text-neutral xl:text-xl xl:leading-9 xl:tracking-[0.24px]">{description}</p>

src/lib/components/common/DownloadLink.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { base } from "$app/paths";
+
   type DownloadLink = {
     icon: string;
     href: string;
@@ -13,7 +15,7 @@
     {href}
     class="flex items-center gap-1 text-lg font-medium text-right md:gap-2 md:text-2xl text-primary hover:opacity-60"
   >
-    <img src={icon} alt="download" class="size-6 md:size-8" />
+    <img src="{base}{icon}" alt="download" class="size-6 md:size-8" />
     <span class="capitalize">{text}</span>
   </a>
 </div>

src/lib/components/core/Logo.svelte

@@ -1,6 +1,10 @@
-<a href="/">
+<script>
+  import { base } from "$app/paths";
+</script>
+
+<a href="{base}/">
   <div class="flex items-center gap-4">
-    <img src="/logo.svg" alt="Logo" class="size-10" />
+    <img src="{base}/logo.svg" alt="Logo" class="size-10" />
     <span class="font-semibold uppercase text-2xl tracking-[2.72px] select-none">ANKI</span>
   </div>
 </a>

src/lib/components/core/Navigation.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
   import Logo from '$lib/components/core/Logo.svelte';
+  import { base } from '$app/paths';
 
   type MenuOption = {
     href: string;
@@ -62,7 +63,7 @@
       aria-controls="dropdown-menu"
       class="focus:shadow-solid flex items-center justify-center gap-5 capitalize hover:opacity-60"
     >
-      <img src="/icons/menu-bars.svg" alt="menu" class="size-10" />
+      <img src="{base}/icons/menu-bars.svg" alt="menu" class="size-10" />
     </button>
   </div>
 </header>
@@ -84,7 +85,7 @@
       >
         <span>{text}</span>
         {#if external}
-          <img src="/icons/link-arrow.svg" alt="outlink" class="size-6" />
+          <img src="{base}/icons/link-arrow.svg" alt="outlink" class="size-6" />
         {/if}
       </a>
     {/each}

src/lib/components/sections/BasicConcepts.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { base } from '$app/paths';
   import DualHeader from '$lib/components/common/DualHeader.svelte';
 </script>
 
@@ -10,7 +11,7 @@
   </DualHeader>
   <div class="flex flex-col items-center gap-6 md:gap-20 md:flex-row">
     <img
-      src="/graphics/deck-graphic.svg"
+      src="{base}/graphics/deck-graphic.svg"
       alt="deck-graphic"
       class="aspect-[16/10] grow max-w-[90%] md:max-w-[40%]"
     />
@@ -24,7 +25,7 @@
   </div>
   <div class="flex flex-col items-center gap-6 md:gap-20 md:flex-row-reverse">
     <img
-      src="/graphics/review-graphic.svg"
+      src="{base}/graphics/review-graphic.svg"
       alt="deck-graphic"
       class="aspect-[16/10] grow max-w-[90%] md:max-w-[40%]"
     />

src/lib/components/sections/Testimonials.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { base } from '$app/paths';
   import DualHeader from '$lib/components/common/DualHeader.svelte';
 
   type Testimonial = {
@@ -63,10 +64,10 @@
       <span class="pr-8 sm:text-xl text-neutral">— {testimonials[index].author}</span>
       <div class="flex gap-6 lg:gap-14 min-w-fit">
         <button onclick={() => changeQuote(-1)} class="hover:opacity-60">
-          <img src="/icons/left-arrow.svg" alt="left-arrow" class="size-6 lg:size-9" />
+          <img src="{base}/icons/left-arrow.svg" alt="left-arrow" class="size-6 lg:size-9" />
         </button>
         <button onclick={() => changeQuote(+1)} class="hover:opacity-60">
-          <img src="/icons/right-arrow.svg" alt="right-arrow" class="size-6 lg:size-9" />
+          <img src="{base}/icons/right-arrow.svg" alt="right-arrow" class="size-6 lg:size-9" />
         </button>
       </div>
     </div>

src/routes/+layout.svelte

@@ -2,6 +2,8 @@
   import '@fontsource-variable/outfit';
   import '../app.css';
   import Navigation from '$lib/components/core/Navigation.svelte';
+  import { base } from '$app/paths';
+
   interface Props {
     children?: import('svelte').Snippet;
   }
@@ -11,7 +13,7 @@
 
 <svelte:head>
   <title>Anki - powerful, intelligent flashcards</title>
-  <link rel="icon" href="/logo.svg" />
+  <link rel="icon" href="{base}/logo.svg" />
 </svelte:head>
 
 <Navigation />

svelte.config.js

@@ -12,7 +12,10 @@ const config = {
     // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter({ fallback: '404.html' }),
-  },
+    paths: {
+      base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
+    }
+  }
 };
 
 export default config;