From f6a82bc943edc3511888295730d6869205d01324 Mon Sep 17 00:00:00 2001 From: Max Mogilski Date: Wed, 8 Nov 2023 14:53:03 +0100 Subject: [PATCH] feat: add main card content --- src/components/ArticleCard/ArticleCard.tsx | 16 ++++- .../RecentArticles/RecentArticles.tsx | 14 ++++- .../RecentArticles/RecentArticlesInfinite.tsx | 9 +-- src/lib/client.ts | 11 ++++ src/lib/queries/articles.ts | 58 +++++++++++++++++++ 5 files changed, 96 insertions(+), 12 deletions(-) diff --git a/src/components/ArticleCard/ArticleCard.tsx b/src/components/ArticleCard/ArticleCard.tsx index d422a618..e6733d55 100644 --- a/src/components/ArticleCard/ArticleCard.tsx +++ b/src/components/ArticleCard/ArticleCard.tsx @@ -1,9 +1,11 @@ +import { RichTextContent } from "@graphcms/rich-text-types" import Image from "next/image" import Link from "next/link" import { useLocale } from "@/i18n/i18n" import { cn } from "@/utils/cn" import { ArticlePublishDetails } from "./ArticlePublishDetails" import { Tag } from "./Buttons/Tag" +import { RichText } from "../RichText/RichText" import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/Tooltip/Tooltip" type ArticleCardProps = { @@ -14,6 +16,7 @@ type ArticleCardProps = { publicationDate: string | null tags: string[] slug: string + content?: { raw: RichTextContent } | null author: { name: string imageUrl?: string @@ -32,6 +35,7 @@ export const hygraphArticleToCardProps = (article: { author?: { name: string } | null image?: { data: { url: string }; description?: { text: string } | undefined | null } | null publishedAt?: string + content?: { raw: RichTextContent } | null slug: string }) => { return { @@ -39,6 +43,7 @@ export const hygraphArticleToCardProps = (article: { imageUrl: article?.image?.data?.url, imageAlt: article.image?.description?.text, title: article?.title, + content: article?.content, author: { name: article?.author?.name ?? "Anonymous" }, publicationDate: article?.publishedAt ? article.publishedAt : null, slug: article?.slug, @@ -48,7 +53,7 @@ export const hygraphArticleToCardProps = (article: { const MAX_TAGS_TO_DISPLAY = 3 export function ArticleCard({ - article: { imageUrl, imageAlt, title, publicationDate, author, tags, slug }, + article: { imageUrl, imageAlt, title, publicationDate, author, tags, slug, content }, tagsPosition = "under", orientation = "vertical", lines = "2", @@ -135,7 +140,7 @@ export function ArticleCard({ )}
@@ -145,11 +150,16 @@ export function ArticleCard({ lines === "1" && "md:line-clamp-1", lines === "2" && "md:line-clamp-2", lines === "3" && "md:line-clamp-3", - "line-clamp-3 text-lg font-bold tracking-[1px] md:text-[1.5rem] md:leading-9" + "line-clamp-3 text-lg font-bold tracking-[1px] md:text-[1.5rem] md:leading-9 xl:py-2" )} > {title} + {content && ( +
+ +
+ )}

{title}

+
+ +
diff --git a/src/components/RecentArticles/RecentArticlesInfinite.tsx b/src/components/RecentArticles/RecentArticlesInfinite.tsx index 1ab0b0fa..f8891091 100644 --- a/src/components/RecentArticles/RecentArticlesInfinite.tsx +++ b/src/components/RecentArticles/RecentArticlesInfinite.tsx @@ -25,7 +25,7 @@ export function RecentArticlesInfinite({ initialArticles }: RecentArticlesInfini queryFn: ({ pageParam = 0 }) => getRecentArticles({ locale, - skip: RECENT_ARTICLES_PER_PAGE * pageParam, + skip: RECENT_ARTICLES_PER_PAGE * pageParam + 1, first: RECENT_ARTICLES_PER_PAGE, }), getNextPageParam: (lastPage, pages) => { @@ -40,15 +40,10 @@ export function RecentArticlesInfinite({ initialArticles }: RecentArticlesInfini const articles = recentArticlesQuery?.pages.flatMap((page) => page.articles) if (!articles) return null - const [firstArticle, ...otherArticles] = articles + const [...otherArticles] = articles return (
-
{otherArticles.map((article) => { return diff --git a/src/lib/client.ts b/src/lib/client.ts index b9bcb23f..3d4c4d3b 100644 --- a/src/lib/client.ts +++ b/src/lib/client.ts @@ -10,6 +10,7 @@ import { getArticleRecommendedArticlesQuery, getArticlesQuantityQuery, getRecentArticlesQuery, + getRecentArticlesWithMainQuery, listArticlesByCategoryQuery, listArticlesBySlugQuery, listArticlesForSitemapQuery, @@ -146,6 +147,16 @@ export async function getRecentArticles(variables: { locale: Locale; skip?: numb return { articles, count: articlesConnection.aggregate.count } } +export async function getRecentArticlesWithMain(variables: { locale: Locale; skip?: number; first?: number }) { + const { articles, articlesConnection, mainArticle } = await graphqlFetch({ + cache: "force-cache", + document: getRecentArticlesWithMainQuery, + tags: ["ARTICLE"], + variables, + }) + return { articles, count: articlesConnection.aggregate.count, mainArticle } +} + export async function getArticleRecommendedArticles(variables: { locale: Locale; id: string }) { const { article } = await graphqlFetch({ cache: "force-cache", diff --git a/src/lib/queries/articles.ts b/src/lib/queries/articles.ts index 20236d97..1b403591 100644 --- a/src/lib/queries/articles.ts +++ b/src/lib/queries/articles.ts @@ -24,6 +24,64 @@ export const listArticlesForSitemapQuery = graphql(` } `) +export const getRecentArticlesWithMainQuery = graphql(` + query getRecentArticlesQueryWithMain( + $locales: [Locale!]! + $skip: Int = 0 + $first: Int = 50 + $where: ArticleWhereInput + ) { + mainArticle: articles(locales: $locales, first: 1, orderBy: publishedAt_DESC, where: $where) { + id + author { + name + } + publishedAt + updatedAt + locale + slug + title + tags + content { + raw + } + image { + description { + text + } + data { + url + } + } + } + articles(locales: $locales, skip: $skip, first: $first, orderBy: publishedAt_DESC, where: $where) { + id + author { + name + } + publishedAt + updatedAt + locale + slug + title + tags + image { + description { + text + } + data { + url + } + } + } + articlesConnection(locales: $locales) { + aggregate { + count + } + } + } +`) + export const getRecentArticlesQuery = graphql(` query getRecentArticles($locales: [Locale!]!, $skip: Int = 0, $first: Int = 50, $where: ArticleWhereInput) { articles(locales: $locales, skip: $skip, first: $first, orderBy: publishedAt_DESC, where: $where) {