chore(workflow): enable code spell checker (#896)

.github/ISSUE_TEMPLATE/1-bug-report.en-US.yml

@@ -50,6 +50,6 @@ body:
       placeholder: |
         for example:
         1. execute `yarn dev`
-        2. find `xxx` error message in the console
+        2. find the error message in the console
     validations:
       required: true

.github/ISSUE_TEMPLATE/3-bug-report.zh-Hans.yml

@@ -50,6 +50,6 @@ body:
       placeholder: |
         比如：
         1. 执行 `yarn dev`
-        2. 控制台出现 `xxx` 异常信息
+        2. 控制台出现异常信息
     validations:
       required: true

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["biomejs.biome", "esbenp.prettier-vscode"]
+  "recommendations": ["biomejs.biome", "esbenp.prettier-vscode", "streetsidesoftware.code-spell-checker"]
 }

CONTRIBUTING.md

@@ -204,7 +204,7 @@ The format of PR titles follow Conventional Commits.
 An example:
 
 ```
-feat(plugin-swc): Add `xxx` config
+feat(plugin-swc): Add `myOption` config
 ^    ^    ^
 |    |    |__ Subject
 |    |_______ Scope

cspell.config.cjs

@@ -0,0 +1,31 @@
+const { banWords } = require('cspell-ban-words');
+
+module.exports = {
+  version: '0.2',
+  language: 'en',
+  files: ['**/*.{ts,tsx,js,jsx,md,mdx}'],
+  enableFiletypes: ['mdx'],
+  ignoreRegExpList: [
+    // ignore markdown anchors such as [fooBar](#foobar)
+    '#.*?\\)',
+  ],
+  ignorePaths: [
+    'dist',
+    'dist-*',
+    'compiled',
+    'coverage',
+    'doc_build',
+    'playwright-report',
+    'node_modules',
+    'pnpm-lock.yaml',
+  ],
+  flagWords: banWords,
+  dictionaries: ['dictionary'],
+  dictionaryDefinitions: [
+    {
+      name: 'dictionary',
+      path: './scripts/dictionary.txt',
+      addWords: true,
+    },
+  ],
+};

package.json

@@ -8,6 +8,7 @@
     "bump": "modern bump",
     "pre": "modern pre",
     "prepare": "npm run build && husky install",
+    "check-spell": "npx cspell",
     "dev": "cross-env NX_DAEMON=false NX_REJECT_UNKNOWN_LOCAL_CACHE=0 nx run-many -t dev --exclude @rspress-fixture/*",
     "build": "cross-env NX_DAEMON=false NX_REJECT_UNKNOWN_LOCAL_CACHE=0 nx run-many -t build --exclude @rspress-fixture/*",
     "test": "pnpm test:unit && pnpm test:e2e",
@@ -52,19 +53,20 @@
     "@playwright/test": "1.33.0",
     "@types/cross-spawn": "^6.0.2",
     "@types/fs-extra": "^11.0.1",
-    "cross-spawn": "^7.0.3",
     "cross-env": "^7.0.3",
+    "cross-spawn": "^7.0.3",
+    "cspell-ban-words": "^0.0.3",
     "execa": "8.0.1",
     "fs-extra": "^11.1.1",
     "get-port": "5.0.0",
     "husky": "^8.0.0",
     "lint-staged": "~13.1.0",
+    "nx": "17.0.2",
     "playwright": "1.33.0",
+    "prettier": "3.2.2",
     "tree-kill": "^1.2.2",
     "ts-node": "^10.9.1",
-    "vitest": "0.34.1",
-    "nx": "17.0.2",
-    "prettier": "3.2.2"
+    "vitest": "0.34.1"
   },
   "publishConfig": {
     "access": "public",

packages/core/README.md

@@ -1,3 +1,3 @@
 # @rspress/core
 
-The core pacakge for [Rspress](https://rspress.dev).
+The core package for [Rspress](https://rspress.dev).

packages/core/src/node/mdx/rehypePlugins/codeMeta.ts

@@ -13,7 +13,7 @@ export const rehypePluginCodeMeta: Plugin<[], Root> = () => {
         node.children[0].tagName === 'code'
       ) {
         const codeNode = node.children[0];
-        // language-xxx
+        // language-foo
         const meta = (codeNode.data?.meta as string) || '';
         codeNode.properties.meta = meta;
       }

packages/core/src/node/route/RouteService.ts

@@ -280,15 +280,15 @@ ${routeMeta
      *   route: '/',
      *   element: jsx(Route0),
      *   preload: Route0.preload,
-     *   filePath: '/Users/xxx/xxx/index.md'
+     *   filePath: '/Users/foo/bar/index.md'
      * }
      *
      * For client render, example:
      * {
      *   route: '/',
      *   element: jsx(Route0.default),
      *   preload: Route0.preload,
-     *   filePath: '/Users/xxx/xxx/index.md'
+     *   filePath: '/Users/foo/bar/index.md'
      * }
      */
     return `{ path: '${route.routePath}', element: React.createElement(${component}), filePath: '${route.relativePath}', preload: ${preload}, lang: '${route.lang}', version: '${route.version}' }`;

packages/core/src/node/runtimeModule/globalStyles.ts

@@ -10,7 +10,7 @@ export async function globalStylesVMPlugin(context: FactoryContext) {
     const source = config.globalStyles;
     const styleContent = await fs.readFile(source, 'utf-8');
 
-    // Patch --modern-xxx, .modern-xxx global name
+    // Patch --modern-abc, .modern-abc global name
     const patchedStyleContent = styleContent
       .replace(/--modern-/g, '--rp-')
       .replace(/\.modern-doc/g, '.rspress')

packages/core/src/node/runtimeModule/siteData/index.ts

@@ -9,7 +9,7 @@ import { TEMP_DIR, isProduction } from '@/node/constants';
 
 // How can we let the client runtime access the `indexHash`?
 // We can only do something after the Rspack build process becuase the index hash is generated within Rspack build process.There are two ways to do this:
-// 1. insert window.__INDEX_HASH__ = 'xxx' into the html template manually
+// 1. insert window.__INDEX_HASH__ = 'foo' into the html template manually
 // 2. replace the `__INDEX_HASH__` placeholder in the html template with the real index hash after Rspack build
 export const indexHash = '';
 

packages/core/src/node/searchIndex.ts

@@ -12,7 +12,7 @@ export async function writeSearchIndex(config: UserConfig) {
     return;
   }
   const cwd = process.cwd();
-  // get all search index files, format is `${SEARCH_INDEX_NAME}.xxx.${hash}.json`
+  // get all search index files, format is `${SEARCH_INDEX_NAME}.foo.${hash}.json`
   const searchIndexFiles = await fs.readdir(TEMP_DIR);
   const outDir = config?.outDir ?? join(cwd, OUTPUT_DIR);
 

packages/document/docs/en/api/config/config-theme.mdx

@@ -328,7 +328,7 @@ export default defineConfig({
       {
         icon: 'wechat',
         mode: 'text',
-        content: 'wechat: xxx',
+        content: 'wechat: foo',
       },
       {
         icon: 'qq',
@@ -374,19 +374,17 @@ If you need to customize the icon, you can pass in an object with `svg attribute
 import { defineConfig } from 'rspress/config';
 
 export default defineConfig({
-      themeConfig: {
-      socialLinks: [
-        {
-          icon: {
-            svg: '<svg>xxx</svg>',
-          },
-          mode: 'link',
-          content: 'https://github.com/',
+  themeConfig: {
+    socialLinks: [
+      {
+        icon: {
+          svg: '<svg>foo</svg>',
         },
-      ],
-    },
-  }
-  plugins: [docTools()],·
+        mode: 'link',
+        content: 'https://github.com/',
+      },
+    ],
+  },
 });
 ```
 

packages/document/docs/en/plugin/system/plugin-api.mdx

@@ -50,7 +50,7 @@ import { RspressPlugin } from '@rspress/shared';
 
 export function pluginForDoc(): RspressPlugin {
   // component path
-  const componentPath = path.join(__dirname, 'xxx.tsx');
+  const componentPath = path.join(__dirname, 'foo.tsx');
   return {
     // plugin name
     name: 'plugin-comp',
@@ -68,7 +68,7 @@ import { RspressPlugin } from '@rspress/shared';
 
 export function pluginForDoc(): RspressPlugin {
   // component path
-  const componentPath = path.join(__dirname, 'xxx.tsx');
+  const componentPath = path.join(__dirname, 'foo.tsx');
   return {
     // plugin name
     name: 'plugin-comp',
@@ -364,17 +364,17 @@ export function pluginForDoc(): RspressPlugin {
       };
       const data = await fetchSomeData();
       return {
-        'virtual-xxx': `export default ${JSON.stringify(data)}`,
+        'virtual-foo': `export default ${JSON.stringify(data)}`,
       };
     },
   };
 }
 ```
 
