docs: update mdx

Author: sonofmagic

package.json

@@ -38,7 +38,7 @@
     "@commitlint/config-conventional": "^19.6.0",
     "@commitlint/prompt-cli": "^19.6.0",
     "@commitlint/types": "^19.5.0",
-    "@icebreakers/eslint-config": "^0.7.2",
+    "@icebreakers/eslint-config": "^0.7.3",
     "@icebreakers/monorepo": "^0.6.15",
     "@icebreakers/stylelint-config": "^0.1.2",
     "@rollup/pluginutils": "^5.1.3",

packages/tailwindcss-patch/README.md

@@ -1,10 +1,9 @@
 # tailwindcss-patch
 
-\[[中文(zh-cn)](./README-cn.md)\]
-
 get tailwindcss context at runtime ! extract all classes into file!
 
 - [tailwindcss-patch](#tailwindcss-patch)
+  - [Docs](#docs)
   - [Setup](#setup)
   - [Usage](#usage)
   - [Cli](#cli)
@@ -16,6 +15,10 @@ get tailwindcss context at runtime ! extract all classes into file!
 
 > Nodejs version should >= `16.6.0`
 
+## Docs
+
+[mangle.icebreaker.top](https://mangle.icebreaker.top)
+
 ## Setup
 
 1. Install package

packages/unplugin-tailwindcss-mangle/README.md

@@ -7,6 +7,7 @@ It is recommended to read the documentation of [tailwindcss-patch](https://githu
 > Now Support `vite` and `webpack`
 
 - [unplugin-tailwindcss-mangle](#unplugin-tailwindcss-mangle)
+  - [Docs](#docs)
   - [Features](#features)
   - [Usage](#usage)
     - [1. Install Package](#1-install-package)
@@ -21,6 +22,10 @@ It is recommended to read the documentation of [tailwindcss-patch](https://githu
   - [Notice](#notice)
   - [Migration form v1 to v2](#migration-form-v1-to-v2)
 
+## Docs
+
+[mangle.icebreaker.top](https://mangle.icebreaker.top)
+
 ## Features
 
 ```html

pnpm-lock.yaml

@@ -0,0 +1,12 @@
+export default {
+  'index': 'Homepage',
+  '---': {
+    type: 'separator',
+  },
+  'patch': '1.Patch',
+  'mangle': '2.Mangle',
+  'config': '3.Config',
+  'recommend': {
+    display: 'hidden',
+  },
+}

website/pages/_meta.js

@@ -0,0 +1 @@
+# TODO

website/pages/en/_meta.js

@@ -1,6 +1,29 @@
+
+import { Callout } from 'nextra/components'
+
 # Welcome to Tailwindcss-mangle
- 
-# Step
 
-1. [Patch](./patch)
-2. [Mangle](./mangle)
+## What is tailwindcss-mangle?
+
+This is a project for compressing and obfuscating the class names generated by `tailwindcss`.
+
+The purpose of creating this library is to prevent easy copying and plagiarism of pages developed using `tailwindcss`. 
+
+By using `tailwindcss-mangle`, it adds a bit of "cost" for potential copycats.
+
+## How to use?
+
+Currently, the usage process is mainly divided into 2 steps:
+
+1. `Patch`
+2. `Mangle`
+
+## Patch
+
+This step is used to apply a patch to `tailwindcss` that exposes the context, so it can extract the `Token` it uses internally.
+
+Eventually, it exports these as a `Json` file.
+
+## Mangle
+
+This step reads the `Json` exported from `Patch` and escapes all the string literals and template strings corresponding to the `Token`.

website/pages/en/config.mdx

@@ -1,68 +1,49 @@
-# unplugin-tailwindcss-mangle
+import { Callout } from 'nextra/components'
 
-mangle tailwindcss utilities plugin
+# 2. Mangle
 
-It is recommended to read the documentation of [tailwindcss-patch](https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/tailwindcss-patch) first, `unplugin-tailwindcss-mangle` depends on this tool.
-
-> Now Support `vite` and `webpack`
-
-- [unplugin-tailwindcss-mangle](#unplugin-tailwindcss-mangle)
-  - [Features](#features)
-  - [Usage](#usage)
-    - [1. Install Package](#1-install-package)
-    - [2. Run install script](#2-run-install-script)
-    - [3. add `prepare` script in your `package.json`](#3-add-prepare-script-in-your-packagejson)
-    - [4. Run extract command](#4-run-extract-command)
-    - [5. Register this plugin](#5-register-this-plugin)
-      - [vite](#vite)
-      - [webpack](#webpack)
-      - [Nuxt 3](#nuxt-3)
-  - [Options](#options)
-  - [Notice](#notice)
-  - [Migration form v1 to v2](#migration-form-v1-to-v2)
-
-## Features
+## Feature Overview
 
 ```html
-<!-- before -->
+<!-- Before -->
 <div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"></div>
-<!-- after -->
+<!-- After -->
 <div class="tw-g tw-h tw-i tw-d tw-e tw-j tw-k tw-l"></div>
 ```
 
 ## Usage
 
-### 1. Install Package
+### 1. Install the package
 
 ```sh
-<npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch
+npm i -D unplugin-tailwindcss-mangle tailwindcss-patch
 ```
 
-### 2. Run install script
+### 2. Run the installation script
 
 ```sh
 npx tw-patch install
 ```
 
-### 3. add `prepare` script in your `package.json`
+### 3. Add the `prepare` script in `package.json`
 
 ```json
   "scripts": {
     "prepare": "tw-patch install"
   },
 ```
 
-### 4. Run extract command
+### 4. Run the extraction command
 
-cd to the same directory as `package.json` and `tailwind.config.js`, then run:
+Navigate to the same directory as your `package.json` and `tailwind.config.js`, then run:
 
 ```sh
 npx tw-patch extract
 ```
 
 > See more options in [tailwindcss-patch](https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/tailwindcss-patch)
 
-Then there will generate a json file: `.tw-patch/tw-class-list.json`
+This will generate a JSON file: `.tw-patch/tw-class-list.json`
 
 ### 5. Register this plugin
 
@@ -71,34 +52,34 @@ Then there will generate a json file: `.tw-patch/tw-class-list.json`
 ```js
 import vue from '@vitejs/plugin-vue'
 import utwm from 'unplugin-tailwindcss-mangle/vite'
-// for example: vue vite project
+// For example: vue vite project
 import { defineConfig } from 'vite'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), utwm()]
 })
 ```
 
-then run script:
+Then run the script:
 
 ```sh
-# generate bundle
+# Build the package
 yarn build
-# preview
+# Preview
 yarn preview
 ```
 
-You will see all class was renamed to `tw-*`
+You will see that all class names are renamed to `tw-*`
 
 #### webpack
 
 ```js
 // esm
 import { webpackPlugin as utwm } from 'unplugin-tailwindcss-mangle'
-// or cjs
+// Or cjs
 const utwm = require('unplugin-tailwindcss-mangle/webpack')
-// use this webpack plugin
-// for example next.config.js
+// Use this webpack plugin
+// For example in next.config.js
 const { defineConfig } = require('@vue/cli-service')
 // vue.config.js
 module.exports = defineConfig({
@@ -109,60 +90,37 @@ module.exports = defineConfig({
     }
   }
 })
-
 ```
 
-#### Nuxt 3
+## Notes
 
-```ts
-import nuxtPlugin from 'unplugin-tailwindcss-mangle/nuxt'
-export default defineNuxtConfig({
-  // ...
-  // https://github.com/nuxt/nuxt/issues/20428
-  // you must set this option to false to enable vite extract css
-  experimental: {
-    inlineSSRStyles: false
-  },
-  modules: [
-    [
-      nuxtPlugin,
-      {
-        // options
-      }
-    ]
-  ]
-})
-```
+This plugin only transforms utility class names that contain `-` or `:`, such as `w-32`, `before:h-[300px]`, `after:dark:via-[#0141ff]/40`. Some class names like `flex`, `relative` will not be transformed.
 
-## Options
+The plugin **traverses** all `html class` attributes and `js` string literals to find the utility classes generated by `tailwindcss`.
 
-[types.ts](src/types.ts)
+Transforming string literals like the following in `js` is dangerous:
 
-## Notice
+```js
+const innerHTML = 'i\'m flex and relative and grid'
+document.body.innerHTML = innerHTML
+```
 
-By default, only the build will take effect. Due to some restrictions, it cannot take effect in the development mode.
+Thus, only strings containing `-` or `:` will be transformed.
 
-This plugin only transform those classes which name contain `-` or `:`, like `w-32`, `before:h-[300px]`,`after:dark:via-[#0141ff]/40`. some classes like `flex`,`relative` will not be mangled.
+Additionally, the plugin provides the `twIgnore` option, which allows some strings to be skipped during the `Mangle`.
 
-because plugin will **traverse** all `html class attr` and `js StringLiteral` to find `utilities` generated by `tailwindcss`.
+For example:
 
-it's dangerous to mangle some `js StringLiteral` like:
+### Input
 
 ```js
-const innerHTML = 'i\'m flex and relative and grid'
-document.body.innerHTML = innerHTML
+const twIgnore = String.raw;
+const className = `${twIgnore`gap-y-4`} bg-zinc-800/30`;
 ```
 
-so only strings with `-` or `:` will be transformed.
-
-## Migration form v1 to v2
+### Output
 
-```diff
-// vite
-- import { vitePlugin } from 'unplugin-tailwindcss-mangle'
-+ import utwm from 'unplugin-tailwindcss-mangle/vite'
-
-// webpack
-- import { webpackPlugin } from 'unplugin-tailwindcss-mangle'
-+ import utwm from 'unplugin-tailwindcss-mangle/webpack'
+```js
+const twIgnore = String.raw;
+const className = `${twIgnore`gap-y-4`} tw-a`;
 ```