mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-19 19:22:28 +02:00
docs: mark a lot of website texts as translatable (#6483)
This commit is contained in:
Joshua Chen
GitHub
parent
37be796aa8
commit
f377097f0b
8 changed files with 296 additions and 103 deletions
|
|
@ -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 {
|
|||
<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'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"
|
||||
|
|
@ -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"
|
||||
|
|
@ -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"
|
||||
|
|
@ -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>
|
||||
|
|
@ -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'} {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const Playgrounds = [
|
|||
|
||||
interface Props {
|
||||
name: string;
|
||||
image: any;
|
||||
image: string;
|
||||
url: string;
|
||||
description: JSX.Element;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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>
|
||||
);
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<Translate id="showcase.card.sourceLink">source</Translate>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<Translate id="showcase.header.button">
|
||||
🙏 Please add your site
|
||||
</Translate>
|
||||
</a>
|
||||
</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() {
|
||||
const filteredUsers = useFilteredUsers();
|
||||
const siteCountPlural = useSiteCountPlural();
|
||||
return (
|
||||
<section className="container margin-top--l margin-bottom--lg">
|
||||
<div className={clsx('margin-bottom--sm', styles.filterCheckbox)}>
|
||||
<div>
|
||||
<h2>Filters</h2>
|
||||
<span>{`(${filteredUsers.length} site${
|
||||
filteredUsers.length > 1 ? 's' : ''
|
||||
})`}</span>
|
||||
<h2>
|
||||
<Translate id="showcase.filters.title">Filters</Translate>
|
||||
</h2>
|
||||
<span>{siteCountPlural(filteredUsers.length)}</span>
|
||||
</div>
|
||||
<ShowcaseFilterToggle />
|
||||
</div>
|
||||
|
|
@ -204,7 +226,10 @@ function SearchBar() {
|
|||
<div className={styles.searchContainer}>
|
||||
<input
|
||||
id="searchbar"
|
||||
placeholder="Search for site name..."
|
||||
placeholder={translate({
|
||||
message: 'Search for site name...',
|
||||
id: 'showcase.searchBar.placeholder',
|
||||
})}
|
||||
value={value ?? undefined}
|
||||
onInput={(e) => {
|
||||
setValue(e.currentTarget.value);
|
||||
|
|
@ -234,7 +259,9 @@ function ShowcaseCards() {
|
|||
return (
|
||||
<section className="margin-top--lg margin-bottom--xl">
|
||||
<div className="container padding-vert--md text--center">
|
||||
<h2>No result</h2>
|
||||
<h2>
|
||||
<Translate id="showcase.usersList.noResult">No result</Translate>
|
||||
</h2>
|
||||
<SearchBar />
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -252,7 +279,11 @@ function ShowcaseCards() {
|
|||
'margin-bottom--md',
|
||||
styles.showcaseFavoriteHeader,
|
||||
)}>
|
||||
<h2>Our favorites</h2>
|
||||
<h2>
|
||||
<Translate id="showcase.favoritesList.title">
|
||||
Our favorites
|
||||
</Translate>
|
||||
</h2>
|
||||
<FavoriteIcon svgClass={styles.svgIconFavorite} />
|
||||
<SearchBar />
|
||||
</div>
|
||||
|
|
@ -264,7 +295,9 @@ function ShowcaseCards() {
|
|||
</div>
|
||||
</div>
|
||||
<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}>
|
||||
{otherUsers.map((user) => (
|
||||
<ShowcaseCard key={user.title} user={user} />
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<main className="container margin-vert--lg">
|
||||
<h1>Docusaurus documentation versions</h1>
|
||||
<Heading as="h1">
|
||||
<Translate id="versionsPage.title">
|
||||
Docusaurus documentation versions
|
||||
</Translate>
|
||||
</Heading>
|
||||
|
||||
{latestVersion && (
|
||||
<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>
|
||||
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>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{latestVersion.label}</th>
|
||||
<td>
|
||||
<Link to={latestVersion.path}>Documentation</Link>
|
||||
<Link to={latestVersion.path}>
|
||||
<Translate id="versionsPage.versionEntry.link">
|
||||
Documentation
|
||||
</Translate>
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<a href={`${repoUrl}/releases/tag/v${latestVersion.name}`}>
|
||||
Release Notes
|
||||
<Translate id="versionsPage.versionEntry.releaseNotes">
|
||||
Release Notes
|
||||
</Translate>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -66,17 +84,25 @@ function Version(): JSX.Element {
|
|||
|
||||
{currentVersion !== latestVersion && (
|
||||
<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>
|
||||
Here you can find the documentation for work-in-process unreleased
|
||||
version.
|
||||
<Translate id="versionsPage.next.description">
|
||||
Here you can find the documentation for work-in-process
|
||||
unreleased version.
|
||||
</Translate>
|
||||
</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{currentVersion.label}</th>
|
||||
<td>
|
||||
<Link to={currentVersion.path}>Documentation</Link>
|
||||
<Link to={currentVersion.path}>
|
||||
<Translate id="versionsPage.versionEntry.link" />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -86,10 +112,16 @@ function Version(): JSX.Element {
|
|||
|
||||
{(pastVersions.length > 0 || VersionsArchivedList.length > 0) && (
|
||||
<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>
|
||||
Here you can find documentation for previous versions of
|
||||
Docusaurus.
|
||||
<Translate id="versionsPage.archived.description">
|
||||
Here you can find documentation for previous versions of
|
||||
Docusaurus.
|
||||
</Translate>
|
||||
</p>
|
||||
<table>
|
||||
<tbody>
|
||||
|
|
@ -97,12 +129,14 @@ function Version(): JSX.Element {
|
|||
<tr key={version.name}>
|
||||
<th>{version.label}</th>
|
||||
<td>
|
||||
<Link to={version.path}>Documentation</Link>
|
||||
<Link to={version.path}>
|
||||
<Translate id="versionsPage.versionEntry.link" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<a href={`${repoUrl}/releases/tag/v${version.name}`}>
|
||||
Release Notes
|
||||
</a>
|
||||
<Link href={`${repoUrl}/releases/tag/v${version.name}`}>
|
||||
<Translate id="versionsPage.versionEntry.releaseNotes" />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
|
@ -110,12 +144,14 @@ function Version(): JSX.Element {
|
|||
<tr key={versionName}>
|
||||
<th>{versionName}</th>
|
||||
<td>
|
||||
<Link to={versionUrl}>Documentation</Link>
|
||||
<Link to={versionUrl}>
|
||||
<Translate id="versionsPage.versionEntry.link" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<a href={`${repoUrl}/releases/tag/v${versionName}`}>
|
||||
Release Notes
|
||||
</a>
|
||||
<Link href={`${repoUrl}/releases/tag/v${versionName}`}>
|
||||
<Translate id="versionsPage.versionEntry.releaseNotes" />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
|
@ -133,11 +169,9 @@ function Version(): JSX.Element {
|
|||
<tr>
|
||||
<th>1.x</th>
|
||||
<td>
|
||||
<a
|
||||
href="https://v1.docusaurus.io/docs/en/installation"
|
||||
rel="noreferrer">
|
||||
Documentation
|
||||
</a>
|
||||
<Link href="https://v1.docusaurus.io/docs/en/installation">
|
||||
<Translate id="versionsPage.versionEntry.link" />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue