aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Widgets
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Widgets')
-rw-r--r--src/components/Widgets/CVPreview/CVPreview.tsx16
-rw-r--r--src/components/Widgets/RecentPosts/RecentPosts.tsx16
-rw-r--r--src/components/Widgets/RelatedThematics/RelatedThematics.tsx12
-rw-r--r--src/components/Widgets/RelatedTopics/RelatedTopics.tsx12
-rw-r--r--src/components/Widgets/Sharing/Sharing.tsx42
-rw-r--r--src/components/Widgets/ThematicsList/ThematicsList.tsx13
-rw-r--r--src/components/Widgets/ToC/ToC.tsx8
-rw-r--r--src/components/Widgets/TopicsList/TopicsList.tsx13
8 files changed, 109 insertions, 23 deletions
diff --git a/src/components/Widgets/CVPreview/CVPreview.tsx b/src/components/Widgets/CVPreview/CVPreview.tsx
index e52a9b2..08a4c72 100644
--- a/src/components/Widgets/CVPreview/CVPreview.tsx
+++ b/src/components/Widgets/CVPreview/CVPreview.tsx
@@ -1,7 +1,7 @@
import { ExpandableWidget } from '@components/WidgetParts';
-import { Trans } from '@lingui/macro';
import Image from 'next/image';
import Link from 'next/link';
+import { FormattedMessage } from 'react-intl';
import styles from './CVPreview.module.scss';
const CVPreview = ({
@@ -25,9 +25,17 @@ const CVPreview = ({
/>
</div>
<p>
- <Trans>
- Download <Link href={pdf}>CV in PDF</Link>
- </Trans>
+ <FormattedMessage
+ defaultMessage="Download <link>CV in PDF</link>"
+ description="CVPreview: download as PDF link"
+ values={{
+ link: (chunks: string) => (
+ <Link href={pdf}>
+ <a>{chunks}</a>
+ </Link>
+ ),
+ }}
+ />
</p>
</ExpandableWidget>
);
diff --git a/src/components/Widgets/RecentPosts/RecentPosts.tsx b/src/components/Widgets/RecentPosts/RecentPosts.tsx
index 8022bff..08ce7e4 100644
--- a/src/components/Widgets/RecentPosts/RecentPosts.tsx
+++ b/src/components/Widgets/RecentPosts/RecentPosts.tsx
@@ -1,16 +1,17 @@
import Spinner from '@components/Spinner/Spinner';
import { config } from '@config/website';
-import { t } from '@lingui/macro';
import { getPublishedPosts } from '@services/graphql/queries';
import { ArticlePreview } from '@ts/types/articles';
import { getFormattedDate } from '@utils/helpers/format';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
+import { useIntl } from 'react-intl';
import useSWR from 'swr';
import styles from './RecentPosts.module.scss';
const RecentPosts = () => {
+ const intl = useIntl();
const { data, error } = useSWR('/recent-posts', () =>
getPublishedPosts({ first: 3 })
);
@@ -36,7 +37,12 @@ const RecentPosts = () => {
)}
<h3 className={styles.title}>{post.title}</h3>
<dl className={styles.meta}>
- <dt>{t`Published on:`}</dt>
+ <dt>
+ {intl.formatMessage({
+ defaultMessage: 'Published on:',
+ description: 'RecentPosts: publication date label',
+ })}
+ </dt>
<dd>
<time dateTime={post.dates.publication}>
{getFormattedDate(post.dates.publication, locale)}
@@ -51,7 +57,11 @@ const RecentPosts = () => {
};
const getPostsItems = () => {
- if (error) return t`Failed to load.`;
+ if (error)
+ return intl.formatMessage({
+ defaultMessage: 'Failed to load.',
+ description: 'RecentPosts: failed to load text',
+ });
if (!data) return <Spinner />;
return data.posts.map((post) => getPost(post));
diff --git a/src/components/Widgets/RelatedThematics/RelatedThematics.tsx b/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
index afe3460..c6be3ca 100644
--- a/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
+++ b/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
@@ -1,9 +1,10 @@
import { ExpandableWidget, List } from '@components/WidgetParts';
-import { t } from '@lingui/macro';
import { ThematicPreview } from '@ts/types/taxonomies';
import Link from 'next/link';
+import { useIntl } from 'react-intl';
const RelatedThematics = ({ thematics }: { thematics: ThematicPreview[] }) => {
+ const intl = useIntl();
const sortedThematics = [...thematics].sort((a, b) =>
a.title.localeCompare(b.title)
);
@@ -20,7 +21,14 @@ const RelatedThematics = ({ thematics }: { thematics: ThematicPreview[] }) => {
return (
<ExpandableWidget
- title={thematics.length > 1 ? t`Related thematics` : t`Related thematic`}
+ title={intl.formatMessage(
+ {
+ defaultMessage:
+ '{thematicsCount, plural, =0 {Related thematics} one {Related thematic} other {Related thematics}}',
+ description: 'RelatedThematics: widget title',
+ },
+ { thematicsCount: thematics.length }
+ )}
withBorders={true}
>
<List items={thematicsList} />
diff --git a/src/components/Widgets/RelatedTopics/RelatedTopics.tsx b/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
index 178e5bc..b9699e2 100644
--- a/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
+++ b/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
@@ -1,9 +1,10 @@
import { ExpandableWidget, List } from '@components/WidgetParts';
-import { t } from '@lingui/macro';
import { TopicPreview } from '@ts/types/taxonomies';
import Link from 'next/link';
+import { useIntl } from 'react-intl';
const RelatedTopics = ({ topics }: { topics: TopicPreview[] }) => {
+ const intl = useIntl();
const sortedTopics = [...topics].sort((a, b) =>
a.title.localeCompare(b.title)
);
@@ -20,7 +21,14 @@ const RelatedTopics = ({ topics }: { topics: TopicPreview[] }) => {
return (
<ExpandableWidget
- title={topicsList.length > 1 ? t`Related topics` : t`Related topic`}
+ title={intl.formatMessage(
+ {
+ defaultMessage:
+ '{topicsCount, plural, =0 {Related topics} one {Related topic} other {Related topics}}',
+ description: 'RelatedTopics: widget title',
+ },
+ { topicsCount: topicsList.length }
+ )}
withBorders={true}
>
<List items={topicsList} />
diff --git a/src/components/Widgets/Sharing/Sharing.tsx b/src/components/Widgets/Sharing/Sharing.tsx
index 89b48ca..1025717 100644
--- a/src/components/Widgets/Sharing/Sharing.tsx
+++ b/src/components/Widgets/Sharing/Sharing.tsx
@@ -1,8 +1,8 @@
import { ExpandableWidget } from '@components/WidgetParts';
import sharingMedia from '@config/sharing';
-import { t } from '@lingui/macro';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
import styles from './Sharing.module.scss';
type Parameters = {
@@ -20,6 +20,7 @@ type Website = {
};
const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
+ const intl = useIntl();
const [pageExcerpt, setPageExcerpt] = useState('');
const [pageUrl, setPageUrl] = useState('');
const [domainName, setDomainName] = useState('');
@@ -54,8 +55,14 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
switch (key) {
case 'content':
if (id === 'email') {
- const intro = t`Introduction:`;
- const readMore = t`Read more here:`;
+ const intro = intl.formatMessage({
+ defaultMessage: 'Introduction:',
+ description: 'Sharing: email content prefix',
+ });
+ const readMore = intl.formatMessage({
+ defaultMessage: 'Read more here:',
+ description: 'Sharing: content link prefix',
+ });
const body = `${intro}\n\n"${pageExcerpt}"\n\n${readMore} ${pageUrl}`;
sharingUrl += encodeURI(body);
} else {
@@ -63,7 +70,16 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
}
break;
case 'title':
- const prefix = id === 'email' ? t`Seen on ${domainName}:` : '';
+ const prefix =
+ id === 'email'
+ ? intl.formatMessage(
+ {
+ defaultMessage: 'Seen on {domainName}:',
+ description: 'Sharing: seen on text',
+ },
+ { domainName }
+ )
+ : '';
sharingUrl += encodeURI(`${prefix} ${title}`);
break;
case 'url':
@@ -94,7 +110,15 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
title={name}
className={`${styles.link} ${styles[linkModifier]}`}
>
- <span className="screen-reader-text">{t`Share on ${name}`}</span>
+ <span className="screen-reader-text">
+ {intl.formatMessage(
+ {
+ defaultMessage: 'Share on {name}',
+ description: 'Sharing: share on social network text',
+ },
+ { name }
+ )}
+ </span>
</a>
</li>
);
@@ -102,7 +126,13 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
};
return (
- <ExpandableWidget title={t`Share`} expand={true}>
+ <ExpandableWidget
+ title={intl.formatMessage({
+ defaultMessage: 'Share',
+ description: 'Sharing: widget title',
+ })}
+ expand={true}
+ >
<ul className={`${styles.list} ${styles['list--sharing']}`}>
{getItems()}
</ul>
diff --git a/src/components/Widgets/ThematicsList/ThematicsList.tsx b/src/components/Widgets/ThematicsList/ThematicsList.tsx
index e5162b4..9b1f03a 100644
--- a/src/components/Widgets/ThematicsList/ThematicsList.tsx
+++ b/src/components/Widgets/ThematicsList/ThematicsList.tsx
@@ -1,10 +1,10 @@
import Spinner from '@components/Spinner/Spinner';
import { ExpandableWidget, List } from '@components/WidgetParts';
-import { t } from '@lingui/macro';
import { getAllThematics } from '@services/graphql/queries';
import { TitleLevel } from '@ts/types/app';
import Link from 'next/link';
import { useRouter } from 'next/router';
+import { useIntl } from 'react-intl';
import useSWR from 'swr';
const ThematicsList = ({
@@ -14,6 +14,7 @@ const ThematicsList = ({
title: string;
titleLevel?: TitleLevel;
}) => {
+ const intl = useIntl();
const router = useRouter();
const isThematic = () => router.asPath.includes('/thematique/');
const currentThematicSlug = isThematic()
@@ -23,7 +24,15 @@ const ThematicsList = ({
const { data, error } = useSWR('/api/thematics', getAllThematics);
const getList = () => {
- if (error) return <ul>{t`Failed to load.`}</ul>;
+ if (error)
+ return (
+ <ul>
+ {intl.formatMessage({
+ defaultMessage: 'Failed to load.',
+ description: 'ThematicsList: failed to load text',
+ })}
+ </ul>
+ );
if (!data)
return (
<ul>
diff --git a/src/components/Widgets/ToC/ToC.tsx b/src/components/Widgets/ToC/ToC.tsx
index 6010354..c499478 100644
--- a/src/components/Widgets/ToC/ToC.tsx
+++ b/src/components/Widgets/ToC/ToC.tsx
@@ -1,11 +1,15 @@
import { ExpandableWidget, OrderedList } from '@components/WidgetParts';
-import { t } from '@lingui/macro';
import { Heading } from '@ts/types/app';
import useHeadingsTree from '@utils/hooks/useHeadingsTree';
+import { useIntl } from 'react-intl';
const ToC = () => {
+ const intl = useIntl();
const headingsTree = useHeadingsTree('article');
- const title = t`Table of contents`;
+ const title = intl.formatMessage({
+ defaultMessage: 'Table of contents',
+ description: 'ToC: widget title',
+ });
const getItems = (headings: Heading[]) => {
return headings.map((heading) => {
diff --git a/src/components/Widgets/TopicsList/TopicsList.tsx b/src/components/Widgets/TopicsList/TopicsList.tsx
index 5b0c44e..80341c3 100644
--- a/src/components/Widgets/TopicsList/TopicsList.tsx
+++ b/src/components/Widgets/TopicsList/TopicsList.tsx
@@ -1,10 +1,10 @@
import Spinner from '@components/Spinner/Spinner';
import { ExpandableWidget, List } from '@components/WidgetParts';
-import { t } from '@lingui/macro';
import { getAllTopics } from '@services/graphql/queries';
import { TitleLevel } from '@ts/types/app';
import Link from 'next/link';
import { useRouter } from 'next/router';
+import { useIntl } from 'react-intl';
import useSWR from 'swr';
const TopicsList = ({
@@ -14,6 +14,7 @@ const TopicsList = ({
title: string;
titleLevel?: TitleLevel;
}) => {
+ const intl = useIntl();
const router = useRouter();
const isTopic = () => router.asPath.includes('/sujet/');
const currentTopicSlug = isTopic()
@@ -23,7 +24,15 @@ const TopicsList = ({
const { data, error } = useSWR('/api/topics', getAllTopics);
const getList = () => {
- if (error) return <ul>{t`Failed to load.`}</ul>;
+ if (error)
+ return (
+ <ul>
+ {intl.formatMessage({
+ defaultMessage: 'Failed to load.',
+ description: 'TopicsList: failed to load text',
+ })}
+ </ul>
+ );
if (!data)
return (
<ul>