⚡ Improved props for router

src/router.js

@@ -17,7 +17,7 @@ import ConfigAccumulator from '@/utils/ConfigAccumalator';
 
 // Import helper functions, config data and defaults
 import { isAuthEnabled, isLoggedIn, isGuestAccessEnabled } from '@/utils/Auth';
-import { makePageSlug } from '@/utils/ConfigHelpers';
+import { makePageSlug, makePageName } from '@/utils/ConfigHelpers';
 import { metaTagData, startingView, routePaths } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
 
@@ -77,23 +77,34 @@ const makeMultiPageRoutes = (userPages) => {
   if (!userPages) return [];
   const multiPageRoutes = [];
   userPages.forEach((page) => {
+    // Props to be passed to home mixin
+    const subPageInfo = {
+      subPageInfo: {
+        confPath: makeSubConfigPath(page.path),
+        pageId: makePageName(page.name),
+        pageTitle: page.name,
+      },
+    };
+    // Create route for default homepage
     multiPageRoutes.push({
       path: makePageSlug(page.name, 'home'),
-      name: `${page.name}-home`,
+      name: `${subPageInfo.pageId}-home`,
       component: Home,
-      props: { confPath: makeSubConfigPath(page.path) },
+      props: subPageInfo,
     });
+    // Create route for the workspace view
     multiPageRoutes.push({
       path: makePageSlug(page.name, 'workspace'),
-      name: `${page.name}-workspace`,
+      name: `${subPageInfo.pageId}-workspace`,
       component: () => import('./views/Workspace.vue'),
-      props: { confPath: makeSubConfigPath(page.path) },
+      props: subPageInfo,
     });
+    // Create route for the minimal view
     multiPageRoutes.push({
       path: makePageSlug(page.name, 'minimal'),
-      name: `${page.name}-minimal`,
+      name: `${subPageInfo.pageId}-minimal`,
       component: () => import('./views/Minimal.vue'),
-      props: { confPath: makeSubConfigPath(page.path) },
+      props: subPageInfo,
     });
   });
   return multiPageRoutes;

src/utils/ConfigHelpers.js

@@ -10,9 +10,19 @@ import {
 import ErrorHandler from '@/utils/ErrorHandler';
 import ConfigSchema from '@/utils/ConfigSchema.json';
 
+/* Given a page name, converts to lowercase, removes special characters and extension */
+export const makePageName = (pageName) => {
+  if (!pageName) return 'unnamed-page';
+  return pageName
+    .toLowerCase()
+    .replaceAll(' ', '-')
+    .replace('.yml', '')
+    .replace(/[^\w\s-]/gi, '');
+};
+
 /* For a given sub-page, and page type, return the URL */
 export const makePageSlug = (pageName, pageType) => {
-  const formattedName = pageName.toLowerCase().replaceAll(' ', '-').replaceAll('.yml', '');
+  const formattedName = makePageName(pageName);
   return `/${pageType}/${formattedName}`;
 };