fix: make files in ./static serve at root (harmonize webpack and vite)

ErikBjare · ErikBjare · commit b78ad4fdc4b5 · 2024-05-03T21:29:04.000+02:00
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>ActivityWatch</title>
-    <link rel="icon" type="image/png" href="/static/logo.png">
+    <link rel="icon" type="image/png" href="/logo.png">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <!-- Verify with https://csp-evaluator.withgoogle.com/ -->
     <!-- TODO: fix CSP (should depend on prod/dev mode, as pre-vite )-->
diff --git a/src/App.vue b/src/App.vue
@@ -15,6 +15,9 @@ div#wrapper(v-if="loaded")
 <script lang="ts">
 import { useSettingsStore } from '~/stores/settings';
 import { useServerStore } from '~/stores/server';
+// if vite is used, you can import css file as module
+//import darkCssUrl from '../static/dark.css?url';
+//import darkCssContent from '../static/dark.css?inline';
 
 export default {
   data: function () {
@@ -38,12 +41,23 @@ export default {
     const theme = settingsStore.theme;
     // Check Application Mode (Light | Dark)
     if (theme !== null && theme === 'dark') {
-      // Create Dark Theme Element
-      const themeLink = document.createElement('link');
-      themeLink.href = '/static/dark.css';
-      themeLink.rel = 'stylesheet';
-      // Append Dark Theme Element If Selected Mode Is Dark
-      theme === 'dark' ? document.querySelector('head').appendChild(themeLink) : '';
+      const method: 'link' | 'style' = 'link';
+
+      if (method === 'link') {
+        // Method 1: Create <link> Element
+        // Create Dark Theme Element
+        const themeLink = document.createElement('link');
+        themeLink.href = '/dark.css'; // darkCssUrl
+        themeLink.rel = 'stylesheet';
+        // Append Dark Theme Element If Selected Mode Is Dark
+        theme === 'dark' ? document.querySelector('head').appendChild(themeLink) : '';
+      } else {
+        // Not supported for Webpack due to not supporting ?inline import in a cross-compatible way (afaik)
+        // Method 2: Create <style> Element
+        //const style = document.createElement('style');
+        //style.innerHTML = darkCssContent;
+        //theme === 'dark' ? document.querySelector('head').appendChild(style) : '';
+      }
     }
     this.loaded = true;
   },
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -4,7 +4,7 @@ div(:class="{'fixed-top-padding': fixedTopMenu}")
     // Brand on mobile
     b-navbar-nav.d-block.d-lg-none
       b-navbar-brand(to="/" style="background-color: transparent;")
-        img.aligh-middle(src="/static/logo.png" style="height: 1.5em;")
+        img.aligh-middle(src="/logo.png" style="height: 1.5em;")
         span.ml-2.align-middle(style="font-size: 1em; color: #000;") ActivityWatch
 
     b-navbar-toggle(target="nav-collapse")
@@ -47,7 +47,7 @@ div(:class="{'fixed-top-padding': fixedTopMenu}")
       // Brand on large screens (centered)
       b-navbar-nav.abs-center.d-none.d-lg-block
         b-navbar-brand(to="/" style="background-color: transparent;")
-          img.ml-0.aligh-middle(src="/static/logo.png" style="height: 1.5em;")
+          img.ml-0.aligh-middle(src="/logo.png" style="height: 1.5em;")
           span.ml-2.align-middle(style="font-size: 1.0em; color: #000;") ActivityWatch
 
       b-navbar-nav.ml-auto
diff --git a/vue.config.js b/vue.config.js
@@ -49,7 +49,7 @@ export default {
         AW_SERVER_URL: process.env.AW_SERVER_URL,
         COMMIT_HASH: JSON.stringify(_COMMIT_HASH),
       }),
-      new CopyWebpackPlugin([{ from: 'static/', to: 'static' }]),
+      new CopyWebpackPlugin([{ from: 'static/', to: '' }]),
     ],
   },
   devServer: {
@@ -63,16 +63,16 @@ export default {
     name: 'ActivityWatch',
     iconPaths: {
       faviconSVG: null, // SVG won't render without needed fonts etc, so fall back to png
-      favicon32: 'static/logo.png',
-      favicon16: 'static/logo.png',
-      appleTouchIcon: 'static/logo.png',
-      //maskIcon: 'static/logo.png',
-      msTileImage: 'static/logo.png',
+      favicon32: 'logo.png',
+      favicon16: 'logo.png',
+      appleTouchIcon: 'logo.png',
+      //maskIcon: 'logo.png',
+      msTileImage: 'logo.png',
     },
     manifestOptions: {
       icons: [
         {
-          src: 'static/logo.png',
+          src: 'logo.png',
           sizes: '512x512',
           type: 'image/png',
         },
