chore: add website

sonofmagic · sonofmagic · commit f0bbe85bf3fb · 2024-10-27T18:51:22.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -31,4 +31,5 @@ yarn-error.log*
 
 # turbo
 .turbo
-dist
+dist
+.nuxt
diff --git a/netlify.toml b/netlify.toml
@@ -9,3 +9,6 @@ NODE_VERSION = "20"
 from = "/*"
 to = "/index.html"
 status = 200
+
+[context.deploy-preview]
+ignore = "exit 0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -2,3 +2,4 @@ packages:
   - 'apps/*'
   - 'packages/*'
   - 'scripts/*'
+  - website
diff --git a/website/.tw-patch/tw-class-list.json b/website/.tw-patch/tw-class-list.json
@@ -0,0 +1 @@
+[]
diff --git a/website/next-env.d.ts b/website/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/website/next.config.mjs b/website/next.config.mjs
@@ -0,0 +1,12 @@
+import nextra from 'nextra'
+
+const withNextra = nextra({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.tsx',
+})
+
+export default withNextra({
+  sassOptions: {
+    silenceDeprecations: ['legacy-js-api'],
+  },
+})
diff --git a/website/package.json b/website/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "website",
+  "type": "module",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "tw-extract": "tw-patch extract"
+  },
+  "dependencies": {
+    "next": "15.0.1",
+    "nextra": "^3.1.1",
+    "nextra-theme-docs": "^3.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}
diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx
@@ -0,0 +1,5 @@
+import './globals.scss'
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
diff --git a/website/pages/_meta.js b/website/pages/_meta.js
@@ -0,0 +1,5 @@
+export default {
+  index: 'Homepage',
+  patch: '1.Patch',
+  mangle: '2.Mangle',
+}
diff --git a/website/pages/globals.scss b/website/pages/globals.scss
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/website/pages/index.mdx b/website/pages/index.mdx
@@ -0,0 +1,6 @@
+# Welcome to Tailwindcss-mangle
+ 
+# Step
+
+1. [Patch](./patch)
+2. [Mangle](./mangle)
diff --git a/website/pages/mangle.mdx b/website/pages/mangle.mdx
@@ -0,0 +1,168 @@
+# unplugin-tailwindcss-mangle
+
+mangle tailwindcss utilities plugin
+
+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
+
+```html
+<!-- before -->
+<div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"></div>
+<!-- after -->
+<div class="tw-g tw-h tw-i tw-d tw-e tw-j tw-k tw-l"></div>
+```
+
+## Usage
+
+### 1. Install Package
+
+```sh
+<npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch
+```
+
+### 2. Run install script
+
+```sh
+npx tw-patch install
+```
+
+### 3. add `prepare` script in your `package.json`
+
+```json
+  "scripts": {
+    "prepare": "tw-patch install"
+  },
+```
+
+### 4. Run extract command
+
+cd to the same directory as `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`
+
+### 5. Register this plugin
+
+#### vite
+
+```js
+import vue from '@vitejs/plugin-vue'
+import utwm from 'unplugin-tailwindcss-mangle/vite'
+// for example: vue vite project
+import { defineConfig } from 'vite'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), utwm()]
+})
+```
+
+then run script:
+
+```sh
+# generate bundle
+yarn build
+# preview
+yarn preview
+```
+
+You will see all class was renamed to `tw-*`
+
+#### webpack
+
+```js
+// esm
+import { webpackPlugin as utwm } from 'unplugin-tailwindcss-mangle'
+// or cjs
+const utwm = require('unplugin-tailwindcss-mangle/webpack')
+// use this webpack plugin
+// for example next.config.js
+const { defineConfig } = require('@vue/cli-service')
+// vue.config.js
+module.exports = defineConfig({
+  transpileDependencies: true,
+  configureWebpack: (config) => {
+    if (process.env.NODE_ENV === 'production') {
+      config.plugins.push(utwm())
+    }
+  }
+})
+
+```
+
+#### Nuxt 3
+
+```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
+      }
+    ]
+  ]
+})
+```
+
+## Options
+
+[types.ts](src/types.ts)
+
+## Notice
+
+By default, only the build will take effect. Due to some restrictions, it cannot take effect in the development mode.
+
+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.
+
+because plugin will **traverse** all `html class attr` and `js StringLiteral` to find `utilities` generated by `tailwindcss`.
+
+it's dangerous to mangle some `js StringLiteral` like:
+
+```js
+const innerHTML = 'i\'m flex and relative and grid'
+document.body.innerHTML = innerHTML
+```
+
+so only strings with `-` or `:` will be transformed.
+
+## Migration form v1 to v2
+
+```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'
+```
diff --git a/website/pages/patch.mdx b/website/pages/patch.mdx
@@ -0,0 +1,118 @@
+# tailwindcss-patch
+
+{/* \[[中文(zh-cn)](./README-cn.md)\] */}
+
+get tailwindcss context at runtime ! extract all classes into file!
+
+- [tailwindcss-patch](#tailwindcss-patch)
+  - [Setup](#setup)
+  - [Usage](#usage)
+  - [Cli](#cli)
+    - [Extract all class into a json](#extract-all-class-into-a-json)
+  - [Nodejs API](#nodejs-api)
+  - [Config](#config)
+    - [Init Config File](#init-config-file)
+  - [What's next?](#whats-next)
+
+> Nodejs version should >= `16.6.0`
+
+## Setup
+
+1. Install package
+
+```sh
+<yarn|npm|pnpm> add -D tailwindcss-patch
+```
+
+2. Patch tailwindcss
+
+```sh
+npx tw-patch install
+```
+
+3. Add `prepare` script (keeps patch persisted after npm install)
+
+`package.json`
+
+```json
+{
+  /* ... */
+  "scripts": {
+    "prepare": "tw-patch install"
+  }
+}
+```
+
+## Usage
+
+## Cli
+
+### Extract all class into a json
+
+```sh
+npx tw-patch extract
+```
+
+default there will be a json in `.tw-patch/tw-class-list.json` in your project.
+
+you can custom this behavior by config `tailwindcss-mangle.config.ts`
+
+## Nodejs API
+
+```js
+import { TailwindcssPatcher } from 'tailwindcss-patch'
+
+const twPatcher = new TailwindcssPatcher(/* options */)
+// do patch
+twPatcher.patch()
+// get all contexts at runtime
+twPatcher.getContexts()
+// get all class generated by tailwindcss utilities
+twPatcher.getClassSet()
+```
+
+## Config
+
+### Init Config File
+
+```sh
+npx tw-patch init
+```
+
+Then there will be a ts file called `tailwindcss-mangle.config.ts` exist in your `cwd`.
+
+The config as follows:
+
+```ts
+import { defineConfig } from 'tailwindcss-patch'
+
+export default defineConfig({})
+```
+
+you can custom `tw-patch` behavior by `patch` option:
+
+```ts
+import { defineConfig } from 'tailwindcss-patch'
+
+export default defineConfig({
+  patch: {
+    output: {
+      filename: 'xxx.json',
+      loose: true,
+      removeUniversalSelector: true
+    },
+    tailwindcss: {
+      config: 'path/to/your-tailwind.config.js',
+      cwd: 'project/cwd'
+    }
+  }
+})
+```
+
+## What's next?
+
+At the moment I just extracted all the tool classes to actually get the context of `tailwindcss` to analyze. You can add more functionality to this project by giving me `issue` or `pr`.
+
+Of course, the extracted `JSON` isn't just for you to look at. You can analyze it, and I use it as a data file for my `tailwindcss-mangle`.
+
+The `tailwindcss-mangle` itself is an obfuscation tool to obfuscate the tools generated by `tailwindcss`, see the next article for more details on how to use it.
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './pages/**/*.{js,jsx,ts,tsx,md,mdx}',
+    './components/**/*.{js,jsx,ts,tsx,md,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/website/theme.config.tsx b/website/theme.config.tsx
@@ -0,0 +1,9 @@
+import type { DocsThemeConfig } from 'nextra-theme-docs'
+
+export default {
+  logo: <span>Tailwindcss-mangle Documentation</span>,
+  project: {
+    link: 'https://github.com/sonofmagic/tailwindcss-mangle',
+  },
+  docsRepositoryBase: 'https://github.com/sonofmagic/tailwindcss-mangle/tree/main/website',
+} as DocsThemeConfig
diff --git a/website/tsconfig.json b/website/tsconfig.json

-Original file line number
+Diff line change
 # turbo
 .turbo
 -dist
 +dist
 +.nuxt