diff --git a/app/(root)/blog/[slug]/page.tsx b/app/(root)/blog/[slug]/page.tsx index 12c159b..dc6a617 100644 --- a/app/(root)/blog/[slug]/page.tsx +++ b/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 ( +
+ {value.code}
+
+ );
+ }
return (
-+{value.code}
+{value.code}
Uploaded at {formattedDate} -
{" "} + )} diff --git a/components/cards/BlogCards.tsx b/components/cards/BlogCards.tsx index 20da746..00e1093 100644 --- a/components/cards/BlogCards.tsx +++ b/components/cards/BlogCards.tsx @@ -31,12 +31,12 @@ const BlogCards: React.FC- {post.smallDescription} + {truncatedDescription}
- Published on: {formattedDate}{" "} - {/* Display the formatted date */} + Published on: {formattedDate}
diff --git a/components/loader/prismLoader.tsx b/components/loader/prismLoader.tsx new file mode 100644 index 0000000..e28fbdb --- /dev/null +++ b/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; +}