From f377097f0b5ea4c698affdcbf48dbd25dc11525a Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 27 Jan 2022 18:04:23 +0800 Subject: [PATCH] docs: mark a lot of website texts as translatable (#6483) --- .../src/components/ColorGenerator/index.tsx | 93 ++++++++++++--- website/src/components/Playground/index.tsx | 2 +- .../src/components/TeamProfileCards/index.tsx | 111 ++++++++++++------ website/src/components/UpgradeGuide/index.tsx | 51 +++++--- website/src/data/users.tsx | 2 +- .../_components/ShowcaseCard/index.tsx | 3 +- website/src/pages/showcase/index.tsx | 51 ++++++-- website/src/pages/versions.tsx | 86 ++++++++++---- 8 files changed, 296 insertions(+), 103 deletions(-) diff --git a/website/src/components/ColorGenerator/index.tsx b/website/src/components/ColorGenerator/index.tsx index f12be2f770cd..b2edfb1d4432 100644 --- a/website/src/components/ColorGenerator/index.tsx +++ b/website/src/components/ColorGenerator/index.tsx @@ -11,6 +11,7 @@ import Color from 'color'; import CodeBlock from '@theme/CodeBlock'; import Admonition from '@theme/Admonition'; import Link from '@docusaurus/Link'; +import Translate from '@docusaurus/Translate'; import {useColorMode} from '@docusaurus/theme-common'; import { @@ -86,20 +87,31 @@ function ColorGenerator(): JSX.Element {

- Aim for at least{' '} - - WCAG-AA contrast ratio - {' '} - for the primary color to ensure readability. Use the Docusaurus - website itself to preview how your color palette would look like. You - can use alternative palettes in dark mode because one color - doesn't usually work in both light and dark mode. + + + WCAG-AA contrast ratio + + + ), + }}> + { + "Aim for at least {wcagLink} for the primary color to ensure readability. Use the Docusaurus website itself to preview how your color palette would look like. You can use alternative palettes in dark mode because one color doesn't usually work in both light and dark mode." + } +

{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} {' '} - Edit {isDarkTheme ? 'light' : 'dark'} mode + + light + + ) : ( + + dark + + ), + }}> + {'Edit {colorMode} mode'} +

{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} - CSS Variable Name - Hex - Adjustment - Contrast Rating + + + CSS Variable Name + + + + + Hex + + + + + Adjustment + + + + + Contrast Rating + + @@ -225,8 +279,11 @@ function ColorGenerator(): JSX.Element {

- Replace the variables in src/css/custom.css with these new - variables. + src/css/custom.css}}> + {'Replace the variables in {cssPath} with these new variables.'} +

