refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 221 insertions, 106 deletions

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ca0a809..6e9c4c6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,39 +1,59 @@
 import FeedIcon from '@assets/images/icon-feed.svg';
-import { ButtonLink } from '@components/Buttons';
-import { ContactIcon } from '@components/Icons';
-import Layout from '@components/Layouts/Layout';
-import { ResponsiveImage } from '@components/MDX';
-import { RecentPosts } from '@components/Widgets';
+import ButtonLink from '@components/atoms/buttons/button-link';
+import Envelop from '@components/atoms/icons/envelop';
+import Column, { type ColumnProps } from '@components/atoms/layout/column';
+import Section, { type SectionProps } from '@components/atoms/layout/section';
+import List, { type ListItem } from '@components/atoms/lists/list';
+import ResponsiveImage, {
+  type ResponsiveImageProps,
+} from '@components/molecules/images/responsive-image';
+import Columns, {
+  type ColumnsProps,
+} from '@components/molecules/layout/columns';
+import CardsList, {
+  type CardsListItem,
+} from '@components/organisms/layout/cards-list';
+import { getLayout } from '@components/templates/layout/layout';
 import HomePageContent from '@content/pages/homepage.mdx';
-import { getPublishedPosts } from '@services/graphql/queries';
-import styles from '@styles/pages/Home.module.scss';
-import { NextPageWithLayout, ResponsiveImageProps } from '@ts/types/app';
-import { PostsList } from '@ts/types/blog';
-import { settings } from '@utils/config';
-import { loadTranslation } from '@utils/helpers/i18n';
+import { getArticlesCard } from '@services/graphql/articles';
+import styles from '@styles/pages/home.module.scss';
+import { type ArticleCard, type NextPageWithLayout } from '@ts/types/app';
+import { loadTranslation, type Messages } from '@utils/helpers/i18n';
+import { getSchemaJson, getWebPageSchema } from '@utils/helpers/schema-org';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
+import useSettings from '@utils/hooks/use-settings';
 import { NestedMDXComponents } from 'mdx/types';
-import { GetStaticProps, GetStaticPropsContext } from 'next';
+import { GetStaticProps } from 'next';
 import Head from 'next/head';
 import Script from 'next/script';
