simplify project fields

libs/types/src/content/dateRange.d.ts

@@ -1,4 +1,4 @@
 export type DateRange = {
-  from: string
+  from: string | number
-  to: string
+  to: string | number
 }

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

@@ -1,3 +1,4 @@
+import type { DateRange } from '../dateRange'
 import type { EntryTagCollection } from '../entryTag'
 import type { EntryWithConfig, EntryWithContent } from './shared'
 
@@ -7,18 +8,11 @@ import type { EntryWithConfig, EntryWithContent } from './shared'
  * At minimum, the title should be specified.
  */
 export type ProjectListingInfo = {
-  /**[Supports Markdown]
+  date?: DateRange | string | number
-   * Caption displayed below the title of the project on the projects page
-   */
-  caption?: string
-  /**[Supports Markdown]
-   * Optional subtitle for the project
-   */
-  subtitle?: string
   /**[Supports Markdown]
    * Information to summarize a project
    */
-  summary?: string
+  description?: string
   /**
    * Tags that correspond to project filters on the portfolio page if defined
    */
@@ -27,14 +21,9 @@ export type ProjectListingInfo = {
    * The title of the project
    */
   title: string
-  /**[CSS:background]
+  thumbnail?: {
-   * Background image, repeat, attachment, and position for the project
+    style: CSSStyleDeclaration
-   */
+  }
-  thumbnailBackground?: string
-  /**[CSS:background-size]
-   * Background image size
-   */
-  thumbnailBackgroundSize?: string
 }
 
 export type ProjectEntries = { [key: string]:
@@ -43,10 +32,6 @@ export type ProjectEntries = { [key: string]:
 }
 
 export type ProjectList = {
-  projects: { [key: string]: {
-    config: string
-    content: string
-  }}
   projects: ProjectEntries
   tags?: EntryTagCollection
   removeFromView?: boolean

projects/frontend/src/utilities/parse.ts

@@ -0,0 +1,21 @@
+import type { DateRange } from '@goldenwere/mackenzii-types'
+
+/**
+ * Converts a date object/string/number into a formatted date string
+ * @param date the date to format
+ * @returns the date formatted into locale string (or the original date if a string)
+ */
+export const getFormattedDate = (date: DateRange | string | number): string => {
+  const { from, to } = date as DateRange
+  if (!!from || !!to) {
+    return `${getFormattedDate(from)} - ${getFormattedDate(to)}`
+  } else {
+    const num = Number(date)
+
+    if (isNaN(+num)) {
+      return date as string
+    }
+
+    return new Date(num).toLocaleDateString()
+  }
+}

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { marked } from 'marked'
+import { getFormattedDate } from 'src/utilities/parse'
 import type { 
   ProjectListingInfo,
 } from '@goldenwere/mackenzii-types'
@@ -11,42 +12,46 @@ const props = defineProps<{
   isInternal: boolean,
 } & ProjectListingInfo>()
 
-const { thumbnailBackground, thumbnailBackgroundSize } = props
+const { thumbnail } = props
-const caption = computed(() => marked.parse(props.caption || ''))
+const description = computed(() => marked.parse(props.description || ''))
-const summary = computed(() => marked.parse(props.summary || ''))
+const date = computed(() => !!props.date ? getFormattedDate(props.date) : null)
 const title = computed(() => marked.parse(props.title || ''))
-const subtitle = computed(() => marked.parse(props.subtitle || ''))
 const href = computed(() => `${props.viewPath}?id=${props.id}`)
 </script>
 
 <template lang="pug">
+mixin link
+  router-link.router-link.link(
+    v-if='isInternal'
+    :to='{ path: viewPath, query: { id: id } }'
+  )
+    block
+  a.link(
+    v-else
+    :href='href'
+  )
+    block
 mixin embedText
   .text
     .title(
       v-html='title'
     )
-    .subtitle(
+    .date(
-      v-if='subtitle'
+      v-if='date'
-      v-html='subtitle'
     )
+      span {{ date }}
 .project-embed
-  router-link.router-link.link(
+  .thumbnail-wrapper(
-    v-if='isInternal'
+    v-if='!!thumbnail'
-    :to='{ path: viewPath, query: { id: id } }'
-    :style='{ background: thumbnailBackground, backgroundSize: thumbnailBackgroundSize }'
   )
+    +link
+      .thumbnail(
+        :style='thumbnail.style'
+      )
+  +link
     +embedText
-  a.link(
+  .description(
-    v-else
+    v-html='description'
-    :href='href'
-    :style='{ background: thumbnailBackground, backgroundSize: thumbnailBackgroundSize }'
-  )
-    +embedText
-  .caption(
-    v-html='caption'
-  )
-  .summary(
-    v-html='summary'
   )
 </template>