chore: release 1.11.0

.github/workflows/deploy.yml

@@ -7,7 +7,18 @@ concurrency:
 on:
   push:
     branches:
-      - 'main'
+      - "main"
+    paths:
+      - '.github/workflows/deploy.yml'
+      - 'package.json'
+      - 'bun.lock'
+      - 'src/**'
+      - 'index.html'
+      - 'vite.config.ts'
+      - 'post-build.ts'
+      - 'tsconfig.*'
+      - 'env.d.ts'
+      - 'vite.d.ts'
 
 jobs:
   build:
@@ -15,9 +26,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Set up Bun
-        uses: https://github.com/oven-sh/setup-bun@v2
+        uses: actions/setup-bun@v2
-        with:
-          bun-version: latest
       - name: Checkout repository
         uses: actions/checkout@v6
       - name: Install dependencies
@@ -41,18 +50,16 @@ jobs:
     name: "Deploy to Stapler"
     runs-on: ubuntu-latest
     needs: build
-    if: ${{ vars.STAPLER_TARGET != '' }}
     steps:
       - name: Download production files
         uses: actions/download-artifact@v3
         with:
           name: production-files
           path: ./dist
-      - name: Compress production files
-        run: tar -czC dist -f dist.tar.gz .
       - name: Upload to Stapler server
-        run: |
+        uses: actions/stapler-deploy@v1
-          curl -s -X PUT --data-binary "@dist.tar.gz" \
+        with:
-              -H 'X-Token: ${{ secrets.STAPLER_TOKEN }}' \
+          path: dist
-              ${{ vars.STAPLER_CURL_ARGS }} \
+          token: ${{ secrets.STAPLER_TOKEN }}
-              ${{ vars.STAPLER_TARGET }}
+          target: ${{ github.repository }}
+          extra_curl_args: ${{ vars.STAPLER_CURL_ARGS }}

.github/workflows/lint.yml

@@ -4,7 +4,20 @@ concurrency:
   group: lint-${{ github.ref }}
   cancel-in-progress: true
 
-on: [push, workflow_dispatch]
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - '.github/workflows/lint.yml'
+      - 'package.json'
+      - 'bun.lock'
+      - 'src/**'
+      - 'articles.example/**'
+      - '.oxlintrc.json'
+      - 'eslint.config.ts'
+      - 'tsconfig.*'
+      - 'env.d.ts'
+      - 'vite.d.ts'
 
 jobs:
   lint-eslint:
@@ -12,9 +25,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Set up Bun
-        uses: https://github.com/oven-sh/setup-bun@v2
+        uses: actions/setup-bun@v2
-        with:
-          bun-version: latest
       - name: Checkout repository
         uses: actions/checkout@v6
       - name: Install dependencies
@@ -29,9 +40,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Set up Bun
-        uses: https://github.com/oven-sh/setup-bun@v2
+        uses: actions/setup-bun@v2
-        with:
-          bun-version: latest
       - name: Checkout repository
         uses: actions/checkout@v6
       - name: Install dependencies
@@ -41,14 +50,12 @@ jobs:
       - name: Run Oxlint
         run: bun run lint:oxlint
 
-  type-check:
+  tsc:
-    name: Type Check
+    name: 'TypeScript'
     runs-on: ubuntu-latest
     steps:
       - name: Set up Bun
-        uses: https://github.com/oven-sh/setup-bun@v2
+        uses: actions/setup-bun@v2
-        with:
-          bun-version: latest
       - name: Checkout repository
         uses: actions/checkout@v6
       - name: Install dependencies

.vscode/extensions.json

@@ -1,9 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "EditorConfig.EditorConfig",
-    "oxc.oxc-vscode",
-    "esbenp.prettier-vscode"
-  ]
-}

Makefile

@@ -31,8 +31,8 @@ node_modules: bun.lock
 .PHONY: install
 install: npm-install ## install project
 
-.PHONY: install
+.PHONY: update
-install: npm-update ## update project
+update: npm-update ## update project
 
 .PHONY: build
 build: npm-run-build ## build static site in "dist"
@@ -59,3 +59,11 @@ npm-update: ## npm update
 .PHONY: npm-run-%
 npm-run-%: node_modules ## npm run (script)
 	$(NPM) run $*
