chore: daily development

Author: travzhang

package.json

@@ -20,6 +20,9 @@
   },
   "devDependencies": {
     "@types/node": "22.10.2",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2"
   }
 }

pages/documentation/ecosystem/tools/_meta.ts

@@ -0,0 +1,5 @@
+export default {
+  "canyon-extension": "Canyon Extension",
+    "canyon-uploader": "Canyon Uploader",
+    "canyon-sdk": "Canyon SDK",
+};

pages/documentation/ecosystem/tools/canyon-extension.mdx

@@ -1 +1,14 @@
-# sdk
+# Canyon Extension
+
+Canyon Extension 是一个Chrome插件，用于帮助您在手工测试过程中收集覆盖率数据。
+
+## 安装
+
+点击 [Chrome Web Store](https://chrome.google.com/webstore/detail/canyon-extension/oh)下载安装 Canyon Extension。
+
+## 使用
+
+1. 打开您的项目页面。
+2. 点击 Canyon Extension 的 poup。
+3. 配置上报选项。
+4. 开始测试。

pages/documentation/end-to-end-testing/playwright.mdx

@@ -1,12 +1,10 @@
 # Playwright
 
-## 介绍
-
 Playwright是一个用于浏览器自动化的Node.js库，Canyon提供了一个方法继承，用于在playwright运行过程中收集覆盖率数据。
 
 ## 使用
 
-### 继承playwright的test方法
+### 收集
 
 ```js
 import * as fs from 'fs';
@@ -42,10 +40,9 @@ export const expect = test.expect;
 
 ```
 
-### 覆盖率数据
-
 运行完playwright用例后，会在`.canyon_output`目录下生成覆盖率数据文件。
 
+
 ### 上报
 
 我们提供了一个 [uploader](https://github.com/canyon-project/uploader) 工具，它会扫描`.canyon_output`文件夹，用于将覆盖率数据上报到Canyon平台。

pages/documentation/getting-started/first-coverage.mdx

@@ -2,11 +2,25 @@ import { Steps,Callout,Cards } from 'nextra/components'
 
 # 上报第一个覆盖率数据
 
-## CRN、xtaro项目自动接入
+## 从模板快速启动
 
-为了方便CRN接入，我们与MPAAS平台合作，提供了自动插桩的功能。__无需修改代码。__
+### 部署到 Vercel
+
+您可以先创建自己的 demo 站点，然后通过单击以下链接将其部署到 Vercel:
+
+<a
+  className="mt-3 inline-flex"
+  target="_blank"
+  href="https://vercel.com/new/clone?s=https%3A%2F%2Fgithub.com%2Fcanyon-project%2Fcanyon-babel-template&showOptionalTeamCreation=false"
+>
+  ![](https://vercel.com/button)
+</a>
+
+### 克隆模版
+
+You can also manually fork the
+[template repository](https://github.com/canyon-project/canyon-babel-template).
 
-具体请查看 [CRN接入文档](/documentation/crn-coverage)
 
 ## 以新项目开始
 
@@ -22,7 +36,7 @@ import { Steps,Callout,Cards } from 'nextra/components'
   在[babel](https://babeljs.io/docs/config-files#configuration-file-types)中添加`canyon`和`istanbul`插件。
   ```js {3,4}
   module.exports = {
-    plugins: progress.env.NODE_ENV === 'production' ? [
+    plugins: progress.env.GITLAB_BRANCH === 'production' ? [
       'canyon',
       'istanbul',
     ]:[],
@@ -32,16 +46,11 @@ import { Steps,Callout,Cards } from 'nextra/components'
     插件会拖慢开发环境的编译速度，所以您需要控制插件生效的条件。
   </Callout>
 
-  配置完成后启动项目，在控制打印window.__coverage__。如果跟下图一样那么代码插桩成功。
+  配置完成后启动项目，在控制打印 **window.\_\_coverage\_\_** 。如果跟下图一样那么代码插桩成功。
 
   ![coverage-canyon-console](/static/documentation/getting-started/first-coverage/coverage-canyon-console.png)
 
 
-  <Callout>
-    提示：Canyon插件只会在`NODE_ENV=production`时生效，并且会生成覆盖率map文件至`.canyon_output`中，所以您需要在.gitignore中忽略`.canyon_output`文件夹。
-  </Callout>
-
-
   ### CI 环境变量
 
   在CI环境中，我们需要配置一些环境变量，用于上报覆盖率数据。
@@ -64,15 +73,15 @@ import { Steps,Callout,Cards } from 'nextra/components'
 
 
 
-  3. hit 和 map 数据分离
+  3. hit 和 map 数据分离（可选）
 
   UI自动化会会产生大量覆盖率数据，为了减少数据传输量，我们建议您将 [hit 数据与 map 数据分离](/test)。
 
 
 
   ### 覆盖率数据上报
 
-  覆盖率数据存在于浏览器中，我们提供了以下几种方式上报数据。
+  此时覆盖率数据处与浏览器中，随着用户的操作或者UI自动化case执行，数据会不断积累。我们需要将数据上报到Canyon后端服务。
 
 <Cards>
   <Cards.Card

pages/index.css

@@ -1,5 +1,3 @@
-.nextra-banner-container{
-    height: 70px !important;
-    /*background-color: #fff !important;*/
-    /*color: #333;*/
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+    plugins: {
+        tailwindcss: {},
+    },
+};
+
+export default config;

public/static/documentation/sss/Screenshot 0007-01-02 at 15.53.50.png

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+      "./app/**/*.{js,ts,jsx,tsx,mdx}",
+      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+      "./components/**/*.{js,ts,jsx,tsx,mdx}",
+   
+      // Or if using `src` directory:
+      "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  }