Move articles list and their items to dedicated components

vitepress/.vitepress/theme/ArticlesIndex.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { onBeforeMount, reactive } from 'vue'
 import { data as importedData } from '../../articles.data'
-import Tags from './components/Tags.vue';
+
+import ArticlesList from './components/ArticlesList.vue';
 
 // The following declaration is just to import type autocompletion. 😑
 
@@ -28,15 +29,5 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <template v-for="({ excerpt, frontmatter: { title, publishedAt, tags }, url }) in data">
-
-    <h2><a :href="url" v-html="title"/></h2>
-
-    <datetime :date="publishedAt" formatter="longdate"/>
-    <tags :tags="tags" />
-
-    <p v-if="excerpt" v-html="excerpt"></p>
-
-    <a :href="url">Continue reading</a>
-  </template>
+  <ArticlesList :articles="data"/>
 </template>

vitepress/.vitepress/theme/ArticlesTaggedWith.vue

@@ -2,9 +2,10 @@
 import { onBeforeMount, reactive } from 'vue'
 import { useData } from 'vitepress'
 import { data as importedData } from '../../articles.data'
-import Tags from './components/Tags.vue';
 import { slugify } from '@mdit-vue/shared'
 
+import ArticlesList from './components/ArticlesList.vue';
+
 // The following declaration is just to import type autocompletion. 😑
 
 /** @type {Record<string, import('vitepress').ContentData[]>} */
@@ -38,15 +39,5 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <template v-for="({ excerpt, frontmatter: { title, publishedAt, tags }, url }) in data">
-
-    <h2><a :href="url" v-html="title"/></h2>
-
-    <datetime :date="publishedAt" formatter="longdate"/>
-    <tags :tags="tags" />
-
-    <p v-if="excerpt" v-html="excerpt"></p>
-
-    <a :href="url">Continue reading</a>
-  </template>
+  <ArticlesList :articles="data"/>
 </template>

vitepress/.vitepress/theme/components/ArticlesList.vue

@@ -0,0 +1,14 @@
+<script setup>
+import ArticlesListItem from './ArticlesListItem.vue';
+
+const props = defineProps({
+  articles: {
+    type: Array,
+    required: true,
+  }
+})
+</script>
+
+<template>
+  <ArticlesListItem v-for="article in articles" :article="article"/>
+</template>

vitepress/.vitepress/theme/components/ArticlesListItem.vue

@@ -0,0 +1,27 @@
+<script setup>
+import Tags from './Tags.vue';
+
+const props = defineProps({
+  article: {
+    type: Object,
+    required: true,
+  }
+})
+
+const {
+  excerpt,
+  frontmatter: { title, publishedAt, tags },
+  url,
+} = props.article
+</script>
+
+<template>
+  <h2><a :href="url" v-html="title"/></h2>
+
+  <datetime :date="publishedAt" formatter="longdate"/>
+  <tags :tags="tags" />
+
+  <p v-if="excerpt" v-html="excerpt"></p>
+
+  <a :href="url">Continue reading</a>
+</template>