diff options
Diffstat (limited to 'src/components/Widgets')
| -rw-r--r-- | src/components/Widgets/CVPreview/CVPreview.tsx | 16 | ||||
| -rw-r--r-- | src/components/Widgets/RecentPosts/RecentPosts.tsx | 16 | ||||
| -rw-r--r-- | src/components/Widgets/RelatedThematics/RelatedThematics.tsx | 12 | ||||
| -rw-r--r-- | src/components/Widgets/RelatedTopics/RelatedTopics.tsx | 12 | ||||
| -rw-r--r-- | src/components/Widgets/Sharing/Sharing.tsx | 42 | ||||
| -rw-r--r-- | src/components/Widgets/ThematicsList/ThematicsList.tsx | 13 | ||||
| -rw-r--r-- | src/components/Widgets/ToC/ToC.tsx | 8 | ||||
| -rw-r--r-- | src/components/Widgets/TopicsList/TopicsList.tsx | 13 |
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> |
