init

maomincoding · maomincoding · commit ea0a4f7b60e0 · 2025-08-22T23:49:59.000+08:00
diff --git a/doc/.vitepress/config/en.mjs b/doc/.vitepress/config/en.mjs
@@ -2,7 +2,7 @@ import { defineConfig } from 'vitepress';
 
 export const en = defineConfig({
   lang: 'en-US',
-  description: 'A approachable, fast, flexible and lightweight JavaScript library',
+  description: 'A approachable, fast, flexible JavaScript library',
   themeConfig: {
     nav: [
       {
diff --git a/doc/.vitepress/config/shared.mjs b/doc/.vitepress/config/shared.mjs
@@ -33,7 +33,7 @@ export const shared = defineConfig({
     ['meta', { name: 'theme-color', content: '#6c2de4' }],
     ['meta', { property: 'og:type', content: 'website' }],
     ['meta', { property: 'og:locale', content: 'en' }],
-    ['meta', { property: 'og:title', content: 'Mettle | A approachable, fast, flexible and lightweight JavaScript library' }],
+    ['meta', { property: 'og:title', content: 'Mettle | A approachable, fast, flexible JavaScript library' }],
     ['meta', { property: 'og:site_name', content: 'Mettle' }],
     ['meta', { property: 'og:image', content: '/mettle-doc/logo.png' }],
     ['meta', { property: 'og:url', content: 'https://vitepress.dev/' }],
diff --git a/doc/.vitepress/config/zh.mjs b/doc/.vitepress/config/zh.mjs
@@ -2,7 +2,7 @@ import { defineConfig } from 'vitepress';
 
 export const zh = defineConfig({
   lang: 'zh-Hans',
-  description: '一个易用、快速、灵活且轻量级的JavaScript库',
+  description: '一个易用、快速、灵活的JavaScript库',
   themeConfig: {
     nav: [
       {
diff --git a/doc/.vitepress/theme/cutom.css b/doc/.vitepress/theme/cutom.css
@@ -10,17 +10,6 @@
     --vp-c-indigo-3: var(--color);
 }
 
-@media (min-width: 640px) {
-    :root {
-        --vp-home-hero-image-filter: blur(150px);
-    }
-}
-
-@media (min-width: 960px) {
-    :root {
-        --vp-home-hero-image-filter: blur(150px);
-    }
-}
 
 .user-img {
     width: 80px;
@@ -37,13 +26,31 @@
 
 @media (max-width: 640px) {
     .VPHome .container {
-        padding-top: 150px;
+        padding-top: 70px;
     }
 }
 
 @media (min-width: 960px) {
     .VPHome .container {
-        padding-top: 110px;
+        padding-top: 80px;
+    }
+
+    .VPHome .vp-doc {
+        width: 760px;
+    }
+
+    .VPHero.has-image .image-container {
+        transform: translate(0, 0);
+    }
+
+    .VPHero.has-image .main {
+        max-width: 700px !important;
+        text-align: center;
+    }
+
+    .VPHero.has-image .main .text,
+    .VPHero.has-image .main .tagline {
+        max-width: 100%;
     }
 }
 
@@ -59,7 +66,7 @@
 
 .VPHome .container .image {
     order: 1 !important;
-    display: none;
+    /* display: none; */
 }
 
 .VPHome .container .text {
@@ -94,25 +101,4 @@
 
 .VPHome {
     margin-bottom: 0 !important;
-}
-
-
-.VPHome .container {
-    animation: popIn 1.2s;
-}
-
-@keyframes popIn {
-    0% {
-        transform: scale(0.1);
-        opacity: 0;
-    }
-
-    80% {
-        transform: scale(1.1);
-    }
-
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
 }
diff --git a/doc/en/index.md b/doc/en/index.md
@@ -2,17 +2,28 @@
 layout: home
 
 title: Mettle
-titleTemplate: Approachable, fast, flexible and lightweight JavaScript library
+titleTemplate: Approachable, fast, flexible  JavaScript library
 
 hero:
   name: Mettle
-  text: Approachable, fast, flexible and lightweight JavaScript library
-  tagline: Building user interfaces,More intuitive
+  text: Approachable, fast, flexible  JavaScript library
+  tagline: Building user interfaces
   actions:
     - theme: brand
       text: Get Started
       link: /guide/started/
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/maomincoding/mettle
   image:
     src: /logo.svg
     alt: Mettle
 ---
+
+```jsx
+function App() {
+  const count = signal(0);
+
+  return <button onClick={() => count.value++}>{count}</button>;
+}
+```
diff --git a/doc/zh/guide/install/index.md b/doc/zh/guide/install/index.md
@@ -1,6 +1,6 @@
 # 安装
 
-## CDN
+## 无构建版本
 
 如果你想使用 ES 模块。
 
@@ -9,55 +9,73 @@
 :::
 
 ```html
-<script type="module">
-  import {
-    html,
-    createApp,
-  } from 'https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full-esm.js';
-
-  function App({ setData }) {
-      let count = 0;
-
-      function add() {
-          count++;
-          setData();
+<html>
+  <body>
+    <script type="module">
+      import {
+        html,
+        createApp,
+        signal
+      } from 'https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full-esm.js';
+
+      function App() {
+          const count = signal(0);
+
+          function add() {
+              count.value++;
+          }
+
+          return () => html`<h1 onClick=${add}>${count.value}</h1>`;
       }
-      return () => html`<h1 onClick=${add}>${count}</h1>`;
-  }
 
-  createApp(html`<${App}/>`, '#app');
-</script>
+      createApp(html`<${App}/>`, '#app');
+    </script>
+  </body>
+</html>
 ```
 
-如果你觉得上述方式有点麻烦，也可以直接在 `<script>` 标签中导入。
+另外，也可以直接在 `<script>` 标签中导入。
 
 ::: tip
 该版本的所有顶层 API 都以属性的形式暴露在了全局的 Mettle 对象上。
 :::
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full.prod.js"></script>
-<script>
-  const { html, createApp } = Mettle;
+<html>
+  <body>
+    <script src="https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full.prod.js"></script>
+    <script>
+      const { html, createApp, signal } = Mettle;
 
-  function App({ setData }) {
-      let count = 0;
+      function App() {
+          const count = signal(0);
 
-      function add() {
-          count++;
-          setData();
+          function add() {
+              count.value++;
+          }
+
+          return () => html`<h1 onClick=${add}>${count.value}</h1>`;
       }
-      return () => html`<h1 onClick=${add}>${count}</h1>`;
-  }
 
-  createApp(html`<${App}/>`, '#app');
-</script>
+      createApp(html`<${App}/>`, '#app');
+    </script>
+  </body>
+</html>
 ```
 
 ::: tip
 上面两种方式，默认都使用了生产版本。如果你想在开发中获得更精准的代码定位，那么可以用开发版本，只需要把文件后缀`*.prod.js`中`prod`字段删除即可。
 :::
 
+::: tip
+无构建的优势伴随着权衡：
+
+- 无法使用 JSX 语法
+- 需要`return () =>`
+- 无法自动解包，必须手动`.value`
+
+:::
+
 ## 包管理器
 
 在用 Mettle 构建大型应用时，推荐使用包管理器安装。
diff --git a/doc/zh/guide/started/index.md b/doc/zh/guide/started/index.md
@@ -10,84 +10,10 @@ Mettle 是一个用于构建用户界面的 JavaScript 库。
 
 - **声明式渲染：** 我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系，开发者可以更加专注于业务逻辑的开发，不需要过多地关心 DOM 操作的细节。
 
-- **符合直觉：** 使用熟悉的原生 JavaScript 语法，不改变 JavaScript 语义，回归原生 JavaScript 的纯净。
+- **信号机制：** 状态变化会自动更新组件和 UI，以实现尽可能高效的操作。
 
 - **性能出色：** 采用了虚拟 DOM 的模式，虚拟 DOM 使用 diff 算法的方法来计算出真正需要更新的节点，最大限度地减少了 DOM 操作以及 DOM 操作带来的排版与重绘损耗，从而显著提高了性能。另外，我们的 JavaScript 库在全球知名的[测评榜单](https://github.com/krausest/js-framework-benchmark)上赢得了优秀的成绩。
 
 - **组件化：** 一个函数就是一个组件，可以根据应用规模任意组合。并且组件特有的 **“孤岛特性”**，使得将虚拟 DOM 树计算的级别控制在组件级别。
 
-- **灵活的应用场景：** 有无构建工具都可以使用，并且可以适配到其他前端框架开发的应用项目中去。
-
-- **轻量级：** 压缩后的文件大小不足 **12k**。另外，可以根据不同应用场景，选择[不同类型](https://www.jsdelivr.com/package/npm/mettle?tab=files&path=dist)的文件。
-
-## 快速入手
-
-想要快速体验 Mettle，你可以直接试试下面两种方式之一。
-
-### 全局构建版本
-
-该版本的所有顶层 API 都以属性的形式暴露在了全局的 Mettle 对象上。
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Mettle.js</title>
-  </head>
-  <body>
-    <script src="https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full.prod.js"></script>
-    <script>
-      const { html, createApp } = Mettle;
-
-      function App({ setData }) {
-          let count = 0;
-
-          function add() {
-              count++;
-              setData();
-          }
-          return () => html`<h1 onClick=${add}>${count}</h1>`;
-      }
-
-      createApp(html`<${App}/>`, '#app');
-    </script>
-  </body>
-</html>
-```
-
-### ES 模块
-
-现代浏览器大多都已支持 ES 模块，因此我们可以像这样通过 CDN 以及 ES 模块使用 Mettle。
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Mettle.js</title>
-  </head>
-  <body>
-    <script type="module">
-      import {
-        html,
-        createApp,
-      } from 'https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full-esm.js';
-
-      function App({ setData }) {
-          let count = 0;
-
-          function add() {
-              count++;
-              setData();
-          }
-          return () => html`<h1 onClick=${add}>${count}</h1>`;
-      }
-
-      createApp(html`<${App}/>`, '#app');
-    </script>
-  </body>
-</html>
-```
-
-我们简单快速地了解 Mettle 的使用，那么我们在下一篇详细说明下 Mettle 有哪些安装方法。
+- **灵活的应用场景：** 有无构建工具都可以使用。另外，可以根据不同应用场景，选择[不同类型](https://www.jsdelivr.com/package/npm/mettle?tab=files&path=dist)的文件。
diff --git a/doc/zh/index.md b/doc/zh/index.md
@@ -2,17 +2,28 @@
 layout: home
 
 title: Mettle
-titleTemplate: 易用、快速、灵活且轻量级的JavaScript库
+titleTemplate: 易用、快速、灵活的JavaScript库
 
 hero:
   name: Mettle
-  text: 易用、快速、灵活且轻量级的JavaScript库
-  tagline: 用于构建用户界面，更加符合直觉
+  text: 易用、快速、灵活的JavaScript库
+  tagline: 用于构建用户界面
   actions:
     - theme: brand
       text: 开始使用
       link: /zh/guide/started/
+    - theme: alt
+      text: 在 GitHub 上查看
+      link: https://github.com/maomincoding/mettle
   image:
     src: /logo.svg
     alt: Mettle
 ---
+
+```jsx
+function App() {
+  const count = signal(0);
+
+  return <button onClick={() => count.value++}>{count}</button>;
+}
+```

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import { defineConfig } from 'vitepress';`
`2`	`2`
`3`	`3`	`export const en = defineConfig({`
`4`	`4`	`lang: 'en-US',`
`5`		`- description: 'A approachable, fast, flexible and lightweight JavaScript library',`
	`5`	`+ description: 'A approachable, fast, flexible JavaScript library',`
`6`	`6`	`themeConfig: {`
`7`	`7`	`nav: [`
`8`	`8`	`{`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import { defineConfig } from 'vitepress';`
`2`	`2`
`3`	`3`	`export const zh = defineConfig({`
`4`	`4`	`lang: 'zh-Hans',`
`5`		`- description: '一个易用、快速、灵活且轻量级的JavaScript库',`
	`5`	`+ description: '一个易用、快速、灵活的JavaScript库',`
`6`	`6`	`themeConfig: {`
`7`	`7`	`nav: [`
`8`	`8`	`{`