feat: add JSON-LD for SEO

Author: laplacetw

.vitepress/theme/components/PostHeader.vue

@@ -1,7 +1,31 @@
 <script setup lang='ts'>
 import { useData } from 'vitepress'
+import { onMounted, onBeforeUnmount } from 'vue'
+const { page, frontmatter } = useData()
 
-const { frontmatter } = useData()
+let script: HTMLScriptElement
+
+onMounted(() => {
+  const lastUpdated = new Date(<number> page.value.lastUpdated).toISOString()
+  const dataJsonLD = {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    "headline": frontmatter.value.title,
+    "datePublished": frontmatter.value.date,
+    "dateModified": lastUpdated,
+  }
+
+  script = document.createElement('script')
+  script.setAttribute('type', 'application/ld+json')
+  script.textContent = JSON.stringify(dataJsonLD)
+  document.head.appendChild(script)
+})
+
+onBeforeUnmount(() => {
+  if (script && script.parentElement) {
+    script.parentElement.removeChild(script)
+  }
+})
 </script>
 
 <template>

.vitepress/theme/index.ts

@@ -20,5 +20,14 @@ export default {
     app.component('Category', Category)
     app.component('Tags', Tags)
     app.component('About', About)
+
+    // https://github.com/vuejs/vitepress/issues/3100
+    router.onBeforeRouteChange = () => {
+      const jsonLdId = 'postJsonLd'
+      const jsonLd = document.getElementById(jsonLdId)
+      if (jsonLd) {
+        jsonLd.parentNode?.removeChild(jsonLd)
+      }
+    }
   }
 }

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2024-04-16
+
+### Features
+- bump to [email protected]
+- add JSON-LD for SEO
+
 # 2024-03-26
 
 ### Features

README.md

@@ -1,6 +1,6 @@
 ![](https://img.shields.io/github/license/laplacetw/vitepress-theme-trigger)
 ![Node.js >= 18.0.0](https://img.shields.io/badge/Node.js-%3E%3D18.0.0-green)
-![VitePress 1.0.1](https://img.shields.io/badge/VitePress-1.0.1-green)
+![VitePress 1.1.0](https://img.shields.io/badge/VitePress-1.1.0-green)
 
 # vitepress-theme-trigger
 Blog theme for [VitePress](https://vitepress.dev) with [Tailwind CSS](https://tailwindcss.com).

README_CH.md

@@ -1,6 +1,6 @@
 ![](https://img.shields.io/github/license/laplacetw/vitepress-theme-trigger)
 ![Node.js >= 18.0.0](https://img.shields.io/badge/Node.js-%3E%3D18.0.0-green)
-![VitePress 1.0.1](https://img.shields.io/badge/VitePress-1.0.1-green)
+![VitePress 1.1.0](https://img.shields.io/badge/VitePress-1.1.0-green)
 
 # vitepress-theme-trigger
 為建立部落格而生的 [VitePress](https://vitepress.dev) + [Tailwind CSS](https://tailwindcss.com) 主題

package.json

@@ -19,13 +19,13 @@
   },
   "devDependencies": {
     "@heroicons/vue": "^2.0.18",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.16",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-mathjax3": "^4.3.2",
     "postcss": "8.4.35",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6",
-    "vitepress": "1.0.1",
+    "typescript": "^5.2.2",
+    "vitepress": "1.1.0",
     "vue": "^3.3.4"
   }
 }