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.

2 files changed, 0 insertions, 184 deletions

diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss
deleted file mode 100644
index b8fadf8..0000000
--- a/src/components/Breadcrumb/Breadcrumb.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.wrapper {
-  composes: grid from "@styles/layout/_grid.scss";
-  padding: var(--spacing-md) 0;
-}
-
-.list {
-  @extend %reset-ordered-list;
-
-  grid-column: 2;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  gap: var(--spacing-2xs);
-  margin: 0;
-  font-size: var(--font-size-sm);
-}
-
-.item {
-  &:not(:last-of-type) {
-    &::after {
-      content: ">";
-      margin-left: var(--spacing-2xs);
-    }
-  }
-}
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
deleted file mode 100644
index a7b945a..0000000
--- a/src/components/Breadcrumb/Breadcrumb.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { settings } from '@utils/config';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useIntl } from 'react-intl';
-import { BreadcrumbList, WithContext } from 'schema-dts';
-import styles from './Breadcrumb.module.scss';
-
-const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => {
-  const intl = useIntl();
-  const router = useRouter();
-
-  const isHome = router.pathname === '/';
-  const isArticle = router.pathname.includes('/article/');
-  const isProject = router.pathname.includes('/projet/');
-  const isSubject = router.pathname.includes('/sujet/');
-  const isThematic = router.pathname.includes('/thematique/');
-
-  const getItems = () => {
-    return (
-      <>
-        <li className={styles.item}>
-          <Link href="/">
-            <a>
-              {intl.formatMessage({
-                defaultMessage: 'Home',
-                description: 'Breadcrumb: Home item',
-                id: 'Enij19',
-              })}
-            </a>
-          </Link>
-        </li>
-        {(isArticle || isThematic || isSubject) && (
-          <>
-            <li className={styles.item}>
-              <Link href="/blog">
-                <a>
-                  {intl.formatMessage({
-                    defaultMessage: 'Blog',
-                    description: 'Breadcrumb: Blog item',
-                    id: 'z0ic9c',
-                  })}
-                </a>
-              </Link>
-            </li>
-          </>
-        )}
-        {isProject && (
-          <>
-            <li className={styles.item}>
-              <Link href="/projets">
-                <a>
-                  {intl.formatMessage({
-                    defaultMessage: 'Projects',
-                    description: 'Breadcrumb: Projects item',
-                    id: 'Igx3qp',
-                  })}
-                </a>
-              </Link>
-            </li>
-          </>
-        )}
-        <li className="screen-reader-text">{pageTitle}</li>
-      </>
-    );
-  };
-
-  const getElementsSchema = () => {
-    const items = [];
-    const homepage: BreadcrumbList['itemListElement'] = {
-      '@type': 'ListItem',
-      position: 1,
-      name: intl.formatMessage({
-        defaultMessage: 'Home',
-        description: 'Breadcrumb: Home item',
-        id: 'Enij19',
-      }),
-      item: settings.url,
-    };
-
-    items.push(homepage);
-
-    if (isArticle || isThematic || isSubject) {
-      const blog: BreadcrumbList['itemListElement'] = {
-        '@type': 'ListItem',
-        position: 2,
-        name: intl.formatMessage({
-          defaultMessage: 'Blog',
-          description: 'Breadcrumb: Blog item',
-          id: 'z0ic9c',
-        }),
-        item: `${settings.url}/blog`,
-      };
-
-      items.push(blog);
-    }
-
-    if (isProject) {
-      const blog: BreadcrumbList['itemListElement'] = {
-        '@type': 'ListItem',
-        position: 2,
-        name: intl.formatMessage({
-          defaultMessage: 'Projects',
-          description: 'Breadcrumb: Projects item',
-          id: 'Igx3qp',
-        }),
-        item: `${settings.url}/projets`,
-      };
-
-      items.push(blog);
-    }
-
-    const currentPage: BreadcrumbList['itemListElement'] = {
-      '@type': 'ListItem',
-      position: items.length + 1,
-      name: pageTitle,
-      item: `${settings.url}${router.asPath}`,
-    };
-
-    items.push(currentPage);
-
-    return items;
-  };
-
-  const schemaJsonLd: WithContext<BreadcrumbList> = {
-    '@context': 'https://schema.org',
-    '@type': 'BreadcrumbList',
-    '@id': `${settings.url}/#breadcrumb`,
-    itemListElement: getElementsSchema(),
-  };
-
-  return (
-    <>
-      <Script
-        id="schema-breadcrumb"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      {!isHome && (
-        <nav id="breadcrumb" className={styles.wrapper}>
-          <span className="screen-reader-text">
-            {intl.formatMessage({
-              defaultMessage: 'You are here:',
-              description: 'Breadcrumb: You are here prefix',
-              id: '16zl9Z',
-            })}
-          </span>
-          <ol className={styles.list}>{getItems()}</ol>
-        </nav>
-      )}
-    </>
-  );
-};
-
-export default Breadcrumb;