+
+
{excerpt}
)} -
- {post.author?.name && (
-
-
- {formattedDate && ·}
+
+ {(post.author?.name || formattedDate || categoryLabel) && (
+ {}} />;
+}
diff --git a/frontend/components/blog/BlogCategoryLinks.tsx b/frontend/components/blog/BlogCategoryLinks.tsx
new file mode 100644
index 00000000..01b3f458
--- /dev/null
+++ b/frontend/components/blog/BlogCategoryLinks.tsx
@@ -0,0 +1,81 @@
+'use client';
+
+import { Link, usePathname } from '@/i18n/routing';
+import { cn } from '@/lib/utils';
+
+type Category = {
+ _id: string;
+ title: string;
+};
+
+type BlogCategoryLinksProps = {
+ categories: Category[];
+ className?: string;
+ linkClassName?: string;
+ onNavigate?: () => void;
+};
+
+export function BlogCategoryLinks({
+ categories,
+ className,
+ linkClassName,
+ onNavigate,
+}: BlogCategoryLinksProps) {
+ const pathname = usePathname();
+ const baseLink =
+ linkClassName ||
+ 'rounded-md px-3 py-2 text-sm font-medium transition-colors ' +
+ 'hover:bg-secondary hover:text-foreground ' +
+ 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +
+ 'focus-visible:ring-offset-2 focus-visible:ring-offset-background';
+
+ const items = categories
+ .map(category => ({
+ ...category,
+ slug: slugify(category.title || ''),
+ displayTitle: category.title === 'Growth' ? 'Career' : category.title,
+ }))
+ .filter(category => category.slug);
+
+ return (
+
+ );
+}
+
+function slugify(value: string) {
+ return value
+ .toLowerCase()
+ .trim()
+ .replace(/[^a-z0-9\s-]/g, '')
+ .replace(/\s+/g, '-');
+}
diff --git a/frontend/components/blog/BlogFilters.tsx b/frontend/components/blog/BlogFilters.tsx
index 8b794294..7dfeeb42 100644
--- a/frontend/components/blog/BlogFilters.tsx
+++ b/frontend/components/blog/BlogFilters.tsx
@@ -1,9 +1,10 @@
'use client';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
import Image from 'next/image';
import { useLocale, useTranslations } from 'next-intl';
import { useSearchParams } from 'next/navigation';
+import { usePathname, useRouter } from '@/i18n/routing';
import BlogGrid from '@/components/blog/BlogGrid';
import { Link } from '@/i18n/routing';
@@ -76,12 +77,16 @@ function plainTextFromPortableText(value?: PortableText): string {
return value
.filter(block => block?._type === 'block')
.map(block =>
- (block.children || []).map(child => child.text || '').join('')
+ (block.children || []).map(child => child.text || '').join(' ')
)
- .join('\n')
+ .join(' ')
.trim();
}
+function normalizeSearchText(value: string) {
+ return value.toLowerCase().replace(/\s+/g, ' ').trim();
+}
+
function plainTextExcerpt(value?: PortableText): string {
return plainTextFromPortableText(value);
}
@@ -103,6 +108,8 @@ export default function BlogFilters({
const tNav = useTranslations('navigation');
const locale = useLocale();
const searchParams = useSearchParams();
+ const router = useRouter();
+ const pathname = usePathname();
const [selectedAuthor, setSelectedAuthor] = useState<{
name: string;
norm: string;
@@ -131,7 +138,7 @@ export default function BlogFilters({
return categories
.map(category => ({
norm: normalizeTag(category.title),
- name: category.title,
+ name: category.title === 'Growth' ? 'Career' : category.title,
}))
.filter(category => category.norm);
}
@@ -145,30 +152,48 @@ export default function BlogFilters({
}
}
return Array.from(map.entries())
- .map(([norm, name]) => ({ norm, name }))
+ .map(([norm, name]) => ({
+ norm,
+ name: name === 'Growth' ? 'Career' : name,
+ }))
.sort((a, b) => a.name.localeCompare(b.name));
}, [posts, categories]);
const categoryParam = useMemo(() => {
return searchParams?.get('category') || '';
}, [searchParams]);
+ const resolvedCategory = useMemo(() => {
+ const normParam = normalizeTag(categoryParam);
+ if (!normParam) return selectedCategory;
+ const matched = allCategories.find(category => category.norm === normParam);
+ return {
+ name: matched?.name || categoryParam,
+ norm: normParam,
+ };
+ }, [allCategories, categoryParam, selectedCategory]);
+ const searchQuery = useMemo(() => {
+ return (searchParams?.get('search') || '').trim();
+ }, [searchParams]);
+ const searchQueryLower = searchQuery.toLowerCase();
+ const didClearSearchRef = useRef(false);
useEffect(() => {
- const normParam = normalizeTag(categoryParam);
- if (!normParam) {
- setSelectedCategory(null);
+ if (didClearSearchRef.current) return;
+ if (!searchQuery) {
+ didClearSearchRef.current = true;
return;
}
- const matchedCategory = allCategories.find(
- category => category.norm === normParam
- );
- setSelectedCategory(prev => {
- if (prev?.norm === normParam) return prev;
- return {
- name: matchedCategory?.name || categoryParam,
- norm: normParam,
- };
- });
- }, [allCategories, categoryParam]);
+ if (typeof performance === 'undefined') return;
+ const [navEntry] = performance.getEntriesByType('navigation');
+ const navType = (navEntry as PerformanceNavigationTiming | undefined)?.type;
+ if (navType !== 'reload') return;
+ const params = new URLSearchParams(searchParams?.toString() || '');
+ params.delete('search');
+ const nextPath = params.toString() ? `${pathname}?${params}` : pathname;
+ router.replace(nextPath);
+ didClearSearchRef.current = true;
+ }, [pathname, router, searchParams, searchQuery]);
+
+ // categoryParam is handled via resolvedCategory to avoid state updates in effects.
const filteredPosts = useMemo(() => {
return posts.filter(post => {
@@ -177,14 +202,27 @@ export default function BlogFilters({
if (authorName !== selectedAuthor.norm) return false;
}
- if (selectedCategory) {
+ if (resolvedCategory) {
const postCategories = (post.categories || []).map(normalizeTag);
- if (!postCategories.includes(selectedCategory.norm)) return false;
+ if (!postCategories.includes(resolvedCategory.norm)) return false;
+ }
+
+ if (searchQueryLower) {
+ const titleText = normalizeSearchText(post.title);
+ const bodyText = normalizeSearchText(
+ plainTextFromPortableText(post.body)
+ );
+ if (
+ !titleText.includes(searchQueryLower) &&
+ !bodyText.includes(searchQueryLower)
+ ) {
+ return false;
+ }
}
return true;
});
- }, [posts, selectedAuthor, selectedCategory]);
+ }, [posts, resolvedCategory, selectedAuthor, searchQueryLower]);
const selectedAuthorData = selectedAuthor?.data || null;
const authorBioText = useMemo(() => {
@@ -193,13 +231,13 @@ export default function BlogFilters({
return (
+ {post.author?.name && (
+
+ )}
+ {post.author?.name && formattedDate && ·}
{formattedDate && {formattedDate}}
+ {(formattedDate || post.author?.name) && categoryLabel && (
+ ·
+ )}
+ {categoryLabel && {categoryLabel}}
)}
diff --git a/frontend/components/blog/BlogCategoryGrid.tsx b/frontend/components/blog/BlogCategoryGrid.tsx
new file mode 100644
index 00000000..349ef1ed
--- /dev/null
+++ b/frontend/components/blog/BlogCategoryGrid.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import BlogGrid from '@/components/blog/BlogGrid';
+import type { Post } from '@/components/blog/BlogFilters';
+
+export function BlogCategoryGrid({ posts }: { posts: Post[] }) {
+ if (!posts.length) return null;
+
+ return
- {!selectedAuthor && featuredPost && (
-
-
+ {!selectedAuthor && featuredPost && (
+
+
{featuredPost.mainImage && (
setSelectedCategory(null)}
className={
- !selectedCategory
+ !resolvedCategory
? 'rounded-full border border-[#ff00ff] bg-[#ff00ff]/10 px-4 py-2 text-sm font-medium text-[#ff00ff] transition'
: 'rounded-full border border-gray-300 bg-white px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800'
}
@@ -319,7 +357,7 @@ export default function BlogFilters({
)
}
className={
- selectedCategory?.norm === category.norm
+ resolvedCategory?.norm === category.norm
? 'rounded-full border border-[#ff00ff] bg-[#ff00ff]/10 px-4 py-2 text-sm font-medium text-[#ff00ff] transition'
: 'rounded-full border border-gray-300 bg-white px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800'
}
diff --git a/frontend/components/blog/BlogHeaderSearch.tsx b/frontend/components/blog/BlogHeaderSearch.tsx
new file mode 100644
index 00000000..002c3329
--- /dev/null
+++ b/frontend/components/blog/BlogHeaderSearch.tsx
@@ -0,0 +1,210 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Search } from 'lucide-react';
+import { useRouter } from '@/i18n/routing';
+
+type PostSearchItem = {
+ _id: string;
+ title?: string;
+ body?: Array<{ _type: string; children?: Array<{ text?: string }> }>;
+ slug?: { current?: string };
+};
+
+type SearchResult = PostSearchItem & { snippet?: string };
+
+function extractSnippet(body: PostSearchItem['body'], query: string) {
+ const text = (body || [])
+ .filter(block => block?._type === 'block')
+ .map(block =>
+ (block.children || []).map(child => child.text || '').join(' ')
+ )
+ .join(' ')
+ .replace(/\s+/g, ' ')
+ .trim();
+ if (!text) return '';
+ const lower = text.toLowerCase();
+ const idx = lower.indexOf(query.toLowerCase());
+ if (idx === -1) return text.slice(0, 90);
+ const start = Math.max(0, idx - 36);
+ const end = Math.min(text.length, idx + 54);
+ const prefix = start > 0 ? '...' : '';
+ const suffix = end < text.length ? '...' : '';
+ return `${prefix}${text.slice(start, end)}${suffix}`;
+}
+
+const SEARCH_ENDPOINT = '/api/blog-search';
+
+export function BlogHeaderSearch() {
+ const [open, setOpen] = useState(false);
+ const [value, setValue] = useState('');
+ const [items, setItems] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const inputRef = useRef(null);
+ const router = useRouter();
+ const debounceRef = useRef(null);
+
+ useEffect(() => {
+ if (!open) return;
+ inputRef.current?.focus();
+ }, [open]);
+
+ useEffect(() => {
+ if (!open || items.length || isLoading) return;
+ let active = true;
+ setIsLoading(true);
+ fetch(SEARCH_ENDPOINT, { cache: 'no-store' })
+ .then(response => (response.ok ? response.json() : []))
+ .then((result: PostSearchItem[]) => {
+ if (!active) return;
+ setItems(Array.isArray(result) ? result : []);
+ })
+ .catch(() => {
+ if (!active) return;
+ setItems([]);
+ })
+ .finally(() => {
+ if (!active) return;
+ setIsLoading(false);
+ });
+ return () => {
+ active = false;
+ };
+ }, [open, items.length, isLoading]);
+
+ useEffect(() => {
+ if (!open) return;
+ if (debounceRef.current) window.clearTimeout(debounceRef.current);
+ debounceRef.current = window.setTimeout(() => {
+ const query = value.trim();
+ router.replace(query ? `/blog?search=${encodeURIComponent(query)}` : '/blog');
+ }, 300);
+ return () => {
+ if (debounceRef.current) window.clearTimeout(debounceRef.current);
+ };
+ }, [open, router, value]);
+
+ const results = useMemo(() => {
+ const query = value.trim().toLowerCase();
+ if (!query) return [];
+ const words = query.split(/\s+/).filter(Boolean);
+ return items
+ .filter(item => {
+ const title = (item.title || '').toLowerCase();
+ const bodyText = (item.body || [])
+ .filter(block => block?._type === 'block')
+ .map(block =>
+ (block.children || []).map(child => child.text || '').join(' ')
+ )
+ .join(' ')
+ .toLowerCase();
+ return words.every(
+ word => title.includes(word) || bodyText.includes(word)
+ );
+ })
+ .slice(0, 6)
+ .map(item => ({
+ ...item,
+ snippet: extractSnippet(item.body, query),
+ }));
+ }, [items, value]);
+
+ const submit = (event?: React.FormEvent) => {
+ if (event) event.preventDefault();
+ const query = value.trim();
+ router.push(query ? `/blog?search=${encodeURIComponent(query)}` : '/blog');
+ setOpen(false);
+ };
+
+ const clear = () => {
+ setValue('');
+ setOpen(false);
+ };
+
+ return (
+ ([]);
+ const pathname = usePathname();
+ const searchParams = useSearchParams();
+ const currentCategory = searchParams.get('category');
+
+ useEffect(() => {
+ let active = true;
+ client
+ .fetch(categoriesQuery)
+ .then(result => {
+ if (!active) return;
+ setCategories(result || []);
+ })
+ .catch(() => {
+ if (!active) return;
+ setCategories([]);
+ });
+ return () => {
+ active = false;
+ };
+ }, []);
+
+ const baseLink =
+ linkClassName ||
+ 'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-secondary hover:text-foreground';
+
+ const containerClassName = cn('flex items-center gap-1', className);
+ const isBlogPath = pathname.startsWith('/blog');
+
+ const items = useMemo(() => {
+ return categories
+ .filter(category => category.title)
+ .map(category => ({
+ ...category,
+ isActive: isBlogPath && currentCategory === category.title,
+ }));
+ }, [categories, currentCategory, isBlogPath]);
+
+ if (!items.length) return null;
+
+ return (
+
+ );
+}
diff --git a/frontend/components/header/AppChrome.tsx b/frontend/components/header/AppChrome.tsx
index d38e67b3..55a68e77 100644
--- a/frontend/components/header/AppChrome.tsx
+++ b/frontend/components/header/AppChrome.tsx
@@ -9,16 +9,19 @@ import { CartProvider } from '@/components/shop/cart-provider';
type AppChromeProps = {
userExists: boolean;
showAdminLink?: boolean;
+ blogCategories?: Array<{ _id: string; title: string }>;
children: React.ReactNode;
};
export function AppChrome({
userExists,
showAdminLink = false,
+ blogCategories = [],
children,
}: AppChromeProps) {
const segments = useSelectedLayoutSegments();
const isShop = segments.includes('shop');
+ const isBlog = segments.includes('blog');
if (isShop) {
return (
@@ -28,6 +31,7 @@ export function AppChrome({
variant="shop"
userExists={userExists}
showAdminLink={showAdminLink}
+ blogCategories={blogCategories}
/>
{children}
@@ -36,9 +40,17 @@ export function AppChrome({
);
}
+ if (isBlog) {
+ return <>{children};
+ }
+
return (
<>
- {children}
+
+ );
+ }
+
return {children} ;
}
diff --git a/frontend/components/header/UnifiedHeader.tsx b/frontend/components/header/UnifiedHeader.tsx
index d5080842..d69970d8 100644
--- a/frontend/components/header/UnifiedHeader.tsx
+++ b/frontend/components/header/UnifiedHeader.tsx
@@ -8,42 +8,47 @@ import { LogoutButton } from '@/components/auth/logoutButton';
import { CartButton } from '@/components/shop/header/cart-button';
import { NavLinks } from '@/components/shop/header/nav-links';
+import { BlogCategoryLinks } from '@/components/blog/BlogCategoryLinks';
+import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
import { AppMobileMenu } from '@/components/header/AppMobileMenu';
-export type UnifiedHeaderVariant = 'platform' | 'shop';
+export type UnifiedHeaderVariant = 'platform' | 'shop' | 'blog';
export type UnifiedHeaderProps = {
variant: UnifiedHeaderVariant;
userExists: boolean;
showAdminLink?: boolean;
+ enableSearch?: boolean;
+ blogCategories?: Array<{ _id: string; title: string }>;
};
export function UnifiedHeader({
variant,
userExists,
showAdminLink = false,
+ blogCategories = [],
}: UnifiedHeaderProps) {
const isShop = variant === 'shop';
+ const isBlog = variant === 'blog';
+ const brandHref = isShop ? '/shop' : isBlog ? '/blog' : '/';
+ const brandBadge = isShop ? 'Shop' : isBlog ? 'Blog' : '';
return (
+
+
+ {open && (
+
+ );
+}
diff --git a/frontend/components/blog/BlogNavLinks.tsx b/frontend/components/blog/BlogNavLinks.tsx
new file mode 100644
index 00000000..b2cb7456
--- /dev/null
+++ b/frontend/components/blog/BlogNavLinks.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { usePathname, Link } from '@/i18n/routing';
+import { useSearchParams } from 'next/navigation';
+import groq from 'groq';
+import { client } from '@/client';
+import { cn } from '@/lib/utils';
+
+type Category = {
+ _id: string;
+ title: string;
+};
+
+const categoriesQuery = groq`
+ *[_type == "category"] | order(orderRank asc) {
+ _id,
+ title
+ }
+`;
+
+type BlogNavLinksProps = {
+ className?: string;
+ linkClassName?: string;
+ onNavigate?: () => void;
+};
+
+export function BlogNavLinks({
+ className,
+ linkClassName,
+ onNavigate,
+}: BlogNavLinksProps) {
+ const [categories, setCategories] = useState
+
+ {value && results.length > 0 && (
+
+ )}
+
+ {results.map(result => (
+
+ ))}
+
+ )}
+ {value && !results.length && !isLoading && (
+
+ No matches
+
+ )}
+
-
+
DevLovers
- Shop
+ {brandBadge}
@@ -54,6 +59,8 @@ export function UnifiedHeader({
>
{isShop ? (
{SITE_LINKS.map(link => (
@@ -92,6 +99,7 @@ export function UnifiedHeader({
) : null}
+ {isBlog &&
+ {isBlog &&