You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by sy...@apache.org on 2022/05/20 08:58:53 UTC
[apisix-website] branch master updated: feat: add website route (homePage, teams) translation (#1100)
This is an automated email from the ASF dual-hosted git repository.
sylviasu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new fa835d0caa0 feat: add website route (homePage, teams) translation (#1100)
fa835d0caa0 is described below
commit fa835d0caa0352b2ca130e0bd7986235aa7b47c1
Author: Barchiel <15...@qq.com>
AuthorDate: Fri May 20 16:58:48 2022 +0800
feat: add website route (homePage, teams) translation (#1100)
* feat: add website route (homePage, teams) translator
---
website/i18n/zh/code.json | 220 +++++++++++++++++++++
website/src/components/sections/Architecture.tsx | 22 ++-
website/src/components/sections/Benefits.tsx | 114 ++++++++---
website/src/components/sections/Comparison.tsx | 15 +-
website/src/components/sections/Endcta.tsx | 7 +-
website/src/components/sections/Features.tsx | 94 +++++----
.../src/components/sections/HomeEventsSection.tsx | 22 ++-
.../src/components/sections/OpensourcePromo.tsx | 47 ++++-
website/src/pages/team.tsx | 44 +++--
9 files changed, 477 insertions(+), 108 deletions(-)
diff --git a/website/i18n/zh/code.json b/website/i18n/zh/code.json
index 2966127ffec..cccc13a57b1 100644
--- a/website/i18n/zh/code.json
+++ b/website/i18n/zh/code.json
@@ -1,4 +1,8 @@
{
+ "common.punctuation.anEnd": {
+ "message": "。",
+ "description": "."
+ },
"hero.webpage.title.fragment1": {
"message": "简单高效的",
"description": "Effortless and smooth"
@@ -30,5 +34,221 @@
"docs.webpage.title.DocumentSubtitle": {
"message": "让产品与技术背后的细节更加可视化",
"description": "We love open source."
+ },
+ "team.webpage.title.Team": {
+ "message": "团队介绍",
+ "description": "Team"
+ },
+ "team.webpage.title.DocumentSubtitle": {
+ "message": "We love open source.",
+ "description": "We love open source."
+ },
+ "team.webpage.content.Contributors": {
+ "message": "贡献者列表",
+ "description": "Contributors"
+ },
+ "team.webpage.content.ContributorsSub": {
+ "message": "你可以从 GitHub 的贡献记录中查看所有 Apache APISIX 的贡献者列表",
+ "description": "You can find all contributors of Apache APISIX from GitHub contribution list."
+ },
+ "team.webpage.content.ContributorOverTime": {
+ "message": "贡献者变化趋势图",
+ "description": "Contributor Over Time"
+ },
+ "team.webpage.content.ContributorOverTimeNote": {
+ "message": "注：下图中的贡献者数量包含了 Apache APISIX 所有仓库的贡献者",
+ "description": "Note: This graph contains contributors from all repos under Apache APISIX"
+ },
+ "team.webpage.content.BecomeACommitter": {
+ "message": "成为 Apache APISIX Committer",
+ "description": "Become A Committer"
+ },
+ "team.webpage.content.BecomeACommitterInto": {
+ "message": "Apache APISIX 社区遵循并使用 Apache 社区提交规范，在贡献者积极参与 APISIX 社区后，项目管理委员会（PMC）将决定是否邀请贡献者加入 Committers 和 PMC。",
+ "description": "The Apache APISIX community follows the Apache Community process on accepting a new committer. After contributors actively participate in the APISIX community, PMC and Committers will decide to invite contributors to join Committers and PMC."
+ },
+ "team.webpage.content.StartContributeBtn": {
+ "message": "开始参与社区贡献",
+ "description": "Start Contribute"
+ },
+ "architecture.component.title.name": {
+ "message": "适用于超大规模、复杂的业务系统",
+ "description": "Building for large-scale, high value systems"
+ },
+ "architecture.component.title.subtitle": {
+ "message": "Apache APISIX 作为云原生架构的开源 API 网关，可以为海量 API 和微服务提供安全可靠的高性能、动态、可扩展的管理平台。",
+ "description": "Apache APISIX lets you build Cloud-Native Microservices API gateways, delivering the ultimate performance, security, open source and scalable platform for all your APIs and microservices."
+ },
+ "architecture.component.card.caption": {
+ "message": "Apache APISIX 基于 NGINX 与 etcd，相较于传统的 API 网关，它提供了动态路由、插件热加载等诸多能力",
+ "description": "Apache APISIX is based on NGINX and etcd. Compared with traditional API gateways, APISIX has dynamic routing and hot-loading plugins"
+ },
+ "features.component.why.title": {
+ "message": "为什么选择 Apache APISIX？",
+ "description": "Why APISIX?"
+ },
+ "features.component.why.subtitle": {
+ "message": "Apache APISIX 值得信赖，能够使你专注在具体特定业务中，而无需考虑 API 处理基础组件。",
+ "description": "Reduce time fighting bugs, focus on designing world-class systems"
+ },
+ "features.component.why.message": {
+ "message": "Apache APISIX 是首个提供低代码能力的开源 API 网关，作为 Apache 软件基金会中的顶级项目，它也为开发人员提供强大且灵活的控制界面",
+ "description": "Apache APISIX is the first Open source API gateway, with a built-in low-code Dashboard offering a powerful and flexible interface for developers to use"
+ },
+ "features.component.easyDashboard.title": {
+ "message": "简单易用的 Dashboard",
+ "description": "Easy-to-use dashboard"
+ },
+ "features.component.easyDashboard.message": {
+ "message": "Apache APISIX Dashboard 可以让用户尽可能直观、便捷地通过可视化界面来操作 Apache APISIX，它同样是 Apache 软件基金会中持续迭代的开源项目，欢迎你随时提出新的想法。",
+ "description": "The Apache APISIX Dashboard is designed to make it as easy as possible for users to operate Apache APISIX through a frontend interface. It’s opensource and ever evolving, feel free to contribute."
+ },
+ "features.component.easyDashboard.downloadBtn": {
+ "message": "立即下载",
+ "description": "Downloads"
+ },
+ "features.component.userFlexible.title": {
+ "message": "灵活的用户体验",
+ "description": "User flexible"
+ },
+ "features.component.userFlexible.message": {
+ "message": "Apache APISIX Dashboard 极大地满足了用户需求，不仅提供了清晰的组织架构以适配二次开发，而且你也可以借助插件编排能力释放想象力！",
+ "description": "The Apache APISIX dashboard is flexible to User demand, providing option to create custom modules through code matching your requirements, alongside the existing no-code toolchain."
+ },
+ "features.component.pluginised.title": {
+ "message": "可视化配置",
+ "description": "Pluginised workflow"
+ },
+ "features.component.pluginised.message": {
+ "message": "拒绝重复造轮子。使用 Apache APISIX 内置的插件，可以在极短时间内创建灵活、可靠、高性能的网关。无需写代码，只需在编辑器中，拖拽插件到画布上，再配置插件的判断条件、数据源及交互动作，以可视化的方式打造属于你自己的 API 管理系统。",
+ "description": "No need to reinvent the wheel again and again. Use inbuilt plugins to create high performance systems in tight deadlines. For something custom, there is option of building custom plugins."
+ },
+ "benefits.component.performance.title": {
+ "message": "性能",
+ "description": "Performance"
+ },
+ "benefits.component.performance.subtitle": {
+ "message": "极致的性能体验",
+ "description": "Ultimate performance"
+ },
+ "benefits.component.performance.message": {
+ "message": "Apache APISIX 基于 Radixtree Route Matching 和 etcd 提供极速匹配与配置同步的能力。从路由到插件，所有的设计和实现都是为了超低延迟的极速性能。",
+ "description": "Apache APISIX uses radixtree-route-matching and etcd under the hood to provide you the ability to create high speed synchronized systems. From routing to built-in plugins, all these are designed and implemented to be uber performant with the minimum latency possible."
+ },
+ "benefits.component.security.title": {
+ "message": "安全",
+ "description": "Security"
+ },
+ "benefits.component.security.subtitle": {
+ "message": "阻拦恶意程序",
+ "description": "Shield against the malicious"
+ },
+ "benefits.component.security.message": {
+ "message": "Apache APISIX 提供了多款身份认证与接口验证的插件，我们将稳定、安全放在首位。如需了解更多信息请查看",
+ "description": "Apache APISIX provides multiple security plugins for identity authentication and interface verification, putting stability and security first. For more information, check"
+ },
+ "benefits.component.security.link.here": {
+ "message": "安全类插件",
+ "description": "here"
+ },
+ "benefits.component.scalability.title": {
+ "message": "高可用与可扩展性",
+ "description": "Scalability and availability"
+ },
+ "benefits.component.scalability.subtitle": {
+ "message": "与用户一起扩容",
+ "description": "Scales with your users"
+ },
+ "benefits.component.scalability.message": {
+ "message": "Apache APISIX 提供了自定义插件的能力，你可以在 Balancer 阶段使用自定义负载均衡算法，并使用自定义路由算法对路由进行精细化控制。",
+ "description": "Apache APISIX provides the ability to write your own custom plugins, use custom Load Balancing Algorithms during the balancer phase for scaling and custom Routing algorithms for fine control on routing."
+ },
+ "benefits.component.fullyDynamic.title": {
+ "message": "全动态",
+ "description": "Fully dynamic"
+ },
+ "benefits.component.fullyDynamic.subtitle": {
+ "message": "节省选型、开发时间，只做最重要的业务设计",
+ "description": "Save dev-time, design what matters"
+ },
+ "benefits.component.fullyDynamic.message": {
+ "message": "Apache APISIX 提供了配置热更新、插件热加载能力，在不重新启动实例的情况下可快速更新配置，这能够节省开发时间并降低服务压力。同时，健康检查、服务熔断以及其它功能可以让系统始终保持稳定、可靠。",
+ "description": "Apache APISIX provides Hot updates and Hot plugins, which continuosly update configurations without restarts, saving development time and stress. Health checks, circuit breakers and many more features keep the system balanced at all times."
+ },
+ "benefits.component.multiPlatform.title": {
+ "message": "多平台、多协议",
+ "description": "Multi-platform and protocol"
+ },
+ "benefits.component.multiPlatform.subtitle": {
+ "message": "一次创建，随处运行",
+ "description": "Create once, run anywhere"
+ },
+ "benefits.component.multiPlatform.message": {
+ "message": "Apache APISIX 提供了多平台解决方案，它不但支持在裸机运行，也支持在 Kubernetes 中使用。它支持 HTTP 到 gRPC 的转换、WebSockets、gRPC、Dubbo、MQTT 代理和包括 ARM64 在内的多个平台，无需担心供应商对基础设施技术的锁定。",
+ "description": "Platform agnostic, no vendor lock-in, Apache APISIX can run from bare-metal to kubernetes. It supports HTTP to gRPC transcoding, websockets, gRPC, Dubbo, MQTT proxy and multiple platforms including ARM64, don't worry about the lock-in of the infra technology."
+ },
+ "comparison.component.title": {
+ "message": "Apache APISIX 是 API 流量处理的最佳选择",
+ "description": "Among the best, and always improving"
+ },
+ "comparison.component.subtitle": {
+ "message": "Apache APISIX 是 Apache 软件基金会下的开源项目，并且在不断蓬勃发展。下方是 Apache APISIX 与其它 API 网关对比：",
+ "description": "Apache APISIX is opensource and ever evolving. Here's a general comparison of APISIX with other options in this API Gateway ecosystem."
+ },
+ "openSourcePromo.component.title": {
+ "message": "向更多开发者学习",
+ "description": "Learn from developers"
+ },
+ "openSourcePromo.component.subtitle.fragment1": {
+ "message": "想学习 Apache APISIX 的使用，但不知道从哪里开始？请查阅我们的",
+ "description": "Want to learn Apache APISIX usage, but don't know where to start. Check out our"
+ },
+ "openSourcePromo.component.link.docs": {
+ "message": "官方技术文档",
+ "description": "docs."
+ },
+ "openSourcePromo.component.subtitle.fragment2": {
+ "message": "如果你喜欢通过视频进行学习，可查看官方",
+ "description": "Like visual information, check out our"
+ },
+ "openSourcePromo.component.link.Youtube": {
+ "message": "Youtube 频道",
+ "description": "Youtube channel"
+ },
+ "openSourcePromo.component.subtitle.fragment3": {
+ "message": "以了解详细的教程，欢迎你的订阅",
+ "description": "for detailed tutorials. Subscribe for more."
+ },
+ "openSourcePromo.component.ossPromo.title": {
+ "message": "为 Apache APISIX 贡献你的力量！",
+ "description": "Be a part of building APISIX"
+ },
+ "openSourcePromo.component.ossPromo.subtitle": {
+ "message": "Apache APISIX 是完全开放源码的，并且在不断发展！我们欢迎任何形式的贡献，请在 GitHub 上与社区联系",
+ "description": "Apache APISIX is opensource and ever-growing. Contributors are always welcome. Reach out to us on GitHub"
+ },
+ "openSourcePromo.component.link.Github": {
+ "message": "立即访问",
+ "description": "Check us out"
+ },
+ "homeEventsSection.component.title": {
+ "message": "了解有关 Apache APISIX 的最新信息",
+ "description": "Stay updated about APISIX"
+ },
+ "homeEventsSection.component.subtitle": {
+ "message": "最近的一些活动",
+ "description": "Some Recent events"
+ },
+ "homeEventsSection.component.message.news": {
+ "message": "了解 Apache APISIX™ 的最新情况，请订阅我们的",
+ "description": "Stay up to date about all Apache APISIX™ News, subscribe to our"
+ },
+ "homeEventsSection.component.link.newsletter": {
+ "message": "邮件列表",
+ "description": "newsletter."
+ },
+ "homeEventsSection.component.link.Subscribe": {
+ "message": "立即订阅",
+ "description": "Subscribe"
}
}
diff --git a/website/src/components/sections/Architecture.tsx b/website/src/components/sections/Architecture.tsx
index d3ee38da1b7..42cf01753be 100644
--- a/website/src/components/sections/Architecture.tsx
+++ b/website/src/components/sections/Architecture.tsx
@@ -2,6 +2,8 @@ import type { FC } from 'react';
import React, { useEffect } from 'react';
import gsap from 'gsap';
+import Translate from '@docusaurus/Translate';
+
import '../../css/customTheme.css';
import HLDesign from '../../assets/images/infographs/Architecture.svg';
import Pattern from '../../assets/images/PatternGrouped.svg';
@@ -75,13 +77,17 @@ const Architecture: FC<ArchitectureProps> = (props) => {
/>
</div>
<div>
- <h3 className="arch-head">Building for large-scale, high value systems</h3>
+ <h3 className="arch-head">
+ <Translate id="architecture.component.title.name">Building for large-scale, high value systems</Translate>
+ </h3>
</div>
<div className="arch-subtitle">
<p>
- Apache APISIX lets you build Cloud-Native Microservices API gateways,
- delivering the ultimate performance, security,
- open source and scalable platform for all your APIs and microservices.
+ <Translate id="architecture.component.title.subtitle">
+ Apache APISIX lets you build Cloud-Native Microservices API gateways,
+ delivering the ultimate performance, security,
+ open source and scalable platform for all your APIs and microservices.
+ </Translate>
</p>
</div>
<div className="arch-card" style={{ position: 'relative' }}>
@@ -90,9 +96,11 @@ const Architecture: FC<ArchitectureProps> = (props) => {
</div>
<div className="arch-card-caption">
<p style={{ width: screenWidth >= 768 ? '50%' : '90%' }}>
- Apache APISIX is based on Nginx and etcd.
- Compared with traditional API gateways,
- APISIX has dynamic routing and hot-loading plugins
+ <Translate id="architecture.component.card.caption">
+ Apache APISIX is based on Nginx and etcd.
+ Compared with traditional API gateways,
+ APISIX has dynamic routing and hot-loading plugins
+ </Translate>
</p>
</div>
<div className="arch-card-border" />
diff --git a/website/src/components/sections/Benefits.tsx b/website/src/components/sections/Benefits.tsx
index 3744c7aacb1..a2e3d5a0525 100644
--- a/website/src/components/sections/Benefits.tsx
+++ b/website/src/components/sections/Benefits.tsx
@@ -5,6 +5,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import Translate from '@docusaurus/Translate';
+
import '../../css/customTheme.css';
import Performance from '../../assets/images/infographs/performance.svg';
@@ -327,13 +329,19 @@ const Benefits: FC<BenefitsProps> = (props) => {
<div ref={triggerDiv} className="benefit" style={{ position: 'relative' }}>
<div ref={performance} className="row-benefit">
<div style={{ width: screenWidth > 768 ? '50%' : '100%' }}>
- <h3 className="feat-head-desc">Performance</h3>
- <h1 className="feat-head add-left-margin">Ultimate performance </h1>
+ <h3 className="feat-head-desc">
+ <Translate id="benefits.component.performance.title">Performance</Translate>
+ </h3>
+ <h1 className="feat-head add-left-margin">
+ <Translate id="benefits.component.performance.subtitle">Ultimate performance</Translate>
+ </h1>
<p className="feat-desc add-left-margin">
- Apache APISIX uses radixtree-route-matching and etcd under the hood to
- provide you the ability to create high speed synchronized systems.
- From routing to built-in plugins, all these are designed and implemented to
- be uber performant with the minimum latency possible.
+ <Translate id="benefits.component.performance.message">
+ Apache APISIX uses radixtree-route-matching and etcd under the hood to
+ provide you the ability to create high speed synchronized systems.
+ From routing to built-in plugins, all these are designed and implemented to
+ be uber performant with the minimum latency possible.
+ </Translate>
</p>
</div>
<div className="benefit-infograph">
@@ -346,27 +354,51 @@ const Benefits: FC<BenefitsProps> = (props) => {
<Security style={{ width: screenWidth >= 768 ? '75%' : '100%', position: 'relative', left: screenWidth >= 768 ? '3%' : '0' }} />
</div>
<div style={{ width: screenWidth > 768 ? '50%' : '100%' }}>
- <h3 className="feat-head-desc">Security</h3>
- <h1 className="feat-head add-left-margin">Shield against the malicious</h1>
+ <h3 className="feat-head-desc">
+ <Translate id="benefits.component.security.title">
+ Security
+ </Translate>
+ </h3>
+ <h1 className="feat-head add-left-margin">
+ <Translate id="benefits.component.security.subtitle">
+ Shield against the malicious
+ </Translate>
+ </h1>
<p className="feat-desc add-left-margin">
- Apache APISIX provides multiple security plugins
- for identity authentication and interface verification,
- putting stability and security first. For more information, check
+ <Translate id="benefits.component.security.message">
+ Apache APISIX provides multiple security plugins
+ for identity authentication and interface verification,
+ putting stability and security first. For more information, check
+ </Translate>
{' '}
- <Link style={{ color: '#e8433e' }} to={useBaseUrl('docs/apisix/plugins/cors/')}>here</Link>
- .
+ <Link style={{ color: '#e8433e' }} to={useBaseUrl('docs/apisix/plugins/cors/')}>
+ <Translate id="benefits.component.security.link.here">
+ here
+ </Translate>
+ </Link>
+ <Translate id="common.punctuation.anEnd">.</Translate>
</p>
</div>
</div>
<div ref={scale} className="row-benefit row-hidden">
<div style={{ width: screenWidth > 768 ? '50%' : '100%' }}>
- <h3 className="feat-head-desc">Scalability and availability</h3>
- <h1 className="feat-head add-left-margin">Scales with your users</h1>
+ <h3 className="feat-head-desc">
+ <Translate id="benefits.component.scalability.title">
+ Scalability and availability
+ </Translate>
+ </h3>
+ <h1 className="feat-head add-left-margin">
+ <Translate id="benefits.component.scalability.subtitle">
+ Scales with your users
+ </Translate>
+ </h1>
<p className="feat-desc add-left-margin">
- Apache APISIX provides the ability to write your own custom plugins,
- use custom Load Balancing Algorithms during the balancer phase
- for scaling and custom Routing algorithms for fine control on routing.
+ <Translate id="benefits.component.scalability.message">
+ Apache APISIX provides the ability to write your own custom plugins,
+ use custom Load Balancing Algorithms during the balancer phase
+ for scaling and custom Routing algorithms for fine control on routing.
+ </Translate>
</p>
</div>
<div className="benefit-infograph">
@@ -379,27 +411,47 @@ const Benefits: FC<BenefitsProps> = (props) => {
<Dynamic style={{ width: screenWidth >= 768 ? '50%' : '70%' }} />
</div>
<div style={{ width: screenWidth > 768 ? '50%' : '100%' }}>
- <h3 className="feat-head-desc">Fully dynamic</h3>
- <h1 className="feat-head add-left-margin">Save dev-time, design what matters </h1>
+ <h3 className="feat-head-desc">
+ <Translate id="benefits.component.fullyDynamic.title">
+ Fully dynamic
+ </Translate>
+ </h3>
+ <h1 className="feat-head add-left-margin">
+ <Translate id="benefits.component.fullyDynamic.subtitle">
+ Save dev-time, design what matters
+ </Translate>
+ </h1>
<p className="feat-desc add-left-margin">
- Apache APISIX provides Hot updates and Hot plugins,
- which continuosly update configurations without restarts,
- saving development time and stress. Health checks,
- circuit breakers and many more features keep the system balanced at all times.
+ <Translate id="benefits.component.fullyDynamic.message">
+ Apache APISIX provides Hot updates and Hot plugins,
+ which continuosly update configurations without restarts,
+ saving development time and stress. Health checks,
+ circuit breakers and many more features keep the system balanced at all times.
+ </Translate>
</p>
</div>
</div>
<div ref={multiplatform} className="row-benefit row-hidden">
<div style={{ width: screenWidth > 768 ? '50%' : '100%' }}>
- <h3 className="feat-head-desc">Multi-platform and protocol</h3>
- <h1 className="feat-head add-left-margin">Create once, run anywhere</h1>
+ <h3 className="feat-head-desc">
+ <Translate id="benefits.component.multiPlatform.title">
+ Multi-platform and protocol
+ </Translate>
+ </h3>
+ <h1 className="feat-head add-left-margin">
+ <Translate id="benefits.component.multiPlatform.subtitle">
+ Create once, run anywhere
+ </Translate>
+ </h1>
<p className="feat-desc add-left-margin">
- Platform agnostic, no vendor lock-in,
- Apache APISIX can run from bare-metal to kubernetes.
- It supports HTTP to gRPC transcoding, websockets, gRPC, Dubbo,
- MQTT proxy and multiple platforms including ARM64,
- don't worry about the lock-in of the infra technology.
+ <Translate id="benefits.component.multiPlatform.message">
+ Platform agnostic, no vendor lock-in,
+ Apache APISIX can run from bare-metal to kubernetes.
+ It supports HTTP to gRPC transcoding, websockets, gRPC, Dubbo,
+ MQTT proxy and multiple platforms including ARM64,
+ don't worry about the lock-in of the infra technology.
+ </Translate>
</p>
</div>
<div className="benefit-infograph">
diff --git a/website/src/components/sections/Comparison.tsx b/website/src/components/sections/Comparison.tsx
index 9af33ad7767..ad803646ccb 100644
--- a/website/src/components/sections/Comparison.tsx
+++ b/website/src/components/sections/Comparison.tsx
@@ -1,19 +1,26 @@
import type { FC } from 'react';
import React from 'react';
+import Translate from '@docusaurus/Translate';
+
import '../../css/customTheme.css';
import Cross from '../../assets/icons/cross.svg';
import Tick from '../../assets/icons/tick.svg';
-const Comparison:FC = () => (
+const Comparison: FC = () => (
<div className="compare">
<div>
- <h3 className="compare-head">Among the best, and always improving</h3>
+ <h3 className="compare-head">
+ <Translate id="comparison.component.title">Among the best, and always improving</Translate>
+ </h3>
</div>
<div className="compare-subtitle">
<p>
- Apache APISIX is opensource and ever evolving.
- Here's a general comparison of APISIX with other options in this API Gateway ecosystem.
+ <Translate id="comparison.component.subtitle">
+ Apache APISIX is opensource and ever evolving.
+ Here's a general comparison of APISIX with other options in this API Gateway
+ ecosystem.
+ </Translate>
</p>
</div>
<div>
diff --git a/website/src/components/sections/Endcta.tsx b/website/src/components/sections/Endcta.tsx
index 118334b0274..4cfbd96ff1f 100644
--- a/website/src/components/sections/Endcta.tsx
+++ b/website/src/components/sections/Endcta.tsx
@@ -3,10 +3,12 @@ import React from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
+import Translate from '@docusaurus/Translate';
+
import '../../css/customTheme.css';
import ArrowAnim from '../ArrowAnim';
-const EndCTA:FC = () => (
+const EndCTA: FC = () => (
<div className="endcta" style={{ padding: '50px 0', background: '#FF90A3', margin: '0 0 -32px 0' }}>
<div className="endcta-text">
<p style={{
@@ -14,6 +16,7 @@ const EndCTA:FC = () => (
}}
>
Try
+ {' '}
<span style={{ color: '#E8433E' }}>APISIX</span>
{' '}
today
@@ -26,7 +29,7 @@ const EndCTA:FC = () => (
to={useBaseUrl('downloads')}
className="btn btn-download"
>
- Downloads
+ <Translate id="hero.webpage.download.btn">Downloads</Translate>
</Link>
<ArrowAnim />
</div>
diff --git a/website/src/components/sections/Features.tsx b/website/src/components/sections/Features.tsx
index 84bb014e8a4..1f8409eba8d 100644
--- a/website/src/components/sections/Features.tsx
+++ b/website/src/components/sections/Features.tsx
@@ -4,6 +4,8 @@ import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+import Translate from '@docusaurus/Translate';
import ArrowAnim from '../ArrowAnim';
import '../../css/customTheme.css';
@@ -35,7 +37,7 @@ const DashboardPlayground = () => (
</Link>
);
-const Features:FC = () => {
+const Features: FC = () => {
const dashboardDiv = useRef(null);
const userfDiv = useRef(null);
const pluginDiv = useRef(null);
@@ -153,14 +155,18 @@ const Features:FC = () => {
return (
<>
<div ref={featPin} className="feat-top" style={{ padding: '50px 0' }}>
- <h3 className="feat-head-desc">Why APISIX ?</h3>
+ <h3 className="feat-head-desc"><Translate id="features.component.why.title">Why APISIX ?</Translate></h3>
<h1 className="feat-head add-left-margin">
- Reduce time fighting bugs, focus on designing world-class systems
+ <Translate id="features.component.why.subtitle">
+ Reduce time fighting bugs, focus on designing world-class systems
+ </Translate>
</h1>
<p className="feat-desc add-left-margin">
- Apache APISIX is the first Open source API gateway, with a built-in
- low-code Dashboard offering a powerful and flexible interface for
- developers to use
+ <Translate id="features.component.why.message">
+ Apache APISIX is the first Open source API gateway, with a built-in
+ low-code Dashboard offering a powerful and flexible interface for
+ developers to use
+ </Translate>
</p>
</div>
<div className="feat-container-d" ref={triggerDiv}>
@@ -169,17 +175,21 @@ const Features:FC = () => {
<div ref={dashboardDiv} style={{ position: 'relative' }}>
<div className="text-div" style={{ height: '100vh' }}>
<h2 className="i-text add-left-margin-feat">
- Easy-to-use dashboard
+ <Translate id="features.component.easyDashboard.title">
+ Easy-to-use dashboard
+ </Translate>
</h2>
<p className="i-text-desc add-left-margin-feat">
- The Apache APISIX Dashboard is designed to make it as easy as
- possible for users to operate Apache APISIX through a frontend
- interface. It’s opensource and ever evolving, feel free to
- contribute.
+ <Translate id="features.component.easyDashboard.message">
+ The Apache APISIX Dashboard is designed to make it as easy as
+ possible for users to operate Apache APISIX through a frontend
+ interface. It’s opensource and ever evolving, feel free to
+ contribute.
+ </Translate>
</p>
<div className="hero-ctas add-left-margin-feat bottom-pos">
<Link to={useBaseUrl('downloads')} className="btn btn-download">
- Downloads
+ <Translate id="features.component.easyDashboard.downloadBtn">Downloads</Translate>
</Link>
<ArrowAnim />
</div>
@@ -189,11 +199,15 @@ const Features:FC = () => {
<div ref={userfDiv} style={{ position: 'relative' }}>
<div className="text-div" style={{ height: '100vh' }}>
- <h2 className="i-text add-left-margin-feat">User flexible</h2>
+ <h2 className="i-text add-left-margin-feat">
+ <Translate id="features.component.userFlexible.title">User flexible</Translate>
+ </h2>
<p className="i-text-desc add-left-margin-feat">
- The Apache APISIX dashboard is flexible to User demand,
- providing option to create custom modules through code matching
- your requirements, alongside the existing no-code toolchain.
+ <Translate id="features.component.userFlexible.message">
+ The Apache APISIX dashboard is flexible to User demand,
+ providing option to create custom modules through code matching
+ your requirements, alongside the existing no-code toolchain.
+ </Translate>
</p>
</div>
</div>
@@ -201,13 +215,15 @@ const Features:FC = () => {
<div ref={pluginDiv} style={{ position: 'relative' }}>
<div className="text-div" style={{ height: '100vh' }}>
<h2 className="i-text add-left-margin-feat">
- Pluginised workflow
+ <Translate id="features.component.pluginised.title">Pluginised workflow</Translate>
</h2>
<p className="i-text-desc add-left-margin-feat">
- No need to reinvent the wheel again and again. Use inbuilt
- plugins to create high performance systems in tight deadlines.
- For something custom, there is option of building custom
- plugins.
+ <Translate id="features.component.pluginised.message">
+ No need to reinvent the wheel again and again. Use inbuilt
+ plugins to create high performance systems in tight deadlines.
+ For something custom, there is option of building custom
+ plugins.
+ </Translate>
</p>
</div>
</div>
@@ -262,21 +278,25 @@ const Features:FC = () => {
>
<div style={{ position: 'relative', height: '100%' }}>
<h2 className="add-left-margin" style={{ width: 'fit-content' }}>
- Easy-to-use dashboard
+ <Translate id="features.component.easyDashboard.title">
+ Easy-to-use dashboard
+ </Translate>
</h2>
<img className="i-image-col" src={Dashboard} alt="" />
<p className="i-text-desc-col add-left-margin">
- The Apache APISIX Dashboard is designed to make it as easy as
- possible for users to operate Apache APISIX through a frontend
- interface. It’s opensource and ever evolving, feel free to
- contribute.
+ <Translate id="features.component.easyDashboard.message">
+ The Apache APISIX Dashboard is designed to make it as easy as
+ possible for users to operate Apache APISIX through a frontend
+ interface. It’s opensource and ever evolving, feel free to
+ contribute.
+ </Translate>
</p>
<div
className="hero-ctas add-left-margin"
style={{ width: 'fit-content' }}
>
<Link to={useBaseUrl('downloads')} className="btn btn-download">
- Downloads
+ <Translate id="features.component.easyDashboard.downloadBtn">Downloads</Translate>
</Link>
<ArrowAnim />
</div>
@@ -289,13 +309,15 @@ const Features:FC = () => {
style={{ height: 'fit-content', padding: '20px 0' }}
>
<h2 className="add-left-margin" style={{ width: 'fit-content' }}>
- User flexible
+ <Translate id="features.component.userFlexible.title">User flexible</Translate>
</h2>
<img className="i-image-col" src={Snippet} alt="" />
<p className="i-text-desc-col add-left-margin">
- The Apache APISIX dashboard is flexible to User demand, providing
- option to create custom modules through code matching your
- requirements, alongside the existing no-code toolchain.
+ <Translate id="features.component.userFlexible.message">
+ The Apache APISIX dashboard is flexible to User demand, providing
+ option to create custom modules through code matching your
+ requirements, alongside the existing no-code toolchain.
+ </Translate>
</p>
</div>
@@ -305,13 +327,15 @@ const Features:FC = () => {
style={{ height: 'fit-content', padding: '20px 0' }}
>
<h2 className="add-left-margin" style={{ width: 'fit-content' }}>
- Pluginised workflow
+ <Translate id="features.component.pluginised.title">Pluginised workflow</Translate>
</h2>
<img className="i-image-col" src={Plugin} alt="" />
<p className="i-text-desc-col add-left-margin">
- No need to reinvent the wheel again and again. Use inbuilt plugins
- to create high performance systems in tight deadlines. For something
- custom, there is option of building custom plugins.
+ <Translate id="features.component.pluginised.message">
+ No need to reinvent the wheel again and again. Use inbuilt plugins
+ to create high performance systems in tight deadlines. For something
+ custom, there is option of building custom plugins.
+ </Translate>
</p>
</div>
</div>
diff --git a/website/src/components/sections/HomeEventsSection.tsx b/website/src/components/sections/HomeEventsSection.tsx
index 0c3d94699c6..1ad187fcd3e 100644
--- a/website/src/components/sections/HomeEventsSection.tsx
+++ b/website/src/components/sections/HomeEventsSection.tsx
@@ -2,6 +2,8 @@ import type { FC } from 'react';
import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Translate from '@docusaurus/Translate';
+
import '../../css/customTheme.css';
import ChevronRight from '../../assets/icons/chevron-right.svg';
@@ -10,7 +12,7 @@ interface EventInfo {
fileName: string;
}
-const HomeEventsSection:FC = () => {
+const HomeEventsSection: FC = () => {
const { siteConfig } = useDocusaurusContext();
const events = (siteConfig.customFields.events as EventInfo[])
.slice(0, 4)
@@ -42,24 +44,32 @@ const HomeEventsSection:FC = () => {
className="docs-promo-head"
style={{ width: '100%', textAlign: 'center', left: '0' }}
>
- Stay updated about APISIX
+ <Translate id="homeEventsSection.component.title">Stay updated about APISIX</Translate>
</h3>
<p
className="docs-promo-subtitle"
style={{ width: '100%', textAlign: 'center', left: '0' }}
>
- Some Recent events
+ <Translate id="homeEventsSection.component.subtitle">Some Recent events</Translate>
</p>
<div className="event-card-container">{events}</div>
</div>
<div className="newsletter">
<p>
- Stay up to date about all Apache APISIX™ News, subscribe to our
+ <Translate id="homeEventsSection.component.message.news">
+ Stay up to date about all Apache APISIX™ News, subscribe to our
+ </Translate>
{' '}
- <a href="%">newsletter.</a>
+ <a href="/docs/general/join/">
+ <Translate id="homeEventsSection.component.link.newsletter">
+ newsletter.
+ </Translate>
+ </a>
</p>
<a className="news-button" href="/docs/general/join">
- Subscribe
+ <Translate id="homeEventsSection.component.link.Subscribe">
+ Subscribe
+ </Translate>
</a>
</div>
</div>
diff --git a/website/src/components/sections/OpensourcePromo.tsx b/website/src/components/sections/OpensourcePromo.tsx
index ad2c6b1c5d6..ab1c30a0212 100644
--- a/website/src/components/sections/OpensourcePromo.tsx
+++ b/website/src/components/sections/OpensourcePromo.tsx
@@ -3,6 +3,7 @@ import React from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
+import Translate from '@docusaurus/Translate';
import OssCanvas from '../OssCanvas';
import '../../css/customTheme.css';
@@ -12,19 +13,35 @@ const OpensourcePromo: FC = () => (
<div className="ossPromotion">
<div className="docs-promo">
<div className="docs-promo-text">
- <h3 className="docs-promo-head">Learn from developers</h3>
+ <h3 className="docs-promo-head">
+ <Translate id="openSourcePromo.component.title">Learn from developers</Translate>
+ </h3>
<div className="docs-promo-subtitle">
<p>
- Want to learn Apache APISIX usage, but don't know where to start. Check out our
+ <Translate id="openSourcePromo.component.subtitle.fragment1">
+ Want to learn Apache APISIX usage, but don't know where to start. Check out our
+ </Translate>
{' '}
- <Link style={{ color: '#e8433e' }} to={useBaseUrl('docs')}>docs.</Link>
+ <Link style={{ color: '#e8433e' }} to={useBaseUrl('docs')}>
+ <Translate id="openSourcePromo.component.link.docs">
+ docs.
+ </Translate>
+ </Link>
</p>
<p>
- Like visual information, check out our
+ <Translate id="openSourcePromo.component.subtitle.fragment2">
+ Like visual information, check out our
+ </Translate>
{' '}
- <a style={{ color: '#e8433e' }} href="https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g">Youtube channel</a>
+ <a style={{ color: '#e8433e' }} href="https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g">
+ <Translate id="openSourcePromo.component.link.Youtube">
+ Youtube channel
+ </Translate>
+ </a>
{' '}
- for detailed tutorials. Subscribe for more.
+ <Translate id="openSourcePromo.component.subtitle.fragment3">
+ for detailed tutorials. Subscribe for more.
+ </Translate>
</p>
</div>
</div>
@@ -35,15 +52,25 @@ const OpensourcePromo: FC = () => (
<div className="oss-promo">
<div className="oss-promo-text">
- <h3 className="oss-promo-head">Be a part of building APISIX</h3>
+ <h3 className="oss-promo-head">
+ <Translate id="openSourcePromo.component.ossPromo.title">
+ Be a part of building APISIX
+ </Translate>
+ </h3>
<div className="oss-promo-subtitle" style={{ color: 'rgb(199, 199, 199)' }}>
<p>
- Apache APISIX is opensource and ever-growing.
- Contributors are always welcome. Reach out to us on GitHub
+ <Translate id="openSourcePromo.component.ossPromo.subtitle">
+ Apache APISIX is opensource and ever-growing.
+ Contributors are always welcome. Reach out to us on GitHub
+ </Translate>
</p>
<div className="oss-promo-cta">
<GitHub style={{ width: '20px', margin: '0 10px 0 0' }} />
- <a href="https://github.com/apache/apisix" style={{ textDecoration: 'none' }}>Check us out</a>
+ <a href="https://github.com/apache/apisix" style={{ textDecoration: 'none' }}>
+ <Translate id="openSourcePromo.component.link.Github">
+ Check us out
+ </Translate>
+ </a>
</div>
</div>
</div>
diff --git a/website/src/pages/team.tsx b/website/src/pages/team.tsx
index 590ad7dc9bf..d1dd8e09a96 100644
--- a/website/src/pages/team.tsx
+++ b/website/src/pages/team.tsx
@@ -3,6 +3,9 @@ import React from 'react';
import styled from 'styled-components';
import Layout from '@theme/Layout';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+import Translate from '@docusaurus/Translate';
+
import GitHubLogo from '../assets/icons/github-logo.svg';
import IconCode from '../assets/icons/code.svg';
import IconStar from '../assets/icons/star.svg';
@@ -285,31 +288,46 @@ const Team: FC = () => {
return (
<Layout>
<Page>
- <PageTitle>Team</PageTitle>
- <PageSubtitle>We love open source.</PageSubtitle>
+ <PageTitle><Translate id="team.webpage.title.Team">Team</Translate></PageTitle>
+ <PageSubtitle><Translate id="team.webpage.title.DocumentSubtitle">We love open source.</Translate></PageSubtitle>
{memberSections}
- <SectionTitle>Contributors</SectionTitle>
+ <SectionTitle><Translate id="team.webpage.content.Contributors">Contributors</Translate></SectionTitle>
<SectionSubtitle>
- You can find all contributors of Apache APISIX from GitHub contribution
- list.
+ <Translate id="team.webpage.content.ContributorsSub">
+ You can find all contributors of Apache APISIX from GitHub contribution
+ list.
+ </Translate>
</SectionSubtitle>
<RepoCardsContainer>{repoComponents}</RepoCardsContainer>
- <SectionTitle>Contributor Over Time</SectionTitle>
+ <SectionTitle>
+ <Translate id="team.webpage.content.ContributorOverTime">Contributor Over Time</Translate>
+ </SectionTitle>
<SectionSubtitle>
- Note: This graph contains contributors from all repos under Apache APISIX
+ <Translate id="team.webpage.content.ContributorOverTimeNote">
+ Note: This graph contains contributors from all repos under Apache APISIX
+ </Translate>
</SectionSubtitle>
<img src="https://contributor-graph-api.apiseven.com/contributors-svg?repo=apache/apisix&merge=true" alt="Contributor Over Time" />
<ContributeCard>
<ContributeCardLeftSide>
- <ContributeCardTitle>🛠 Become A Committer </ContributeCardTitle>
+ <ContributeCardTitle>
+ 🛠
+ <Translate id="team.webpage.content.BecomeACommitter">
+ Become A Committer
+ </Translate>
+ </ContributeCardTitle>
<ContributeCardSubtitle>
- The Apache APISIX community follows the Apache Community's process
- on accepting a new committer. After a contributor participates
- APISIX's community actively, PMC and Committers will make decisions
- to invite the contributor join Committers and PMC.
+ <Translate id="team.webpage.content.BecomeACommitterInto">
+ The Apache APISIX community follows the Apache Community's process
+ on accepting a new committer. After a contributor participates
+ APISIX's community actively, PMC and Committers will make decisions
+ to invite the contributor join Committers and PMC.
+ </Translate>
</ContributeCardSubtitle>
<ContributeCardButton href="/docs/general/contributor-guide">
- Start Contribute
+ <Translate id="team.webpage.content.StartContributeBtn">
+ Start Contribute
+ </Translate>
</ContributeCardButton>
</ContributeCardLeftSide>
<ContributeCardRightSide>