use metadata to autogenerate blog index

Author: roxblnfk

.vitepress/theme/BlogPosts.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { data as posts } from './posts.data'
+
+const props = defineProps<{
+  folder: string
+}>()
+
+const filteredPosts = computed(() => {
+  return posts.filter((post) => post.url.startsWith(props.folder))
+})
+</script>
+
+<template>
+  <ul class="blog-posts">
+    <li v-for="post in filteredPosts" :key="post.url">
+      <div class="post-header">
+        <a :href="post.url">{{ post.title }}</a>
+      </div>
+      <p class="post-description">{{ post.description }}</p>
+      <div class="timestamp">{{ post.date }}</div>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.blog-posts {
+  list-style: none;
+  padding: 0;
+}
+
+.blog-posts .post-header a {
+  text-decoration: none !important;
+}
+
+.blog-posts li {
+  margin: 1.5em 0;
+}
+
+.blog-posts .timestamp {
+  margin-right: 0.5em;
+  color: var(--vp-c-text-2);
+  font-size: 0.8em;
+}
+
+.post-description {
+  margin: 0.25em 0 0 0;
+  color: var(--vp-c-text-1);
+  font-size: 0.9em;
+}
+</style>

.vitepress/theme/index.ts

@@ -5,6 +5,7 @@ import BlogSponsor from './BlogSponsor.vue'
 import GitHubStars from './GitHubStars.vue'
 import CodeTabs from './CodeTabs.vue'
 import JetBrainsPluginButton from './JetBrainsPluginButton.vue'
+import BlogPosts from './BlogPosts.vue'
 import './style.css'
 
 export default {
@@ -18,5 +19,6 @@ export default {
   enhanceApp({ app }) {
     app.component('CodeTabs', CodeTabs)
     app.component('JetBrainsPluginButton', JetBrainsPluginButton)
+    app.component('BlogPosts', BlogPosts)
   },
 } satisfies Theme

.vitepress/theme/posts.data.ts

@@ -0,0 +1,30 @@
+import { createContentLoader } from 'vitepress'
+
+export interface Post {
+  title: string
+  url: string
+  date: string
+  description: string
+}
+
+declare const data: Post[]
+export { data }
+
+export default createContentLoader(['blog/*.md', 'ru/blog/*.md'], {
+  transform(raw): Post[] {
+    return raw
+      .filter((page) => page.url !== '/blog/' && page.url !== '/ru/blog/')
+      .map((page) => ({
+        title: page.frontmatter.title,
+        url: page.url,
+        date: formatDate(page.frontmatter.date),
+        description: page.frontmatter.description,
+      }))
+      .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+  },
+})
+
+function formatDate(date: string | Date): string {
+  const d = new Date(date)
+  return d.toISOString().slice(0, 10)
+}

blog/index.md

@@ -1,5 +1,3 @@
 # Blog <a href="/feed.xml"><Badge type="info" text="RSS" /></a>
 
-- `2026-01-01` [Assert and Expect](./assert-and-expect.md)
-- `2025-11-07` [Filters](./filters.md)
-- `2025-10-30` [Khinkali](./khinkali.md)
+<BlogPosts folder="/blog/" />

ru/blog/index.md

@@ -1,5 +1,3 @@
 # Блог <a href="/ru/feed.xml"><Badge type="info" text="RSS" /></a>
 
-- `2026-01-01` [Assert и Expect](./assert-and-expect.md)
-- `2025-11-07` [Фильтры](./filters.md)
-- `2025-10-30` [Хинкали](./khinkali.md)
+<BlogPosts folder="/ru/blog/" />