docs: add introduction

tmkx · Apr 19, 2024 · bdf9c22 · bdf9c22
1 parent 54c92e2
commit bdf9c22
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 10 deletions.
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -22,6 +22,7 @@ export default defineConfig({
       {
         text: 'Guide',
         items: [
+          { text: 'Introduction', link: '/guide/introduction' },
           { text: 'Getting Started', link: '/guide/' },
           { text: 'Messaging', link: '/guide/messaging' },
         ],

diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md
@@ -0,0 +1,23 @@
+# Introduction
+
+## Why
+
+WebX Kit is built upon [webpack](https://webpack.js.org/)/[rspack](https://www.rspack.dev/), and the projects I maintain are primarily webpack-based. It's natural to reuse the existing codebase.
+
+::: info
+
+If you enjoy using [Vite](https://vitejs.dev/), consider exploring [WXT](https://wxt.dev/).
+
+If you prefer [Parcel](https://parceljs.org/), explore [Plasmo](https://docs.plasmo.com/).
+
+:::
+
+## Comparison
+
+There are several key differences I want to emphasize:
+
+- WebX Kit supports HMR for content scripts, but this feature is not supported by WXT or Plasmo. This can impact efficiency when developing an injected user interface.
+- WebX Kit has a first-class support for Chrome MV3 only (I have limited energy). If your product requires MV2 or Firefox compatibility, you may need to consider alternative solutions.
+- WebX Kit is still under development. Please report any issues you encounter.
+
+https://wxt.dev/guide/compare.html
diff --git a/docs/guide/messaging.md b/docs/guide/messaging.md
@@ -1,10 +1,10 @@
 # Messaging
 
-## Recommend
+## Recommendation
 
-We recommend communicating using [tRPC](https://trpc.io/), it's type-safe and supports streaming.
+We recommend using [tRPC](https://trpc.io/) for communication. It is type-safe and supports streaming.
 
-Add dependencies:
+1. Add dependencies:
 
 ::: code-group
 
@@ -22,7 +22,9 @@ $ yarn add @webx-kit/messaging @trpc/server@next @trpc/client@next zod
 
 :::
 
-Server(background):
+2. Server(background):
+
+> [Define Routers | tRPC](https://trpc.io/docs/server/routers)
 
 ::: code-group
 
@@ -52,7 +54,9 @@ export type AppRouter = typeof appRouter;
 
 :::
 
-Client(popup/options/content-scripts...):
+3. Client(popup/options/content-scripts...):
+
+> [Set up a tRPC Client | tRPC](https://trpc.io/docs/client/vanilla/setup)
 
 ::: code-group
 
@@ -72,6 +76,7 @@ client.hello.query({ name: 'WebX Kit' }).then((value) => alert(value));
 
 We don't bundle sale specific libraries, you can choose your favorites.
 
-- [webext-bridge](https://github.com/serversideup/webext-bridge) - 💬 Messaging in Web Extensions made easy. Batteries included.
+- [webext-bridge](https://github.com/serversideup/webext-bridge) - Messaging in Web Extensions made easy. Batteries included.
 - [Web Ext Core Messaging](https://webext-core.aklinker1.io/guide/messaging/) - A simpler, type-safe API for sending and recieving messages.
-- [Add a new suggestion](https://github.com/tmkx/webx-kit/issues/new)
+
+[Add suggestions](https://github.com/tmkx/webx-kit/issues/new)
diff --git a/docs/index.md b/docs/index.md
@@ -15,13 +15,13 @@ hero:
 
 features:
   - icon: 💅
-    title: Flexile
+    title: Flexible
     details: Fully customizable, take control of any details
   - icon: 🔥
-    title: Powerful
+    title: Productive
     details: Support HMR for popup/options/content-scripts/...
   - icon: ♻️
-    title: Productive
+    title: Powerful
     details: Live reload for background
   - icon: 📃
     title: Modern