-import type { ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { useIntl } from 'react-intl';
-import { Graph, WebPage } from 'schema-dts';
 
-type HomePageProps = {
-  recentPosts: PostsList;
+type HomeProps = {
+  recentPosts: ArticleCard[];
+  translation?: Messages;
 };
 
-const Home: NextPageWithLayout<HomePageProps> = ({
-  recentPosts,
-}: {
-  recentPosts: PostsList;
-}) => {
+/**
+ * Home page.
+ */
+const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
   const intl = useIntl();
+  const { schema: breadcrumbSchema } = useBreadcrumb({
+    title: '',
+    url: `/`,
+  });
 
-  const CodingLinks = () => {
-    return (
-      <ul className={styles['links-list']}>
-        <li>
+  /**
+   * Retrieve a list of coding links.
+   *
+   * @returns {JSX.Element} - A list of links.
+   */
+  const CodingLinks = (): JSX.Element => {
+    const links: ListItem[] = [
+      {
+        id: 'web-development',
+        value: (
           <ButtonLink target="/thematique/developpement-web">
             {intl.formatMessage({
               defaultMessage: 'Web development',
@@ -41,8 +61,11 @@ const Home: NextPageWithLayout<HomePageProps> = ({
               id: 'vkF/RP',
             })}
           </ButtonLink>
-        </li>
-        <li>
+        ),
+      },
+      {
+        id: 'projects',
+        value: (
           <ButtonLink target="/projets">
             {intl.formatMessage({
               defaultMessage: 'Projects',
@@ -50,38 +73,65 @@ const Home: NextPageWithLayout<HomePageProps> = ({
               id: 'N44SOc',
             })}
           </ButtonLink>
-        </li>
-      </ul>
-    );
+        ),
+      },
+    ];
+
+    return <List kind="flex" items={links} className={styles.list} />;
   };
 
-  const ColdarkRepos = () => {
-    return (
-      <ul className={styles['links-list']}>
-        <li>
+  /**
+   * Retrieve a list of Coldark repositories.
+   *
+   * @returns {JSX.Element} - A list of links.
+   */
+  const ColdarkRepos = (): JSX.Element => {
+    const links: ListItem[] = [
+      {
+        id: 'coldark-github',
+        value: (
           <ButtonLink
             target="https://github.com/ArmandPhilippot/coldark"
-            isExternal={true}
+            external={true}
           >
-            Github
+            {intl.formatMessage({
+              defaultMessage: 'Github',
+              description: 'HomePage: Github link',
+              id: '3f3PzH',
+            })}
           </ButtonLink>
-        </li>
-        <li>
+        ),
+      },
+      {
+        id: 'coldark-gitlab',
+        value: (
           <ButtonLink
             target="https://gitlab.com/ArmandPhilippot/coldark"
-            isExternal={true}
+            external={true}
           >
-            Gitlab
+            {intl.formatMessage({
+              defaultMessage: 'Gitlab',
+              description: 'HomePage: Gitlab link',
+              id: '7AnwZ7',
+            })}
           </ButtonLink>
-        </li>
-      </ul>
-    );
+        ),
+      },
+    ];
+
+    return <List kind="flex" items={links} className={styles.list} />;
   };
 
-  const LibreLinks = () => {
-    return (
-      <ul className={styles['links-list']}>
-        <li>
+  /**
+   * Retrieve a list of links related to Free thematic.
+   *
+   * @returns {JSX.Element} - A list of links.
+   */
+  const LibreLinks = (): JSX.Element => {
+    const links: ListItem[] = [
+      {
+        id: 'free',
+        value: (
           <ButtonLink target="/thematique/libre">
             {intl.formatMessage({
               defaultMessage: 'Free',
@@ -89,8 +139,11 @@ const Home: NextPageWithLayout<HomePageProps> = ({
               id: 'w8GrOf',
             })}
           </ButtonLink>
-        </li>
-        <li>
+        ),
+      },
+      {
+        id: 'linux',
+        value: (
           <ButtonLink target="/thematique/linux">
             {intl.formatMessage({
               defaultMessage: 'Linux',
@@ -98,15 +151,23 @@ const Home: NextPageWithLayout<HomePageProps> = ({
               id: 'jASD7k',
             })}
           </ButtonLink>
-        </li>
-      </ul>
-    );
+        ),
+      },
+    ];
+
+    return <List kind="flex" items={links} className={styles.list} />;
   };
 
-  const ShaarliLink = () => {
-    return (
-      <ul className={styles['links-list']}>
-        <li>
+  /**
+   * Retrieve the Shaarli link.
+   *
+   * @returns {JSX.Element} - A list of links
+   */
+  const ShaarliLink = (): JSX.Element => {
+    const links: ListItem[] = [
+      {
+        id: 'shaarli',
+        value: (
           <ButtonLink target="https://shaarli.armandphilippot.com/">
             {intl.formatMessage({
               defaultMessage: 'Shaarli',
@@ -114,59 +175,127 @@ const Home: NextPageWithLayout<HomePageProps> = ({
               id: 'i5L19t',
             })}
           </ButtonLink>
-        </li>
-      </ul>
-    );
+        ),
+      },
+    ];
+
+    return <List kind="flex" items={links} className={styles.list} />;
   };
 
-  const MoreLinks = () => {
-    return (
-      <ul className={styles['links-list']}>
-        <li>
+  /**
+   * Retrieve the additional links.
+   *
+   * @returns {JSX.Element} - A list of links.
+   */
+  const MoreLinks = (): JSX.Element => {
+    const links: ListItem[] = [
+      {
+        id: 'contact-me',
+        value: (
           <ButtonLink target="/contact">
-            <ContactIcon />
+            <Envelop className={styles.icon} />
             {intl.formatMessage({
               defaultMessage: 'Contact me',
               description: 'HomePage: contact button text',
               id: 'sO/Iwj',
             })}
           </ButtonLink>
-        </li>
-        <li>
+        ),
+      },
+      {
+        id: 'rss-feed',
+        value: (
           <ButtonLink target="/feed">
-            <FeedIcon className={styles['icon--feed']} />
+            <FeedIcon className={`${styles.icon} ${styles['icon--feed']}`} />
             {intl.formatMessage({
               defaultMessage: 'Subscribe',
               description: 'HomePage: RSS feed subscription text',
               id: 'T4YA64',
             })}
           </ButtonLink>
-        </li>
-      </ul>
+        ),
+      },
+    ];
+
+    return <List kind="flex" items={links} className={styles.list} />;
+  };
+
+  /**
+   * Get a cards list of recent posts.
+   *
+   * @returns {JSX.Element} - The cards list.
+   */
+  const getRecentPosts = (): JSX.Element => {
+    const posts: CardsListItem[] = recentPosts.map((post) => {
+      return {
+        cover: post.cover,
+        id: post.slug,
+        meta: { publication: { date: post.dates.publication } },
+        title: post.title,
+        url: `/article/${post.slug}`,
+      };
+    });
+
+    return (
+      <CardsList
+        items={posts}
+        titleLevel={3}
+        className={`${styles.list} ${styles['list--cards']}`}
+      />
     );
   };
 
-  const getRecentPosts = () => {
-    return <RecentPosts posts={recentPosts} />;
+  /**
+   * Create the page sections.
+   *
+   * @param {object} obj - An object containing the section body.
+   * @param {ReactElement[]} obj.children - The section body.
+   * @returns {JSX.Element} A section element.
+   */
+  const getSection = ({
+    children,
+    variant,
+  }: {
+    children: ReactElement[];
+    variant: SectionProps['variant'];
+  }): JSX.Element => {
+    const [headingEl, ...content] = children;
+    const title = headingEl.props.children;
+
+    return (
+      <Section
+        title={title}
+        content={content}
+        variant={variant}
+        className={styles.section}
+      />
+    );
   };
 
   const components: NestedMDXComponents = {
     CodingLinks: CodingLinks,
     ColdarkRepos: ColdarkRepos,
-    Image: (props: ResponsiveImageProps) => ResponsiveImage({ ...props }),
+    Column: (props: ColumnProps) => <Column {...props} />,
+    Columns: (props: ColumnsProps) => (
+      <Columns className={styles.columns} {...props} />
+    ),
+    Image: (props: ResponsiveImageProps) => <ResponsiveImage {...props} />,
     LibreLinks: LibreLinks,
     MoreLinks: MoreLinks,
     RecentPosts: getRecentPosts,
+    Section: getSection,
     ShaarliLink: ShaarliLink,
   };
 
+  const { website } = useSettings();
+
   const pageTitle = intl.formatMessage(
     {
       defaultMessage: '{websiteName} | Front-end developer: WordPress/React',
       description: 'HomePage: SEO - Page title',
       id: 'PXp2hv',
     },
-    { websiteName: settings.name }
+    { websiteName: website.name }
   );
   const pageDescription = intl.formatMessage(
     {
@@ -175,35 +304,22 @@ const Home: NextPageWithLayout<HomePageProps> = ({
       description: 'HomePage: SEO - Meta description',
       id: 'tMuNTy',
     },
-    { websiteName: settings.name }
+    { websiteName: website.name }
   );
-
-  const webpageSchema: WebPage = {
-    '@id': `${settings.url}/#home`,
-    '@type': 'WebPage',
-    name: pageTitle,
+  const webpageSchema = getWebPageSchema({
     description: pageDescription,
-    author: { '@id': `${settings.url}/#branding` },
-    creator: { '@id': `${settings.url}/#branding` },
-    editor: { '@id': `${settings.url}/#branding` },
-    inLanguage: settings.locales.defaultLocale,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${settings.url}`,
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema],
-  };
+    locale: website.locales.default,
+    slug: '',
+    title: pageTitle,
+  });
+  const schemaJsonLd = getSchemaJson([webpageSchema]);
 
   return (
     <>
       <Head>
         <title>{pageTitle}</title>
         <meta name="description" content={pageDescription} />
-        <meta property="og:type" content="website" />
-        <meta property="og:url" content={`${settings.url}`} />
+        <meta property="og:url" content={website.url} />
         <meta property="og:title" content={pageTitle} />
         <meta property="og:description" content={pageDescription} />
       </Head>
@@ -212,23 +328,22 @@ const Home: NextPageWithLayout<HomePageProps> = ({
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <div id="home">
-        <HomePageContent components={components} />
-      </div>
+      <Script
+        id="schema-breadcrumb"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+      <HomePageContent components={components} />
     </>
   );
 };
 
-Home.getLayout = function getLayout(page: ReactElement) {
-  return <Layout isHome={true}>{page}</Layout>;
-};
+HomePage.getLayout = (page) =>
+  getLayout(page, { isHome: true, withExtraPadding: false });
 
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const { locale } = context;
+export const getStaticProps: GetStaticProps<HomeProps> = async ({ locale }) => {
   const translation = await loadTranslation(locale);
-  const recentPosts = await getPublishedPosts({ first: 3 });
+  const recentPosts = await getArticlesCard({ first: 3 });
 
   return {
     props: {
@@ -238,4 +353,4 @@ export const getStaticProps: GetStaticProps = async (
   };
 };
 
-export default Home;
+export default HomePage;