👔 Logic work for multi-page support

src/mixins/HomeMixin.js

@@ -8,7 +8,7 @@ import { searchTiles } from '@/utils/Search';
 
 const HomeMixin = {
   props: {
-    confPath: String,
+    subPageInfo: Object,
   },
   computed: {
     sections() {
@@ -40,8 +40,9 @@ const HomeMixin = {
   },
   methods: {
     async getConfigForRoute() {
-      if (this.confPath) { // Get config for sub-page
+      this.$store.commit(Keys.SET_CURRENT_SUB_PAGE, this.subPageInfo);
-        await this.$store.dispatch(Keys.INITIALIZE_MULTI_PAGE_CONFIG, this.confPath);
+      if (this.subPageInfo && this.subPageInfo.confPath) { // Get config for sub-page
+        await this.$store.dispatch(Keys.INITIALIZE_MULTI_PAGE_CONFIG, this.subPageInfo.confPath);
       } else { // Otherwise, use main config
         this.$store.commit(Keys.USE_MAIN_CONFIG);
       }

src/router.js

@@ -11,8 +11,6 @@ import { Progress } from 'rsup-progress';
 
 // Import views, that are not lazy-loaded
 import Home from '@/views/Home.vue';
-// import Workspace from '@/views/Workspace.vue';
-// import Minimal from '@/views/Minimal.vue';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
 
 // Import helper functions, config data and defaults
@@ -68,6 +66,7 @@ const makeMetaTags = (defaultTitle) => ({
 });
 
 const makeSubConfigPath = (rawPath) => {
+  if (!rawPath) return '';
   if (rawPath.startsWith('/') || rawPath.startsWith('http')) return rawPath;
   else return `/${rawPath}`;
 };
@@ -77,6 +76,9 @@ const makeMultiPageRoutes = (userPages) => {
   if (!userPages) return [];
   const multiPageRoutes = [];
   userPages.forEach((page) => {
+    if (!page.name || !page.path) {
+      ErrorHandler('Additional pages must have both a `name` and `path`');
+    }
     // Props to be passed to home mixin
     const subPageInfo = {
       subPageInfo: {
@@ -88,21 +90,21 @@ const makeMultiPageRoutes = (userPages) => {
     // Create route for default homepage
     multiPageRoutes.push({
       path: makePageSlug(page.name, 'home'),
-      name: `${subPageInfo.pageId}-home`,
+      name: `${subPageInfo.subPageInfo.pageId}-home`,
       component: Home,
       props: subPageInfo,
     });
     // Create route for the workspace view
     multiPageRoutes.push({
       path: makePageSlug(page.name, 'workspace'),
-      name: `${subPageInfo.pageId}-workspace`,
+      name: `${subPageInfo.subPageInfo.pageId}-workspace`,
       component: () => import('./views/Workspace.vue'),
       props: subPageInfo,
     });
     // Create route for the minimal view
     multiPageRoutes.push({
       path: makePageSlug(page.name, 'minimal'),
-      name: `${subPageInfo.pageId}-minimal`,
+      name: `${subPageInfo.subPageInfo.pageId}-minimal`,
       component: () => import('./views/Minimal.vue'),
       props: subPageInfo,
     });

src/store.js

@@ -31,6 +31,7 @@ const {
   SET_PAGE_INFO,
   SET_APP_CONFIG,
   SET_SECTIONS,
+  SET_PAGES,
   UPDATE_SECTION,
   INSERT_SECTION,
   REMOVE_SECTION,
@@ -179,6 +180,12 @@ const store = new Vuex.Store({
       state.config = newConfig;
       InfoHandler('App config updated', InfoKeys.EDITOR);
     },
+    [SET_PAGES](state, multiPages) {
+      const newConfig = state.config;
+      newConfig.pages = multiPages;
+      state.config = newConfig;
+      InfoHandler('Pages updated', InfoKeys.EDITOR);
+    },
     [SET_SECTIONS](state, newSections) {
       const newConfig = state.config;
       newConfig.sections = newSections;

src/styles/schema-editor.scss

@@ -12,7 +12,7 @@
         text-decoration: underline;
       }
     }
-    div[data-fs-wrapper] {
+    div[data-fs-wrapper], div[data-fs-kind=object] {
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
@@ -81,7 +81,7 @@
           box-shadow: 1px 1px 6px var(--interactive-editor-color);
         }
       }
-      div[data-fs-input=array] button {
+      div[data-fs-input=array] button, div[data-fs-buttons] button {
         font-size: 1rem;
         margin: 0.25rem;
         border-radius: var(--curve-factor);

src/utils/StoreMutations.js

@@ -16,6 +16,7 @@ const KEY_NAMES = [
   'UPDATE_ITEM',
   'SET_PAGE_INFO',
   'SET_APP_CONFIG',
+  'SET_PAGES',
   'SET_SECTIONS',
   'UPDATE_SECTION',
   'INSERT_SECTION',

src/utils/defaults.js

@@ -60,6 +60,7 @@ module.exports = {
     'nord',
     'oblivion',
     'adventure',
+    'crayola',
     'minimal-dark',
     'minimal-light',
     'thebe',
@@ -144,6 +145,7 @@ module.exports = {
     EDIT_SECTION: 'EDIT_SECTION',
     EDIT_PAGE_INFO: 'EDIT_PAGE_INFO',
     EDIT_APP_CONFIG: 'EDIT_APP_CONFIG',
+    EDIT_MULTI_PAGES: 'EDIT_MULTI_PAGES',
     EXPORT_CONFIG_MENU: 'EXPORT_CONFIG_MENU',
     MOVE_ITEM_TO: 'MOVE_ITEM_TO',
   },