From 06c737f4665f220b2c634d611879f3e4df9b6d02 Mon Sep 17 00:00:00 2001 From: Lightling Date: Thu, 22 Aug 2024 17:47:13 -0400 Subject: [PATCH] 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 | 2 ++ libs/types/src/config/routing.d.ts | 4 ++-- projects/frontend/src/content-env.d.ts | 16 ------------- projects/frontend/src/main.ts | 8 ++++--- projects/frontend/src/routes.ts | 29 ++++++++++++------------ projects/frontend/src/utilities/fetch.ts | 1 - 6 files changed, 23 insertions(+), 37 deletions(-) delete mode 100644 projects/frontend/src/content-env.d.ts diff --git a/libs/types/src/config/globals.d.ts b/libs/types/src/config/globals.d.ts index 3571ec9..03ca58f 100644 --- a/libs/types/src/config/globals.d.ts +++ b/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[] diff --git a/libs/types/src/config/routing.d.ts b/libs/types/src/config/routing.d.ts index 89b460d..b879943 100644 --- a/libs/types/src/config/routing.d.ts +++ b/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 } /** diff --git a/projects/frontend/src/content-env.d.ts b/projects/frontend/src/content-env.d.ts deleted file mode 100644 index 84fa27e..0000000 --- a/projects/frontend/src/content-env.d.ts +++ /dev/null @@ -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 -} diff --git a/projects/frontend/src/main.ts b/projects/frontend/src/main.ts index b7f8a3a..163d544 100644 --- a/projects/frontend/src/main.ts +++ b/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) }, ) diff --git a/projects/frontend/src/routes.ts b/projects/frontend/src/routes.ts index 57a0cfb..5e8fa8f 100644 --- a/projects/frontend/src/routes.ts +++ b/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 Promise> = { '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< diff --git a/projects/frontend/src/utilities/fetch.ts b/projects/frontend/src/utilities/fetch.ts index cfe8ab5..18362a8 100644 --- a/projects/frontend/src/utilities/fetch.ts +++ b/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'