Fix empty index when JavaScript is disabled

vitepress/.vitepress/config.mjs

@@ -19,6 +19,18 @@ export default defineConfig({
     ['link', { rel: 'alternate', type: 'application/rss+xml', title: APP_TITLE, href: `${APP_URL}/feed.xml` }]
   ],
 
+  vite: {
+    ssr: {
+      /**
+       * Prevent “module not found” error. Solution from
+       * https://github.com/vuejs/vitepress/issues/2832#issuecomment-1689498631
+       * or any search using `noExternal` on Vitepress and Vite repos.
+       * @todo: Shouldn’t be needed on Vite 5.
+       */
+      noExternal: ['datetime-attribute'],
+    },
+  },
+
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [

vitepress/.vitepress/theme/ArticlesIndex.vue

@@ -1,13 +1,50 @@
 <script setup>
-import { defineClientComponent } from 'vitepress'
+import { onBeforeMount, reactive } from 'vue'
+import { data as importedData } from '../../articles.data'
+import { datetime } from 'datetime-attribute'
+import Tags from './components/Tags.vue';
 
-/**
- * This components only runs in the browser, hence the dynamic import.
- * https://vitepress.dev/guide/ssr-compat#defineclientcomponent
- */
-const ArticlesIndexClient = defineClientComponent(() => import('./ArticlesIndexClient.vue'))
+// The following declaration is just to import type autocompletion. 😑
+
+/** @type {Record<string, import('vitepress').ContentData[]>} */
+const data = reactive(importedData)
+
+// Normalize date
+data.forEach(article => {
+  article.frontmatter.publishedAt = new Date(article.frontmatter.publishedAt)
+})
+
+onBeforeMount(() => {
+  /**
+   * Make sure the excerpt links to the post URL.
+   *
+   * Ideally this transformation should be done at build time, but I don’t
+   * want to add a DOM Parser library because Node doesn’t have one. 😑
+   * It turns an excerpt into a proper link for the content index.
+   */
+  import('./utils/frontmatter').then(({ excerptToLink }) => {
+    data.forEach(excerptToLink)
+  })
+})
+
+const dateFormatter = new Intl.DateTimeFormat('en-GB', {
+  day: 'numeric',
+  month: 'long',
+  year: 'numeric',
+})
 </script>
 
 <template>
-  <ArticlesIndexClient />
+  <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" />
+
+    <p v-if="excerpt" v-html="excerpt"></p>
+  </template>
 </template>

vitepress/.vitepress/theme/NotesIndex.vue

@@ -1,13 +1,57 @@
 <script setup>
-import { defineClientComponent } from 'vitepress'
+import { onBeforeMount, reactive } from 'vue'
+import { data as importedData } from '../../notes.data'
+import { datetime } from 'datetime-attribute'
 
-/**
- * This components only runs in the browser, hence the dynamic import.
- * https://vitepress.dev/guide/ssr-compat#defineclientcomponent
- */
-const NotesIndexClient = defineClientComponent(() => import('./NotesIndexClient.vue'))
+// The following declaration is just to import type autocompletion. 😑
+
+/** @type {Record<string, import('vitepress').ContentData[]>} */
+const data = reactive(importedData)
+
+// Sort years
+const years = Object.keys(data).sort((a, b) => b - a)
+
+// Normalize date
+years.forEach(year => data[year].forEach(note => {
+  note.frontmatter.publishedAt = new Date(note.frontmatter.publishedAt)
+}))
+
+onBeforeMount(() => {
+    /**
+     * Make sure the excerpt links to the post URL.
+     *
+     * Ideally this transformation should be done at build time, but I don’t
+     * want to add a DOM Parser library because Node doesn’t have one. 😑
+     * It turns an excerpt into a proper link for the content index.
+     */
+    import('./utils/frontmatter').then(({ excerptToLink }) => {
+      years.forEach(year => data[year].forEach(excerptToLink))
+    })
+})
+
+const dateFormatter = new Intl.DateTimeFormat('en-GB', {
+  day: 'numeric',
+  month: 'long',
+})
 </script>
 
 <template>
-  <NotesIndexClient />
+  <template v-for="year in years">
+
+    <h2><time :datetime="datetime(new Date(year), 'year')">{{ year }}</time></h2>
+
+    <ul>
+      <li v-for="({ excerptTransformed, frontmatter: { title, publishedAt, excerpt }, url }) in data[year]">
+        <p>
+          <time :datetime="datetime(publishedAt)">
+            {{ dateFormatter.format(publishedAt) }}
+          </time>:
+
+          <span v-if="excerptTransformed" v-html="excerpt"/>
+          <a v-else :href="url">{{ title }}</a>
+        </p>
+      </li>
+    </ul>
+
+</template>
 </template>

vitepress/.vitepress/theme/index.js

@@ -1,10 +1,6 @@
 import './custom.css'
 import DefaultTheme from 'vitepress/theme'
-// import NotesIndex from './NotesIndex.vue'
 
 export default {
   extends: DefaultTheme,
-  // enhanceApp({ app }) {
-  //   app.component('notes-index', NotesIndex)
-  // }
 }