feat!: migrate to vitepress (#1)

* feat!: migrate to vitepress

* chore: regenerate `pnpm-lock.yaml`

.gitignore

@@ -5,8 +5,7 @@
 /build
 
 # Generated files
-.docusaurus
-.cache-loader
+/.vitepress/cache
 
 # Misc
 .DS_Store

.vitepress/authors.ts

@@ -0,0 +1,15 @@
+export interface Author {
+  name: string;
+  title: string;
+  link: string;
+  avatar: string;
+}
+
+export const AUTHORS: Record<string, Author> = {
+  boshen: {
+    name: "Boshen",
+    title: "Project Lead",
+    link: "https://github.com/boshen",
+    avatar: "https://github.com/boshen.png",
+  },
+};

.vitepress/config.mts

@@ -0,0 +1,102 @@
+import { defineConfig } from 'vitepress'
+
+export default defineConfig({
+  srcDir: 'docs',
+  srcExclude: [],
+  outDir: 'build',
+  base: '/',
+  title: 'The JavaScript Oxidation Compiler',
+  titleTemplate: ':title | The JavaScript Oxidation Compiler',
+  description: 'A collection of high-performance JavaScript tools written in Rust',
+  head: [
+    ['link', { rel: 'icon', href: 'https://raw.githubusercontent.com/oxc-project/oxc-assets/main/logo-round.png' }],
+  ],
+  lastUpdated: true,
+  themeConfig: {
+    siteTitle: 'Oxc',
+    logo: 'https://raw.githubusercontent.com/oxc-project/oxc-assets/main/logo-round.png',
+    logoLink: '/',
+    search: {
+      provider: 'local',
+    },
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Getting Started', link: '/docs/usage/linter' },
+      { text: 'Contribute', link: '/docs/contribute/intro' },
+      { text: 'Learn', link: '/docs/learn/ecosystem' },
+      { text: 'Blog', link: '/blog/2022-02-10-js-tooling-research' },
+      { text: 'Playground', target: '_blank', link: 'https://oxc-project.github.io/oxc/playground/' },
+    ],
+    socialLinks: [
+      { icon: 'twitter', link: 'https://x.com/boshen_c' },
+      { icon: 'discord', link: 'https://discord.gg/9uXCAwqQZW' },
+      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
+    ],
+    editLink: {
+      pattern: 'https://github.com/oxc-project/oxc/edit/main/src/:path',
+    },
+    lastUpdated: {
+      formatOptions: {
+        dateStyle: 'full',
+      },
+    },
+    sidebar: {
+      '/docs/usage/': [
+        {
+          text: 'Usage',
+          items: [
+            { text: 'Linter', link: '/docs/usage/linter' },
+            { text: 'Parser', link: '/docs/usage/parser' },
+            { text: 'Resolver', link: '/docs/usage/resolver' },
+            { text: 'Philosophy', link: '/docs/usage/philosophy' },
+          ],
+        }
+      ],
+      '/docs/contribute/': [
+        { text: 'Intro', link: '/docs/contribute/intro' },
+        { text: 'Rules', link: '/docs/contribute/rules' },
+        { text: 'Parser', link: '/docs/contribute/parser' },
+        { text: 'Linter', link: '/docs/contribute/linter' },
+        { text: 'Resolver', link: '/docs/contribute/resolver' },
+        { text: 'Transformer', link: '/docs/contribute/transformer' },
+        { text: 'Formatter', link: '/docs/contribute/formatter' },
+        { text: 'Codegen', link: '/docs/contribute/codegen' },
+        { text: 'Minifier', link: '/docs/contribute/minifier' },
+        { text: 'Vscode', link: '/docs/contribute/vscode' },
+        { text: 'Performance', link: '/docs/contribute/performance' },
+        { text: 'Showcase', link: '/docs/contribute/showcase' },
+      ],
+      '/docs/learn/': [
+        { text: 'Ecosystem', link: '/docs/learn/ecosystem' },
+        { text: 'Partnership', link: '/docs/learn/partnership' },
+        {
+          text: 'Architecture',
+          items: [
+            { text: 'Intro', link: '/docs/learn/architecture/intro' },
+            { text: 'Parser', link: '/docs/learn/architecture/parser' },
+            { text: 'Linter', link: '/docs/learn/architecture/linter' },
+            { text: 'Resolver', link: '/docs/learn/architecture/resolver' },
+            { text: 'Transformer', link: '/docs/learn/architecture/transformer' },
+            { text: 'Formatter', link: '/docs/learn/architecture/formatter' },
+            { text: 'Minifier', link: '/docs/learn/architecture/minifier' },
+          ],
+        },
+        {
+          text: 'ECMAScript',
+          items: [
+            { text: 'Spec', link: '/docs/learn/ecmascript/spec' },
+            { text: 'Grammar', link: '/docs/learn/ecmascript/grammar' },
+          ],
+        },
+        { text: 'Performance', link: '/docs/learn/performance' },
+        { text: 'References', link: '/docs/learn/references' },
+      ],
+      '/blog/': [
+        { text: 'High Performance JavaScript Toolchain', link: '/blog/2022-02-10-js-tooling-research' },
+        { text: 'A research on JavaScript linters', link: '/blog/2022-08-08-linter-research' },
+        { text: 'Announcing Oxc', link: '/blog/2023-11-07-announcing-oxc' },
+        { text: 'Oxlint General Availability', link: '/blog/2023-11-08-announcing-oxlint' },
+      ]
+    },
+  },
+})

