diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-29 12:13:34 +0200 | 
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-29 18:30:05 +0200 | 
| commit | 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch) | |
| tree | bfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/Widgets/RecentPosts | |
| parent | 5324664e87bedfaa01ba62c0c847ef5b861e69b3 (diff) | |
chore: remove old pages, components, helpers and types
Since I'm using new components, I will also rewrite the GraphQL queries
so it is easier to start from scratch.
Diffstat (limited to 'src/components/Widgets/RecentPosts')
| -rw-r--r-- | src/components/Widgets/RecentPosts/RecentPosts.module.scss | 109 | ||||
| -rw-r--r-- | src/components/Widgets/RecentPosts/RecentPosts.tsx | 78 | 
2 files changed, 0 insertions, 187 deletions
| diff --git a/src/components/Widgets/RecentPosts/RecentPosts.module.scss b/src/components/Widgets/RecentPosts/RecentPosts.module.scss deleted file mode 100644 index 1b85265..0000000 --- a/src/components/Widgets/RecentPosts/RecentPosts.module.scss +++ /dev/null @@ -1,109 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/placeholders"; - -.list { -  --items: 3; -  --items-size: 25ch; - -  @extend %reset-list; - -  display: grid; -  grid-template-columns: repeat( -    auto-fit, -    min(calc(100vw - (var(--spacing-md) * 2)), var(--items-size)) -  ); -  justify-content: center; -  gap: var(--spacing-sm); -  width: min( -    calc(100vw - (var(--spacing-md) * 2)), -    calc( -      (var(--items-size) * var(--items)) + -        (var(--spacing-sm) * (var(--items) - 1)) -    ) -  ); -  margin-bottom: var(--spacing-md); -} - -.item { -  text-align: center; -} - -.article { -  display: flex; -  flex-flow: column nowrap; -  height: 100%; -  padding: 0 0 var(--spacing-md); -} - -.title { -  flex: 1; -  margin: var(--spacing-sm) 0; -  padding: 0 var(--spacing-md); -  text-decoration: underline solid transparent 0; -  transition: all 0.3s linear 0s; -} - -.link { -  display: block; -  height: 100%; -  background: var(--color-bg); -  color: inherit; -  text-decoration: none; -  border: fun.convert-px(3) solid var(--color-primary); -  border-radius: fun.convert-px(5); -  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) -      var(--color-shadow), -    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) -      var(--color-shadow), -    fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) -      var(--color-shadow); -  transition: all 0.3s ease-in-out 0s; - -  &:hover, -  &:focus, -  &:active { -    color: inherit; -  } - -  &:hover, -  &:focus { -    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) -        var(--color-shadow-light), -      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) -        var(--color-shadow-light), -      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) -        var(--color-shadow-light), -      fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3) -        var(--color-shadow-light); -    transform: scale(1.05); -  } - -  &:focus { -    .title { -      text-decoration: underline solid var(--color-primary) 0.3ex; -    } -  } - -  &:active { -    box-shadow: 0 0 0 0 var(--color-shadow); -    transform: scale(0.95); - -    .title { -      text-decoration: none; -    } -  } -} - -.cover { -  width: 100%; -  height: clamp(fun.convert-px(100), 20vw, fun.convert-px(150)); -  position: relative; -  border: fun.convert-px(1) solid var(--color-border); -} - -.meta { -  display: block; -  margin: 0; -  padding: 0 var(--spacing-md); -  font-size: var(--font-size-sm); -} diff --git a/src/components/Widgets/RecentPosts/RecentPosts.tsx b/src/components/Widgets/RecentPosts/RecentPosts.tsx deleted file mode 100644 index 11d8558..0000000 --- a/src/components/Widgets/RecentPosts/RecentPosts.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import Spinner from '@components/Spinner/Spinner'; -import { getPublishedPosts } from '@services/graphql/queries'; -import { ArticlePreview } from '@ts/types/articles'; -import { PostsList } from '@ts/types/blog'; -import { settings } from '@utils/config'; -import { getFormattedDate } from '@utils/helpers/format'; -import Image from 'next/image'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { useIntl } from 'react-intl'; -import useSWR from 'swr'; -import styles from './RecentPosts.module.scss'; - -const RecentPosts = ({ posts }: { posts: PostsList }) => { -  const intl = useIntl(); -  const { data, error } = useSWR<PostsList>( -    '/recent-posts', -    () => getPublishedPosts({ first: 3 }), -    { fallbackData: posts } -  ); -  const router = useRouter(); -  const locale = router.locale ? router.locale : settings.locales.defaultLocale; - -  const getPost = (post: ArticlePreview) => { -    return ( -      <li key={post.id} className={styles.item}> -        <Link href={`/article/${post.slug}`}> -          <a className={styles.link}> -            <article className={styles.article}> -              {post.featuredImage && -                Object.keys(post.featuredImage).length > 0 && ( -                  <div className={styles.cover}> -                    <Image -                      src={post.featuredImage.sourceUrl} -                      alt={post.featuredImage.altText} -                      layout="fill" -                      objectFit="contain" -                    /> -                  </div> -                )} -              <h3 className={styles.title}>{post.title}</h3> -              <dl className={styles.meta}> -                <dt> -                  {intl.formatMessage({ -                    defaultMessage: 'Published on:', -                    description: 'RecentPosts: publication date label', -                    id: '1h+N2z', -                  })} -                </dt> -                <dd> -                  <time dateTime={post.dates.publication}> -                    {getFormattedDate(post.dates.publication, locale)} -                  </time> -                </dd> -              </dl> -            </article> -          </a> -        </Link> -      </li> -    ); -  }; - -  const getPostsItems = () => { -    if (error) -      return intl.formatMessage({ -        defaultMessage: 'Failed to load.', -        description: 'RecentPosts: failed to load text', -        id: 'iyEh0R', -      }); -    if (!data) return <Spinner />; - -    return data.posts.map((post) => getPost(post)); -  }; - -  return <ul className={styles.list}>{getPostsItems()}</ul>; -}; - -export default RecentPosts; | 
