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, 225 deletions

diff --git a/src/components/PostPreview/PostPreview.module.scss b/src/components/PostPreview/PostPreview.module.scss
deleted file mode 100644
index c30ab75..0000000
--- a/src/components/PostPreview/PostPreview.module.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  --icon-size: #{fun.convert-px(20)};
-
-  padding: var(--spacing-2xs) 0 var(--spacing-lg);
-  transition: all 0.3s ease-in-out 0s, border 0s;
-
-  &:hover {
-    --icon-size: #{fun.convert-px(25)};
-
-    a {
-      > svg {
-        :global {
-          animation: pulse 1.5s ease-in-out 0.5s infinite;
-        }
-      }
-
-      &:hover {
-        > svg {
-          animation: none;
-        }
-      }
-    }
-  }
-
-  &:active {
-    --icon-size: 0;
-  }
-}
-
-.cover {
-  width: auto;
-  height: fun.convert-px(100);
-  margin: 0 auto var(--spacing-sm);
-  position: relative;
-  border: fun.convert-px(1) solid var(--color-border);
-}
-
-h2.title {
-  background: none;
-  text-shadow: none;
-}
-
-@include mix.media("screen") {
-  @include mix.dimensions("xs") {
-    .wrapper {
-      margin: 0;
-      padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
-      border: fun.convert-px(1) solid var(--color-primary-dark);
-      border-radius: fun.convert-px(3);
-      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
-          var(--color-shadow),
-        fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) fun.convert-px(-1)
-          var(--color-shadow-light),
-        fun.convert-px(5) fun.convert-px(5) fun.convert-px(7) fun.convert-px(-1)
-          var(--color-shadow-light);
-    }
-
-    .read-more {
-      font-size: var(--font-size-sm);
-    }
-  }
-
-  @include mix.dimensions("sm") {
-    .wrapper {
-      display: grid;
-      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
-      grid-template-rows: repeat(3, max-content);
-      column-gap: var(--spacing-md);
-    }
-
-    .cover {
-      grid-column: 2;
-      grid-row: 1;
-      margin: 0 0 var(--spacing-sm);
-    }
-
-    .header {
-      grid-column: 1;
-      grid-row: 1;
-      align-self: center;
-    }
-
-    .meta {
-      grid-column: 2;
-      grid-row: 2 / 4;
-    }
-
-    .body {
-      grid-column: 1;
-      grid-row: 2;
-    }
-
-    .footer {
-      grid-column: 1;
-      grid-row: 3;
-    }
-
-    .read-more {
-      margin: 0;
-    }
-  }
-}
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
deleted file mode 100644
index 0b9e332..0000000
--- a/src/components/PostPreview/PostPreview.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { ButtonLink } from '@components/Buttons';
-import { ArrowIcon } from '@components/Icons';
-import PostMeta from '@components/PostMeta/PostMeta';
-import { TitleLevel } from '@ts/types/app';
-import { ArticleMeta, ArticlePreview } from '@ts/types/articles';
-import { settings } from '@utils/config';
-import Image from 'next/image';
-import Link from 'next/link';
-import { FormattedMessage } from 'react-intl';
-import { BlogPosting, WithContext } from 'schema-dts';
-import styles from './PostPreview.module.scss';
-import Script from 'next/script';
-
-const PostPreview = ({
-  post,
-  titleLevel,
-}: {
-  post: ArticlePreview;
-  titleLevel: TitleLevel;
-}) => {
-  const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
-  const {
-    commentCount,
-    dates,
-    featuredImage,
-    info,
-    intro,
-    slug,
-    thematics,
-    title,
-    topics,
-  } = post;
-
-  const meta: ArticleMeta = {
-    commentCount: commentCount ? commentCount : 0,
-    dates: dates,
-    readingTime: info.readingTime,
-    thematics: thematics,
-    topics: topics,
-    wordsCount: info.wordsCount,
-  };
-
-  const publicationDate = new Date(dates.publication);
-  const updateDate = new Date(dates.update);
-
-  const schemaJsonLd: WithContext<BlogPosting> = {
-    '@context': 'https://schema.org',
-    '@type': 'BlogPosting',
-    name: title,
-    description: intro,
-    articleBody: intro,
-    author: { '@id': `${settings.url}/#branding` },
-    commentCount: commentCount ? commentCount : 0,
-    copyrightYear: publicationDate.getFullYear(),
-    creator: { '@id': `${settings.url}/#branding` },
-    dateCreated: publicationDate.toISOString(),
-    dateModified: updateDate.toISOString(),
-    datePublished: publicationDate.toISOString(),
-    editor: { '@id': `${settings.url}/#branding` },
-    headline: title,
-    image: featuredImage?.sourceUrl,
-    inLanguage: settings.locales.defaultLocale,
-    isBasedOn: `${settings.url}/article/${slug}`,
-    isPartOf: { '@id': `${settings.url}/blog` },
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    thumbnailUrl: featuredImage?.sourceUrl,
-  };
-
-  return (
-    <>
-      <Script
-        id="schema-post-preview"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <article className={styles.wrapper}>
-        {featuredImage && Object.keys(featuredImage).length > 0 && (
-          <div className={styles.cover}>
-            <Image
-              src={featuredImage.sourceUrl}
-              alt={featuredImage.altText}
-              layout="fill"
-              objectFit="contain"
-            />
-          </div>
-        )}
-        <header className={styles.header}>
-          <TitleTag className={styles.title}>
-            <Link href={`/article/${slug}`}>
-              <a>{title}</a>
-            </Link>
-          </TitleTag>
-        </header>
-        <div
-          className={styles.body}
-          dangerouslySetInnerHTML={{ __html: intro }}
-        ></div>
-        <footer className={styles.footer}>
-          <ButtonLink target={`/article/${slug}`} position="left">
-            <FormattedMessage
-              defaultMessage="Read more<a11y> about {title}</a11y>"
-              description="PostPreview: read more link"
-              id="bkbrN7"
-              values={{
-                title,
-                a11y: (chunks: string) => (
-                  <span className="screen-reader-text">{chunks}</span>
-                ),
-              }}
-            />
-            <ArrowIcon />
-          </ButtonLink>
-        </footer>
-        <PostMeta meta={meta} />
-      </article>
-    </>
-  );
-};
-
-export default PostPreview;