holy shit that took lonng

This commit is contained in:
Cypro Freelance 2024-08-26 21:50:10 +05:30
parent 7bf58721bd
commit d5b1df3250
3 changed files with 50 additions and 15 deletions

View file

@ -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"
style={{ position: "relative", overflowX: "auto" }}
className={`language-${language} p-4 rounded-md overflow-x-auto text-sm md:text-base`}
>
<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>

View file

@ -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}{" "}
{/* Display the formatted date */}
Published on: {formattedDate}
</p>
</CardContent>
</Link>

View file

@ -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;
}