Merge pull request #91 from Blazity/main-card

feat: add main card content

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,13 +35,15 @@ 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 {
  tags: article?.tags,
  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({
  )}
  <div
  className={cn(
- "flex flex-1 items-start gap-5  pt-0 md:flex-col  md:justify-between md:p-5 md:pt-2",
+ "flex flex-1 items-start gap-5 pt-0 md:flex-col md:justify-between md:gap-2 md:p-3 md:pt-2 lg:p-4",
  isMain && "flex-col justify-between p-5 pt-2"
  )}
  >
@@ -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}
  </h2>
+ {content && (
+ <div className="hidden max-h-[90px] overflow-hidden md:block">
+ <RichText pClassName="line-clamp-3" raw={content.raw} />
+ </div>
+ )}
  <ArticlePublishDetails
  className={cn("hidden md:flex", isMain && "flex")}
  imageUrl={author.imageUrl}

src/components/RecentArticles/RecentArticles.tsx

@@ -1,7 +1,8 @@
 import { NextIntlClientProvider } from "next-intl"
 import { useLocale } from "@/i18n/i18n"
-import { getRecentArticles } from "@/lib/client"
+import { getRecentArticlesWithMain } from "@/lib/client"
 import { RecentArticlesInfiniteDynamic } from "./RecentArticlesInfiniteDynamic"
+import { ArticleCard, hygraphArticleToCardProps } from "../ArticleCard/ArticleCard"
 
 export const RECENT_ARTICLES_PER_PAGE = 6
 
@@ -11,11 +12,20 @@ type RecentArticlesProps = {
 
 export async function RecentArticles({ title }: RecentArticlesProps) {
  const locale = useLocale()
- const initialArticles = await getRecentArticles({ locale, first: 4 })
+ const initialArticles = await getRecentArticlesWithMain({ locale, first: 3, skip: 1 })
+ const mainArticle = initialArticles.mainArticle[0]
 
  return (
  <section className="w-full">
  <h2 className="py-12 pb-8 text-3xl font-bold">{title}</h2>
+ <div className="pb-5">
+ <ArticleCard
+ article={hygraphArticleToCardProps(mainArticle)}
+ orientation="horizontal"
+ imageClassName="md:w-1/2"
+ tagsPosition="over"
+ />
+ </div>
  <NextIntlClientProvider locale={locale}>
  <RecentArticlesInfiniteDynamic initialArticles={initialArticles} />
  </NextIntlClientProvider>

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 (
  <section className="flex flex-col gap-5">
- <ArticleCard
- article={hygraphArticleToCardProps(firstArticle)}
- orientation="horizontal"
- imageClassName="md:w-1/2"
- />
  <div className="grid gap-5 md:grid-cols-3">
  {otherArticles.map((article) => {
  return <ArticleCard key={`recent-${article.id}`} article={hygraphArticleToCardProps(article)} />

src/lib/client.ts

@@ -10,6 +10,7 @@ import {
  getArticleRecommendedArticlesQuery,
  getArticlesQuantityQuery,
  getRecentArticlesQuery,
+ getRecentArticlesWithMainQuery,
  listArticlesByCategoryQuery,
  listArticlesBySlugQuery,
  listArticlesForSitemapQuery,
@@ -151,6 +152,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",

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) {