period no longer handled by template and repurposed as subtitle

libs/types/src/config/globals.d.ts

@@ -5,7 +5,7 @@ import type { WarningModal } from './warnings'
 /**
  * Defines global values for the site.
  */
-type SiteGlobals = {
+export type SiteGlobals = {
   header: HeaderEntry[]
   id: string
   stylesheetUrls: string[]

libs/types/src/config/routing.d.ts

@@ -67,3 +67,9 @@ export type RouteDefinition =
  * Defines the collection of routes the app uses
  */
 export type RouteCollection = { [key: string]: RouteDefinition }
+
+export interface RoutedWindow extends Window {
+  routeConfig: RouteDefinition
+  routeSubConfig: any
+  routeContentConfig: any
+}

libs/types/src/content/templates/project-list.d.ts

@@ -1,4 +1,3 @@
-import type { DateRange } from '../dateRange'
 import type { EntryTagCollection } from '../entryTag'
 
 /**
@@ -11,10 +10,10 @@ export type ProjectListingInfo = {
    * Caption displayed below the title of the project on the projects page
    */
   caption?: string
-  /**
-   * When defined, the period will be displayed as {from} - {to}
+  /**[Supports Markdown]
+   * Optional subtitle for the project
    */
-  period?: DateRange
+  subtitle?: string
   /**[Supports Markdown]
    * Information to summarize a project
    */

projects/frontend/src/components/inflators/descriptionList.ts

@@ -1,7 +1,5 @@
 import type { ProjectListingInfo } from '@goldenwere/static-web-templates-types'
 
-import { getFormattedPeriod } from 'src/utilities/dom'
-
 /**
  * Queries for description list nodes and inflates them with extra functionality
  * @param _window the reference to the window
@@ -21,32 +19,32 @@ export class DescriptionListElement {
   constructor(_element: HTMLDListElement, _projectInfo?: ProjectListingInfo) {
     this.element = _element
 
-    if (!!_projectInfo) {
-      this._inflatePeriod(_projectInfo)
-    }
+    // if (!!_projectInfo) {
+    //   this._inflatePeriod(_projectInfo)
+    // }
     this._inflateTags()
   }
 
-  /**
-   * Searches for the presence of a .period element wrapping around <dt> and <dd>,
-   * and inflates the inner <dd> element by replacing the first instance of $PERIOD with formatted period
-   * @param _projectInfo the project info in which the project's time period is defined.
-   */
-  _inflatePeriod = (_projectInfo: ProjectListingInfo) => {
-    const periodWrapper = this.element.querySelector('.period')
-    if (!!periodWrapper) {
-      if (!!_projectInfo.period) {
-        const periodDescriptionElement = periodWrapper.querySelector('dd')
-        if (!!periodDescriptionElement) {
-          periodDescriptionElement.innerHTML = periodDescriptionElement.innerHTML.replace('$PERIOD', getFormattedPeriod(_projectInfo.period))
-        } else {
-          console.warn('Found a .period element but not an inner dd element to format on. The .period class should be on a div wrapping around <dt> and <dd>')
-        }
-      } else {
-        console.warn('Found a .period element but the project information is missing a period.')
-      }
-    }
-  }
+  // /**
+  //  * Searches for the presence of a .period element wrapping around <dt> and <dd>,
+  //  * and inflates the inner <dd> element by replacing the first instance of $PERIOD with formatted period
+  //  * @param _projectInfo the project info in which the project's time period is defined.
+  //  */
+  // _inflatePeriod = (_projectInfo: ProjectListingInfo) => {
+  //   const periodWrapper = this.element.querySelector('.period')
+  //   if (!!periodWrapper) {
+  //     if (!!_projectInfo.period) {
+  //       const periodDescriptionElement = periodWrapper.querySelector('dd')
+  //       if (!!periodDescriptionElement) {
+  //         periodDescriptionElement.innerHTML = periodDescriptionElement.innerHTML.replace('$PERIOD', getFormattedPeriod(_projectInfo.period))
+  //       } else {
+  //         console.warn('Found a .period element but not an inner dd element to format on. The .period class should be on a div wrapping around <dt> and <dd>')
+  //       }
+  //     } else {
+  //       console.warn('Found a .period element but the project information is missing a period.')
+  //     }
+  //   }
+  // }
 
   /**
    * Searches for the presence of a .tags element wrapping around <dt> and <dd>,

projects/frontend/src/main.vue

@@ -7,12 +7,14 @@ import { injectStylesheet } from 'src/utilities/dom'
 import { storage } from './utilities/fetch'
 import { useRouteStore } from 'src/routes'
 
-import type { WarningModal } from '@goldenwere/static-web-templates-types'
+import type { RoutedWindow, WarningModal } from '@goldenwere/static-web-templates-types'
 
 import HeaderLink from 'src/components/shared/header-link.vue'
 import ThemePicker from 'src/components/shared/theme-picker.vue'
 import WarningPrompt from 'src/components/shared/warning-prompt.vue'
 
+declare const window: RoutedWindow
+
 const router = useRouter()
 const routeStore = useRouteStore()
 const globalConfig = routeStore._globals
@@ -80,6 +82,8 @@ const refresh = async () => {
   storageId.value = `${globalConfig.id}::${currentRoute.path}`
   routeId.value = routeStore._routes[currentRoute.path].id
 
+  window.routeConfig = {...routeConfig}
+
   determineWarning()
   determineStylesheets(routeConfig.stylesheetUrls)
   scrollTo({

projects/frontend/src/utilities/dom.ts

@@ -39,12 +39,3 @@ export const findFirstMatchingChild = ( element: ParentNode, ...selectors: strin
   })
   return returnElement
 }
-
-/**
- * Formats the period object into a readable string
- * @param period the period to format
- * @returns the formatted string
- */
-export const getFormattedPeriod = (period: DateRange) => {
-  return `${period.from}${!!period.to ? ' - ' + period.to : ''}`
-}

projects/frontend/src/views/project/project-tile.vue

@@ -5,7 +5,6 @@ import type {
   ProjectListingInfo,
 } from '@goldenwere/static-web-templates-types'
 
-import { getFormattedPeriod } from 'src/utilities/dom'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 
 const props = defineProps<{
@@ -16,13 +15,10 @@ const props = defineProps<{
 const currentRoute = getCurrentRoute()
 
 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 || ''))
+const subtitle = computed(() => marked.parse(props.info.subtitle || ''))
 </script>
 
 <template lang="pug">
@@ -35,9 +31,10 @@ const title = computed(() => marked.parse(props.info.title || ''))
       .title(
         v-html='title'
       )
-      p.period(
-        v-if='period'
-      ) {{ period }}
+      .subtitle(
+        v-if='subtitle'
+        v-html='subtitle'
+      )
   .caption(
     v-html='caption'
   )

projects/frontend/src/views/project/project-view.vue

@@ -4,6 +4,7 @@ import type {
   ProjectList,
   ProjectListingInfo,
   ProjectListDefinition,
+  RoutedWindow,
 } from '@goldenwere/static-web-templates-types'
 
 import { fetchAndParseMarkdown, fetchAndParseYaml } from 'src/utilities/fetch'
@@ -11,7 +12,8 @@ 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'
+
+declare const window: RoutedWindow
 
 const emits = defineEmits<{
   (e: 'loaded'): void
@@ -29,8 +31,10 @@ onMounted(async () => {
   const config = await fetchAndParseYaml<ProjectList>(routeConfig.config)
   info.value = await fetchAndParseYaml<ProjectListingInfo>(config.projects[currentRoute.query.id as string].config)
   const md = await fetchAndParseMarkdown(config.projects[currentRoute.query.id as string].content)
-  content.value = md.replace('$PERIOD', getFormattedPeriod(info.value.period!))
+  content.value = md
   document.title = routeSubConfig.title.replace('$PROJECT', info.value.title)
+  window.routeSubConfig = {...routeSubConfig}
+  window.routeContentConfig = {...info.value}
 
   ready.value = true
   emits('loaded')