Merge pull request #43 from Blazity/recommended

feat: add recommended articles

src/app/[lang]/article/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image"
 import { notFound } from "next/navigation"
 import { Metadata } from "next/types"
+import { RecommendedArticles } from "@/components/RecommendedArticles/RecommendedArticles"
 import { RichText } from "@/components/RichText/RichText"
 import { Locale } from "@/i18n/i18n"
 import { getArticleBySlug } from "@/lib/client"
@@ -44,23 +45,28 @@ export default async function Web({ params: { slug, lang } }: ArticlePageProps)
 
   if (!article) return notFound()
   return (
-    <article className="w-full px-4 pb-16 pt-8">
-      {article.coverImage && (
-        <Image
-          src={article.coverImage.url}
-          alt={""}
-          width={1200}
-          height={630}
-          quality={100}
-          className="max-h-[630px] rounded-sm object-cover"
-        />
+    <>
+      <article className="w-full px-4 pb-16 pt-8">
+        {article.coverImage && (
+          <Image
+            src={article.coverImage.url}
+            alt={""}
+            width={1200}
+            height={630}
+            quality={100}
+            className="max-h-[630px] rounded-sm object-cover"
+          />
+        )}
+        <h1 className="mb-8 text-2xl font-semibold">{article.title}</h1>
+        {article.content && (
+          <section className="flex w-full flex-col gap-4">
+            <RichText raw={article.content.raw} />
+          </section>
+        )}
+      </article>
+      {article.recommendedArticles.length > 0 && (
+        <RecommendedArticles recommendedArticles={article.recommendedArticles} lang={lang} />
       )}
-      <h1 className="mb-8 text-2xl font-semibold">{article.title}</h1>
-      {article.content && (
-        <section className="flex w-full flex-col gap-4">
-          <RichText raw={article.content.raw} />
-        </section>
-      )}
-    </article>
+    </>
   )
 }

src/app/[lang]/layout.tsx

@@ -1,3 +1,4 @@
+import { Footer } from "@/components/Footer/Footer"
 import { DynamicLangSelect } from "@/components/LangSelect/DynamicLangSelect"
 import { Navigation } from "@/components/Navigation/Navigation"
 import { DynamicSearchDialog } from "@/components/Search/DynamicSearchDialog"
@@ -44,6 +45,7 @@ export default function Layout({ children, params }: { children: React.ReactNode
               <DynamicLangSelect />
             </nav>
             {children}
+            <Footer lang={params.lang} />
           </main>
         </body>
       </Providers>

src/components/Footer/Footer.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link"
+import { Locale } from "@/i18n/i18n"
+import { getFooter } from "@/lib/client"
+
+type FooterProps = {
+  lang: Locale
+}
+
+export async function Footer({ lang }: FooterProps) {
+  const footer = await getFooter(lang)
+
+  return (
+    <footer className="flex w-[100%] items-center justify-between p-4">
+      <p>Footer</p>
+      <nav>
+        <ul className="flex gap-5">
+          {footer.pages.map((footerElement) => (
+            <li key={footerElement?.slug}>
+              <Link href={`/${lang}/${footerElement?.slug}`} prefetch={false}>
+                {footerElement?.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </footer>
+  )
+}

src/components/RecommendedArticles/RecommendedArticles.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image"
+import Link from "next/link"
+import { Locale } from "@/i18n/i18n"
+
+type RecommendedArticle = {
+  title: string
+  slug: string
+  id: string
+  coverImage?: { url: string } | null | undefined
+}
+
+type RecommendedArticlesProps = { recommendedArticles: RecommendedArticle[]; lang: Locale }
+
+export async function RecommendedArticles({ recommendedArticles, lang }: RecommendedArticlesProps) {
+  return (
+    <section className="w-full px-4">
+      <h2 className="mb-4 text-2xl font-bold">Recommended articles</h2>
+      <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
+        {recommendedArticles?.map((article) => (
+          <Link href={`/${lang}/article/${article.slug}`} prefetch={false} passHref key={`recommended-${article.id}`}>
+            <article className="flex flex-col gap-2">
+              <div className="h-[157px] max-w-[300px] rounded-sm bg-slate-100">
+                {article?.coverImage?.url && (
+                  <Image
+                    src={article.coverImage.url}
+                    alt={article.title}
+                    width={300}
+                    height={157}
+                    className="h-[157px] w-[300px] rounded-sm object-cover"
+                  />
+                )}
+              </div>
+              <div className="font-semibold">{article?.title}</div>
+            </article>
+          </Link>
+        ))}
+      </div>
+    </section>
+  )
+}

src/lib/client.ts

@@ -10,7 +10,7 @@ import {
   listArticlesBySlugQuery,
   listArticlesForSitemapQuery,
 } from "./queries/articles"
-import { getHomepageQuery, getNavigationQuery } from "./queries/components"
+import { getFooterQuery, getHomepageQuery, getNavigationQuery } from "./queries/components"
 import { getPageBySlugQuery, listPagesForSitemapQuery } from "./queries/pages"
 import { Tag } from "./tags"
 
@@ -56,6 +56,16 @@ export async function graphqlFetch<TQuery, TVariables>({
   return parsed.data
 }
 
+export async function getFooter(locale: Locale) {
+  const { footers } = await graphqlFetch({
+    cache: "force-cache",
+    document: getFooterQuery,
+    tags: ["PAGES"],
+    variables: { locale },
+  })
+  return footers[0] ?? null
+}
+
 export async function getHomepage(locale: Locale) {
   const { homepages } = await graphqlFetch({
     cache: "force-cache",

src/lib/queries/articles.ts

@@ -63,6 +63,14 @@ export const getArticleBySlugQuery = graphql(`
       content {
         raw
       }
+      recommendedArticles {
+        title
+        slug
+        id
+        coverImage {
+          url
+        }
+      }
     }
   }
 `)

src/lib/queries/components.ts

@@ -22,3 +22,14 @@ export const getHomepageQuery = graphql(`
     }
   }
 `)
+
+export const getFooterQuery = graphql(`
+  query getFooter($locales: [Locale!]!) {
+    footers(locales: $locales, first: 1) {
+      pages {
+        slug
+        title
+      }
+    }
+  }
+`)