Sanity

[KomrakovaAnna]

Added breadcrumbs to category page and post details page
Added scroll up on filtering by author
Added icons for social links

Summary by CodeRabbit

• New Features

  • Breadcrumb navigation added to posts and category pages; breadcrumbs reflected in page metadata.
  • Category labels/badges shown across posts, recommended items, and category pages.
  • Social media icons added to author profiles.
  • Locale-aware search endpoint and results.

• Improvements

  • Wider, more responsive blog layouts with updated header and larger header images.
  • Search matching improved with normalized, word-based matching.
  • Author panel auto-focus when selected for easier navigation.

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

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	2591e67
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/69768fba23d18e0008698283
😎 Deploy Preview	https://deploy-preview-209--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

Adds category-aware rendering and breadcrumbs with JSON-LD, expands locale-aware search (API and UI), introduces social icons and author-scroll behavior, and adjusts responsive layout across blog pages and components.

Changes

Cohort / File(s)	Summary
Post details & category breadcrumbs frontend/app/[locale]/blog/[slug]/PostDetails.tsx	Adds categories to queries, computes localized category labels/URLs, builds dynamic breadcrumb items and JSON-LD, updates header, hero image sizing, post body layout, and recommended-post rendering with category badges.
Category page & helper frontend/app/[locale]/blog/category/[category]/page.tsx	Adds breadcrumb nav, replaces raw category title with getCategoryLabel(category, t), and tweaks header/layout to include category display.
Blog index layout frontend/app/[locale]/blog/page.tsx	Enlarges responsive container and adjusts padding/breakpoints (Tailwind class changes only).
Locale-aware search API frontend/app/api/blog-search/route.ts	GET now accepts Request, parses locale query param, extends GROQ to return localized fields with fallbacks, and passes locale to fetch (no CDN caching).
Category grid author navigation frontend/components/blog/BlogCategoryGrid.tsx	Adds useRouter + useCallback handleAuthorSelect to navigate to /blog?author=… and wires it into the grid.
Filters, author block & social icons frontend/components/blog/BlogFilters.tsx	Adds SocialIcon mapping to Lucide icons, author-heading auto-scroll ref, search normalization, tighter featured/author layout and improved social link rendering.
Header search (locale & normalization) frontend/components/blog/BlogHeaderSearch.tsx	Adds useLocale, includes locale in search requests, introduces normalizeSearchText, and changes matching to any-word normalized search logic.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Sanity #145 — Overlapping modifications to PostDetails.tsx (locale-aware fields, breadcrumbs, recommended-posts).
• Sanity #176 — Similar changes around breadcrumbs, category labels, and recommended-post rendering in PostDetails.tsx.
• Sanity #79 — Overlaps in BlogFilters.tsx around search normalization, UI, and portable-text handling.

Suggested labels

enhancement

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰 I hopped through breadcrumbs, bright and neat,
Labeled categories beneath my feet,
Locales hummed, search words now play,
Social icons wink along the way,
I nibble code and celebrate this feat! 🥕✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 8.33% 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 title 'Sanity' is vague and generic—it does not clearly describe what the pull request changes or its main purpose.	Use a more descriptive title that summarizes the main changes, such as 'Add breadcrumbs, author scroll behavior, and social link icons to blog pages' or similar.

✅ 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: 2

Caution

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

⚠️ Outside diff range comments (2)

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

74-96: Missing locale in useEffect dependency array.

The effect uses locale in the fetch URL (line 77) but doesn't include it in the dependency array (line 96). If the locale changes while the search is open, the cached items will be stale and not reflect the new locale's content.

🔧 Proposed fix

   return () => {
     active = false;
   };
-  }, [open, items.length, isLoading]);
+  }, [open, items.length, isLoading, locale]);

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

566-566: Remove dead code.

{selectedCategory && null} is a no-op that renders nothing. This appears to be leftover from removed functionality and should be cleaned up.

🧹 Suggested fix

-        {selectedCategory && null}

🤖 Fix all issues with AI agents

In `@frontend/app/`[locale]/blog/[slug]/PostDetails.tsx:
- Around line 223-235: The category slugification is using double-escaped
sequences (`\\s`) so the regexes in categoryHref and categoryUrl don't match
whitespace; update those to use proper regexes (/[^a-z0-9\s-]/g and /\s+/g) or,
better, reuse the existing slugify implementation from
frontend/app/[locale]/blog/category/[category]/page.tsx by extracting it into a
shared utility and importing it into PostDetails.tsx, then replace the inline
chain on categoryLabel with a call to that shared slugify function to produce
the slug for categoryHref and categoryUrl.

