Sanity #155
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import groq from 'groq'; | ||
| import { notFound } from 'next/navigation'; | ||
| import { getTranslations } from 'next-intl/server'; | ||
| import { client } from '@/client'; | ||
| import { BlogCategoryGrid } from '@/components/blog/BlogCategoryGrid'; | ||
|
|
||
| export const revalidate = 0; | ||
|
|
||
| type Author = { | ||
| name?: string; | ||
| image?: string; | ||
| }; | ||
|
|
||
| type Post = { | ||
| _id: string; | ||
| title: string; | ||
| slug: { current: string }; | ||
| publishedAt?: string; | ||
| categories?: string[]; | ||
| mainImage?: string; | ||
| body?: any[]; | ||
| author?: Author; | ||
| }; | ||
|
|
||
| type Category = { | ||
| _id: string; | ||
| title: string; | ||
| }; | ||
|
|
||
| const categoriesQuery = groq` | ||
| *[_type == "category"] | order(orderRank asc) { | ||
| _id, | ||
| title | ||
| } | ||
| `; | ||
|
|
||
| export default async function BlogCategoryPage({ | ||
| params, | ||
| }: { | ||
| params: Promise<{ locale: string; category: string }>; | ||
| }) { | ||
| const { locale, category } = await params; | ||
| const t = await getTranslations({ locale, namespace: 'blog' }); | ||
| const categoryKey = String(category || '').toLowerCase(); | ||
| const categories: Category[] = await client | ||
| .withConfig({ useCdn: false }) | ||
| .fetch(categoriesQuery); | ||
| const matchedCategory = categories.find( | ||
| item => slugify(item.title) === categoryKey | ||
| ); | ||
|
|
||
| if (!matchedCategory) return notFound(); | ||
| const categoryTitle = matchedCategory.title; | ||
| const displayTitle = | ||
| categoryTitle === 'Growth' ? 'Career' : categoryTitle; | ||
|
|
||
| const posts: Post[] = await client.withConfig({ useCdn: false }).fetch( | ||
| groq` | ||
| *[_type == "post" && defined(slug.current) && $category in categories[]->title] | ||
| | order(publishedAt desc) { | ||
| _id, | ||
| "title": coalesce(title[$locale], title[lower($locale)], title.uk, title.en, title.pl, title), | ||
| slug, | ||
| publishedAt, | ||
| "categories": categories[]->title, | ||
| "body": coalesce(body[$locale], body[lower($locale)], body.uk, body.en, body.pl, body)[]{ | ||
| ..., | ||
| children[]{ text } | ||
| }, | ||
| "mainImage": mainImage.asset->url, | ||
| "author": author->{ | ||
| "name": coalesce(name[$locale], name[lower($locale)], name.uk, name.en, name.pl, name), | ||
| "image": image.asset->url | ||
| } | ||
| } | ||
| `, | ||
| { locale, category: categoryTitle } | ||
| ); | ||
|
|
||
| return ( | ||
| <main className="max-w-6xl mx-auto px-6 py-12"> | ||
| <h1 className="text-4xl font-bold mb-4 text-center"> | ||
| {displayTitle} | ||
| </h1> | ||
| <div className="mt-12"> | ||
| <BlogCategoryGrid posts={posts} /> | ||
| </div> | ||
| {!posts.length && ( | ||
| <p className="text-center text-gray-500 mt-10">{t('noPosts')}</p> | ||
| )} | ||
| </main> | ||
| ); | ||
| } | ||
|
|
||
| function slugify(value: string) { | ||
| return value | ||
| .toLowerCase() | ||
| .trim() | ||
| .replace(/[^a-z0-9\s-]/g, '') | ||
| .replace(/\s+/g, '-'); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -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 <BlogGrid posts={posts} onAuthorSelect={() => {}} />; | ||||||||||||||||
|
Comment on lines
+6
to
+9
Contributor
There was a problem hiding this comment. Inconsistent empty-state handling compared to
Consider delegating to 💡 Suggested fix export function BlogCategoryGrid({ posts }: { posts: Post[] }) {
- if (!posts.length) return null;
-
return <BlogGrid posts={posts} onAuthorSelect={() => {}} />;
}📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||
| } | ||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <nav className={cn('flex items-center gap-1', className)} aria-label="Blog categories"> | ||
| {items.map(category => { | ||
| const href = `/blog/category/${category.slug}`; | ||
| const isActive = pathname === href; | ||
| return ( | ||
| <Link | ||
| key={category._id} | ||
| href={href} | ||
| onClick={onNavigate} | ||
| aria-current={isActive ? 'page' : undefined} | ||
| className={cn( | ||
| baseLink, | ||
| isActive ? 'bg-muted text-foreground' : 'text-muted-foreground' | ||
| )} | ||
| > | ||
| {category.displayTitle} | ||
| </Link> | ||
| ); | ||
| })} | ||
| <Link | ||
| href="/" | ||
| onClick={onNavigate} | ||
| aria-current={pathname === '/' ? 'page' : undefined} | ||
| className={cn( | ||
| baseLink, | ||
| pathname === '/' ? 'bg-muted text-foreground' : 'text-muted-foreground' | ||
| )} | ||
| > | ||
| Home | ||
| </Link> | ||
| </nav> | ||
| ); | ||
| } | ||
|
|
||
| function slugify(value: string) { | ||
| return value | ||
| .toLowerCase() | ||
| .trim() | ||
| .replace(/[^a-z0-9\s-]/g, '') | ||
| .replace(/\s+/g, '-'); | ||
| } | ||
|
Comment on lines
+75
to
+81
Contributor
There was a problem hiding this comment. 🛠️ Refactor suggestion | 🟠 Major Duplicate There's already a more robust
This local implementation is simpler but may produce inconsistent slugs for edge cases (e.g., accented characters). ♻️ Suggested fix 'use client';
import { Link, usePathname } from '@/i18n/routing';
import { cn } from '@/lib/utils';
+import { slugify } from '@/lib/shop/slug';
// ... rest of component ...
-function slugify(value: string) {
- return value
- .toLowerCase()
- .trim()
- .replace(/[^a-z0-9\s-]/g, '')
- .replace(/\s+/g, '-');
-}🤖 Prompt for AI Agents |
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Category fetch lacks error handling.
If the Sanity client fetch fails, this will throw and crash the layout. Consider wrapping in try-catch with a fallback to an empty array:
This ensures the layout remains functional even if the CMS is temporarily unavailable.
🤖 Prompt for AI Agents