diff --git a/website/src/components/ColorGenerator/index.tsx b/website/src/components/ColorGenerator/index.tsx index f12be2f770..b2edfb1d44 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 eeea130f5b..45c4186fa3 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 19909c55b6..f023eac963 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 fe277a41f3..baf895fc77 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 03911e754e..906285dac5 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 6b6215e395..5c3b263c9f 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 c020361111..dcc74aac53 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 d1769fcafc..f7f4036245 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 - + + +