From eb8baad7ff087e2025600b5569ee0f6c437c57bd Mon Sep 17 00:00:00 2001
From: Mehdi M <hi@mehdi.cc>
Date: Sun, 12 Nov 2023 21:18:51 +0100
Subject: [PATCH] Fix missing index content on JavaScript disabled

---
 vitepress/.vitepress/config.mjs               | 12 ++++
 vitepress/.vitepress/theme/ArticlesIndex.vue  | 51 +++++++++++++---
 .../.vitepress/theme/ArticlesIndexClient.vue  | 43 --------------
 vitepress/.vitepress/theme/NotesIndex.vue     | 58 ++++++++++++++++---
 .../.vitepress/theme/NotesIndexClient.vue     | 49 ----------------
 vitepress/.vitepress/theme/index.js           |  4 --
 6 files changed, 107 insertions(+), 110 deletions(-)
 delete mode 100644 vitepress/.vitepress/theme/ArticlesIndexClient.vue
 delete mode 100644 vitepress/.vitepress/theme/NotesIndexClient.vue

diff --git a/vitepress/.vitepress/config.mjs b/vitepress/.vitepress/config.mjs
index d2abfc8..ccb1bab 100644
--- a/vitepress/.vitepress/config.mjs
+++ b/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: [
diff --git a/vitepress/.vitepress/theme/ArticlesIndex.vue b/vitepress/.vitepress/theme/ArticlesIndex.vue
index 675b212..ce4d360 100644
--- a/vitepress/.vitepress/theme/ArticlesIndex.vue
+++ b/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>
diff --git a/vitepress/.vitepress/theme/ArticlesIndexClient.vue b/vitepress/.vitepress/theme/ArticlesIndexClient.vue
deleted file mode 100644
index bb2bf0c..0000000
--- a/vitepress/.vitepress/theme/ArticlesIndexClient.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-import { data as importedData } from '../../articles.data'
-import Tags from './components/Tags.vue';
-import { excerptToLink } from './utils/frontmatter'
-import { datetime } from 'datetime-attribute'
-
-// The following declaration is just to import type autocompletion. 😑
-
-/** @type {Record<string, import('vitepress').ContentData[]>} */
-const data = importedData
-
-// Sort years
-data.forEach(article => {
-
-  // normalize date
-  article.frontmatter.publishedAt = new Date(article.frontmatter.publishedAt)
-
-  /**
-   * 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.
-   */
-  excerptToLink(article)
-})
-
-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" />
-
-    <p v-if="excerpt" v-html="excerpt"></p>
-  </template>
-</template>
diff --git a/vitepress/.vitepress/theme/NotesIndex.vue b/vitepress/.vitepress/theme/NotesIndex.vue
index 9cb77f5..790ee0d 100644
--- a/vitepress/.vitepress/theme/NotesIndex.vue
+++ b/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>
diff --git a/vitepress/.vitepress/theme/NotesIndexClient.vue b/vitepress/.vitepress/theme/NotesIndexClient.vue
deleted file mode 100644
index 4b658fe..0000000
--- a/vitepress/.vitepress/theme/NotesIndexClient.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup>
-import { data as importedData } from '../../notes.data'
-import { excerptToLink } from './utils/frontmatter'
-import { datetime } from 'datetime-attribute'
-
-// The following declaration is just to import type autocompletion. 😑
-
-/** @type {Record<string, import('vitepress').ContentData[]>} */
-const data = importedData
-
-// Sort years
-const years = Object.keys(data).sort((a, b) => b - a)
-
-years.forEach(year => data[year].forEach(note => {
-
-  // normalize date
-  note.frontmatter.publishedAt = new Date(note.frontmatter.publishedAt)
-
-  /**
-   * 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.
-   */
-  excerptToLink(note)
-}))
-
-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>
-
-    <ul>
-      <li v-for="({ frontmatter: { title, publishedAt, excerpt }, url }) in data[year]">
-        <p>
-          <time :datetime="datetime(publishedAt)">
-            {{ dateFormatter.format(publishedAt) }}
-          </time>:
-          <span v-if="excerpt" v-html="excerpt"/>
-          <a v-else :href="url">{{ title }}</a>
-        </p>
-      </li>
-    </ul>
-  </template>
-</template>
diff --git a/vitepress/.vitepress/theme/index.js b/vitepress/.vitepress/theme/index.js
index 4057957..f70e8bc 100644
--- a/vitepress/.vitepress/theme/index.js
+++ b/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)
-  // }
 }