feat: simple tags

src/views/ArticleView.vue

@@ -8,6 +8,7 @@ import { AUTHORED, PUBLISHED_ON, SIGNATURE, TITLE, UPDATED_ON } from '@lib/confi
 import { stripHTML } from '@lib/strings'
 import BackHomeButton from '@components/BackHomeButton.vue'
 import NotFoundView from '@views/NotFoundView.vue'
+import ArticleTagList from '@components/ArticleTagList.vue'
 
 const article = ref<Article | null>(null)
 const loading = ref<boolean>(true)
@@ -37,14 +38,26 @@ onUpdated(updateDynamicContent)
       <div class="article-header">
         <h1 class="article-title p-name" v-html="article.metadata.title"></h1>
         <div class="article-info">
-          <span v-if="article.metadata.author"
-            ><span v-html="AUTHORED"></span> <span class="p-author h-card" v-html="article.metadata.author"></span> —
-          </span>
-          <span v-html="PUBLISHED_ON"></span> <time class="dt-published" :datetime="simpleDateFormat(article.metadata.date)">{{ simpleDateFormat(article.metadata.date) }}</time>
-          <span v-if="article.metadata.updated"
-            >— <span v-html="UPDATED_ON"></span>
-            {{ simpleDateFormat(article.metadata.updated) }}</span
-          >
+          <template v-if="article.metadata.author">
+            <span v-html="AUTHORED"></span>
+            &hairsp;
+            <span class="p-author h-card" v-html="article.metadata.author"></span>
+            &hairsp;—
+          </template>
+          <span v-html="PUBLISHED_ON"></span>
+          &hairsp;
+          <time class="dt-published" :datetime="simpleDateFormat(article.metadata.date)">
+            {{ simpleDateFormat(article.metadata.date) }}
+          </time>
+          <template v-if="article.metadata.updated">
+            &hairsp;—
+            <span v-html="UPDATED_ON"></span>
+            {{ simpleDateFormat(article.metadata.updated) }}
+          </template>
+          <template v-if="article.metadata.tags.length > 0">
+            —
+            <article-tag-list :tags="article.metadata.tags" />
+          </template>
         </div>
         <img
           v-if="article.metadata.thumbnail"

src/views/HomeView.vue

@@ -1,42 +1,50 @@
 <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 { HOME_COUNT, PROD, PUBLISHED_ON, TITLE } from '@lib/config'
-import { stripHTML } from '@lib/strings'
+import { ref, onBeforeMount, onUpdated, onMounted, watch } from "vue";
+import { listArticles, updateDynamicContent } from "@lib/articles";
+import type { ArticleMetadata } from "@interfaces";
+import { HOME_COUNT, PROD, TITLE } from "@lib/config";
+import { stripHTML } from "@lib/strings";
+import ArticleItem from "@/components/ArticleItem.vue";
+import { useRoute } from 'vue-router'
 
-const articles = ref<ArticleMetadata[]>([])
-const loading = ref<boolean>(true)
+const articles = ref<ArticleMetadata[]>([]);
+const filteredArticles = ref<ArticleMetadata[]>([]);
+const loading = ref<boolean>(true);
+const route = useRoute();
+
+function filterArticles() {
+  if (route.query.tag) {
+    filteredArticles.value = articles.value
+      .filter((metadata) => metadata.tags.includes(route.query.tag as string));
+  } else {
+    filteredArticles.value = articles.value
+      .slice(0, HOME_COUNT);
+  }
+}
 
 onBeforeMount(async () => {
   const newArticles = (await listArticles())
     .filter((metadata) => (!metadata.draft || !PROD) && metadata.path)
-    .slice(0, HOME_COUNT)
-  articles.value.splice(0, articles.value.length, ...newArticles)
-  window.document.title = stripHTML(TITLE) + ' — Home'
-  loading.value = false
-  await updateDynamicContent()
+  articles.value.splice(0, articles.value.length, ...newArticles);
+  filterArticles();
+  window.document.title = stripHTML(TITLE) + " — Home";
+  loading.value = false;
+  await updateDynamicContent();
+});
+
+watch(() => route.query.tag, () => {
+  filterArticles();
 })
-onMounted(updateDynamicContent)
-onUpdated(updateDynamicContent)
+
+onMounted(updateDynamicContent);
+onUpdated(updateDynamicContent);
 </script>
 
 <template>
   <div v-if="!loading" class="home">
-    <template v-for="(metadata, index) in articles" :key="index">
+    <template v-for="(metadata, index) in filteredArticles" :key="index">
       <div v-if="(!metadata.draft || !PROD) && metadata.path" class="article-item">
-        <RouterLink :to="metadata.path" class="h-entry">
-          <h2 class="p-name" v-html="metadata.title"></h2>
-          <span class="article-info"
-            ><span v-html="PUBLISHED_ON"></span> <time class="dt-published" :datetime="simpleDateFormat(metadata.date)">{{ simpleDateFormat(metadata.date) }}</time></span
-          >
-          <img
-            v-if="metadata.thumbnail"
-            alt="thumbnail"
-            :src="metadata.path + metadata.thumbnail"
-          />
-        </RouterLink>
+        <article-item :metadata="metadata" />
       </div>
     </template>
   </div>