Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(v2): add more translatable strings #4219

Merged
merged 6 commits into from
Feb 18, 2021
Merged

refactor(v2): add more translatable strings #4219

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d2c41d3
refactor(v2): add more translatable strings
lex111 Feb 12, 2021
3e258b6
Apply suggestions from code review
lex111 Feb 12, 2021
d6bdb2d
Fixes
lex111 Feb 12, 2021
23e3500
Updates
lex111 Feb 15, 2021
ea9987c
Localize direct link to heading
lex111 Feb 18, 2021
09794cc
typo + add french translations
slorber Feb 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions packages/docusaurus-plugin-pwa/src/theme/PwaReloadPopup/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

import React, {useState} from 'react';
import clsx from 'clsx';
import Translate, {translate} from '@docusaurus/Translate';

import styles from './styles.module.css';

Expand All @@ -16,7 +17,13 @@ export default function PwaReloadPopup({onReload}) {
return (
isVisible && (
<div className={clsx('alert', 'alert--secondary', styles.popup)}>
<p>New version available</p>
<p>
<Translate
id="theme.PwaReloadPopup.info"
description="The text for PWA reload popup">
New version available
</Translate>
</p>
<div className={styles.buttonContainer}>
<button
className="button button--link"
Expand All @@ -25,11 +32,20 @@ export default function PwaReloadPopup({onReload}) {
setIsVisible(false);
onReload();
}}>
Refresh
<Translate
id="theme.PwaReloadPopup.buttonText"
lex111 marked this conversation as resolved.
Show resolved Hide resolved
description="The text for PWA reload button">
Refresh
</Translate>
</button>

<button
aria-label="Close"
aria-label={translate({
id: 'theme.PwaReloadPopup.closeAriaLabel',
lex111 marked this conversation as resolved.
Show resolved Hide resolved
message: 'Close',
description:
'The ARIA label for close button of PWA reload popup',
})}
className="close"
type="button"
onClick={() => setIsVisible(false)}>
Expand Down
7 changes: 6 additions & 1 deletion packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import React from 'react';
import clsx from 'clsx';
import {useThemeConfig} from '@docusaurus/theme-common';
import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import {translate} from '@docusaurus/Translate';

import styles from './styles.module.css';

Expand Down Expand Up @@ -46,7 +47,11 @@ function AnnouncementBar(): JSX.Element | null {
type="button"
className={styles.announcementBarClose}
onClick={closeAnnouncementBar}
aria-label="Close">
aria-label={translate({
id: 'theme.AnnouncementBar.closeAriaLabel',
lex111 marked this conversation as resolved.
Show resolved Hide resolved
message: 'Close',
description: 'The ARIA label for close button of announcement bar',
})}>
<span aria-hidden="true">×</span>
</button>
) : null}
Expand Down
10 changes: 8 additions & 2 deletions packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,21 @@

import React from 'react';
import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
import Translate, {translate} from '@docusaurus/Translate';
import type {Metadata} from '@theme/BlogListPage';

function BlogListPaginator(props: {readonly metadata: Metadata}): JSX.Element {
const {metadata} = props;
const {previousPage, nextPage} = metadata;

return (
<nav className="pagination-nav" aria-label="Blog list page navigation">
<nav
className="pagination-nav"
aria-label={translate({
id: 'theme.BlogListPaginator.ariaLabel',
lex111 marked this conversation as resolved.
Show resolved Hide resolved
message: 'Blog list page navigation',
description: 'The ARIA label for the blog pagination',
})}>
<div className="pagination-nav__item">
{previousPage && (
<Link className="pagination-nav__link" to={previousPage}>
Expand Down
10 changes: 8 additions & 2 deletions packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,13 @@ function BlogPostItem(props: Props): JSX.Element {
<footer className="row margin-vert--lg">
{tags.length > 0 && (
<div className="col">
<strong>Tags:</strong>
<strong>
<Translate
id="theme.BlogPostItem.tags"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we'll have a similar page/label for docs as docs are going to have tags soon, and feel we'll be able to factorize so the id may be updated later to "theme.TagList.label" or something.

description="The label used in blog post item for output tags list">
Tags
lex111 marked this conversation as resolved.
Show resolved Hide resolved
</Translate>
</strong>
{tags.map(({label, permalink: tagPermalink}) => (
<Link
key={tagPermalink}
Expand All @@ -136,7 +142,7 @@ function BlogPostItem(props: Props): JSX.Element {
<strong>
<Translate
id="theme.BlogPostItem.readMore"
description="The label used in blog post item excerps to link to full blog posts">
description="The label used in blog post item excerpts to link to full blog posts">
Read More
</Translate>
</strong>
Expand Down
10 changes: 8 additions & 2 deletions packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,21 @@
*/

import React from 'react';
import Translate from '@docusaurus/Translate';
import Translate, {translate} from '@docusaurus/Translate';
import Link from '@docusaurus/Link';
import type {Props} from '@theme/BlogPostPaginator';

function BlogPostPaginator(props: Props): JSX.Element {
const {nextItem, prevItem} = props;

return (
<nav className="pagination-nav" aria-label="Blog post page navigation">
<nav
className="pagination-nav"
aria-label={translate({
id: 'theme.BlogPostPaginator.ariaLabel',
lex111 marked this conversation as resolved.
Show resolved Hide resolved
message: 'Blog post page navigation',
description: 'The ARIA label for the blog posts pagination',
})}>
<div className="pagination-nav__item">
{prevItem && (
<Link className="pagination-nav__link" to={prevItem.permalink}>
Expand Down
8 changes: 6 additions & 2 deletions packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import copy from 'copy-text-to-clipboard';
import rangeParser from 'parse-numeric-range';
import usePrismTheme from '@theme/hooks/usePrismTheme';
import type {Props} from '@theme/CodeBlock';
import Translate from '@docusaurus/Translate';
import Translate, {translate} from '@docusaurus/Translate';

import styles from './styles.module.css';
import {useThemeConfig} from '@docusaurus/theme-common';
Expand Down Expand Up @@ -240,7 +240,11 @@ export default function CodeBlock({
<button
ref={button}
type="button"
aria-label="Copy code to clipboard"
aria-label={translate({
id: 'theme.CodeBlock.ariaLabel',
lex111 marked this conversation as resolved.
Show resolved Hide resolved
message: 'Copy code to clipboard',
description: 'The ARIA label for copy code blocks button',
})}
className={clsx(styles.copyButton)}
onClick={handleCopyCode}>
{showCopied ? (
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ function DocItem(props: Props): JSX.Element {
<div className="col text--right">
<em>
<small>
{/* TODO: wait for using interpolation in translation function */}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is a missing piece that I'd like to add, not sure how yet.

React-intl has this feature to handle these kind of cases, and allow to even inject components into a translated string (like a link). But I want to add a very minimal runtime, not something too heavy with many features we don't need. If you know a good lib for that let me know

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not 100% related but kind of the same problem if you want to interleave links in a translated string.

On Jest website I used a markdown parser on the client (v1 had a MarkdownBlock component), and it allows to wire the Docusaurus link for the markdown links somehow.

image

image

image

But if we make all this possible through the Translate component, I'd like to avoid the cost of shipping a full md parser to the client.

Last updated{' '}
{lastUpdatedAt && (
<>
Expand Down
22 changes: 19 additions & 3 deletions packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import type {DocumentRoute} from '@theme/DocItem';
import type {Props} from '@theme/DocPage';
import IconArrow from '@theme/IconArrow';
import {matchPath} from '@docusaurus/router';
import {translate} from '@docusaurus/Translate';

import clsx from 'clsx';
import styles from './styles.module.css';
Expand Down Expand Up @@ -93,14 +94,29 @@ function DocPageContent({
{hiddenSidebar && (
<div
className={styles.collapsedDocSidebar}
title="Expand sidebar"
aria-label="Expand sidebar"
title={translate({
id: 'theme.DocPageContent.expandButtonLabel',
message: 'Expand sidebar',
description:
'The ARIA label and title attribute for expand button of doc sidebar',
})}
aria-label={translate({
id: 'theme.DocPageContent.expandButtonLabel',
message: 'Expand sidebar',
description:
'The ARIA label and title attribute for expand button of doc sidebar',
})}
slorber marked this conversation as resolved.
Show resolved Hide resolved
tabIndex={0}
role="button"
onKeyDown={toggleSidebar}
onClick={toggleSidebar}>
<IconArrow
aria-label="Expand sidebar"
aria-label={translate({
id: 'theme.DocPageContent.expandButtonLabel',
message: 'Expand sidebar',
description:
'The ARIA label and title attribute for expand button of doc sidebar',
})}
className={styles.expandSidebarButtonIcon}
/>
</div>
Expand Down
10 changes: 8 additions & 2 deletions packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,20 @@

import React from 'react';
import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
import Translate, {translate} from '@docusaurus/Translate';
import type {Props} from '@theme/DocPaginator';

function DocPaginator(props: Props): JSX.Element {
const {metadata} = props;

return (
<nav className="pagination-nav" aria-label="Blog list page navigation">
<nav
className="pagination-nav"
aria-label={translate({
id: 'theme.DocPaginator.ariaLabel',
lex111 marked this conversation as resolved.
Show resolved Hide resolved
message: 'Docs pages navigation',
description: 'The ARIA label for the docs pagination',
})}>
<div className="pagination-nav__item">
{metadata.previous && (
<Link
Expand Down
38 changes: 34 additions & 4 deletions packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import type {Props} from '@theme/DocSidebar';
import Logo from '@theme/Logo';
import IconArrow from '@theme/IconArrow';
import IconMenu from '@theme/IconMenu';
import {translate} from '@docusaurus/Translate';

import styles from './styles.module.css';

Expand Down Expand Up @@ -229,7 +230,21 @@ function DocSidebar({
},
)}>
<button
aria-label={showResponsiveSidebar ? 'Close Menu' : 'Open Menu'}
aria-label={
showResponsiveSidebar
? translate({
id: 'theme.DocSidebar.responsiveCloseButtonLabel',
message: 'Close menu',
description:
'The ARIA label for close button of mobile doc sidebar',
})
: translate({
id: 'theme.DocSidebar.responsiveOpenButtonLabel',
message: 'Open menu',
description:
'The ARIA label for open button of mobile doc sidebar',
})
}
aria-haspopup="true"
className="button button--secondary button--sm menu__button"
type="button"
Expand Down Expand Up @@ -270,16 +285,31 @@ function DocSidebar({
{hideableSidebar && (
<button
type="button"
title="Collapse sidebar"
aria-label="Collapse sidebar"
title={translate({
id: 'theme.DocSidebar.collapseButtonLabel',
message: 'Collapse sidebar',
description:
'The ARIA label and title attribute for collapse button of doc sidebar',
})}
aria-label={translate({
id: 'theme.DocSidebar.collapseButtonLabel',
message: 'Collapse sidebar',
description:
'The ARIA label and title attribute for collapse button of doc sidebar',
})}
lex111 marked this conversation as resolved.
Show resolved Hide resolved
className={clsx(
'button button--secondary button--outline',
styles.collapseSidebarButton,
)}
onClick={onCollapse}>
<IconArrow
className={styles.collapseSidebarButtonIcon}
aria-label="Collapse sidebar"
aria-label={translate({
id: 'theme.DocSidebar.collapseButtonLabel',
message: 'Collapse sidebar',
description:
'The ARIA label and title attribute for collapse button of doc sidebar',
})}
/>
</button>
)}
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/src/theme/DocVersionSuggestions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ function DocVersionSuggestions(): JSX.Element {
<div className="alert alert--warning margin-bottom--md" role="alert">
{
// TODO need refactoring
// TODO need translate after interpolation appears
activeVersion.name === 'current' ? (
<div>
This is unreleased documentation for {siteTitle}{' '}
Expand Down
2 changes: 1 addition & 1 deletion packages/docusaurus-theme-search-algolia/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
},
"license": "MIT",
"dependencies": {
"@docsearch/react": "^3.0.0-alpha.32",
"@docsearch/react": "^3.0.0-alpha.33",
"@docusaurus/core": "2.0.0-alpha.70",
"@docusaurus/theme-common": "2.0.0-alpha.70",
"@docusaurus/utils": "2.0.0-alpha.70",
Expand Down
11 changes: 11 additions & 0 deletions packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import Head from '@docusaurus/Head';
import useSearchQuery from '@theme/hooks/useSearchQuery';
import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
import useAlgoliaContextualFacetFilters from '@theme/hooks/useAlgoliaContextualFacetFilters';
import {translate} from '@docusaurus/Translate';

let DocSearchModal = null;

Expand Down Expand Up @@ -144,6 +145,12 @@ function DocSearch({contextualSearch, ...props}) {
searchButtonRef,
});

const translatedSearchLabel = translate({
id: 'theme.DocSearch.label',
lex111 marked this conversation as resolved.
Show resolved Hide resolved
message: 'Search',
description: 'The ARIA label and placeholder for search button',
});

return (
<>
<Head>
Expand All @@ -163,6 +170,10 @@ function DocSearch({contextualSearch, ...props}) {
onMouseOver={importDocSearchModalIfNeeded}
onClick={onOpen}
ref={searchButtonRef}
translations={{
buttonText: translatedSearchLabel,
buttonAriaLabel: translatedSearchLabel,
}}
slorber marked this conversation as resolved.
Show resolved Hide resolved
/>

{isOpen &&
Expand Down
Loading