feat: translate

js api update is not done yet though

Author: zxch3n

components/landing/CustomerWall.tsx

@@ -4,7 +4,7 @@ export default function CustomerWall() {
             {/* Section Header */}
             <div className="text-center mb-20">
                 <h2 className="text-4xl md:text-5xl not-italic font-bold bg-clip-text mb-8 bg-blue-green text-fill-transparent" style={{ lineHeight: 1.5 }}>
-                    Who's Using Loro
+                    谁在使用 Loro
                 </h2>
             </div>
 

components/landing/Features.tsx

@@ -6,41 +6,39 @@ export default function Features() {
     <section className="w-full px-5 md:px-15 pt-4 pb-20 md:pt-15 md:pb-15 relative z-10">
       <FollowOnGitHub className="visible md:hidden mb-10 mt-8" />
       <p className="text-center text-neutral-400 mb-8">
-        Loro is a high‑performance CRDT library for local‑first, real‑time collaboration.
+        Loro 是一个面向本地优先、实时协作的高性能 CRDT 库。
       </p>
       <main className="flex flex-col space-y-5 gap-0 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-5 xl:grid-cols-4 xl:grid-rows-1">
         <article className={classes.Card}>
           <h3 className="text-base md:text-xl font-extrabold bg-blue-green bg-clip-text text-fill text-fill-transparent md:w-auto">
-            High Performance
+            高性能
           </h3>
           <p className="h-auto md:min-h-18 text-white/60 text-base font-medium leading-normal">
-            Optimized for memory, CPU, and loading speed with advanced
-            performance primitives.
+            针对内存、CPU 与加载速度进行优化，提供先进的性能原语。
           </p>
         </article>
         <article className={classes.Card}>
           <h3 className="text-base md:text-xl font-extrabold bg-blue-green bg-clip-text text-fill text-fill-transparent md:w-auto">
-            Rich CRDT Types Support
+            丰富的 CRDT 类型支持
           </h3>
           <p className="h-auto md:min-h-18 text-white/60 text-base font-medium leading-normal">
-            Turn JSON-like data into collaborative types effortlessly
+            轻松将类 JSON 数据转换为可协作的数据类型。
           </p>
         </article>
         <article className={classes.Card}>
           <h3 className="text-base md:text-xl font-extrabold bg-blue-green bg-clip-text text-fill text-fill-transparent d:w-auto">
-            Real-Time Collaboration with Version Control
+            实时协作与版本控制
           </h3>
           <p className="h-auto md:min-h-18 text-white/60 text-base font-medium leading-normal">
-            Preserve full version history like Git, even during real-time
-            collaboration
+            像 Git 一样保留完整版本历史，即使在实时协作中也不例外。
           </p>
         </article>
         <article className={classes.Card}>
           <h3 className="text-base md:text-xl font-extrabold bg-blue-green bg-clip-text text-fill text-fill-transparent md:w-auto">
-            Simple and Intuitive API
+            简单直观的 API
           </h3>
           <p className="h-auto md:min-h-18 text-white/60 text-base font-medium leading-normal">
-            Designed with developer experience in mind
+            以开发体验为核心设计。
           </p>
         </article>
       </main>

components/landing/FollowOnGitHub.tsx

@@ -16,12 +16,12 @@ export default function FollowOnGitHub(
       href="https://github.com/loro-dev/loro"
       target="_blank"
       rel="noopener noreferrer"
-      aria-label="Follow us on GitHub"
+      aria-label="在 GitHub 上关注我们"
     >
       <div className="w-6 h-6 md:w-9.5 md:h-9.5 flex items-center justify-center mr-1">
         <GitHubIcon />
       </div>
-      <div className={classes.AdvertisingText}>Follow us on GitHub</div>
+      <div className={classes.AdvertisingText}>在 GitHub 上关注我们</div>
     </a>
   );
 }

components/landing/Hero.tsx

@@ -16,17 +16,17 @@ export default function Hero({ }: HeroProps): JSX.Element {
                 "self-end md:self-start text-base text-[13px]"
               )}
             >
-              Implement collaboration effortlessly.
-              Powered by CRDTs. <br />
-              Built for local-first software.
+              轻松实现协作，<br />
+              由 CRDT 驱动，<br />
+              为本地优先软件而生。
             </p>
           </div>
           <a href="/blog/loro-now-open-source"><h1 className="py-1.5 flex flex-col gap-y-3.5 md:gap-y-7.5 leading-none">
             <GradientText>Reimagine</GradientText>
             <GradientText>State</GradientText>
             <GradientText>Management</GradientText>
             <span className="flex items-center gap-x-7.5">
-              <GradientText>with</GradientText>
+              <GradientText>With</GradientText>
               <span
                 className={cn(
                   classes.HairlineText,

components/landing/Support/index.tsx

@@ -8,79 +8,73 @@ import classes from "./index.module.css";
 export default function AlgorithmSection(): JSX.Element {
   return (
     <section className="pt-25 px-5 md:px-15 flex flex-col space-y-5 md:space-y-12.5 relative z-10">
-      <h2 className={classes.Caption}>Rich CRDTs Algorithm Support</h2>
+      <h2 className={classes.Caption}>全面的 CRDT 算法支持</h2>
       <Card
         icon={ToolboxIcon}
-        caption="Basic Data Structures"
+        caption="基础数据结构"
         text={
           <>
-            Includes support for{" "}
+            支持用于有序集合的{" "}
             <code>
-              <a href="/docs/tutorial/list">
-                MovableList
-              </a>
-            </code>{" "}
-            for ordered collections, LWW (Last Write Win){" "}
+              <a href="/docs/tutorial/list">MovableList</a>
+            </code>
+            ，用于键值对的 LWW（最后写入获胜）{" "}
             <code>
               <a href="/docs/tutorial/map">Map</a>
-            </code>{" "}
-            for key-value pairs,{" "}
+            </code>
+            ，用于层级数据的{" "}
             <code>
               <a href="/docs/tutorial/tree">MovableTree</a>
-            </code>{" "}
-            for hierarchical data, and{" "}
+            </code>
+            ，以及用于富文本操作的{" "}
             <code>
               <a href="/docs/tutorial/text">Text</a>
-            </code>{" "}
-            for rich text manipulation, enabling various of applications.
+            </code>
+            ，覆盖多样化的协作应用场景。
           </>
         }
       />
       <Card
         icon={SelectedText}
-        caption="Text/List Editing with Fugue"
+        caption="基于 Fugue 的文本/列表编辑"
         text={
           <>
-            Loro integrates{" "}
+            Loro 集成了{" "}
             <a
               href="https://arxiv.org/abs/2305.00583"
               target="_blank"
               rel="noreferrer"
             >
               Fugue
             </a>
-            , a novel CRDT algorithm designed to minimize the interleaving
-            anomalies when merging concurrent text/list edits.
+            ，这是一种旨在合并并发文本或列表编辑时最大限度减少交错异常的全新 CRDT 算法。
           </>
         }
       />
       <Card
         icon={LettersIcon}
-        caption="Rich Text CRDT"
+        caption="富文本 CRDT"
         text={
           <>
-            Loro manages rich text CRDTs that excel at merging concurrent rich
-            text style edits, maintaining the original intent of each user's
-            input as much as possible. Please read our blog,{"  "}
+            Loro 管理的富文本 CRDT 擅长合并并发样式编辑，尽可能保留每位用户的原始意图。欢迎阅读我们的博客{"  "}
             <a
               href="/blog/loro-richtext"
               target="_blank"
               rel="noreferrer"
               className="underline"
             >
-              Loro's Rich Text CRDT
+              Loro 的富文本 CRDT
             </a>
-            , to learn more.
+            ，了解更多信息。
           </>
         }
       />
       <Card
         icon={LineIcon}
-        caption="Hierarchical Data with Moveable Tree"
+        caption="可移动树的层级数据"
         text={
           <>
-            For applications requiring directory-like data manipulation, Loro
-            utilizes the algorithm from{" "}
+            对于需要目录式数据操作的应用，Loro 引入了{" "}
             <a
               className="underline italic"
               href="https://ieeexplore.ieee.org/document/9563274"
@@ -89,7 +83,7 @@ export default function AlgorithmSection(): JSX.Element {
             >
               A Highly-Available Move Operation for Replicated Trees
             </a>
-            , simplifying moving and reorganizing hierarchical data structures.
+            论文中的算法，使层级数据的移动与重组更为简单。
           </>
         }
       />

pages/_meta.js

@@ -10,19 +10,19 @@ export default {
     collapsible: true
   },
   docs: {
-    title: "Docs",
+    title: "文档",
     type: "page"
   },
   blog: {
-    title: "Blog",
+    title: "博客",
     type: "page"
   },
   changelog: {
-    title: "Changelog",
+    title: "更新日志",
     type: "page"
   },
   about: {
-    title: "About",
+    title: "关于",
     type: "page"
   }
 }

pages/about.mdx

@@ -1,17 +1,17 @@
-# About
+# 关于
 
-Loro, created by [Zixuan Chen](http://github.com/https://twitter.com/zx_loro) and
-[Leon Zhao](https://github.com/Leeeon233) in 2022, has the vision of empowering
-local-first software and simplifying the creation of collaborative applications.
+Loro 由 [Zixuan Chen](http://github.com/https://twitter.com/zx_loro) 和
+[Leon Zhao](https://github.com/Leeeon233) 于 2022 年创建，其愿景是赋能
+本地优先的软件，并简化协作应用程序的创建。
 
-# Contact
+# 联系方式
 
 - Zixuan Chen, zx@loro.dev
 - Leon Zhao, lz@loro.dev
 
-# Credits
+# 致谢
 
-- [Diamond-types](https://github.com/josephg/diamond-types): The ingenious OT-like merging algorithm from [@josephg](https://github.com/josephg) has been adapted to reduce the computation and space usage of CRDTs.
-- [Automerge](https://github.com/automerge/automerge): Their use of columnar encoding for CRDTs has informed our strategies for efficient data encoding.
-- [Yjs](https://github.com/yjs/yjs): We have incorporated a similar algorithm for effectively merging collaborative editing operations, thanks to their pioneering contributions.
-- [Matthew Weidner](https://mattweidner.com/): His work on the [Fugue](https://arxiv.org/abs/2305.00583) algorithm has been invaluable, enhancing our text editing capabilities.
+- [Diamond-types](https://github.com/josephg/diamond-types): 来自 [@josephg](https://github.com/josephg) 的巧妙的类 OT 合并算法已被用于减少 CRDT 的计算和空间使用。
+- [Automerge](https://github.com/automerge/automerge): 他们对 CRDT 使用列式编码，为我们的高效数据编码策略提供了信息。
+- [Yjs](https://github.com/yjs/yjs): 我们采用了类似的算法来有效合并协作编辑操作，感谢他们的开创性贡献。
+- [Matthew Weidner](https://mattweidner.com/): 他在 [Fugue](https://arxiv.org/abs/2305.00583) 算法上的工作非常宝贵，增强了我们的文本编辑能力。

pages/blog.mdx

@@ -1,28 +1,28 @@
 import { getPagesUnderRoute } from "nextra/context";
 import Link from "next/link";
-import BlogPostCard from "../components/BlogPostCard";
+import BlogPostCard from "../../components/BlogPostCard";
 
 export function BlogHeader() {
   return (
     <div className="max-w-screen-lg mx-auto pt-4 pb-8 mb-16 border-b border-gray-400 border-opacity-20 text-center">
       <h1>
-        <span className="font-bold leading-tight lg:text-5xl">Loro Blog</span>
+        <span className="font-bold leading-tight lg:text-5xl">Loro 博客</span>
       </h1>
       <p className="text-center text-gray-500 dark:text-gray-400 font-space-grotesk"></p>
       <div className="mt-4">
         <Link
           href="/blog.xml"
           className="text-sm font-semibold text-primary-600 hover:text-primary-500 dark:text-primary-400"
         >
-          Subscribe via RSS
+          通过 RSS 订阅
         </Link>
       </div>
     </div>
   );
 }
 
 export function BlogIndex() {
-  const pages = getPagesUnderRoute("/blog");
+  const pages = getPagesUnderRoute("/zh/blog");
   pages.sort((a, b) => {
     if (a.frontMatter?.date && b.frontMatter?.date) {
       return new Date(b.frontMatter.date) - new Date(a.frontMatter.date);