From 04a1ceb257311a98fffc4b18679f73789b920e09 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 3 Jan 2022 12:24:04 +0100 Subject: chore: display subjects list under articles --- src/components/PostFooter/PostFooter.module.scss | 45 ++++++++++++++++++++++++ src/components/PostFooter/PostFooter.tsx | 18 ++++++++-- src/ts/types/articles.ts | 13 +++++-- src/ts/types/taxonomies.ts | 4 +++ src/utils/helpers/format.ts | 20 ++++++++++- 5 files changed, 94 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/components/PostFooter/PostFooter.module.scss b/src/components/PostFooter/PostFooter.module.scss index e80f5ed..a34269f 100644 --- a/src/components/PostFooter/PostFooter.module.scss +++ b/src/components/PostFooter/PostFooter.module.scss @@ -1,5 +1,50 @@ +@use "@styles/abstracts/functions" as fun; @use "@styles/abstracts/placeholders"; +.meta { + flex-flow: column wrap; +} + .list { @extend %flex-list; } + +.item { + &:not(:last-child) { + margin-right: var(--spacing-2xs); + } +} + +.link { + display: flex; + align-items: center; + gap: var(--spacing-2xs); + padding: fun.convert-px(3) var(--spacing-xs); + position: relative; + background: linear-gradient( + to right, + var(--color-primary) 50%, + var(--color-bg) 50% + ) + 100% 0 / 210% 100%; + border: fun.convert-px(2) solid var(--color-primary); + border-radius: fun.convert-px(5); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) 0 + var(--color-shadow-light); + font-weight: 600; + text-decoration: none; + transition: all 0.5s ease-in-out 0s, color 0.5s ease-in-out 0s; + + &:hover, + &:focus { + background-position: 0 0; + color: var(--color-fg-inverted); + transition: all 0.4s ease-in-out 0s, color 0.3s ease-in-out 0.1s; + } + + &:active { + background-position: 100% 0; + border-color: var(--color-primary-dark); + color: var(--color-primary-dark); + } +} diff --git a/src/components/PostFooter/PostFooter.tsx b/src/components/PostFooter/PostFooter.tsx index 8c09d69..fe933d7 100644 --- a/src/components/PostFooter/PostFooter.tsx +++ b/src/components/PostFooter/PostFooter.tsx @@ -1,5 +1,6 @@ import { t } from '@lingui/macro'; import { SubjectPreview } from '@ts/types/taxonomies'; +import Image from 'next/image'; import Link from 'next/link'; import styles from './PostFooter.module.scss'; @@ -7,9 +8,20 @@ const PostFooter = ({ subjects }: { subjects: SubjectPreview[] }) => { const getSubjects = () => { return subjects.map((subject) => { return ( -
  • +
  • - {subject.title} + + {subject.featuredImage && ( + {subject.featuredImage.altText} + )} + {subject.title} +
    • ); @@ -21,7 +33,7 @@ const PostFooter = ({ subjects }: { subjects: SubjectPreview[] }) => { {subjects.length > 0 && ( <>
    -
    {t`Subjects:`}
    +
    {t`Read more articles about:`}
      {getSubjects()}
    diff --git a/src/ts/types/articles.ts b/src/ts/types/articles.ts index e6a40ef..dc5bbe4 100644 --- a/src/ts/types/articles.ts +++ b/src/ts/types/articles.ts @@ -2,7 +2,11 @@ import { ContentParts, Dates } from './app'; import { Comment, CommentsNode } from './comments'; import { Cover, RawCover } from './cover'; import { SEO } from './seo'; -import { SubjectPreview, ThematicPreview } from './taxonomies'; +import { + RawSubjectPreview, + SubjectPreview, + ThematicPreview, +} from './taxonomies'; export type ArticleAuthor = { firstName: string; @@ -10,6 +14,11 @@ export type ArticleAuthor = { name: string; }; +export type RawACFPosts = { + postsInSubject: RawSubjectPreview[] | null; + postsInThematic: ThematicPreview[] | null; +}; + export type ACFPosts = { postsInSubject: SubjectPreview[] | null; postsInThematic: ThematicPreview[] | null; @@ -34,7 +43,7 @@ export type RawArticle = Pick< Article, 'commentCount' | 'databaseId' | 'id' | 'seo' | 'title' > & { - acfPosts: ACFPosts; + acfPosts: RawACFPosts; author: { node: ArticleAuthor }; comments: CommentsNode; contentParts: ContentParts; diff --git a/src/ts/types/taxonomies.ts b/src/ts/types/taxonomies.ts index 3945934..71eb20a 100644 --- a/src/ts/types/taxonomies.ts +++ b/src/ts/types/taxonomies.ts @@ -29,6 +29,10 @@ export type Subject = Taxonomy & { officialWebsite: string; }; +export type RawSubjectPreview = TaxonomyPreview & { + featuredImage: RawCover; +}; + export type SubjectPreview = TaxonomyPreview & { featuredImage: Cover; }; diff --git a/src/utils/helpers/format.ts b/src/utils/helpers/format.ts index 81bae9c..94aa2e7 100644 --- a/src/utils/helpers/format.ts +++ b/src/utils/helpers/format.ts @@ -7,8 +7,10 @@ import { import { Comment, RawComment } from '@ts/types/comments'; import { RawSubject, + RawSubjectPreview, RawThematic, Subject, + SubjectPreview, Thematic, } from '@ts/types/taxonomies'; @@ -185,6 +187,19 @@ export const buildCommentsTree = (comments: Comment[]) => { return commentsTree; }; +export const getFormattedSubjectsPreview = ( + subjects: RawSubjectPreview[] +): SubjectPreview[] => { + const formattedSubjects: SubjectPreview[] = subjects.map((subject) => { + return { + ...subject, + featuredImage: subject.featuredImage ? subject.featuredImage.node : null, + }; + }); + + return formattedSubjects; +}; + /** * Format an article from RawArticle to Article type. * @param rawPost - An article coming from WP GraphQL. @@ -212,6 +227,9 @@ export const getFormattedPost = (rawPost: RawArticle): Article => { const formattedComments = getFormattedComments(comments.nodes); const commentsTree = buildCommentsTree(formattedComments); + const subjects = acfPosts.postsInSubject + ? getFormattedSubjectsPreview(acfPosts.postsInSubject) + : []; const formattedPost: Article = { author: author.node, @@ -223,7 +241,7 @@ export const getFormattedPost = (rawPost: RawArticle): Article => { id, intro: contentParts.beforeMore, seo, - subjects: acfPosts.postsInSubject ? acfPosts.postsInSubject : [], + subjects, thematics: acfPosts.postsInThematic ? acfPosts.postsInThematic : [], title, }; -- cgit v1.2.3