From 4bd651b9e32c568d86b30463858c20ef290d8c07 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 7 Apr 2022 22:54:27 +0200
Subject: chore: add a HeadingButton component

---
 .../molecules/buttons/heading-button.module.scss   | 41 ++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/molecules/buttons/heading-button.module.scss

(limited to 'src/components/molecules/buttons/heading-button.module.scss')

diff --git a/src/components/molecules/buttons/heading-button.module.scss b/src/components/molecules/buttons/heading-button.module.scss
new file mode 100644
index 0000000..d068001
--- /dev/null
+++ b/src/components/molecules/buttons/heading-button.module.scss
@@ -0,0 +1,41 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  transition: all 0.25s ease-in-out 0s;
+}
+
+.wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  width: 100%;
+  padding: 0;
+  position: sticky;
+  top: 0;
+  background: inherit;
+  border: none;
+  border-top: fun.convert-px(2) solid var(--color-primary-dark);
+  border-bottom: fun.convert-px(2) solid var(--color-primary-dark);
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    .icon {
+      background: var(--color-primary-light);
+      color: var(--color-fg-inverted);
+      transform: scale(1.25);
+
+      &::before,
+      &::after {
+        background: var(--color-bg);
+      }
+    }
+  }
+}
+
+.heading {
+  background: none;
+  padding: var(--spacing-2xs) 0;
+}
-- 
cgit v1.2.3


From 6ec16bc15cc78e62cb94e131699625fa5363437c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 15 Apr 2022 15:34:21 +0200
Subject: chore: add a Widget component

---
 .../molecules/buttons/heading-button.module.scss   |  2 +-
 .../molecules/buttons/heading-button.tsx           | 19 ++---
 src/components/molecules/layout/widget.module.scss | 40 ++++++++++
 src/components/molecules/layout/widget.stories.tsx | 85 ++++++++++++++++++++++
 src/components/molecules/layout/widget.test.tsx    | 19 +++++
 src/components/molecules/layout/widget.tsx         | 54 ++++++++++++++
 6 files changed, 209 insertions(+), 10 deletions(-)
 create mode 100644 src/components/molecules/layout/widget.module.scss
 create mode 100644 src/components/molecules/layout/widget.stories.tsx
 create mode 100644 src/components/molecules/layout/widget.test.tsx
 create mode 100644 src/components/molecules/layout/widget.tsx

(limited to 'src/components/molecules/buttons/heading-button.module.scss')

diff --git a/src/components/molecules/buttons/heading-button.module.scss b/src/components/molecules/buttons/heading-button.module.scss
index d068001..1d16410 100644
--- a/src/components/molecules/buttons/heading-button.module.scss
+++ b/src/components/molecules/buttons/heading-button.module.scss
@@ -11,7 +11,7 @@
   justify-content: space-between;
   gap: var(--spacing-md);
   width: 100%;
-  padding: 0;
+  padding: 0 var(--spacing-2xs);
   position: sticky;
   top: 0;
   background: inherit;
diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx
index 700b3e1..fc79749 100644
--- a/src/components/molecules/buttons/heading-button.tsx
+++ b/src/components/molecules/buttons/heading-button.tsx
@@ -1,10 +1,14 @@
 import Heading, { type HeadingProps } from '@components/atoms/headings/heading';
 import PlusMinus from '@components/atoms/icons/plus-minus';
