refactor site configuration

- routes.js is now config.json
- routes and siteglobals have been merged into one singular object inside config.json
- globals are pulled in during main.ts initialization

libs/types/src/config/globals.d.ts

@@ -1,4 +1,5 @@
 import type { HeaderEntry } from './navigation'
+import type { RouteCollection } from './routing'
 import type { SiteThemeList } from './themes'
 import type { WarningModal } from './warnings'
 
@@ -6,6 +7,7 @@ import type { WarningModal } from './warnings'
  * Defines global values for the site.
  */
 export type SiteGlobals = {
+  routes: RouteCollection
   header: HeaderEntry[]
   id: string
   stylesheetUrls: string[]

libs/types/src/config/routing.d.ts

@@ -10,11 +10,11 @@ import { WarningModal } from './warnings'
 export type SharedRouteDefinition = {
   id: string
   scriptUrl?: string
-  stylesheetUrls: string[]
+  stylesheetUrls?: string[]
   template: TemplateType
   title: string
   fullTitle: string
-  warning: boolean | WarningModal
+  warning?: boolean | WarningModal
 }
 
 /**

projects/frontend/src/content-env.d.ts

@@ -1,16 +0,0 @@
-declare module 'content/routes.js' {
-  import type {
-    RouteCollection,
-    SiteGlobals,
-  } from '@goldenwere/mackenzii-types'
-
-  /**
-   * The routes the app uses
-   */
-  const routes: RouteCollection
-
-  /**
-   * Global values the site uses.
-   */
-  const siteGlobals: SiteGlobals
-}

projects/frontend/src/main.ts

@@ -4,7 +4,7 @@ import hljs from 'highlight.js'
 import { marked } from 'marked'
 import { markedHighlight } from 'marked-highlight'
 
-import type { RoutedWindow } from '@goldenwere/mackenzii-types'
+import type { RoutedWindow, SiteGlobals } from '@goldenwere/mackenzii-types'
 
 import main from './main.vue'
 import './main.sass'
@@ -12,6 +12,8 @@ import './main.sass'
 import { createRoutes, initializeRouteStore } from './routes'
 import { headingSectionsExtension } from './utilities/marked'
 
+import globals from 'content/config.json'
+
 declare const window: RoutedWindow
 
 marked
@@ -28,7 +30,7 @@ export const createApp = ViteSSG(
   // the root component
   main,
   // vue-router options
-  { routes: createRoutes() },
+  { routes: createRoutes(globals as SiteGlobals) },
   // function to have custom setups
   async ({ app, router, routes, isClient, initialState }) => {
     if (isClient) {
@@ -38,6 +40,6 @@ export const createApp = ViteSSG(
       window.router = router
     }
     app.use(createPinia())
-    initializeRouteStore(routes)
+    initializeRouteStore(routes, globals as SiteGlobals)
   },
 )

projects/frontend/src/routes.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia'
 import { type RouteLocationNormalizedLoaded, type RouteRecordRaw } from 'vue-router'
-import { routes, siteGlobals } from 'content/routes.js'
 import type {
   GalleryListDefinition,
   HeaderEntry,
@@ -22,28 +21,28 @@ export const templates: Record<TemplateType, () => Promise<any>> = {
   'gallery-list': mediaListBody,
 }
 
-export const createRoutes = (): RouteRecordRaw[] => {
+export const createRoutes = (globals: SiteGlobals): RouteRecordRaw[] => {
   const routeRecord: RouteRecordRaw[] = []
 
-  Object.keys(routes).forEach(route => {
+  Object.keys(globals.routes).forEach(route => {
     const toPush: RouteRecordRaw = {
-      name: routes[route].id,
+      name: globals.routes[route].id,
       path: route,
-      component: templates[routes[route].template],
+      component: templates[globals.routes[route].template],
     }
 
-    if (routes[route].template === 'article-list') {
+    if (globals.routes[route].template === 'article-list') {
       routeRecord.push({
-        name: `${routes[route].id}: View Article`,
+        name: `${globals.routes[route].id}: View Article`,
         path: `${route}/view`,
         component: articleViewBody,
         props: route => ({ id: route.query.id }),
       })
-    } else if (routes[route].template === 'gallery-list') {
+    } else if (globals.routes[route].template === 'gallery-list') {
       toPush.props = route => ({ variants: (route.query.v as string || '').split(';') })
 
       routeRecord.push({
-        name: `${routes[route].id}: View Entry`,
+        name: `${globals.routes[route].id}: View Entry`,
         path: `${route}/view`,
         component: galleryViewBody,
         props: route => ({ variants: (route.query.v as string || '').split(';') }),
@@ -138,21 +137,21 @@ export const useRouteStore = defineStore('routeStore', {
   },
 })
 
-export const initializeRouteStore = (routerRoutes: readonly RouteRecordRaw[]) => {
+export const initializeRouteStore = (routerRoutes: readonly RouteRecordRaw[], globals: SiteGlobals) => {
   const routeStore = useRouteStore()
-  Object.keys(routes).forEach(route => {
+  Object.keys(globals.routes).forEach(route => {
     routeStore._routes[route] = {
       ...routerRoutes.find(other => other.path === route) as RouteRecordRaw,
-      ...routes[route] as RouteDefinition,
+      ...globals.routes[route] as RouteDefinition,
     }
-    if (routes[route].template === 'article-list' || routes[route].template === 'gallery-list') {
+    if (globals.routes[route].template === 'article-list' || globals.routes[route].template === 'gallery-list') {
       routeStore._routes[`${route}/view`] = {
         ...routerRoutes.find(other => other.path === `${route}/view`) as RouteRecordRaw,
-        ...(routes[route] as ArticleListDefinition | GalleryListDefinition).view,
+        ...(globals.routes[route] as ArticleListDefinition | GalleryListDefinition).view,
       } as any
     }
   })
-  routeStore._globals = siteGlobals
+  routeStore._globals = globals
 }
 
 export type RouteStoreDefinition = Omit<

projects/frontend/src/utilities/fetch.ts

@@ -2,7 +2,6 @@ import DOMPurify from 'dompurify'
 import { marked } from 'marked'
 import yaml from 'js-yaml'
 import type {
-  ListEntries,
   ListWithEntries,
   ResolvedListEntries,
 } from '@goldenwere/mackenzii-types'