+
+
+.PHONY: release-%
+release-%: node_modules ## release major/minor/patch
+	$(NPM) pm version $* --no-git-tag-version || true
+	git add package.json
+	git commit -m "chore: release $$(cat package.json | jq -r .version)"
+	git tag "release/$$(cat package.json | jq -r .version)" -m "md-blog $$(cat package.json | jq -r .version)"

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

@@ -5,11 +5,15 @@
   "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",
   "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>"
+  "copyright": "<a style=\"text-decoration:none;color:inherit;\" target=_blank href=\"https://creativecommons.org/licenses/by-nc/4.0/\">CC BY-NC</a>",
+  "footer": "",
+  "favicon_ico": ""
 }

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;
+}

index.html

@@ -2,10 +2,10 @@
 <html lang="%VITE_APP_LANG%">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="@articles/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
     <title>%VITE_APP_TITLE_NO_HTML%</title>
     <link rel="stylesheet" type="text/css" href="/src/style.scss" />
+    <link rel='shortcut icon' href='/favicon.ico' />
     <meta property="og:url" content="%VITE_BASE_URL%" />
     <meta property="og:title" content="%VITE_APP_TITLE_NO_HTML%" />
     <link rel="alternate" href="%VITE_BASE_URL%/rss.xml" type="application/rss+xml" title="RSS 2.0" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-blog",
-  "version": "1.9.2",
+  "version": "1.11.0",
   "private": true,
   "type": "module",
   "repository": "https://git.klemek.fr/klemek/md-blog",
