Skip to content

Replace array index with slug for stable blog URLs #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: feature/blogsPage
Choose a base branch
from
Draft

Replace array index with slug for stable blog URLs #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
612b993
Initial plan
Copilot Nov 13, 2025
f03f795
Use slug instead of array index for blog URLs
Copilot Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions app/blogs/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,31 @@ import { PortableText } from "@portabletext/react";
type Blog = {
_id: string;
title: string;
slug: { current: string };
mainImage?: { asset: { url: string } };
author?: { name: string };
body?: any; // PortableText content
publishedAt?: string;
category?: string;
};

async function getBlogs(): Promise<Blog[]> {
const query = `*[_type=="blog"]|order(publishedAt desc)[0...50]{
async function getBlogBySlug(slug: string): Promise<Blog | null> {
const query = `*[_type=="blog" && slug.current == $slug][0]{
_id,
title,
slug,
"mainImage": mainImage.asset->{url},
"author": author-> { name },
body,
publishedAt,
category
}`;
return client.fetch(query);
return client.fetch(query, { slug });
}

export default function BlogDetailPage() {
const params = useParams();
const slug = params.slug as string;
const numericId = parseInt(slug, 10);

const [blog, setBlog] = useState<Blog | null>(null);
const [loading, setLoading] = useState(true);
Expand All @@ -46,10 +47,10 @@ export default function BlogDetailPage() {
const fetchBlog = async () => {
try {
setLoading(true);
const blogs = await getBlogs();
const fetchedBlog = await getBlogBySlug(slug);

if (numericId > 0 && numericId <= blogs.length) {
setBlog(blogs[numericId - 1]);
if (fetchedBlog) {
setBlog(fetchedBlog);
} else {
setError("Blog not found.");
}
Expand All @@ -61,7 +62,7 @@ export default function BlogDetailPage() {
}
};
fetchBlog();
}, [numericId]);
}, [slug]);

if (loading) return <p className="text-center mt-10">Loading blog...</p>;
if (error) return <p className="text-center mt-10 text-red-600">{error}</p>;
Expand Down
45 changes: 22 additions & 23 deletions app/blogs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useState, useEffect } from "react";
type Blog = {
_id: string;
title: string;
slug: { current: string };
mainImage?: { asset: { url: string } };
author?: { name: string };
excerpt?: string;
Expand All @@ -19,6 +20,7 @@ async function getBlogs(): Promise<Blog[]> {
const query = `*[_type=="blog"]|order(publishedAt desc)[0...50]{
_id,
title,
slug,
"mainImage": mainImage.asset->{url},
"author": author-> { name },
excerpt,
Expand Down Expand Up @@ -59,30 +61,27 @@ export default function BlogsPage() {
<h1 className="text-4xl font-bold text-center mb-12 text-blue-500">Blogs</h1>

<section className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 bg-black width-full px-20 pb-8">
{blogs.map((blog, index) => {
const numericId = index + 1; // Numeric ID
return (
<article key={blog._id} className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md flex flex-col">
{blog.mainImage?.url && (
<div className="relative w-full h-56">
<Image src={blog.mainImage.url} alt={blog.title} fill className="object-cover" />
</div>
)}
<div className="p-4 flex flex-col flex-1 justify-between">
<h2 className="text-xl font-semibold mb-2">{blog.title}</h2>
{blog.excerpt && <p className="text-gray-700 line-clamp-3">{blog.excerpt}</p>}
<div className="mt-4">
<Link
href={`/blogs/${numericId}`}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm"
>
View Blog
</Link>
</div>
{blogs.map((blog) => (
<article key={blog._id} className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md flex flex-col">
{blog.mainImage?.url && (
<div className="relative w-full h-56">
<Image src={blog.mainImage.url} alt={blog.title} fill className="object-cover" />
</div>
</article>
);
})}
)}
<div className="p-4 flex flex-col flex-1 justify-between">
<h2 className="text-xl font-semibold mb-2">{blog.title}</h2>
{blog.excerpt && <p className="text-gray-700 line-clamp-3">{blog.excerpt}</p>}
<div className="mt-4">
<Link
href={`/blogs/${blog.slug.current}`}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm"
>
View Blog
</Link>
</div>
</div>
</article>
))}
</section>
</main>
);
Expand Down