Enhance content (dates, tags, articles)

vitepress/.vitepress/theme/ArticlesIndex.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { onBeforeMount, reactive } from 'vue'
 import { data as importedData } from '../../articles.data'
-import { datetime } from 'datetime-attribute'
 import Tags from './components/Tags.vue';
 
 // The following declaration is just to import type autocompletion. 😑
@@ -26,24 +25,15 @@ onBeforeMount(() => {
     data.forEach(excerptToLink)
   })
 })
-
-const dateFormatter = new Intl.DateTimeFormat('en-GB', {
-  day: 'numeric',
-  month: 'long',
-  year: 'numeric',
-})
 </script>
 
 <template>
   <template v-for="({ excerpt, frontmatter: { title, publishedAt, tags }, url }) in data">
 
     <h2><a :href="url" v-html="title"/></h2>
 
-    <time :datetime="datetime(new Date(publishedAt), 'year')">
-      {{ dateFormatter.format(publishedAt) }}
-    </time>
-
-    <tags v-if="tags" :tags="tags" />
+    <datetime :date="publishedAt" formatter="longdate"/>
+    <tags :tags="tags" />
 
     <p v-if="excerpt" v-html="excerpt"></p>
   </template>

vitepress/.vitepress/theme/NotesIndex.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { onBeforeMount, reactive } from 'vue'
 import { data as importedData } from '../../notes.data'
-import { datetime } from 'datetime-attribute'
 
 // The following declaration is just to import type autocompletion. 😑
 
@@ -29,23 +28,17 @@ onBeforeMount(() => {
     })
 })
 
-const dateFormatter = new Intl.DateTimeFormat('en-GB', {
-  day: 'numeric',
-  month: 'long',
-})
 </script>
 
 <template>
   <template v-for="year in years">
 
-    <h2><time :datetime="datetime(new Date(year), 'year')">{{ year }}</time></h2>
+    <h2><datetime :date="year" precision="year"/></h2>
 
     <ul>
       <li v-for="({ excerptTransformed, frontmatter: { title, publishedAt, excerpt }, url }) in data[year]">
         <p>
-          <time :datetime="datetime(publishedAt)">
-            {{ dateFormatter.format(publishedAt) }}
-          </time>:
+          <datetime :date="publishedAt" formatter="yearless"/>:
 
           <span v-if="excerptTransformed" v-html="excerpt"/>
           <a v-else :href="url">{{ title }}</a>

vitepress/.vitepress/theme/components/Datetime.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { datetime } from 'datetime-attribute'
+import { formatter as dateFormatter } from '../../utils/date.mjs';
+
+const props = defineProps({
+  date: {
+    type: [Date, String],
+    required: true,
+    default: new Date(),
+  },
+  precision: {
+    type: String,
+    required: false,
+    default: 'day',
+  },
+  formatter: {
+    type: String,
+    required: false,
+    validator: value => ['longdate', 'yearless'].includes(value),
+  }
+})
+
+const date = new Date(props.date)
+const datetimeAttr = datetime(date, props.precision)
+const str = dateFormatter[props.formatter]?.format(date) ?? datetimeAttr
+</script>
+
+<template>
+  <time :datetime="datetimeAttr">{{ str }}</time>
+</template>

vitepress/.vitepress/theme/components/Tags.vue

@@ -1,14 +1,23 @@
 <script setup>
-defineProps({
+import { useData } from 'vitepress'
+
+const props = defineProps({
   tags: {
     type: Array[String, Number],
-    required: true,
+    required: false,
+    default: undefined,
   },
 })
+
+let tags = props.tags ?? useData().frontmatter.value.tags
+
+if (typeof tags == 'string') {
+  tags = tags.split(',').map(tag => tag.trim())
+}
 </script>
 
 <template>
-  <ul class="tags">
+  <ul v-if="tags.length" class="tags">
     <li class="tag" v-for="tag in tags">
       <Badge class="tag__badge">{{ tag }}</Badge>
     </li>

vitepress/.vitepress/theme/index.js

@@ -1,6 +1,12 @@
 import './custom.css'
 import DefaultTheme from 'vitepress/theme'
+import Datetime from './components/Datetime.vue'
+import Tags from './components/Tags.vue'
 
 export default {
   extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('datetime', Datetime)
+    app.component('tags', Tags)
+  }
 }

vitepress/.vitepress/utils/date.mjs

@@ -0,0 +1,19 @@
+export const formatter = {
+
+  /**
+   * Example: 10 November 2023
+   */
+  longdate: new Intl.DateTimeFormat('en-GB', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  }),
+
+  /**
+   * Example: 10 November
+   */
+  yearless: new Intl.DateTimeFormat('en-GB', {
+    day: 'numeric',
+    month: 'long',
+  }),
+}

vitepress/articles/vitepress-cleanurls-on-nginx-environment.md

@@ -15,6 +15,9 @@ On this blog using [Vitepress](https://vitepress.dev) on a [Nginx](https://nginx
 
 # Vitepress `cleanUrls` option on a Nginx server
 
+<datetime :date="$frontmatter.publishedAt" formatter="longdate"/>
+<tags/>
+
 Setting Vitepress [`cleanUrls`](https://vitepress.dev/reference/site-config#cleanurls) to `true` removes the trailing `.html` from URLs. The internal links of your Vitepress app changes **from `<a href="/something.html">` to `<a href="/something">`**.
 
 However, `cleanUrls` does not change the file names or the folder structure of the generated HTML files, which means your server must now be able to serve the `/something.html` file when the `/something` URL is requested.

vitepress/notes/2023-10-20-start-something.md

@@ -7,7 +7,7 @@ excerpt: I think [I’ve started something]().
 
 # Better late then never
 
-2023-10-20
+<datetime :date="$frontmatter.publishedAt" formatter="longdate"/>
 
 I’m happy I found [Vitepress](https://vitepress.dev) to support this place, it will do the job for now. It’s been half-a-decade since I wanted to write and share about web stuff (mainly development), so here I am.
 

vitepress/notes/2023-11-10-nice-urls.md

@@ -7,7 +7,7 @@ excerpt: I love [URL rewriting]().
 
 # Nice URLs
 
-2023-11-10
+<datetime :date="$frontmatter.publishedAt" formatter="longdate"/>
 
 It blown my mind when I discovered [URL rewriting](https://en.wikipedia.org/wiki/Rewrite_engine) 15 years ago. It was probably in the [permalink setting](https://wordpress.org/documentation/article/customize-permalinks/#choosing-your-permalink-structure) of a Wordpress admin panel. Back then, a lot of URLs of the internet ended by a file extension like `.html`, `.php` or `.asp`…