feat: blog tags

Dockerfile

@@ -3,11 +3,17 @@ RUN apk add --no-cache git curl
 
 WORKDIR /builder
 
-COPY package.json yarn.lock ./
+# Copy manifests, lock file, and yarn config
+COPY package.json yarn.lock .yarnrc.yml ./
+
+# Enable corepack and install dependencies using the lockfile
 RUN corepack enable
-RUN yarn install
+RUN yarn install --immutable
 
+# Copy the rest of the application code
 COPY . .
+
+# Build the application
 RUN yarn build
 
 # Create image by copying build artifacts

app/[lang]/about/page.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image"
 import Link from "next/link"
 
 import { siteConfig } from "@/config/site"
@@ -22,20 +21,13 @@ export default async function AboutPage({ params: { lang } }: any) {
     }) as any[]) ?? []
 
   return (
-    <Divider.Section className="bg-white">
-      <PageHeader
-        title={t("title")}
-        subtitle={t("description")}
-        image={
-          <Image
-            width={280}
-            height={280}
-            className="mx-auto h-[210px] w-[210px] lg:ml-auto lg:h-[320px] lg:w-[320px]"
-            src="/logos/pse-logo-bg.svg"
-            alt="pse logo"
-          />
-        }
-        actions={
+    <div className="flex flex-col">
+      <div className="w-full bg-page-header-gradient">
+        <AppContent className="flex flex-col gap-4 py-10 w-full max-w-[978px] mx-auto">
+          <Label.PageTitle label={t("title")} />
+          <h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[18px] md:leading-[27px] md:max-w-[700px]">
+            {t("description")}
+          </h6>
           <Link
             href={siteConfig.links.discord}
             target="_blank"
@@ -53,56 +45,57 @@ export default async function AboutPage({ params: { lang } }: any) {
               </div>
             </Button>
           </Link>
-        }
-      />
-
-      <div className="flex justify-center">
-        <AppContent className="container flex w-full max-w-[978px] flex-col gap-8 py-10 md:py-16">
-          <Label.Section
-            className="text-center"
-            label={t("our-principles-title")}
-          />
-          <Accordion
-            type="multiple"
-            items={[
-              ...principles.map((principle: any, index: number) => {
-                return {
-                  label: principle.title,
-                  value: index.toString(),
-                  children: (
-                    <span className="flex flex-col gap-6 break-words pb-12 font-sans text-lg font-normal leading-[150%]">
-                      {principle.description.map(
-                        (description: string, index: number) => {
-                          return <p key={index}>{description}</p>
-                        }
-                      )}
-                    </span>
-                  ),
-                }
-              }),
-            ]}
-          />
         </AppContent>
       </div>
+      <Divider.Section className="bg-white">
+        <div className="flex justify-center">
+          <AppContent className="container flex w-full max-w-[978px] flex-col gap-8 py-10 md:py-16">
+            <Label.Section
+              className="text-center"
+              label={t("our-principles-title")}
+            />
+            <Accordion
+              type="multiple"
+              items={[
+                ...principles.map((principle: any, index: number) => {
+                  return {
+                    label: principle.title,
+                    value: index.toString(),
+                    children: (
+                      <span className="flex flex-col gap-6 break-words pb-12 font-sans text-lg font-normal leading-[150%]">
+                        {principle.description.map(
+                          (description: string, index: number) => {
+                            return <p key={index}>{description}</p>
+                          }
+                        )}
+                      </span>
+                    ),
+                  }
+                }),
+              ]}
+            />
+          </AppContent>
+        </div>
 
-      <Banner title={t("banner.title")} subtitle={t("banner.subtitle")}>
-        <Link
-          href={siteConfig.links.discord}
-          target="_blank"
-          rel="noreferrer"
-          passHref
-        >
-          <Button>
-            <div className="flex items-center gap-2">
-              <Icons.discord fill="white" className="h-4" />
-              <span className="text-[14px] uppercase">
-                {common("joinOurDiscord")}
-              </span>
-              <Icons.externalUrl fill="white" className="h-5" />
-            </div>
-          </Button>
-        </Link>
-      </Banner>
-    </Divider.Section>
+        <Banner title={t("banner.title")} subtitle={t("banner.subtitle")}>
+          <Link
+            href={siteConfig.links.discord}
+            target="_blank"
+            rel="noreferrer"
+            passHref
+          >
+            <Button>
+              <div className="flex items-center gap-2">
+                <Icons.discord fill="white" className="h-4" />
+                <span className="text-[14px] uppercase">
+                  {common("joinOurDiscord")}
+                </span>
+                <Icons.externalUrl fill="white" className="h-5" />
+              </div>
+            </Button>
+          </Link>
+        </Banner>
+      </Divider.Section>
+    </div>
   )
 }

