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/components/molecules/index.ts | 1 + src/components/molecules/layout/card.fixture.ts | 19 - src/components/molecules/layout/card.module.scss | 4 + src/components/molecules/layout/card.stories.tsx | 31 +- src/components/molecules/layout/card.test.tsx | 46 ++- src/components/molecules/layout/card.tsx | 12 +- src/components/molecules/layout/index.ts | 1 - src/components/molecules/layout/meta.module.scss | 16 - src/components/molecules/layout/meta.stories.tsx | 45 --- src/components/molecules/layout/meta.test.tsx | 25 -- src/components/molecules/layout/meta.tsx | 395 --------------------- .../molecules/layout/page-footer.stories.tsx | 18 +- src/components/molecules/layout/page-footer.tsx | 8 +- .../molecules/layout/page-header.stories.tsx | 38 +- src/components/molecules/layout/page-header.tsx | 6 +- src/components/molecules/meta-list/index.ts | 2 + .../molecules/meta-list/meta-item/index.ts | 1 + .../meta-list/meta-item/meta-item.module.scss | 62 ++++ .../meta-list/meta-item/meta-item.stories.tsx | 108 ++++++ .../meta-list/meta-item/meta-item.test.tsx | 97 +++++ .../molecules/meta-list/meta-item/meta-item.tsx | 90 +++++ .../molecules/meta-list/meta-list.module.scss | 24 ++ .../molecules/meta-list/meta-list.stories.tsx | 70 ++++ .../molecules/meta-list/meta-list.test.tsx | 79 +++++ src/components/molecules/meta-list/meta-list.tsx | 78 ++++ .../organisms/layout/cards-list.stories.tsx | 35 +- .../organisms/layout/cards-list.test.tsx | 39 +- src/components/organisms/layout/comment.tsx | 41 ++- .../organisms/layout/overview.module.scss | 17 +- .../organisms/layout/overview.stories.tsx | 11 +- src/components/organisms/layout/overview.test.tsx | 30 +- src/components/organisms/layout/overview.tsx | 24 +- .../organisms/layout/summary.module.scss | 6 +- src/components/organisms/layout/summary.tsx | 175 ++++++--- .../templates/page/page-layout.stories.tsx | 45 ++- src/components/templates/page/page-layout.tsx | 10 +- src/i18n/en.json | 202 +++++++---- src/i18n/fr.json | 202 +++++++---- 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 +++- src/styles/abstracts/placeholders/_lists.scss | 2 +- src/styles/pages/article.module.scss | 3 +- 51 files changed, 1855 insertions(+), 910 deletions(-) delete mode 100644 src/components/molecules/layout/card.fixture.ts delete mode 100644 src/components/molecules/layout/meta.module.scss delete mode 100644 src/components/molecules/layout/meta.stories.tsx delete mode 100644 src/components/molecules/layout/meta.test.tsx delete mode 100644 src/components/molecules/layout/meta.tsx create mode 100644 src/components/molecules/meta-list/index.ts create mode 100644 src/components/molecules/meta-list/meta-item/index.ts create mode 100644 src/components/molecules/meta-list/meta-item/meta-item.module.scss create mode 100644 src/components/molecules/meta-list/meta-item/meta-item.stories.tsx create mode 100644 src/components/molecules/meta-list/meta-item/meta-item.test.tsx create mode 100644 src/components/molecules/meta-list/meta-item/meta-item.tsx create mode 100644 src/components/molecules/meta-list/meta-list.module.scss create mode 100644 src/components/molecules/meta-list/meta-list.stories.tsx create mode 100644 src/components/molecules/meta-list/meta-list.test.tsx create mode 100644 src/components/molecules/meta-list/meta-list.tsx diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index 70ac3c9..cb0b7eb 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -4,5 +4,6 @@ export * from './collapsible'; export * from './forms'; export * from './images'; export * from './layout'; +export * from './meta-list'; export * from './nav'; export * from './tooltip'; diff --git a/src/components/molecules/layout/card.fixture.ts b/src/components/molecules/layout/card.fixture.ts deleted file mode 100644 index 01fe2e9..0000000 --- a/src/components/molecules/layout/card.fixture.ts +++ /dev/null @@ -1,19 +0,0 @@ -export const cover = { - alt: 'A picture', - height: 480, - src: 'https://picsum.photos/640/480', - width: 640, -}; - -export const id = 'nam'; - -export const meta = { - author: 'Possimus', - thematics: ['Autem', 'Eos'], -}; - -export const tagline = 'Ut rerum incidunt'; - -export const title = 'Alias qui porro'; - -export const url = '/an-existing-url'; diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss index 7a06508..14a5baf 100644 --- a/src/components/molecules/layout/card.module.scss +++ b/src/components/molecules/layout/card.module.scss @@ -1,5 +1,9 @@ @use "../../../styles/abstracts/functions" as fun; +.footer { + margin-top: auto; +} + .wrapper { --scale-up: 1.05; --scale-down: 0.95; diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx index a9545d1..070c978 100644 --- a/src/components/molecules/layout/card.stories.tsx +++ b/src/components/molecules/layout/card.stories.tsx @@ -1,6 +1,6 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { MetaItemData } from '../meta-list'; import { Card } from './card'; -import { cover, id, meta, tagline, title, url } from './card.fixture'; /** * Card - Storybook Meta @@ -119,6 +119,33 @@ export default { const Template: ComponentStory = (args) => ; +const cover = { + alt: 'A picture', + height: 480, + src: 'https://picsum.photos/640/480', + width: 640, +}; + +const id = 'nam'; + +const meta = [ + { id: 'author', label: 'Author', value: 'Possimus' }, + { + id: 'categories', + label: 'Categories', + value: [ + { id: 'autem', value: 'Autem' }, + { id: 'eos', value: 'Eos' }, + ], + }, +] satisfies MetaItemData[]; + +const tagline = 'Ut rerum incidunt'; + +const title = 'Alias qui porro'; + +const url = '/an-existing-url'; + /** * Card Stories - Default */ diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx index c6498b8..b690d4c 100644 --- a/src/components/molecules/layout/card.test.tsx +++ b/src/components/molecules/layout/card.test.tsx @@ -1,37 +1,69 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; +import type { MetaItemData } from '../meta-list'; import { Card } from './card'; -import { cover, id, meta, tagline, title, url } from './card.fixture'; + +const cover = { + alt: 'A picture', + height: 480, + src: 'https://picsum.photos/640/480', + width: 640, +}; + +const id = 'nam'; + +const meta = [ + { id: 'author', label: 'Author', value: 'Possimus' }, + { + id: 'categories', + label: 'Categories', + value: [ + { id: 'autem', value: 'Autem' }, + { id: 'eos', value: 'Eos' }, + ], + }, +] satisfies MetaItemData[]; + +const tagline = 'Ut rerum incidunt'; + +const title = 'Alias qui porro'; + +const url = '/an-existing-url'; describe('Card', () => { it('renders a title wrapped in h2 element', () => { render(); expect( - screen.getByRole('heading', { level: 2, name: title }) + rtlScreen.getByRole('heading', { level: 2, name: title }) ).toBeInTheDocument(); }); it('renders a link to another page', () => { render(); - expect(screen.getByRole('link')).toHaveAttribute('href', url); + expect(rtlScreen.getByRole('link')).toHaveAttribute('href', url); }); it('renders a cover', () => { render( ); - expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument(); + expect(rtlScreen.getByRole('img', { name: cover.alt })).toBeInTheDocument(); }); it('renders a tagline', () => { render( ); - expect(screen.getByText(tagline)).toBeInTheDocument(); + expect(rtlScreen.getByText(tagline)).toBeInTheDocument(); }); it('renders some meta', () => { render(); - expect(screen.getByText(meta.author)).toBeInTheDocument(); + + const metaLabels = meta.map((item) => item.label); + + for (const label of metaLabels) { + expect(rtlScreen.getByText(label)).toBeInTheDocument(); + } }); }); diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx index c316100..d90cba2 100644 --- a/src/components/molecules/layout/card.tsx +++ b/src/components/molecules/layout/card.tsx @@ -1,8 +1,8 @@ import NextImage, { type ImageProps as NextImageProps } from 'next/image'; import type { FC } from 'react'; import { ButtonLink, Figure, Heading, type HeadingLevel } from '../../atoms'; +import { MetaList, type MetaItemData } from '../meta-list'; import styles from './card.module.scss'; -import { Meta, type MetaData } from './meta'; export type CardProps = { /** @@ -20,7 +20,7 @@ export type CardProps = { /** * The card meta. */ - meta?: MetaData; + meta?: MetaItemData[]; /** * The card tagline. */ @@ -73,7 +73,13 @@ export const Card: FC = ({ {tagline ?
{tagline}
: null} {meta ? (
- +
) : null} diff --git a/src/components/molecules/layout/index.ts b/src/components/molecules/layout/index.ts index e43e664..58d5442 100644 --- a/src/components/molecules/layout/index.ts +++ b/src/components/molecules/layout/index.ts @@ -1,6 +1,5 @@ export * from './card'; export * from './code'; export * from './columns'; -export * from './meta'; export * from './page-footer'; export * from './page-header'; diff --git a/src/components/molecules/layout/meta.module.scss b/src/components/molecules/layout/meta.module.scss deleted file mode 100644 index 26faac3..0000000 --- a/src/components/molecules/layout/meta.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -.list { - .description:not(:first-of-type) { - &::before { - display: inline; - float: left; - content: "/"; - margin-right: var(--itemSpacing); - } - } - - &--stack { - .term { - flex: 0 0 100%; - } - } -} diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx deleted file mode 100644 index 6faa265..0000000 --- a/src/components/molecules/layout/meta.stories.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Meta as MetaComponent, type MetaData } from './meta'; - -/** - * Meta - Storybook Meta - */ -export default { - title: 'Molecules/Layout', - component: MetaComponent, - args: {}, - argTypes: { - data: { - description: 'The page metadata.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -const data: MetaData = { - publication: { date: '2022-04-09', time: '01:04:00' }, - thematics: [ - - Category 1 - , - - Category 2 - , - ], -}; - -/** - * Layout Stories - Meta - */ -export const Meta = Template.bind({}); -Meta.args = { - data, -}; diff --git a/src/components/molecules/layout/meta.test.tsx b/src/components/molecules/layout/meta.test.tsx deleted file mode 100644 index 0635fc3..0000000 --- a/src/components/molecules/layout/meta.test.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '../../../../tests/utils'; -import { getFormattedDate } from '../../../utils/helpers'; -import { Meta } from './meta'; - -const data = { - publication: { date: '2022-04-09' }, - thematics: [ - - Category 1 - , - - Category 2 - , - ], -}; - -describe('Meta', () => { - it('format a date string', () => { - render(); - expect( - rtlScreen.getByText(getFormattedDate(data.publication.date)) - ).toBeInTheDocument(); - }); -}); diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx deleted file mode 100644 index 63909a4..0000000 --- a/src/components/molecules/layout/meta.tsx +++ /dev/null @@ -1,395 +0,0 @@ -import type { FC, ReactNode } from 'react'; -import { useIntl } from 'react-intl'; -import { getFormattedDate, getFormattedTime } from '../../../utils/helpers'; -import { - DescriptionList, - type DescriptionListProps, - Link, - Group, - Term, - Description, -} from '../../atoms'; -import styles from './meta.module.scss'; - -export type CustomMeta = { - label: string; - value: ReactNode; -}; - -export type MetaComments = { - /** - * A page title. - */ - about: string; - /** - * The comments count. - */ - count: number; - /** - * Wrap the comments count with a link to the given target. - */ - target?: string; -}; - -export type MetaDate = { - /** - * A date string. Ex: `2022-04-30`. - */ - date: string; - /** - * A time string. Ex: `10:25:59`. - */ - time?: string; - /** - * Wrap the date with a link to the given target. - */ - target?: string; -}; - -export type MetaData = { - /** - * The author name. - */ - author?: string; - /** - * The comments count. - */ - comments?: MetaComments; - /** - * The creation date. - */ - creation?: MetaDate; - /** - * A custom label/value metadata. - */ - custom?: CustomMeta; - /** - * The license name. - */ - license?: string; - /** - * The popularity. - */ - popularity?: string | JSX.Element; - /** - * The publication date. - */ - publication?: MetaDate; - /** - * The estimated reading time. - */ - readingTime?: string | JSX.Element; - /** - * An array of repositories. - */ - repositories?: string[] | JSX.Element[]; - /** - * An array of technologies. - */ - technologies?: string[]; - /** - * An array of thematics. - */ - thematics?: string[] | JSX.Element[]; - /** - * An array of thematics. - */ - topics?: string[] | JSX.Element[]; - /** - * A total number of posts. - */ - total?: number; - /** - * The update date. - */ - update?: MetaDate; - /** - * An url. - */ - website?: string; -}; - -const isCustomMeta = ( - key: keyof MetaData, - _value: unknown -): _value is MetaData['custom'] => key === 'custom'; - -export type MetaProps = Omit & { - /** - * The meta data. - */ - data: MetaData; -}; - -/** - * Meta component - * - * Renders the given metadata. - */ -export const Meta: FC = ({ - className = '', - data, - isInline = false, - ...props -}) => { - const layoutClass = styles[isInline ? 'list--inline' : 'list--stack']; - const listClass = `${styles.list} ${layoutClass} ${className}`; - const intl = useIntl(); - - /** - * Retrieve the item label based on its key. - * - * @param {keyof MetaData} key - The meta key. - * @returns {string} The item label. - */ - const getLabel = (key: keyof MetaData): string => { - switch (key) { - case 'author': - return intl.formatMessage({ - defaultMessage: 'Written by:', - description: 'Meta: author label', - id: 'OI0N37', - }); - case 'comments': - return intl.formatMessage({ - defaultMessage: 'Comments:', - description: 'Meta: comments label', - id: 'jTVIh8', - }); - case 'creation': - return intl.formatMessage({ - defaultMessage: 'Created on:', - description: 'Meta: creation date label', - id: 'b4fdYE', - }); - case 'license': - return intl.formatMessage({ - defaultMessage: 'License:', - description: 'Meta: license label', - id: 'AuGklx', - }); - case 'popularity': - return intl.formatMessage({ - defaultMessage: 'Popularity:', - description: 'Meta: popularity label', - id: 'pWTj2W', - }); - case 'publication': - return intl.formatMessage({ - defaultMessage: 'Published on:', - description: 'Meta: publication date label', - id: 'QGi5uD', - }); - case 'readingTime': - return intl.formatMessage({ - defaultMessage: 'Reading time:', - description: 'Meta: reading time label', - id: 'EbFvsM', - }); - case 'repositories': - return intl.formatMessage({ - defaultMessage: 'Repositories:', - description: 'Meta: repositories label', - id: 'DssFG1', - }); - case 'technologies': - return intl.formatMessage({ - defaultMessage: 'Technologies:', - description: 'Meta: technologies label', - id: 'ADQmDF', - }); - case 'thematics': - return intl.formatMessage({ - defaultMessage: 'Thematics:', - description: 'Meta: thematics label', - id: 'bz53Us', - }); - case 'topics': - return intl.formatMessage({ - defaultMessage: 'Topics:', - description: 'Meta: topics label', - id: 'gJNaBD', - }); - case 'total': - return intl.formatMessage({ - defaultMessage: 'Total:', - description: 'Meta: total label', - id: '92zgdp', - }); - case 'update': - return intl.formatMessage({ - defaultMessage: 'Updated on:', - description: 'Meta: update date label', - id: 'tLC7bh', - }); - case 'website': - return intl.formatMessage({ - defaultMessage: 'Official website:', - description: 'Meta: official website label', - id: 'GRyyfy', - }); - default: - return ''; - } - }; - - /** - * Retrieve a formatted date (and time). - * - * @param {MetaDate} dateTime - A date object. - * @returns {JSX.Element} The formatted date wrapped in a time element. - */ - const getDate = (dateTime: MetaDate): JSX.Element => { - const { date, time, target } = dateTime; - - if (!dateTime.time) { - const isoDate = new Date(`${date}`).toISOString(); - return target ? ( - - - - ) : ( - - ); - } - - const isoDateTime = new Date(`${date}T${time}`).toISOString(); - const dateString = intl.formatMessage( - { - defaultMessage: '{date} at {time}', - description: 'Meta: publication date and time', - id: 'fcHeyC', - }, - { - date: getFormattedDate(dateTime.date), - time: getFormattedTime(`${dateTime.date}T${dateTime.time}`), - } - ); - - return target ? ( - - - - ) : ( - - ); - }; - - /** - * Retrieve the formatted comments count. - * - * @param comments - The comments object. - * @returns {string | JSX.Element} - The comments count. - */ - const getCommentsCount = (comments: MetaComments): string | JSX.Element => { - const { about, count, target } = comments; - const commentsCount = intl.formatMessage( - { - defaultMessage: - '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}} about {title}', - description: 'Meta: comments count', - id: '02rgLO', - }, - { - a11y: (chunks: ReactNode) => ( - {chunks} - ), - commentsCount: count, - title: about, - } - ); - - return target ? ( - {commentsCount as JSX.Element} - ) : ( - (commentsCount as JSX.Element) - ); - }; - - /** - * Retrieve the formatted item value. - * - * @param {keyof MetaData} key - The meta key. - * @param {ValueOf} value - The meta value. - * @returns {string|ReactNode|ReactNode[]} - The formatted value. - */ - const getValue = ( - key: T, - value: MetaData[T] - ): string | ReactNode | ReactNode[] => { - switch (key) { - case 'comments': - return getCommentsCount(value as MetaComments); - case 'creation': - case 'publication': - case 'update': - return getDate(value as MetaDate); - case 'total': - return intl.formatMessage( - { - defaultMessage: - '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', - description: 'BlogPage: posts count meta', - id: 'OF5cPz', - }, - { postsCount: value as number } - ); - case 'website': - return typeof value === 'string' ? ( - - {value} - - ) : null; - default: - return value as string | ReactNode | ReactNode[]; - } - }; - - /** - * Transform the metadata to description list item format. - * - * @param {MetaData} items - The meta. - * @returns {DescriptionListItem[]} The formatted description list items. - */ - const getItems = (items: MetaData) => { - const entries = Object.entries(items) as [ - keyof MetaData, - MetaData[keyof MetaData], - ][]; - const listItems = entries.map(([key, meta]) => { - if (!meta) return null; - - return ( - - - {isCustomMeta(key, meta) ? meta.label : getLabel(key)} - - {Array.isArray(meta) ? ( - meta.map((singleMeta, index) => ( - /* eslint-disable-next-line react/no-array-index-key -- Unsafe, - * but also temporary. This component should be removed or - * refactored. */ - - {isCustomMeta(key, singleMeta) - ? singleMeta - : getValue(key, singleMeta)} - - )) - ) : ( - - {isCustomMeta(key, meta) ? meta.value : getValue(key, meta)} - - )} - - ); - }); - - return listItems; - }; - - return ( - - {getItems(data)} - - ); -}; diff --git a/src/components/molecules/layout/page-footer.stories.tsx b/src/components/molecules/layout/page-footer.stories.tsx index 8e991a4..48c8c17 100644 --- a/src/components/molecules/layout/page-footer.stories.tsx +++ b/src/components/molecules/layout/page-footer.stories.tsx @@ -1,5 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { MetaData } from './meta'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { PageFooter as PageFooterComponent } from './page-footer'; /** @@ -40,16 +39,17 @@ const Template: ComponentStory = (args) => ( ); -const meta: MetaData = { - custom: { +const meta = [ + { + id: 'more-about', label: 'More posts about:', - value: [ - + value: ( + Topic name - , - ], + + ), }, -}; +]; /** * Page Footer Stories - With meta diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx index 375cbc4..a93fced 100644 --- a/src/components/molecules/layout/page-footer.tsx +++ b/src/components/molecules/layout/page-footer.tsx @@ -1,12 +1,12 @@ import type { FC } from 'react'; import { Footer, type FooterProps } from '../../atoms'; -import { Meta, type MetaData } from './meta'; +import { MetaList, type MetaItemData } from '../meta-list'; export type PageFooterProps = Omit & { /** * The footer metadata. */ - meta?: MetaData; + meta?: MetaItemData[]; }; /** @@ -15,5 +15,7 @@ export type PageFooterProps = Omit & { * Render a footer to display page meta. */ export const PageFooter: FC = ({ meta, ...props }) => ( -
{meta ? : null}
+
+ {meta ? : null} +
); diff --git a/src/components/molecules/layout/page-header.stories.tsx b/src/components/molecules/layout/page-header.stories.tsx index ea943bf..54d5fe8 100644 --- a/src/components/molecules/layout/page-header.stories.tsx +++ b/src/components/molecules/layout/page-header.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { PageHeader } from './page-header'; /** @@ -62,17 +62,31 @@ const Template: ComponentStory = (args) => ( ); -const meta = { - publication: { date: '2022-04-09' }, - thematics: [ - - Category 1 - , - - Category 2 - , - ], -}; +const meta = [ + { id: 'publication-date', label: 'Published on:', value: '2022-04-09' }, + { + id: 'thematics', + label: 'Thematics:', + value: [ + { + id: 'cat-1', + value: ( + + Category 1 + + ), + }, + { + id: 'cat-2', + value: ( + + Category 2 + + ), + }, + ], + }, +]; /** * Page Header Stories - Default diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx index b727cc1..ea0dd2c 100644 --- a/src/components/molecules/layout/page-header.tsx +++ b/src/components/molecules/layout/page-header.tsx @@ -1,6 +1,6 @@ import type { FC, ReactNode } from 'react'; import { Header, Heading } from '../../atoms'; -import { Meta, type MetaData } from './meta'; +import { MetaList, type MetaItemData } from '../meta-list'; import styles from './page-header.module.scss'; export type PageHeaderProps = { @@ -15,7 +15,7 @@ export type PageHeaderProps = { /** * The page metadata. */ - meta?: MetaData; + meta?: MetaItemData[]; /** * The page title. */ @@ -56,7 +56,7 @@ export const PageHeader: FC = ({ {title} {meta ? ( - + ) : null} {intro ? getIntro() : null} diff --git a/src/components/molecules/meta-list/index.ts b/src/components/molecules/meta-list/index.ts new file mode 100644 index 0000000..93f437d --- /dev/null +++ b/src/components/molecules/meta-list/index.ts @@ -0,0 +1,2 @@ +export * from './meta-item'; +export * from './meta-list'; diff --git a/src/components/molecules/meta-list/meta-item/index.ts b/src/components/molecules/meta-list/meta-item/index.ts new file mode 100644 index 0000000..47795de --- /dev/null +++ b/src/components/molecules/meta-list/meta-item/index.ts @@ -0,0 +1 @@ +export * from './meta-item'; diff --git a/src/components/molecules/meta-list/meta-item/meta-item.module.scss b/src/components/molecules/meta-list/meta-item/meta-item.module.scss new file mode 100644 index 0000000..a1c2d47 --- /dev/null +++ b/src/components/molecules/meta-list/meta-item/meta-item.module.scss @@ -0,0 +1,62 @@ +@use "../../../../styles/abstracts/functions" as fun; + +.item { + column-gap: var(--spacing-2xs); + align-content: baseline; + + &--bordered-values { + row-gap: var(--spacing-2xs); + } + + &--centered { + margin-inline: auto; + text-align: center; + place-items: center; + justify-content: center; + } + + &--inlined { + align-items: first baseline; + } + + &--inlined-values { + flex-flow: row wrap; + } + + &:not(#{&}--bordered-values) { + row-gap: fun.convert-px(3); + } +} + +.value { + width: fit-content; + height: fit-content; + color: var(--color-fg); + font-weight: 400; +} + +:where(.item--bordered-values) { + .value { + padding: fun.convert-px(2) var(--spacing-2xs); + border: fun.convert-px(1) solid var(--color-primary-darker); + } +} + +:where(.item--inlined-values) { + .label { + flex: 1 0 100%; + } +} + +/* It's an arbitrary choice. When there is only one meta item (like on small + * cards) removing the width can mess up the layout. However, must of the times + * when there are multiples items, we need to remove the width especially if we + * want to use `isCentered` prop. */ +:where(.item--inlined-values:not(:only-of-type)) { + .label { + /* We need to remove its width to avoid an extra space and make the + * container width fit its contents. However the label should be smaller + * than the values to avoid unexpected behavior with layout. */ + width: 0; + } +} diff --git a/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx b/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx new file mode 100644 index 0000000..3ddb8f1 --- /dev/null +++ b/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx @@ -0,0 +1,108 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Link } from '../../../atoms'; +import { MetaItem } from './meta-item'; + +/** + * MetaItem - Storybook Meta + */ +export default { + title: 'Molecules/MetaList/Item', + component: MetaItem, + argTypes: { + label: { + control: { + type: 'text', + }, + description: 'The item label.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +/** + * MetaItem Stories - SingleValue + */ +export const SingleValue = Template.bind({}); +SingleValue.args = { + label: 'Comments', + value: 'No comments', +}; + +/** + * MetaItem Stories - MultipleValues + */ +export const MultipleValues = Template.bind({}); +MultipleValues.args = { + label: 'Tags', + value: [ + { id: 'tag1', value: Tag 1 }, + { id: 'tag2', value: Tag 2 }, + ], +}; + +/** + * MetaItem Stories - SingleValueBordered + */ +export const SingleValueBordered = Template.bind({}); +SingleValueBordered.args = { + hasBorderedValues: true, + label: 'Comments', + value: 'No comments', +}; + +/** + * MetaItem Stories - MultipleValuesBordered + */ +export const MultipleValuesBordered = Template.bind({}); +MultipleValuesBordered.args = { + hasBorderedValues: true, + label: 'Tags', + value: [ + { id: 'tag1', value: Tag 1 }, + { id: 'tag2', value: Tag 2 }, + ], +}; + +/** + * MetaItem Stories - SingleValueInlined + */ +export const SingleValueInlined = Template.bind({}); +SingleValueInlined.args = { + isInline: true, + label: 'Comments', + value: 'No comments', +}; + +/** + * MetaItem Stories - MultipleValuesInlined + */ +export const MultipleValuesInlined = Template.bind({}); +MultipleValuesInlined.args = { + isInline: true, + label: 'Tags', + value: [ + { id: 'tag1', value: Tag 1 }, + { id: 'tag2', value: Tag 2 }, + ], +}; + +/** + * MetaItem Stories - InlinedValues + */ +export const InlinedValues = Template.bind({}); +InlinedValues.args = { + hasInlinedValues: true, + label: 'Tags', + value: [ + { id: 'tag1', value: Tag 1 }, + { id: 'tag2', value: A long tag 2 }, + { id: 'tag3', value: Tag 3 }, + ], +}; diff --git a/src/components/molecules/meta-list/meta-item/meta-item.test.tsx b/src/components/molecules/meta-list/meta-item/meta-item.test.tsx new file mode 100644 index 0000000..629c4b2 --- /dev/null +++ b/src/components/molecules/meta-list/meta-item/meta-item.test.tsx @@ -0,0 +1,97 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { MetaItem } from './meta-item'; + +describe('MetaItem', () => { + it('renders a label and a value', () => { + const label = 'iusto'; + const value = 'autem'; + + render( +
+ +
+ ); + + expect(rtlScreen.getByRole('term')).toHaveTextContent(label); + expect(rtlScreen.getByRole('definition')).toHaveTextContent(value); + }); + + it('can render a label with multiple values', () => { + const label = 'iusto'; + const values = [ + { id: 'autem', value: 'autem' }, + { id: 'quisquam', value: 'aut' }, + { id: 'molestias', value: 'voluptatem' }, + ]; + + render( +
+ +
+ ); + + expect(rtlScreen.getByRole('term')).toHaveTextContent(label); + expect(rtlScreen.getAllByRole('definition')).toHaveLength(values.length); + }); + + it('can render a centered group of label and values', () => { + const label = 'iusto'; + const value = 'autem'; + + render( +
+ +
+ ); + + expect(rtlScreen.getByRole('term').parentElement).toHaveClass( + 'item--centered' + ); + }); + + it('can render an inlined group of label and values', () => { + const label = 'iusto'; + const value = 'autem'; + + render( +
+ +
+ ); + + expect(rtlScreen.getByRole('term').parentElement).toHaveClass( + 'item--inlined' + ); + }); + + it('can render a group of label and bordered values', () => { + const label = 'iusto'; + const value = 'autem'; + + render( +
+ +
+ ); + + expect(rtlScreen.getByRole('term').parentElement).toHaveClass( + 'item--bordered-values' + ); + }); + + it('can render a group of label and inlined values', () => { + const label = 'iusto'; + const value = 'autem'; + + render( +
+ +
+ ); + + expect(rtlScreen.getByRole('term').parentElement).toHaveClass( + 'item--inlined-values' + ); + }); +}); diff --git a/src/components/molecules/meta-list/meta-item/meta-item.tsx b/src/components/molecules/meta-list/meta-item/meta-item.tsx new file mode 100644 index 0000000..c5223c2 --- /dev/null +++ b/src/components/molecules/meta-list/meta-item/meta-item.tsx @@ -0,0 +1,90 @@ +import { + type ForwardRefRenderFunction, + type ReactElement, + type ReactNode, + forwardRef, +} from 'react'; +import { Description, Group, type GroupProps, Term } from '../../../atoms'; +import styles from './meta-item.module.scss'; + +export type MetaValue = string | ReactElement; + +export type MetaValues = { + id: string; + value: MetaValue; +}; + +export type MetaItemProps = Omit & { + /** + * Should the values be bordered? + * + * @default false + */ + hasBorderedValues?: boolean; + /** + * Should the values be inlined? + * + * @warning If you use it make sure the value is larger than the label. It + * could mess up your design since we are removing the label width. + * + * @default false + */ + hasInlinedValues?: boolean; + /** + * Should the label and values be centered? + * + * @default false + */ + isCentered?: boolean; + /** + * The item label. + */ + label: ReactNode; + /** + * The item value or values. + */ + value: MetaValue | MetaValues[]; +}; + +const MetaItemWithRef: ForwardRefRenderFunction< + HTMLDivElement, + MetaItemProps +> = ( + { + className = '', + hasBorderedValues = false, + hasInlinedValues = false, + isCentered = false, + isInline = false, + label, + value, + ...props + }, + ref +) => { + const itemClass = [ + styles.item, + styles[hasBorderedValues ? 'item--bordered-values' : ''], + styles[hasInlinedValues ? 'item--inlined-values' : ''], + styles[isCentered ? 'item--centered' : ''], + styles[isInline ? 'item--inlined' : 'item--stacked'], + className, + ].join(' '); + + return ( + + {label} + {Array.isArray(value) ? ( + value.map((item) => ( + + {item.value} + + )) + ) : ( + {value} + )} + + ); +}; + +export const MetaItem = forwardRef(MetaItemWithRef); diff --git a/src/components/molecules/meta-list/meta-list.module.scss b/src/components/molecules/meta-list/meta-list.module.scss new file mode 100644 index 0000000..5570f4c --- /dev/null +++ b/src/components/molecules/meta-list/meta-list.module.scss @@ -0,0 +1,24 @@ +.list { + display: grid; + width: fit-content; + height: fit-content; + + &--centered { + margin-inline: auto; + justify-items: center; + } + + &--inlined { + grid-auto-flow: column; + grid-template-columns: repeat( + auto-fit, + min(calc(100vw - (var(--spacing-md) * 2)), 1fr) + ); + column-gap: clamp(var(--spacing-lg), 3vw, var(--spacing-3xl)); + row-gap: clamp(var(--spacing-sm), 3vw, var(--spacing-md)); + } + + &--stacked { + gap: var(--spacing-2xs); + } +} diff --git a/src/components/molecules/meta-list/meta-list.stories.tsx b/src/components/molecules/meta-list/meta-list.stories.tsx new file mode 100644 index 0000000..463ec96 --- /dev/null +++ b/src/components/molecules/meta-list/meta-list.stories.tsx @@ -0,0 +1,70 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Link } from '../../atoms'; +import { type MetaItemData, MetaList } from './meta-list'; + +/** + * MetaList - Storybook Meta + */ +export default { + title: 'Molecules/MetaList', + component: MetaList, + argTypes: { + items: { + description: 'The meta items.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +const items: MetaItemData[] = [ + { id: 'comments', label: 'Comments', value: 'No comments.' }, + { + id: 'category', + label: 'Category', + value: Cat 1, + }, + { + id: 'tags', + label: 'Tags', + value: [ + { id: 'tag1', value: Tag 1 }, + { id: 'tag2', value: Tag 2 }, + ], + }, + { + hasBorderedValues: true, + hasInlinedValues: true, + id: 'technologies', + label: 'Technologies', + value: [ + { id: 'techno1', value: 'HTML' }, + { id: 'techno2', value: 'CSS' }, + { id: 'techno3', value: 'Javascript' }, + ], + }, +]; + +/** + * MetaList Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + items, +}; + +/** + * MetaList Stories - Inlined + */ +export const Inlined = Template.bind({}); +Inlined.args = { + isInline: true, + items, +}; diff --git a/src/components/molecules/meta-list/meta-list.test.tsx b/src/components/molecules/meta-list/meta-list.test.tsx new file mode 100644 index 0000000..cc4d2fa --- /dev/null +++ b/src/components/molecules/meta-list/meta-list.test.tsx @@ -0,0 +1,79 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { type MetaItemData, MetaList } from './meta-list'; + +describe('MetaList', () => { + it('renders a list of meta items', () => { + const items: MetaItemData[] = [ + { id: 'item1', label: 'Item 1', value: 'Value 1' }, + { id: 'item2', label: 'Item 2', value: 'Value 2' }, + { id: 'item3', label: 'Item 3', value: 'Value 3' }, + { id: 'item4', label: 'Item 4', value: 'Value 4' }, + ]; + + render(); + + expect(rtlScreen.getAllByRole('term')).toHaveLength(items.length); + expect(rtlScreen.getAllByRole('definition')).toHaveLength(items.length); + }); + + it('can render a centered list of meta items', () => { + const items: MetaItemData[] = [ + { id: 'item1', label: 'Item 1', value: 'Value 1' }, + { id: 'item2', label: 'Item 2', value: 'Value 2' }, + { id: 'item3', label: 'Item 3', value: 'Value 3' }, + { id: 'item4', label: 'Item 4', value: 'Value 4' }, + ]; + + render(); + + const terms = rtlScreen.getAllByRole('term'); + + expect(terms[0].parentElement?.parentElement).toHaveClass('list--centered'); + }); + + it('can render an inlined list of meta items', () => { + const items: MetaItemData[] = [ + { id: 'item1', label: 'Item 1', value: 'Value 1' }, + { id: 'item2', label: 'Item 2', value: 'Value 2' }, + { id: 'item3', label: 'Item 3', value: 'Value 3' }, + { id: 'item4', label: 'Item 4', value: 'Value 4' }, + ]; + + render(); + + const terms = rtlScreen.getAllByRole('term'); + + expect(terms[0].parentElement?.parentElement).toHaveClass('list--inlined'); + }); + + it('can render a list of meta items with bordered values', () => { + const items: MetaItemData[] = [ + { id: 'item1', label: 'Item 1', value: 'Value 1' }, + { id: 'item2', label: 'Item 2', value: 'Value 2' }, + { id: 'item3', label: 'Item 3', value: 'Value 3' }, + { id: 'item4', label: 'Item 4', value: 'Value 4' }, + ]; + + render(); + + const terms = rtlScreen.getAllByRole('term'); + + expect(terms[0].parentElement).toHaveClass('item--bordered-values'); + }); + + it('can render a list of meta items with inlined values', () => { + const items: MetaItemData[] = [ + { id: 'item1', label: 'Item 1', value: 'Value 1' }, + { id: 'item2', label: 'Item 2', value: 'Value 2' }, + { id: 'item3', label: 'Item 3', value: 'Value 3' }, + { id: 'item4', label: 'Item 4', value: 'Value 4' }, + ]; + + render(); + + const terms = rtlScreen.getAllByRole('term'); + + expect(terms[0].parentElement).toHaveClass('item--inlined-values'); + }); +}); diff --git a/src/components/molecules/meta-list/meta-list.tsx b/src/components/molecules/meta-list/meta-list.tsx new file mode 100644 index 0000000..288fd9a --- /dev/null +++ b/src/components/molecules/meta-list/meta-list.tsx @@ -0,0 +1,78 @@ +import { type ForwardRefRenderFunction, forwardRef } from 'react'; +import { DescriptionList, type DescriptionListProps } from '../../atoms'; +import { MetaItem, type MetaItemProps } from './meta-item'; +import styles from './meta-list.module.scss'; + +export type MetaItemData = Pick< + MetaItemProps, + | 'hasBorderedValues' + | 'hasInlinedValues' + | 'isCentered' + | 'isInline' + | 'label' + | 'value' +> & { + id: string; +}; + +export type MetaListProps = Omit & + Pick & { + /** + * Should the items be inlined? + * + * @default false + */ + hasInlinedItems?: boolean; + /** + * Should the meta be centered? + * + * @default false + */ + isCentered?: boolean; + /** + * The meta items. + */ + items: MetaItemData[]; + }; + +const MetaListWithRef: ForwardRefRenderFunction< + HTMLDListElement, + MetaListProps +> = ( + { + className = '', + hasBorderedValues = false, + hasInlinedItems = false, + hasInlinedValues = false, + isCentered = false, + isInline = false, + items, + ...props + }, + ref +) => { + const listClass = [ + styles.list, + styles[isCentered ? 'list--centered' : ''], + styles[isInline ? 'list--inlined' : 'list--stacked'], + className, + ].join(' '); + + return ( + + {items.map(({ id, ...item }) => ( + + ))} + + ); +}; + +export const MetaList = forwardRef(MetaListWithRef); diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx index 1b5051f..03feee7 100644 --- a/src/components/organisms/layout/cards-list.stories.tsx +++ b/src/components/organisms/layout/cards-list.stories.tsx @@ -90,11 +90,21 @@ const items: CardsListItem[] = [ id: 'card-1', cover: { alt: 'card 1 picture', - src: 'http://picsum.photos/640/480', + src: 'https://picsum.photos/640/480', width: 640, height: 480, }, - meta: { thematics: ['Velit', 'Ex', 'Alias'] }, + meta: [ + { + id: 'categories', + label: 'Categories', + value: [ + { id: 'velit', value: 'Velit' }, + { id: 'ex', value: 'Ex' }, + { id: 'alias', value: 'Alias' }, + ], + }, + ], tagline: 'Molestias ut error', title: 'Et alias omnis', url: '#', @@ -103,11 +113,11 @@ const items: CardsListItem[] = [ id: 'card-2', cover: { alt: 'card 2 picture', - src: 'http://picsum.photos/640/480', + src: 'https://picsum.photos/640/480', width: 640, height: 480, }, - meta: { thematics: ['Voluptas'] }, + meta: [{ id: 'categories', label: 'Categories', value: 'Voluptas' }], tagline: 'Quod vel accusamus', title: 'Laboriosam doloremque mollitia', url: '#', @@ -116,13 +126,22 @@ const items: CardsListItem[] = [ id: 'card-3', cover: { alt: 'card 3 picture', - src: 'http://picsum.photos/640/480', + src: 'https://picsum.photos/640/480', width: 640, height: 480, }, - meta: { - thematics: ['Quisquam', 'Quia', 'Sapiente', 'Perspiciatis'], - }, + meta: [ + { + id: 'categories', + label: 'Categories', + value: [ + { id: 'quisquam', value: 'Quisquam' }, + { id: 'quia', value: 'Quia' }, + { id: 'sapiente', value: 'Sapiente' }, + { id: 'perspiciatis', value: 'Perspiciatis' }, + ], + }, + ], tagline: 'Quo error eum', title: 'Magni rem nulla', url: '#', diff --git a/src/components/organisms/layout/cards-list.test.tsx b/src/components/organisms/layout/cards-list.test.tsx index 751a502..c9d6ae7 100644 --- a/src/components/organisms/layout/cards-list.test.tsx +++ b/src/components/organisms/layout/cards-list.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; import { CardsList, type CardsListItem } from './cards-list'; const items: CardsListItem[] = [ @@ -7,11 +7,21 @@ const items: CardsListItem[] = [ id: 'card-1', cover: { alt: 'card 1 picture', - src: 'http://placeimg.com/640/480', + src: 'https://picsum.photos/640/480', width: 640, height: 480, }, - meta: { thematics: ['Velit', 'Ex', 'Alias'] }, + meta: [ + { + id: 'categories', + label: 'Categories', + value: [ + { id: 'velit', value: 'Velit' }, + { id: 'ex', value: 'Ex' }, + { id: 'alias', value: 'Alias' }, + ], + }, + ], tagline: 'Molestias ut error', title: 'Et alias omnis', url: '#', @@ -20,11 +30,11 @@ const items: CardsListItem[] = [ id: 'card-2', cover: { alt: 'card 2 picture', - src: 'http://placeimg.com/640/480', + src: 'https://picsum.photos/640/480', width: 640, height: 480, }, - meta: { thematics: ['Voluptas'] }, + meta: [{ id: 'categories', label: 'Categories', value: 'Voluptas' }], tagline: 'Quod vel accusamus', title: 'Laboriosam doloremque mollitia', url: '#', @@ -33,13 +43,22 @@ const items: CardsListItem[] = [ id: 'card-3', cover: { alt: 'card 3 picture', - src: 'http://placeimg.com/640/480', + src: 'https://picsum.photos/640/480', width: 640, height: 480, }, - meta: { - thematics: ['Quisquam', 'Quia', 'Sapiente', 'Perspiciatis'], - }, + meta: [ + { + id: 'categories', + label: 'Categories', + value: [ + { id: 'quisquam', value: 'Quisquam' }, + { id: 'quia', value: 'Quia' }, + { id: 'sapiente', value: 'Sapiente' }, + { id: 'perspiciatis', value: 'Perspiciatis' }, + ], + }, + ], tagline: 'Quo error eum', title: 'Magni rem nulla', url: '#', @@ -49,7 +68,7 @@ const items: CardsListItem[] = [ describe('CardsList', () => { it('renders a list of cards', () => { render(); - expect(screen.getAllByRole('heading', { level: 2 })).toHaveLength( + expect(rtlScreen.getAllByRole('heading', { level: 2 })).toHaveLength( items.length ); }); diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx index ca209f5..e1ea6b5 100644 --- a/src/components/organisms/layout/comment.tsx +++ b/src/components/organisms/layout/comment.tsx @@ -5,9 +5,10 @@ import { type FC, useCallback, useState } from 'react'; import { useIntl } from 'react-intl'; import type { Comment as CommentSchema, WithContext } from 'schema-dts'; import type { SingleComment } from '../../../types'; +import { getFormattedDate, getFormattedTime } from '../../../utils/helpers'; import { useSettings } from '../../../utils/hooks'; import { Button, Link } from '../../atoms'; -import { Meta } from '../../molecules'; +import { MetaList } from '../../molecules'; import { CommentForm, type CommentFormProps } from '../forms'; import styles from './comment.module.scss'; @@ -61,6 +62,20 @@ export const UserComment: FC = ({ const { author, date } = meta; const [publicationDate, publicationTime] = date.split(' '); + const isoDateTime = new Date( + `${publicationDate}T${publicationTime}` + ).toISOString(); + const commentDate = intl.formatMessage( + { + defaultMessage: '{date} at {time}', + description: 'Comment: publication date and time', + id: 'Ld6yMP', + }, + { + date: getFormattedDate(publicationDate), + time: getFormattedTime(`${publicationDate}T${publicationTime}`), + } + ); const buttonLabel = isReplying ? intl.formatMessage({ @@ -135,16 +150,24 @@ export const UserComment: FC = ({ {author.name} )} - + + + ), + }, + ]} />
{ - it('renders some data', () => { - render(); - expect(screen.getByText(data.license!)).toBeInTheDocument(); + it('renders some meta', () => { + render(); + + const metaLabels = meta.map((item) => item.label); + + for (const label of metaLabels) { + expect(rtlScreen.getByText(label)).toBeInTheDocument(); + } }); it('renders a cover', () => { - render(); - expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument(); + render(); + expect(rtlScreen.getByRole('img', { name: cover.alt })).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx index 8af58ec..ede2627 100644 --- a/src/components/organisms/layout/overview.tsx +++ b/src/components/organisms/layout/overview.tsx @@ -1,19 +1,9 @@ import NextImage, { type ImageProps as NextImageProps } from 'next/image'; import type { FC } from 'react'; import { Figure } from '../../atoms'; -import { Meta, type MetaData } from '../../molecules'; +import { MetaList, type MetaItemData } from '../../molecules'; import styles from './overview.module.scss'; -export type OverviewMeta = Pick< - MetaData, - | 'creation' - | 'license' - | 'popularity' - | 'repositories' - | 'technologies' - | 'update' ->; - export type OverviewProps = { /** * Set additional classnames to the overview wrapper. @@ -26,7 +16,7 @@ export type OverviewProps = { /** * The overview meta. */ - meta: OverviewMeta; + meta: MetaItemData[]; }; /** @@ -39,20 +29,16 @@ export const Overview: FC = ({ cover, meta, }) => { - const { technologies, ...remainingMeta } = meta; - const metaModifier = technologies ? styles['meta--has-techno'] : ''; + const wrapperClass = `${styles.wrapper} ${className}`; return ( -
+
{cover ? (
) : null} - +
); }; diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss index 9dc1a69..ffc30ac 100644 --- a/src/components/organisms/layout/summary.module.scss +++ b/src/components/organisms/layout/summary.module.scss @@ -109,13 +109,9 @@ flex-flow: row wrap; font-size: var(--font-size-sm); - &__item { - flex: 1 0 min(calc(100vw - 2 * var(--spacing-md)), 14ch); - } - @include mix.media("screen") { @include mix.dimensions("sm") { - display: flex; + flex-flow: column wrap; margin-top: 0; } } diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx index fa3dfe5..f5c16cd 100644 --- a/src/components/organisms/layout/summary.tsx +++ b/src/components/organisms/layout/summary.tsx @@ -2,6 +2,7 @@ import NextImage, { type ImageProps as NextImageProps } from 'next/image'; import type { FC, ReactNode } from 'react'; import { useIntl } from 'react-intl'; import type { Article, Meta as MetaType } from '../../../types'; +import { getFormattedDate } from '../../../utils/helpers'; import { useReadingTime } from '../../../utils/hooks'; import { ButtonLink, @@ -11,7 +12,7 @@ import { Link, Figure, } from '../../atoms'; -import { Meta, type MetaData } from '../../molecules'; +import { MetaList, type MetaItemData } from '../../molecules'; import styles from './summary.module.scss'; export type Cover = Pick; @@ -69,42 +70,134 @@ export const Summary: FC = ({ ), } ); - const { author, commentsCount, cover, dates, thematics, topics, wordsCount } = - meta; - const readingTime = useReadingTime(wordsCount, true); + const readingTime = useReadingTime(meta.wordsCount, true); - const getMeta = (): MetaData => { - return { - 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} - - )), - topics: topics?.map((topic) => ( - - {topic.name} - - )), - comments: { - about: title, - count: commentsCount ?? 0, - target: `${url}#comments`, + /** + * 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 getMetaItems = (): MetaItemData[] => { + const summaryMeta: MetaItemData[] = [ + { + id: 'publication-date', + label: intl.formatMessage({ + defaultMessage: 'Published on:', + description: 'Summary: publication date label', + id: 'TvQ2Ee', + }), + value: getDate(meta.dates.publication), }, - }; + ]; + + if (meta.dates.update && meta.dates.update !== meta.dates.publication) + summaryMeta.push({ + id: 'update-date', + label: intl.formatMessage({ + defaultMessage: 'Updated on:', + description: 'Summary: update date label', + id: 'f0Z/Po', + }), + value: getDate(meta.dates.update), + }); + + summaryMeta.push({ + id: 'reading-time', + label: intl.formatMessage({ + defaultMessage: 'Reading time:', + description: 'Summary: reading time label', + id: 'tyzdql', + }), + value: readingTime, + }); + + if (meta.author) + summaryMeta.push({ + id: 'author', + label: intl.formatMessage({ + defaultMessage: 'Written by:', + description: 'Summary: author label', + id: 'r/6HOI', + }), + value: meta.author.name, + }); + + if (meta.thematics) + summaryMeta.push({ + id: 'thematics', + label: intl.formatMessage({ + defaultMessage: 'Thematics:', + description: 'Summary: thematics label', + id: 'bk0WOp', + }), + value: meta.thematics.map((thematic) => { + return { + id: `thematic-${thematic.id}`, + value: {thematic.name}, + }; + }), + }); + + if (meta.topics) + summaryMeta.push({ + id: 'topics', + label: intl.formatMessage({ + defaultMessage: 'Topics:', + description: 'Summary: topics label', + id: 'yIZ+AC', + }), + value: meta.topics.map((topic) => { + return { + id: `topic-${topic.id}`, + value: {topic.name}, + }; + }), + }); + + if (meta.commentsCount !== undefined) { + const commentsCount = intl.formatMessage( + { + defaultMessage: + '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}} about {title}', + description: 'Summary: comments count', + id: 'ye/vlA', + }, + { + a11y: (chunks: ReactNode) => ( + {chunks} + ), + commentsCount: meta.commentsCount, + title, + } + ); + summaryMeta.push({ + id: 'comments-count', + label: intl.formatMessage({ + defaultMessage: 'Comments:', + description: 'Summary: comments label', + id: 'bfPp0g', + }), + value: ( + {commentsCount as JSX.Element} + ), + }); + } + + return summaryMeta; }; return (
- {cover ? ( + {meta.cover ? (
- +
) : null}
@@ -121,21 +214,19 @@ export const Summary: FC = ({ dangerouslySetInnerHTML={{ __html: intro }} /> - <> - {readMore} - - + {readMore} +
- +
); diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx index 683b6b2..7977382 100644 --- a/src/components/templates/page/page-layout.stories.tsx +++ b/src/components/templates/page/page-layout.stories.tsx @@ -271,23 +271,38 @@ Post.args = { breadcrumb: postBreadcrumb, title: pageTitle, intro: pageIntro, - headerMeta: { - publication: { date: '2020-03-14' }, - thematics: [ - - Cat 1 - , - - Cat 2 - , - ], - }, - footerMeta: { - custom: { + headerMeta: [ + { id: 'publication-date', label: 'Published on:', value: '2020-03-14' }, + { + id: 'thematics', + label: 'Thematics:', + value: [ + { + id: 'cat-1', + value: ( + + Cat 1 + + ), + }, + { + id: 'cat-2', + value: ( + + Cat 2 + + ), + }, + ], + }, + ], + footerMeta: [ + { + id: 'read-more', label: 'Read more about:', value: Topic 1, }, - }, + ], children: ( <> Impedit commodi rerum @@ -357,7 +372,7 @@ export const Blog = Template.bind({}); Blog.args = { breadcrumb: postsListBreadcrumb, title: 'Blog', - headerMeta: { total: posts.length }, + headerMeta: [{ id: 'total', label: 'Total:', value: `${posts.length}` }], children: ( Array.isArray(comments) && comments.length > 0; -/** - * Check if meta properties are defined. - * - * @param {MetaData} meta - The metadata. - */ -const hasMeta = (meta: MetaData) => Object.values(meta).every((value) => value); - type CommentStatus = { isReply: boolean; kind: NoticeKind; @@ -256,7 +248,7 @@ export const PageLayout: FC = ({ {children}
)} - {footerMeta && hasMeta(footerMeta) ? ( + {footerMeta?.length ? ( ) : null} about {title}", - "description": "Meta: comments count" - }, "0gVlI3": { "defaultMessage": "Tracking:", "description": "AckeeToggle: select label" @@ -59,6 +55,10 @@ "defaultMessage": "Name:", "description": "ContactForm: name label" }, + "24FIsG": { + "defaultMessage": "Updated on:", + "description": "ThematicPage: update date label" + }, "28GZdv": { "defaultMessage": "Projects", "description": "Breadcrumb: projects label" @@ -99,6 +99,10 @@ "defaultMessage": "Page not found.", "description": "404Page: SEO - Meta description" }, + "4QbTDq": { + "defaultMessage": "Published on:", + "description": "Page: publication date label" + }, "4iYISO": { "defaultMessage": "Loading the requested article...", "description": "ArticlePage: loading article message" @@ -151,9 +155,9 @@ "defaultMessage": "{website} picture", "description": "Layout: photo alternative text" }, - "92zgdp": { - "defaultMessage": "Total:", - "description": "Meta: total label" + "9DfuHk": { + "defaultMessage": "Updated on:", + "description": "TopicPage: update date label" }, "9MeLN3": { "defaultMessage": "{articlesCount, plural, =0 {# loaded articles} one {# loaded article} other {# loaded articles}} out of a total of {total}", @@ -179,10 +183,6 @@ "defaultMessage": "Contact", "description": "ContactPage: page title" }, - "AuGklx": { - "defaultMessage": "License:", - "description": "Meta: license label" - }, "B290Ph": { "defaultMessage": "Thanks, your comment was successfully sent.", "description": "PageLayout: comment form success message" @@ -199,6 +199,10 @@ "defaultMessage": "Failed to load.", "description": "BlogPage: failed to load text" }, + "CvOqoh": { + "defaultMessage": "Thematics:", + "description": "ArticlePage: thematics meta label" + }, "D8vB38": { "defaultMessage": "Blog", "description": "Layout: main nav - blog link" @@ -211,14 +215,6 @@ "defaultMessage": "Thematics", "description": "SearchPage: thematics list widget title" }, - "DssFG1": { - "defaultMessage": "Repositories:", - "description": "Meta: repositories label" - }, - "EbFvsM": { - "defaultMessage": "Reading time:", - "description": "Meta: reading time label" - }, "EeCqAE": { "defaultMessage": "Loading the search results...", "description": "SearchPage: loading search results message" @@ -227,14 +223,14 @@ "defaultMessage": "Blog", "description": "Breadcrumb: blog label" }, + "Ez8Qim": { + "defaultMessage": "Updated on:", + "description": "Page: update date label" + }, "G+Twgm": { "defaultMessage": "Search", "description": "SearchModal: modal title" }, - "GRyyfy": { - "defaultMessage": "Official website:", - "description": "Meta: official website label" - }, "GTbGMy": { "defaultMessage": "Open menu", "description": "MainNav: Open label" @@ -243,6 +239,10 @@ "defaultMessage": "Topics", "description": "Error404Page: topics list widget title" }, + "Gw7X3x": { + "defaultMessage": "Reading time:", + "description": "ArticlePage: reading time label" + }, "HFdzae": { "defaultMessage": "Contact form", "description": "ContactForm: form accessible name" @@ -255,6 +255,10 @@ "defaultMessage": "Thematics", "description": "BlogPage: thematics list widget title" }, + "HxZvY4": { + "defaultMessage": "Published on:", + "description": "ProjectsPage: publication date label" + }, "IY5ew6": { "defaultMessage": "Submitting...", "description": "CommentForm: spinner message on submit" @@ -271,6 +275,10 @@ "defaultMessage": "Skip to content", "description": "Layout: Skip to content link" }, + "KV+NMZ": { + "defaultMessage": "Published on:", + "description": "TopicPage: publication date label" + }, "KVSWGP": { "defaultMessage": "Other thematics", "description": "ThematicPage: other thematics list widget title" @@ -279,6 +287,10 @@ "defaultMessage": "Page not found", "description": "Error404Page: page title" }, + "KrNvQi": { + "defaultMessage": "Popularity:", + "description": "ProjectsPage: popularity label" + }, "LCorTC": { "defaultMessage": "Cancel reply", "description": "Comment: cancel reply button" @@ -287,10 +299,18 @@ "defaultMessage": "Close search", "description": "Search: Close label" }, + "Ld6yMP": { + "defaultMessage": "{date} at {time}", + "description": "Comment: publication date and time" + }, "LszkU6": { "defaultMessage": "All posts in {thematicName}", "description": "ThematicPage: posts list heading" }, + "MJbZfX": { + "defaultMessage": "Written by:", + "description": "ArticlePage: author label" + }, "N44SOc": { "defaultMessage": "Projects", "description": "HomePage: link to projects" @@ -307,18 +327,10 @@ "defaultMessage": "Github profile", "description": "ProjectsPage: Github profile link" }, - "OF5cPz": { - "defaultMessage": "{postsCount, plural, =0 {No articles} one {# article} other {# articles}}", - "description": "BlogPage: posts count meta" - }, "OHvb01": { "defaultMessage": "Back to top", "description": "SiteFooter: an accessible name for the back to top button" }, - "OI0N37": { - "defaultMessage": "Written by:", - "description": "Meta: author label" - }, "OL0Yzx": { "defaultMessage": "Publish", "description": "CommentForm: submit button" @@ -343,10 +355,6 @@ "defaultMessage": "Open settings", "description": "Settings: Open label" }, - "QGi5uD": { - "defaultMessage": "Published on:", - "description": "Meta: publication date label" - }, "QLisK6": { "defaultMessage": "Dark Theme 🌙", "description": "usePrism: toggle dark theme button text" @@ -363,10 +371,22 @@ "defaultMessage": "CV", "description": "Layout: main nav - cv link" }, + "RecdwX": { + "defaultMessage": "Published on:", + "description": "ArticlePage: publication date label" + }, + "RvGb2c": { + "defaultMessage": "{postsCount, plural, =0 {No articles} one {# article} other {# articles}}", + "description": "Page: posts count meta" + }, "RwI3B9": { "defaultMessage": "Loading the repository popularity...", "description": "ProjectsPage: loading repository popularity" }, + "RwNZ6p": { + "defaultMessage": "Technologies:", + "description": "ProjectsPage: technologies label" + }, "Sm2wCk": { "defaultMessage": "LinkedIn profile", "description": "CVPage: LinkedIn profile link" @@ -383,6 +403,14 @@ "defaultMessage": "An error occurred:", "description": "Contact: error message" }, + "TvQ2Ee": { + "defaultMessage": "Published on:", + "description": "Summary: publication date label" + }, + "UTGhUU": { + "defaultMessage": "Published on:", + "description": "ThematicPage: publication date label" + }, "UsQske": { "defaultMessage": "Read more here:", "description": "Sharing: content link prefix" @@ -395,6 +423,10 @@ "defaultMessage": "It is now awaiting moderation.", "description": "PageLayout: comment awaiting moderation" }, + "VtYzuv": { + "defaultMessage": "License:", + "description": "ProjectsPage: license label" + }, "WDwNDl": { "defaultMessage": "Search", "description": "SearchPage: SEO - Page title" @@ -427,6 +459,10 @@ "defaultMessage": "Light theme", "description": "ThemeToggle: light theme label" }, + "ZAqGZ6": { + "defaultMessage": "Updated on:", + "description": "ArticlePage: update date label" + }, "ZB/Aw2": { "defaultMessage": "Partial includes only page url, views and duration.", "description": "AckeeToggle: tooltip message" @@ -455,18 +491,18 @@ "defaultMessage": "You should read {title}", "description": "Sharing: subject text" }, - "b4fdYE": { - "defaultMessage": "Created on:", - "description": "Meta: creation date label" + "bfPp0g": { + "defaultMessage": "Comments:", + "description": "Summary: comments label" + }, + "bk0WOp": { + "defaultMessage": "Thematics:", + "description": "Summary: thematics label" }, "bojYF5": { "defaultMessage": "Home", "description": "Layout: main nav - home link" }, - "bz53Us": { - "defaultMessage": "Thematics:", - "description": "Meta: thematics label" - }, "c556Qo": { "defaultMessage": "Sidebar", "description": "PageLayout: accessible name for the sidebar" @@ -475,6 +511,10 @@ "defaultMessage": "Comment form", "description": "CommentForm: aria label" }, + "f0Z/Po": { + "defaultMessage": "Updated on:", + "description": "Summary: update date label" + }, "fN04AJ": { "defaultMessage": "Download the CV in PDF", "description": "CVPage: download CV in PDF text" @@ -483,10 +523,6 @@ "defaultMessage": "Failed to load.", "description": "SearchPage: failed to load text" }, - "fcHeyC": { - "defaultMessage": "{date} at {time}", - "description": "Meta: publication date and time" - }, "fkcTGp": { "defaultMessage": "An error occurred:", "description": "PageLayout: comment form error message" @@ -499,10 +535,6 @@ "defaultMessage": "It has been approved.", "description": "PageLayout: comment approved." }, - "gJNaBD": { - "defaultMessage": "Topics:", - "description": "Meta: topics label" - }, "gPfT/K": { "defaultMessage": "Settings", "description": "SettingsModal: title" @@ -523,6 +555,14 @@ "defaultMessage": "{count} seconds", "description": "useReadingTime: seconds count" }, + "iDIKb7": { + "defaultMessage": "Repositories:", + "description": "ProjectsPage: repositories label" + }, + "iv3Ex1": { + "defaultMessage": "{postsCount, plural, =0 {No articles} one {# article} other {# articles}}", + "description": "ThematicPage: posts count meta" + }, "j5k9Fe": { "defaultMessage": "Home", "description": "Breadcrumb: home label" @@ -531,14 +571,18 @@ "defaultMessage": "Linux", "description": "HomePage: link to Linux thematic" }, - "jTVIh8": { - "defaultMessage": "Comments:", - "description": "Meta: comments label" + "kNBXyK": { + "defaultMessage": "Total:", + "description": "Page: total label" }, "kzIYoQ": { "defaultMessage": "Leave a comment", "description": "PageLayout: comment form title" }, + "lHkta9": { + "defaultMessage": "Total:", + "description": "ThematicPage: total label" + }, "lKhTGM": { "defaultMessage": "Use Ctrl+c to copy", "description": "usePrism: copy button error text" @@ -575,14 +619,14 @@ "defaultMessage": "Footer", "description": "SiteFooter: an accessible name for the footer nav" }, + "pT5nHk": { + "defaultMessage": "Published on:", + "description": "HomePage: publication date label" + }, "pWKyyR": { "defaultMessage": "Off", "description": "MotionToggle: deactivate reduce motion label" }, - "pWTj2W": { - "defaultMessage": "Popularity:", - "description": "Meta: popularity label" - }, "pg26sn": { "defaultMessage": "Discover search results for {query} on {websiteName}.", "description": "SearchPage: SEO - Meta description" @@ -595,6 +639,10 @@ "defaultMessage": "Projects", "description": "Layout: main nav - projects link" }, + "r/6HOI": { + "defaultMessage": "Written by:", + "description": "Summary: author label" + }, "s1i43J": { "defaultMessage": "{minutesCount} minutes", "description": "useReadingTime: rounded minutes count" @@ -619,18 +667,22 @@ "defaultMessage": "Contact me", "description": "HomePage: contact button text" }, + "soj7do": { + "defaultMessage": "Published on:", + "description": "Comment: publication date label" + }, "suXOBu": { "defaultMessage": "Theme:", "description": "ThemeToggle: theme label" }, + "tBX4mb": { + "defaultMessage": "Total:", + "description": "TopicPage: total label" + }, "tIZYpD": { "defaultMessage": "Partial", "description": "AckeeToggle: partial option name" }, - "tLC7bh": { - "defaultMessage": "Updated on:", - "description": "Meta: update date label" - }, "tMuNTy": { "defaultMessage": "{websiteName} is a front-end developer located in France. He codes and he writes mostly about web development and open-source.", "description": "HomePage: SEO - Meta description" @@ -639,10 +691,18 @@ "defaultMessage": "Light theme", "description": "PrismThemeToggle: light theme label" }, + "tyzdql": { + "defaultMessage": "Reading time:", + "description": "Summary: reading time label" + }, "u41qSk": { "defaultMessage": "Website:", "description": "CommentForm: website label" }, + "uAL4iW": { + "defaultMessage": "{postsCount, plural, =0 {No articles} one {# article} other {# articles}}", + "description": "TopicPage: posts count meta" + }, "uaqd5F": { "defaultMessage": "Load more articles?", "description": "PostsList: load more button" @@ -667,6 +727,14 @@ "defaultMessage": "Free", "description": "HomePage: link to free thematic" }, + "wQrvgw": { + "defaultMessage": "Updated on:", + "description": "ProjectsPage: update date label" + }, + "wVFA4m": { + "defaultMessage": "Created on:", + "description": "ProjectsPage: creation date label" + }, "xYNeKX": { "defaultMessage": "Settings form", "description": "SettingsModal: an accessible form name" @@ -687,10 +755,18 @@ "defaultMessage": "You are here:", "description": "Pagination: current page indication" }, + "yIZ+AC": { + "defaultMessage": "Topics:", + "description": "Summary: topics label" + }, "yN5P+m": { "defaultMessage": "Message:", "description": "ContactForm: message label" }, + "ye/vlA": { + "defaultMessage": "{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}} about {title}", + "description": "Summary: comments count" + }, "yfgMcl": { "defaultMessage": "Introduction:", "description": "Sharing: email content prefix" @@ -702,5 +778,9 @@ "zbzlb1": { "defaultMessage": "Page {number}", "description": "BlogPage: page number" + }, + "zoifQd": { + "defaultMessage": "Official website:", + "description": "TopicPage: official website label" } } diff --git a/src/i18n/fr.json b/src/i18n/fr.json index 997e0e0..f602b20 100644 --- a/src/i18n/fr.json +++ b/src/i18n/fr.json @@ -31,10 +31,6 @@ "defaultMessage": "Thématiques liées", "description": "TopicPage: related thematics list widget title" }, - "02rgLO": { - "defaultMessage": "{commentsCount, plural, =0 {0 commentaire} one {# commentaire} other {# commentaires}} à propos de {title}", - "description": "Meta: comments count" - }, "0gVlI3": { "defaultMessage": "Suivi :", "description": "AckeeToggle: select label" @@ -59,6 +55,10 @@ "defaultMessage": "Nom :", "description": "ContactForm: name label" }, + "24FIsG": { + "defaultMessage": "Mis à jour le :", + "description": "ThematicPage: update date label" + }, "28GZdv": { "defaultMessage": "Projets", "description": "Breadcrumb: projects label" @@ -99,6 +99,10 @@ "defaultMessage": "Page non trouvée.", "description": "404Page: SEO - Meta description" }, + "4QbTDq": { + "defaultMessage": "Publié le :", + "description": "Page: publication date label" + }, "4iYISO": { "defaultMessage": "Chargement de l’article demandé…", "description": "ArticlePage: loading article message" @@ -151,9 +155,9 @@ "defaultMessage": "Photo d’{website}", "description": "Layout: photo alternative text" }, - "92zgdp": { - "defaultMessage": "Total :", - "description": "Meta: total label" + "9DfuHk": { + "defaultMessage": "Mis à jour le :", + "description": "TopicPage: update date label" }, "9MeLN3": { "defaultMessage": "{articlesCount, plural, =0 {# article chargé} one {# article chargé} other {# articles chargés}} sur un total de {total}", @@ -179,10 +183,6 @@ "defaultMessage": "Contact", "description": "ContactPage: page title" }, - "AuGklx": { - "defaultMessage": "Licence :", - "description": "Meta: license label" - }, "B290Ph": { "defaultMessage": "Merci, votre commentaire a été envoyé avec succès.", "description": "PageLayout: comment form success message" @@ -199,6 +199,10 @@ "defaultMessage": "Échec du chargement.", "description": "BlogPage: failed to load text" }, + "CvOqoh": { + "defaultMessage": "Thématiques :", + "description": "ArticlePage: thematics meta label" + }, "D8vB38": { "defaultMessage": "Blog", "description": "Layout: main nav - blog link" @@ -211,14 +215,6 @@ "defaultMessage": "Thématiques", "description": "SearchPage: thematics list widget title" }, - "DssFG1": { - "defaultMessage": "Dépôts :", - "description": "Meta: repositories label" - }, - "EbFvsM": { - "defaultMessage": "Temps de lecture :", - "description": "Meta: reading time label" - }, "EeCqAE": { "defaultMessage": "Chargement des résultats…", "description": "SearchPage: loading search results message" @@ -227,14 +223,14 @@ "defaultMessage": "Blog", "description": "Breadcrumb: blog label" }, + "Ez8Qim": { + "defaultMessage": "Mis à jour le :", + "description": "Page: update date label" + }, "G+Twgm": { "defaultMessage": "Recherche", "description": "SearchModal: modal title" }, - "GRyyfy": { - "defaultMessage": "Site officiel :", - "description": "Meta: official website label" - }, "GTbGMy": { "defaultMessage": "Ouvrir le menu", "description": "MainNav: Open label" @@ -243,6 +239,10 @@ "defaultMessage": "Sujets", "description": "Error404Page: topics list widget title" }, + "Gw7X3x": { + "defaultMessage": "Temps de lecture :", + "description": "ArticlePage: reading time label" + }, "HFdzae": { "defaultMessage": "Formulaire de contact", "description": "ContactForm: form accessible name" @@ -255,6 +255,10 @@ "defaultMessage": "Thématiques", "description": "BlogPage: thematics list widget title" }, + "HxZvY4": { + "defaultMessage": "Publié le :", + "description": "ProjectsPage: publication date label" + }, "IY5ew6": { "defaultMessage": "En cours d’envoi…", "description": "CommentForm: spinner message on submit" @@ -271,6 +275,10 @@ "defaultMessage": "Aller au contenu", "description": "Layout: Skip to content link" }, + "KV+NMZ": { + "defaultMessage": "Publié le :", + "description": "TopicPage: publication date label" + }, "KVSWGP": { "defaultMessage": "Autres thématiques", "description": "ThematicPage: other thematics list widget title" @@ -279,6 +287,10 @@ "defaultMessage": "Page non trouvée", "description": "Error404Page: page title" }, + "KrNvQi": { + "defaultMessage": "Popularité :", + "description": "ProjectsPage: popularity label" + }, "LCorTC": { "defaultMessage": "Annuler la réponse", "description": "Comment: cancel reply button" @@ -287,10 +299,18 @@ "defaultMessage": "Fermer la recherche", "description": "Search: Close label" }, + "Ld6yMP": { + "defaultMessage": "{date} à {time}", + "description": "Comment: publication date and time" + }, "LszkU6": { "defaultMessage": "Tous les articles dans {thematicName}", "description": "ThematicPage: posts list heading" }, + "MJbZfX": { + "defaultMessage": "Écrit par :", + "description": "ArticlePage: author label" + }, "N44SOc": { "defaultMessage": "Projets", "description": "HomePage: link to projects" @@ -307,18 +327,10 @@ "defaultMessage": "Profil Github", "description": "ProjectsPage: Github profile link" }, - "OF5cPz": { - "defaultMessage": "{postsCount, plural, =0 {0 article} one {# article} other {# articles}}", - "description": "BlogPage: posts count meta" - }, "OHvb01": { "defaultMessage": "Retour en haut de page", "description": "SiteFooter: an accessible name for the back to top button" }, - "OI0N37": { - "defaultMessage": "Écrit par :", - "description": "Meta: author label" - }, "OL0Yzx": { "defaultMessage": "Publier", "description": "CommentForm: submit button" @@ -343,10 +355,6 @@ "defaultMessage": "Ouvrir les réglages", "description": "Settings: Open label" }, - "QGi5uD": { - "defaultMessage": "Publié le :", - "description": "Meta: publication date label" - }, "QLisK6": { "defaultMessage": "Thème sombre 🌙", "description": "usePrism: toggle dark theme button text" @@ -363,10 +371,22 @@ "defaultMessage": "CV", "description": "Layout: main nav - cv link" }, + "RecdwX": { + "defaultMessage": "Publié le :", + "description": "ArticlePage: publication date label" + }, + "RvGb2c": { + "defaultMessage": "{postsCount, plural, =0 {0 article} one {# article} other {# articles}}", + "description": "Page: posts count meta" + }, "RwI3B9": { "defaultMessage": "Chargement de la popularité du dépôt…", "description": "ProjectsPage: loading repository popularity" }, + "RwNZ6p": { + "defaultMessage": "Technologies :", + "description": "ProjectsPage: technologies label" + }, "Sm2wCk": { "defaultMessage": "Profil LinkedIn", "description": "CVPage: LinkedIn profile link" @@ -383,6 +403,14 @@ "defaultMessage": "Une erreur est survenue :", "description": "Contact: error message" }, + "TvQ2Ee": { + "defaultMessage": "Publié le :", + "description": "Summary: publication date label" + }, + "UTGhUU": { + "defaultMessage": "Publié le :", + "description": "ThematicPage: publication date label" + }, "UsQske": { "defaultMessage": "En lire plus ici :", "description": "Sharing: content link prefix" @@ -395,6 +423,10 @@ "defaultMessage": "Il est maintenant en attente de modération.", "description": "PageLayout: comment awaiting moderation" }, + "VtYzuv": { + "defaultMessage": "License :", + "description": "ProjectsPage: license label" + }, "WDwNDl": { "defaultMessage": "Recherche", "description": "SearchPage: SEO - Page title" @@ -427,6 +459,10 @@ "defaultMessage": "Thème clair", "description": "ThemeToggle: light theme label" }, + "ZAqGZ6": { + "defaultMessage": "Mis à jour le :", + "description": "ArticlePage: update date label" + }, "ZB/Aw2": { "defaultMessage": "Partiel inclut seulement l’url de la page, le nombre de visites et la durée.", "description": "AckeeToggle: tooltip message" @@ -455,18 +491,18 @@ "defaultMessage": "Vous devriez lire {title}", "description": "Sharing: subject text" }, - "b4fdYE": { - "defaultMessage": "Créé le :", - "description": "Meta: creation date label" + "bfPp0g": { + "defaultMessage": "Commentaires :", + "description": "Summary: comments label" + }, + "bk0WOp": { + "defaultMessage": "Thématiques :", + "description": "Summary: thematics label" }, "bojYF5": { "defaultMessage": "Accueil", "description": "Layout: main nav - home link" }, - "bz53Us": { - "defaultMessage": "Thématiques :", - "description": "Meta: thematics label" - }, "c556Qo": { "defaultMessage": "Barre latérale", "description": "PageLayout: accessible name for the sidebar" @@ -475,6 +511,10 @@ "defaultMessage": "Formulaire des commentaires", "description": "CommentForm: aria label" }, + "f0Z/Po": { + "defaultMessage": "Mis à jour le :", + "description": "Summary: update date label" + }, "fN04AJ": { "defaultMessage": "Télécharger le CV au format PDF", "description": "CVPage: download CV in PDF text" @@ -483,10 +523,6 @@ "defaultMessage": "Échec du chargement.", "description": "SearchPage: failed to load text" }, - "fcHeyC": { - "defaultMessage": "{date} à {time}", - "description": "Meta: publication date and time" - }, "fkcTGp": { "defaultMessage": "Une erreur est survenue :", "description": "PageLayout: comment form error message" @@ -499,10 +535,6 @@ "defaultMessage": "Il a été approuvé.", "description": "PageLayout: comment approved." }, - "gJNaBD": { - "defaultMessage": "Sujets :", - "description": "Meta: topics label" - }, "gPfT/K": { "defaultMessage": "Réglages", "description": "SettingsModal: title" @@ -523,6 +555,14 @@ "defaultMessage": "{count} secondes", "description": "useReadingTime: seconds count" }, + "iDIKb7": { + "defaultMessage": "Dépôts :", + "description": "ProjectsPage: repositories label" + }, + "iv3Ex1": { + "defaultMessage": "{postsCount, plural, =0 {0 article} one {# article} other {# articles}}", + "description": "ThematicPage: posts count meta" + }, "j5k9Fe": { "defaultMessage": "Accueil", "description": "Breadcrumb: home label" @@ -531,14 +571,18 @@ "defaultMessage": "Linux", "description": "HomePage: link to Linux thematic" }, - "jTVIh8": { - "defaultMessage": "Commentaires :", - "description": "Meta: comments label" + "kNBXyK": { + "defaultMessage": "Total :", + "description": "Page: total label" }, "kzIYoQ": { "defaultMessage": "Laisser un commentaire", "description": "PageLayout: comment form title" }, + "lHkta9": { + "defaultMessage": "Total :", + "description": "ThematicPage: total label" + }, "lKhTGM": { "defaultMessage": "Utilisez Ctrl+c pour copier", "description": "usePrism: copy button error text" @@ -575,14 +619,14 @@ "defaultMessage": "Pied de page", "description": "SiteFooter: an accessible name for the footer nav" }, + "pT5nHk": { + "defaultMessage": "Publié le :", + "description": "HomePage: publication date label" + }, "pWKyyR": { "defaultMessage": "Arrêt", "description": "MotionToggle: deactivate reduce motion label" }, - "pWTj2W": { - "defaultMessage": "Popularité :", - "description": "Meta: popularity label" - }, "pg26sn": { "defaultMessage": "Découvrez les résultats de recherche pour {query} sur {websiteName}.", "description": "SearchPage: SEO - Meta description" @@ -595,6 +639,10 @@ "defaultMessage": "Projets", "description": "Layout: main nav - projects link" }, + "r/6HOI": { + "defaultMessage": "Écrit par :", + "description": "Summary: author label" + }, "s1i43J": { "defaultMessage": "{minutesCount} minutes", "description": "useReadingTime: rounded minutes count" @@ -619,18 +667,22 @@ "defaultMessage": "Me contacter", "description": "HomePage: contact button text" }, + "soj7do": { + "defaultMessage": "Publié le :", + "description": "Comment: publication date label" + }, "suXOBu": { "defaultMessage": "Thème :", "description": "ThemeToggle: theme label" }, + "tBX4mb": { + "defaultMessage": "Total :", + "description": "TopicPage: total label" + }, "tIZYpD": { "defaultMessage": "Partiel", "description": "AckeeToggle: partial option name" }, - "tLC7bh": { - "defaultMessage": "Mis à jour le :", - "description": "Meta: update date label" - }, "tMuNTy": { "defaultMessage": "{websiteName} est intégrateur web / développeur front-end en France. Il code et il écrit essentiellement à propos de développement web et du libre.", "description": "HomePage: SEO - Meta description" @@ -639,10 +691,18 @@ "defaultMessage": "Thème clair", "description": "PrismThemeToggle: light theme label" }, + "tyzdql": { + "defaultMessage": "Temps de lecture :", + "description": "Summary: reading time label" + }, "u41qSk": { "defaultMessage": "Site web :", "description": "CommentForm: website label" }, + "uAL4iW": { + "defaultMessage": "{postsCount, plural, =0 {0 article} one {# article} other {# articles}}", + "description": "TopicPage: posts count meta" + }, "uaqd5F": { "defaultMessage": "Charger plus d’articles ?", "description": "PostsList: load more button" @@ -667,6 +727,14 @@ "defaultMessage": "Libre", "description": "HomePage: link to free thematic" }, + "wQrvgw": { + "defaultMessage": "Mis à jour le :", + "description": "ProjectsPage: update date label" + }, + "wVFA4m": { + "defaultMessage": "Créé le :", + "description": "ProjectsPage: creation date label" + }, "xYNeKX": { "defaultMessage": "Formulaire des réglages", "description": "SettingsModal: an accessible form name" @@ -687,10 +755,18 @@ "defaultMessage": "Vous êtes ici :", "description": "Pagination: current page indication" }, + "yIZ+AC": { + "defaultMessage": "Sujets :", + "description": "Summary: topics label" + }, "yN5P+m": { "defaultMessage": "Message :", "description": "ContactForm: message label" }, + "ye/vlA": { + "defaultMessage": "{commentsCount, plural, =0 {0 commentaire} one {# commentaire} other {# commentaires}} à propos de {title}", + "description": "Summary: comments count" + }, "yfgMcl": { "defaultMessage": "Introduction :", "description": "Sharing: email content prefix" @@ -702,5 +778,9 @@ "zbzlb1": { "defaultMessage": "Page {number}", "description": "BlogPage: page number" + }, + "zoifQd": { + "defaultMessage": "Site officiel :", + "description": "TopicPage: official website label" } } 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 ? [ diff --git a/src/styles/abstracts/placeholders/_lists.scss b/src/styles/abstracts/placeholders/_lists.scss index 780fd21..2200336 100644 --- a/src/styles/abstracts/placeholders/_lists.scss +++ b/src/styles/abstracts/placeholders/_lists.scss @@ -75,5 +75,5 @@ %description { margin: 0; - word-break: break-all; + overflow-wrap: break-word; } diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss index 068826f..d2e7822 100644 --- a/src/styles/pages/article.module.scss +++ b/src/styles/pages/article.module.scss @@ -12,9 +12,8 @@ margin-right: var(--spacing-2xs); padding: var(--spacing-2xs) var(--spacing-xs); - figure { + img { max-width: fun.convert-px(22); - margin-right: var(--spacing-2xs); } } -- cgit v1.2.3