import React from "react"; import { client } from "@/lib/sanity"; import { Metadata } from "next"; import BlogCards from "@/components/cards/BlogCards"; import { Rss } from "lucide-react"; import { Button } from "@/components/ui/button"; import Link from "next/link"; export const dynamic = "force-static"; export async function generateMetadata(props: { params: Promise<{ id: string }>; }): Promise<Metadata> { return { title: "Blog - SVR.JS", description: "Welcome to the SVR.JS Blog! Discover web development, security tips, and server admin insights. Stay updated with the latest SVR.JS news!", alternates: { canonical: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/blog/page/${(await props.params).id}` }, openGraph: { title: "Blog - SVR.JS", description: "Welcome to the SVR.JS Blog! Discover web development, security tips, and server admin insights. Stay updated with the latest SVR.JS news!", url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/blog/page/${(await props.params).id}`, type: "website", images: [ { url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/metadata/svrjs-cover.png`, width: 800, height: 600, alt: "Blog - SVR.JS" } ] }, twitter: { card: "summary_large_image", site: "@SVR_JS", title: "Blog - SVR.JS", description: "Welcome to the SVR.JS Blog! Discover web development, security tips, and server admin insights. Stay updated with the latest SVR.JS news!", images: [ `${process.env.NEXT_PUBLIC_WEBSITE_URL}/metadata/svrjs-cover.png` ], creator: "@SVR_JS" } }; } const BlogPage = async (props: { params: Promise<{ id: string }> }) => { const params = await props.params; // Optionally, you can fetch some initial data here if needed. let id = parseInt(params.id); if (isNaN(id)) id = 1; return ( <section id="blog" className="wrapper container py-24 md:py-28 gap-2 flex-center flex-col" > <h1 className="text-3xl md:text-5xl 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"> SVR.JS Blog </h1> <p className="text-muted-foreground flex-center mb-2"> Our blog has web development, web server administration, and web application security tips. <Link href="/rss.xml" rel="alternate" type="application/rss+xml"> <Button variant={"link"} className="mx-0 px-2"> <Rss className="w-5 h-5 mr-1" /> RSS feed </Button> </Link> </p> <BlogCards page={id} /> </section> ); }; export async function generateStaticParams() { // Change in BlogCards component and in /api/revalidate route too! const cardsPerPage = 6; const totalPostsQuery = `count(*[_type == 'blog'])`; const totalPosts: number = await client.fetch( totalPostsQuery, {}, { cache: "no-store" } ); const totalPages = Math.ceil(totalPosts / cardsPerPage); let ids: any[] = []; for (let i = 1; i <= totalPages; i++) { ids.push({ id: i.toString() }); } return ids; } export default BlogPage;