.vitepress/theme/components/AppBadgeList.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+
+interface Badge {
+  src: string
+  alt: string
+}
+
+const vitePressData = useData()
+
+const badges = computed<Badge[]>(() => vitePressData.frontmatter.value.badges)
+</script>
+
+<template>
+  <ul class="AppBadgeList">
+    <li v-for="badge in badges" :key="badge.src" class="badge">
+      <img :src="badge.src" :alt="badge.alt">
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.AppBadgeList {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 0;
+  list-style: none;
+}
+
+.badge {
+  margin: 0;
+}
+</style>

.vitepress/theme/components/AppBlogPostHeader.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watchEffect } from 'vue'
+import { useData } from 'vitepress'
+import { AUTHORS } from '../../authors'
+import type { Author } from '../../authors'
+
+            const vitePressData = useData()
+const title =           computed<string>(() => vitePressData.frontmatter.value.title)
+const authors = computed<Author[]>(() => {
+  return vitePressData.frontmatter.value.authors.map((author) => AUTHORS[author]).filter(Boolean)
+})
+const date = computed(() => {
+  const filePath = vitePressData.page.value.filePath
+  const result = filePath.match(/^blog\/(?<date>\d{4}-\d{2}-\d{2})-.*$/)
+  const { date } = result?.groups ?? {}
+
+  if (date) {
+    return new Date(date)
+  }
+  return null
+})
+const isoDatetime = computed(() => date.value?.toISOString() ?? null)
+const datetime = ref('')
+
+// set time on mounted hook to avoid hydration mismatch due to
+// potential differences in timezones of the server and clients
+onMounted(() => {
+  watchEffect(() => {
+    if (date.value) {
+      datetime.value = new Intl.DateTimeFormat(vitePressData.lang.value, { dateStyle: 'long' }).format(date.value)
+    }
+  })
+})
+</script>
+
+<template>
+  <header class="AppBlogPostHeader">
+    <h1>{{ title }}</h1>
+    <p v-if="isoDatetime">
+      <time :datetime="isoDatetime">{{ datetime }}</time>
+    </p>
+    <ul class="authors">
+      <li v-for="author in authors" :key="author.name" class="author">
+        <img :src="author.avatar" :alt="author.name" class="author-avatar">
+        <p class="author-text">
+          <a :href="author.link" target="_blank" class="author-name">{{ author.name }}</a>
+          <span class="author-title">{{ author.title }}</span>
+        </p>
+      </li>
+    </ul>
+  </header>
+</template>
+
+<style scoped>
+.authors {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 10px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.author {
+  display: flex;
+  gap: 10px;
+  margin: 0;
+}
+
+.author-text {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+.author-name {
+  line-height: 1.25;
+}
+
+.author-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.author-avatar {
+  width: 48px;
+  height: 48px;
+}
+</style>

.vitepress/theme/index.mts

@@ -0,0 +1,12 @@
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import AppBadgeList from './components/AppBadgeList.vue'
+import AppBlogPostHeader from './components/AppBlogPostHeader.vue'
+
+export default {
+  extends: DefaultTheme,
+  async enhanceApp({ app }) {
+    app.component('AppBadgeList', AppBadgeList)
+    app.component('AppBlogPostHeader', AppBlogPostHeader)
+  }
+} satisfies Theme

docs/blog/2022-02-10-js-tooling-research.md

@@ -0,0 +1,8 @@
+---
+title: High Performance JavaScript Toolchain
+outline: deep
+authors:
+  - boshen
+---
+
+<AppBlogPostHeader />

blog/2022-08-08-linter-research.md → docs/blog/2022-08-08-linter-research.md

@@ -1,7 +1,8 @@
 ---
 title: A research on JavaScript linters
-slug: linter-research
+outline: deep
 authors:
   - boshen
-hide_table_of_contents: false
 ---
+
+<AppBlogPostHeader />

docs/blog/2023-11-07-announcing-oxc.md

@@ -0,0 +1,8 @@
+---
+title: Announcing Oxc
+outline: deep
+authors:
+  - boshen
+---
+
+<AppBlogPostHeader />

blog/2023-11-08-announcing-oxlint.md → docs/blog/2023-11-08-announcing-oxlint.md

@@ -1,7 +1,8 @@
 ---
 title: Oxlint General Availability
-slug: announcing-oxlint
+outline: deep
 authors:
   - boshen
-hide_table_of_contents: false
 ---
+
+<AppBlogPostHeader />

docs/blog/2023-11-09-biome.md → docs/blog/index.md

@@ -1,13 +1,10 @@
 ---
-id: biome
-title: Biome
+outline: deep
 ---
 
 [Rome](https://github.com/rome/tools) uses a different set of techniques for parsing JavaScript and TypeScript.
 This tutorial summarizes them in learning order for better understanding.
 
-<!--truncate-->
-
 ## History
 
 - The Rome codebase was rewritten from TypeScript to Rust, see [Rome will be rewritten in Rust](https://rome.tools/blog/2021/09/21/rome-will-be-rewritten-in-rust)

docs/contribute/codegen.md → docs/docs/contribute/codegen.md

@@ -1,6 +1,6 @@
 ---
-id: codegen
 title: Codegen
+outline: deep
 ---
 
 # Codegen

docs/contribute/formatter.md → docs/docs/contribute/formatter.md

@@ -1,6 +1,6 @@
 ---
-id: formatter
 title: Formatter
+outline: deep
 ---
 
 # Formatter

docs/contribute/intro.md → docs/docs/contribute/intro.md

@@ -1,6 +1,6 @@
 ---
-id: intro
 title: Installation
+outline: deep
 ---
 
 ## Clone Repo
@@ -44,7 +44,7 @@ cargo binstall just -y
 [`just`](https://github.com/casey/just) is a handy way to save and run project-specific commands.
 To initialize all the required tools, run
 
-```
+```bash
 just init
 ```