diff options
44 files changed, 1182 insertions, 607 deletions
diff --git a/.storybook/preview.js b/.storybook/preview.js index 4bec022..344df2a 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,5 @@ import '@styles/globals.scss'; +import { IntlProvider } from 'react-intl'; export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, @@ -9,3 +10,11 @@ export const parameters = { }, }, }; + +export const decorators = [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), +]; diff --git a/src/components/atoms/lists/description-list-item.module.scss b/src/components/atoms/lists/description-list-item.module.scss new file mode 100644 index 0000000..60cad57 --- /dev/null +++ b/src/components/atoms/lists/description-list-item.module.scss @@ -0,0 +1,38 @@ +.term { + color: var(--color-fg-light); + font-weight: 600; +} + +.description { + margin: 0; + word-break: break-all; +} + +.wrapper { + display: flex; + width: fit-content; + + &--has-separator { + .description:not(:first-of-type) { + &::before { + content: "/\0000a0"; + } + } + } + + &--inline, + &--inline-values { + flex-flow: row wrap; + column-gap: var(--spacing-2xs); + } + + &--inline-values { + .term { + flex: 1 1 100%; + } + } + + &--stacked { + flex-flow: column wrap; + } +} diff --git a/src/components/atoms/lists/description-list-item.stories.tsx b/src/components/atoms/lists/description-list-item.stories.tsx new file mode 100644 index 0000000..e05493c --- /dev/null +++ b/src/components/atoms/lists/description-list-item.stories.tsx @@ -0,0 +1,132 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import DescriptionListItemComponent from './description-list-item'; + +export default { + title: 'Atoms/Typography/Lists/DescriptionList/Item', + component: DescriptionListItemComponent, + args: { + layout: 'stacked', + withSeparator: false, + }, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the list item wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + descriptionClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the list item description.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + label: { + control: { + type: 'text', + }, + description: 'The item label.', + type: { + name: 'string', + required: true, + }, + }, + layout: { + control: { + type: 'select', + }, + description: 'The item layout.', + options: ['inline', 'inline-values', 'stacked'], + table: { + category: 'Styles', + defaultValue: { summary: 'stacked' }, + }, + type: { + name: 'string', + required: false, + }, + }, + termClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the list item term.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + value: { + description: 'The item value.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + withSeparator: { + control: { + type: 'boolean', + }, + description: 'Add a slash as separator between multiple values.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + }, +} as ComponentMeta<typeof DescriptionListItemComponent>; + +const Template: ComponentStory<typeof DescriptionListItemComponent> = ( + args +) => <DescriptionListItemComponent {...args} />; + +export const SingleValueStacked = Template.bind({}); +SingleValueStacked.args = { + label: 'Recusandae vitae tenetur', + value: ['praesentium'], + layout: 'stacked', +}; + +export const SingleValueInlined = Template.bind({}); +SingleValueInlined.args = { + label: 'Recusandae vitae tenetur', + value: ['praesentium'], + layout: 'inline', +}; + +export const MultipleValuesStacked = Template.bind({}); +MultipleValuesStacked.args = { + label: 'Recusandae vitae tenetur', + value: ['praesentium', 'voluptate', 'tempore'], + layout: 'stacked', +}; + +export const MultipleValuesInlined = Template.bind({}); +MultipleValuesInlined.args = { + label: 'Recusandae vitae tenetur', + value: ['praesentium', 'voluptate', 'tempore'], + layout: 'inline-values', + withSeparator: true, +}; diff --git a/src/components/atoms/lists/description-list-item.test.tsx b/src/components/atoms/lists/description-list-item.test.tsx new file mode 100644 index 0000000..730a52f --- /dev/null +++ b/src/components/atoms/lists/description-list-item.test.tsx @@ -0,0 +1,17 @@ +import { render, screen } from '@test-utils'; +import DescriptionListItem from './description-list-item'; + +const itemLabel = 'Repellendus corporis facilis'; +const itemValue = ['quos', 'eum']; + +describe('DescriptionListItem', () => { + it('renders a couple of label', () => { + render(<DescriptionListItem label={itemLabel} value={itemValue} />); + expect(screen.getByRole('term')).toHaveTextContent(itemLabel); + }); + + it('renders the right number of values', () => { + render(<DescriptionListItem label={itemLabel} value={itemValue} />); + expect(screen.getAllByRole('definition')).toHaveLength(itemValue.length); + }); +}); diff --git a/src/components/atoms/lists/description-list-item.tsx b/src/components/atoms/lists/description-list-item.tsx new file mode 100644 index 0000000..9505d01 --- /dev/null +++ b/src/components/atoms/lists/description-list-item.tsx @@ -0,0 +1,73 @@ +import { FC, ReactNode, useId } from 'react'; +import styles from './description-list-item.module.scss'; + +export type ItemLayout = 'inline' | 'inline-values' | 'stacked'; + +export type DescriptionListItemProps = { + /** + * Set additional classnames to the list item wrapper. + */ + className?: string; + /** + * Set additional classnames to the list item description. + */ + descriptionClassName?: string; + /** + * The item label. + */ + label: string; + /** + * The item layout. + */ + layout?: ItemLayout; + /** + * Set additional classnames to the list item term. + */ + termClassName?: string; + /** + * The item value. + */ + value: ReactNode | ReactNode[]; + /** + * If true, use a slash to delimitate multiple values. + */ + withSeparator?: boolean; +}; + +/** + * DescriptionListItem component + * + * Render a couple of dt/dd wrapped in a div. + */ +const DescriptionListItem: FC<DescriptionListItemProps> = ({ + className = '', + descriptionClassName = '', + label, + termClassName = '', + value, + layout = 'stacked', + withSeparator = false, +}) => { + const id = useId(); + const layoutStyles = styles[`wrapper--${layout}`]; + const separatorStyles = withSeparator ? styles['wrapper--has-separator'] : ''; + const itemValues = Array.isArray(value) ? value : [value]; + + return ( + <div + className={`${styles.wrapper} ${layoutStyles} ${separatorStyles} ${className}`} + > + <dt className={`${styles.term} ${termClassName}`}>{label}</dt> + {itemValues.map((currentValue, index) => ( + <dd + key={`${id}-${index}`} + className={`${styles.description} ${descriptionClassName}`} + > + {currentValue} + </dd> + ))} + </div> + ); +}; + +export default DescriptionListItem; diff --git a/src/components/atoms/lists/description-list.module.scss b/src/components/atoms/lists/description-list.module.scss index caa2711..9e913d4 100644 --- a/src/components/atoms/lists/description-list.module.scss +++ b/src/components/atoms/lists/description-list.module.scss @@ -2,53 +2,16 @@ .list { display: flex; - flex-flow: column wrap; - gap: var(--spacing-2xs); + column-gap: var(--spacing-md); + row-gap: var(--spacing-2xs); margin: 0; - &__term { - flex: 0 0 max-content; - color: var(--color-fg-light); - font-weight: 600; + &--inline { + flex-flow: row wrap; + align-items: baseline; } - &__description { - flex: 0 0 auto; - margin: 0; - } - - &__item { - display: flex; - } - - &--inline &__item { - flex-flow: column wrap; - - @include mix.media("screen") { - @include mix.dimensions("xs") { - flex-flow: row wrap; - gap: var(--spacing-2xs); - - .list__description:not(:first-of-type) { - &::before { - content: "/"; - margin-right: var(--spacing-2xs); - } - } - } - } - } - - &--column#{&}--responsive { - @include mix.media("screen") { - @include mix.dimensions("xs") { - flex-flow: row wrap; - gap: var(--spacing-lg); - } - } - } - - &--column &__item { + &--column { flex-flow: column wrap; } } diff --git a/src/components/atoms/lists/description-list.stories.tsx b/src/components/atoms/lists/description-list.stories.tsx index 43ee66e..347fd78 100644 --- a/src/components/atoms/lists/description-list.stories.tsx +++ b/src/components/atoms/lists/description-list.stories.tsx @@ -1,16 +1,15 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import DescriptionListComponent, { - DescriptionListItem, -} from './description-list'; +import DescriptionList, { DescriptionListItem } from './description-list'; /** * DescriptionList - Storybook Meta */ export default { - title: 'Atoms/Typography/Lists', - component: DescriptionListComponent, + title: 'Atoms/Typography/Lists/DescriptionList', + component: DescriptionList, args: { layout: 'column', + withSeparator: false, }, argTypes: { className: { @@ -26,6 +25,19 @@ export default { required: false, }, }, + groupClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the item wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, items: { control: { type: null, @@ -37,6 +49,19 @@ export default { value: {}, }, }, + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, layout: { control: { type: 'select', @@ -52,28 +77,55 @@ export default { required: false, }, }, + valueClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the value wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + withSeparator: { + control: { + type: 'boolean', + }, + description: 'Add a slash as separator between multiple values.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, }, -} as ComponentMeta<typeof DescriptionListComponent>; +} as ComponentMeta<typeof DescriptionList>; -const Template: ComponentStory<typeof DescriptionListComponent> = (args) => ( - <DescriptionListComponent {...args} /> +const Template: ComponentStory<typeof DescriptionList> = (args) => ( + <DescriptionList {...args} /> ); const items: DescriptionListItem[] = [ - { id: 'term-1', term: 'Term 1:', value: ['Value for term 1'] }, - { id: 'term-2', term: 'Term 2:', value: ['Value for term 2'] }, + { id: 'term-1', label: 'Term 1:', value: ['Value for term 1'] }, + { id: 'term-2', label: 'Term 2:', value: ['Value for term 2'] }, { id: 'term-3', - term: 'Term 3:', + label: 'Term 3:', value: ['Value 1 for term 3', 'Value 2 for term 3', 'Value 3 for term 3'], }, - { id: 'term-4', term: 'Term 4:', value: ['Value for term 4'] }, + { id: 'term-4', label: 'Term 4:', value: ['Value for term 4'] }, ]; /** * List Stories - Description list */ -export const DescriptionList = Template.bind({}); -DescriptionList.args = { +export const List = Template.bind({}); +List.args = { items, }; diff --git a/src/components/atoms/lists/description-list.test.tsx b/src/components/atoms/lists/description-list.test.tsx index d3f7045..83e405f 100644 --- a/src/components/atoms/lists/description-list.test.tsx +++ b/src/components/atoms/lists/description-list.test.tsx @@ -2,14 +2,14 @@ import { render } from '@test-utils'; import DescriptionList, { DescriptionListItem } from './description-list'; const items: DescriptionListItem[] = [ - { id: 'term-1', term: 'Term 1:', value: ['Value for term 1'] }, - { id: 'term-2', term: 'Term 2:', value: ['Value for term 2'] }, + { id: 'term-1', label: 'Term 1:', value: ['Value for term 1'] }, + { id: 'term-2', label: 'Term 2:', value: ['Value for term 2'] }, { id: 'term-3', - term: 'Term 3:', + label: 'Term 3:', value: ['Value 1 for term 3', 'Value 2 for term 3', 'Value 3 for term 3'], }, - { id: 'term-4', term: 'Term 4:', value: ['Value for term 4'] }, + { id: 'term-4', label: 'Term 4:', value: ['Value for term 4'] }, ]; describe('DescriptionList', () => { diff --git a/src/components/atoms/lists/description-list.tsx b/src/components/atoms/lists/description-list.tsx index a60a6a1..a8e2d53 100644 --- a/src/components/atoms/lists/description-list.tsx +++ b/src/components/atoms/lists/description-list.tsx @@ -1,4 +1,7 @@ import { FC } from 'react'; +import DescriptionListItem, { + type DescriptionListItemProps, +} from './description-list-item'; import styles from './description-list.module.scss'; export type DescriptionListItem = { @@ -7,13 +10,17 @@ export type DescriptionListItem = { */ id: string; /** - * A list term. + * The list item layout. */ - term: string; + layout?: DescriptionListItemProps['layout']; /** - * An array of values for the list term. + * A list label. */ - value: any[]; + label: DescriptionListItemProps['label']; + /** + * An array of values for the list item. + */ + value: DescriptionListItemProps['value']; }; export type DescriptionListProps = { @@ -22,10 +29,6 @@ export type DescriptionListProps = { */ className?: string; /** - * Set additional classnames to the `dd` element. - */ - descriptionClassName?: string; - /** * Set additional classnames to the `dt`/`dd` couple wrapper. */ groupClassName?: string; @@ -34,17 +37,21 @@ export type DescriptionListProps = { */ items: DescriptionListItem[]; /** - * The list items layout. Default: column. + * Set additional classnames to the `dt` element. + */ + labelClassName?: string; + /** + * The list layout. Default: column. */ layout?: 'inline' | 'column'; /** - * Define if the layout should automatically create rows/columns. + * Set additional classnames to the `dd` element. */ - responsiveLayout?: boolean; + valueClassName?: string; /** - * Set additional classnames to the `dt` element. + * If true, use a slash to delimitate multiple values. */ - termClassName?: string; + withSeparator?: DescriptionListItemProps['withSeparator']; }; /** @@ -54,44 +61,40 @@ export type DescriptionListProps = { */ const DescriptionList: FC<DescriptionListProps> = ({ className = '', - descriptionClassName = '', groupClassName = '', items, + labelClassName = '', layout = 'column', - responsiveLayout = false, - termClassName = '', + valueClassName = '', + withSeparator, }) => { const layoutModifier = `list--${layout}`; - const responsiveModifier = responsiveLayout ? 'list--responsive' : ''; /** - * Retrieve the description list items wrapped in a div element. + * Retrieve the description list items. * - * @param {DescriptionListItem[]} listItems - An array of term and description couples. + * @param {DescriptionListItem[]} listItems - An array of items. * @returns {JSX.Element[]} The description list items. */ const getItems = (listItems: DescriptionListItem[]): JSX.Element[] => { - return listItems.map(({ id, term, value }) => { + return listItems.map(({ id, layout: itemLayout, label, value }) => { return ( - <div key={id} className={`${styles.list__item} ${groupClassName}`}> - <dt className={`${styles.list__term} ${termClassName}`}>{term}</dt> - {value.map((currentValue, index) => ( - <dd - key={`${id}-${index}`} - className={`${styles.list__description} ${descriptionClassName}`} - > - {currentValue} - </dd> - ))} - </div> + <DescriptionListItem + key={id} + label={label} + value={value} + layout={itemLayout} + className={groupClassName} + descriptionClassName={valueClassName} + termClassName={labelClassName} + withSeparator={withSeparator} + /> ); }); }; return ( - <dl - className={`${styles.list} ${styles[layoutModifier]} ${styles[responsiveModifier]} ${className}`} - > + <dl className={`${styles.list} ${styles[layoutModifier]} ${className}`}> {getItems(items)} </dl> ); diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss index d5b9836..3af8f24 100644 --- a/src/components/molecules/layout/card.module.scss +++ b/src/components/molecules/layout/card.module.scss @@ -52,24 +52,35 @@ margin-bottom: var(--spacing-md); } - .items { - flex-flow: row wrap; - place-content: center; - gap: var(--spacing-2xs); - } + .meta { + &__item { + flex-flow: row wrap; + place-content: center; + gap: var(--spacing-2xs); + margin: auto; + } + + &__label { + flex: 0 0 100%; + } - .term { - flex: 0 0 100%; + &__value { + padding: fun.convert-px(2) var(--spacing-xs); + border: fun.convert-px(1) solid var(--color-primary-darker); + color: var(--color-fg); + font-weight: 400; + + &::before { + display: none; + } + } } - .description { - padding: fun.convert-px(2) var(--spacing-xs); - border: fun.convert-px(1) solid var(--color-primary-darker); - color: var(--color-fg); - font-weight: 400; + &:not(:disabled):focus { + text-decoration: none; - &::before { - display: none; + .title { + text-decoration: underline solid var(--color-primary) 0.3ex; } } } diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx index ed78d00..2e99bbb 100644 --- a/src/components/molecules/layout/card.stories.tsx +++ b/src/components/molecules/layout/card.stories.tsx @@ -8,6 +8,19 @@ export default { title: 'Molecules/Layout/Card', component: Card, argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the card wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, cover: { description: 'The card cover data (src, dimensions, alternative text).', table: { @@ -19,6 +32,21 @@ export default { value: {}, }, }, + coverFit: { + control: { + type: 'select', + }, + description: 'The cover fit.', + options: ['contain', 'cover', 'fill', 'scale-down'], + table: { + category: 'Options', + defaultValue: { summary: 'cover' }, + }, + type: { + name: 'string', + required: false, + }, + }, meta: { description: 'The card metadata (a publication date for example).', table: { @@ -88,13 +116,9 @@ const cover = { unoptimized: true, }; -const meta = [ - { - id: 'an-id', - term: 'Voluptates', - value: ['Autem', 'Eos'], - }, -]; +const meta = { + thematics: ['Autem', 'Eos'], +}; /** * Card Stories - Default diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx index 404bc7a..07c01e9 100644 --- a/src/components/molecules/layout/card.test.tsx +++ b/src/components/molecules/layout/card.test.tsx @@ -8,13 +8,10 @@ const cover = { width: 640, }; -const meta = [ - { - id: 'an-id', - term: 'Voluptates', - value: ['Autem', 'Eos'], - }, -]; +const meta = { + author: 'Possimus', + thematics: ['Autem', 'Eos'], +}; const tagline = 'Ut rerum incidunt'; @@ -47,6 +44,6 @@ describe('Card', () => { it('renders some meta', () => { render(<Card title={title} titleLevel={2} url={url} meta={meta} />); - expect(screen.getByText(meta[0].term)).toBeInTheDocument(); + expect(screen.getByText(meta.author)).toBeInTheDocument(); }); }); diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx index 89f100e..e416bd5 100644 --- a/src/components/molecules/layout/card.tsx +++ b/src/components/molecules/layout/card.tsx @@ -1,13 +1,11 @@ import ButtonLink from '@components/atoms/buttons/button-link'; import Heading, { type HeadingLevel } from '@components/atoms/headings/heading'; -import DescriptionList, { - type DescriptionListItem, -} from '@components/atoms/lists/description-list'; import { FC } from 'react'; import ResponsiveImage, { type ResponsiveImageProps, } from '../images/responsive-image'; import styles from './card.module.scss'; +import Meta, { type MetaData } from './meta'; export type Cover = { /** @@ -44,7 +42,7 @@ export type CardProps = { /** * The card meta. */ - meta?: DescriptionListItem[]; + meta?: MetaData; /** * The card tagline. */ @@ -96,13 +94,13 @@ const Card: FC<CardProps> = ({ <div className={styles.tagline}>{tagline}</div> {meta && ( <footer className={styles.footer}> - <DescriptionList - items={meta} + <Meta + data={meta} layout="inline" className={styles.list} - groupClassName={styles.items} - termClassName={styles.term} - descriptionClassName={styles.description} + groupClassName={styles.meta__item} + labelClassName={styles.meta__label} + valueClassName={styles.meta__value} /> </footer> )} diff --git a/src/components/molecules/layout/meta.module.scss b/src/components/molecules/layout/meta.module.scss index 0485545..4194a6e 100644 --- a/src/components/molecules/layout/meta.module.scss +++ b/src/components/molecules/layout/meta.module.scss @@ -1,23 +1,5 @@ @use "@styles/abstracts/mixins" as mix; -.list { - display: grid; - grid-template-columns: repeat(1, minmax(0, 1fr)); - gap: var(--spacing-sm); - - @include mix.media("screen") { - @include mix.dimensions("2xs") { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - @include mix.dimensions("sm") { - display: flex; - flex-flow: column nowrap; - gap: var(--spacing-2xs); - } - } -} - .value { word-break: break-all; } diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx index 0323f90..a1755a0 100644 --- a/src/components/molecules/layout/meta.stories.tsx +++ b/src/components/molecules/layout/meta.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import MetaComponent from './meta'; +import MetaComponent, { MetaData } from './meta'; /** * Meta - Storybook Meta @@ -8,25 +8,41 @@ export default { title: 'Molecules/Layout', component: MetaComponent, argTypes: { - className: { + data: { + description: 'The page metadata.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + itemsLayout: { control: { - type: 'text', + type: 'select', }, - description: 'Set additional classnames to the meta wrapper.', + description: 'The items layout.', + options: ['inline', 'inline-values', 'stacked'], table: { - category: 'Styles', + category: 'Options', + defaultValue: { summary: 'inline-values' }, }, type: { name: 'string', required: false, }, }, - data: { - description: 'The page metadata.', + withSeparator: { + control: { + type: 'boolean', + }, + description: 'Add a slash as separator between multiple values.', + table: { + category: 'Options', + defaultValue: { summary: true }, + }, type: { - name: 'object', + name: 'boolean', required: true, - value: {}, }, }, }, @@ -36,19 +52,16 @@ const Template: ComponentStory<typeof MetaComponent> = (args) => ( <MetaComponent {...args} /> ); -const data = { - publication: { name: 'Published on:', value: 'April 9th 2022' }, - categories: { - name: 'Categories:', - value: [ - <a key="category1" href="#"> - Category 1 - </a>, - <a key="category2" href="#"> - Category 2 - </a>, - ], - }, +const data: MetaData = { + publication: { date: '2022-04-09', time: '01:04:00' }, + thematics: [ + <a key="category1" href="#"> + Category 1 + </a>, + <a key="category2" href="#"> + Category 2 + </a>, + ], }; /** diff --git a/src/components/molecules/layout/meta.test.tsx b/src/components/molecules/layout/meta.test.tsx index a738bdb..fe66d97 100644 --- a/src/components/molecules/layout/meta.test.tsx +++ b/src/components/molecules/layout/meta.test.tsx @@ -1,8 +1,24 @@ -import { render } from '@test-utils'; +import { render, screen } from '@test-utils'; +import { getFormattedDate } from '@utils/helpers/dates'; import Meta from './meta'; +const data = { + publication: { date: '2022-04-09' }, + thematics: [ + <a key="category1" href="#"> + Category 1 + </a>, + <a key="category2" href="#"> + Category 2 + </a>, + ], +}; + describe('Meta', () => { - it('renders a Meta component', () => { - render(<Meta data={{}} />); + it('format a date string', () => { + render(<Meta data={data} />); + expect( + screen.getByText(getFormattedDate(data.publication.date)) + ).toBeInTheDocument(); }); }); diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx index d05396e..1401ac4 100644 --- a/src/components/molecules/layout/meta.tsx +++ b/src/components/molecules/layout/meta.tsx @@ -1,67 +1,312 @@ +import Link from '@components/atoms/links/link'; import DescriptionList, { type DescriptionListProps, type DescriptionListItem, } from '@components/atoms/lists/description-list'; +import { getFormattedDate, getFormattedTime } from '@utils/helpers/dates'; import { FC, ReactNode } from 'react'; -import styles from './meta.module.scss'; +import { useIntl } from 'react-intl'; -export type MetaItem = { +export type CustomMeta = { + label: string; + value: ReactNode | ReactNode[]; +}; + +export type MetaDate = { /** - * The meta name. + * A date string. Ex: `2022-04-30`. */ - name: string; + date: string; /** - * The meta value. + * A time string. Ex: `10:25:59`. */ - value: ReactNode | ReactNode[]; -}; - -export type MetaMap = { - [key: string]: MetaItem | undefined; + time?: string; + /** + * Wrap the date with a link to the given target. + */ + target?: string; }; -export type MetaProps = { +export type MetaData = { + /** + * The author name. + */ + author?: string; + /** + * The comments count. + */ + commentsCount?: string | JSX.Element; + /** + * 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[]; /** - * Set additional classnames to the meta wrapper. + * An array of thematics. */ - className?: DescriptionListProps['className']; + thematics?: string[] | JSX.Element[]; + /** + * An array of thematics. + */ + topics?: string[] | JSX.Element[]; + /** + * A total. + */ + total?: string; + /** + * The update date. + */ + update?: MetaDate; +}; + +export type MetaProps = Omit< + DescriptionListProps, + 'items' | 'withSeparator' +> & { /** * The meta data. */ - data: MetaMap; + data: MetaData; /** - * The meta layout. + * The items layout. */ - layout?: DescriptionListProps['layout']; + itemsLayout?: DescriptionListItem['layout']; /** - * Determine if the layout should be responsive. + * If true, use a slash to delimitate multiple values. Default: true. */ - responsiveLayout?: DescriptionListProps['responsiveLayout']; + withSeparator?: DescriptionListProps['withSeparator']; }; /** * Meta component * - * Renders the page metadata. + * Renders the given metadata. */ -const Meta: FC<MetaProps> = ({ className, data, ...props }) => { +const Meta: FC<MetaProps> = ({ + data, + itemsLayout = 'inline-values', + withSeparator = true, + ...props +}) => { + 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:', + id: 'OI0N37', + description: 'Meta: author label', + }); + case 'commentsCount': + return intl.formatMessage({ + defaultMessage: 'Comments:', + id: 'jTVIh8', + description: 'Meta: comments label', + }); + case 'creation': + return intl.formatMessage({ + defaultMessage: 'Created on:', + id: 'b4fdYE', + description: 'Meta: creation date label', + }); + case 'license': + return intl.formatMessage({ + defaultMessage: 'License:', + id: 'AuGklx', + description: 'Meta: license label', + }); + case 'popularity': + return intl.formatMessage({ + defaultMessage: 'Popularity:', + id: 'pWTj2W', + description: 'Meta: popularity label', + }); + case 'publication': + return intl.formatMessage({ + defaultMessage: 'Published on:', + id: 'QGi5uD', + description: 'Meta: publication date label', + }); + case 'readingTime': + return intl.formatMessage({ + defaultMessage: 'Reading time:', + id: 'EbFvsM', + description: 'Meta: reading time label', + }); + case 'repositories': + return intl.formatMessage({ + defaultMessage: 'Repositories:', + id: 'DssFG1', + description: 'Meta: repositories label', + }); + case 'technologies': + return intl.formatMessage({ + defaultMessage: 'Technologies:', + id: 'ADQmDF', + description: 'Meta: technologies label', + }); + case 'thematics': + return intl.formatMessage({ + defaultMessage: 'Thematics:', + id: 'bz53Us', + description: 'Meta: thematics label', + }); + case 'topics': + return intl.formatMessage({ + defaultMessage: 'Topics:', + id: 'gJNaBD', + description: 'Meta: topics label', + }); + case 'total': + return intl.formatMessage({ + defaultMessage: 'Total:', + id: '92zgdp', + description: 'Meta: total label', + }); + case 'update': + return intl.formatMessage({ + defaultMessage: 'Updated on:', + id: 'tLC7bh', + description: 'Meta: update date label', + }); + 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 ? ( + <Link href={target}> + <time dateTime={isoDate}>{getFormattedDate(dateTime.date)}</time> + </Link> + ) : ( + <time dateTime={isoDate}>{getFormattedDate(dateTime.date)}</time> + ); + } + + const isoDateTime = new Date(`${date}T${time}`).toISOString(); + + return target ? ( + <Link href={target}> + <time dateTime={isoDateTime}> + {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}`), + } + )} + </time> + </Link> + ) : ( + <time dateTime={isoDateTime}> + {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}`), + } + )} + </time> + ); + }; + + /** + * Retrieve the formatted item value. + * + * @param {keyof MetaData} key - The meta key. + * @param {ValueOf<MetaData>} value - The meta value. + * @returns {string|ReactNode|ReactNode[]} - The formatted value. + */ + const getValue = <T extends keyof MetaData>( + key: T, + value: MetaData[T] + ): string | ReactNode | ReactNode[] => { + if (key === 'creation' || key === 'publication' || key === 'update') { + return getDate(value as MetaDate); + } + return value as string | ReactNode | ReactNode[]; + }; + /** * Transform the metadata to description list item format. * - * @param {MetaMap} items - The meta. + * @param {MetaData} items - The meta. * @returns {DescriptionListItem[]} The formatted description list items. */ - const getItems = (items: MetaMap): DescriptionListItem[] => { + const getItems = (items: MetaData): DescriptionListItem[] => { const listItems: DescriptionListItem[] = Object.entries(items) - .map(([key, item]) => { - if (!item) return; + .map(([key, value]) => { + if (!key || !value) return; - const { name, value } = item; + const metaKey = key as keyof MetaData; return { - id: key, - term: name, - value: Array.isArray(value) ? value : [value], + id: metaKey, + label: + metaKey === 'custom' + ? (value as CustomMeta).label + : getLabel(metaKey), + layout: itemsLayout, + value: + metaKey === 'custom' + ? (value as CustomMeta).value + : getValue( + metaKey, + value as string | string[] | JSX.Element | JSX.Element[] + ), } as DescriptionListItem; }) .filter((item): item is DescriptionListItem => !!item); @@ -72,8 +317,7 @@ const Meta: FC<MetaProps> = ({ className, data, ...props }) => { return ( <DescriptionList items={getItems(data)} - className={`${styles.list} ${className}`} - descriptionClassName={styles.value} + withSeparator={withSeparator} {...props} /> ); diff --git a/src/components/molecules/layout/page-footer.stories.tsx b/src/components/molecules/layout/page-footer.stories.tsx index da0a3fa..31b7a49 100644 --- a/src/components/molecules/layout/page-footer.stories.tsx +++ b/src/components/molecules/layout/page-footer.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { MetaData } from './meta'; import PageFooterComponent from './page-footer'; /** @@ -39,8 +40,15 @@ const Template: ComponentStory<typeof PageFooterComponent> = (args) => ( <PageFooterComponent {...args} /> ); -const meta = { - topics: { name: 'More posts about:', value: <a href="#">Topic name</a> }, +const meta: MetaData = { + custom: { + label: 'More posts about:', + value: [ + <a key="topic-1" href="#"> + Topic name + </a>, + ], + }, }; /** diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx index f522482..e998b1e 100644 --- a/src/components/molecules/layout/page-footer.tsx +++ b/src/components/molecules/layout/page-footer.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import Meta, { type MetaMap } from './meta'; +import Meta, { MetaData } from './meta'; export type PageFooterProps = { /** @@ -9,7 +9,7 @@ export type PageFooterProps = { /** * The footer metadata. */ - meta?: MetaMap; + meta?: MetaData; }; /** diff --git a/src/components/molecules/layout/page-header.stories.tsx b/src/components/molecules/layout/page-header.stories.tsx index 6054845..d58f8b5 100644 --- a/src/components/molecules/layout/page-header.stories.tsx +++ b/src/components/molecules/layout/page-header.stories.tsx @@ -8,6 +8,19 @@ export default { title: 'Molecules/Layout/PageHeader', component: PageHeader, argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the header element.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, intro: { control: { type: 'text', @@ -50,18 +63,15 @@ const Template: ComponentStory<typeof PageHeader> = (args) => ( ); const meta = { - publication: { name: 'Published on:', value: 'April 9th 2022' }, - categories: { - name: 'Categories:', - value: [ - <a key="category1" href="#"> - Category 1 - </a>, - <a key="category2" href="#"> - Category 2 - </a>, - ], - }, + publication: { date: '2022-04-09' }, + thematics: [ + <a key="category1" href="#"> + Category 1 + </a>, + <a key="category2" href="#"> + Category 2 + </a>, + ], }; /** diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx index 1663085..9abe9af 100644 --- a/src/components/molecules/layout/page-header.tsx +++ b/src/components/molecules/layout/page-header.tsx @@ -1,7 +1,7 @@ import Heading from '@components/atoms/headings/heading'; -import styles from './page-header.module.scss'; -import Meta, { type MetaMap } from './meta'; import { FC } from 'react'; +import Meta, { type MetaData } from './meta'; +import styles from './page-header.module.scss'; export type PageHeaderProps = { /** @@ -15,7 +15,7 @@ export type PageHeaderProps = { /** * The page metadata. */ - meta?: MetaMap; + meta?: MetaData; /** * The page title. */ @@ -33,14 +33,29 @@ const PageHeader: FC<PageHeaderProps> = ({ meta, title, }) => { + const getIntro = () => { + return typeof intro === 'string' ? ( + <div dangerouslySetInnerHTML={{ __html: intro }} /> + ) : ( + <div>{intro}</div> + ); + }; + return ( <header className={`${styles.wrapper} ${className}`}> <div className={styles.body}> <Heading level={1} className={styles.title} withMargin={false}> {title} </Heading> - {meta && <Meta data={meta} className={styles.meta} layout="inline" />} - {intro && <div>{intro}</div>} + {meta && ( + <Meta + data={meta} + className={styles.meta} + layout="column" + itemsLayout="inline" + /> + )} + {intro && getIntro()} </div> </header> ); diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx index fe0ebfd..522d068 100644 --- a/src/components/organisms/layout/cards-list.stories.tsx +++ b/src/components/organisms/layout/cards-list.stories.tsx @@ -93,9 +93,7 @@ const items: CardsListItem[] = [ // @ts-ignore - Needed because of the placeholder image. unoptimized: true, }, - meta: [ - { id: 'meta-1', term: 'Quibusdam', value: ['Velit', 'Ex', 'Alias'] }, - ], + meta: { thematics: ['Velit', 'Ex', 'Alias'] }, tagline: 'Molestias ut error', title: 'Et alias omnis', url: '#', @@ -110,7 +108,7 @@ const items: CardsListItem[] = [ // @ts-ignore - Needed because of the placeholder image. unoptimized: true, }, - meta: [{ id: 'meta-1', term: 'Est', value: ['Voluptas'] }], + meta: { thematics: ['Voluptas'] }, tagline: 'Quod vel accusamus', title: 'Laboriosam doloremque mollitia', url: '#', @@ -125,13 +123,9 @@ const items: CardsListItem[] = [ // @ts-ignore - Needed because of the placeholder image. unoptimized: true, }, - meta: [ - { - id: 'meta-1', - term: 'Omnis', - value: ['Quisquam', 'Quia', 'Sapiente', 'Perspiciatis'], - }, - ], + meta: { + thematics: ['Quisquam', 'Quia', 'Sapiente', '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 2df3f59..7d98844 100644 --- a/src/components/organisms/layout/cards-list.test.tsx +++ b/src/components/organisms/layout/cards-list.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@test-utils'; -import CardsList from './cards-list'; +import CardsList, { type CardsListItem } from './cards-list'; -const items = [ +const items: CardsListItem[] = [ { id: 'card-1', cover: { @@ -9,10 +9,10 @@ const items = [ src: 'http://placeimg.com/640/480', width: 640, height: 480, + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, }, - meta: [ - { id: 'meta-1', term: 'Quibusdam', value: ['Velit', 'Ex', 'Alias'] }, - ], + meta: { thematics: ['Velit', 'Ex', 'Alias'] }, tagline: 'Molestias ut error', title: 'Et alias omnis', url: '#', @@ -24,8 +24,10 @@ const items = [ src: 'http://placeimg.com/640/480', width: 640, height: 480, + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, }, - meta: [{ id: 'meta-1', term: 'Est', value: ['Voluptas'] }], + meta: { thematics: ['Voluptas'] }, tagline: 'Quod vel accusamus', title: 'Laboriosam doloremque mollitia', url: '#', @@ -37,14 +39,12 @@ const items = [ src: 'http://placeimg.com/640/480', width: 640, height: 480, + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, + }, + meta: { + thematics: ['Quisquam', 'Quia', 'Sapiente', 'Perspiciatis'], }, - meta: [ - { - id: 'meta-1', - term: 'Omnis', - value: ['Quisquam', 'Quia', 'Sapiente', 'Perspiciatis'], - }, - ], tagline: 'Quo error eum', title: 'Magni rem nulla', url: '#', diff --git a/src/components/organisms/layout/comment.module.scss b/src/components/organisms/layout/comment.module.scss index 54201de..d2b68e1 100644 --- a/src/components/organisms/layout/comment.module.scss +++ b/src/components/organisms/layout/comment.module.scss @@ -60,16 +60,20 @@ } .date { - flex-flow: row wrap; - justify-content: center; margin: var(--spacing-sm) 0; font-size: var(--font-size-sm); - text-align: center; + + &__item { + justify-content: center; + } @include mix.media("screen") { @include mix.dimensions("sm") { - justify-content: left; margin: 0 0 var(--spacing-sm); + + &__item { + justify-content: left; + } } } } diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx index 9e537e5..4961722 100644 --- a/src/components/organisms/layout/comment.test.tsx +++ b/src/components/organisms/layout/comment.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '@test-utils'; -import { getFormattedDate, getFormattedTime } from '@utils/helpers/format'; +import { getFormattedDate, getFormattedTime } from '@utils/helpers/dates'; import Comment from './comment'; const author = { diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx index 6d41c00..248efc2 100644 --- a/src/components/organisms/layout/comment.tsx +++ b/src/components/organisms/layout/comment.tsx @@ -1,10 +1,12 @@ import Button from '@components/atoms/buttons/button'; import Link from '@components/atoms/links/link'; -import DescriptionList from '@components/atoms/lists/description-list'; -import { getFormattedDate, getFormattedTime } from '@utils/helpers/format'; +import Meta from '@components/molecules/layout/meta'; +import useSettings from '@utils/hooks/use-settings'; import Image from 'next/image'; +import Script from 'next/script'; import { FC, useState } from 'react'; import { useIntl } from 'react-intl'; +import { type Comment as CommentSchema, type WithContext } from 'schema-dts'; import CommentForm, { type CommentFormProps } from '../forms/comment-form'; import styles from './comment.module.scss'; @@ -41,7 +43,11 @@ export type CommentProps = { */ id: number | string; /** - * The comment date. + * The comment parent id. + */ + parentId?: number | string; + /** + * The comment date and time separated with a space. */ publication: string; /** @@ -60,15 +66,14 @@ const Comment: FC<CommentProps> = ({ canReply = true, content, id, + parentId, publication, saveComment, ...props }) => { const intl = useIntl(); const [isReplying, setIsReplying] = useState<boolean>(false); - const commentDate = getFormattedDate(publication); - const commentTime = getFormattedTime(publication); - const commentDateTime = new Date(publication).toISOString(); + const [publicationDate, publicationTime] = publication.split(' '); const avatarAltText = intl.formatMessage( { @@ -89,37 +94,46 @@ const Comment: FC<CommentProps> = ({ description: 'Comment: reply button', id: 'hzHuCc', }); - const dateLabel = intl.formatMessage({ - defaultMessage: 'Published on:', - description: 'Comment: publication date label', - id: 'soj7do', - }); - const dateValue = intl.formatMessage( - { - defaultMessage: '{date} at {time}', - description: 'Comment: publication date and time', - id: 'Ld6yMP', - }, - { - date: commentDate, - time: commentTime, - } - ); const formTitle = intl.formatMessage({ defaultMessage: 'Leave a reply', description: 'Comment: comment form title', id: '2fD5CI', }); - const dateLink = ( - <Link href={`#comment-${id}`}> - <time dateTime={commentDateTime}></time> - {dateValue} - </Link> - ); + const { website } = useSettings(); + + const commentSchema: WithContext<CommentSchema> = { + '@context': 'https://schema.org', + '@id': `${website.url}/#comment-${id}`, + '@type': 'Comment', + parentItem: parentId + ? { '@id': `${website.url}/#comment-${parentId}` } + : undefined, + about: { '@type': 'Article', '@id': `${website.url}/#article` }, + author: { + '@type': 'Person', + name: author.name, + image: author.avatar, + url: author.url, + }, + creator: { + '@type': 'Person', + name: author.name, + image: author.avatar, + url: author.url, + }, + dateCreated: publication, + datePublished: publication, + text: content, + }; return ( <> + <Script + id="schema-comments" + type="application/ld+json" + dangerouslySetInnerHTML={{ __html: JSON.stringify(commentSchema) }} + /> <article id={`comment-${id}`} className={`${styles.wrapper} ${styles['wrapper--comment']}`} @@ -142,11 +156,18 @@ const Comment: FC<CommentProps> = ({ <span className={styles.author}>{author.name}</span> )} </header> - <DescriptionList - items={[{ id: 'comment-date', term: dateLabel, value: [dateLink] }]} + <Meta + data={{ + publication: { + date: publicationDate, + time: publicationTime, + target: `#comment-${id}`, + }, + }} layout="inline" + itemsLayout="inline" className={styles.date} - groupClassName={styles.meta} + groupClassName={styles.date__item} /> <div className={styles.body}>{content}</div> <footer className={styles.footer}> diff --git a/src/components/organisms/layout/overview.module.scss b/src/components/organisms/layout/overview.module.scss index 4d50ad1..e813625 100644 --- a/src/components/organisms/layout/overview.module.scss +++ b/src/components/organisms/layout/overview.module.scss @@ -1,12 +1,44 @@ @use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; .wrapper { padding: var(--spacing-sm) var(--spacing-md); border: fun.convert-px(1) solid var(--color-border); + + .meta { + display: grid; + grid-template-columns: repeat( + auto-fit, + min(calc(100vw - (var(--spacing-md) * 2)), 23ch) + ); + row-gap: var(--spacing-2xs); + + @include mix.media("screen") { + @include mix.dimensions("md") { + grid-template-columns: repeat( + auto-fit, + min(calc(100vw - (var(--spacing-md) * 2)), 20ch) + ); + } + } + + &--has-techno { + div:last-child { + gap: var(--spacing-2xs); + + dd { + padding: 0 var(--spacing-2xs); + border: fun.convert-px(1) solid var(--color-border-dark); + } + } + } + } } .cover { - max-height: fun.convert-px(150); + width: 100%; + height: fun.convert-px(175); margin: 0 auto var(--spacing-md); + padding: var(--spacing-2xs); border: fun.convert-px(1) solid var(--color-border); } diff --git a/src/components/organisms/layout/overview.stories.tsx b/src/components/organisms/layout/overview.stories.tsx index b18a6b6..1139350 100644 --- a/src/components/organisms/layout/overview.stories.tsx +++ b/src/components/organisms/layout/overview.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import Overview from './overview'; +import Overview, { OverviewMeta } from './overview'; /** * Overview - Storybook Meta @@ -8,8 +8,21 @@ export default { title: 'Organisms/Layout/Overview', component: Overview, argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the overview wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, cover: { - description: 'The overview cover.', + description: 'The overview cover', table: { category: 'Options', }, @@ -20,7 +33,7 @@ export default { }, }, meta: { - description: 'The overview metadata.', + description: 'The overview meta.', type: { name: 'object', required: true, @@ -42,12 +55,9 @@ const cover = { unoptimized: true, }; -const meta = { - publication: { name: 'Illo ut odio:', value: 'Sequi et excepturi' }, - update: { - name: 'Perspiciatis vel laudantium:', - value: 'Dignissimos ratione veritatis', - }, +const meta: OverviewMeta = { + creation: { date: '2022-05-09' }, + license: 'Dignissimos ratione veritatis', }; /** @@ -55,7 +65,6 @@ const meta = { */ export const Default = Template.bind({}); Default.args = { - cover, meta, }; diff --git a/src/components/organisms/layout/overview.test.tsx b/src/components/organisms/layout/overview.test.tsx index 0738d3f..b40a785 100644 --- a/src/components/organisms/layout/overview.test.tsx +++ b/src/components/organisms/layout/overview.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '@test-utils'; -import Overview from './overview'; +import Overview, { type OverviewMeta } from './overview'; const cover = { alt: 'Incidunt unde quam', @@ -8,22 +8,19 @@ const cover = { width: 640, }; -const meta = { - publication: { name: 'Illo ut odio:', value: 'Sequi et excepturi' }, - update: { - name: 'Perspiciatis vel laudantium:', - value: 'Dignissimos ratione veritatis', - }, +const data: OverviewMeta = { + creation: { date: '2022-05-09' }, + license: 'Dignissimos ratione veritatis', }; describe('Overview', () => { - it('renders some meta', () => { - render(<Overview meta={meta} />); - expect(screen.getByText(meta['publication'].name)).toBeInTheDocument(); + it('renders some data', () => { + render(<Overview meta={data} />); + expect(screen.getByText(data.license!)).toBeInTheDocument(); }); it('renders a cover', () => { - render(<Overview meta={meta} cover={cover} />); + render(<Overview cover={cover} meta={data} />); expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx index 42d0431..55ad0b5 100644 --- a/src/components/organisms/layout/overview.tsx +++ b/src/components/organisms/layout/overview.tsx @@ -1,13 +1,33 @@ import ResponsiveImage, { type ResponsiveImageProps, } from '@components/molecules/images/responsive-image'; -import Meta, { type MetaMap } from '@components/molecules/layout/meta'; +import Meta, { type MetaData } from '@components/molecules/layout/meta'; import { FC } from 'react'; 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. + */ + className?: string; + /** + * The overview cover. + */ cover?: Pick<ResponsiveImageProps, 'alt' | 'src' | 'width' | 'height'>; - meta: MetaMap; + /** + * The overview meta. + */ + meta: OverviewMeta; }; /** @@ -15,17 +35,26 @@ export type OverviewProps = { * * Render an overview. */ -const Overview: FC<OverviewProps> = ({ cover, meta }) => { +const Overview: FC<OverviewProps> = ({ className = '', cover, meta }) => { + const { technologies, ...remainingMeta } = meta; + const metaModifier = technologies ? styles['meta--has-techno'] : ''; + return ( - <div className={styles.wrapper}> + <div className={`${styles.wrapper} ${className}`}> {cover && ( <ResponsiveImage - objectFit="cover" + layout="responsive" + objectFit="contain" className={styles.cover} {...cover} /> )} - <Meta data={meta} layout="column" responsiveLayout={true} /> + <Meta + data={{ ...remainingMeta, technologies }} + layout="inline" + className={`${styles.meta} ${metaModifier}`} + withSeparator={false} + /> </div> ); }; diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx index f80e1ca..d97ad03 100644 --- a/src/components/organisms/layout/posts-list.stories.tsx +++ b/src/components/organisms/layout/posts-list.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import PostsList, { type Post } from './posts-list'; /** @@ -51,13 +50,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof PostsList>; const Template: ComponentStory<typeof PostsList> = (args) => ( @@ -70,23 +62,17 @@ const posts: Post[] = [ 'Esse et voluptas sapiente modi impedit unde et. Ducimus nulla ea impedit sit placeat nihil assumenda. Rem est fugiat amet quo hic. Corrupti fuga quod animi autem dolorem ullam corrupti vel aut.', id: 'post-1', meta: { - publication: { - name: 'Published on:', - value: '2022-02-26T00:42:02', - }, - readingTime: { name: 'Reading time:', value: '5 minutes' }, - categories: { - name: 'Categories:', - value: [ - <a key="cat-1" href="#"> - Cat 1 - </a>, - <a key="cat-2" href="#"> - Cat 2 - </a>, - ], - }, - comments: { name: 'Comments:', value: '1 comment' }, + publication: { date: '2022-02-26' }, + readingTime: '5 minutes', + thematics: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + commentsCount: '1 comment', }, title: 'Ratione velit fuga', url: '#', @@ -104,20 +90,14 @@ const posts: Post[] = [ 'Illum quae asperiores quod aut necessitatibus itaque excepturi voluptas. Incidunt exercitationem ullam saepe alias consequatur sed. Quam veniam quaerat voluptatum earum quia quisquam fugiat sed perspiciatis. Et velit saepe est recusandae facilis eos eum ipsum.', id: 'post-2', meta: { - publication: { - name: 'Published on:', - value: '2022-02-20T10:40:00', - }, - readingTime: { name: 'Reading time:', value: '8 minutes' }, - categories: { - name: 'Categories:', - value: [ - <a key="cat-2" href="#"> - Cat 2 - </a>, - ], - }, - comments: { name: 'Comments:', value: '0 comments' }, + publication: { date: '2022-02-20' }, + readingTime: '8 minutes', + thematics: [ + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + commentsCount: '0 comments', }, title: 'Debitis laudantium laudantium', url: '#', @@ -127,20 +107,14 @@ const posts: Post[] = [ 'Sunt aperiam ut rem impedit dolor id sit. Reprehenderit ipsum iusto fugiat. Quaerat laboriosam magnam facilis. Totam sint aliquam voluptatem in quis laborum sunt eum. Enim aut debitis officiis porro iure quia nihil voluptas ipsum. Praesentium quis necessitatibus cumque quia qui velit quos dolorem.', id: 'post-3', meta: { - publication: { - name: 'Published on:', - value: '2021-12-20T15:12:02', - }, - readingTime: { name: 'Reading time:', value: '3 minutes' }, - categories: { - name: 'Categories:', - value: [ - <a key="cat-1" href="#"> - Cat 1 - </a>, - ], - }, - comments: { name: 'Comments:', value: '3 comments' }, + publication: { date: '2021-12-20' }, + readingTime: '3 minutes', + thematics: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + ], + commentsCount: '3 comments', }, title: 'Quaerat ut corporis', url: '#', diff --git a/src/components/organisms/layout/posts-list.test.tsx b/src/components/organisms/layout/posts-list.test.tsx index aa6dffa..98af1c3 100644 --- a/src/components/organisms/layout/posts-list.test.tsx +++ b/src/components/organisms/layout/posts-list.test.tsx @@ -1,29 +1,23 @@ import { render, screen } from '@test-utils'; -import PostsList from './posts-list'; +import PostsList, { Post } from './posts-list'; -const posts = [ +const posts: Post[] = [ { excerpt: 'Esse et voluptas sapiente modi impedit unde et. Ducimus nulla ea impedit sit placeat nihil assumenda. Rem est fugiat amet quo hic. Corrupti fuga quod animi autem dolorem ullam corrupti vel aut.', id: 'post-1', meta: { - publication: { - name: 'Published on:', - value: '2022-02-26T00:42:02', - }, - readingTime: { name: 'Reading time:', value: '5 minutes' }, - categories: { - name: 'Categories:', - value: [ - <a key="cat-1" href="#"> - Cat 1 - </a>, - <a key="cat-2" href="#"> - Cat 2 - </a>, - ], - }, - comments: { name: 'Comments:', value: '1 comment' }, + publication: { date: '2022-02-26' }, + readingTime: '5 minutes', + thematics: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + commentsCount: '1 comment', }, title: 'Ratione velit fuga', url: '#', @@ -39,20 +33,14 @@ const posts = [ 'Illum quae asperiores quod aut necessitatibus itaque excepturi voluptas. Incidunt exercitationem ullam saepe alias consequatur sed. Quam veniam quaerat voluptatum earum quia quisquam fugiat sed perspiciatis. Et velit saepe est recusandae facilis eos eum ipsum.', id: 'post-2', meta: { - publication: { - name: 'Published on:', - value: '2022-02-20T10:40:00', - }, - readingTime: { name: 'Reading time:', value: '8 minutes' }, - categories: { - name: 'Categories:', - value: [ - <a key="cat-2" href="#"> - Cat 2 - </a>, - ], - }, - comments: { name: 'Comments:', value: '0 comments' }, + publication: { date: '2022-02-20' }, + readingTime: '8 minutes', + thematics: [ + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + commentsCount: '0 comments', }, title: 'Debitis laudantium laudantium', url: '#', @@ -62,20 +50,14 @@ const posts = [ 'Sunt aperiam ut rem impedit dolor id sit. Reprehenderit ipsum iusto fugiat. Quaerat laboriosam magnam facilis. Totam sint aliquam voluptatem in quis laborum sunt eum. Enim aut debitis officiis porro iure quia nihil voluptas ipsum. Praesentium quis necessitatibus cumque quia qui velit quos dolorem.', id: 'post-3', meta: { - publication: { - name: 'Published on:', - value: '2021-12-20T15:12:02', - }, - readingTime: { name: 'Reading time:', value: '3 minutes' }, - categories: { - name: 'Categories:', - value: [ - <a key="cat-1" href="#"> - Cat 1 - </a>, - ], - }, - comments: { name: 'Comments:', value: '3 comments' }, + publication: { date: '2021-12-20' }, + readingTime: '3 minutes', + thematics: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + ], + commentsCount: '3 comments', }, title: 'Quaerat ut corporis', url: '#', diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx index d67b03a..4855205 100644 --- a/src/components/organisms/layout/posts-list.tsx +++ b/src/components/organisms/layout/posts-list.tsx @@ -40,7 +40,7 @@ const sortPostsByYear = (data: Post[]): YearCollection => { const yearCollection: YearCollection = {}; data.forEach((post) => { - const postYear = new Date(post.meta.publication.value as string) + const postYear = new Date(post.meta.publication!.date) .getFullYear() .toString(); yearCollection[postYear] = [...(yearCollection[postYear] || []), post]; diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss index 1cdda98..6d19853 100644 --- a/src/components/organisms/layout/summary.module.scss +++ b/src/components/organisms/layout/summary.module.scss @@ -83,5 +83,18 @@ } .meta { + display: grid; + grid-template-columns: repeat( + auto-fit, + min(100vw, calc(50% - var(--spacing-lg))) + ); + margin-top: var(--spacing-lg); font-size: var(--font-size-sm); + + @include mix.media("screen") { + @include mix.dimensions("sm") { + display: flex; + margin-top: 0; + } + } } diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx index 05be7da..42f1d44 100644 --- a/src/components/organisms/layout/summary.stories.tsx +++ b/src/components/organisms/layout/summary.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import Summary from './summary'; /** @@ -78,13 +77,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof Summary>; const Template: ComponentStory<typeof Summary> = (args) => ( @@ -100,20 +92,17 @@ const cover = { }; const meta = { - publication: { name: 'Published on:', value: 'April 11th 2022' }, - readingTime: { name: 'Reading time:', value: '5 minutes' }, - categories: { - name: 'Categories:', - value: [ - <a key="cat-1" href="#"> - Cat 1 - </a>, - <a key="cat-2" href="#"> - Cat 2 - </a>, - ], - }, - comments: { name: 'Comments:', value: '1 comment' }, + publication: { date: '2022-04-11' }, + readingTime: '5 minutes', + thematics: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + commentsCount: '1 comment', }; /** diff --git a/src/components/organisms/layout/summary.test.tsx b/src/components/organisms/layout/summary.test.tsx index 4944805..09b797c 100644 --- a/src/components/organisms/layout/summary.test.tsx +++ b/src/components/organisms/layout/summary.test.tsx @@ -12,20 +12,17 @@ const excerpt = 'Perspiciatis quasi libero nemo non eligendi nam minima. Deleniti expedita tempore. Praesentium explicabo molestiae eaque consectetur vero. Quae nostrum quisquam similique. Ut hic est quas ut esse quisquam nobis.'; const meta = { - publication: { name: 'Published on:', value: 'April 11th 2022' }, - readingTime: { name: 'Reading time:', value: '5 minutes' }, - categories: { - name: 'Categories:', - value: [ - <a key="cat-1" href="#"> - Cat 1 - </a>, - <a key="cat-2" href="#"> - Cat 2 - </a>, - ], - }, - comments: { name: 'Comments:', value: '1 comment' }, + publication: { date: '2022-04-11' }, + readingTime: '5 minutes', + thematics: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + commentsCount: '1 comment', }; const title = 'Odio odit necessitatibus'; @@ -80,6 +77,6 @@ describe('Summary', () => { it('renders some meta', () => { render(<Summary excerpt={excerpt} meta={meta} title={title} url={url} />); - expect(screen.getByText(meta.publication.name)).toBeInTheDocument(); + expect(screen.getByText(meta.readingTime)).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx index 28aac68..8b47833 100644 --- a/src/components/organisms/layout/summary.tsx +++ b/src/components/organisms/layout/summary.tsx @@ -5,7 +5,7 @@ import Link from '@components/atoms/links/link'; import ResponsiveImage, { type ResponsiveImageProps, } from '@components/molecules/images/responsive-image'; -import Meta, { type MetaItem } from '@components/molecules/layout/meta'; +import Meta, { MetaData } from '@components/molecules/layout/meta'; import { FC, ReactNode } from 'react'; import { useIntl } from 'react-intl'; import styles from './summary.module.scss'; @@ -15,24 +15,15 @@ export type Cover = Pick< 'alt' | 'src' | 'width' | 'height' >; -export type RequiredMetaKey = 'publication'; - -export type RequiredMeta = { - [key in RequiredMetaKey]: MetaItem; -}; - -export type OptionalMetaKey = +export type SummaryMeta = Pick< + MetaData, | 'author' - | 'categories' - | 'comments' + | 'commentsCount' + | 'publication' | 'readingTime' - | 'update'; - -export type OptionalMeta = { - [key in OptionalMetaKey]?: MetaItem; -}; - -export type Meta = RequiredMeta & OptionalMeta; + | 'thematics' + | 'update' +>; export type SummaryProps = { /** @@ -46,7 +37,7 @@ export type SummaryProps = { /** * The post meta. */ - meta: Meta; + meta: SummaryMeta; /** * The post title. */ @@ -100,7 +91,11 @@ const Summary: FC<SummaryProps> = ({ </Link> </header> <div className={styles.body}> - {excerpt} + {typeof excerpt === 'string' ? ( + <div dangerouslySetInnerHTML={{ __html: excerpt }} /> + ) : ( + excerpt + )} <ButtonLink target={url} className={styles['read-more']}> <> {readMore} diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx index 1f72cb0..b4b0d68 100644 --- a/src/components/templates/page/page-layout.stories.tsx +++ b/src/components/templates/page/page-layout.stories.tsx @@ -6,7 +6,6 @@ import PostsList from '@components/organisms/layout/posts-list'; import LinksListWidget from '@components/organisms/widgets/links-list-widget'; import Sharing from '@components/organisms/widgets/sharing'; import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import PageLayoutComponent from './page-layout'; /** @@ -157,15 +156,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <div id="__next"> - <Story /> - </div> - </IntlProvider> - ), - ], parameters: { layout: 'fullscreen', }, @@ -231,7 +221,6 @@ SinglePage.args = { 'linkedin', 'twitter', ]} - title="Share" level={2} expanded={true} />, @@ -320,22 +309,19 @@ Post.args = { title: pageTitle, intro: pageIntro, headerMeta: { - publication: { name: 'Published on:', value: 'March 14th 2020' }, - categories: { - name: 'Categories:', - value: [ - <Link key="cat1" href="#"> - Cat 1 - </Link>, - <Link key="cat2" href="#"> - Cat 2 - </Link>, - ], - }, + publication: { date: '2020-03-14' }, + thematics: [ + <Link key="cat1" href="#"> + Cat 1 + </Link>, + <Link key="cat2" href="#"> + Cat 2 + </Link>, + ], }, footerMeta: { - tags: { - name: 'Read more about:', + custom: { + label: 'Read more about:', value: <ButtonLink target="#">Topic 1</ButtonLink>, }, }, @@ -379,7 +365,6 @@ Post.args = { 'linkedin', 'twitter', ]} - title="Share" level={2} expanded={true} />, @@ -400,23 +385,17 @@ const posts = [ 'Esse et voluptas sapiente modi impedit unde et. Ducimus nulla ea impedit sit placeat nihil assumenda. Rem est fugiat amet quo hic. Corrupti fuga quod animi autem dolorem ullam corrupti vel aut.', id: 'post-1', meta: { - publication: { - name: 'Published on:', - value: '2022-02-26T00:42:02', - }, - readingTime: { name: 'Reading time:', value: '5 minutes' }, - categories: { - name: 'Categories:', - value: [ - <a key="cat-1" href="#"> - Cat 1 - </a>, - <a key="cat-2" href="#"> - Cat 2 - </a>, - ], - }, - comments: { name: 'Comments:', value: '1 comment' }, + publication: { date: '2022-02-26' }, + readingTime: '5 minutes', + categories: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + commentsCount: '1 comment', }, title: 'Ratione velit fuga', url: '#', @@ -435,19 +414,15 @@ const posts = [ id: 'post-2', meta: { publication: { - name: 'Published on:', - value: '2022-02-20T10:40:00', + date: '2022-02-20', }, - readingTime: { name: 'Reading time:', value: '8 minutes' }, - categories: { - name: 'Categories:', - value: [ - <a key="cat-2" href="#"> - Cat 2 - </a>, - ], - }, - comments: { name: 'Comments:', value: '0 comments' }, + readingTime: '8 minutes', + categories: [ + <a key="cat-2" href="#"> + Cat 2 + </a>, + ], + comments: '0 comments', }, title: 'Debitis laudantium laudantium', url: '#', @@ -458,19 +433,15 @@ const posts = [ id: 'post-3', meta: { publication: { - name: 'Published on:', - value: '2021-12-20T15:12:02', - }, - readingTime: { name: 'Reading time:', value: '3 minutes' }, - categories: { - name: 'Categories:', - value: [ - <a key="cat-1" href="#"> - Cat 1 - </a>, - ], + date: '2021-12-20', }, - comments: { name: 'Comments:', value: '3 comments' }, + readingTime: '3 minutes', + categories: [ + <a key="cat-1" href="#"> + Cat 1 + </a>, + ], + comments: '3 comments', }, title: 'Quaerat ut corporis', url: '#', @@ -502,7 +473,7 @@ export const Blog = Template.bind({}); Blog.args = { breadcrumb: postsListBreadcrumb, title: 'Blog', - headerMeta: { total: { name: 'Total:', value: `${posts.length} posts` } }, + headerMeta: { total: `${posts.length} posts` }, children: ( <> <PostsList posts={posts} byYear={true} /> diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx index 24c4e50..ac021ba 100644 --- a/src/components/templates/page/page-layout.tsx +++ b/src/components/templates/page/page-layout.tsx @@ -133,9 +133,17 @@ const PageLayout: FC<PageLayoutProps> = ({ )} </Sidebar> )} - <div ref={bodyRef} className={styles.body}> - {children} - </div> + {typeof children === 'string' ? ( + <div + ref={bodyRef} + className={styles.body} + dangerouslySetInnerHTML={{ __html: children }} + /> + ) : ( + <div ref={bodyRef} className={styles.body}> + {children} + </div> + )} <PageFooter meta={footerMeta} className={styles.footer} /> <Sidebar className={`${styles.sidebar} ${styles['sidebar--last']}`}> {widgets} diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx index d88a8a1..fcfbe1d 100644 --- a/src/pages/contact.tsx +++ b/src/pages/contact.tsx @@ -41,7 +41,7 @@ const ContactPage: NextPage = () => { const { asPath } = useRouter(); const pageUrl = `${website.url}${asPath}`; const pagePublicationDate = new Date(dates.publication); - const pageUpdateDate = new Date(dates.update); + const pageUpdateDate = dates.update ? new Date(dates.update) : undefined; const webpageSchema: WebPage = { '@id': `${pageUrl}`, @@ -64,7 +64,7 @@ const ContactPage: NextPage = () => { author: { '@id': `${website.url}/#branding` }, creator: { '@id': `${website.url}/#branding` }, dateCreated: pagePublicationDate.toISOString(), - dateModified: pageUpdateDate.toISOString(), + dateModified: pageUpdateDate && pageUpdateDate.toISOString(), datePublished: pagePublicationDate.toISOString(), editor: { '@id': `${website.url}/#branding` }, inLanguage: website.locales.default, diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx index d47edc6..0e4765e 100644 --- a/src/pages/cv.tsx +++ b/src/pages/cv.tsx @@ -7,7 +7,6 @@ import PageLayout, { } from '@components/templates/page/page-layout'; import CVContent, { data, meta } from '@content/pages/cv.mdx'; import styles from '@styles/pages/cv.module.scss'; -import { getFormattedDate } from '@utils/helpers/dates'; import { loadTranslation } from '@utils/helpers/i18n'; import useSettings from '@utils/hooks/use-settings'; import { GetStaticProps, NextPage } from 'next'; @@ -46,24 +45,15 @@ const CVPage: NextPage = () => { id: '+Dre5J', }); - const publicationLabel = intl.formatMessage({ - defaultMessage: 'Published on:', - description: 'Meta: publication date label', - id: 'QGi5uD', - }); - - const updateLabel = intl.formatMessage({ - defaultMessage: 'Updated on:', - description: 'Meta: update date label', - id: 'tLC7bh', - }); - const headerMeta: PageLayoutProps['headerMeta'] = { publication: { - name: publicationLabel, - value: getFormattedDate(dates.publication), + date: dates.publication, }, - update: { name: updateLabel, value: getFormattedDate(dates.update) }, + update: dates.update + ? { + date: dates.update, + } + : undefined, }; const { website } = useSettings(); @@ -118,7 +108,7 @@ const CVPage: NextPage = () => { const { asPath } = useRouter(); const pageUrl = `${website.url}${asPath}`; const pagePublicationDate = new Date(dates.publication); - const pageUpdateDate = new Date(dates.update); + const pageUpdateDate = dates.update ? new Date(dates.update) : undefined; const webpageSchema: WebPage = { '@id': `${pageUrl}`, @@ -141,7 +131,7 @@ const CVPage: NextPage = () => { author: { '@id': `${website.url}/#branding` }, creator: { '@id': `${website.url}/#branding` }, dateCreated: pagePublicationDate.toISOString(), - dateModified: pageUpdateDate.toISOString(), + dateModified: pageUpdateDate && pageUpdateDate.toISOString(), datePublished: pagePublicationDate.toISOString(), editor: { '@id': `${website.url}/#branding` }, image: image.src, diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c965320..6108d2f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -225,17 +225,7 @@ const HomePage: NextPage<HomeProps> = ({ recentPosts }) => { return { cover: post.cover, id: post.slug, - meta: [ - { - id: 'publication', - term: intl.formatMessage({ - defaultMessage: 'Published on:', - description: 'HomePage: publication date label', - id: 'pT5nHk', - }), - value: [post.dates.publication], - }, - ], + meta: { publication: { date: post.dates.publication } }, title: post.title, url: `/article/${post.slug}`, }; diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx index 8dd0a1d..9235e69 100644 --- a/src/pages/mentions-legales.tsx +++ b/src/pages/mentions-legales.tsx @@ -5,7 +5,6 @@ import PageLayout, { type PageLayoutProps, } from '@components/templates/page/page-layout'; import LegalNoticeContent, { meta } from '@content/pages/legal-notice.mdx'; -import { getFormattedDate } from '@utils/helpers/dates'; import { loadTranslation } from '@utils/helpers/i18n'; import useSettings from '@utils/hooks/use-settings'; import { NestedMDXComponents } from 'mdx/types'; @@ -32,24 +31,15 @@ const LegalNoticePage: NextPage = () => { { id: 'legal-notice', name: title, url: '/mentions-legales' }, ]; - const publicationLabel = intl.formatMessage({ - defaultMessage: 'Published on:', - description: 'Meta: publication date label', - id: 'QGi5uD', - }); - - const updateLabel = intl.formatMessage({ - defaultMessage: 'Updated on:', - description: 'Meta: update date label', - id: 'tLC7bh', - }); - const headerMeta: PageLayoutProps['headerMeta'] = { publication: { - name: publicationLabel, - value: getFormattedDate(dates.publication), + date: dates.publication, }, - update: { name: updateLabel, value: getFormattedDate(dates.update) }, + update: dates.update + ? { + date: dates.update, + } + : undefined, }; const components: NestedMDXComponents = { @@ -61,7 +51,7 @@ const LegalNoticePage: NextPage = () => { const { asPath } = useRouter(); const pageUrl = `${website.url}${asPath}`; const pagePublicationDate = new Date(dates.publication); - const pageUpdateDate = new Date(dates.update); + const pageUpdateDate = dates.update ? new Date(dates.update) : undefined; const webpageSchema: WebPage = { '@id': `${pageUrl}`, @@ -87,7 +77,7 @@ const LegalNoticePage: NextPage = () => { copyrightYear: pagePublicationDate.getFullYear(), creator: { '@id': `${website.url}/#branding` }, dateCreated: pagePublicationDate.toISOString(), - dateModified: pageUpdateDate.toISOString(), + dateModified: pageUpdateDate && pageUpdateDate.toISOString(), datePublished: pagePublicationDate.toISOString(), editor: { '@id': `${website.url}/#branding` }, headline: title, diff --git a/src/utils/helpers/dates.ts b/src/utils/helpers/dates.ts index fa167a7..cb56ad2 100644 --- a/src/utils/helpers/dates.ts +++ b/src/utils/helpers/dates.ts @@ -1,4 +1,3 @@ -import { Dates } from '@ts/types/app'; import { settings } from '@utils/config'; /** @@ -39,17 +38,3 @@ export const getFormattedTime = ( return locale === 'fr' ? formattedTime.replace(':', 'h') : formattedTime; }; - -/** - * Retrieve a Dates object. - * - * @param publication - The publication date. - * @param update - The update date. - * @returns {Dates} A Dates object. - */ -export const getDates = (publication: string, update: string): Dates => { - return { - publication: getFormattedDate(publication), - update: getFormattedDate(update), - }; -}; |