Add Chinese language version of about page

2023-01-26 22:35:42 +08:00
parent 20616092cc
commit 1f0f2bdb37
5 changed files with 153 additions and 160 deletions
--- a/packages/web/components/templates/About.tsx
+++ b/packages/web/components/templates/About.tsx
@ -6,7 +6,11 @@ import {
 } from './landing/LandingSectionsContainer'
 import { LandingFooter } from './landing/LandingFooter'

-export function About(): JSX.Element {
+type AboutProps = {
+  lang: 'en' | 'zh'
+}
+
+export function About(props: AboutProps): JSX.Element {
  return (
    <>
      <LandingHeader />
@ -39,8 +43,10 @@ export function About(): JSX.Element {
              textAlign: 'center',
            }}
          >
-            Omnivore is the free, open source, read-it-later app for serious
-            readers.
+            {props.lang == 'zh'
+              ? `Omnivore 为认真读者提供免付费read-it-later应用程序`
+              : `Omnivore is the free, open source, read-it-later app for serious
+            readers.`}
          </Box>
          <Box
            css={{
@ -51,8 +57,10 @@ export function About(): JSX.Element {
              fontWeight: '600',
            }}
          >
-            Distraction free. Privacy focused. Open source. Designed for
-            knowledge workers and lifelong learners.
+            {props.lang == 'zh'
+              ? `休闲阅读。保护隐私。Open source。专为知识工作者和终身学习者设计。`
+              : `Distraction free. Privacy focused. Open source. Designed for
+            knowledge workers and lifelong learners.`}
          </Box>

          <Box
@ -62,10 +70,12 @@ export function About(): JSX.Element {
              textAlign: 'center',
            }}
          >
-            Save articles, newsletters, and documents and read them later —
+            {props.lang == 'zh'
+              ? `为您保存文章、邮件订阅或文件，等休闲时再去阅读。可以随意添加注释和高亮。按自己喜好设定阅读列表。还可与其他个人电子设备同步。`
+              : `Save articles, newsletters, and documents and read them later —
            focused and distraction free. Add notes and highlights. Organize
            your reading list the way you want and sync it across all your
-            devices.
+            devices.`}
          </Box>
          <Box
            css={{
@ -76,10 +86,10 @@ export function About(): JSX.Element {
              justifyContent: 'center',
            }}
          >
-            <GetStartedButton />
+            <GetStartedButton lang={props.lang} />
          </Box>
        </VStack>
-        <LandingSectionsContainer />
+        <LandingSectionsContainer lang={props.lang} />
      </VStack>
      <LandingFooter />
    </>
--- a/packages/web/components/templates/landing/LandingSectionsContainer.tsx
+++ b/packages/web/components/templates/landing/LandingSectionsContainer.tsx
@ -2,7 +2,11 @@ import { VStack, Box } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { LandingSection } from './LandingSection'

-export function GetStartedButton(): JSX.Element {
+type GetStartedButtonProps = {
+  lang: 'en' | 'zh'
+}
+
+export function GetStartedButton(props: GetStartedButtonProps): JSX.Element {
  return (
    <Button
      style="ctaDarkYellow"
@ -22,7 +26,7 @@ export function GetStartedButton(): JSX.Element {
        e.preventDefault()
      }}
    >
-      Sign Up for Free
+      {props.lang == 'zh' ? `免费注册` : `Sign Up for Free`}
    </Button>
  )
 }
@ -78,7 +82,110 @@ const callToActionText = {
  },
 }

-export function LandingSectionsContainer(): JSX.Element {
+type LandingSectionsContainerProps = {
+  lang: 'en' | 'zh'
+}
+
+const sections = [
+  {
+    en: {
+      titleText: `Save it now. Read it later.`,
+      descriptionText: `Save articles, PDFs, and Twitter threads as you come across them
+      using Omnivore&aposs mobile apps and browser extensions. Read them
+      later using our distraction free reader.`,
+    },
+    zh: {
+      titleText: `先保存，后阅读`,
+      descriptionText: `看到有趣的内容，但没时间阅读？不论是文章、PDF或是推特线程，只需将它们保存下来，等稍后有空再阅读。Omnivore 应用程序适用于iOS、Android 和主要网络浏览扩展程序。`,
+    },
+    imageIdx: `03`,
+  },
+  {
+    en: {
+      titleText: `Get all your newsletters in one place.`,
+      descriptionText: `Send newsletters directly to your Omnivore library rather than
+      scattered across multiple inboxes. Read them on your own time, away
+      from the constant distractions and interruptions of your email.`,
+    },
+    zh: {
+      titleText: `集合邮件订阅`,
+      descriptionText: `您不再需要到不同收件箱提取订阅的邮件，只要将它们发送到 Omnivore Library，即可在同一处随心阅读，不受其他电子邮件或 substack 的干扰。`,
+    },
+    imageIdx: `04`,
+  },
+  {
+    en: {
+      titleText: `Keep your reading organized, whatever that means to you.`,
+      descriptionText: `Keep your reading organized and easily available with labels,
+      filters, rules, and fully indexed text searches. We&aposre not here
+      to tell you how to stay organized — our job is to give you the tools
+      to build a system that works for you.`,
+    },
+    zh: {
+      titleText: `按喜好组织阅读系统`,
+      descriptionText: `我们不会限定您如何组织系统，只提供您所需的工具，如标签、过滤器和完整的文本索引搜索，让您按自己的喜好和需求设定组织规则。`,
+    },
+    imageIdx: `05`,
+  },
+  {
+    en: {
+      titleText: `Add highlights and notes.`,
+      descriptionText: `Become a better reader — engage your brain and improve retention by
+      reading actively, not passively. Highlight key sections and add
+      notes as you read. You can access your highlights and notes any time
+      — they stay with your articles forever.`,
+    },
+    zh: {
+      titleText: `添加高亮和注释`,
+      descriptionText: `想提高阅读效率？积极动用大脑，为关键的段落添加高亮或注释，能提高您阅读记忆的保留。这些标注将永久保存在文件里，方便您随时搜索使用。`,
+    },
+    imageIdx: `06`,
+  },
+  {
+    en: {
+      titleText: `Sync with your second brain.`,
+      descriptionText: `Omnivore syncs with popular Personal Knowledge Management systems
+      including Logseq and Obsidian, so you can pull all your saved
+      reading, highlights, and notes into your second brain.`,
+    },
+    zh: {
+      titleText: `与您的“第二大脑”同步`,
+      descriptionText: `Omnivore 应用程序能与个人知识管理系统如 Logseq 和 Obsidian 同步，让您轻而易举地综合所有保存文章、高亮和注释。`,
+    },
+    imageIdx: `07`,
+  },
+  {
+    en: {
+      titleText: `Listen to your reading with text-to-speech.`,
+      descriptionText: `Work through your to-be-read list and give your eyes a break with
+      TTS, exclusively in the Omnivore app for iOS. Realistic,
+      natural-sounding AI voices will read any saved article aloud.`,
+    },
+    zh: {
+      titleText: `使用 text-to-speech 功能聆听阅读`,
+      descriptionText: `使用TTS逼真、自然的人工智能声音为您阅读待读列表中的读物，让眼睛好好休息一下。这便是我们iOS 版Omnivore 应用程序的独家功能。`,
+    },
+    imageIdx: `08`,
+    maxWidth: '85%',
+  },
+  {
+    en: {
+      titleText: `Open source means you're in control.`,
+      descriptionText: `Reading is a lifetime activity, and you shouldn&apos;t have to worry
+      you&apos;ll lose your library after you&apos;ve spent years building
+      it. Our open-source platform ensures your reading won&apos;t be held
+      prisoner in a proprietary system.`,
+    },
+    zh: {
+      titleText: `开源软件给予您控制权`,
+      descriptionText: `阅读是终身的活动，不应担心失去自己多年辛苦建立的图书馆。我们的开源平台，就是为了确保您的阅读不会受限于任何专有系统。`,
+    },
+    imageIdx: `09`,
+  },
+]
+export function LandingSectionsContainer(
+  props: LandingSectionsContainerProps
+): JSX.Element {
  return (
    <VStack alignment="center" distribution="start" css={containerStyles}>
      <Box
@ -105,153 +212,29 @@ export function LandingSectionsContainer(): JSX.Element {
        />
      </Box>

-      <LandingSection
-        titleText="Save it now. Read it later."
-        descriptionText={
-          <>
-            <p>
-              Save articles, PDFs, and Twitter threads as you come across them
-              using Omnivore&aposs mobile apps and browser extensions. Read them
-              later using our distraction free reader.
-            </p>
-          </>
-        }
-        image={
-          <img
-            srcSet="/static/landing/landingPage-03@1x.png,
-                      /static/landing/landingPage-03@2x.png,
-                      /static/landing/landingPage-03@3x.png 3x"
-            alt="landing-3"
-            style={{ maxWidth: '100%' }}
+      {sections.map((section) => {
+        return (
+          <LandingSection
+            titleText={section[props.lang].titleText}
+            descriptionText={<p>{section[props.lang].descriptionText}</p>}
+            image={
+              <img
+                srcSet={`/static/landing/landingPage-${section.imageIdx}@1x.png,
+                              /static/landing/landingPage-${section.imageIdx}@2x.png 2x,
+                              /static/landing/landingPage-${section.imageIdx}@3x.png 3x`}
+                alt={`landing-${section.imageIdx}`}
+                style={{ maxWidth: section.maxWidth ?? '100%' }}
+              />
+            }
          />
-        }
-      />
-
-      <LandingSection
-        titleText="Get all your newsletters in one place."
-        descriptionText={
-          <p>
-            Send newsletters directly to your Omnivore library rather than
-            scattered across multiple inboxes. Read them on your own time, away
-            from the constant distractions and interruptions of your email.
-          </p>
-        }
-        image={
-          <img
-            srcSet="/static/landing/landingPage-04.png,
-                      /static/landing/landingPage-04@2x.png 2x,
-                      /static/landing/landingPage-04@3x.png 3x"
-            alt="landing-4"
-            style={{ maxWidth: '100%' }}
-          />
-        }
-      />
-
-      <LandingSection
-        titleText="Keep your reading organized, whatever that means to you."
-        descriptionText={
-          <p>
-            Keep your reading organized and easily available with labels,
-            filters, rules, and fully indexed text searches. We&aposre not here
-            to tell you how to stay organized — our job is to give you the tools
-            to build a system that works for you.
-          </p>
-        }
-        image={
-          <img
-            srcSet="/static/landing/landingPage-05@1x.png,
-                      /static/landing/landingPage-05@2x.png 2x,
-                      /static/landing/landingPage-05@3x.png 3x"
-            alt="landing-5"
-            style={{ maxWidth: '100%' }}
-          />
-        }
-      />
-
-      <LandingSection
-        titleText="Add highlights and notes."
-        descriptionText={
-          <p>
-            Become a better reader — engage your brain and improve retention by
-            reading actively, not passively. Highlight key sections and add
-            notes as you read. You can access your highlights and notes any time
-            — they stay with your articles forever.
-          </p>
-        }
-        image={
-          <img
-            srcSet="/static/landing/landingPage-06@1x.png,
-                      /static/landing/landingPage-06@2x.png 2x,
-                      /static/landing/landingPage-06@3x.png 3x"
-            alt="landing-6"
-            style={{ maxWidth: '100%' }}
-          />
-        }
-      />
-
-      <LandingSection
-        titleText="Sync with your second brain."
-        descriptionText={
-          <p>
-            Omnivore syncs with popular Personal Knowledge Management systems
-            including Logseq and Obsidian, so you can pull all your saved
-            reading, highlights, and notes into your second brain.
-          </p>
-        }
-        image={
-          <img
-            srcSet="/static/landing/landingPage-07@1x.png,
-                    /static/landing/landingPage-07@2x.png 2x,
-                    /static/landing/landingPage-07@3x.png 3x"
-            alt="landing-7"
-            style={{ maxWidth: '100%' }}
-          />
-        }
-      />
-
-      <LandingSection
-        titleText="Listen to your reading with text-to-speech."
-        descriptionText={
-          <p>
-            Work through your to-be-read list and give your eyes a break with
-            TTS, exclusively in the Omnivore app for iOS. Realistic,
-            natural-sounding AI voices will read any saved article aloud.
-          </p>
-        }
-        image={
-          <img
-            srcSet="/static/landing/landingPage-08@1x.png,
-                    /static/landing/landingPage-08@2x.png 2x,
-                    /static/landing/landingPage-08@3x.png 3x"
-            alt="landing-8"
-            style={{ maxWidth: '85%' }}
-          />
-        }
-      />
-
-      <LandingSection
-        titleText="Open source means you're in control."
-        descriptionText={
-          <p>
-            Reading is a lifetime activity, and you shouldn&apos;t have to worry
-            you&apos;ll lose your library after you&apos;ve spent years building
-            it. Our open-source platform ensures your reading won&apos;t be held
-            prisoner in a proprietary system.
-          </p>
-        }
-        image={
-          <img
-            srcSet="/static/landing/landingPage-09@1x.png,
-                    /static/landing/landingPage-09@2x.png 2x"
-            alt="landing-9"
-            style={{ maxWidth: '100%' }}
-          />
-        }
-      />
+        )
+      })}

      <VStack alignment="center" css={callToActionStyles}>
-        <Box css={callToActionText}>Get Started With Omnivore Today</Box>
-        <GetStartedButton />
+        {props.lang == 'en' && (
+          <Box css={callToActionText}>Get Started With Omnivore Today</Box>
+        )}
+        <GetStartedButton lang={props.lang} />
      </VStack>
    </VStack>
  )
--- a/packages/web/pages/about.tsx
+++ b/packages/web/pages/about.tsx
@ -49,7 +49,7 @@ export default function LandingPage(): JSX.Element {
        description="Omnivore is the free, open source, read-it-later app for serious readers."
      />

-      <About />
+      <About lang="en" />
    </>
  )
 }
--- a/packages/web/pages/index.tsx
+++ b/packages/web/pages/index.tsx
@ -72,7 +72,7 @@ export default function LandingPage(): JSX.Element {
        description="Omnivore is the free, open source, read-it-later app for serious readers."
      />

-      <About />
+      <About lang="en" />
    </>
  )
 }
--- a/packages/web/pages/zh/index.tsx
+++ b/packages/web/pages/zh/index.tsx
@ -46,10 +46,10 @@ export default function LandingPage(): JSX.Element {
        title="Omnivore"
        path="/about"
        ogImage="/static/images/og-homepage-zh.png"
-        description="Omnivore is the free, open source, read-it-later app for serious readers."
+        description="Omnivore 为认真读者提供免付费read-it-later应用程序"
      />

-      <About />
+      <About lang="zh" />
    </>
  )
 }