chore: release 1.11.0

articles.example/2026-01-01/index.md

@@ -4,6 +4,7 @@ author: kleπek
 draft: false
 thumbnail: ./thumbnail.jpg
 date: 2026-01-01
+tags: sample
 ---
 
 ## Images

articles.example/config.json

@@ -11,6 +11,7 @@
   "back_link": "<i icon=undo-2></i> Back to home",
   "published_on": "Published on",
   "updated_on": "Updated on",
+  "tags": "Tags:",
   "authored": "By",
   "copyright": "<a style=\"text-decoration:none;color:inherit;\" target=_blank href=\"https://creativecommons.org/licenses/by-nc/4.0/\">CC BY-NC</a>",
   "footer": "",

articles.example/style.scss

@@ -185,3 +185,12 @@ nav .nav-items {
 .article-info {
   font-style: italic;
 }
+
+.article-tag {
+  text-decoration: underline !important;
+}
+
+.article-active-tag {
+  text-decoration: underline !important;
+  font-weight: bold;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-blog",
-  "version": "1.9.4",
+  "version": "1.11.0",
   "private": true,
   "type": "module",
   "repository": "https://git.klemek.fr/klemek/md-blog",

src/components/ArticleItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ArticleMetadata } from "@/interfaces";
+import { simpleDateFormat } from "@lib/dates";
+import { PUBLISHED_ON } from "@lib/config";
+import ArticleTagList from "@/components/ArticleTagList.vue";
+
+defineProps<{ metadata: ArticleMetadata }>();
+</script>
+
+<template>
+  <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>
+      &hairsp;
+      <time class="dt-published" :datetime="simpleDateFormat(metadata.date)">
+        {{ simpleDateFormat(metadata.date) }}
+      </time>
+      <template v-if="metadata.tags.length > 0">
+        —
+        <article-tag-list :tags="metadata.tags" />
+      </template>
+    </span>
+    <img v-if="metadata.thumbnail" alt="thumbnail" :src="metadata.path + metadata.thumbnail" />
+  </RouterLink>
+</template>

src/components/ArticleTag.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+defineProps<{ tag: string }>();
+
+const route = useRoute();
+</script>
+
+<template>
+  <RouterLink :class="route.query.tag === tag ? 'article-active-tag' : 'article-tag'" :to="`/?tag=${tag}`">{{ tag }}</RouterLink>
+</template>

src/components/ArticleTagList.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TAGS } from "@lib/config";
+import ArticleTag from "@/components/ArticleTag.vue";
+
+defineProps<{ tags: string[] }>();
+</script>
+
+<template>
+  <span v-html="TAGS"></span>
+  &hairsp;
+  <template v-for="(tag, tagIndex) in tags" :key="tagIndex">
+    <template v-if="tagIndex > 0">, </template>
+    <article-tag :tag="tag" />
+  </template>
+</template>

src/components/PageFooter.vue

@@ -5,8 +5,15 @@ import { stripHTML } from '@lib/strings'
 
 <template>
   <footer>
-    {{ stripHTML(TITLE) }} &copy; {{ new Date().getFullYear() }}, <span v-html="COPYRIGHT"></span>
-    <span v-if="FOOTER">&nbsp;| <span v-html="FOOTER"></span></span>
-    &nbsp;| Made with <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a>
+    {{ stripHTML(TITLE) }}
+    &copy;
+    {{ new Date().getFullYear() }},
+    <span v-html="COPYRIGHT"></span>
+    <template v-if="FOOTER">
+      |&hairsp;
+      <span v-html="FOOTER"></span>
+      &hairsp;
+    </template>
+    | Made with <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a>
   </footer>
 </template>

src/interfaces.ts

@@ -11,6 +11,7 @@ export interface ArticleMetadata {
   author?: string
   thumbnail?: string
   draft?: boolean
+  tags: string[]
 }
 
 export interface Article {

src/lib/articles.ts

@@ -42,6 +42,10 @@ function parseMetadata(
     ),
     thumbnail: (srcAttributes.thumbnail as string | undefined) ?? "",
     draft: draft,
+    tags: (srcAttributes.tags as string | undefined ?? '')
+      .split(',')
+      .map((tag) => tag.trim())
+      .filter((tag) => tag !== ''),
   };
 }
 

src/lib/config.ts

@@ -16,5 +16,6 @@ export const HOME_COUNT: number = articlesConfig.home_count;
 export const PUBLISHED_ON: string = articlesConfig.published_on;
 export const UPDATED_ON: string = articlesConfig.updated_on;
 export const AUTHORED: string = articlesConfig.authored;
+export const TAGS: string = articlesConfig.tags;
 export const BASE_URL: string = import.meta.env.BASE_URL;
 export const PROD: boolean = import.meta.env.PROD;

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>