feat(Blog)

[KomrakovaAnna]

Aligning the blog page design with the general concept

Summary by CodeRabbit

• New Features

  • Dynamic grid backgrounds applied across blog pages for richer visuals
  • New featured-post CTA component with repositioned CTA in the hero
  • Author filter support via URL query with header adapting to filtered views

• UI Improvements

  • Larger, extrabold blog page title with gradient styling (hidden when author filtered)
  • Category heading left-aligned instead of centered
  • Category filter buttons gain improved hover interactions and URL-syncing when toggling authors

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	1f293ac
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/6978f873a6b6fb0008be4a91
😎 Deploy Preview	https://deploy-preview-222--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

Wraps blog list, category, and post detail pages with DynamicGridBackground; adds FeaturedPostCtaButton and BlogPageHeader components; updates BlogFilters to sync author selection with URL search params and adds hover styles to category buttons. blog/page.tsx now accepts searchParams.

Changes

Cohort / File(s)	Summary
Layout: Blog pages frontend/app/[locale]/blog/[slug]/PostDetails.tsx, frontend/app/[locale]/blog/page.tsx, frontend/app/[locale]/blog/category/[category]/page.tsx	Pages are wrapped with DynamicGridBackground; outer wrapper classes adjusted (background, padding, transitions); existing <main> content is nested. blog/page.tsx now accepts searchParams and conditionally renders the page header when no author filter is present.
New components frontend/components/blog/FeaturedPostCtaButton.tsx, frontend/components/blog/BlogPageHeader.tsx	Adds FeaturedPostCtaButton (client component; renders HeaderButton with ArrowUpRight) and BlogPageHeader (client component; renders title/subtitle unless author search param exists).
Filters & navigation frontend/components/blog/BlogFilters.tsx	toggleAuthor now toggles selectedAuthor and updates URL search params (adds/removes author) using router.replace(nextPath) to sync state with the URL; category buttons gain hover:bg-secondary hover:text-foreground.
Minor manifest/UI package.json, frontend/app/[locale]/blog/page.tsx	Small manifest line edits; category/hero heading alignment adjusted and featured post CTA moved into FeaturedPostCtaButton.

Sequence Diagram(s)

(Skipped — changes are layout/components additions and a UI routing sync; they do not introduce a complex multi-component sequential flow that benefits from a diagram.)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Sanity #209 — modifies the same blog UI files (PostDetails, category, blog page); likely overlapping layout changes.
• (SP: 1) [Frontend] About Us Page. Fixed game, topics, mobile layout #183 — updates DynamicGridBackground usage/props; directly related to new background wrappers.
• Sanity #203 — changes BlogFilters.tsx; overlaps hover/style and filter behavior edits.

Suggested labels

enhancement

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰
I hopped through grids and painted light,
Buttons twinkled, headings bright.
Filters whisper, URLs sing,
Featured calls make browsers spring — 🥕✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The PR title 'feat(Blog)' is extremely vague and generic. It lacks specificity about what feature or change is being implemented, making it impossible to understand the primary change from the title alone.	Replace the generic title with a specific, descriptive one such as 'feat(Blog): Align blog page design with site concept' or similar that captures the main intent of the changes.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/app/`[locale]/blog/category/[category]/page.tsx:
- Around line 157-161: The CTA button rendered by FeaturedPostCtaButton is
invisible to keyboard users because its class sets opacity-0 and only changes on
group-hover; update the className passed to FeaturedPostCtaButton so it also
becomes visible on keyboard focus (for example add a focus-visible:opacity-100
and/or group-focus-within:opacity-100 rule) so tabbing to the control shows the
button and maintains the existing hover behavior.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/components/blog/BlogFilters.tsx (1)

575-575: Dead code: expression always evaluates to null.

{selectedCategory && null} does nothing — it renders null regardless of whether selectedCategory is truthy or falsy. This appears to be leftover code that should be removed.

🧹 Suggested fix

-        {selectedCategory && null}

🤖 Fix all issues with AI agents

In `@frontend/app/`[locale]/blog/page.tsx:
- Around line 27-37: The code treats searchParams synchronously but in Next.js
16+ it's a Promise; update the page component signature to type searchParams as
a Promise (e.g., searchParams?: Promise<{ [key: string]: string | string[] |
undefined }>) and then await it at the top (const sp = await searchParams)
before using it; replace uses of searchParams with the awaited variable (sp)
when computing authorParam and hasAuthorFilter so access is async-safe alongside
the existing await for params and getTranslations.

🧹 Nitpick comments (1)

frontend/components/blog/BlogPageHeader.tsx (1)

10-13: Redundant author-filter check duplicates parent logic.

The parent component (BlogPage) already conditionally renders BlogPageHeader only when !hasAuthorFilter (see page.tsx lines 89-91). The internal authorParam check here is redundant and creates duplicated logic that could diverge during maintenance.

Consider removing the internal check since the parent guarantees this component is only rendered when there's no author filter:

♻️ Suggested simplification

 export function BlogPageHeader({ title, subtitle }: BlogPageHeaderProps) {
-  const searchParams = useSearchParams();
-  const authorParam = (searchParams?.get('author') || '').trim();
-  if (authorParam) return null;
-
   return (
     <>
       <h1 className="text-5xl font-extrabold mb-3 text-center leading-[1.1] bg-gradient-to-b from-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-[var(--accent-hover)] bg-clip-text text-transparent">

This would also allow removing the 'use client' directive if no other client-side hooks are needed, making this a simpler server component.