3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-19 19:22:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs: mark a lot of website texts as translatable (#6483)

Browse source
This commit is contained in:
Joshua Chen 2022-01-27 18:04:23 +08:00 • committed by GitHub
parent 37be796aa8
commit f377097f0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 296 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

93
website/src/components/ColorGenerator/index.tsx
View file

@ -11,6 +11,7 @@ import Color from 'color';
import CodeBlock from '@theme/CodeBlock'; import CodeBlock from '@theme/CodeBlock';
import Admonition from '@theme/Admonition'; import Admonition from '@theme/Admonition';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
import {useColorMode} from '@docusaurus/theme-common'; import {useColorMode} from '@docusaurus/theme-common';
import { import {
@ -86,20 +87,31 @@ function ColorGenerator(): JSX.Element {
<div> <div>
<Admonition type="tip"> <Admonition type="tip">
<p> <p>
Aim for at least{' '} <Translate
<Link href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast"> id="colorGenerator.tip.body"
WCAG-AA contrast ratio values={{
</Link>{' '} wcagLink: (
for the primary color to ensure readability. Use the Docusaurus <Link href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">
website itself to preview how your color palette would look like. You <Translate id="colorGenerator.tip.body.wcagLink.label">
can use alternative palettes in dark mode because one color WCAG-AA contrast ratio
doesn&apos;t usually work in both light and dark mode. </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> </p>
</Admonition> </Admonition>
<p> <p>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label htmlFor="primary_color"> <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>{' '} </label>{' '}
<input <input
id="primary_color" id="primary_color"
@ -125,7 +137,21 @@ function ColorGenerator(): JSX.Element {
setDarkTheme(); 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>
<button <button
type="button" type="button"
@ -136,13 +162,19 @@ function ColorGenerator(): JSX.Element {
setBackground(DEFAULT_BACKGROUND_COLOR); setBackground(DEFAULT_BACKGROUND_COLOR);
setShades(COLOR_SHADES); setShades(COLOR_SHADES);
}}> }}>
Reset <Translate id="colorGenerator.inputs.resetButton.label">
Reset
</Translate>
</button> </button>
</p> </p>
<p> <p>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label htmlFor="background_color"> <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> </label>
<input <input
id="background_color" id="background_color"
@ -158,10 +190,32 @@ function ColorGenerator(): JSX.Element {
<table className={styles.colorTable}> <table className={styles.colorTable}>
<thead> <thead>
<tr> <tr>
<th>CSS Variable Name</th> <th>
<th>Hex</th> <Translate id="colorGenerator.table.heading1">
<th>Adjustment</th> CSS Variable Name
<th>Contrast Rating</th> </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> </tr>
</thead> </thead>
<tbody> <tbody>
@ -225,8 +279,11 @@ function ColorGenerator(): JSX.Element {
</table> </table>
</div> </div>
<p> <p>
Replace the variables in <code>src/css/custom.css</code> with these new <Translate
variables. id="colorGenerator.text"
values={{cssPath: <code>src/css/custom.css</code>}}>
{'Replace the variables in {cssPath} with these new variables.'}
</Translate>
</p> </p>
<CodeBlock className="language-css" title="/src/css/custom.css"> <CodeBlock className="language-css" title="/src/css/custom.css">
{`${isDarkTheme ? "html[data-theme='dark']" : ':root'} { {`${isDarkTheme ? "html[data-theme='dark']" : ':root'} {

2
website/src/components/Playground/index.tsx
View file

@ -49,7 +49,7 @@ const Playgrounds = [
interface Props { interface Props {
name: string; name: string;
image: any; image: string;
url: string; url: string;
description: JSX.Element; description: JSX.Element;
} }

111
website/src/components/TeamProfileCards/index.tsx
View file

@ -164,63 +164,108 @@ export function StudentFellowsTeamRow(): JSX.Element {
name="Anshul Goyal" name="Anshul Goyal"
githubUrl="https://github.com/anshulrgoyal" githubUrl="https://github.com/anshulrgoyal"
twitterUrl="https://twitter.com/ar_goyal"> twitterUrl="https://twitter.com/ar_goyal">
Fullstack developer who loves to code and try new technologies. In his <Translate
free time, he contributes to open source, writes blog posts on his{' '} id="team.profile.Anshul Goyal.body"
<a href="https://anshulgoyal.dev/" target="_blank" rel="noreferrer"> values={{
website websiteLink: (
</a>{' '} <Link href="https://anshulgoyal.dev/">
and watches Anime. <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>
<TeamProfileCardCol <TeamProfileCardCol
name="Drew Alexander" name="Drew Alexander"
githubUrl="https://github.com/drewbi"> githubUrl="https://github.com/drewbi">
Developer and Creative, trying to gain the skills to build whatever he <Translate id="team.profile.Drew Alexander.body">
can think of. Developer and Creative, trying to gain the skills to build whatever he
can think of.
</Translate>
</TeamProfileCardCol> </TeamProfileCardCol>
<TeamProfileCardCol <TeamProfileCardCol
name="Fanny Vieira" name="Fanny Vieira"
githubUrl="https://github.com/fanny" githubUrl="https://github.com/fanny"
twitterUrl="https://twitter.com/fannyvieiira"> twitterUrl="https://twitter.com/fannyvieiira">
Fanny got started with web development in high school, building a <Translate
project for the school kitchen. In her free time she loves contributing id="team.profile.Fanny Vieira.body"
to Open Source, occasionally writing on{' '} values={{
<a href="https://dev.to/fannyvieira" target="_blank" rel="noreferrer"> blogLink: (
her blog <Link href="https://dev.to/fannyvieira">
</a>{' '} <Translate id="team.profile.Fanny Vieira.body.blogLink.label">
about her experiences, cooking, and creating{' '} her blog
<a </Translate>
href="https://open.spotify.com/user/anotherfanny" </Link>
target="_blank" ),
rel="noreferrer"> spotifyLink: (
Spotify playlists <Link href="https://open.spotify.com/user/anotherfanny">
</a> <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>
<TeamProfileCardCol <TeamProfileCardCol
name="Sam Zhou" name="Sam Zhou"
githubUrl="https://github.com/SamChou19815" githubUrl="https://github.com/SamChou19815"
twitterUrl="https://twitter.com/SamChou19815"> twitterUrl="https://twitter.com/SamChou19815">
Sam started programming in 2011 and built his{' '} <Translate
<a href="https://developersam.com">website</a> in 2015. He is interested id="team.profile.Sam Zhou.body"
in programming languages, dev infra and web development, and has built values={{
his own{' '} websiteLink: (
<a href="https://samlang.developersam.com/">programming language</a> and{' '} <Link href="https://developersam.com">
<a href="https://github.com/SamChou19815/mini-react">mini React</a>. <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>
<TeamProfileCardCol <TeamProfileCardCol
name="Tan Teik Jun" name="Tan Teik Jun"
githubUrl="https://github.com/teikjun" githubUrl="https://github.com/teikjun"
twitterUrl="https://twitter.com/teik_jun"> twitterUrl="https://twitter.com/teik_jun">
Open-source enthusiast who aims to become as awesome as the other humans <Translate id="team.profile.Tan Teik Jun.body">
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. 🌱
</Translate>
</TeamProfileCardCol> </TeamProfileCardCol>
<TeamProfileCardCol <TeamProfileCardCol
name="Nisarag Bhatt" name="Nisarag Bhatt"
githubUrl="https://github.com/FocalChord" githubUrl="https://github.com/FocalChord"
twitterUrl="https://twitter.com/focalchord_"> twitterUrl="https://twitter.com/focalchord_">
Fullstack web developer who loves learning new technologies and applying <Translate id="team.profile.Nisarag Bhatt.body">
them! Loves contributing to open source as well as writing content Fullstack web developer who loves learning new technologies and
articles and tutorials. applying them! Loves contributing to open source as well as writing
content articles and tutorials.
</Translate>
</TeamProfileCardCol> </TeamProfileCardCol>
</div> </div>
); );

51
website/src/components/UpgradeGuide/index.tsx
View file

@ -15,6 +15,7 @@ import Admonition from '@theme/Admonition';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import CodeBlock from '@theme/CodeBlock'; import CodeBlock from '@theme/CodeBlock';
import useIsBrowser from '@docusaurus/useIsBrowser'; import useIsBrowser from '@docusaurus/useIsBrowser';
import Translate from '@docusaurus/Translate';
function PackageJson() { function PackageJson() {
const latestVersion = useLatestVersion(); const latestVersion = useLatestVersion();
@ -50,12 +51,21 @@ function VersionNotice() {
return ( return (
<Admonition type="caution"> <Admonition type="caution">
<p> <p>
You are browsing an archived version and the snippet below is <Translate
outdated. Please go to the{' '} id="upgradeGuide.archivedVersion.notice"
<Link href="https://docusaurus.io/docs/installation"> values={{
main site mainSiteLink: (
</Link>{' '} <Link href="https://docusaurus.io/docs/installation">
and follow the instructions there to upgrade to the latest version. <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> </p>
</Admonition> </Admonition>
); );
@ -65,12 +75,23 @@ function VersionNotice() {
return ( return (
<Admonition type="info"> <Admonition type="info">
<p> <p>
You are browsing the documentation of an unreleased version. If you <Translate
want to use any unreleased feature, you can use the{' '} id="upgradeGuide.unreleasedVersion.notice"
<Link href="/community/canary"> values={{
<code>@canary</code> release canaryDocLink: (
</Link> <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> </p>
</Admonition> </Admonition>
); );
@ -79,8 +100,10 @@ function VersionNotice() {
return ( return (
<Admonition type="caution"> <Admonition type="caution">
<p> <p>
You are browsing the documentation of an outdated version. The snippet <Translate id="upgradeGuide.outdatedVersion.notice">
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.
</Translate>
</p> </p>
</Admonition> </Admonition>
); );

2
website/src/data/users.tsx
View file

@ -62,7 +62,7 @@ export type TagType =
export type User = { export type User = {
title: string; title: string;
description: string; description: string;
preview: any; preview: string;
website: string; website: string;
source: string | null; source: string | null;
tags: TagType[]; tags: TagType[];

3
website/src/pages/showcase/_components/ShowcaseCard/index.tsx
View file

@ -9,6 +9,7 @@ import React, {memo} from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
import Image from '@theme/IdealImage'; import Image from '@theme/IdealImage';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
import styles from './styles.module.css'; import styles from './styles.module.css';
import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon'; import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon';
@ -80,7 +81,7 @@ const ShowcaseCard = memo(({user}: {user: User}) => (
'button button--secondary button--sm', 'button button--secondary button--sm',
styles.showcaseCardSrcBtn, styles.showcaseCardSrcBtn,
)}> )}>
source <Translate id="showcase.card.sourceLink">source</Translate>
</Link> </Link>
)} )}
</div> </div>

51
website/src/pages/showcase/index.tsx
View file

@ -29,7 +29,9 @@ import {
import ShowcaseTooltip from './_components/ShowcaseTooltip'; import ShowcaseTooltip from './_components/ShowcaseTooltip';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import Translate, {translate} from '@docusaurus/Translate';
import {useHistory, useLocation} from '@docusaurus/router'; import {useHistory, useLocation} from '@docusaurus/router';
import {usePluralForm} from '@docusaurus/theme-common';
import styles from './styles.module.css'; import styles from './styles.module.css';
@ -127,22 +129,42 @@ function ShowcaseHeader() {
href={EDIT_URL} href={EDIT_URL}
target="_blank" target="_blank"
rel="noreferrer"> rel="noreferrer">
🙏 Please add your site <Translate id="showcase.header.button">
🙏 Please add your site
</Translate>
</a> </a>
</section> </section>
); );
} }
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() { function ShowcaseFilters() {
const filteredUsers = useFilteredUsers(); const filteredUsers = useFilteredUsers();
const siteCountPlural = useSiteCountPlural();
return ( return (
<section className="container margin-top--l margin-bottom--lg"> <section className="container margin-top--l margin-bottom--lg">
<div className={clsx('margin-bottom--sm', styles.filterCheckbox)}> <div className={clsx('margin-bottom--sm', styles.filterCheckbox)}>
<div> <div>
<h2>Filters</h2> <h2>
<span>{`(${filteredUsers.length} site${ <Translate id="showcase.filters.title">Filters</Translate>
filteredUsers.length > 1 ? 's' : '' </h2>
})`}</span> <span>{siteCountPlural(filteredUsers.length)}</span>
</div> </div>
<ShowcaseFilterToggle /> <ShowcaseFilterToggle />
</div> </div>
@ -204,7 +226,10 @@ function SearchBar() {
<div className={styles.searchContainer}> <div className={styles.searchContainer}>
<input <input
id="searchbar" id="searchbar"
placeholder="Search for site name..." placeholder={translate({
message: 'Search for site name...',
id: 'showcase.searchBar.placeholder',
})}
value={value ?? undefined} value={value ?? undefined}
onInput={(e) => { onInput={(e) => {
setValue(e.currentTarget.value); setValue(e.currentTarget.value);
@ -234,7 +259,9 @@ function ShowcaseCards() {
return ( return (
<section className="margin-top--lg margin-bottom--xl"> <section className="margin-top--lg margin-bottom--xl">
<div className="container padding-vert--md text--center"> <div className="container padding-vert--md text--center">
<h2>No result</h2> <h2>
<Translate id="showcase.usersList.noResult">No result</Translate>
</h2>
<SearchBar /> <SearchBar />
</div> </div>
</section> </section>
@ -252,7 +279,11 @@ function ShowcaseCards() {
'margin-bottom--md', 'margin-bottom--md',
styles.showcaseFavoriteHeader, styles.showcaseFavoriteHeader,
)}> )}>
<h2>Our favorites</h2> <h2>
<Translate id="showcase.favoritesList.title">
Our favorites
</Translate>
</h2>
<FavoriteIcon svgClass={styles.svgIconFavorite} /> <FavoriteIcon svgClass={styles.svgIconFavorite} />
<SearchBar /> <SearchBar />
</div> </div>
@ -264,7 +295,9 @@ function ShowcaseCards() {
</div> </div>
</div> </div>
<div className="container margin-top--lg"> <div className="container margin-top--lg">
<h2 className={styles.showcaseHeader}>All sites</h2> <h2 className={styles.showcaseHeader}>
<Translate id="showcase.usersList.allUsers">All sites</Translate>
</h2>
<ul className={styles.showcaseList}> <ul className={styles.showcaseList}>
{otherUsers.map((user) => ( {otherUsers.map((user) => (
<ShowcaseCard key={user.title} user={user} /> <ShowcaseCard key={user.title} user={user} />

86
website/src/pages/versions.tsx
View file

@ -9,7 +9,8 @@ import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import Heading from '@theme/Heading';
import Translate from '@docusaurus/Translate';
import { import {
useVersions, useVersions,
useLatestVersion, useLatestVersion,
@ -38,24 +39,41 @@ function Version(): JSX.Element {
title="Versions" title="Versions"
description="Docusaurus 2 Versions page listing all documented site versions"> description="Docusaurus 2 Versions page listing all documented site versions">
<main className="container margin-vert--lg"> <main className="container margin-vert--lg">
<h1>Docusaurus documentation versions</h1> <Heading as="h1">
<Translate id="versionsPage.title">
Docusaurus documentation versions
</Translate>
</Heading>
{latestVersion && ( {latestVersion && (
<div className="margin-bottom--lg"> <div className="margin-bottom--lg">
<h3 id="next">Current version (Stable)</h3> <Heading as="h3" id="next">
<Translate id="versionsPage.current.title">
Current version (Stable)
</Translate>
</Heading>
<p> <p>
Here you can find the documentation for current released version. <Translate id="versionsPage.current.description">
Here you can find the documentation for current released
version.
</Translate>
</p> </p>
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>{latestVersion.label}</th> <th>{latestVersion.label}</th>
<td> <td>
<Link to={latestVersion.path}>Documentation</Link> <Link to={latestVersion.path}>
<Translate id="versionsPage.versionEntry.link">
Documentation
</Translate>
</Link>
</td> </td>
<td> <td>
<a href={`${repoUrl}/releases/tag/v${latestVersion.name}`}> <a href={`${repoUrl}/releases/tag/v${latestVersion.name}`}>
Release Notes <Translate id="versionsPage.versionEntry.releaseNotes">
Release Notes
</Translate>
</a> </a>
</td> </td>
</tr> </tr>
@ -66,17 +84,25 @@ function Version(): JSX.Element {
{currentVersion !== latestVersion && ( {currentVersion !== latestVersion && (
<div className="margin-bottom--lg"> <div className="margin-bottom--lg">
<h3 id="latest">Next version (Unreleased)</h3> <Heading as="h3" id="latest">
<Translate id="versionsPage.next.title">
Next version (Unreleased)
</Translate>
</Heading>
<p> <p>
Here you can find the documentation for work-in-process unreleased <Translate id="versionsPage.next.description">
version. Here you can find the documentation for work-in-process
unreleased version.
</Translate>
</p> </p>
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>{currentVersion.label}</th> <th>{currentVersion.label}</th>
<td> <td>
<Link to={currentVersion.path}>Documentation</Link> <Link to={currentVersion.path}>
<Translate id="versionsPage.versionEntry.link" />
</Link>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -86,10 +112,16 @@ function Version(): JSX.Element {
{(pastVersions.length > 0 || VersionsArchivedList.length > 0) && ( {(pastVersions.length > 0 || VersionsArchivedList.length > 0) && (
<div className="margin-bottom--lg"> <div className="margin-bottom--lg">
<h3 id="archive">Past versions (Not maintained anymore)</h3> <Heading as="h3" id="archive">
<Translate id="versionsPage.archived.title">
Past versions (Not maintained anymore)
</Translate>
</Heading>
<p> <p>
Here you can find documentation for previous versions of <Translate id="versionsPage.archived.description">
Docusaurus. Here you can find documentation for previous versions of
Docusaurus.
</Translate>
</p> </p>
<table> <table>
<tbody> <tbody>
@ -97,12 +129,14 @@ function Version(): JSX.Element {
<tr key={version.name}> <tr key={version.name}>
<th>{version.label}</th> <th>{version.label}</th>
<td> <td>
<Link to={version.path}>Documentation</Link> <Link to={version.path}>
<Translate id="versionsPage.versionEntry.link" />
</Link>
</td> </td>
<td> <td>
<a href={`${repoUrl}/releases/tag/v${version.name}`}> <Link href={`${repoUrl}/releases/tag/v${version.name}`}>
Release Notes <Translate id="versionsPage.versionEntry.releaseNotes" />
</a> </Link>
</td> </td>
</tr> </tr>
))} ))}
@ -110,12 +144,14 @@ function Version(): JSX.Element {
<tr key={versionName}> <tr key={versionName}>
<th>{versionName}</th> <th>{versionName}</th>
<td> <td>
<Link to={versionUrl}>Documentation</Link> <Link to={versionUrl}>
<Translate id="versionsPage.versionEntry.link" />
</Link>
</td> </td>
<td> <td>
<a href={`${repoUrl}/releases/tag/v${versionName}`}> <Link href={`${repoUrl}/releases/tag/v${versionName}`}>
Release Notes <Translate id="versionsPage.versionEntry.releaseNotes" />
</a> </Link>
</td> </td>
</tr> </tr>
))} ))}
@ -133,11 +169,9 @@ function Version(): JSX.Element {
<tr> <tr>
<th>1.x</th> <th>1.x</th>
<td> <td>
<a <Link href="https://v1.docusaurus.io/docs/en/installation">
href="https://v1.docusaurus.io/docs/en/installation" <Translate id="versionsPage.versionEntry.link" />
rel="noreferrer"> </Link>
Documentation
</a>
</td> </td>
</tr> </tr>
</tbody> </tbody>