simplify project fields

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 caption = computed(() => marked.parse(props.caption || ''))
-const summary = computed(() => marked.parse(props.summary || ''))
+const { thumbnail } = props
+const description = computed(() => marked.parse(props.description || ''))
+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(
-      v-if='subtitle'
-      v-html='subtitle'
+    .date(
+      v-if='date'
     )
+      span {{ date }}
 .project-embed
-  router-link.router-link.link(
-    v-if='isInternal'
-    :to='{ path: viewPath, query: { id: id } }'
-    :style='{ background: thumbnailBackground, backgroundSize: thumbnailBackgroundSize }'
+  .thumbnail-wrapper(
+    v-if='!!thumbnail'
   )
+    +link
+      .thumbnail(
+        :style='thumbnail.style'
+      )
+  +link
     +embedText
-  a.link(
-    v-else
-    :href='href'
-    :style='{ background: thumbnailBackground, backgroundSize: thumbnailBackgroundSize }'
-  )
-    +embedText
-  .caption(
-    v-html='caption'
-  )
-  .summary(
-    v-html='summary'
+  .description(
+    v-html='description'
   )
 </template>