From 26d0c1a306e40c34e0556f80219a623dd61138c5 Mon Sep 17 00:00:00 2001
From: Lightling <contact@lightling.xyz>
Date: Fri, 15 Mar 2024 02:21:34 -0400
Subject: [PATCH] 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 |  8 +++-
 src/routes.ts                            | 10 +++++
 src/views/project-list.vue               |  2 +-
 src/views/project-view.vue               | 47 ++++++++++++++++++++++++
 4 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 src/views/project-view.vue

diff --git a/src/components/projects/project-tile.vue b/src/components/projects/project-tile.vue
index 2c863a1..8f13b19 100644
--- a/src/components/projects/project-tile.vue
+++ b/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(
-    :href='id'
+  router-link.link(
+    :to='{ name: `${currentRoute.name}: View Project`, query: { id: id } }'
+    :href='`./view?id=${id}`'
     :style='{ background: thumbnailBackground, backgroundSize: thumbnailBackgroundSize }'
   )
     .text
diff --git a/src/routes.ts b/src/routes.ts
index bba65fe..581a421 100644
--- a/src/routes.ts
+++ b/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
diff --git a/src/views/project-list.vue b/src/views/project-list.vue
index fed4021..f98e18d 100644
--- a/src/views/project-list.vue
+++ b/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'
diff --git a/src/views/project-view.vue b/src/views/project-view.vue
new file mode 100644
index 0000000..1632c59
--- /dev/null
+++ b/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>