Editor configs (#31)

* cfg: use ESM

* cfg: format

* cfg: .editorconfig

* cfg: tsconfig

.editorconfig

@@ -0,0 +1,10 @@
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.github/workflows/ci.yml

@@ -4,12 +4,12 @@ on:
   pull_request:
     types: [opened, synchronize]
     paths-ignore:
-      - 'README.md'
+      - "README.md"
   push:
     branches:
       - main
     paths-ignore:
-      - 'README.md'
+      - "README.md"
 
 jobs:
   ci:
@@ -26,8 +26,8 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
-          cache: 'pnpm'
+          node-version: "18"
+          cache: "pnpm"
 
       - run: pnpm install --frozen-lockfile
 

.prettierrc.js

@@ -0,0 +1,7 @@
+/** @type {import("prettier").Options} */
+export default {
+  semi: true,
+  singleQuote: false,
+  trailingComma: "all",
+  printWidth: 120,
+};

.vitepress/config.mts → .vitepress/config.ts

@@ -1,8 +1,8 @@
 import { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 import { defineConfig } from "vitepress";
-import { EN_LOCALE_CONFIG } from "./config.en.mjs";
-import { JA_LOCALE_CONFIG } from "./config.ja.mjs";
+import { EN_LOCALE_CONFIG } from "./config.en.js";
+import { JA_LOCALE_CONFIG } from "./config.ja.js";
 
 export default defineConfig({
   srcDir: "src",
@@ -11,8 +11,7 @@ export default defineConfig({
   base: "/",
   title: "The JavaScript Oxidation Compiler",
   titleTemplate: ":title | The JavaScript Oxidation Compiler",
-  description:
-    "A collection of high-performance JavaScript tools written in Rust",
+  description: "A collection of high-performance JavaScript tools written in Rust",
   head: [
     [
       "link",
@@ -40,8 +39,7 @@ export default defineConfig({
       "meta",
       {
         property: "og:description",
-        content:
-          "A collection of high-performance JavaScript tools written in Rust",
+        content: "A collection of high-performance JavaScript tools written in Rust",
       },
     ],
     ["meta", { property: "og:site_name", content: "OXC" }],
@@ -50,8 +48,7 @@ export default defineConfig({
       "meta",
       {
         property: "og:image",
-        content:
-          "https://github.com/oxc-project/oxc-assets/blob/main/preview-white.png?raw=true",
+        content: "https://github.com/oxc-project/oxc-assets/blob/main/preview-white.png?raw=true",
       },
     ],
     // Twitter (X)
@@ -67,17 +64,15 @@ export default defineConfig({
       "meta",
       {
         name: "twitter:description",
-        content:
-          "A collection of high-performance JavaScript tools written in Rust",
+        content: "A collection of high-performance JavaScript tools written in Rust",
       },
     ],
     ["meta", { name: "twitter:card", content: "summary_large_image" }],
     [
       "meta",
       {
         name: "twitter:image",
-        content:
-          "https://github.com/oxc-project/oxc-assets/blob/main/preview-white.png?raw=true",
+        content: "https://github.com/oxc-project/oxc-assets/blob/main/preview-white.png?raw=true",
       },
     ],
     [
@@ -113,12 +108,8 @@ export default defineConfig({
   vite: {
     resolve: {
       alias: {
-        "@components": `${dirname(
-          fileURLToPath(import.meta.url),
-        )}/theme/components`,
-        "@constants": `${dirname(
-          fileURLToPath(import.meta.url),
-        )}/theme/constants`,
+        "@components": `${dirname(fileURLToPath(import.meta.url))}/theme/components`,
+        "@constants": `${dirname(fileURLToPath(import.meta.url))}/theme/constants`,
       },
     },
   },

.vitepress/theme/components/AppBadgeList.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useData } from 'vitepress'
+import { computed } from "vue";
+import { useData } from "vitepress";
 
 interface Badge {
-  src: string
-  alt: string
+  src: string;
+  alt: string;
 }
 
-const vitePressData = useData()
+const vitePressData = useData();
 
-const badges = computed<Badge[]>(() => vitePressData.frontmatter.value.badges)
+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">
+      <img :src="badge.src" :alt="badge.alt" />
     </li>
   </ul>
 </template>

.vitepress/theme/components/AppBlogPostHeader.vue

@@ -1,46 +1,48 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watchEffect } from 'vue'
-import { useData } from 'vitepress'
-import { TEAM_MEMBERS_MAP } from '../constants/team'
-import type { TeamMember } from '../constants/team'
+import { computed, onMounted, ref, watchEffect } from "vue";
+import { useData } from "vitepress";
+import { TEAM_MEMBERS_MAP } from "../constants/team";
+import type { TeamMember } from "../constants/team";
 
-const vitePressData = useData()
-const title = computed<string>(() => vitePressData.frontmatter.value.title)
-const lang = computed<string>(() => vitePressData.lang.value)
-const authors = computed(() => (vitePressData.frontmatter.value.authors as TeamMember['id'][]).flatMap((id) => {
-  const member = TEAM_MEMBERS_MAP[id]
+const vitePressData = useData();
+const title = computed<string>(() => vitePressData.frontmatter.value.title);
+const lang = computed<string>(() => vitePressData.lang.value);
+const authors = computed(() =>
+  (vitePressData.frontmatter.value.authors as TeamMember["id"][]).flatMap((id) => {
+    const member = TEAM_MEMBERS_MAP[id];
 
-  if (member) {
-    const { avatar, links, name, title } = member
-    const { link = '' } = links?.find((link) => link.link.startsWith('https://github.com/')) ?? {}
+    if (member) {
+      const { avatar, links, name, title } = member;
+      const { link = "" } = links?.find((link) => link.link.startsWith("https://github.com/")) ?? {};
 
-    return [{ avatar, link, name, title }]
-  }
+      return [{ avatar, link, name, title }];
+    }
 
-  return []
-}))
+    return [];
+  }),
+);
 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 ?? {}
+  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 new Date(date);
   }
-  return null
-})
-const isoDatetime = computed(() => date.value?.toISOString() ?? null)
-const datetime = ref('')
+  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(lang.value, { dateStyle: 'long' }).format(date.value)
+      datetime.value = new Intl.DateTimeFormat(lang.value, { dateStyle: "long" }).format(date.value);
     }
-  })
-})
+  });
+});
 </script>
 
 <template>
