begin working on project viewer

breaks stylesheet loading currently, need to determine better way to handle configuring dynamic routes like this

src/components/projects/project-tile.vue

@@ -4,12 +4,15 @@ import { marked } from 'marked'
 
 import { getFormattedPeriod } from 'src/utilities/dom'
 import type { ProjectListingInfo } from 'src/types/projects/project'
+import { getCurrentRoute } from 'src/utilities/vuetils'
 
 const props = defineProps<{
   id: string
   info: ProjectListingInfo
 }>()
 
+const currentRoute = getCurrentRoute()
+
 const { thumbnailBackground, thumbnailBackgroundSize } = props.info
 const period = computed(() => (!!props.info.period
   ? getFormattedPeriod(props.info.period)
@@ -22,8 +25,9 @@ const title = computed(() => marked.parse(props.info.title || ''))
 
 <template lang="pug">
 .project-embed
-  a.link(
+  router-link.link(
-    :href='id'
+    :to='{ name: `${currentRoute.name}: View Project`, query: { id: id } }'
+    :href='`./view?id=${id}`'
     :style='{ background: thumbnailBackground, backgroundSize: thumbnailBackgroundSize }'
   )
     .text

src/routes.ts

@@ -4,6 +4,7 @@ import { routes, type HeaderEntry, type RouteDefinition, type Template } from 'c
 
 const markdownBody = () => import ('./views/markdown.vue')
 const projectListBody = () => import ('./views/project-list.vue')
+const projectViewBody = () => import ('./views/project-view.vue')
 
 export const templates: Record<Template, () => Promise<any>> = {
   'markdown': markdownBody,
@@ -19,6 +20,15 @@ export const createRoutes = (): RouteRecordRaw[] => {
       path: route,
       component: templates[routes[route].template],
     })
+
+    if (routes[route].template === 'project-list') {
+      routeRecord.push({
+        name: `${routes[route].id}: View Project`,
+        path: `${route}/view`,
+        component: projectViewBody,
+        props: route => ({ id: route.query.id }),
+      })
+    }
   })
 
   return routeRecord

src/views/project-list.vue

@@ -2,8 +2,8 @@
 import { onMounted, ref } from 'vue'
 
 import type { ProjectList } from 'src/types/projects/projectList'
-import type { ProjectListingInfo } from 'src/types/projects/project'
 import { type ProjectListDefinition } from 'content/routes.js'
+import type { ProjectListingInfo } from 'src/types/projects/project'
 import { fetchAndParseYaml } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'

src/views/project-view.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+import type { ProjectList } from 'src/types/projects/projectList'
+import { type ProjectListDefinition } from 'content/routes.js'
+import type { ProjectListingInfo } from 'src/types/projects/project'
+import { fetchAndParseMarkdown, fetchAndParseYaml } from 'src/utilities/fetch'
+import { getCurrentRoute } from 'src/utilities/vuetils'
+import { useRouteStore } from 'src/routes'
+
+import EmbedableContent from 'src/components/shared/embedable-content.vue'
+
+const props = defineProps<{
+  id: string,
+}>()
+
+console.log(props)
+
+const ready = ref(false)
+const info = ref(null! as ProjectListingInfo)
+const content = ref('')
+const currentRoute = getCurrentRoute()
+const routeStore = useRouteStore()
+const routeConfig = routeStore._routes[currentRoute.path.substring(0, currentRoute.path.length - 5)] as ProjectListDefinition
+
+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)
+
+  ready.value = true
+})
+</script>
+
+<template lang="pug">
+.project
+  article(
+    v-if='ready'
+  )
+    EmbedableContent(
+      :content='content'
+    )
+</template>
+
+<style lang="sass">
+
+</style>