holy shit that took lonng

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

@@ -2,15 +2,20 @@ import { client, urlFor } from "@/lib/sanity";
 import { PortableText, PortableTextComponents } from "@portabletext/react";
 import Image from "next/image";
 import Link from "next/link";
-import { ArrowLeft, Copy } from "lucide-react";
+import { ArrowLeft } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 import { notFound } from "next/navigation";
 import { Metadata } from "next";
 import { format } from "date-fns";
 import Prism from "prismjs";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-php";
+
 import CopyButton from "@/components/shared/copyButton";
 import "./_styles/prism-twilight.css";
 import "./_styles/prism.twilight.min.css";
+import PrismLoader from "@/components/loader/prismLoader";
 
 async function getData(slug: string) {
 	const query = `
@@ -97,16 +102,26 @@ const customPortableTextComponents: PortableTextComponents = {
 			);
 		},
 		code: ({ value }) => {
-			Prism.highlight(value.code, Prism.languages.javascript, "javascript");
+			const language = value.language || "javascript";
+			const grammar = Prism.languages[language];
+
+			if (!grammar) {
+				console.error(`No grammar found for language: "${language}"`);
+				return (
+					<pre className="p-4 rounded-md overflow-x-auto text-sm md:text-base">
+						<code>{value.code}</code>
+					</pre>
+				);
+			}
 
 			return (
 				<div className="relative my-8">
 					<pre
-						className="language-js p-4 rounded-md overflow-x-auto text-sm md:text-base"
+						className={`language-${language} p-4 rounded-md overflow-x-auto text-sm md:text-base`}
-						style={{ position: "relative", overflowX: "auto" }}
 					>
-						<code className="language-js">{value.code}</code>
+						<code className={`language-${language}`}>{value.code}</code>
 					</pre>
+					<PrismLoader />
 					<CopyButton code={value.code} />
 				</div>
 			);
@@ -153,7 +168,7 @@ export default async function BlogSlugArticle({
 							/>
 							<p className="mt-4 text-lg md:text-xl text-muted-foreground">
 								Uploaded at {formattedDate}
-							</p>{" "}
+							</p>
 						</div>
 					)}
 				</header>

components/cards/BlogCards.tsx

@@ -31,12 +31,12 @@ const BlogCards: React.FC<BlogCardsProps> = async ({ searchParams }) => {
 	const currentPage = searchParams.page ? parseInt(searchParams.page) : 1;
 
 	const query = `*[_type == 'blog'] | order(_createdAt desc) {
-    title,
+        title,
-    smallDescription,
+        smallDescription,
-    "currentSlug": slug.current,
+        "currentSlug": slug.current,
-    titleImage,
+        titleImage,
-	_createdAt
+        _createdAt
-  }[${(currentPage - 1) * cardsPerPage}...${currentPage * cardsPerPage}]`;
+    }[${(currentPage - 1) * cardsPerPage}...${currentPage * cardsPerPage}]`;
 
 	const posts: BlogPostcard[] = await client.fetch(query);
 
@@ -54,6 +54,11 @@ const BlogCards: React.FC<BlogCardsProps> = async ({ searchParams }) => {
 						"MMMM d, yyyy"
 					);
 
+					const truncatedDescription =
+						post.smallDescription.length > 130
+							? post.smallDescription.substring(0, 130) + "..."
+							: post.smallDescription;
+
 					return (
 						<Card
 							className="group h-full w-full rounded-lg border overflow-hidden"
@@ -80,11 +85,10 @@ const BlogCards: React.FC<BlogCardsProps> = async ({ searchParams }) => {
 										</div>
 									</div>
 									<p className="text-sm text-muted-foreground">
-										{post.smallDescription}
+										{truncatedDescription}
 									</p>
 									<p className="text-xs text-muted-foreground mt-2">
-										Published on: {formattedDate}{" "}
+										Published on: {formattedDate}
-										{/* Display the formatted date */}
 									</p>
 								</CardContent>
 							</Link>

components/loader/prismLoader.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { useEffect } from "react";
+import Prism from "prismjs";
+import "prismjs/themes/prism-okaidia.css";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-php";
+import "prismjs/components/prism-markup-templating";
+
+export default function PrismLoader() {
+	useEffect(() => {
+		Prism.highlightAll();
+	}, []);
+
+	return null;
+}