chore: finish docs

farm-fe · Aug 12, 2024 · 67e1d2d · 67e1d2d
1 parent dfd2619
commit 67e1d2d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/i18n/zh/code.json b/i18n/zh/code.json
@@ -425,6 +425,9 @@
   "Rich Features": {
     "message": "丰富的特性"
   },
+  "Rich Features and Fully Pluggable": {
+    "message": "丰富的特性和完全可插拔"
+  },
   "Fully Pluggable": {
     "message": "完全可插拔"
   },
@@ -482,6 +485,9 @@
   "Everything inside Farm is powered by plugins, Supports both Rust and JavaScript plugins. Support Vite plugins out of box.": {
     "message": "Farm 由插件驱动, 通过创建插件来实现任何您想要的功能, 同时支持 Rust 和 JavaScript 两种插件模式, 开箱即用支持 Vite 插件。"
   },
+  "Farm supports compiling HTML, CSS, CSS Modules, Js/Jsx/Ts/Tsx, JSON, Static Assets out of the box, supports Sass, Less, PostCSS, Vue, React, Solid by way of official plugins, supports lazy compiling, partial bundling and more. Everything inside Farm is powered by plugins, Supports both Rust and JavaScript plugins. Support Vite plugins out of box.": {
+    "message": "丰富的编译能力支持: 开箱即用, Farm 内置了 Js/Ts/Jsx/Tsx、Css/Css Modules/Sass/Less、HTML 和静态资源，可以通过官方插件支持 sass、less、postcss、react、vue、solid 等常用技术栈，支持懒编译、局部打包等海量特性。并且 Farm 由插件驱动, 通过创建插件来实现任何您想要的功能, 同时支持 Rust 和 JavaScript 两种插件模式, 开箱即用支持 Vite 插件。"
+  },
   "Partial Bundling: Bundle your project into a few reasonable bundles, speeding up resource loading without losing caching granularity.": {
     "message": "自动根据依赖关系、资源大小，将项目打包成若干个资源，提升资源加载性能的同时，保证缓存命中率。"
   },

diff --git a/src/components/MagicUi/card.tsx b/src/components/MagicUi/card.tsx
@@ -21,7 +21,7 @@ import { AnimatedBeamPig } from "../ui/beam";
 
 export default function BentoGridCard() {
   return (
-    <BentoGrid className="max-w-full mx-auto md:auto-rows-[32rem] relative z-auto">
+    <BentoGrid className="max-w-full mx-auto md:auto-rows-auto relative z-auto">
       {items.map((item, i) => (
         <BentoGridItem
           key={i}
@@ -187,7 +187,7 @@ const SkeletonFive = () => {
     <motion.div
       initial="initial"
       whileHover="animate"
-      className="flex flex-1 w-full h-full min-h-[6rem] dark:bg-dot-white/[0.2] bg-dot-black/[0.2] flex-col space-y-2"
+      className="flex flex-1 w-full h-full justify-center min-h-[6rem] dark:bg-dot-white/[0.2] bg-dot-black/[0.2] flex-col space-y-2"
     >
       <motion.div
         className="flex justify-center flex-row rounded-full border border-neutral-100 dark:border-white/[0.2] p-2 items-center space-x-2 bg-soft dark:bg-soft"
@@ -207,40 +207,51 @@ const items = [
     title: <Translate>Extremely Fast</Translate>,
     description: (
       <span className="text-sm">
-        Written in Rust, start a React / Vue project in milliseconds and perform an HMR update within 10ms for most situations.
+        <Translate>
+          Written in Rust, start a React / Vue project in milliseconds and perform an HMR update within 10ms for most situations.
+        </Translate>
       </span>
     ),
     header: <SkeletonOne />,
     className: "md:col-span-1",
     icon: <IconClipboardCopy className="h-4 w-4 text-neutral-500" />,
   },
   {
-    title: "Incremental Building",
+    title: <Translate>Incremental Building</Translate>,
     description: (
       <span className="text-sm">
-        Incremental Building: Support persistent cache, module level cache enabled by default, any module won't be compiled twice until it's changed!
+        <Translate>
+          Incremental Building: Support persistent cache, module level cache
+          enabled by default, any module won't be compiled twice until it's
+          changed!
+        </Translate>
       </span>
     ),
     header: <SkeletonTwo />,
     className: "md:col-span-1",
     icon: <IconFileBroken className="h-4 w-4 text-neutral-500" />,
   },
   {
-    title: "Partial Bundling",
+    title: <Translate>Partial Bundling</Translate>,
     description: (
       <span className="text-sm">
-        Partial Bundling: Bundle your project into a few reasonable bundles, speeding up resource loading without losing caching granularity.
+        <Translate>
+          Partial Bundling: Bundle your project into a few reasonable bundles,
+          speeding up resource loading without losing caching granularity.
+        </Translate>
       </span>
     ),
     header: <SkeletonThree />,
     className: "md:col-span-1",
     icon: <IconSignature className="h-4 w-4 text-neutral-500" />,
   },
   {
-    title: "Rich Features and Fully Pluggable",
+    title: <Translate>Rich Features and Fully Pluggable</Translate>,
     description: (
       <span className="text-sm">
-        Farm supports compiling HTML, CSS, CSS Modules, Js/Jsx/Ts/Tsx, JSON, Static Assets out of the box, supports Sass, Less, PostCSS, Vue, React, Solid by way of official plugins, supports lazy compiling, partial bundling and more. <br /> Everything inside Farm is powered by plugins, Supports both Rust and JavaScript plugins. Support Vite plugins out of box.
+        <Translate>
+          Farm supports compiling HTML, CSS, CSS Modules, Js/Jsx/Ts/Tsx, JSON, Static Assets out of the box, supports Sass, Less, PostCSS, Vue, React, Solid by way of official plugins, supports lazy compiling, partial bundling and more. Everything inside Farm is powered by plugins, Supports both Rust and JavaScript plugins. Support Vite plugins out of box.
+        </Translate>
       </span>
     ),
     header: <SkeletonFour />,
@@ -249,10 +260,13 @@ const items = [
   },
 
   {
-    title: "Consistency and Compatibility",
+    title: <Translate>Consistency and Compatibility</Translate>,
     description: (
       <span className="text-sm">
-        What you see in development will be the same as what you get in production. Supports both legacy (ES5) and modern browsers.
+        <Translate>
+          What you see in development will be the same as what you get in
+          production. Supports both legacy (ES5) and modern browsers.
+        </Translate>
       </span>
     ),
     header: <SkeletonFive />,