feat: archive link

articles.example/config.json

@@ -5,6 +5,7 @@
   "lang": "en",
   "custom_head": "",
   "home_count": 5,
+  "archive_link": "<i icon=archive></i> ARCHIVE",
   "rss_link": "<i icon=rss></i> RSS",
   "about_link": "<i icon=info></i> ABOUT",
   "back_link": "<i icon=undo-2></i> Back to home",

src/components/NavBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BASE_URL, TITLE, RSS_LINK, ABOUT_LINK } from '@lib/config'
+import { BASE_URL, TITLE, RSS_LINK, ABOUT_LINK, ARCHIVE_LINK } from '@lib/config'
 </script>
 
 <template>
@@ -7,6 +7,7 @@ import { BASE_URL, TITLE, RSS_LINK, ABOUT_LINK } from '@lib/config'
     <RouterLink to="/" class="nav-title"><span v-html="TITLE"></span></RouterLink>
     <span class="nav-items">
       <RouterLink to="/about/"><span v-html="ABOUT_LINK"></span></RouterLink>
+      <RouterLink to="/archive/"><span v-html="ARCHIVE_LINK"></span></RouterLink>
       <a :href="BASE_URL + 'atom.xml'" v-html="RSS_LINK"></a>
     </span>
   </nav>

src/lib/config.ts

@@ -10,6 +10,7 @@ export const COPYRIGHT: string = articlesConfig.copyright;
 export const FOOTER: string = articlesConfig.footer;
 export const RSS_LINK: string = articlesConfig.rss_link;
 export const BACK_LINK: string = articlesConfig.back_link;
+export const ARCHIVE_LINK: string = articlesConfig.archive_link;
 export const ABOUT_LINK: string = articlesConfig.about_link;
 export const HOME_COUNT: number = articlesConfig.home_count;
 export const PUBLISHED_ON: string = articlesConfig.published_on;

src/router/index.ts

@@ -1,17 +1,19 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '@views/HomeView.vue'
-import AboutView from '@views/AboutView.vue'
-import ArticleView from '@views/ArticleView.vue'
-import NotFoundView from '@views/NotFoundView.vue'
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "@views/HomeView.vue";
+import ArchiveView from "@views/ArchiveView.vue";
+import AboutView from "@views/AboutView.vue";
+import ArticleView from "@views/ArticleView.vue";
+import NotFoundView from "@views/NotFoundView.vue";
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
-    { path: '/', component: HomeView },
-    { path: '/about/', component: AboutView },
-    { path: '/articles/:pathMatch(.*)/', component: ArticleView },
-    { path: '/:pathMatch(.*)', component: NotFoundView },
+    { path: "/", component: HomeView },
+    { path: "/archive/", component: ArchiveView },
+    { path: "/about/", component: AboutView },
+    { path: "/articles/:pathMatch(.*)/", component: ArticleView },
+    { path: "/:pathMatch(.*)", component: NotFoundView },
   ],
-})
+});
 
-export default router
+export default router;

src/views/ArchiveView.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref, onBeforeMount, onUpdated, onMounted } from 'vue'
+import { listArticles, updateDynamicContent } from '@lib/articles'
+import type { ArticleMetadata } from '@interfaces'
+import { simpleDateFormat } from '@lib/dates'
+import { PROD, TITLE } from '@lib/config'
+import { stripHTML } from '@lib/strings'
+
+const articles = ref<ArticleMetadata[]>([])
+const loading = ref<boolean>(true)
+
+onBeforeMount(async () => {
+  const newArticles = (await listArticles())
+    .filter((metadata) => (!metadata.draft || !PROD) && metadata.path)
+  articles.value.splice(0, articles.value.length, ...newArticles)
+  window.document.title = stripHTML(TITLE) + ' — Archive'
+  loading.value = false
+  await updateDynamicContent()
+})
+onMounted(updateDynamicContent)
+onUpdated(updateDynamicContent)
+</script>
+
+<template>
+  <div v-if="!loading" class="home">
+    <ul>
+      <li v-for="(metadata, index) in articles" :key="index">
+        <div v-if="(!metadata.draft || !PROD) && metadata.path" class="article-item">
+          <time class="dt-published mono" :datetime="simpleDateFormat(metadata.date)">{{ simpleDateFormat(metadata.date) }}</time>
+          &nbsp;
+          <RouterLink :to="metadata.path" class="h-entry">
+            <span class="p-name" v-html="metadata.title"></span>
+          </RouterLink>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>