-import { FC, SetStateAction } from 'react';
+import { SetStateAction, VFC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './heading-button.module.scss';
 
 export type HeadingButtonProps = Pick<HeadingProps, 'level'> & {
+  /**
+   * Set additional classnames to the button.
+   */
+  className?: string;
   /**
    * Accordion state.
    */
@@ -24,7 +28,8 @@ export type HeadingButtonProps = Pick<HeadingProps, 'level'> & {
  *
  * Render a button as accordion title to toggle body.
  */
-const HeadingButton: FC<HeadingButtonProps> = ({
+const HeadingButton: VFC<HeadingButtonProps> = ({
+  className = '',
   expanded,
   level,
   setExpanded,
@@ -47,18 +52,14 @@ const HeadingButton: FC<HeadingButtonProps> = ({
   return (
     <button
       type="button"
-      className={styles.wrapper}
+      className={`${styles.wrapper} ${className}`}
       onClick={() => setExpanded(!expanded)}
     >
-      <Heading
-        level={level}
-        withMargin={false}
-        additionalClasses={styles.heading}
-      >
+      <Heading level={level} withMargin={false} className={styles.heading}>
         <span className="screen-reader-text">{titlePrefix} </span>
         {title}
       </Heading>
-      <PlusMinus state={iconState} additionalClasses={styles.icon} />
+      <PlusMinus state={iconState} className={styles.icon} />
     </button>
   );
 };
diff --git a/src/components/molecules/layout/widget.module.scss b/src/components/molecules/layout/widget.module.scss
new file mode 100644
index 0000000..727ffb7
--- /dev/null
+++ b/src/components/molecules/layout/widget.module.scss
@@ -0,0 +1,40 @@
+@use "@styles/abstracts/functions" as fun;
+
+.widget {
+  display: flex;
+  flex-flow: column;
+
+  &__header {
+    background: var(--color-bg);
+  }
+
+  &--has-borders & {
+    &__body {
+      border: fun.convert-px(2) solid var(--color-primary-dark);
+    }
+  }
+
+  &--collapsed & {
+    &__body {
+      max-height: 0;
+      margin: 0;
+      visibility: hidden;
+      opacity: 0;
+      overflow: hidden;
+      border: 0 solid transparent;
+      transition: all 0.1s linear 0.3s,
+        max-height 0.5s cubic-bezier(0, 1, 0, 1) 0s, margin 0.3s ease-in-out 0s;
+    }
+  }
+
+  &--expanded & {
+    &__body {
+      max-height: 10000px; // needs a fixed value for transition.
+      margin: var(--spacing-sm) 0;
+      opacity: 1;
+      visibility: visible;
+      transition: all 0.5s ease-in-out 0s, border 0s linear 0s,
+        max-height 0.6s ease-in-out 0s;
+    }
+  }
+}
diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx
new file mode 100644
index 0000000..d79f66e
--- /dev/null
+++ b/src/components/molecules/layout/widget.stories.tsx
@@ -0,0 +1,85 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import WidgetComponent from './widget';
+
+export default {
+  title: 'Molecules/Layout',
+  component: WidgetComponent,
+  args: {
+    expanded: true,
+    withBorders: false,
+  },
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'The widget body',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    expanded: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'The widget state (expanded or collapsed)',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: true },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    level: {
+      control: {
+        type: 'number',
+      },
+      description: 'The heading level.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'The widget title.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    withBorders: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Define if the content should have borders.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof WidgetComponent>;
+
+const Template: ComponentStory<typeof WidgetComponent> = (args) => (
+  <IntlProvider locale="en">
+    <WidgetComponent {...args} />
+  </IntlProvider>
+);
+
+export const Widget = Template.bind({});
+Widget.args = {
+  children: 'Widget body',
+  level: 2,
+  title: 'Widget title',
+};
diff --git a/src/components/molecules/layout/widget.test.tsx b/src/components/molecules/layout/widget.test.tsx
new file mode 100644
index 0000000..af561ea
--- /dev/null
+++ b/src/components/molecules/layout/widget.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from '@test-utils';
+import Widget from './widget';
+
+const children = 'Widget body';
+const title = 'Widget title';
+const titleLevel = 2;
+
+describe('Widget', () => {
+  it('renders the widget title', () => {
+    render(
+      <Widget expanded={true} title={title} level={titleLevel}>
+        {children}
+      </Widget>
+    );
+    expect(
+      screen.getByRole('heading', { level: titleLevel })
+    ).toHaveTextContent(title);
+  });
+});
diff --git a/src/components/molecules/layout/widget.tsx b/src/components/molecules/layout/widget.tsx
new file mode 100644
index 0000000..c04362a
--- /dev/null
+++ b/src/components/molecules/layout/widget.tsx
@@ -0,0 +1,54 @@
+import { FC, useState } from 'react';
+import HeadingButton, { HeadingButtonProps } from '../buttons/heading-button';
+import styles from './widget.module.scss';
+
+export type WidgetProps = Pick<
+  HeadingButtonProps,
+  'expanded' | 'level' | 'title'
+> & {
+  /**
+   * Set additional classnames to the widget wrapper.
+   */
+  className?: string;
+  /**
+   * Determine if the widget body should have borders. Default: false.
+   */
+  withBorders?: boolean;
+};
+
+/**
+ * Widget component
+ *
+ * Render an expandable widget.
+ */
+const Widget: FC<WidgetProps> = ({
+  children,
+  className = '',
+  expanded = true,
+  level,
+  title,
+  withBorders = false,
+}) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);
+  const stateClass = isExpanded ? 'widget--expanded' : 'widget--collapsed';
+  const bordersClass = withBorders
+    ? 'widget--has-borders'
+    : 'widget--no-borders';
+
+  return (
+    <div
+      className={`${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${className}`}
+    >
+      <HeadingButton
+        level={level}
+        title={title}
+        expanded={isExpanded}
+        setExpanded={setIsExpanded}
+        className={styles.widget__header}
+      />
+      <div className={styles.widget__body}>{children}</div>
+    </div>
+  );
+};
+
+export default Widget;
-- 
cgit v1.2.3


From 83a029084f1bbfd78b7099d9bea3371d4533c6d9 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 3 May 2022 16:51:22 +0200
Subject: chore: add a LegalNotice page

---
 mdx.d.ts                                           |  10 +-
 .../molecules/buttons/heading-button.module.scss   |   4 +-
 src/components/molecules/layout/meta.module.scss   |   8 +-
 .../molecules/layout/page-header.module.scss       |   7 +-
 .../widgets/links-list-widget.module.scss          |  10 +-
 .../organisms/widgets/links-list-widget.tsx        |   5 +-
 .../widgets/table-of-contents.module.scss          |   4 +
 .../organisms/widgets/table-of-contents.tsx        |   2 +
 src/pages/mentions-legales.tsx                     | 140 +++++++++++++++++++++
 src/ts/types/app.ts                                |  16 ++-
 src/ts/types/mdx.ts                                |  20 +++
 src/ts/types/raw-data.ts                           |   6 +-
 src/utils/helpers/author.ts                        |  10 +-
 13 files changed, 209 insertions(+), 33 deletions(-)
 create mode 100644 src/components/organisms/widgets/table-of-contents.module.scss
 create mode 100644 src/pages/mentions-legales.tsx
 create mode 100644 src/ts/types/mdx.ts

(limited to 'src/components/molecules/buttons/heading-button.module.scss')

diff --git a/mdx.d.ts b/mdx.d.ts
index f3a9a90..b4e333d 100644
--- a/mdx.d.ts
+++ b/mdx.d.ts
@@ -1,13 +1,9 @@
 declare module '*.mdx' {
+  import { MDXData, MDXPageMeta, MDXProjectMeta } from '@ts/types/mdx';
   import { MDXProps } from 'mdx/types';
-  import { Meta } from '@ts/types/app';
 
   let MDXComponent: (props: MDXProps) => JSX.Element;
   export default MDXComponent;
-  export const cover: string;
-  export const image: string;
-  export const intro: string;
-  export const meta: Meta;
-  export const pdf: string;
-  export const seo: { title: string; description: string };
+  export const data: MDXData;
+  export const meta: MDXPageMeta | MDXProjectMeta;
 }
diff --git a/src/components/molecules/buttons/heading-button.module.scss b/src/components/molecules/buttons/heading-button.module.scss
index 1d16410..9c278e4 100644
--- a/src/components/molecules/buttons/heading-button.module.scss
+++ b/src/components/molecules/buttons/heading-button.module.scss
@@ -36,6 +36,8 @@
 }
 
 .heading {
-  background: none;
   padding: var(--spacing-2xs) 0;
+  background: none;
+  font-size: var(--font-size-xl);
+  text-align: left;
 }
diff --git a/src/components/molecules/layout/meta.module.scss b/src/components/molecules/layout/meta.module.scss
index f7cc55b..0485545 100644
--- a/src/components/molecules/layout/meta.module.scss
+++ b/src/components/molecules/layout/meta.module.scss
@@ -2,12 +2,18 @@
 
 .list {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  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);
     }
   }
 }
diff --git a/src/components/molecules/layout/page-header.module.scss b/src/components/molecules/layout/page-header.module.scss
index 93f7595..4c7df5f 100644
--- a/src/components/molecules/layout/page-header.module.scss
+++ b/src/components/molecules/layout/page-header.module.scss
@@ -1,5 +1,4 @@
 @use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
@@ -55,9 +54,5 @@
 }
 
 .meta {
-  @include mix.media("screen") {
-    @include mix.dimensions("xs") {
-      font-size: var(--font-size-sm);
-    }
-  }
+  font-size: var(--font-size-sm);
 }
diff --git a/src/components/organisms/widgets/links-list-widget.module.scss b/src/components/organisms/widgets/links-list-widget.module.scss
index cbad83e..4444df4 100644
--- a/src/components/organisms/widgets/links-list-widget.module.scss
+++ b/src/components/organisms/widgets/links-list-widget.module.scss
@@ -3,6 +3,12 @@
 
 .widget {
   .list {
+    .list {
+      > *:first-child {
+        border-top: fun.convert-px(1) solid var(--color-primary);
+      }
+    }
+
     &__link {
       display: block;
       padding: var(--spacing-2xs) var(--spacing-xs);
@@ -50,9 +56,7 @@
 
     &__item {
       &:not(:last-child) {
-        .list__link {
-          border-bottom: fun.convert-px(1) solid var(--color-primary);
-        }
+        border-bottom: fun.convert-px(1) solid var(--color-primary);
       }
 
       > .list {
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 559d0b6..37a20fc 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -24,7 +24,7 @@ export type LinksListItems = {
 };
 
 export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> &
-  Pick<ListProps, 'kind'> & {
+  Pick<ListProps, 'className' | 'kind'> & {
     /**
      * An array of name/url couple.
      */
@@ -37,6 +37,7 @@ export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> &
  * Render a list of links inside a widget.
  */
 const LinksListWidget: FC<LinksListWidgetProps> = ({
+  className = '',
   items,
   kind = 'unordered',
   ...props
@@ -74,7 +75,7 @@ const LinksListWidget: FC<LinksListWidgetProps> = ({
         items={getListItems(items)}
         kind={kind}
         withMargin={false}
-        className={`${styles.list} ${styles[listKindClass]}`}
+        className={`${styles.list} ${styles[listKindClass]} ${className}`}
         itemsClassName={styles.list__item}
       />
     </Widget>
diff --git a/src/components/organisms/widgets/table-of-contents.module.scss b/src/components/organisms/widgets/table-of-contents.module.scss
new file mode 100644
index 0000000..36217ed
--- /dev/null
+++ b/src/components/organisms/widgets/table-of-contents.module.scss
@@ -0,0 +1,4 @@
+.list {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+}
diff --git a/src/components/organisms/widgets/table-of-contents.tsx b/src/components/organisms/widgets/table-of-contents.tsx
index 3778e02..800ff58 100644
--- a/src/components/organisms/widgets/table-of-contents.tsx
+++ b/src/components/organisms/widgets/table-of-contents.tsx
@@ -2,6 +2,7 @@ import useHeadingsTree, { type Heading } from '@utils/hooks/use-headings-tree';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import LinksListWidget, { type LinksListItems } from './links-list-widget';
+import styles from './table-of-contents.module.scss';
 
 type TableOfContentsProps = {
   /**
@@ -46,6 +47,7 @@ const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => {
       title={title}
       level={2}
       items={getItems(headingsTree)}
+      className={styles.list}
     />
   );
 };
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
new file mode 100644
index 0000000..8dd0a1d
--- /dev/null
+++ b/src/pages/mentions-legales.tsx
@@ -0,0 +1,140 @@
+import Link from '@components/atoms/links/link';
+import ResponsiveImage from '@components/molecules/images/responsive-image';
+import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+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';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { useIntl } from 'react-intl';
+import { Article, Graph, WebPage } from 'schema-dts';
+
+/**
+ * Legal Notice page.
+ */
+const LegalNoticePage: NextPage = () => {
+  const intl = useIntl();
+  const { dates, intro, seo, title } = meta;
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { 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),
+    },
+    update: { name: updateLabel, value: getFormattedDate(dates.update) },
+  };
+
+  const components: NestedMDXComponents = {
+    Image: (props) => <ResponsiveImage {...props} />,
+    Link: (props) => <Link {...props} />,
+  };
+
+  const { website } = useSettings();
+  const { asPath } = useRouter();
+  const pageUrl = `${website.url}${asPath}`;
+  const pagePublicationDate = new Date(dates.publication);
+  const pageUpdateDate = new Date(dates.update);
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    name: seo.title,
+    description: seo.description,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${pageUrl}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const articleSchema: Article = {
+    '@id': `${website.url}/#legal-notice`,
+    '@type': 'Article',
+    name: title,
+    description: intro,
+    author: { '@id': `${website.url}/#branding` },
+    copyrightYear: pagePublicationDate.getFullYear(),
+    creator: { '@id': `${website.url}/#branding` },
+    dateCreated: pagePublicationDate.toISOString(),
+    dateModified: pageUpdateDate.toISOString(),
+    datePublished: pagePublicationDate.toISOString(),
+    editor: { '@id': `${website.url}/#branding` },
+    headline: title,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, articleSchema],
+  };
+
+  return (
+    <PageLayout
+      title={title}
+      intro={intro}
+      headerMeta={headerMeta}
+      breadcrumb={breadcrumb}
+      withToC={true}
+    >
+      <Head>
+        <title>{`${seo.title} - ${website.name}`}</title>
+        <meta name="description" content={seo.description} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content={`${seo.title} - ${website.name}`} />
+        <meta property="og:description" content={intro} />
+      </Head>
+      <Script
+        id="schema-legal-notice"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <LegalNoticeContent components={components} />
+    </PageLayout>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      translation,
+    },
+  };
+};
+
+export default LegalNoticePage;
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index b09f3d5..4d9c71c 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -1,8 +1,14 @@
-export type AuthorKind = 'page' | 'comment';
+export type ContentKind =
+  | 'article'
+  | 'comment'
+  | 'page'
+  | 'project'
+  | 'thematic'
+  | 'topic';
 
-export type Author<T extends AuthorKind> = {
+export type Author<T extends ContentKind> = {
   avatar?: Image;
-  description?: T extends 'page' ? string | undefined : never;
+  description?: T extends 'comment' ? never : string;
   name: string;
   website?: string;
 };
@@ -44,11 +50,11 @@ export type SEO = {
   title: string;
 };
 
-export type PageKind = 'article' | 'project' | 'thematic' | 'topic';
+export type PageKind = Exclude<ContentKind, 'comment'>;
 
 export type Meta<T extends PageKind> = {
   articles?: T extends 'thematic' | 'topic' ? Article[] : never;
-  author: Author<'page'>;
+  author?: T extends 'article' | 'page' ? Author<T> : never;
   commentsCount?: T extends 'article' ? number : never;
   cover?: Image;
   dates: Dates;
diff --git a/src/ts/types/mdx.ts b/src/ts/types/mdx.ts
new file mode 100644
index 0000000..6b72f21
--- /dev/null
+++ b/src/ts/types/mdx.ts
@@ -0,0 +1,20 @@
+import { StaticImageData } from 'next/image';
+import { Meta } from './app';
+
+export type MDXData = {
+  file: string;
+  image: StaticImageData;
+};
+
+export type MDXPageMeta = Pick<Meta<'page'>, 'cover' | 'dates' | 'seo'> & {
+  intro: string;
+  title: string;
+};
+
+export type MDXProjectMeta = Omit<
+  Meta<'project'>,
+  'readingTime' | 'wordsCount'
+> & {
+  intro: string;
+  title: string;
+};
diff --git a/src/ts/types/raw-data.ts b/src/ts/types/raw-data.ts
index 43a2453..7e12e7f 100644
--- a/src/ts/types/raw-data.ts
+++ b/src/ts/types/raw-data.ts
@@ -3,7 +3,7 @@
  */
 
 import { NodeResponse, PageInfo } from '@services/graphql/api';
-import { AuthorKind } from './app';
+import { ContentKind } from './app';
 
 export type ACFPosts = {
   postsInThematic?: RawThematicPreview[];
@@ -29,8 +29,8 @@ export type Info = {
   wordsCount: number;
 };
 
-export type RawAuthor<T extends AuthorKind> = {
-  description?: T extends 'page' ? string | undefined : never;
+export type RawAuthor<T extends ContentKind> = {
+  description?: T extends 'comment' ? never : string;
   gravatarUrl?: string;
   name: string;
   url?: string;
diff --git a/src/utils/helpers/author.ts b/src/utils/helpers/author.ts
index cf125fc..40743ca 100644
--- a/src/utils/helpers/author.ts
+++ b/src/utils/helpers/author.ts
@@ -1,17 +1,17 @@
-import { type Author, type AuthorKind } from '@ts/types/app';
+import { type Author, type ContentKind } from '@ts/types/app';
 import { type RawAuthor } from '@ts/types/raw-data';
 
 /**
  * Convert author raw data to regular data.
  *
- * @param {RawAuthor<AuthorKind>} data - The author raw data.
- * @param {AuthorKind} kind - The author kind. Either `page` or `comment`.
+ * @param {RawAuthor<ContentKind>} data - The author raw data.
+ * @param {ContentKind} kind - The author kind. Either `page` or `comment`.
  * @param {number} [avatarSize] - The author avatar size.
- * @returns {Author<AuthorKind>} The author data.
+ * @returns {Author<ContentKind>} The author data.
  */
 export const getAuthorFromRawData = (
   data: RawAuthor<typeof kind>,
-  kind: AuthorKind,
+  kind: ContentKind,
   avatarSize: number = 80
 ): Author<typeof kind> => {
   const { name, description, gravatarUrl, url } = data;
-- 
cgit v1.2.3


From 7d9f874364ec6e255e62eb3027011bfed267904c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 17 May 2022 18:37:38 +0200
Subject: chore: adjust articles styles

* change animation on article card hover
* change comments section alignment
---
 src/components/atoms/buttons/buttons.module.scss   |  2 +-
 src/components/atoms/headings/heading.module.scss  | 16 +++-
 src/components/atoms/headings/heading.stories.tsx  | 26 +++++++
 src/components/atoms/headings/heading.tsx          | 58 ++++++++++++---
 .../molecules/buttons/heading-button.module.scss   | 15 ++--
 .../molecules/buttons/heading-button.stories.tsx   | 73 ++++++-------------
 src/components/organisms/forms/comment-form.tsx    | 14 +++-
 .../organisms/layout/summary.module.scss           |  7 +-
 .../templates/page/page-layout.module.scss         |  9 ++-
 src/components/templates/page/page-layout.tsx      | 85 ++++++++++++++--------
 src/pages/article/[slug].tsx                       | 18 ++++-
 src/styles/pages/article.module.scss               |  1 +
 12 files changed, 211 insertions(+), 113 deletions(-)

(limited to 'src/components/molecules/buttons/heading-button.module.scss')

diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index 36c66b6..2444bb1 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -16,7 +16,7 @@
   }
 
   &--rectangle {
-    padding: var(--spacing-2xs) var(--spacing-md);
+    padding: var(--spacing-2xs) var(--spacing-sm);
   }
 
   &--square,
diff --git a/src/components/atoms/headings/heading.module.scss b/src/components/atoms/headings/heading.module.scss
index 8620f6f..a420bc1 100644
--- a/src/components/atoms/headings/heading.module.scss
+++ b/src/components/atoms/headings/heading.module.scss
@@ -6,11 +6,23 @@
   letter-spacing: 0.01ex;
 
   &--regular {
-    margin: 0;
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  &--left {
+    text-align: left;
+  }
+
+  &--center {
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   &--margin {
-    margin: 0 0 var(--spacing-sm);
+    margin-top: 0;
+    margin-bottom: var(--spacing-sm);
 
     & + & {
       margin-top: var(--spacing-md);
diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx
index da5a718..0e3885d 100644
--- a/src/components/atoms/headings/heading.stories.tsx
+++ b/src/components/atoms/headings/heading.stories.tsx
@@ -8,10 +8,26 @@ export default {
   title: 'Atoms/Typography/Headings',
   component: Heading,
   args: {
+    alignment: 'left',
     isFake: false,
     withMargin: true,
   },
   argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+      },
+      description: 'The title alignment.',
+      options: ['center', 'left'],
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 'left' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
@@ -32,6 +48,16 @@ export default {
         required: true,
       },
     },
+    id: {
+      control: {
+        type: 'text',
+      },
+      description: 'An unique id.',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     isFake: {
       control: {
         type: 'boolean',
diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx
index c5bf4ca..e385249 100644
--- a/src/components/atoms/headings/heading.tsx
+++ b/src/components/atoms/headings/heading.tsx
@@ -1,9 +1,19 @@
-import { FC, ReactNode } from 'react';
+import {
+  createElement,
+  ForwardedRef,
+  forwardRef,
+  ForwardRefRenderFunction,
+  ReactNode,
+} from 'react';
 import styles from './heading.module.scss';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 export type HeadingProps = {
+  /**
+   * The title alignment. Default: left;
+   */
+  alignment?: 'center' | 'left';
   /**
    * The heading body.
    */
@@ -30,31 +40,55 @@ export type HeadingProps = {
   withMargin?: boolean;
 };
 
+type TitleTagProps = Pick<HeadingProps, 'children' | 'className' | 'id'> & {
+  tagName: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+};
+
+const TitleTag = forwardRef<
+  HTMLHeadingElement | HTMLParagraphElement,
+  TitleTagProps
+>(
+  (
+    { children, tagName, ...props },
+    ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement>
+  ) => {
+    return createElement(tagName, { ...props, ref }, children);
+  }
+);
+TitleTag.displayName = 'TitleTag';
+
 /**
  * Heading component.
  *
  * Render an HTML heading element or a paragraph with heading styles.
  */
-const Heading: FC<HeadingProps> = ({
-  children,
-  className,
-  id,
-  isFake = false,
-  level,
-  withMargin = true,
-}) => {
-  const TitleTag = isFake ? `p` : (`h${level}` as keyof JSX.IntrinsicElements);
+const Heading: ForwardRefRenderFunction<HTMLDivElement, HeadingProps> = (
+  {
+    alignment = 'left',
+    children,
+    className,
+    id,
+    isFake = false,
+    level,
+    withMargin = true,
+  },
+  ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement>
+) => {
+  const tagName = isFake ? 'p' : (`h${level}` as TitleTagProps['tagName']);
   const levelClass = `heading--${level}`;
+  const alignmentClass = `heading--${alignment}`;
   const marginClass = withMargin ? 'heading--margin' : 'heading--regular';
 
   return (
     <TitleTag
-      className={`${styles.heading} ${styles[levelClass]} ${styles[marginClass]} ${className}`}
+      tagName={tagName}
+      className={`${styles.heading} ${styles[levelClass]} ${styles[alignmentClass]} ${styles[marginClass]} ${className}`}
       id={id}
+      ref={ref}
     >
       {children}
     </TitleTag>
   );
 };
 
-export default Heading;
+export default forwardRef(Heading);
diff --git a/src/components/molecules/buttons/heading-button.module.scss b/src/components/molecules/buttons/heading-button.module.scss
index 9c278e4..3c69221 100644
--- a/src/components/molecules/buttons/heading-button.module.scss
+++ b/src/components/molecules/buttons/heading-button.module.scss
@@ -20,6 +20,14 @@
   border-bottom: fun.convert-px(2) solid var(--color-primary-dark);
   cursor: pointer;
 
+  .heading {
+    padding: var(--spacing-2xs) 0;
+    background: none;
+    font-size: var(--font-size-xl);
+    font-weight: 500;
+    text-align: left;
+  }
+
   &:hover,
   &:focus {
     .icon {
@@ -34,10 +42,3 @@
     }
   }
 }
-
-.heading {
-  padding: var(--spacing-2xs) 0;
-  background: none;
-  font-size: var(--font-size-xl);
-  text-align: left;
-}
diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx
index b0e1465..d1b5ed4 100644
--- a/src/components/molecules/buttons/heading-button.stories.tsx
+++ b/src/components/molecules/buttons/heading-button.stories.tsx
@@ -1,6 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import { IntlProvider } from 'react-intl';
 import HeadingButtonComponent from './heading-button';
 
 /**
@@ -10,6 +9,19 @@ export default {
   title: 'Molecules/Buttons/HeadingButton',
   component: HeadingButtonComponent,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the button.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     expanded: {
       control: {
         type: null,
@@ -53,13 +65,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof HeadingButtonComponent>;
 
 const Template: ComponentStory<typeof HeadingButtonComponent> = ({
@@ -79,55 +84,21 @@ const Template: ComponentStory<typeof HeadingButtonComponent> = ({
 };
 
 /**
- * Heading Button Stories - Level 1
+ * Heading Button Stories - Expanded
  */
-export const Level1 = Template.bind({});
-Level1.args = {
-  level: 1,
-  title: 'Your title',
-};
-
-/**
- * Heading Button Stories - Level 2
- */
-export const Level2 = Template.bind({});
-Level2.args = {
+export const Expanded = Template.bind({});
+Expanded.args = {
+  expanded: true,
   level: 2,
   title: 'Your title',
 };
 
 /**
- * Heading Button Stories - Level 3
+ * Heading Button Stories - Collapsed
  */
-export const Level3 = Template.bind({});
-Level3.args = {
-  level: 3,
-  title: 'Your title',
-};
-
-/**
- * Heading Button Stories - Level 4
- */
-export const Level4 = Template.bind({});
-Level4.args = {
-  level: 4,
-  title: 'Your title',
-};
-
-/**
- * Heading Button Stories - Level 5
- */
-export const Level5 = Template.bind({});
-Level5.args = {
-  level: 5,
-  title: 'Your title',
-};
-
-/**
- * Heading Button Stories - Level 6
- */
-export const Level6 = Template.bind({});
-Level6.args = {
-  level: 6,
+export const Collapsed = Template.bind({});
+Collapsed.args = {
+  expanded: false,
+  level: 2,
   title: 'Your title',
 };
diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx
index 5ff4ea4..b2c725f 100644
--- a/src/components/organisms/forms/comment-form.tsx
+++ b/src/components/organisms/forms/comment-form.tsx
@@ -1,6 +1,9 @@
 import Button from '@components/atoms/buttons/button';
 import Form, { type FormProps } from '@components/atoms/forms/form';
-import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
+import Heading, {
+  type HeadingProps,
+  type HeadingLevel,
+} from '@components/atoms/headings/heading';
 import Spinner from '@components/atoms/loaders/spinner';
 import LabelledField from '@components/molecules/forms/labelled-field';
 import { FC, ReactNode, useState } from 'react';
@@ -34,7 +37,11 @@ export type CommentFormProps = Pick<FormProps, 'className'> & {
    */
   title?: string;
   /**
-   * The title level.
+   * The form title alignment. Default: left.
+   */
+  titleAlignment?: HeadingProps['alignment'];
+  /**
+   * The title level. Default: 2.
    */
   titleLevel?: HeadingLevel;
 };
@@ -44,6 +51,7 @@ const CommentForm: FC<CommentFormProps> = ({
   parentId,
   saveComment,
   title,
+  titleAlignment,
   titleLevel = 2,
   ...props
 }) => {
@@ -117,7 +125,7 @@ const CommentForm: FC<CommentFormProps> = ({
       {...props}
     >
       {title && (
-        <Heading id={formId} level={titleLevel}>
+        <Heading id={formId} level={titleLevel} alignment={titleAlignment}>
           {title}
         </Heading>
       )}
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
index 7e86dd2..62dfc0e 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/layout/summary.module.scss
@@ -29,8 +29,11 @@
 
   &:hover {
     .icon {
-      transform: scaleX(1.4);
-      transform-origin: left;
+      --icon-size: #{fun.convert-px(35)};
+
+      :global {
+        animation: pulse 1.5s ease-in-out 0.2s infinite;
+      }
     }
   }
 }
diff --git a/src/components/templates/page/page-layout.module.scss b/src/components/templates/page/page-layout.module.scss
index 83e5a80..c6b4e8d 100644
--- a/src/components/templates/page/page-layout.module.scss
+++ b/src/components/templates/page/page-layout.module.scss
@@ -86,7 +86,14 @@
 
   &__section {
     grid-column: 2;
-    margin: var(--spacing-md) 0 0;
+
+    &:first-child {
+      margin: var(--spacing-md) 0 0;
+    }
+  }
+
+  &__no-comments {
+    text-align: center;
   }
 
   &__form {
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index f3f3ea8..2ff2084 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -1,6 +1,7 @@
 import Heading from '@components/atoms/headings/heading';
 import Notice, { type NoticeKind } from '@components/atoms/layout/notice';
 import Sidebar from '@components/atoms/layout/sidebar';
+import { MetaData } from '@components/molecules/layout/meta';
 import PageFooter, {
   type PageFooterProps,
 } from '@components/molecules/layout/page-footer';
@@ -118,10 +119,10 @@ const PageLayout: FC<PageLayoutProps> = ({
   const isMounted = useIsMounted(bodyRef);
 
   const hasComments = Array.isArray(comments) && comments.length > 0;
-  const hasCommentsSection = hasComments || allowComments;
-  const articleModifier = hasCommentsSection
-    ? 'article--has-comments'
-    : 'article--no-comments';
+  const articleModifier =
+    hasComments || allowComments
+      ? 'article--has-comments'
+      : 'article--no-comments';
 
   const [status, setStatus] = useState<NoticeKind>('info');
   const [statusMessage, setStatusMessage] = useState<string>('');
@@ -175,6 +176,15 @@ const PageLayout: FC<PageLayoutProps> = ({
     }
   };
 
+  /**
+   * Check if meta properties are defined.
+   *
+   * @param {MetaData} meta - The metadata.
+   */
+  const hasMeta = (meta: MetaData) => {
+    return Object.values(meta).every((value) => value === null);
+  };
+
   return (
     <Layout
       breadcrumbSchema={breadcrumbSchema}
@@ -218,7 +228,9 @@ const PageLayout: FC<PageLayoutProps> = ({
           {children}
         </div>
       )}
-      <PageFooter meta={footerMeta} className={styles.footer} />
+      {footerMeta && hasMeta(footerMeta) && (
+        <PageFooter meta={footerMeta} className={styles.footer} />
+      )}
       <Sidebar
         className={`${styles.sidebar} ${styles['sidebar--last']}`}
         aria-label={intl.formatMessage({
@@ -229,45 +241,54 @@ const PageLayout: FC<PageLayoutProps> = ({
       >
         {widgets}
       </Sidebar>
-      {hasCommentsSection && (
-        <div className={styles.comments}>
-          {hasComments && (
-            <section className={styles.comments__section}>
-              <Heading level={2}>{commentsTitle}</Heading>
+      {allowComments && (
+        <div className={styles.comments} id="comments">
+          <section className={styles.comments__section}>
+            <Heading level={2} alignment="center">
+              {commentsTitle}
+            </Heading>
+            {hasComments ? (
               <CommentsList
                 comments={comments}
                 depth={1}
                 Notice={
-                  isReplyRef.current === true ? (
+                  isReplyRef.current === true && (
                     <Notice
                       kind={status}
                       message={statusMessage}
                       className={styles.notice}
                     />
-                  ) : undefined
+                  )
                 }
                 saveComment={saveComment}
               />
-            </section>
-          )}
-          {allowComments && (
-            <section className={styles.comments__section}>
-              <CommentForm
-                className={styles.comments__form}
-                saveComment={saveComment}
-                title={commentFormTitle}
-                Notice={
-                  isReplyRef.current === false ? (
-                    <Notice
-                      kind={status}
-                      message={statusMessage}
-                      className={styles.notice}
-                    />
-                  ) : undefined
-                }
-              />
-            </section>
-          )}
+            ) : (
+              <p className={styles['comments__no-comments']}>
+                {intl.formatMessage({
+                  defaultMessage: 'No comments.',
+                  id: 'sBwfCy',
+                  description: 'PageLayout: no comments text',
+                })}
+              </p>
+            )}
+          </section>
+          <section className={styles.comments__section}>
+            <CommentForm
+              className={styles.comments__form}
+              saveComment={saveComment}
+              title={commentFormTitle}
+              titleAlignment="center"
+              Notice={
+                isReplyRef.current === false && (
+                  <Notice
+                    kind={status}
+                    message={statusMessage}
+                    className={styles.notice}
+                  />
+                )
+              }
+            />
+          </section>
         </div>
       )}
     </Layout>
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 995e3a9..a0fb7fc 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -15,7 +15,10 @@ import { type Article, type Comment } from '@ts/types/app';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
 import useAddPrismClassAttr from '@utils/hooks/use-add-prism-class-attr';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
-import usePrismPlugins, { PrismPlugin } from '@utils/hooks/use-prism-plugins';
+import usePrismPlugins, {
+  type PrismPlugin,
+} from '@utils/hooks/use-prism-plugins';
+import useReadingTime from '@utils/hooks/use-reading-time';
 import useSettings from '@utils/hooks/use-settings';
 import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
@@ -38,7 +41,16 @@ type ArticlePageProps = {
  */
 const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
   const { content, id, intro, meta, slug, title } = post;
-  const { author, commentsCount, cover, dates, seo, thematics, topics } = meta;
+  const {
+    author,
+    commentsCount,
+    cover,
+    dates,
+    seo,
+    thematics,
+    topics,
+    wordsCount,
+  } = meta;
   const { data } = useSWR(() => id, getPostComments, {
     fallbackData: comments,
   });
@@ -46,11 +58,13 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
     title,
     url: `/article/${slug}`,
   });
+  const readingTime = useReadingTime(wordsCount || 0, true);
 
   const headerMeta: PageLayoutProps['headerMeta'] = {
     author: author?.name,
     publication: { date: dates.publication },
     update: dates.update ? { date: dates.update } : undefined,
+    readingTime,
     thematics:
       thematics &&
       thematics.map((thematic) => (
diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss
index a42c633..04acad9 100644
--- a/src/styles/pages/article.module.scss
+++ b/src/styles/pages/article.module.scss
@@ -31,6 +31,7 @@
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       width: min-content;
+      gap: var(--spacing-2xs);
     }
   }
 }
-- 
cgit v1.2.3