app/[lang]/blog/[slug]/page.tsx

@@ -1,10 +1,12 @@
 import { blogArticleCardTagCardVariants } from "@/components/blog/blog-article-card"
 import { BlogContent } from "@/components/blog/blog-content"
 import { AppContent } from "@/components/ui/app-content"
+import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
 import { Markdown } from "@/components/ui/markdown"
 import { getArticles, getArticleById } from "@/lib/blog"
 import { Metadata } from "next"
+import Link from "next/link"
 
 export const generateStaticParams = async () => {
   const articles = await getArticles()
@@ -81,6 +83,18 @@ export default function BlogArticle({ params }: any) {
                 {post?.tldr && <Markdown>{post?.tldr}</Markdown>}
               </div>
             ) : null}
+            {(post?.tags ?? [])?.length > 0 && (
+              <div className="flex flex-col gap-2">
+                <span className="text-sm italic text-tuatara-950">Tags:</span>
+                <div className="flex gap-2">
+                  {post?.tags?.map((tag) => (
+                    <Link key={tag} href={`/${params.lang}/blog?tag=${tag}`}>
+                      <Button size="xs">{tag}</Button>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            )}
           </AppContent>
         </div>
       </div>

app/[lang]/blog/page.tsx

@@ -2,29 +2,47 @@ import { useTranslation } from "@/app/i18n"
 import { BlogArticles } from "@/components/blog/blog-articles"
 import { AppContent } from "@/components/ui/app-content"
 import { Label } from "@/components/ui/label"
+import { getArticles } from "@/lib/blog"
 import { Metadata } from "next"
 
 export const metadata: Metadata = {
   title: "Blog",
   description: "",
 }
 
-const BlogPage = async ({ params: { lang } }: any) => {
+interface BlogPageProps {
+  params: { lang: string }
+  searchParams?: { [key: string]: string | string[] | undefined }
+}
+
+const BlogPage = async ({ params: { lang }, searchParams }: BlogPageProps) => {
   const { t } = await useTranslation(lang, "blog-page")
 
+  // Get the tag from searchParams
+  const tag = searchParams?.tag as string | undefined
+
+  // Fetch articles, filtering by tag if present
+  const articles = await getArticles({ tag })
+
   return (
     <div className="flex flex-col">
-      <div className="w-full bg-cover-gradient border-b border-tuatara-300">
+      <div className="w-full bg-page-header-gradient">
         <AppContent className="flex flex-col gap-4 py-10 w-full">
           <Label.PageTitle label={t("title")} />
+          {tag && (
+            <h2 className="text-xl font-semibold text-tuatara-800">
+              {`Filtered by tag: "${tag}"`}
+            </h2>
+          )}
           <h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[18px] md:leading-[27px] md:max-w-[700px]">
             {t("subtitle")}
           </h6>
         </AppContent>
       </div>
 
       <AppContent className="flex flex-col gap-10 py-10">
-        <BlogArticles />
+        {/* Pass fetched articles and lang to the component */}
+        <BlogArticles articles={articles} lang={lang} />
       </AppContent>
     </div>
   )

app/[lang]/projects/page.tsx

@@ -20,7 +20,7 @@ export default async function ProjectsPage({ params: { lang } }: any) {
 
   return (
     <div className="flex flex-col">
-      <div className="w-full bg-cover-gradient border-b border-tuatara-300">
+      <div className="w-full bg-page-header-gradient">
         <AppContent className="flex flex-col gap-4 py-10 w-full">
           <Label.PageTitle label={t("title")} />
           <h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[18px] md:leading-[27px] md:max-w-[700px]">

app/[lang]/research/page.tsx

@@ -17,14 +17,9 @@ export const metadata: Metadata = {
 const ResearchPage = async ({ params: { lang } }: any) => {
   const { t } = await useTranslation(lang, "research-page")
   return (
-    <div className="flex flex-col gap-10 lg:gap-32 pb-[128px]">
-      <div
-        className="w-full"
-        style={{
-          background: "linear-gradient(180deg, #C2E8F5 -17.44%, #FFF 62.5%)",
-        }}
-      >
-        <AppContent className="flex flex-col gap-4 pt-10 w-full lg:px-[200px]">
+    <div className="flex flex-col gap-10 lg:gap-32 pb-[128px] ">
+      <div className="w-full bg-page-header-gradient">
+        <AppContent className="flex flex-col gap-4 py-10 w-full">
           <Label.PageTitle label={t("title")} />
           <h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[18px] md:leading-[27px] md:max-w-[700px]">
             {t("subtitle")}