added somestuffs

app/(root)/blog/[slug]/page.tsx

@@ -4,6 +4,8 @@ import Image from "next/image";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
+import NotFound from "@/app/not-found";
+import { Metadata } from "next";
 
 async function getData(slug: string) {
 	const query = `
@@ -25,6 +27,48 @@ interface BlogSlugArticle {
 	titleImage: string;
 }
 
+export async function generateMetadata({
+	params,
+}: {
+	params: { slug: string };
+}): Promise<Metadata> {
+	const data = await getData(params.slug);
+
+	if (!data) {
+		return {
+			title: "Not Found",
+			description: "Blog post not found",
+		};
+	}
+
+	return {
+		title: data.title,
+		description: data.smallDescription,
+		openGraph: {
+			title: data.title,
+			description: data.smallDescription,
+			url: `https://svrjs.org/blog/${data.currentSlug}`,
+			type: "website",
+			images: [
+				{
+					url: urlFor(data.titleImage).url(),
+					width: 800,
+					height: 600,
+					alt: data.title,
+				},
+			],
+		},
+		twitter: {
+			card: "summary_large_image",
+			site: "@SVR_JS",
+			title: data.title,
+			description: data.smallDescription,
+			images: [urlFor(data.titleImage).url()],
+			creator: "@SVR_JS",
+		},
+	};
+}
+
 export default async function BlogSlugArticle({
 	params,
 }: {
@@ -32,10 +76,15 @@ export default async function BlogSlugArticle({
 }) {
 	const data: BlogSlugArticle = await getData(params.slug);
 
+	if (!data) {
+		return <NotFound />;
+	}
+
 	return (
+		<>
 			<section className="max-w-5xl container mx-auto py-8 md:py-28 flex flex-col items-center px-4">
 				<Link
-				href="/blog"
+					href="/blog?page=1"
 					className="self-start mb-8 text-primary hover:text-green-300 transition-all flex items-center"
 				>
 					<ArrowLeft className="mr-2" />
@@ -44,7 +93,7 @@ export default async function BlogSlugArticle({
 				<header className="text-start mb-12 w-full">
 					{data.titleImage && (
 						<div className="mb-8">
-						<h1 className="text-3xl md:text-4xl mb-12 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+							<h1 className="text-3xl md:text-5xl mb-12 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 								{data.title}
 							</h1>
 							<Image
@@ -63,5 +112,6 @@ export default async function BlogSlugArticle({
 					<PortableText value={data.content} />
 				</article>
 			</section>
+		</>
 	);
 }

app/(root)/blog/page.tsx

@@ -4,9 +4,41 @@ import BlogCards from "@/components/cards/BlogCards";
 
 export const metadata: Metadata = {
 	title: "Blog - SVRJS",
+	description:
+		"Welcome to the SVR.JS Blog! Explore our latest blog posts featuring web development, web application security, and web server administration tips. Stay tuned for the latest SVR.JS updates.",
+	openGraph: {
+		title: "Blog - SVRJS",
+		description:
+			"Welcome to the SVR.JS Blog! Explore our latest blog posts featuring web development, web application security, and web server administration tips. Stay tuned for the latest SVR.JS updates.",
+		url: "https://svrjs.org/blog",
+		type: "website",
+		images: [
+			{
+				url: "https://svrjs.vercel.app/metadata/svrjs-cover.png",
+				width: 800,
+				height: 600,
+				alt: "Blog - SVRJS",
+			},
+		],
+	},
+	twitter: {
+		card: "summary_large_image",
+		site: "@SVR_JS",
+		title: "Blog - SVRJS",
+		description:
+			"Welcome to the SVR.JS Blog! Explore our latest blog posts featuring web development, web application security, and web server administration tips. Stay tuned for the latest SVR.JS updates.",
+		images: ["https://svrjs.vercel.app/metadata/svrjs-cover.png"],
+		creator: "@SVR_JS",
+	},
 };
 
-const BlogPage = () => {
+const BlogPage = async ({
+	searchParams,
+}: {
+	searchParams: { page?: string };
+}) => {
+	// Optionally, you can fetch some initial data here if needed.
+
 	return (
 		<section
 			id="blog"
@@ -15,7 +47,7 @@ const BlogPage = () => {
 			<h1 className="text-3xl md:text-5xl mb-12 pb-1 md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				SVRJS Blog Post
 			</h1>
-			<BlogCards />
+			<BlogCards searchParams={searchParams} />
 		</section>
 	);
 };

components/cards/BlogCards.tsx

@@ -4,6 +4,14 @@ import Image from "next/image";
 import { ExternalLink } from "lucide-react";
 import { client, urlFor } from "@/lib/sanity";
 import { Card, CardContent } from "../ui/card";
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from "@/components/ui/pagination";
 
 interface BlogPostcard {
 	title: string;
@@ -12,26 +20,34 @@ interface BlogPostcard {
 	titleImage: string;
 }
 
-async function getData() {
+interface BlogCardsProps {
+	searchParams: { page?: string };
+}
+
+const BlogCards: React.FC<BlogCardsProps> = async ({ searchParams }) => {
+	const cardsPerPage = 6;
+	const currentPage = searchParams.page ? parseInt(searchParams.page) : 1;
+
+	// Fetch the blog posts
 	const query = `*[_type == 'blog'] | order(_createdAt desc) {
     title,
     smallDescription,
     "currentSlug": slug.current,
     titleImage
-}`;
+  }[${(currentPage - 1) * cardsPerPage}...${currentPage * cardsPerPage}]`;
 
-	const data = await client.fetch(query);
+	const posts: BlogPostcard[] = await client.fetch(query);
 
-	return data;
+	// Fetch the total number of blog posts
-}
+	const totalPostsQuery = `count(*[_type == 'blog'])`;
+	const totalPosts: number = await client.fetch(totalPostsQuery);
 
-const BlogCards = async () => {
+	const totalPages = Math.ceil(totalPosts / cardsPerPage);
-	const data: BlogPostcard[] = await getData();
-	console.log(data);
 
 	return (
+		<>
 			<section className="grid max-w-6xl gap-4 mx-auto sm:grid-cols-2 lg:grid-cols-3">
-			{data.map((post, idx) => (
+				{posts.map((post, idx) => (
 					<Card
 						className="group h-full w-full rounded-lg border overflow-hidden"
 						key={idx}
@@ -40,14 +56,15 @@ const BlogCards = async () => {
 							<div className="relative overflow-hidden rounded-t-lg">
 								<Image
 									src={urlFor(post.titleImage).url()}
-								alt="SVRJS Blog Cover"
+									alt={post.title}
 									width={500}
 									height={300}
+									priority
 									className="w-full object-cover transition-transform duration-200 group-hover:scale-105"
 								/>
 							</div>
 							<CardContent className="p-4">
-							<div className="flex-between mb-2 py-2 ">
+								<div className="flex-between mb-2 py-2">
 									<h3 className="text-xl font-semibold leading-tight">
 										{post.title}
 									</h3>
@@ -63,6 +80,35 @@ const BlogCards = async () => {
 					</Card>
 				))}
 			</section>
+			<div className="flex-center mt-12">
+				{totalPages > 1 && (
+					<Pagination>
+						<PaginationContent>
+							<PaginationItem>
+								{currentPage > 1 && (
+									<PaginationPrevious href={`?page=${currentPage - 1}`} />
+								)}
+							</PaginationItem>
+							{Array.from({ length: totalPages }).map((_, i) => (
+								<PaginationItem key={i}>
+									<PaginationLink
+										href={`?page=${i + 1}`}
+										isActive={currentPage === i + 1}
+									>
+										{i + 1}
+									</PaginationLink>
+								</PaginationItem>
+							))}
+							<PaginationItem>
+								{currentPage < totalPages && (
+									<PaginationNext href={`?page=${currentPage + 1}`} />
+								)}
+							</PaginationItem>
+						</PaginationContent>
+					</Pagination>
+				)}
+			</div>
+		</>
 	);
 };
 

components/ui/pagination.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

lib/sanity.ts

@@ -1,12 +1,14 @@
 import { createClient } from "next-sanity";
 import imageUrlBuilder from "@sanity/image-url";
 
-export const client = createClient({
+const config = {
-	apiVersion: "2023-05-03",
+	apiVersion: "2023-08-08",
 	dataset: "production",
 	projectId: `${process.env.SANITY_PROJECT_ID}`,
-	useCdn: false, // basically enable this for faster loading time
+	useCdn: false, // ensure fresh data
-});
+};
+
+export const client = createClient(config);
 
 const builder = imageUrlBuilder(client);