-In this way, you can use the `virtual-xxx` module in the runtime component:
+In this way, you can use the `virtual-foo` module in the runtime component:
 
 ```jsx
-import myData from 'virtual-xxx';
+import myData from 'virtual-foo';
 
 export function MyComponent() {
   return <div>{myData.a}</div>;

packages/document/docs/zh/api/config/config-theme.mdx

@@ -314,7 +314,7 @@ export default defineConfig({
       {
         icon: 'wechat',
         mode: 'text',
-        content: '微信号xxx',
+        content: '微信号 foo',
       },
       {
         icon: 'qq',
@@ -354,7 +354,7 @@ export type SocialLinkIcon =
   | { svg: string };
 ```
 
-如果需要自定义 icon，可以通过传入一个带有`svg属性`的对象，svg 的值为自定义图标内容即可，比如：
+如果需要自定义 icon，可以通过传入一个带有 `svg 属性` 的对象，svg 的值为自定义图标内容即可，比如：
 
 ```js
 import { defineConfig } from 'rspress/config';
@@ -364,7 +364,7 @@ export default defineConfig({
     socialLinks: [
       {
         icon: {
-          svg: 'svg图标内容',
+          svg: '<svg>foo</svg>',
         },
         mode: 'link',
         content: 'https://github.com/',

packages/document/docs/zh/plugin/system/plugin-api.mdx

@@ -51,7 +51,7 @@ import { RspressPlugin } from '@rspress/shared';
 
 export function pluginForDoc(): RspressPlugin {
   // 组件路径
-  const componentPath = path.join(__dirname, 'xxx.tsx');
+  const componentPath = path.join(__dirname, 'foo.tsx');
   return {
     // 插件名称
     name: 'plugin-comp',
@@ -69,7 +69,7 @@ import { RspressPlugin } from '@rspress/shared';
 
 export function pluginForDoc(): RspressPlugin {
   // component path
-  const componentPath = path.join(__dirname, 'xxx.tsx');
+  const componentPath = path.join(__dirname, 'foo.tsx');
   return {
     // plugin name
     name: 'plugin-comp',
@@ -372,17 +372,17 @@ export function pluginForDoc(): RspressPlugin {
       };
       const data = await fetchSomeData();
       return {
-        'virtual-xxx': `export default ${JSON.stringify(data)}`,
+        'virtual-foo': `export default ${JSON.stringify(data)}`,
       };
     },
   };
 }
 ```
 
