feat: better article parsing + html dom base

src/views/ArticleView.vue

@@ -1,39 +1,60 @@
 <script setup lang="ts">
-import type { MarkdownData } from '@interfaces'
+import type { Article } from '@interfaces'
 import { ref, onBeforeMount } from 'vue'
 import { loadArticle } from '@lib/articles'
 import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
 import NotFoundView from './NotFoundView.vue'
+import { dateFromParts, simpleDateFormat } from '@lib/dates'
+import { NAME, REPOSITORY, VERSION } from '@lib/meta'
 
-const markdownData = ref<MarkdownData | null>(null)
+const article = ref<Article | null>(null)
 const route = useRoute()
-const articleDate = ref<Date>(new Date())
 
 async function loadPage(target: RouteLocation) {
-  articleDate.value = new Date(
-    parseInt(target.params.year),
-    parseInt(target.params.month) - 1,
-    parseInt(target.params.day),
-  )
-  markdownData.value = await loadArticle(
-    articleDate.value.getFullYear(),
-    articleDate.value.getMonth() + 1,
-    articleDate.value.getDate(),
+  article.value = await loadArticle(
+    dateFromParts(
+      target.params.year as string,
+      target.params.month as string,
+      target.params.day as string,
+    ),
   )
 }
 
+function scrollTop() {
+  window.scrollTo(0, 0)
+}
+
 onBeforeMount(() => loadPage(route))
 onBeforeRouteUpdate(loadPage)
 </script>
 
 <template>
-  <template v-if="!markdownData">
+  <template v-if="!article">
     <NotFoundView />
   </template>
   <template v-else>
-    <h1>ArticleView - {{ articleDate }}</h1>
-    <div v-html="markdownData.html"></div>
+    <main class="article">
+      <div class="header">
+        <RouterLink class="link-home" to="/">↑</RouterLink>
+        <h1>{{ article.metadata.title }}</h1>
+        <span class="time">
+          <span>{{ article.metadata.draft ? 'Drafted on' : 'Published on' }}</span>
+          {{ simpleDateFormat(article.metadata.date) }}
+        </span>
+      </div>
+      <img :src="article.metadata.thumbnail" alt="thumbnail" />
+    </main>
+    <div id="text" v-html="article.html"></div>
+    <div id="signature">TODO signature</div>
+    <br />
+    <a @click.prevent="scrollTop" href="#">Go to top</a> -
+    <RouterLink to="/">Back to home</RouterLink>
+    <hr />
+    <footer>
+      <small>
+        {{ new Date().getFullYear() }} - Made with <a :href="REPOSITORY">{{ NAME }}</a>
+        {{ VERSION }}
+      </small>
+    </footer>
   </template>
 </template>
-
-<style scoped></style>

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>

src/views/NotFoundView.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts"></script>
 
 <template>
-  <h1>Not found</h1>
+  <main>
+    <h1>Page not found</h1>
+    <RouterLink to="/">Back to home</RouterLink>
+  </main>
 </template>
 
 <style scoped></style>