You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2022/05/18 10:48:05 UTC
[apisix-website] branch master updated: feat: try 2 use code.json config, translations website (#1099)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan 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 4b2341ac3bd feat: try 2 use code.json config, translations website (#1099)
4b2341ac3bd is described below
commit 4b2341ac3bdd33e7a9f4d6080c856ac9d25c4f4c
Author: Barchiel <15...@qq.com>
AuthorDate: Wed May 18 18:47:46 2022 +0800
feat: try 2 use code.json config, translations website (#1099)
---
website/i18n/zh/code.json | 34 +++++++++++++++++++++++++
website/src/components/ArrowAnim.tsx | 3 ++-
website/src/components/sections/HeroSection.tsx | 17 ++++++++-----
website/src/pages/docs.tsx | 30 +++++++++++++---------
4 files changed, 65 insertions(+), 19 deletions(-)
diff --git a/website/i18n/zh/code.json b/website/i18n/zh/code.json
new file mode 100644
index 00000000000..83aea61ddca
--- /dev/null
+++ b/website/i18n/zh/code.json
@@ -0,0 +1,34 @@
+{
+ "hero.webpage.title.fragment1": {
+ "message": "简洁高效的",
+ "description": "Effortless and smooth"
+ },
+ "hero.webpage.title.fragment2": {
+ "message": "API 流量",
+ "description": "API Traffic"
+ },
+ "hero.webpage.title.fragment3": {
+ "message": "管理",
+ "description": "management"
+ },
+ "hero.webpage.subtitle.content": {
+ "message": "Apache APISIX 提供了丰富的流量管理功能，如负载平衡、动态上游、金丝雀发布、断路器、身份校验、可观测性等",
+ "description": "Apache APISIX provides rich traffic management features like Load Balancing, Dynamic Upstream, Canary Release, Circuit Breaking, Authentication, Observability, and more..."
+ },
+ "hero.webpage.download.btn": {
+ "message": "立即体验",
+ "description": "Download"
+ },
+ "arrowAnim.webpage.link.btn": {
+ "message": "阅读文档",
+ "description": "Go to docs..."
+ },
+ "docs.webpage.title.Document": {
+ "message": "文档",
+ "description": "Document"
+ },
+ "docs.webpage.title.DocumentSubtitle": {
+ "message": "让产品与技术背后的细节更加可视化",
+ "description": "We love open source."
+ }
+}
diff --git a/website/src/components/ArrowAnim.tsx b/website/src/components/ArrowAnim.tsx
index 5af293953c8..a07a6bf9b97 100644
--- a/website/src/components/ArrowAnim.tsx
+++ b/website/src/components/ArrowAnim.tsx
@@ -5,6 +5,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
import gsap from 'gsap';
import '../css/customTheme.css';
+import Translate from '@docusaurus/Translate';
const ArrowAnim: FC = () => {
const endpathRef1 = useRef(null);
@@ -53,7 +54,7 @@ const ArrowAnim: FC = () => {
onMouseLeave={mouseOut}
className="btn-docs"
>
- Go to docs...
+ <Translate id="arrowAnim.webpage.link.btn">Go to docs...</Translate>
<svg width="15" strokeWidth="3" height="25" viewBox="0 0 43 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path ref={endpathRef1} d="M27.5 1L42.5 16L27.5 31" stroke="black" strokeLinecap="round" strokeLinejoin="round" />
<path ref={endpathRef2} className="arrow-btn" d="M42.5 16H0.5" stroke="black" strokeLinecap="round" strokeLinejoin="round" />
diff --git a/website/src/components/sections/HeroSection.tsx b/website/src/components/sections/HeroSection.tsx
index bf2f16bfee2..466e2f7b540 100644
--- a/website/src/components/sections/HeroSection.tsx
+++ b/website/src/components/sections/HeroSection.tsx
@@ -3,12 +3,13 @@ import React, { useRef, useEffect } from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import gsap from 'gsap';
+import Translate from '@docusaurus/Translate';
import '../../css/customTheme.css';
import HeroCanvas from '../HeroCanvas';
import ArrowAnim from '../ArrowAnim';
-const HeroSection:FC = () => {
+const HeroSection: FC = () => {
const titleRef = useRef<HTMLHeadingElement>();
const subtitleRef = useRef<HTMLHeadingElement>();
const ctaRef = useRef<HTMLHeadingElement>();
@@ -41,19 +42,23 @@ const HeroSection:FC = () => {
<div className="hero-sec-wrap" style={{ width: '100%' }}>
<div className="hero-text">
<h2 ref={titleRef} className="hero-title hide-title">
- <span>Effortless and smooth</span>
+ <span><Translate id="hero.webpage.title.fragment1">Effortless and smooth</Translate></span>
{' '}
- <span style={{ color: '#E8433E' }}>API Traffic</span>
+ <span style={{ color: '#E8433E' }}>
+ <Translate id="hero.webpage.title.fragment2">API Traffic</Translate>
+ </span>
{' '}
- management.
+ <Translate id="hero.webpage.title.fragment3">management.</Translate>
</h2>
- <h3 ref={subtitleRef} className="hero-subtitle hide-subtitle">Apache APISIX provides rich traffic management features like Load Balancing, Dynamic Upstream, Canary Release, Circuit Breaking, Authentication, Observability, and more...</h3>
+ <h3 ref={subtitleRef} className="hero-subtitle hide-subtitle">
+ <Translate id="hero.webpage.subtitle.content">Apache APISIX provides rich traffic management features like Load Balancing, Dynamic Upstream, Canary Release, Circuit Breaking, Authentication, Observability, and more...</Translate>
+ </h3>
<div ref={ctaRef} className="hero-ctas hide-ctas">
<Link
to={useBaseUrl('downloads')}
className="btn btn-download"
>
- Downloads
+ <Translate id="hero.webpage.download.btn">Downloads</Translate>
</Link>
<ArrowAnim />
</div>
diff --git a/website/src/pages/docs.tsx b/website/src/pages/docs.tsx
index cf82b550a05..40fd2041964 100644
--- a/website/src/pages/docs.tsx
+++ b/website/src/pages/docs.tsx
@@ -5,6 +5,8 @@ import '../css/customTheme.css';
import Layout from '@theme/Layout';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Translate from '@docusaurus/Translate';
+
import IconTriangle from '../assets/icons/triangle.svg';
import IconSquare from '../assets/icons/square.svg';
import IconHexagon from '../assets/icons/hexagon.svg';
@@ -124,17 +126,17 @@ const shapeComponentMap = {
};
interface DocInfo {
- name: string;
- nameInParamCase: string;
- description: string;
- shape: string;
- color: string;
- version: string;
- releaseDate: string;
- firstDocPath: string;
+ name: string;
+ nameInParamCase: string;
+ description: string;
+ shape: string;
+ color: string;
+ version: string;
+ releaseDate: string;
+ firstDocPath: string;
}
-interface ProjectCardProps extends DocInfo {}
+interface ProjectCardProps extends DocInfo { }
const ProjectCard: FC<ProjectCardProps> = (props) => {
const {
@@ -158,7 +160,7 @@ const ProjectCard: FC<ProjectCardProps> = (props) => {
<VersionInfo className="docs-versioninfo">
Latest version
<span>{version}</span>
- released at
+ released at
<span>{releaseDate}</span>
</VersionInfo>
</Card>
@@ -177,8 +179,12 @@ const Docs: FC = () => {
return (
<Layout>
<Page>
- <PageTitle>Documents</PageTitle>
- <PageSubtitle>We love open source.</PageSubtitle>
+ <PageTitle>
+ <Translate id="docs.webpage.title.Document">Document</Translate>
+ </PageTitle>
+ <PageSubtitle>
+ <Translate id="docs.webpage.title.DocumentSubtitle">We love open source.</Translate>
+ </PageSubtitle>
<CardsContainer>{projects}</CardsContainer>
</Page>
</Layout>