Skip to content

Commit

Permalink
docs: mark a lot of website texts as translatable (#6483)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Josh-Cena
Josh-Cena authored Jan 27, 2022
1 parent 37be796 commit f377097
Show file tree
Hide file tree
Showing 8 changed files with 296 additions and 103 deletions.
93 changes: 75 additions & 18 deletions website/src/components/ColorGenerator/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -86,20 +87,31 @@ function ColorGenerator(): JSX.Element {
<div>
<Admonition type="tip">
<p>
Aim for at least{' '}
<Link href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">
WCAG-AA contrast ratio
</Link>{' '}
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&apos;t usually work in both light and dark mode.
<Translate
id="colorGenerator.tip.body"
values={{
wcagLink: (
<Link href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">
<Translate id="colorGenerator.tip.body.wcagLink.label">
WCAG-AA contrast ratio
</Translate>
</Link>
),
}}>
{
"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."
}
</Translate>
</p>
</Admonition>
<p>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label htmlFor="primary_color">
<strong className="margin-right--sm">Primary Color:</strong>
<strong className="margin-right--sm">
<Translate id="colorGenerator.inputs.primary.label">
Primary Color:
</Translate>
</strong>
</label>{' '}
<input
id="primary_color"
Expand All @@ -125,7 +137,21 @@ function ColorGenerator(): JSX.Element {
setDarkTheme();
}
}}>
Edit {isDarkTheme ? 'light' : 'dark'} mode
<Translate
id="colorGenerator.inputs.modeToggle.label"
values={{
colorMode: isDarkTheme ? (
<Translate id="colorGenerator.inputs.modeToggle.label.colorMode.light">
light
</Translate>
) : (
<Translate id="colorGenerator.inputs.modeToggle.label.colorMode.dark">
dark
</Translate>
),
}}>
{'Edit {colorMode} mode'}
</Translate>
</button>
<button
type="button"
Expand All @@ -136,13 +162,19 @@ function ColorGenerator(): JSX.Element {
setBackground(DEFAULT_BACKGROUND_COLOR);
setShades(COLOR_SHADES);
}}>
Reset
<Translate id="colorGenerator.inputs.resetButton.label">
Reset
</Translate>
</button>
</p>
<p>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label htmlFor="background_color">
<strong className="margin-right--sm">Background:</strong>
<strong className="margin-right--sm">
<Translate id="colorGenerator.inputs.background.label">
Background:
</Translate>
</strong>
</label>
<input
id="background_color"
Expand All @@ -158,10 +190,32 @@ function ColorGenerator(): JSX.Element {
<table className={styles.colorTable}>
<thead>
<tr>
<th>CSS Variable Name</th>
<th>Hex</th>
<th>Adjustment</th>
<th>Contrast Rating</th>
<th>
<Translate id="colorGenerator.table.heading1">
CSS Variable Name
</Translate>
</th>
<th>
<Translate
id="colorGenerator.table.heading2"
description="This column is the color's representation in hex">
Hex
</Translate>
</th>
<th>
<Translate
id="colorGenerator.table.heading3"
description="This column is the adjusted shades' adjustment values relative to the primary color">
Adjustment
</Translate>
</th>
<th>
<Translate
id="colorGenerator.table.heading4"
description="This column is WCAG contrast rating: AAA, AA, Fail">
Contrast Rating
</Translate>
</th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -225,8 +279,11 @@ function ColorGenerator(): JSX.Element {
</table>
</div>
<p>
Replace the variables in <code>src/css/custom.css</code> with these new
variables.
<Translate
id="colorGenerator.text"
values={{cssPath: <code>src/css/custom.css</code>}}>
{'Replace the variables in {cssPath} with these new variables.'}
</Translate>
</p>
<CodeBlock className="language-css" title="/src/css/custom.css">
{`${isDarkTheme ? "html[data-theme='dark']" : ':root'} {
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/Playground/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const Playgrounds = [

interface Props {
name: string;
image: any;
image: string;
url: string;
description: JSX.Element;
}
Expand Down
111 changes: 78 additions & 33 deletions website/src/components/TeamProfileCards/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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{' '}
<a href="https://anshulgoyal.dev/" target="_blank" rel="noreferrer">
website
</a>{' '}
and watches Anime.
<Translate
id="team.profile.Anshul Goyal.body"
values={{
websiteLink: (
<Link href="https://anshulgoyal.dev/">
<Translate id="team.profile.Anshul Goyal.body.websiteLink.label">
website
</Translate>
</Link>
),
}}>
{
'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.'
}
</Translate>
</TeamProfileCardCol>
<TeamProfileCardCol
name="Drew Alexander"
githubUrl="https://github.com/drewbi">
Developer and Creative, trying to gain the skills to build whatever he
can think of.
<Translate id="team.profile.Drew Alexander.body">
Developer and Creative, trying to gain the skills to build whatever he
can think of.
</Translate>
</TeamProfileCardCol>
<TeamProfileCardCol
name="Fanny Vieira"
githubUrl="https://github.com/fanny"
twitterUrl="https://twitter.com/fannyvieiira">
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{' '}
<a href="https://dev.to/fannyvieira" target="_blank" rel="noreferrer">
her blog
</a>{' '}
about her experiences, cooking, and creating{' '}
<a
href="https://open.spotify.com/user/anotherfanny"
target="_blank"
rel="noreferrer">
Spotify playlists
</a>
.
<Translate
id="team.profile.Fanny Vieira.body"
values={{
blogLink: (
<Link href="https://dev.to/fannyvieira">
<Translate id="team.profile.Fanny Vieira.body.blogLink.label">
her blog
</Translate>
</Link>
),
spotifyLink: (
<Link href="https://open.spotify.com/user/anotherfanny">
<Translate id="team.profile.Fanny Vieira.body.spotifyLink.label">
Spotify playlists
</Translate>
</Link>
),
}}>
{
'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}.'
}
</Translate>
</TeamProfileCardCol>
<TeamProfileCardCol
name="Sam Zhou"
githubUrl="https://github.com/SamChou19815"
twitterUrl="https://twitter.com/SamChou19815">
Sam started programming in 2011 and built his{' '}
<a href="https://developersam.com">website</a> in 2015. He is interested
in programming languages, dev infra and web development, and has built
his own{' '}
<a href="https://samlang.developersam.com/">programming language</a> and{' '}
<a href="https://github.com/SamChou19815/mini-react">mini React</a>.
<Translate
id="team.profile.Sam Zhou.body"
values={{
websiteLink: (
<Link href="https://developersam.com">
<Translate id="team.profile.Anshul Goyal.body.websiteLink.label" />
</Link>
),
samLangLink: (
<Link href="https://samlang.developersam.com/">
<Translate id="team.profile.Sam Zhou.body.samLangLink.label">
programming language
</Translate>
</Link>
),
miniReactLink: (
<Link href="https://github.com/SamChou19815/mini-react">
<Translate id="team.profile.Sam Zhou.body.miniReactLink.label">
mini React
</Translate>
</Link>
),
}}>
{
'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}.'
}
</Translate>
</TeamProfileCardCol>
<TeamProfileCardCol
name="Tan Teik Jun"
githubUrl="https://github.com/teikjun"
twitterUrl="https://twitter.com/teik_jun">
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. 🌱
<Translate id="team.profile.Tan Teik Jun.body">
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. 🌱
</Translate>
</TeamProfileCardCol>
<TeamProfileCardCol
name="Nisarag Bhatt"
githubUrl="https://github.com/FocalChord"
twitterUrl="https://twitter.com/focalchord_">
Fullstack web developer who loves learning new technologies and applying
them! Loves contributing to open source as well as writing content
articles and tutorials.
<Translate id="team.profile.Nisarag Bhatt.body">
Fullstack web developer who loves learning new technologies and
applying them! Loves contributing to open source as well as writing
content articles and tutorials.
</Translate>
</TeamProfileCardCol>
</div>
);
Expand Down
51 changes: 37 additions & 14 deletions website/src/components/UpgradeGuide/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -50,12 +51,21 @@ function VersionNotice() {
return (
<Admonition type="caution">
<p>
You are browsing an archived version and the snippet below is
outdated. Please go to the{' '}
<Link href="https://docusaurus.io/docs/installation">
main site
</Link>{' '}
and follow the instructions there to upgrade to the latest version.
<Translate
id="upgradeGuide.archivedVersion.notice"
values={{
mainSiteLink: (
<Link href="https://docusaurus.io/docs/installation">
<Translate id="upgradeGuide.archivedVersion.notice.mainSiteLink.label">
main site
</Translate>
</Link>
),
}}>
{
'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.'
}
</Translate>
</p>
</Admonition>
);
Expand All @@ -65,12 +75,23 @@ function VersionNotice() {
return (
<Admonition type="info">
<p>
You are browsing the documentation of an unreleased version. If you
want to use any unreleased feature, you can use the{' '}
<Link href="/community/canary">
<code>@canary</code> release
</Link>
.
<Translate
id="upgradeGuide.unreleasedVersion.notice"
values={{
canaryDocLink: (
<Link href="/community/canary">
<Translate
id="upgradeGuide.unreleasedVersion.notice.canaryDocLink.label"
values={{canaryTag: <code>@canary</code>}}>
{'{canaryTag} release'}
</Translate>
</Link>
),
}}>
{
'You are browsing the documentation of an unreleased version. If you want to use any unreleased feature, you can use the {canaryDocLink}.'
}
</Translate>
</p>
</Admonition>
);
Expand All @@ -79,8 +100,10 @@ function VersionNotice() {
return (
<Admonition type="caution">
<p>
You are browsing the documentation of an outdated version. The snippet
below shows how to upgrade to the latest version.
<Translate id="upgradeGuide.outdatedVersion.notice">
You are browsing the documentation of an outdated version. The
snippet below shows how to upgrade to the latest version.
</Translate>
</p>
</Admonition>
);
Expand Down
2 changes: 1 addition & 1 deletion website/src/data/users.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down
Loading

0 comments on commit f377097

Please sign in to comment.