From c87c615b5866b8a8f361eeb0764bfdea85740e90 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 10 Oct 2023 19:37:51 +0200 Subject: refactor(components): replace Meta component with MetaList It removes items complexity by allowing consumers to use any label/value association. Translations should also be defined by the consumer. Each item can now be configured separately (borders, layout...). --- src/pages/article/[slug].tsx | 127 +++++++++++++++++++++++------ src/pages/blog/index.tsx | 25 +++++- src/pages/blog/page/[number].tsx | 25 +++++- src/pages/cv.tsx | 44 ++++++++-- src/pages/index.tsx | 26 +++++- src/pages/mentions-legales.tsx | 47 +++++++++-- src/pages/projets/[slug].tsx | 168 +++++++++++++++++++++++++++++++-------- src/pages/projets/index.tsx | 20 ++++- src/pages/recherche/index.tsx | 25 +++++- src/pages/sujet/[slug].tsx | 76 ++++++++++++++++-- src/pages/thematique/[slug].tsx | 64 +++++++++++++-- 11 files changed, 552 insertions(+), 95 deletions(-) (limited to 'src/pages') diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx index acb80b2..bce493b 100644 --- a/src/pages/article/[slug].tsx +++ b/src/pages/article/[slug].tsx @@ -12,9 +12,9 @@ import { getLayout, Link, PageLayout, - type PageLayoutProps, Sharing, Spinner, + type MetaItemData, } from '../../components'; import { getAllArticlesSlugs, @@ -26,6 +26,7 @@ import type { Article, NextPageWithLayout, SingleComment } from '../../types'; import { ROUTES } from '../../utils/constants'; import { getBlogSchema, + getFormattedDate, getSchemaJson, getSinglePageSchema, getWebPageSchema, @@ -82,37 +83,113 @@ const ArticlePage: NextPageWithLayout = ({ const { content, id, intro, meta, title } = article; const { author, commentsCount, cover, dates, seo, thematics, topics } = meta; - const headerMeta: PageLayoutProps['headerMeta'] = { - author: author?.name, - publication: { date: dates.publication }, - update: - dates.update && dates.publication !== dates.update - ? { date: dates.update } - : undefined, - readingTime, - thematics: thematics?.map((thematic) => ( - - {thematic.name} - - )), + /** + * Retrieve a formatted date (and time). + * + * @param {string} date - A date string. + * @returns {JSX.Element} The formatted date wrapped in a time element. + */ + const getDate = (date: string): JSX.Element => { + const isoDate = new Date(`${date}`).toISOString(); + + return ; }; + const headerMeta: (MetaItemData | undefined)[] = [ + author + ? { + id: 'author', + label: intl.formatMessage({ + defaultMessage: 'Written by:', + description: 'ArticlePage: author label', + id: 'MJbZfX', + }), + value: author.name, + } + : undefined, + { + id: 'publication-date', + label: intl.formatMessage({ + defaultMessage: 'Published on:', + description: 'ArticlePage: publication date label', + id: 'RecdwX', + }), + value: getDate(dates.publication), + }, + dates.update && dates.publication !== dates.update + ? { + id: 'update-date', + label: intl.formatMessage({ + defaultMessage: 'Updated on:', + description: 'ArticlePage: update date label', + id: 'ZAqGZ6', + }), + value: getDate(dates.update), + } + : undefined, + { + id: 'reading-time', + label: intl.formatMessage({ + defaultMessage: 'Reading time:', + description: 'ArticlePage: reading time label', + id: 'Gw7X3x', + }), + value: readingTime, + }, + thematics + ? { + id: 'thematics', + label: intl.formatMessage({ + defaultMessage: 'Thematics:', + description: 'ArticlePage: thematics meta label', + id: 'CvOqoh', + }), + value: thematics.map((thematic) => { + return { + id: `thematic-${thematic.id}`, + value: ( + + {thematic.name} + + ), + }; + }), + } + : undefined, + ]; + const filteredHeaderMeta = headerMeta.filter( + (item): item is MetaItemData => !!item + ); + const footerMetaLabel = intl.formatMessage({ defaultMessage: 'Read more articles about:', description: 'ArticlePage: footer topics list label', id: '50xc4o', }); - const footerMeta: PageLayoutProps['footerMeta'] = { - custom: topics && { - label: footerMetaLabel, - value: topics.map((topic) => ( - - {topic.logo ? : null} {topic.name} - - )), - }, - }; + const footerMeta: MetaItemData[] = topics + ? [ + { + id: 'more-about', + label: footerMetaLabel, + value: topics.map((topic) => { + return { + id: `topic--${topic.id}`, + value: ( + + {topic.logo ? : null}{' '} + {topic.name} + + ), + }; + }), + }, + ] + : []; const webpageSchema = getWebPageSchema({ description: intro, @@ -208,7 +285,7 @@ const ArticlePage: NextPageWithLayout = ({ breadcrumbSchema={breadcrumbSchema} comments={commentsData} footerMeta={footerMeta} - headerMeta={headerMeta} + headerMeta={filteredHeaderMeta} id={id as number} intro={intro} title={title} diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index 0241a5d..5c64e6d 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -9,6 +9,7 @@ import { getLayout, Heading, LinksListWidget, + type MetaItemData, Notice, PageLayout, PostsList, @@ -134,6 +135,28 @@ const BlogPage: NextPageWithLayout = ({ }); const postsListBaseUrl = `${ROUTES.BLOG}/page/`; + const headerMeta: MetaItemData[] = totalArticles + ? [ + { + id: 'posts-count', + label: intl.formatMessage({ + defaultMessage: 'Total:', + description: 'Page: total label', + id: 'kNBXyK', + }), + value: intl.formatMessage( + { + defaultMessage: + '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', + description: 'Page: posts count meta', + id: 'RvGb2c', + }, + { postsCount: totalArticles } + ), + }, + ] + : []; + return ( <> @@ -157,7 +180,7 @@ const BlogPage: NextPageWithLayout = ({ title={title} breadcrumb={breadcrumbItems} breadcrumbSchema={breadcrumbSchema} - headerMeta={{ total: totalArticles }} + headerMeta={headerMeta} widgets={[ = ({ }); const postsListBaseUrl = `${ROUTES.BLOG}/page/`; + const headerMeta: MetaItemData[] = totalArticles + ? [ + { + id: 'posts-count', + label: intl.formatMessage({ + defaultMessage: 'Total:', + description: 'Page: total label', + id: 'kNBXyK', + }), + value: intl.formatMessage( + { + defaultMessage: + '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', + description: 'Page: posts count meta', + id: 'RvGb2c', + }, + { postsCount: totalArticles } + ), + }, + ] + : []; + return ( <> @@ -155,7 +178,7 @@ const BlogPage: NextPageWithLayout = ({ title={pageTitleWithPageNumber} breadcrumb={breadcrumbItems} breadcrumbSchema={breadcrumbSchema} - headerMeta={{ total: totalArticles }} + headerMeta={headerMeta} widgets={[ { id: '+Dre5J', }); - const headerMeta: MetaData = { - publication: { - date: dates.publication, + /** + * Retrieve a formatted date (and time). + * + * @param {string} date - A date string. + * @returns {JSX.Element} The formatted date wrapped in a time element. + */ + const getDate = (date: string): JSX.Element => { + const isoDate = new Date(`${date}`).toISOString(); + + return ; + }; + + const headerMeta: (MetaItemData | undefined)[] = [ + { + id: 'publication-date', + label: intl.formatMessage({ + defaultMessage: 'Published on:', + description: 'Page: publication date label', + id: '4QbTDq', + }), + value: getDate(dates.publication), }, - update: dates.update + dates.update ? { - date: dates.update, + id: 'update-date', + label: intl.formatMessage({ + defaultMessage: 'Updated on:', + description: 'Page: update date label', + id: 'Ez8Qim', + }), + value: getDate(dates.update), } : undefined, - }; + ]; + const filteredMeta = headerMeta.filter( + (item): item is MetaItemData => !!item + ); const { website } = useSettings(); const cvCaption = intl.formatMessage( @@ -267,7 +295,7 @@ const CVPage: NextPageWithLayout = () => { = ({ recentPosts }) => { const intl = useIntl(); + const publicationDate = intl.formatMessage({ + defaultMessage: 'Published on:', + description: 'HomePage: publication date label', + id: 'pT5nHk', + }); const { schema: breadcrumbSchema } = useBreadcrumb({ title: '', url: `/`, @@ -291,10 +301,22 @@ const HomePage: NextPageWithLayout = ({ recentPosts }) => { */ const getRecentPosts = (): JSX.Element => { const posts: CardsListItem[] = recentPosts.map((post) => { + const isoDate = new Date(`${post.dates.publication}`).toISOString(); + return { cover: post.cover, id: post.slug, - meta: { publication: { date: post.dates.publication } }, + meta: [ + { + id: 'publication-date', + label: publicationDate, + value: ( + + ), + }, + ], title: post.title, url: `${ROUTES.ARTICLE}/${post.slug}`, }; diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx index 810d9ec..25c2dd9 100644 --- a/src/pages/mentions-legales.tsx +++ b/src/pages/mentions-legales.tsx @@ -1,20 +1,23 @@ +/* eslint-disable max-statements */ import type { MDXComponents } from 'mdx/types'; import type { GetStaticProps } from 'next'; import Head from 'next/head'; import NextImage, { type ImageProps as NextImageProps } from 'next/image'; import { useRouter } from 'next/router'; import Script from 'next/script'; +import { useIntl } from 'react-intl'; import { getLayout, Link, PageLayout, - type MetaData, Figure, + type MetaItemData, } from '../components'; import LegalNoticeContent, { meta } from '../content/pages/legal-notice.mdx'; import type { NextPageWithLayout } from '../types'; import { ROUTES } from '../utils/constants'; import { + getFormattedDate, getSchemaJson, getSinglePageSchema, getWebPageSchema, @@ -37,22 +40,50 @@ const components: MDXComponents = { * Legal Notice page. */ const LegalNoticePage: NextPageWithLayout = () => { + const intl = useIntl(); const { dates, intro, seo, title } = meta; const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({ title, url: ROUTES.LEGAL_NOTICE, }); - const headerMeta: MetaData = { - publication: { - date: dates.publication, + /** + * Retrieve a formatted date (and time). + * + * @param {string} date - A date string. + * @returns {JSX.Element} The formatted date wrapped in a time element. + */ + const getDate = (date: string): JSX.Element => { + const isoDate = new Date(`${date}`).toISOString(); + + return ; + }; + + const headerMeta: (MetaItemData | undefined)[] = [ + { + id: 'publication-date', + label: intl.formatMessage({ + defaultMessage: 'Published on:', + description: 'Page: publication date label', + id: '4QbTDq', + }), + value: getDate(dates.publication), }, - update: dates.update + dates.update ? { - date: dates.update, + id: 'update-date', + label: intl.formatMessage({ + defaultMessage: 'Updated on:', + description: 'Page: update date label', + id: 'Ez8Qim', + }), + value: getDate(dates.update), } : undefined, - }; + ]; + const filteredMeta = headerMeta.filter( + (item): item is MetaItemData => !!item + ); const { website } = useSettings(); const { asPath } = useRouter(); @@ -82,7 +113,7 @@ const LegalNoticePage: NextPageWithLayout = () => { = ({ project }) => { url: `${website.url}${asPath}`, }; - const headerMeta: MetaData = { - publication: { date: dates.publication }, - update: - dates.update && dates.update !== dates.publication - ? { date: dates.update } - : undefined, + /** + * Retrieve a formatted date (and time). + * + * @param {string} date - A date string. + * @returns {JSX.Element} The formatted date wrapped in a time element. + */ + const getDate = (date: string): JSX.Element => { + const isoDate = new Date(`${date}`).toISOString(); + + return ; }; + const headerMeta: (MetaItemData | undefined)[] = [ + { + id: 'publication-date', + label: intl.formatMessage({ + defaultMessage: 'Published on:', + description: 'ProjectsPage: publication date label', + id: 'HxZvY4', + }), + value: getDate(dates.publication), + }, + dates.update && dates.update !== dates.publication + ? { + id: 'update-date', + label: intl.formatMessage({ + defaultMessage: 'Updated on:', + description: 'ProjectsPage: update date label', + id: 'wQrvgw', + }), + value: getDate(dates.update), + } + : undefined, + ]; + const filteredHeaderMeta = headerMeta.filter( + (item): item is MetaItemData => !!item + ); + /** * Retrieve the repositories links. * * @param {Repos} repositories - A repositories object. - * @returns {JSX.Element[]} - An array of SocialLink. + * @returns {MetaValues[]} - An array of meta values. */ - const getReposLinks = (repositories: Repos): JSX.Element[] => { - const links = []; + const getReposLinks = (repositories: Repos): MetaValues[] => { + const links: MetaValues[] = []; const githubLabel = intl.formatMessage({ defaultMessage: 'Github profile', description: 'ProjectsPage: Github profile link', @@ -194,22 +225,28 @@ const ProjectPage: NextPageWithLayout = ({ project }) => { }); if (repositories.github) - links.push( - - ); + links.push({ + id: 'github', + value: ( + + ), + }); if (repositories.gitlab) - links.push( - - ); + links.push({ + id: 'gitlab', + value: ( + + ), + }); return links; }; @@ -254,14 +291,75 @@ const ProjectPage: NextPageWithLayout = ({ project }) => { ); }; - const overviewData: OverviewMeta = { - creation: { date: data.created_at }, - update: { date: data.updated_at }, - license, - popularity: repos?.github && getRepoPopularity(repos.github), - repositories: repos ? getReposLinks(repos) : undefined, - technologies, - }; + const overviewMeta: (MetaItemData | undefined)[] = [ + { + id: 'creation-date', + label: intl.formatMessage({ + defaultMessage: 'Created on:', + description: 'ProjectsPage: creation date label', + id: 'wVFA4m', + }), + value: getDate(data.created_at), + }, + { + id: 'update-date', + label: intl.formatMessage({ + defaultMessage: 'Updated on:', + description: 'ProjectsPage: update date label', + id: 'wQrvgw', + }), + value: getDate(data.updated_at), + }, + license + ? { + id: 'license', + label: intl.formatMessage({ + defaultMessage: 'License:', + description: 'ProjectsPage: license label', + id: 'VtYzuv', + }), + value: license, + } + : undefined, + repos?.github + ? { + id: 'popularity', + label: intl.formatMessage({ + defaultMessage: 'Popularity:', + description: 'ProjectsPage: popularity label', + id: 'KrNvQi', + }), + value: getRepoPopularity(repos.github), + } + : undefined, + repos + ? { + id: 'repositories', + label: intl.formatMessage({ + defaultMessage: 'Repositories:', + description: 'ProjectsPage: repositories label', + id: 'iDIKb7', + }), + value: getReposLinks(repos), + } + : undefined, + technologies + ? { + id: 'technologies', + label: intl.formatMessage({ + defaultMessage: 'Technologies:', + description: 'ProjectsPage: technologies label', + id: 'RwNZ6p', + }), + value: technologies.map((techno) => { + return { id: techno, value: techno }; + }), + } + : undefined, + ]; + const filteredOverviewMeta = overviewMeta.filter( + (item): item is MetaItemData => !!item + ); const webpageSchema = getWebPageSchema({ description: seo.description, @@ -306,7 +404,7 @@ const ProjectPage: NextPageWithLayout = ({ project }) => { intro={intro} breadcrumb={breadcrumbItems} breadcrumbSchema={breadcrumbSchema} - headerMeta={headerMeta} + headerMeta={filteredHeaderMeta} withToC={true} widgets={[ = ({ project }) => { />, ]} > - + diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx index 97963dd..44354ce 100644 --- a/src/pages/projets/index.tsx +++ b/src/pages/projets/index.tsx @@ -1,8 +1,10 @@ +/* eslint-disable max-statements */ import type { MDXComponents } from 'mdx/types'; import type { GetStaticProps } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; +import { useIntl } from 'react-intl'; import { CardsList, type CardsListItem, @@ -44,6 +46,12 @@ const ProjectsPage: NextPageWithLayout = ({ projects }) => { title, url: ROUTES.PROJECTS, }); + const intl = useIntl(); + const metaLabel = intl.formatMessage({ + defaultMessage: 'Technologies:', + description: 'Meta: technologies label', + id: 'ADQmDF', + }); const items: CardsListItem[] = projects.map( ({ id, meta: projectMeta, slug, title: projectTitle }) => { @@ -52,7 +60,17 @@ const ProjectsPage: NextPageWithLayout = ({ projects }) => { return { cover, id: id as string, - meta: { technologies }, + meta: technologies?.length + ? [ + { + id: 'technologies', + label: metaLabel, + value: technologies.map((techno) => { + return { id: techno, value: techno }; + }), + }, + ] + : [], tagline, title: projectTitle, url: `${ROUTES.PROJECTS}/${slug}`, diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx index f47e40c..32312ec 100644 --- a/src/pages/recherche/index.tsx +++ b/src/pages/recherche/index.tsx @@ -9,6 +9,7 @@ import { getLayout, Heading, LinksListWidget, + type MetaItemData, Notice, PageLayout, PostsList, @@ -133,6 +134,28 @@ const SearchPage: NextPageWithLayout = ({ getTotalArticles(query.s as string) ); + const headerMeta: MetaItemData[] = totalArticles + ? [ + { + id: 'posts-count', + label: intl.formatMessage({ + defaultMessage: 'Total:', + description: 'Page: total label', + id: 'kNBXyK', + }), + value: intl.formatMessage( + { + defaultMessage: + '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', + description: 'Page: posts count meta', + id: 'RvGb2c', + }, + { postsCount: totalArticles } + ), + }, + ] + : []; + /** * Load more posts handler. */ @@ -181,7 +204,7 @@ const SearchPage: NextPageWithLayout = ({ title={title} breadcrumb={breadcrumbItems} breadcrumbSchema={breadcrumbSchema} - headerMeta={{ total: totalArticles }} + headerMeta={headerMeta} widgets={[ = ({ url: `${ROUTES.TOPICS}/${slug}`, }); - const headerMeta: MetaData = { - publication: { date: dates.publication }, - update: dates.update ? { date: dates.update } : undefined, - website: officialWebsite, - total: articles ? articles.length : undefined, + /** + * Retrieve a formatted date (and time). + * + * @param {string} date - A date string. + * @returns {JSX.Element} The formatted date wrapped in a time element. + */ + const getDate = (date: string): JSX.Element => { + const isoDate = new Date(`${date}`).toISOString(); + + return ; }; + const headerMeta: (MetaItemData | undefined)[] = [ + { + id: 'publication-date', + label: intl.formatMessage({ + defaultMessage: 'Published on:', + description: 'TopicPage: publication date label', + id: 'KV+NMZ', + }), + value: getDate(dates.publication), + }, + dates.update + ? { + id: 'update-date', + label: intl.formatMessage({ + defaultMessage: 'Updated on:', + description: 'TopicPage: update date label', + id: '9DfuHk', + }), + value: getDate(dates.update), + } + : undefined, + officialWebsite + ? { + id: 'website', + label: intl.formatMessage({ + defaultMessage: 'Official website:', + description: 'TopicPage: official website label', + id: 'zoifQd', + }), + value: officialWebsite, + } + : undefined, + articles?.length + ? { + id: 'total', + label: intl.formatMessage({ + defaultMessage: 'Total:', + description: 'TopicPage: total label', + id: 'tBX4mb', + }), + value: intl.formatMessage( + { + defaultMessage: + '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', + description: 'TopicPage: posts count meta', + id: 'uAL4iW', + }, + { postsCount: articles.length } + ), + } + : undefined, + ]; + const filteredMeta = headerMeta.filter( + (item): item is MetaItemData => !!item + ); + const { website } = useSettings(); const { asPath } = useRouter(); const webpageSchema = getWebPageSchema({ @@ -132,7 +194,7 @@ const TopicPage: NextPageWithLayout = ({ breadcrumbSchema={breadcrumbSchema} title={getPageHeading()} intro={intro} - headerMeta={headerMeta} + headerMeta={filteredMeta} widgets={ thematics ? [ diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx index 95b4780..a5badf3 100644 --- a/src/pages/thematique/[slug].tsx +++ b/src/pages/thematique/[slug].tsx @@ -9,9 +9,9 @@ import { getLayout, Heading, LinksListWidget, + type MetaItemData, PageLayout, PostsList, - type MetaData, } from '../../components'; import { getAllThematicsSlugs, @@ -22,6 +22,7 @@ import { import type { NextPageWithLayout, PageLink, Thematic } from '../../types'; import { ROUTES } from '../../utils/constants'; import { + getFormattedDate, getLinksListItems, getPageLinkFromRawData, getPostsWithUrl, @@ -50,12 +51,63 @@ const ThematicPage: NextPageWithLayout = ({ url: `${ROUTES.THEMATICS.INDEX}/${slug}`, }); - const headerMeta: MetaData = { - publication: { date: dates.publication }, - update: dates.update ? { date: dates.update } : undefined, - total: articles ? articles.length : undefined, + /** + * Retrieve a formatted date (and time). + * + * @param {string} date - A date string. + * @returns {JSX.Element} The formatted date wrapped in a time element. + */ + const getDate = (date: string): JSX.Element => { + const isoDate = new Date(`${date}`).toISOString(); + + return ; }; + const headerMeta: (MetaItemData | undefined)[] = [ + { + id: 'publication-date', + label: intl.formatMessage({ + defaultMessage: 'Published on:', + description: 'ThematicPage: publication date label', + id: 'UTGhUU', + }), + value: getDate(dates.publication), + }, + dates.update + ? { + id: 'update-date', + label: intl.formatMessage({ + defaultMessage: 'Updated on:', + description: 'ThematicPage: update date label', + id: '24FIsG', + }), + value: getDate(dates.update), + } + : undefined, + articles + ? { + id: 'total', + label: intl.formatMessage({ + defaultMessage: 'Total:', + description: 'ThematicPage: total label', + id: 'lHkta9', + }), + value: intl.formatMessage( + { + defaultMessage: + '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', + description: 'ThematicPage: posts count meta', + id: 'iv3Ex1', + }, + { postsCount: articles.length } + ), + } + : undefined, + ]; + const filteredMeta = headerMeta.filter( + (item): item is MetaItemData => !!item + ); + const { website } = useSettings(); const { asPath } = useRouter(); const webpageSchema = getWebPageSchema({ @@ -114,7 +166,7 @@ const ThematicPage: NextPageWithLayout = ({ breadcrumbSchema={breadcrumbSchema} title={title} intro={intro} - headerMeta={headerMeta} + headerMeta={filteredMeta} widgets={ topics ? [ -- cgit v1.2.3