diff options
| -rw-r--r-- | src/components/PostFooter/PostFooter.module.scss | 45 | ||||
| -rw-r--r-- | src/components/PostFooter/PostFooter.tsx | 18 | ||||
| -rw-r--r-- | src/ts/types/articles.ts | 13 | ||||
| -rw-r--r-- | src/ts/types/taxonomies.ts | 4 | ||||
| -rw-r--r-- | src/utils/helpers/format.ts | 20 |
5 files changed, 94 insertions, 6 deletions
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 ( - <li key={subject.id}> + <li className={styles.item} key={subject.id}> <Link href={`/sujet/${subject.slug}`}> - <a>{subject.title}</a> + <a className={styles.link}> + {subject.featuredImage && ( + <Image + src={subject.featuredImage.sourceUrl} + alt={subject.featuredImage.altText} + layout="intrinsic" + width="20" + height="20" + /> + )} + {subject.title} + </a> </Link> </li> ); @@ -21,7 +33,7 @@ const PostFooter = ({ subjects }: { subjects: SubjectPreview[] }) => { {subjects.length > 0 && ( <> <dl className={styles.meta}> - <dt>{t`Subjects:`}</dt> + <dt>{t`Read more articles about:`}</dt> <dd> <ul className={styles.list}>{getSubjects()}</ul> </dd> 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, }; |