deploy as static site

- change to static adapter - fix URL issues for hosting the static site in a subdirectory - ensure everything server side is pre-rendered - only show dev page on dev builds
jakmeier · Dec 22, 2023 · e9dcbf6 · e9dcbf6
1 parent 6075fb0
commit e9dcbf6
Show file tree

Hide file tree

Showing 15 changed files with 306 additions and 240 deletions.
diff --git a/bouncy_frontend/package-lock.json b/bouncy_frontend/package-lock.json
diff --git a/bouncy_frontend/package.json b/bouncy_frontend/package.json
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/kit": "^1.27.4",
     "date-fns": "^3.0.1",
     "eslint": "^8.28.0",

diff --git a/bouncy_frontend/src/app.css b/bouncy_frontend/src/app.css
@@ -1,55 +1,3 @@
-@font-face {
-    font-family: 'Walkway';
-    src: url('fonts/WalkwaySemiBold.woff2') format('woff2'),
-        url('fonts/WalkwaySemiBold.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Walkway';
-    src: url('fonts/WalkwayBold.woff2') format('woff2'), url('fonts/WalkwayBold.woff') format('woff');
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Walkway';
-    src: url('fonts/WalkwayBlack.woff2') format('woff2'),
-        url('fonts/WalkwayBlack.woff') format('woff');
-    font-weight: 900;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Walkway';
-    src: url('fonts/Walkway.woff2') format('woff2'), url('fonts/Walkway.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Walkway Oblique';
-    src: url('fonts/WalkwayObliqueSemiBold.woff2') format('woff2'),
-        url('fonts/WalkwayObliqueSemiBold.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Walkway Oblique';
-    src: url('fonts/WalkwayOblique.woff2') format('woff2'),
-        url('fonts/WalkwayOblique.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
 /*
 * Theme colors for re-use in all components.
 * The theme is static for now.

diff --git a/bouncy_frontend/src/app.html b/bouncy_frontend/src/app.html
@@ -13,4 +13,66 @@
     <div style="display: contents">%sveltekit.body%</div>
 </body>
 
+<style>
+    @font-face {
+        font-family: 'Walkway';
+        src:
+            url('%sveltekit.assets%/fonts/WalkwaySemiBold.woff2') format('woff2'),
+            url('%sveltekit.assets%/fonts/WalkwaySemiBold.woff') format('woff');
+        font-weight: 400;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'Walkway';
+        src:
+            url('%sveltekit.assets%/fonts/WalkwayBold.woff2') format('woff2'),
+            url('%sveltekit.assets%/fonts/WalkwayBold.woff') format('woff');
+        font-weight: 700;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'Walkway';
+        src:
+            url('%sveltekit.assets%/fonts/WalkwayBlack.woff2') format('woff2'),
+            url('%sveltekit.assets%/fonts/WalkwayBlack.woff') format('woff');
+        font-weight: 900;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'Walkway';
+        src:
+            url('%sveltekit.assets%/fonts/Walkway.woff2') format('woff2'),
+            url('%sveltekit.assets%/fonts/Walkway.woff') format('woff');
+        font-weight: 300;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'Walkway Oblique';
+        src:
+            url('%sveltekit.assets%/fonts/WalkwayObliqueSemiBold.woff2') format('woff2'),
+            url('%sveltekit.assets%/fonts/WalkwayObliqueSemiBold.woff') format('woff');
+        font-weight: 400;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'Walkway Oblique';
+        src:
+            url('%sveltekit.assets%/fonts/WalkwayOblique.woff2') format('woff2'),
+            url('%sveltekit.assets%/fonts/WalkwayOblique.woff') format('woff');
+        font-weight: 300;
+        font-style: normal;
+        font-display: swap;
+    }
+</style>
+
 </html>
diff --git a/bouncy_frontend/src/lib/pose.js b/bouncy_frontend/src/lib/pose.js
@@ -14,7 +14,7 @@
 
 import { PoseLandmarker, FilesetResolver } from '@mediapipe/tasks-vision';
 import { Cartesian3d, Keypoints, KeypointsSide, loadPoseFile, loadStepFile } from './instructor/bouncy_instructor';
-
+import { base } from '$app/paths';
 
 export function landmarksToKeypoints(landmarks) {
     const left = new KeypointsSide(
@@ -126,7 +126,7 @@ async function initMediaPipeBackend() {
         {
             baseOptions: {
                 // loading from a path (could also load from buffer)
-                modelAssetPath: 'models/pose_landmarker_full.task',
+                modelAssetPath: `${base}/models/pose_landmarker_full.task`,
             },
             runningMode: "VIDEO",
             numPoses: 1,

diff --git a/bouncy_frontend/src/routes/+layout.js b/bouncy_frontend/src/routes/+layout.js
@@ -5,6 +5,9 @@ import {
     steps,
 } from '$lib/instructor/bouncy_instructor';
 
+export const prerender = true;
+export const trailingSlash = 'always';
+
 let loadedOnce = false;
 
 /** @type {import('@sveltejs/kit').Load} */

diff --git a/bouncy_frontend/src/routes/+layout.server.js b/bouncy_frontend/src/routes/+layout.server.js
@@ -1,5 +1,7 @@
 import { locales, loadTranslations, defaultLocale, translations } from '$lib/i18n.js';
 
+export const prerender = true;
+
 /** @type {import('@sveltejs/kit').ServerLoad} */
 export const load = async ({ fetch, url, cookies, request }) => {
     const { pathname } = url;
@@ -10,7 +12,10 @@ export const load = async ({ fetch, url, cookies, request }) => {
     // Get user preferred locale
     if (!locale) {
         // TODO: better locale detection: find closest match instead of exact match only
-        locale = request.headers.get('accept-language').split(/,/)[0];
+        const header = request.headers.get('accept-language');
+        if (header) {
+            locale = header.split(/,/)[0];
+        }
     }
 
     // Get defined locales

diff --git a/bouncy_frontend/src/routes/+page.svelte b/bouncy_frontend/src/routes/+page.svelte
@@ -1,37 +1,6 @@
 <script>
   import { t } from '$lib/i18n.js';
-  import { onMount } from 'svelte';
-  import Step from './Step.svelte';
-  import { readable } from 'svelte/store';
-
-  /** @type {import('./$types').PageData} */
-  export let data;
-
-  const i = readable(0, (set) => {
-    const handle = setInterval(() => {
-      set($i + 1);
-    }, 300);
-
-    return () => clearInterval(handle);
-  });
 </script>
 
 <h1>{$t('home.title')}</h1>
-<p>[intro video]</p>
-<p>[recommendations]</p>
-
-<h2>{$t('home.steps')}</h2>
-<div class="step-table">
-  {#each data.allSteps as step}
-    <Step {step} poseIndex={$i} />
-  {/each}
-</div>
 
-<style>
-  .step-table {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    text-align: center;
-    gap: 20px 0px;
-  }
-</style>
diff --git a/bouncy_frontend/src/routes/TabNavigation.svelte b/bouncy_frontend/src/routes/TabNavigation.svelte
@@ -1,16 +1,28 @@
 <script>
   import { page } from '$app/stores';
   import { t } from '$lib/i18n.js';
+  import { base } from '$app/paths';
+  import { dev } from '$app/environment';
 
   export let height = 100;
 
   const tabs = [
-    { label: $t('home.nav'), icon: 'home', route: '/' },
-    // { label: $t('learn.nav'), icon: 'book_5', route: '/learn' },
-    { label: $t('record.nav'), icon: 'directions_walk', route: '/record' },
-    { label: $t('profile.nav'), icon: 'account_circle', route: '/profile' },
-    { label: 'Dev', icon: 'code', route: '/dev' },
+    { label: $t('home.nav'), icon: 'home', route: `${base}/` },
+    { label: $t('learn.nav'), icon: 'book_5', route: `${base}/learn` },
+    {
+      label: $t('record.nav'),
+      icon: 'directions_walk',
+      route: `${base}/record`,
+    },
+    {
+      label: $t('profile.nav'),
+      icon: 'account_circle',
+      route: `${base}/profile`,
+    },
   ];
+  if (dev) {
+    tabs.push({ label: 'Dev', icon: 'code', route: `${base}/dev` });
+  }
 </script>
 
 <nav class="navbar" style="height:{height}px">
@@ -28,8 +40,9 @@
 
 <style>
   .navbar {
-    display: grid;
-    grid-template-columns: auto auto auto auto;
+    display: flex;
+    flex-flow: row;
+    justify-content: space-around;
     overflow: hidden;
     background-color: var(--theme-neutral-dark);
     position: fixed;

diff --git a/bouncy_frontend/src/routes/dev/+page.svelte b/bouncy_frontend/src/routes/dev/+page.svelte
@@ -89,6 +89,7 @@
 
 <h1>Dev</h1>
 
+<!-- svelte-ignore a11y-media-has-caption -->
 <video bind:this={video} playsinline controls></video>
 <p>
   <input

diff --git a/bouncy_frontend/src/routes/learn/+page.svelte b/bouncy_frontend/src/routes/learn/+page.svelte
@@ -1,6 +1,34 @@
 <script>
   import { t } from '$lib/i18n.js';
+  import Step from './Step.svelte';
+  import { readable } from 'svelte/store';
+
+  /** @type {import('./$types').PageData} */
+  export let data;
+
+  const i = readable(0, (set) => {
+    const handle = setInterval(() => {
+      set($i + 1);
+    }, 300);
+
+    return () => clearInterval(handle);
+  });
 </script>
 
 <h1>{$t('learn.title')}</h1>
-<p>[skill tree selection]</p>
+
+<h2>{$t('home.steps')}</h2>
+<div class="step-table">
+  {#each data.allSteps as step}
+    <Step {step} poseIndex={$i} />
+  {/each}
+</div>
+
+<style>
+  .step-table {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    text-align: center;
+    gap: 20px 0px;
+  }
+</style>
diff --git a/bouncy_frontend/src/routes/Step.svelte → bouncy_frontend/src/routes/learn/Step.svelte b/bouncy_frontend/src/routes/Step.svelte → bouncy_frontend/src/routes/learn/Step.svelte
@@ -1,7 +1,7 @@
 <script>
   import Canvas from '$lib/Canvas.svelte';
-  import Area from './record/Area.svelte';
-  import Avatar from './record/Avatar.svelte';
+  import Area from '../record/Area.svelte';
+  import Avatar from '../record/Avatar.svelte';
   import SvgAvatar from '$lib/avatar/SvgAvatar.svelte';
 
   /** @type {import('$lib/instructor/bouncy_instructor').StepInfo} */

diff --git a/bouncy_frontend/src/routes/record/+page.svelte b/bouncy_frontend/src/routes/record/+page.svelte
@@ -239,6 +239,7 @@
       </button>
     {/if}
   </div>
+  <p style="width: 100px; height: 50px;"></p>
 </div>
 
 <style>

diff --git a/bouncy_frontend/src/routes/record/Banner.svelte b/bouncy_frontend/src/routes/record/Banner.svelte
@@ -3,6 +3,7 @@
 
   import { onMount } from 'svelte';
   import BannerStep from './BannerStep.svelte';
+  import { base } from '$app/paths';
 
   const avatarSize = 60;
 
@@ -73,7 +74,7 @@
 </script>
 
 <div id="container" bind:clientWidth={visibleBannerWidth}>
-  <img class="arrow" src="img/left_arrow.svg" alt="left arrow" />
+  <img class="arrow" src="{base}/img/left_arrow.svg" alt="left arrow" />
   <div id="steps" bind:this={stepsDiv} on:scroll={scrolled}>
     {#each steps as step}
       <BannerStep
@@ -90,7 +91,7 @@
     ></div>
   </div>
   <div id="marker"></div>
-  <img class="invert arrow" src="img/left_arrow.svg" alt="left arrow" />
+  <img class="invert arrow" src="{base}/img/left_arrow.svg" alt="left arrow" />
 </div>
 
 <style>

diff --git a/bouncy_frontend/svelte.config.js b/bouncy_frontend/svelte.config.js
@@ -1,13 +1,22 @@
 import { vitePreprocess } from '@sveltejs/kit/vite';
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   kit: {
-    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-    // 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()
+    adapter: adapter({
+      pages: 'build',
+      assets: 'build',
+      fallback: 'index.html',
+      precompress: false,
+      strict: true,
+      prerender: {
+        default: true,
+      }
+    }),
+    paths: {
+      base: process.env.NODE_ENV === 'development' ? '' : '/bouncy-feet',
+    }
   },
 
   preprocess: [vitePreprocess({})]