{`${isDarkTheme ? "html[data-theme='dark']" : ':root'} { diff --git a/website/src/components/Playground/index.tsx b/website/src/components/Playground/index.tsx index eeea130f5b9e..45c4186fa397 100644 --- a/website/src/components/Playground/index.tsx +++ b/website/src/components/Playground/index.tsx @@ -49,7 +49,7 @@ const Playgrounds = [ interface Props { name: string; - image: any; + image: string; url: string; description: JSX.Element; } diff --git a/website/src/components/TeamProfileCards/index.tsx b/website/src/components/TeamProfileCards/index.tsx index 19909c55b645..f023eac9631c 100644 --- a/website/src/components/TeamProfileCards/index.tsx +++ b/website/src/components/TeamProfileCards/index.tsx @@ -164,63 +164,108 @@ export function StudentFellowsTeamRow(): JSX.Element { name="Anshul Goyal" githubUrl="https://github.com/anshulrgoyal" twitterUrl="https://twitter.com/ar_goyal"> - Fullstack developer who loves to code and try new technologies. In his - free time, he contributes to open source, writes blog posts on his{' '} - - website - {' '} - and watches Anime. + + + website + + + ), + }}> + { + 'Fullstack developer who loves to code and try new technologies. In his free time, he contributes to open source, writes blog posts on his {websiteLink} and watches Anime.' + } + - Developer and Creative, trying to gain the skills to build whatever he - can think of. + + Developer and Creative, trying to gain the skills to build whatever he + can think of. + - Fanny got started with web development in high school, building a - project for the school kitchen. In her free time she loves contributing - to Open Source, occasionally writing on{' '} - - her blog - {' '} - about her experiences, cooking, and creating{' '} - - Spotify playlists - - . + + + her blog + + + ), + spotifyLink: ( + + + Spotify playlists + + + ), + }}> + { + 'Fanny got started with web development in high school, building a project for the school kitchen. In her free time she loves contributing to Open Source, occasionally writing on {blogLink} about her experiences, cooking, and creating {spotifyLink}.' + } + - Sam started programming in 2011 and built his{' '} - website in 2015. He is interested - in programming languages, dev infra and web development, and has built - his own{' '} - programming language and{' '} - mini React. + + + + ), + samLangLink: ( + + + programming language + + + ), + miniReactLink: ( + + + mini React + + + ), + }}> + { + 'Sam started programming in 2011 and built his {websiteLink} in 2015. He is interested in programming languages, dev infra and web development, and has built his own {samLangLink} and {miniReactLink}.' + } + - Open-source enthusiast who aims to become as awesome as the other humans - on this page. Working on Docusaurus brought him closer to his goal. 🌱 + + Open-source enthusiast who aims to become as awesome as the other + humans on this page. Working on Docusaurus brought him closer to his + goal. 🌱 + - Fullstack web developer who loves learning new technologies and applying - them! Loves contributing to open source as well as writing content - articles and tutorials. + + Fullstack web developer who loves learning new technologies and + applying them! Loves contributing to open source as well as writing + content articles and tutorials. + ); diff --git a/website/src/components/UpgradeGuide/index.tsx b/website/src/components/UpgradeGuide/index.tsx index fe277a41f382..baf895fc775b 100644 --- a/website/src/components/UpgradeGuide/index.tsx +++ b/website/src/components/UpgradeGuide/index.tsx @@ -15,6 +15,7 @@ import Admonition from '@theme/Admonition'; import Link from '@docusaurus/Link'; import CodeBlock from '@theme/CodeBlock'; import useIsBrowser from '@docusaurus/useIsBrowser'; +import Translate from '@docusaurus/Translate'; function PackageJson() { const latestVersion = useLatestVersion(); @@ -50,12 +51,21 @@ function VersionNotice() { return (

- You are browsing an archived version and the snippet below is - outdated. Please go to the{' '} - - main site - {' '} - and follow the instructions there to upgrade to the latest version. + + + main site + + + ), + }}> + { + 'You are browsing an archived version and the snippet below is outdated. Please go to the {mainSiteLink} and follow the instructions there to upgrade to the latest version.' + } +

); @@ -65,12 +75,23 @@ function VersionNotice() { return (

- You are browsing the documentation of an unreleased version. If you - want to use any unreleased feature, you can use the{' '} - - @canary release - - . + + @canary}}> + {'{canaryTag} release'} + + + ), + }}> + { + 'You are browsing the documentation of an unreleased version. If you want to use any unreleased feature, you can use the {canaryDocLink}.' + } +

); @@ -79,8 +100,10 @@ function VersionNotice() { return (

- You are browsing the documentation of an outdated version. The snippet - below shows how to upgrade to the latest version. + + You are browsing the documentation of an outdated version. The + snippet below shows how to upgrade to the latest version. +

); diff --git a/website/src/data/users.tsx b/website/src/data/users.tsx index 03911e754e1a..906285dac5c0 100644 --- a/website/src/data/users.tsx +++ b/website/src/data/users.tsx @@ -62,7 +62,7 @@ export type TagType = export type User = { title: string; description: string; - preview: any; + preview: string; website: string; source: string | null; tags: TagType[]; diff --git a/website/src/pages/showcase/_components/ShowcaseCard/index.tsx b/website/src/pages/showcase/_components/ShowcaseCard/index.tsx index 6b6215e39527..5c3b263c9fd6 100644 --- a/website/src/pages/showcase/_components/ShowcaseCard/index.tsx +++ b/website/src/pages/showcase/_components/ShowcaseCard/index.tsx @@ -9,6 +9,7 @@ import React, {memo} from 'react'; import clsx from 'clsx'; import Image from '@theme/IdealImage'; import Link from '@docusaurus/Link'; +import Translate from '@docusaurus/Translate'; import styles from './styles.module.css'; import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon'; @@ -80,7 +81,7 @@ const ShowcaseCard = memo(({user}: {user: User}) => ( 'button button--secondary button--sm', styles.showcaseCardSrcBtn, )}> - source + source )} diff --git a/website/src/pages/showcase/index.tsx b/website/src/pages/showcase/index.tsx index c02036111197..dcc74aac5356 100644 --- a/website/src/pages/showcase/index.tsx +++ b/website/src/pages/showcase/index.tsx @@ -29,7 +29,9 @@ import { import ShowcaseTooltip from './_components/ShowcaseTooltip'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; +import Translate, {translate} from '@docusaurus/Translate'; import {useHistory, useLocation} from '@docusaurus/router'; +import {usePluralForm} from '@docusaurus/theme-common'; import styles from './styles.module.css'; @@ -127,22 +129,42 @@ function ShowcaseHeader() { href={EDIT_URL} target="_blank" rel="noreferrer"> - 🙏 Please add your site + + 🙏 Please add your site + ); } +function useSiteCountPlural() { + const {selectMessage} = usePluralForm(); + return (sitesCount: number) => + selectMessage( + sitesCount, + translate( + { + id: 'showcase.filters.resultCount', + description: + 'Pluralized label for the number of sites found on the showcase. Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)', + message: '1 site|{sitesCount} sites', + }, + {sitesCount}, + ), + ); +} + function ShowcaseFilters() { const filteredUsers = useFilteredUsers(); + const siteCountPlural = useSiteCountPlural(); return (
-

Filters

- {`(${filteredUsers.length} site${ - filteredUsers.length > 1 ? 's' : '' - })`} +

+ Filters +

+ {siteCountPlural(filteredUsers.length)}
@@ -204,7 +226,10 @@ function SearchBar() {
{ setValue(e.currentTarget.value); @@ -234,7 +259,9 @@ function ShowcaseCards() { return (
-

No result

+

+ No result +

@@ -252,7 +279,11 @@ function ShowcaseCards() { 'margin-bottom--md', styles.showcaseFavoriteHeader, )}> -

Our favorites

+

+ + Our favorites + +

@@ -264,7 +295,9 @@ function ShowcaseCards() {
-

All sites

+

+ All sites +

    {otherUsers.map((user) => ( diff --git a/website/src/pages/versions.tsx b/website/src/pages/versions.tsx index d1769fcafc59..f7f403624571 100644 --- a/website/src/pages/versions.tsx +++ b/website/src/pages/versions.tsx @@ -9,7 +9,8 @@ import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Link from '@docusaurus/Link'; import Layout from '@theme/Layout'; - +import Heading from '@theme/Heading'; +import Translate from '@docusaurus/Translate'; import { useVersions, useLatestVersion, @@ -38,24 +39,41 @@ function Version(): JSX.Element { title="Versions" description="Docusaurus 2 Versions page listing all documented site versions">
    -

    Docusaurus documentation versions

    + + + Docusaurus documentation versions + + {latestVersion && (
    -

    Current version (Stable)

    + + + Current version (Stable) + +

    - Here you can find the documentation for current released version. + + Here you can find the documentation for current released + version. +

    @@ -66,17 +84,25 @@ function Version(): JSX.Element { {currentVersion !== latestVersion && (
    -

    Next version (Unreleased)

    + + + Next version (Unreleased) + +

    - Here you can find the documentation for work-in-process unreleased - version. + + Here you can find the documentation for work-in-process + unreleased version. +

    {latestVersion.label} - Documentation + + + Documentation + + - Release Notes + + Release Notes +
    @@ -86,10 +112,16 @@ function Version(): JSX.Element { {(pastVersions.length > 0 || VersionsArchivedList.length > 0) && (
    -

    Past versions (Not maintained anymore)

    + + + Past versions (Not maintained anymore) + +

    - Here you can find documentation for previous versions of - Docusaurus. + + Here you can find documentation for previous versions of + Docusaurus. +

    {currentVersion.label} - Documentation + + +
    @@ -97,12 +129,14 @@ function Version(): JSX.Element { ))} @@ -110,12 +144,14 @@ function Version(): JSX.Element { ))} @@ -133,11 +169,9 @@ function Version(): JSX.Element {
    {version.label} - Documentation + + + - - Release Notes - + + +
    {versionName} - Documentation + + + - - Release Notes - + + +
    1.x - - Documentation - + + +