In `@frontend/app/`[locale]/blog/category/[category]/page.tsx:
- Around line 182-190: getCategoryLabel currently maps both 'growth' and
'career' to t('categories.career') and is duplicated; change the 'growth' branch
to return its own translation key (e.g., t('categories.growth')) in the
getCategoryLabel function and extract the function into a shared utility
(suggested module: export getCategoryLabel from "@/lib/blog/category.ts"), then
replace the local implementations in page.tsx and PostDetails.tsx with an import
from that utility so both components use the same mapping; update any
imports/usages accordingly and add/verify the new translation key exists in your
i18n files.

🧹 Nitpick comments (6)

frontend/app/[locale]/blog/[slug]/PostDetails.tsx (1)

508-516: Duplicate getCategoryLabel function.

This is identical to the function in frontend/app/[locale]/blog/category/[category]/page.tsx. It also has the same issue where 'growth' maps to t('categories.career') instead of a dedicated growth translation.

Consider extracting to a shared utility (e.g., @/lib/blog/category.ts) to ensure consistency and reduce maintenance burden.

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

79-119: Consider using an object lookup for icon mapping.

The if-else chain is functional but verbose. An object lookup would be more concise, easier to extend, and reduce repetition.

♻️ Suggested refactor

+const ICON_MAP: Record<string, React.ComponentType<{ className?: string; strokeWidth?: number }>> = {
+  github: Github,
+  linkedin: Linkedin,
+  youtube: Youtube,
+  facebook: Facebook,
+  x: Twitter,
+  twitter: Twitter,
+  dribbble: Dribbble,
+  instagram: Instagram,
+  telegram: Send,
+  website: Globe,
+  portfolio: Globe,
+};
+
 function SocialIcon({ platform }: { platform?: string }) {
   const normalized = (platform || '').trim().toLowerCase();
-  if (normalized === 'github') {
-    return <Github className={SOCIAL_ICON_CLASSNAME} strokeWidth={1.8} />;
-  }
-  if (normalized === 'linkedin') {
-    return <Linkedin className={SOCIAL_ICON_CLASSNAME} strokeWidth={1.8} />;
-  }
-  // ... remaining if statements
+  if (normalized === 'behance') {
+    return (
+      <span
+        aria-hidden="true"
+        className="inline-flex h-3.5 w-3.5 items-center justify-center rounded-full border border-current text-[8px] font-semibold text-gray-900 transition-colors group-hover:text-[var(--accent-primary)] dark:text-gray-100"
+      >
+        B
+      </span>
+    );
+  }
+  const IconComponent = ICON_MAP[normalized] || LinkIcon;
+  return <IconComponent className={SOCIAL_ICON_CLASSNAME} strokeWidth={1.8} />;
 }

---

212-227: Type assertion is unsafe but has runtime fallback.

The cast as 'tech' | 'career' | ... asserts a type that may not match the actual input. The fallback || categoryName handles this at runtime, so functionality is preserved. For stricter typing, you could use a type guard or avoid the assertion entirely since the lookup already handles missing keys.

---

332-341: Dependency array uses optional chaining expression.

Using resolvedAuthor?.norm in the dependency array works but may trigger ESLint exhaustive-deps warnings. The linter typically expects the full object resolvedAuthor or a stable primitive. If you want to depend only on the norm value, consider extracting it:

const authorNorm = resolvedAuthor?.norm;
useEffect(() => {
  if (!authorNorm) return;
  // ...
}, [authorNorm]);

Also note this scrolls on initial page load when author is present in URL params, which may or may not be the intended UX.

---

395-399: Consider using next/image for the featured post image.

The native <img> tag doesn't benefit from Next.js image optimization (automatic lazy loading, responsive sizing, modern formats). Since Image from next/image is already imported (line 4) and used for author images (line 459), consider using it here as well for consistency and performance.

♻️ Suggested change

-                  <img
-                    src={featuredPost.mainImage}
-                    alt={featuredPost.title}
-                    className="block w-full h-full object-cover transition-transform duration-300 scale-[1.02] group-hover:scale-[1.05] border-0"
-                  />
+                  <Image
+                    src={featuredPost.mainImage}
+                    alt={featuredPost.title}
+                    fill
+                    className="object-cover transition-transform duration-300 scale-[1.02] group-hover:scale-[1.05]"
+                  />

---

323-325: Silent error handling in fetch.

The catch block silently ignores errors. While acceptable for this non-critical author profile fetch, consider logging in development for easier debugging:

.catch((error) => {
  if (!active) return;
  if (process.env.NODE_ENV === 'development') {
    console.warn('Failed to fetch author profile:', error);
  }
});

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Bug: Incorrect regex escaping breaks category URL slugification.

The regex patterns have double-escaped backslashes that won't match whitespace correctly:

• [^a-z0-9\\s-] will match literal \ and s characters, not whitespace
• \\s+ will match literal \s+ string, not whitespace sequences

This will produce malformed category URLs for categories containing spaces.

