setup project-list view with project-tile

src/components/projects/project-tile.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { marked } from 'marked'
+
+import { getFormattedPeriod } from 'src/utilities/dom'
+import type { ProjectListingInfo } from 'src/types/projects/project'
+
+const props = defineProps<{
+  id: string
+  info: ProjectListingInfo
+}>()
+
+const { thumbnailBackground, thumbnailBackgroundSize } = props.info
+const period = computed(() => (!!props.info.period
+  ? getFormattedPeriod(props.info.period)
+  : undefined
+))
+const caption = computed(() => marked.parse(props.info.caption || ''))
+const summary = computed(() => marked.parse(props.info.summary || ''))
+const title = computed(() => marked.parse(props.info.title || ''))
+</script>
+
+<template lang="pug">
+.project-embed
+  a.link(
+    :href='id'
+    :style='{ background: thumbnailBackground, backgroundSize: thumbnailBackgroundSize }'
+  )
+    .text
+      .title(
+        v-html='title'
+      )
+      p.period(
+        v-if='period'
+      ) {{ period }}
+  .caption(
+    v-html='caption'
+  )
+  .summary(
+    v-html='summary'
+  )
+</template>
+
+<style scoped lang="sass">
+
+</style>
+

src/content-env.d.ts

@@ -5,6 +5,7 @@ declare module 'content/routes.js' {
    */
   type Template = 
     | 'markdown'
+    | 'project-list'
 
   /**
    * Defines the shared options for a route
@@ -22,6 +23,13 @@ declare module 'content/routes.js' {
     content: string
   }
 
+  /**
+   * Defines a config-based route
+   */
+  type ConfigfulRouteDefinition = SharedRouteDefinition & {
+    config: string
+  }
+
   /**
    * Defines the config for a route using the `markdown` {@link Template}
    */
@@ -29,11 +37,19 @@ declare module 'content/routes.js' {
     template: 'markdown'
   }
 
+  /**
+   * Defines the config for a route using the `project-list` {@link Template}
+   */
+  type ProjectListDefinition = ConfigfulRouteDefinition & {
+    template: 'project-list'
+  }
+
   /**
    * Defines all available route definitions
    */
   type RouteDefinition =
     | MarkdownDefinition
+    | ProjectListDefinition
 
   /**
    * Defines the collection of routes the app uses

src/main.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
 
+import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
 
 import HeaderLink from 'src/components/shared/header-link.vue'
 
 const ready = ref(false)
 
-const currentRoute = useRoute()
+const currentRoute = getCurrentRoute()
 const routeStore = useRouteStore()
 const routeConfig = routeStore._routes[currentRoute.path]
 const headerConfig = routeStore._header
+console.log(currentRoute)
 
 onMounted(async () => {
   const staleStylesheets = document.head.querySelectorAll('link[rel="stylesheet"]')
@@ -19,7 +20,7 @@ onMounted(async () => {
     document.removeChild(stylesheet)
   })
 
-  routeConfig.stylesheetUrls.forEach(stylesheet => {
+  routeConfig.stylesheetUrls?.forEach(stylesheet => {
     const newElement = document.createElement('link')
     newElement.setAttribute('rel', 'stylesheet')
     newElement.setAttribute('href', stylesheet)

src/routes.ts

@@ -3,9 +3,11 @@ import { type RouteRecordRaw } from 'vue-router'
 import { routes, type HeaderEntry, type RouteDefinition, type Template } from 'content/routes.js'
 
 const markdownBody = () => import ('./views/markdown.vue')
+const projectListBody = () => import ('./views/project-list.vue')
 
 export const templates: Record<Template, () => Promise<any>> = {
   'markdown': markdownBody,
+  'project-list': projectListBody,
 }
 
 export const createRoutes = (): RouteRecordRaw[] => {

src/types/projects/projectList.ts

@@ -0,0 +1,9 @@
+import { FilterDefinition, ProjectFilterCategory } from './filter'
+
+export type ProjectList = {
+  projects: { [key: string]: {
+    config: string
+    content: string
+  }}
+  filters?: FilterDefinition[] | ProjectFilterCategory[]
+}

src/utilities/vuetils.ts

@@ -0,0 +1,10 @@
+import { useRoute } from 'vue-router'
+import { deepCopy } from './dom'
+
+export const getCurrentRoute = () => {
+  const route = deepCopy(useRoute())
+  if (route.path !== '/' && route.path.endsWith('/')) {
+    route.path = route.path.substring(0, route.path.length - 1)
+  }
+  return route
+}

src/views/markdown.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
 
 import EmbedableContent from 'src/components/shared/embedable-content.vue'
 
+import { type MarkdownDefinition } from 'content/routes.js'
 import { fetchAndParseMarkdown } from 'src/utilities/fetch'
+import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
 
 const content = ref('')
-const currentRoute = useRoute()
+const currentRoute = getCurrentRoute()
 const routeStore = useRouteStore()
-const routeConfig = routeStore._routes[currentRoute.path]
+const routeConfig = routeStore._routes[currentRoute.path] as MarkdownDefinition
 
 onMounted(async () => {
   content.value = await fetchAndParseMarkdown(routeConfig.content)

src/views/project-list.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+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 { fetchAndParseYaml } from 'src/utilities/fetch'
+import { getCurrentRoute } from 'src/utilities/vuetils'
+import { useRouteStore } from 'src/routes'
+
+import ProjectTile from 'src/components/projects/project-tile.vue'
+
+const projectIds = ref([] as string[])
+const projects = ref({} as { [key: string]: ProjectListingInfo })
+const ready = ref(false)
+const currentRoute = getCurrentRoute()
+const routeStore = useRouteStore()
+const routeConfig = routeStore._routes[currentRoute.path] as ProjectListDefinition
+
+onMounted(async () => {
+  const config = await fetchAndParseYaml<ProjectList>(routeConfig.config)
+  projectIds.value = Object.keys(config.projects)
+  for (let i = 0; i < projectIds.value.length; ++i) {
+    const id = projectIds.value[i]
+    projects.value[id] = await fetchAndParseYaml(config.projects[id].config)
+  }
+  ready.value = true
+})
+</script>
+
+<template lang="pug">
+.template.project-list
+  #projects(
+    v-if='ready'
+  )
+    ProjectTile(
+      v-for='id in projectIds'
+      :id='id'
+      :info='projects[id]'
+    )
+</template>
+
+<style scoped lang="sass">
+
+</style>