From 4c24f1ec716e2bf5f5d398e45cbe0d466c0d2d8f Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 17 Nov 2023 11:05:56 +0800
Subject: [PATCH] docs: add blog index page

---
 docs/.vitepress/config.ts                     |  1 +
 .../.vitepress/theme/components/BlogIndex.vue | 46 +++++++++++++++++++
 docs/.vitepress/theme/components/blog.data.ts | 40 ++++++++++++++++
 docs/blog.md                                  | 13 ++++++
 docs/blog/announcing-vite2.md                 | 14 ++++++
 docs/blog/announcing-vite3.md                 |  1 +
 docs/blog/announcing-vite4-3.md               |  1 +
 docs/blog/announcing-vite4.md                 |  1 +
 docs/blog/announcing-vite5.md                 |  1 +
 9 files changed, 118 insertions(+)
 create mode 100644 docs/.vitepress/theme/components/BlogIndex.vue
 create mode 100644 docs/.vitepress/theme/components/blog.data.ts
 create mode 100644 docs/blog.md

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index c6b707162..b8b06ff22 100644
--- a/docs/.vitepress/config.ts
+++ b/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: [
diff --git a/docs/.vitepress/theme/components/BlogIndex.vue b/docs/.vitepress/theme/components/BlogIndex.vue
new file mode 100644
index 000000000..cddd7c16e
--- /dev/null
+++ b/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>
diff --git a/docs/.vitepress/theme/components/blog.data.ts b/docs/.vitepress/theme/components/blog.data.ts
new file mode 100644
index 000000000..39d45ec2b
--- /dev/null
+++ b/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',
+    }),
+  }
+}
diff --git a/docs/blog.md b/docs/blog.md
new file mode 100644
index 000000000..f3f8c6298
--- /dev/null
+++ b/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/>
diff --git a/docs/blog/announcing-vite2.md b/docs/blog/announcing-vite2.md
index d81debc9b..e9f6da0ce 100644
--- a/docs/blog/announcing-vite2.md
+++ b/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
diff --git a/docs/blog/announcing-vite3.md b/docs/blog/announcing-vite3.md
index dba46bb8a..8aaa4d01c 100644
--- a/docs/blog/announcing-vite3.md
+++ b/docs/blog/announcing-vite3.md
@@ -1,5 +1,6 @@
 ---
 sidebar: false
+date: 2022-07-23
 head:
   - - meta
     - property: og:type
diff --git a/docs/blog/announcing-vite4-3.md b/docs/blog/announcing-vite4-3.md
index 756c3579d..8ed3fdb38 100644
--- a/docs/blog/announcing-vite4-3.md
+++ b/docs/blog/announcing-vite4-3.md
@@ -1,5 +1,6 @@
 ---
 sidebar: false
+date: 2023-04-20
 head:
   - - meta
     - property: og:type
diff --git a/docs/blog/announcing-vite4.md b/docs/blog/announcing-vite4.md
index ca0a4b8d9..3b3280b99 100644
--- a/docs/blog/announcing-vite4.md
+++ b/docs/blog/announcing-vite4.md
@@ -1,5 +1,6 @@
 ---
 sidebar: false
+date: 2022-12-09
 head:
   - - meta
     - property: og:type
diff --git a/docs/blog/announcing-vite5.md b/docs/blog/announcing-vite5.md
index 8f043ebc7..4795801f0 100644
--- a/docs/blog/announcing-vite5.md
+++ b/docs/blog/announcing-vite5.md
@@ -1,5 +1,6 @@
 ---
 sidebar: false
+date: 2023-11-16
 head:
   - - meta
     - property: og:type