🐛 Proposed fix

   const categoryHref = categoryLabel
     ? `/blog/category/${categoryLabel
         .toLowerCase()
-        .replace(/[^a-z0-9\\s-]/g, '')
-        .replace(/\\s+/g, '-')}`
+        .replace(/[^a-z0-9\s-]/g, '')
+        .replace(/\s+/g, '-')}`
     : null;
   const categoryUrl =
     baseUrl && categoryLabel
       ? `${baseUrl}/${locale}/blog/category/${categoryLabel
           .toLowerCase()
-          .replace(/[^a-z0-9\\s-]/g, '')
-          .replace(/\\s+/g, '-')}`
+          .replace(/[^a-z0-9\s-]/g, '')
+          .replace(/\s+/g, '-')}`
       : null;

Also consider extracting this slugification logic to a shared utility to match the slugify function already defined in frontend/app/[locale]/blog/category/[category]/page.tsx (lines 174-180).

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	const categoryHref = categoryLabel
	? `/blog/category/${categoryLabel
	.toLowerCase()
	.replace(/[^a-z0-9\\s-]/g, '')
	.replace(/\\s+/g, '-')}`
	: null;
	const categoryUrl =
	baseUrl && categoryLabel
	? `${baseUrl}/${locale}/blog/category/${categoryLabel
	.toLowerCase()
	.replace(/[^a-z0-9\\s-]/g, '')
	.replace(/\\s+/g, '-')}`
	: null;
	const categoryHref = categoryLabel
	? `/blog/category/${categoryLabel
	.toLowerCase()
	.replace(/[^a-z0-9\s-]/g, '')
	.replace(/\s+/g, '-')}`
	: null;
	const categoryUrl =
	baseUrl && categoryLabel
	? `${baseUrl}/${locale}/blog/category/${categoryLabel
	.toLowerCase()
	.replace(/[^a-z0-9\s-]/g, '')
	.replace(/\s+/g, '-')}`
	: null;

🤖 Prompt for AI Agents

In `@frontend/app/`[locale]/blog/[slug]/PostDetails.tsx around lines 223 - 235,
The category slugification is using double-escaped sequences (`\\s`) so the
regexes in categoryHref and categoryUrl don't match whitespace; update those to
use proper regexes (/[^a-z0-9\s-]/g and /\s+/g) or, better, reuse the existing
slugify implementation from
frontend/app/[locale]/blog/category/[category]/page.tsx by extracting it into a
shared utility and importing it into PostDetails.tsx, then replace the inline
chain on categoryLabel with a call to that shared slugify function to produce
the slug for categoryHref and categoryUrl.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Potential bug: 'growth' maps to the same label as 'career'.

Both 'growth' and 'career' return t('categories.career'). If these are distinct categories, 'growth' likely needs its own translation key.

Additionally, this getCategoryLabel function is duplicated in PostDetails.tsx. Consider extracting it to a shared utility (e.g., @/lib/blog/category.ts) to maintain consistency and avoid drift.

🔧 Proposed fix for the mapping

 function getCategoryLabel(categoryName: string, t: (key: string) => string) {
   const key = categoryName.toLowerCase();
-  if (key === 'growth') return t('categories.career');
+  if (key === 'growth') return t('categories.growth');
   if (key === 'tech') return t('categories.tech');
   if (key === 'career') return t('categories.career');
   if (key === 'insights') return t('categories.insights');
   if (key === 'news') return t('categories.news');
   return categoryName;
 }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	function getCategoryLabel(categoryName: string, t: (key: string) => string) {
	const key = categoryName.toLowerCase();
	if (key === 'growth') return t('categories.career');
	if (key === 'tech') return t('categories.tech');
	if (key === 'career') return t('categories.career');
	if (key === 'insights') return t('categories.insights');
	if (key === 'news') return t('categories.news');
	return categoryName;
	}
	function getCategoryLabel(categoryName: string, t: (key: string) => string) {
	const key = categoryName.toLowerCase();
	if (key === 'growth') return t('categories.growth');
	if (key === 'tech') return t('categories.tech');
	if (key === 'career') return t('categories.career');
	if (key === 'insights') return t('categories.insights');
	if (key === 'news') return t('categories.news');
	return categoryName;
	}

🤖 Prompt for AI Agents

In `@frontend/app/`[locale]/blog/category/[category]/page.tsx around lines 182 -
190, getCategoryLabel currently maps both 'growth' and 'career' to
t('categories.career') and is duplicated; change the 'growth' branch to return
its own translation key (e.g., t('categories.growth')) in the getCategoryLabel
function and extract the function into a shared utility (suggested module:
export getCategoryLabel from "@/lib/blog/category.ts"), then replace the local
implementations in page.tsx and PostDetails.tsx with an import from that utility
so both components use the same mapping; update any imports/usages accordingly
and add/verify the new translation key exists in your i18n files.