Merge pull request #867 from vitejs/sync-8b72e230-1

docs(en): merge docs-cn/sync-docs into docs-cn/dev @ 8b72e23

Author: ShenQingchuan

.vitepress/config.ts

@@ -5,6 +5,61 @@ const ogImage = 'https://vitejs.dev/og-image.png'
 const ogTitle = 'Vite'
 const ogUrl = 'https://vitejs.dev'
 
+// netlify envs
+const deployURL = process.env.DEPLOY_PRIME_URL || ''
+const commitRef = process.env.COMMIT_REF?.slice(0, 8) || 'dev'
+
+const deployType = (() => {
+  switch (deployURL) {
+    case 'https://main--vite-docs-main.netlify.app':
+      return 'main'
+    case '':
+      return 'local'
+    default:
+      return 'release'
+  }
+})()
+const additionalTitle = ((): string => {
+  switch (deployType) {
+    case 'main':
+      return ' (main branch)'
+    case 'local':
+      return ' (local)'
+    case 'release':
+      return ''
+  }
+})()
+const versionLinks = ((): DefaultTheme.NavItemWithLink[] => {
+  const oldVersions: DefaultTheme.NavItemWithLink[] = [
+    {
+      text: 'Vite 4 Docs',
+      link: 'https://v4.vitejs.dev',
+    },
+    {
+      text: 'Vite 3 Docs',
+      link: 'https://v3.vitejs.dev',
+    },
+    {
+      text: 'Vite 2 Docs',
+      link: 'https://v2.vitejs.dev',
+    },
+  ]
+
+  switch (deployType) {
+    case 'main':
+    case 'local':
+      return [
+        {
+          text: 'Vite 5 Docs (release)',
+          link: 'https://vitejs.dev',
+        },
+        ...oldVersions,
+      ]
+    case 'release':
+      return oldVersions
+  }
+})()
+
 export default defineConfig({
   title: 'Vite 官方中文文档',
   description: '下一代前端工具链',
@@ -38,6 +93,7 @@ export default defineConfig({
     es: { label: 'Español', link: 'https://es.vitejs.dev' },
     pt: { label: 'Português', link: 'https://pt.vitejs.dev' },
     ko: { label: '한국어', link: 'https://ko.vitejs.dev' },
+    de: { label: 'Deutsch', link: 'https://de.vitejs.dev' },
   },
 
   themeConfig: {
@@ -126,6 +182,7 @@ export default defineConfig({
         text: '相关链接',
         items: [
           { text: 'Team', link: '/team' },
+          { text: 'Blog', link: '/blog' },
           { text: 'Releases', link: '/releases' },
           {
             items: [

.vitepress/rewrite-title/index.js

@@ -1,6 +1,8 @@
-const path = require('path')
-const fsp = require('fs').promises
-const matterService = require('../utils/frontmatter-service')
+import path from 'node:path'
+import fsp from 'node:fs/promises'
+import matterService from '../utils/frontmatter-service.js'
+import { fileURLToPath } from 'node:url'
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const workspacePath = path.resolve(__dirname, '..', '..')
 
 const h1MdRegExp = /^#\s+(.+)\s+(\{#([\w-]+)\})$/
@@ -41,4 +43,4 @@ const ergodicDirectory = async (dirPath) => {
   }
 }
 
-module.exports = () => ergodicDirectory(workspacePath)
+export default () => ergodicDirectory(workspacePath)

.vitepress/theme/components/AsideSponsors.vue

@@ -18,5 +18,70 @@ const sponsors = computed(() => {
 </script>
 
 <template>
+  <a
+    class="viteconf"
+    href="https://viteconf.org/23/replay?utm=vite-sidebar"
+    target="_blank"
+  >
+    <img width="22" height="22" src="/viteconf.svg" />
+    <span>
+      <p class="extra-info">Beyond Fast</p>
+      <p class="heading">ViteConf 2023</p>
+      <p class="extra-info">Watch the replay!</p>
+    </span>
+  </a>
   <VPDocAsideSponsors v-if="data" :data="sponsors" />
 </template>
+
+<style>
+.viteconf {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 14px;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+  position: relative;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 1rem;
+  background-color: var(--vp-c-bg-alt);
+  border: 2px solid var(--vp-c-bg-alt);
+  transition: border-color 0.5s;
+}
+.viteconf:hover {
+  border: 2px solid var(--vp-c-brand-light);
+}
+.viteconf img {
+  transition: transform 0.5s;
+  transform: scale(1.25);
+}
+.viteconf:hover img {
+  transform: scale(1.75);
+}
+.viteconf .heading {
+  background-image: linear-gradient(
+    120deg,
+    #b047ff 16%,
+    var(--vp-c-brand-lighter),
+    var(--vp-c-brand-lighter)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.viteconf .extra-info {
+  color: var(--vp-c-text-1);
+  opacity: 0;
+  font-size: 0.7rem;
+  padding-left: 0.1rem;
+  transition: opacity 0.5s;
+}
+.viteconf:hover .extra-info {
+  opacity: 0.9;
+}
+</style>

.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>

.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',
+    }),
+  }
+}

.vitepress/theme/index.ts

@@ -7,6 +7,9 @@ import AsideSponsors from './components/AsideSponsors.vue'
 import SvgImage from './components/SvgImage.vue'
 import WwAds from './components/WwAds.vue'
 import './custom.css'
+// temporary fix for vitepress not including component css when only
+// imported in a single page
+import './components/BlogIndex.vue'
 
 export default {
   extends: DefaultTheme,

.vitepress/theme/styles/vars.css

@@ -118,3 +118,11 @@
 .vp-sponsor.aside .vp-sponsor-grid.mini .vp-sponsor-grid-image {
   max-width: 124px;
 }
+
+.vp-sponsor.aside .vp-sponsor-grid.mini .vp-sponsor-grid-image[alt='Bit'] {
+  max-height: 44px;
+}
+
+.vp-sponsor-grid.big .vp-sponsor-grid-image {
+  max-height: 96px;
+}

.vitepress/utils/frontmatter-service.js

@@ -1,6 +1,7 @@
-const fs = require('fs')
-const matter = require('gray-matter')
-const { extend, isEmpty: _isEmpty } = require('lodash')
+import fs from 'node:fs'
+import matter from 'gray-matter'
+import _ from 'lodash'
+
 // gray-matter is a dep for vitepress,
 // no need to specify that in package.json
 
@@ -21,7 +22,7 @@ class FrontMatterService {
   }
 
   isEmpty() {
-    return _isEmpty(this.matter.data)
+    return _._isEmpty(this.matter.data)
   }
 
   /** @param{(data: string) => void} callback */
@@ -48,7 +49,7 @@ class FrontMatterService {
 
   /** @param {Record<string, any>} src */
   extend(src) {
-    extend(this.matter.data, src)
+    _.extend(this.matter.data, src)
     return this
   }
 
@@ -63,4 +64,4 @@ class FrontMatterService {
   }
 }
 
-module.exports = new FrontMatterService()
+export default new FrontMatterService()

_data/team.js

@@ -53,10 +53,11 @@ export const core = [
     avatar: 'https://github.com/sapphi-red.png',
     name: 'green',
     title: 'Web Developer',
-    desc: 'Vite team member. Call me sapphi or green or midori ;)',
+    desc: 'Vite core team member. Call me sapphi or green or midori ;)',
     links: [
       { icon: 'github', link: 'https://github.com/sapphi-red' },
       { icon: 'twitter', link: 'https://twitter.com/sapphi_red' },
+      { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@sapphi_red' },
     ],
     sponsor: 'https://github.com/sponsors/sapphi-red',
   },
@@ -82,7 +83,7 @@ export const core = [
     desc: 'Passionate TypeScript enthusiast working extensively with Vue SPA and pug.',
     links: [
       { icon: 'github', link: 'https://github.com/Shinigami92' },
-      { icon: 'twitter', link: 'https://twitter.com/Shini_92' },
+      { icon: 'mastodon', link: 'https://elk.zone/mas.to/@Shini92' },
     ],
     sponsor: 'https://github.com/sponsors/Shinigami92',
   },

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/>