feat: better article parsing + html dom base

src/views/HomeView.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref, onBeforeMount } from 'vue'
-import { listArticles } from '@/lib/articles'
-import type { MarkdownAttributes } from '@/interfaces'
+import { listArticles } from '@lib/articles'
+import type { ArticleMetadata } from '@interfaces'
+import { simpleDateFormat } from '@/lib/dates'
 
-const articles = ref<MarkdownAttributes[]>([])
+const articles = ref<ArticleMetadata[]>([])
 
 onBeforeMount(async () => {
   const newArticles = await listArticles()
@@ -13,10 +14,18 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-  <h1>Home View</h1>
-  <div v-for="(attr, index) in articles" v-bind:key="index">
-    <RouterLink :to="attr.path ?? ''">{{ attr.title }}</RouterLink>
-  </div>
+  <main>
+    <h1 class="title">Articles</h1>
+    <template v-for="(metadata, index) in articles" v-bind:key="index">
+      <div v-if="!metadata.draft && metadata.path">
+        <RouterLink :to="metadata.path">
+          <h3>{{ metadata.title }}</h3>
+          <span class="time"
+            ><span>Published on</span>&nbsp;&nbsp;{{ simpleDateFormat(metadata.date) }}</span
+          >
+          <img alt="thumbnail" :src="metadata.thumbnail" />
+        </RouterLink>
+      </div>
+    </template>
+  </main>
 </template>
-
-<style scoped></style>