handle themes for project-view

src/content-env.d.ts

@@ -42,6 +42,9 @@ declare module 'content/routes.js' {
    */
   type ProjectListDefinition = ConfigfulRouteDefinition & {
     template: 'project-list'
+    view: {
+      stylesheetUrls: string[]
+    }
   }
 
   /**

src/main.ts

@@ -1,4 +1,3 @@
-import { type RouteRecordRaw } from 'vue-router'
 import { ViteSSG } from 'vite-ssg'
 import { createPinia } from 'pinia'
 import hljs from 'highlight.js'
@@ -8,8 +7,7 @@ import { markedHighlight } from 'marked-highlight'
 import main from './main.vue'
 import './main.sass'
 
-import { createRoutes, useRouteStore } from './routes'
+import { createRoutes, initializeRouteStore } from './routes'
-import { routes as appRoutes, header, type RouteDefinition } from 'content/routes.js'
 import { headingSectionsExtension } from './utilities/marked'
 
 marked
@@ -30,13 +28,6 @@ export const createApp = ViteSSG(
   // function to have custom setups
   ({ app, router, routes, isClient, initialState }) => {
     app.use(createPinia())
-    const routeStore = useRouteStore()
+    initializeRouteStore(routes)
-    Object.keys(appRoutes).forEach(route => 
-      routeStore._routes[route] = {
-        ...routes.find(other => other.path === route) as RouteRecordRaw,
-        ...appRoutes[route] as RouteDefinition,
-      }
-    )
-    routeStore._header = header
   },
 )

src/routes.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
-import { type RouteRecordRaw } from 'vue-router'
+import { type RouteRecordRaw, type Router } from 'vue-router'
-import { routes, type HeaderEntry, type RouteDefinition, type Template } from 'content/routes.js'
+import { header, routes, type HeaderEntry, type ProjectListDefinition, type RouteDefinition, type Template } from 'content/routes.js'
 
 const markdownBody = () => import ('./views/markdown.vue')
 const projectListBody = () => import ('./views/project-list.vue')
@@ -44,6 +44,23 @@ export const useRouteStore = defineStore('routeStore', {
   },
 })
 
+export const initializeRouteStore = (routerRoutes: readonly RouteRecordRaw[]) => {
+  const routeStore = useRouteStore()
+  Object.keys(routes).forEach(route => {
+    routeStore._routes[route] = {
+      ...routerRoutes.find(other => other.path === route) as RouteRecordRaw,
+      ...routes[route] as RouteDefinition,
+    }
+    if (routes[route].template === 'project-list') {
+      routeStore._routes[`${route}/view`] = {
+        ...routerRoutes.find(other => other.path === `${route}/view`) as RouteRecordRaw,
+        ...(routes[route] as ProjectListDefinition).view,
+      } as any
+    }
+  })
+  routeStore._header = header
+}
+
 export type RouteStoreDefinition = Omit<
   ReturnType<typeof useRouteStore>,
   keyof ReturnType<typeof defineStore>

src/views/project-view.vue

@@ -9,13 +9,12 @@ import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
 
 import EmbedableContent from 'src/components/shared/embedable-content.vue'
+import { getFormattedPeriod } from 'src/utilities/dom'
 
 const props = defineProps<{
   id: string,
 }>()
 
-console.log(props)
-
 const ready = ref(false)
 const info = ref(null! as ProjectListingInfo)
 const content = ref('')
@@ -26,7 +25,8 @@ const routeConfig = routeStore._routes[currentRoute.path.substring(0, currentRou
 onMounted(async () => {
   const config = await fetchAndParseYaml<ProjectList>(routeConfig.config)
   info.value = await fetchAndParseYaml<ProjectListingInfo>(config.projects[props.id].config)
-  content.value = await fetchAndParseMarkdown(config.projects[props.id].content)
+  const md = await fetchAndParseMarkdown(config.projects[props.id].content)
+  content.value = md.replace('$PERIOD', getFormattedPeriod(info.value.period!))
 
   ready.value = true
 })