🎨 Use base path for urls

cristianpb · Feb 19, 2024 · 0de02b5 · 0de02b5
1 parent f8c7c02
commit 0de02b5
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -26,6 +26,8 @@ jobs:
           npm run lint
       - name: 🏗 Build html
         run: make build
+        env:
+          BASE_PATH: /muse
       - name: 🚀 Deploy to GitHub pages
         if: startsWith(github.event.ref, 'refs/tags') || github.ref == 'refs/heads/master'
         uses: peaceiris/actions-gh-pages@v3

diff --git a/Makefile b/Makefile
@@ -52,9 +52,10 @@ build-docker-mopidy:
 	docker build -f Dockerfile-base -t cristianpb/mopidy-base:${PACKAGE_VERSION}  --target base .
 
 build:
-	npm --no-git-tag-version --allow-same-version version ${APP_VERSION_SAFE}
-	sed -i -E "s/version = (.*)/version = ${APP_VERSION_CUT}/"  setup.cfg;
-	NODE_ENV=production npm run build
+	@npm --no-git-tag-version --allow-same-version version ${APP_VERSION_SAFE}
+	@sed -i -E "s/version = (.*)/version = ${APP_VERSION_CUT}/"  setup.cfg;
+	@echo "Version ${APP_VERSION_CUT}"
+	@NODE_ENV=production npm run build
 
 dist:
 	sudo mkdir -p ${APP_PATH}/dist ; sudo chmod g+rw ${APP_PATH}/dist/.; sudo chgrp 1000 ${APP_PATH}/dist/.;

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -9,7 +9,7 @@
     {#if $albumImage}
       <div class="card-image has-text-centered">
         <figure class="image">
-          <img src="{$albumImage}" width="240" height="240" alt="Album">
+          <img src="{base}/{$albumImage}" width="240" height="240" alt="Album">
         </figure>
       </div>
     {:else}

diff --git a/src/routes/Nav.svelte b/src/routes/Nav.svelte
@@ -38,7 +38,7 @@
       class="navbar-item" 
       class:is-active={$page.url.pathname === "/"}
       aria-current='{$page.url.pathname === "/" ? "page" : undefined}' 
-      href='/'> Now playing </a>
+      href='{base}/'> Now playing </a>
     <a 
       class="navbar-item" 
       class:is-active={$page.url.pathname === "/search/"}
@@ -77,11 +77,11 @@
     </div>
     <a class="navbar-item  is-hidden-touch" href="https://github.com/cristianpb/muse">
       <figure class="image is-1by1">
-        <img src="/icon.svg" alt="Muse logo" width="20" height="20">
+        <img src="{base}/icon.svg" alt="Muse logo" width="20" height="20">
       </figure>
     </a>
     <a class="navbar-item is-hidden-desktop" href="https://github.com/cristianpb/muse">
-      <img src="/icon.svg" alt="Muse logo" width="18" height="18">
+      <img src="{base}/icon.svg" alt="Muse logo" width="18" height="18">
       Muse - __VERSION__
     </a>
 

diff --git a/svelte.config.js b/svelte.config.js
@@ -9,7 +9,11 @@ const config = {
     adapter: adapter({
       pages: "build",
       assets: "build",
+      fallback: "index.html",
     }),
+    paths: {
+      base: process.argv.includes("dev") ? "" : process.env.BASE_PATH,
+    },
   },
 };