svrjs-nextjs-website/app/(root)/blog/[slug]/page.tsx

232 lines
6.4 KiB
TypeScript
Raw Normal View History

2024-08-08 11:21:56 +02:00
import { client, urlFor } from "@/lib/sanity";
2024-08-26 17:26:02 +02:00
import { PortableText, PortableTextComponents } from "@portabletext/react";
2024-08-08 11:21:56 +02:00
import Image from "next/image";
import Link from "next/link";
2024-08-29 17:56:11 +02:00
import { ArrowLeft, Rss } from "lucide-react";
2024-08-08 11:21:56 +02:00
import { Separator } from "@/components/ui/separator";
2024-08-20 16:28:54 +02:00
import { notFound } from "next/navigation";
2024-08-08 19:23:56 +02:00
import { Metadata } from "next";
2024-08-20 16:28:54 +02:00
import { format } from "date-fns";
2024-08-26 17:26:02 +02:00
import Prism from "prismjs";
2024-08-26 18:20:10 +02:00
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-python";
import "prismjs/components/prism-php";
2024-09-08 13:31:40 +02:00
import "prismjs/components/prism-bash";
import "prismjs/components/prism-sql";
import "prismjs/components/prism-yaml";
import "prismjs/components/prism-markdown";
2024-09-08 15:36:30 +02:00
import "prismjs/components/prism-json";
import "prismjs/components/prism-perl";
2024-08-26 18:20:10 +02:00
2024-08-26 17:26:02 +02:00
import CopyButton from "@/components/shared/copyButton";
2024-08-26 17:40:18 +02:00
import "./_styles/prism-twilight.css";
import "./_styles/prism.twilight.min.css";
2024-08-26 18:20:10 +02:00
import PrismLoader from "@/components/loader/prismLoader";
2024-08-29 17:56:11 +02:00
import { Button } from "@/components/ui/button";
2024-08-08 11:21:56 +02:00
async function getData(slug: string) {
const query = `
2024-08-08 11:21:56 +02:00
*[_type == "blog" && slug.current == '${slug}'] {
"currentSlug": slug.current,
2024-08-20 16:28:54 +02:00
title,
content,
smallDescription,
2024-08-20 16:28:54 +02:00
titleImage,
_createdAt
2024-08-08 11:21:56 +02:00
}[0]`;
2024-09-07 14:31:17 +02:00
const data = await client.fetch(query, {}, { cache: "no-store" });
return data;
2024-08-08 11:21:56 +02:00
}
interface BlogSlugArticle {
currentSlug: string;
title: string;
content: any;
titleImage: string;
_createdAt: string;
2024-08-08 11:21:56 +02:00
}
export const dynamic = "force-static";
2024-08-08 19:23:56 +02:00
export async function generateMetadata({
params
2024-08-08 19:23:56 +02:00
}: {
params: { slug: string };
2024-08-08 19:23:56 +02:00
}): Promise<Metadata> {
const data = await getData(params.slug);
2024-08-08 19:23:56 +02:00
if (!data) {
return {
title: "404 Not Found - SVR.JS",
openGraph: {
title: "404 Not Found - SVR.JS"
},
twitter: {
title: "404 Not Found - SVR.JS"
}
};
}
2024-08-08 19:23:56 +02:00
return {
2024-09-07 09:39:26 +02:00
title: `${data.title} - SVR.JS`,
description: data.smallDescription,
openGraph: {
2024-09-07 09:39:26 +02:00
title: `${data.title} - SVR.JS`,
description: data.smallDescription,
url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/blog/${data.currentSlug}`,
type: "website",
images: [
{
url: data.titleImage
? urlFor(data.titleImage).url()
: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/blog-missing.png`,
width: 800,
height: 600,
2024-09-07 09:39:26 +02:00
alt: `${data.title} - SVR.JS`
}
]
},
twitter: {
card: "summary_large_image",
site: "@SVR_JS",
2024-09-07 09:39:26 +02:00
title: `${data.title} - SVR.JS`,
description: data.smallDescription,
images: [
data.titleImage
? urlFor(data.titleImage).url()
: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/blog-missing.png`
],
creator: "@SVR_JS"
}
};
2024-08-08 19:23:56 +02:00
}
2024-08-26 17:26:02 +02:00
const customPortableTextComponents: PortableTextComponents = {
types: {
image: ({ value }) => {
return (
<div className="my-8">
<Image
src={urlFor(value).url()}
alt={value.alt || "Blog Image"}
width={1200}
height={800}
className="w-full h-auto rounded-lg"
/>
{value.caption && (
<p className="mt-2 text-center text-sm text-muted-foreground">
{value.caption}
</p>
)}
</div>
);
},
code: ({ value }) => {
const language = value.language || "javascript";
const grammar = Prism.languages[language];
2024-08-26 18:20:10 +02:00
if (!grammar) {
console.error(`No grammar found for language: "${language}"`);
}
2024-08-26 17:26:02 +02:00
return (
<div className="relative my-8">
<pre
className={`language-${language} p-4 rounded-md overflow-x-auto text-sm`}
>
<code className={`language-${language}`}>{value.code}</code>
</pre>
<PrismLoader />
<CopyButton code={value.code} />
</div>
);
}
}
2024-08-26 17:26:02 +02:00
};
2024-08-08 11:21:56 +02:00
export default async function BlogSlugArticle({
params
2024-08-08 11:21:56 +02:00
}: {
params: { slug: string };
2024-08-08 11:21:56 +02:00
}) {
const data: BlogSlugArticle = await getData(params.slug);
2024-08-08 11:21:56 +02:00
if (!data) {
notFound();
}
2024-08-08 19:23:56 +02:00
const formattedDate = format(new Date(data._createdAt), "MMMM d, yyyy");
2024-08-20 16:28:54 +02:00
return (
<>
<section className="max-w-5xl container mx-auto py-8 md:py-28 flex flex-col items-center px-4">
<div className="w-full mx-auto flex-center">
<Link
href="/blog"
className="group text-primary transition-all flex items-center"
>
<Button variant={"ghost"} size={"lg"} className="mx-0 px-2 ">
<ArrowLeft className="mr-2 w-5 h-5 group-hover:translate-x-1 transition-all" />
Back
</Button>
</Link>
<Link
href="/rss.xml"
className="ml-auto"
rel="alternate"
type="application/rss+xml"
>
<Button
variant={"link"}
size={"lg"}
className="mx-0 px-2 text-primary"
>
<Rss className="w-5 h-5 mr-1" /> Subscribe to RSS
</Button>
</Link>
</div>
<header className="text-start mb-8 w-full">
<div className="mb-2">
<h1 className="text-3xl md:text-5xl mb-8 py-4 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
src={
data.titleImage
? urlFor(data.titleImage).url()
: "/blog-missing.png"
}
alt={data.title}
width={1200}
height={800}
priority
className="w-full h-auto object-cover rounded-md"
/>
<p className="mt-4 text-lg md:text-xl text-muted-foreground">
Published on: {formattedDate}
</p>
</div>
</header>
<Separator className="mb-6" />
<article className="prose max-w-full md:prose-lg dark:prose-invert">
<PortableText
value={data.content}
components={customPortableTextComponents}
/>
</article>
</section>
</>
);
2024-08-08 11:21:56 +02:00
}
export async function generateStaticParams() {
const query = `*[_type == 'blog']{
"slug": slug.current,
}`;
const slugsRaw = await client.fetch(query);
return slugsRaw;
}