-这样你就可以在运行时组件中使用 `virtual-xxx` 模块了：
+这样你就可以在运行时组件中使用 `virtual-foo` 模块了：
 
 ```jsx
-import myData from 'virtual-xxx';
+import myData from 'virtual-foo';
 
 export function MyComponent() {
   return <div>{myData.a}</div>;

packages/plugin-api-docgen/src/index.ts

@@ -42,7 +42,7 @@ export function pluginApiDocgen(options?: PluginOptions): RspressPlugin {
       });
     },
     async modifySearchIndexData(pages) {
-      // Update the search index of module doc which includes `<API moduleName="xxx" />` and `<API moduleName="xxx" ></API>
+      // Update the search index of module doc which includes `<API moduleName="foo" />` and `<API moduleName="foo" ></API>
       const apiCompRegExp = /(<API\s+moduleName=['"](\S+)['"]\s*(.*)?\/>)|(<API\s+moduleName=['"](\S+)['"]\s*(.*)?>(.*)?<\/API>)/;
       await Promise.all(
         pages.map(async page => {

packages/plugin-container-syntax/src/remarkPlugin.ts

@@ -1,11 +1,11 @@
 /**
  * 🚀 This plugin is used to support container directive in unified.
  * Taking into account the compatibility of the VuePress/Docusaurus container directive, current remark plugin in unified ecosystem only supports the following syntax:
- * ::: tip {title="xxx"}
+ * ::: tip {title="foo"}
  * This is a tip
  * :::
  * But the following syntax is not supported:
- * ::: tip xxx
+ * ::: tip foo
  * This is a tip
  * :::
  * In fact, the syntax is usually used in SSG Frameworks, such as VuePress/Docusaurus.
@@ -52,7 +52,7 @@ const parseTitle = (rawTitle = '', isMDX = false) => {
  * Construct the DOM structure of the container directive.
  * For example:
  *
- * ::: tip {title="xxx"}
+ * ::: tip {title="foo"}
  * This is a tip
  * :::
  *
@@ -137,19 +137,19 @@ function transformer(tree: Root) {
         continue;
       }
       const [, type, rawTitle] = match;
-      // In .md, we can get :::tip{title="xxx"} in the first text node
-      // In .mdx, we get :::tip in first node and {title="xxx"} in second node
+      // In .md, we can get :::tip{title="foo"} in the first text node
+      // In .mdx, we get :::tip in first node and {title="foo"} in second node
       let title = parseTitle(rawTitle);
-      // :::tip{title="xxx"}
+      // :::tip{title="foo"}
       const titleExpressionNode =
         // @ts-expect-error mdxTextExpression is not defined in mdast
         node.children[1] && node.children[1].type === 'mdxTextExpression'
           ? node.children[1]
           : null;
-      // Handle the case of `::: tip {title="xxx"}`
+      // Handle the case of `::: tip {title="foo"}`
       if (titleExpressionNode) {
         title = parseTitle((titleExpressionNode as Literal).value, true);
-        // {title="xxx"} is not a part of the content, So we need to remove it
+        // {title="foo"} is not a part of the content, So we need to remove it
         node.children.splice(1, 1);
       }
       if (!DIRECTIVE_TYPES.includes(type as DirectiveType)) {

packages/plugin-container-syntax/tests/__snapshots__/index.test.ts.snap

@@ -13,30 +13,30 @@ This is a tip</p></div></div>
 <p>12312</p>"
 `;
 
-exports[`remark-container > Use {title="xxx"} as title 1`] = `"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">Cutsom title</div><div class=\\"rspress-directive-content\\"><p>This is a tip.</p></div></div>"`;
+exports[`remark-container > Use {title="foo"} as title 1`] = `"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">Custom title</div><div class=\\"rspress-directive-content\\"><p>This is a tip.</p></div></div>"`;
 
-exports[`remark-container > Use {title='xxx'} as title 1`] = `"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">Cutsom title</div><div class=\\"rspress-directive-content\\"><p>This is a tip.</p></div></div>"`;
+exports[`remark-container > Use {title='foo'} as title 1`] = `"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">Custom title</div><div class=\\"rspress-directive-content\\"><p>This is a tip.</p></div></div>"`;
 
-exports[`remark-container > Use {title=xxx} as title 1`] = `"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">Cutsom title</div><div class=\\"rspress-directive-content\\"><p>This is a tip.</p></div></div>"`;
+exports[`remark-container > Use {title=foo} as title 1`] = `"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">Custom title</div><div class=\\"rspress-directive-content\\"><p>This is a tip.</p></div></div>"`;
 
 exports[`remark-container > With a new line after the start position of container 1`] = `"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">TIP</div><div class=\\"rspress-directive-content\\"><p>This is a tip</p></div></div>"`;
 
 exports[`remark-container > With block quote in container 1`] = `
-"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">TIP</div><div class=\\"rspress-directive-content\\"><p>This is a tip with <code>code</code> and <a href=\\"xxx\\">link</a> some text</p><blockquote>
+"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">TIP</div><div class=\\"rspress-directive-content\\"><p>This is a tip with <code>code</code> and <a href=\\"foo\\">link</a> some text</p><blockquote>
 <p>This is a quote</p>
 </blockquote></div></div>"
 `;
 
 exports[`remark-container > With code block in container 1`] = `
-"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">TIP</div><div class=\\"rspress-directive-content\\"><p>This is a tip with <code>code</code> and <a href=\\"xxx\\">link</a> some text</p><pre><code class=\\"language-js\\">const a = 1;
+"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">TIP</div><div class=\\"rspress-directive-content\\"><p>This is a tip with <code>code</code> and <a href=\\"foo\\">link</a> some text</p><pre><code class=\\"language-js\\">const a = 1;
 </code></pre></div></div>"
 `;
 
 exports[`remark-container > With link, inlineCode, img, list in container 1`] = `
-"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">TIP</div><div class=\\"rspress-directive-content\\"><p>This is a tip with <code>code</code> and <a href=\\"xxx\\">link</a> some text</p><ul>
+"<div class=\\"rspress-directive tip\\"><div class=\\"rspress-directive-title\\">TIP</div><div class=\\"rspress-directive-content\\"><p>This is a tip with <code>code</code> and <a href=\\"foo\\">link</a> some text</p><ul>
 <li>list 1</li>
 <li>list 2</li>
-</ul><p><img src=\\"xxx\\" alt=\\"img\\"></p></div></div>"
+</ul><p><img src=\\"foo\\" alt=\\"img\\"></p></div></div>"
 `;
 
 exports[`remark-container > With new line before the end position of container 1`] = `