Use relative paths, so the site can be published at a URL that is not…

… the domain root
fumiX · Aug 26, 2024 · 19b51fb · 19b51fb
1 parent 2ad85cb
commit 19b51fb
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 12 deletions.
diff --git a/web/index.html b/web/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
+<script type="module" src="/src/sipgator-app.ts"></script>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link rel="icon" type="image/xml+svg" href="/favicon.svg">
-<link rel="manifest" href="/app.webmanifest">
+<link rel="icon" type="image/xml+svg" href="./favicon.svg">
+<link rel="manifest" href="./app.webmanifest">
 <title>Sipgator</title>
 <style>
 body.dark * {
@@ -82,7 +83,6 @@
   --surface-container-highest:#ebe1d9;
 }
 </style>
-<script src="/src/sipgator-app.ts" type="module"></script>
-<link href="/beercss/beer.min.css" rel="stylesheet">
+<link href="./beercss/beer.min.css" rel="stylesheet">
 <!--<script src="/node_modules/beercss/dist/cdn/beer.min.js"></script>-->
 <sipgator-app></sipgator-app>
diff --git a/web/src/sipgator-app.ts b/web/src/sipgator-app.ts
@@ -29,7 +29,7 @@ export class SipgatorApp extends LitElement {
     return html`
       <nav class="bottom" style="justify-content: space-between;overflow-x: auto">
         <header>
-          <img class="circle" src="/favicon.svg" alt="SipGator-Logo">
+          <img class="circle" src="./favicon.svg" alt="SipGator-Logo">
         </header>
         ${
           SipgatorApp.pages.map(p =>
@@ -41,7 +41,7 @@ export class SipgatorApp extends LitElement {
           <sipgator-login .credential="${this.credential}" @credential-update="${this.handleCredentialUpdate}"></sipgator-login>
         </span>
       </nav>
-      <link href="/beercss/beer.min.css" rel="stylesheet">
+      <link href="./beercss/beer.min.css" rel="stylesheet">
       <main class="responsive" style="margin-bottom: 8rem">
         ${ this.componentForPath(this.path) }
       </main>

diff --git a/web/src/sipgator-light-dark-switch.ts b/web/src/sipgator-light-dark-switch.ts
@@ -36,7 +36,7 @@ export class SipgatorLightDarkSwitch extends LitElement {
           <i>light_mode</i>
         </span>
       </label>
-      <link href="/beercss/beer.min.css" rel="stylesheet">
+      <link href="./beercss/beer.min.css" rel="stylesheet">
     `
   }
 }
diff --git a/web/src/sipgator-logged-out-message.ts b/web/src/sipgator-logged-out-message.ts
@@ -54,6 +54,6 @@ export class SipgatorLoggedOutMessage extends LitElement {
           </p>
         </div>
       </div>
-    <link href="/beercss/beer.min.css" rel="stylesheet">`
+    <link href="./beercss/beer.min.css" rel="stylesheet">`
   }
 }
diff --git a/web/src/sipgator-login.ts b/web/src/sipgator-login.ts
@@ -80,7 +80,7 @@ export class SipgatorLogin extends LitElement {
         </span>
         </main>
       </dialog>
-      <link href="/beercss/beer.min.css" rel="stylesheet">
+      <link href="./beercss/beer.min.css" rel="stylesheet">
     `;
   }
 

diff --git a/web/src/sipgator-page.ts b/web/src/sipgator-page.ts
@@ -51,7 +51,7 @@ export abstract class SipgatorPage extends LitElement {
     return html`
       <h1 class="small"><i class="extra padding">${ this.icon }</i>${ this.label }</h1>
       ${ when(this.credential, () => this.credential ? renderWithCredentials(this.credential) : fallback, () => fallback) }
-      <link rel="stylesheet" href="/beercss/beer.min.css" />
+      <link rel="stylesheet" href="./beercss/beer.min.css" />
     `
   }
 }
diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -1,6 +1,9 @@
 import { viteStaticCopy } from "vite-plugin-static-copy"
 import compression from "vite-plugin-compression2"
-export default {
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  base: "",
   plugins: [
     viteStaticCopy({
       targets: [
@@ -25,4 +28,4 @@ export default {
       algorithm: "brotliCompress", exclude: [/\.br$/, /\.gz$/]
     })
   ]
-}
+})
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,6 +54,6 @@ export class SipgatorLoggedOutMessage extends LitElement { @@
               </p>
             </div>
           </div>
-        <link href="/beercss/beer.min.css" rel="stylesheet">`
+        <link href="./beercss/beer.min.css" rel="stylesheet">`
       }
     }