FEAT/improve subdirectory compatibility

public/index.html

@@ -7,12 +7,12 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <meta name="referrer" content="no-referrer">
   <!-- Favicon, App Icon -->
-  <link rel="icon" type="image/png" sizes="64x64" href="<%= BASE_URL %>/web-icons/favicon-64x64.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="web-icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="web-icons/favicon-16x16.png">
-  <link rel="icon" type="image/png" href="/favicon.ico" />
-  <link rel="stylesheet" type="text/css" href="/loading-screen.css" />
-  <link rel="stylesheet" type="text/css" href="/theme-fonts.css" media="print" onload="this.media='all'" />
+  <link rel="icon" type="image/png" sizes="64x64" href="./web-icons/favicon-64x64.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./web-icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./web-icons/favicon-16x16.png">
+  <link rel="icon" type="image/png" href="./favicon.ico" />
+  <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>loading-screen.css" />
+  <link rel="stylesheet" type="text/css" href="./theme-fonts.css" media="print" onload="this.media='all'" />
   <!-- Default Page Title -->
   <title>Dashy</title>
 </head>

src/router.js

@@ -59,7 +59,7 @@ const router = new Router({
   routes: [
     // ...makeMultiPageRoutes(pages),
     { // The default view can be customized by the user
-      path: '/',
+      path: process.env.BASE_URL || '/',
       name: `landing-page-${startingView}`,
       component: getStartingComponent(),
       meta: makeMetaTags('Home Page'),

src/store.js

@@ -4,7 +4,12 @@ import Vuex from 'vuex';
 import axios from 'axios';
 import yaml from 'js-yaml';
 import Keys from '@/utils/StoreMutations';
-import { makePageName, formatConfigPath, componentVisibility } from '@/utils/ConfigHelpers';
+import {
+  makePageName,
+  formatConfigPath,
+  getConfigFilePath,
+  componentVisibility,
+} from '@/utils/ConfigHelpers';
 import { applyItemId } from '@/utils/SectionHelpers';
 import filterUserSections from '@/utils/CheckSectionVisibility';
 import ErrorHandler, { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
@@ -353,7 +358,7 @@ const store = new Vuex.Store({
   actions: {
     /* Fetches the root config file, only ever called by INITIALIZE_CONFIG */
     async [INITIALIZE_ROOT_CONFIG]({ commit }) {
-      const configFilePath = process.env.VUE_APP_CONFIG_PATH || '/conf.yml';
+      const configFilePath = getConfigFilePath();
       try {
         // Attempt to fetch the YAML file
         const response = await axios.get(configFilePath, makeBasicAuthHeaders());

src/styles/typography.scss

@@ -41,3 +41,38 @@ html {
     font-weight: normal;
   }
 }
+/* Optional fonts for specific themes */
+/* These fonts are loaded from ./public so not bundled within dist */
+@font-face { // Used by body text in Matrix and Hacker themes. Credit to the late Vernon Adams, RIP
+  font-family: 'Cutive Mono';
+  src: url('./assets/fonts/CutiveMono-Regular.ttf');
+}
+@font-face { // Heading text in Material and Material Dark. Credit to Vernon Adams
+  font-family: 'Francois One';
+  src: url('./assets/fonts/FrancoisOne-Regular.ttf');
+}
+@font-face { // Heading text in Colorful theme. Credit to Cyreal
+  font-family: 'Podkova';
+  src: url('./assets/fonts/Podkova-Medium.ttf');
+}
+@font-face { // Standard body text in material original. Credit to Christian Robertson
+  font-family: 'Roboto';
+  src: url('./assets/fonts/Roboto-Light.ttf');
+}
+
+@font-face { // Heading text in Jam, Bee and Tiger themes. Credit to Haley Fiege
+  font-family: 'Sniglet';
+  src: url('./assets/fonts/Sniglet-Regular.ttf');
+}
+@font-face { // Used by heading text in Matrix and Hacker themes. Credit to Peter Hull
+  font-family: 'VT323';
+  src: url('./assets/fonts/VT323-Regular.ttf');
+}
+@font-face { // Used by cyberpunk theme. Credit to Astigmatic
+  font-family: 'Audiowide';
+  src: url('./assets/fonts/Audiowide-Regular.ttf');
+}
+@font-face { // Used by Dracula, Lissy themes. Credit to Jonny Pinhorn
+  font-family: 'Shrikhand';
+  src: url('./assets/fonts/Shrikhand-Regular.ttf');
+}

src/utils/ConfigHelpers.js

@@ -28,11 +28,40 @@ export const makePageSlug = (pageName, pageType) => {
 
 /* Put fetch path for additional configs in correct format */
 export const formatConfigPath = (configPath) => {
-  if (configPath.includes('http')) return configPath;
+  if (/^https?:\/\//.test(configPath)) return configPath;
   if (configPath.substring(0, 1) !== '/') return `/${configPath}`;
   return configPath;
 };
 
+/**
+ * Resolves the complete config file path by combining BASE_URL with the config path.
+ * If VUE_APP_CONFIG_PATH is a full URL (http:// or https://), returns it as-is.
+ * Otherwise, joins BASE_URL with the config path. Defaults to './conf.yml' if no path is set.
+ * If BASE_URL is incomplete, falls back to a relative path.
+ * @param {string} configDefault - Default config path if VUE_APP_CONFIG_PATH is not set
+ * @returns {string} The complete config file path
+ */
+export const getConfigFilePath = (configDefault = './conf.yml') => {
+  const configPath = process.env.VUE_APP_CONFIG_PATH || configDefault;
+
+  // If it's already a full URL, return as-is
+  if (/^https?:\/\//.test(configPath)) {
+    return configPath;
+  }
+
+  // Get BASE_URL and ensure it's valid
+  const baseUrl = (process.env.BASE_URL || '/').replace(/\/$/, '');
+
+  // If BASE_URL is incomplete (just protocol or empty), fall back to relative path
+  if (!baseUrl || /^https?:$/.test(baseUrl)) {
+    return formatConfigPath(configPath);
+  }
+
+  // Combine baseUrl with the formatted config path
+  const normalizedPath = formatConfigPath(configPath);
+  return `${baseUrl}${normalizedPath}`;
+};
+
 /**
  * Initiates the Accumulator class and generates a complete config object
  * Self-executing function, returns the full user config as a JSON object

src/utils/InitServiceWorker.js

@@ -2,6 +2,7 @@ import axios from 'axios';
 import yaml from 'js-yaml';
 import { register } from 'register-service-worker';
 import { sessionStorageKeys } from '@/utils/defaults';
+import { getConfigFilePath } from '@/utils/ConfigHelpers';
 import { statusMsg, statusErrorMsg } from '@/utils/CoolConsole';
 
 /* Sets a local storage item with the state from the SW lifecycle */
@@ -33,7 +34,8 @@ const setSwStatus = (swStateToSet) => {
  * Or disable if user specified to disable
  */
 const shouldEnableServiceWorker = async () => {
-  const conf = yaml.load((await axios.get('/conf.yml')).data);
+  const configFilePath = getConfigFilePath('/conf.yml');
+  const conf = yaml.load((await axios.get(configFilePath)).data);
   if (conf && conf.appConfig && conf.appConfig.enableServiceWorker) {
     setSwStatus({ disabledByUser: false });
     return true;