@@ -21,34 +21,35 @@
   "dependencies": {
     "@keithclark/shaderview": "https://github.com/keithclark/shaderview/archive/refs/tags/1.2.0.tar.gz",
     "highlight.js": "^11.11.1",
-    "katex": "^0.16.45",
+    "katex": "^0.16.47",
-    "lucide": "^1.14.0",
+    "lucide": "^1.25.0",
-    "mermaid": "^11.14.0",
+    "mermaid": "^11.16.0",
-    "vue": "^3.5.33",
+    "vue": "^3.5.40",
-    "vue-router": "^5.0.6"
+    "vue-router": "^5.2.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",
-    "@types/node": "^24.12.2",
+    "@types/node": "^24.13.3",
-    "@vitejs/plugin-vue": "^6.0.6",
+    "@vitejs/plugin-vue": "^6.0.8",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/tsconfig": "^0.9.1",
-    "eslint": "^10.3.0",
+    "eslint": "^10.7.0",
     "eslint-plugin-oxlint": "~1.60.0",
     "eslint-plugin-vue": "~10.8.0",
     "feed": "^5.2.1",
-    "jiti": "^2.6.1",
+    "jiti": "^2.7.0",
     "npm-run-all2": "^8.0.4",
     "oxlint": "~1.60.0",
     "prettier": "3.8.3",
-    "sass-embedded": "^1.99.0",
+    "sass-embedded": "^1.100.0",
-    "tsx": "^4.21.0",
+    "tsx": "^4.23.1",
     "typescript": "~6.0.3",
-    "vite": "^8.0.10",
+    "vite": "^8.1.5",
+    "vite-plugin-javascript-obfuscator": "^3.1.0",
     "vite-plugin-markdown": "^2.2.0",
-    "vite-plugin-vue-devtools": "^8.1.1",
+    "vite-plugin-vue-devtools": "^8.1.5",
-    "vue-tsc": "^3.2.7"
+    "vue-tsc": "^3.3.7"
   },
   "engines": {
     "node": "^20.19.0 || >=22.12.0"

post-build.ts

@@ -37,10 +37,7 @@ function readArticleMetadata(path: string): Record<string, string> | null {
   return metadata;
 }
 
-function formatArticlePage(
+function formatArticlePage(metadata: Record<string, string>, baseHtml: string): string {
-  metadata: Record<string, string>,
-  baseHtml: string,
-): string {
   let outHtml = baseHtml;
   outHtml = outHtml.replace(/<.*?property="og:url".*?>/gm, "");
   outHtml = outHtml.replace(
@@ -50,10 +47,7 @@ function formatArticlePage(
   const blog_title = articlesConfig.title.replace(/(<([^>]+)>)/gi, "").trim();
   if (metadata.title) {
     const title = metadata.title.replace(/(<([^>]+)>)/gi, "").trim();
-    outHtml = outHtml.replace(
+    outHtml = outHtml.replace(/<title>.*?<\/title>/gm, `<title>${blog_title} — ${title}</title>`);
-      /<title>.*?<\/title>/gm,
-      `<title>${blog_title} — ${title}</title>`,
-    );
     outHtml = outHtml.replace(/<.*?property="og:title".*?>/gm, "");
     outHtml = outHtml.replace(
       /<\/head>/gm,
@@ -82,10 +76,7 @@ function addFeedArticle(metadata: Record<string, string>, feed: Feed) {
       id: metadata.path,
       link: `${articlesConfig.base_url}${metadata.path}/`,
       date: new Date(Date.parse(metadata.date)),
-      image: metadata.thumbnail.replace(
+      image: metadata.thumbnail.replace("./", articlesConfig.base_url + metadata.path + "/"),
-        "./",
-        articlesConfig.base_url + metadata.path + "/",
-      ),
     });
   }
 }
@@ -107,7 +98,7 @@ const feed = new Feed({
   id: articlesConfig.base_url,
   link: articlesConfig.base_url,
   language: articlesConfig.lang,
-  favicon: articlesConfig.base_url + "articles/favicon.ico",
+  favicon: articlesConfig.base_url + "/favicon.ico",
   generator: "md-blog",
   feedLinks: {
     json: articlesConfig.base_url + "feed.json",
@@ -125,10 +116,7 @@ const feed = new Feed({
 });
 
 metadatas.forEach((metadata) => {
-  fs.writeFileSync(
+  fs.writeFileSync(`dist/${metadata.path}/index.html`, formatArticlePage(metadata, indexContent));
-    `dist/${metadata.path}/index.html`,
-    formatArticlePage(metadata, indexContent),
-  );
   console.info(`Wrote dist/${metadata.path}/index.html`);
   addFeedArticle(metadata, feed);
 });
@@ -139,3 +127,8 @@ fs.writeFileSync("dist/atom.xml", feed.atom1());
 console.info(`Wrote dist/atom.xml`);
 fs.writeFileSync("dist/rss.xml", feed.rss2());
 console.info(`Wrote dist/rss.xml`);
+
+if (articlesConfig.favicon_ico) {
+  fs.copyFileSync(`articles/${articlesConfig.favicon_ico}`, "dist/favicon.ico");
+  console.info(`Wrote dist/favicon.ico`);
+}

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/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/components/PageFooter.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
-import { REPOSITORY, NAME, VERSION, TITLE, COPYRIGHT } from '@lib/config'
+import { REPOSITORY, NAME, VERSION, TITLE, COPYRIGHT, FOOTER } from '@lib/config'
 import { stripHTML } from '@lib/strings'
 </script>
 
 <template>
   <footer>
-    {{ stripHTML(TITLE) }} &copy; {{ new Date().getFullYear() }}, <span v-html="COPYRIGHT"></span> |
+    {{ stripHTML(TITLE) }}
-    Made with
+    &copy;
-    <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a>
+    {{ 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

@@ -1,18 +1,21 @@
-import packageJson from '@/../package.json'
+import packageJson from "@/../package.json";
-import articlesConfig from '@articles/config.json'
+import articlesConfig from "@articles/config.json";
 
-export const NAME: string = packageJson.name
+export const NAME: string = packageJson.name;
-export const VERSION: string = packageJson.version
+export const VERSION: string = packageJson.version;
-export const REPOSITORY: string = packageJson.repository
+export const REPOSITORY: string = packageJson.repository;
-export const TITLE: string = articlesConfig.title
+export const TITLE: string = articlesConfig.title;
-export const SIGNATURE: string = articlesConfig.signature
+export const SIGNATURE: string = articlesConfig.signature;
-export const COPYRIGHT: string = articlesConfig.copyright
+export const COPYRIGHT: string = articlesConfig.copyright;
-export const RSS_LINK: string = articlesConfig.rss_link
+export const FOOTER: string = articlesConfig.footer;
-export const BACK_LINK: string = articlesConfig.back_link
+export const RSS_LINK: string = articlesConfig.rss_link;
-export const ABOUT_LINK: string = articlesConfig.about_link
+export const BACK_LINK: string = articlesConfig.back_link;
-export const HOME_COUNT: number = articlesConfig.home_count
+export const ARCHIVE_LINK: string = articlesConfig.archive_link;
-export const PUBLISHED_ON: string = articlesConfig.published_on
+export const ABOUT_LINK: string = articlesConfig.about_link;
-export const UPDATED_ON: string = articlesConfig.updated_on
+export const HOME_COUNT: number = articlesConfig.home_count;
-export const AUTHORED: string = articlesConfig.authored
+export const PUBLISHED_ON: string = articlesConfig.published_on;
-export const BASE_URL: string = import.meta.env.BASE_URL
+export const UPDATED_ON: string = articlesConfig.updated_on;
-export const PROD: boolean = import.meta.env.PROD
+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/router/index.ts

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

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)
@@ -32,19 +33,31 @@ onUpdated(updateDynamicContent)
   <template v-if="!loading && !article">
     <NotFoundView />
   </template>
-  <div v-if="!loading" class="article">
+  <article v-if="!loading" class="article h-entry">
     <template v-if="!loading && article">
       <div class="article-header">
-        <h1 class="article-title" v-html="article.metadata.title"></h1>
+        <h1 class="article-title p-name" v-html="article.metadata.title"></h1>
         <div class="article-info">
-          <span v-if="article.metadata.author"
+          <template v-if="article.metadata.author">
-            ><span v-html="AUTHORED"></span> <span v-html="article.metadata.author"></span> —
+            <span v-html="AUTHORED"></span>
-          </span>
+            &hairsp;
-          <span v-html="PUBLISHED_ON"></span> {{ simpleDateFormat(article.metadata.date) }}
+            <span class="p-author h-card" v-html="article.metadata.author"></span>
-          <span v-if="article.metadata.updated"
+            &hairsp;—
-            >— <span v-html="UPDATED_ON"></span>
+          </template>
-            {{ simpleDateFormat(article.metadata.updated) }}</span
+          <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"
@@ -53,9 +66,9 @@ onUpdated(updateDynamicContent)
           alt="thumbnail"
         />
       </div>
-      <div class="article-text" v-html="article.html"></div>
+      <div class="article-text e-content" v-html="article.html"></div>
       <div class="article-signature" v-html="SIGNATURE"></div>
       <BackHomeButton />
     </template>
-  </div>
+  </article>
 </template>

src/views/HomeView.vue

@@ -1,42 +1,50 @@
 <script setup lang="ts">
-import { ref, onBeforeMount, onUpdated, onMounted } from 'vue'
+import { ref, onBeforeMount, onUpdated, onMounted, watch } from "vue";
-import { listArticles, updateDynamicContent } from '@lib/articles'
+import { listArticles, updateDynamicContent } from "@lib/articles";
-import type { ArticleMetadata } from '@interfaces'
+import type { ArticleMetadata } from "@interfaces";
-import { simpleDateFormat } from '@lib/dates'
+import { HOME_COUNT, PROD, TITLE } from "@lib/config";
-import { HOME_COUNT, PROD, PUBLISHED_ON, TITLE } from '@lib/config'
+import { stripHTML } from "@lib/strings";
-import { stripHTML } from '@lib/strings'
+import ArticleItem from "@/components/ArticleItem.vue";
+import { useRoute } from 'vue-router'
 
-const articles = ref<ArticleMetadata[]>([])
+const articles = ref<ArticleMetadata[]>([]);
-const loading = ref<boolean>(true)
+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);
-  articles.value.splice(0, articles.value.length, ...newArticles)
+  filterArticles();
-  window.document.title = stripHTML(TITLE) + ' — Home'
+  window.document.title = stripHTML(TITLE) + " — Home";
-  loading.value = false
+  loading.value = false;
-  await updateDynamicContent()
+  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">
+        <article-item :metadata="metadata" />
-          <h2 v-html="metadata.title"></h2>
-          <span class="article-info"
-            ><span v-html="PUBLISHED_ON"></span> {{ simpleDateFormat(metadata.date) }}</span
-          >
-          <img
-            v-if="metadata.thumbnail"
-            alt="thumbnail"
-            :src="metadata.path + metadata.thumbnail"
-          />
-        </RouterLink>
       </div>
     </template>
   </div>

vite.config.ts

@@ -1,33 +1,58 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url";
-import { defineConfig, loadEnv } from 'vite'
+import { defineConfig, loadEnv } from "vite";
-import vue from '@vitejs/plugin-vue'
+import vue from "@vitejs/plugin-vue";
-import vueDevTools from 'vite-plugin-vue-devtools'
+import vueDevTools from "vite-plugin-vue-devtools";
-import { plugin as mdPlugin, Mode } from 'vite-plugin-markdown'
+import { plugin as mdPlugin, Mode } from "vite-plugin-markdown";
+import obfuscatorPlugin from "vite-plugin-javascript-obfuscator";
 
-import articlesConfig from './articles/config.json'
+import articlesConfig from "./articles/config.json";
 
 // https://vite.dev/config/
 export default ({ mode }: { mode: string }) => {
-  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
 
-  process.env.VITE_BASE_URL = articlesConfig.base_url
+  process.env.VITE_BASE_URL = articlesConfig.base_url;
-  process.env.VITE_APP_TITLE = articlesConfig.title
+  process.env.VITE_APP_TITLE = articlesConfig.title;
-  process.env.VITE_APP_TITLE_NO_HTML = articlesConfig.title.replace(/(<([^>]+)>)/gi, '').trim()
+  process.env.VITE_APP_TITLE_NO_HTML = articlesConfig.title.replace(/(<([^>]+)>)/gi, "").trim();
-  process.env.VITE_APP_LANG = articlesConfig.lang
+  process.env.VITE_APP_LANG = articlesConfig.lang;
-  process.env.VITE_CUSTOM_HEAD = articlesConfig.custom_head
+  process.env.VITE_CUSTOM_HEAD = articlesConfig.custom_head;
 
   return defineConfig({
-    plugins: [vue(), vueDevTools(), mdPlugin({ mode: [Mode.HTML] })],
+    server: {
-    base: process.env.VITE_BASE_URL,
+      host: "0.0.0.0",
+    },
+    plugins: [
+      vue(),
+      vueDevTools(),
+      mdPlugin({ mode: [Mode.HTML] }),
+      obfuscatorPlugin({
+        include: [/.*\.md/],
+        options: { splitStrings: true, stringArrayThreshold: 1 },
+      }),
+    ],
     resolve: {
       alias: {
-        '@': fileURLToPath(new URL('./src', import.meta.url)),
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
-        '@views': fileURLToPath(new URL('./src/views', import.meta.url)),
+        "@views": fileURLToPath(new URL("./src/views", import.meta.url)),
-        '@lib': fileURLToPath(new URL('./src/lib', import.meta.url)),
+        "@lib": fileURLToPath(new URL("./src/lib", import.meta.url)),
-        '@articles': fileURLToPath(new URL('./articles', import.meta.url)),
+        "@articles": fileURLToPath(new URL("./articles", import.meta.url)),
-        '@interfaces': fileURLToPath(new URL('./src/interfaces.ts', import.meta.url)),
+        "@interfaces": fileURLToPath(new URL("./src/interfaces.ts", import.meta.url)),
-        '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
+        "@components": fileURLToPath(new URL("./src/components", import.meta.url)),
       },
     },
-  })
+    build: {
-}
+      rolldownOptions: {
+        output: {
+          codeSplitting: {
+            groups: [
+              {
+                name: (moduleId: string) => (moduleId.includes("node_modules") ? "libs" : "app"),
+                maxSize: 1024 * 1024,
+              },
+            ],
+          },
+        },
+      },
+    },
+  });
+};

vite.d.ts

@@ -2,26 +2,11 @@ declare module '*.md' {
   // "unknown" would be more detailed depends on how you structure frontmatter
   const attributes: Record<string, unknown>
 
-  // When "Mode.TOC" is requested
-  const toc: { level: string; content: string }[]
-
   // When "Mode.HTML" is requested
   const html: string
 
-  // When "Mode.RAW" is requested
-  const raw: string
-
-  // When "Mode.React" is requested. VFC could take a generic like React.VFC<{ MyComponent: TypeOfMyComponent }>
-  import React from 'react'
-  const ReactComponent: React.VFC
-
-  // When "Mode.Vue" is requested
-  import { ComponentOptions, Component } from 'vue'
-  const VueComponent: ComponentOptions
-  const VueComponentWith: (components: Record<string, Component>) => ComponentOptions
-
   // Modify below per your usage
-  export { attributes, toc, html, ReactComponent, VueComponent, VueComponentWith }
+  export { html }
 }
 
 declare module '*.vue'