@@ -51,7 +53,7 @@ onMounted(() => {
     </p>
     <ul class="authors">
       <li v-for="{ avatar, link, name, title } in authors" :key="name" class="author">
-        <img :src="avatar" :alt="name" class="author-avatar">
+        <img :src="avatar" :alt="name" class="author-avatar" />
         <p class="author-text">
           <a v-if="link" :href="link" target="_blank" class="author-name">{{ name }}</a>
           <span v-else class="author-name">{{ name }}</span>

.vitepress/theme/constants/team.ts

@@ -48,15 +48,10 @@ export const TEAM_MEMBERS: TeamMember[] = [
   },
 ];
 
-export const CORE_TEAM_MEMBERS = TEAM_MEMBERS.filter(
-  ({ type }) => type === "core",
-) as CoreTeamMember[];
-
-export const COMMUNITY_TEAM_MEMBERS = TEAM_MEMBERS.filter(
-  ({ type }) => type === "community",
-) as CommunityTeamMember[];
-
-export const TEAM_MEMBERS_MAP: Record<TeamMember["id"], TeamMember> =
-  Object.fromEntries(
-    TEAM_MEMBERS.map(({ id, ...rest }) => [id, { id, ...rest }]),
-  );
+export const CORE_TEAM_MEMBERS = TEAM_MEMBERS.filter(({ type }) => type === "core") as CoreTeamMember[];
+
+export const COMMUNITY_TEAM_MEMBERS = TEAM_MEMBERS.filter(({ type }) => type === "community") as CommunityTeamMember[];
+
+export const TEAM_MEMBERS_MAP: Record<TeamMember["id"], TeamMember> = Object.fromEntries(
+  TEAM_MEMBERS.map(({ id, ...rest }) => [id, { id, ...rest }]),
+);

.vitepress/theme/index.ts

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

cli/commands/create-blog-post.mts → cli/commands/create-blog-post.ts

@@ -31,10 +31,7 @@ export default defineCommand({
   },
   async run({ args }) {
     const { date, title, slug, author } = args;
-    const isValidDate =
-      /^(?:20\d{2})\-(?:0?[1-9]|1[012])\-(?:0?[1-9]|1\d|2\d|3[0-1])$/.test(
-        date,
-      );
+    const isValidDate = /^(?:20\d{2})\-(?:0?[1-9]|1[012])\-(?:0?[1-9]|1\d|2\d|3[0-1])$/.test(date);
 
     if (!isValidDate) {
       consola.error(`date is invalid: ${date}`);
@@ -77,21 +74,10 @@ authors:
   await fs.writeFile(filePath, content);
 }
 
-async function writeSidebarFile({
-  date,
-  title,
-  slug,
-}: {
-  date: string;
-  title: string;
-  slug: string;
-}) {
+async function writeSidebarFile({ date, title, slug }: { date: string; title: string; slug: string }) {
   const filePath = `${process.cwd()}/.vitepress/sidebar.blog.json`;
   const currentSidebar = await fs.readFile(filePath, "utf8");
-  const sidebar = JSON.parse(currentSidebar) as Record<
-    "text" | "link",
-    string
-  >[];
+  const sidebar = JSON.parse(currentSidebar) as Record<"text" | "link", string>[];
 
   sidebar.unshift({
     text: `${date}<br>${title}`,
@@ -101,16 +87,6 @@ async function writeSidebarFile({
   await fs.writeFile(filePath, JSON.stringify(sidebar, null, 2));
 }
 
-function getBlogPostUrl({
-  date,
-  title,
-  slug,
-}: {
-  date: string;
-  title: string;
-  slug: string;
-}) {
-  return `/blog/${date}-${(slug || title)
-    .toLocaleLowerCase()
-    .replace(/\s+/g, "-")}`;
+function getBlogPostUrl({ date, title, slug }: { date: string; title: string; slug: string }) {
+  return `/blog/${date}-${(slug || title).toLocaleLowerCase().replace(/\s+/g, "-")}`;
 }

cli/index.mts → cli/index.ts

@@ -9,8 +9,7 @@ const main = defineCommand({
     description: "CLI for OXC Documentation",
   },
   subCommands: {
-    "create-blog-post": () =>
-      import("./commands/create-blog-post.mjs").then(_rDefault),
+    "create-blog-post": () => import("./commands/create-blog-post.js").then(_rDefault),
   },
 });
 

package.json

@@ -1,15 +1,16 @@
 {
   "name": "website",
   "version": "0.0.0",
+  "type": "module",
   "private": true,
   "scripts": {
     "prepare": "husky install",
     "dev": "vitepress dev",
     "build": "vitepress build",
     "preview": "vitepress preview",
-    "create-blog-post": "tsx ./cli/index.mts create-blog-post",
+    "fmt": "prettier",
     "typecheck": "tsc",
-    "prettier": "prettier"
+    "create-blog-post": "tsx ./cli/index.ts create-blog-post"
   },
   "dependencies": {
     "vitepress": "1.0.0-rc.25",
@@ -26,7 +27,7 @@
     "typescript": "~5.2.2"
   },
   "lint-staged": {
-    "*.{js,jsx,tsx,ts,css,md,json,mts}": "prettier --write"
+    "*.{js,jsx,tsx,ts,css,md,json,mts}": "pnpm run fmt --write"
   },
   "engines": {
     "node": ">=18.0"