docs: add blog index page

docs/.vitepress/config.ts

@@ -137,6 +137,7 @@ export default defineConfig({
         text: 'Resources',
         items: [
           { text: 'Team', link: '/team' },
+          { text: 'Blog', link: '/blog' },
           { text: 'Releases', link: '/releases' },
           {
             items: [

docs/.vitepress/theme/components/BlogIndex.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { data as posts } from './blog.data'
+
+function getDateTime(time: number) {
+  return new Date(time).toISOString()
+}
+</script>
+
+<template>
+  <ul class="blog-list">
+    <li class="blog-entry" v-for="post of posts">
+      <article>
+        <time :datetime="getDateTime(post.date.time)">{{
+          post.date.string
+        }}</time>
+        <h2 class="title">
+          <a :href="post.url">{{ post.title }}</a>
+        </h2>
+      </article>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.blog-list {
+  list-style-type: none;
+  padding: 0;
+}
+.blog-entry {
+  margin-top: 3em;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+.blog-entry time {
+  font-size: 14px;
+}
+.title {
+  border: none;
+  margin-top: 0;
+  padding-top: 0;
+  font-size: 22px;
+}
+.title a {
+  font-weight: 600;
+  text-decoration: none;
+}
+</style>

docs/.vitepress/theme/components/blog.data.ts

@@ -0,0 +1,40 @@
+import { createContentLoader } from 'vitepress'
+
+interface Post {
+  title: string
+  url: string
+  date: {
+    time: number
+    string: string
+  }
+}
+
+declare const data: Post[]
+export { data }
+
+export default createContentLoader('blog/*.md', {
+  // excerpt: true,
+  transform(raw): Post[] {
+    return raw
+      .map(({ url, frontmatter }) => ({
+        title: frontmatter.head.find((e) => e[1].property === 'og:title')[1]
+          .content,
+        url,
+        date: formatDate(frontmatter.date),
+      }))
+      .sort((a, b) => b.date.time - a.date.time)
+  },
+})
+
+function formatDate(raw: string): Post['date'] {
+  const date = new Date(raw)
+  date.setUTCHours(12)
+  return {
+    time: +date,
+    string: date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    }),
+  }
+}

docs/blog.md

@@ -0,0 +1,13 @@
+---
+sidebar: false
+editLink: false
+outline: false
+---
+
+<script setup>
+import BlogIndex from './.vitepress/theme/components/BlogIndex.vue'
+</script>
+
+# Latest From the Vite Blog
+
+<BlogIndex/>

docs/blog/announcing-vite2.md

@@ -1,5 +1,19 @@
 ---
 sidebar: false
+date: 2021-02-16
+head:
+  - - meta
+    - property: og:type
+      content: website
+  - - meta
+    - property: og:title
+      content: Announcing Vite 2.0
+  - - meta
+    - property: og:url
+      content: https://vitejs.dev/blog/announcing-vite2
+  - - meta
+    - property: og:description
+      content: Vite 2 Release Announcement
 ---
 
 # Announcing Vite 2.0

docs/blog/announcing-vite3.md

@@ -1,5 +1,6 @@
 ---
 sidebar: false
+date: 2022-07-23
 head:
   - - meta
     - property: og:type

docs/blog/announcing-vite4-3.md

@@ -1,5 +1,6 @@
 ---
 sidebar: false
+date: 2023-04-20
 head:
   - - meta
     - property: og:type

docs/blog/announcing-vite4.md

@@ -1,5 +1,6 @@
 ---
 sidebar: false
+date: 2022-12-09
 head:
   - - meta
     - property: og:type

docs/blog/announcing-vite5.md

@@ -1,5 +1,6 @@
 ---
 sidebar: false
+date: 2023-11-16
 head:
   - - meta
     - property: og:type