svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added dates in the site

Browse source
This commit is contained in:
Cypro Freelance 2024-08-20 19:58:54 +05:30
parent 7a27e2b79e
commit 5bf1589b7a
5 changed files with 86 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,16 +4,18 @@ import Image from "next/image";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { Separator } from "@/components/ui/separator";
import NotFound from "@/app/not-found";
import { notFound } from "next/navigation";
import { Metadata } from "next";
import { format } from "date-fns";
async function getData(slug: string) {
const query = `
*[_type == "blog" && slug.current == '${slug}'] {
"currentSlug": slug.current,
title,
content,
titleImage
title,
content,
titleImage,
_createdAt
}[0]`;
const data = await client.fetch(query);
@ -25,6 +27,7 @@ interface BlogSlugArticle {
title: string;
content: any;
titleImage: string;
_createdAt: string;
}
export async function generateMetadata({
@ -77,9 +80,11 @@ export default async function BlogSlugArticle({
const data: BlogSlugArticle = await getData(params.slug);
if (!data) {
return <NotFound />;
notFound();
}
const formattedDate = format(new Date(data._createdAt), "MMMM d, yyyy");
return (
<>
<section className="max-w-5xl container mx-auto py-8 md:py-28 flex flex-col items-center px-4">
@ -90,10 +95,10 @@ export default async function BlogSlugArticle({
<ArrowLeft className="mr-2" />
Back to Blog
</Link>
<header className="text-start mb-12 w-full">
<header className="text-start mb-8 w-full">
{data.titleImage && (
<div className="mb-8">
<h1 className="text-3xl md:text-5xl mb-12 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
<div className="mb-2">
<h1 className="text-3xl md:text-5xl mb-12 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
@ -104,6 +109,9 @@ export default async function BlogSlugArticle({
priority
className="w-full h-auto object-cover rounded-md"
/>
<p className="mt-4 text-xl text-muted-foreground">
Uploaded at {formattedDate}
</p>{" "}
</div>
)}
</header>

19
app/(root)/not-found.tsx Normal file
View file

@ -0,0 +1,19 @@
import Link from "next/link";
const NotFound = () => {
return (
<section id="404error" className="flex-center flex-col wrapper container">
<h1 className="text-3xl md:text-5xl text-center">
<span className="text-red-500">404</span> Page not Found
</h1>
<p className="text-lg mt-3 text-muted-foreground">
Please return back to{" "}
<Link href="/" className="underline font-bold">
Home
</Link>
</p>
</section>
);
};
export default NotFound;

19
app/not-found.tsx
View file

@ -1,19 +0,0 @@
import Link from "next/link";
const NotFound = () => {
return (
<section id="404error" className="flex-center flex-col wrapper container">
<h1 className="text-3xl md:text-5xl text-center">
<span className="text-red-500">404</span> Page not Found
</h1>
<p className="text-lg mt-3 text-muted-foreground">
Please return back to{" "}
<Link href="/" className="underline font-bold">
Home
</Link>
</p>
</section>
);
};
export default NotFound;

78
components/cards/BlogCards.tsx
View file

@ -12,12 +12,14 @@ import {
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
import { format } from "date-fns";
interface BlogPostcard {
title: string;
smallDescription: string;
currentSlug: string;
titleImage: string;
_createdAt: string; // Add createdAt field
}
interface BlogCardsProps {
@ -33,7 +35,8 @@ const BlogCards: React.FC<BlogCardsProps> = async ({ searchParams }) => {
title,
smallDescription,
"currentSlug": slug.current,
titleImage
titleImage,
_createdAt
}[${(currentPage - 1) * cardsPerPage}...${currentPage * cardsPerPage}]`;
const posts: BlogPostcard[] = await client.fetch(query);
@ -47,38 +50,49 @@ const BlogCards: React.FC<BlogCardsProps> = async ({ searchParams }) => {
return (
<>
<section className="grid max-w-6xl gap-4 mx-auto sm:grid-cols-2 lg:grid-cols-3">
{posts.map((post, idx) => (
<Card
className="group h-full w-full rounded-lg border overflow-hidden"
key={idx}
>
<Link href={`/blog/${post.currentSlug}`} className="block">
<div className="relative overflow-hidden rounded-t-lg">
<Image
src={urlFor(post.titleImage).url()}
alt={post.title}
width={500}
height={300}
priority
className="w-full object-cover transition-transform duration-200 group-hover:scale-105"
/>
</div>
<CardContent className="p-4">
<div className="flex-between mb-2 py-2">
<h3 className="text-xl font-semibold leading-tight">
{post.title}
</h3>
<div className="text-sm text-muted-foreground opacity-0 group-hover:opacity-100 duration-300">
<ExternalLink />
</div>
{posts.map((post, idx) => {
const formattedDate = format(
new Date(post._createdAt),
"MMMM d, yyyy"
); // Format the date
return (
<Card
className="group h-full w-full rounded-lg border overflow-hidden"
key={idx}
>
<Link href={`/blog/${post.currentSlug}`} className="block">
<div className="relative overflow-hidden rounded-t-lg">
<Image
src={urlFor(post.titleImage).url()}
alt={post.title}
width={500}
height={300}
priority
className="w-full object-cover transition-transform duration-200 group-hover:scale-105"
/>
</div>
<p className="text-sm text-muted-foreground">
{post.smallDescription}
</p>
</CardContent>
</Link>
</Card>
))}
<CardContent className="p-4">
<div className="flex-between mb-2 py-2">
<h3 className="text-xl font-semibold leading-tight">
{post.title}
</h3>
<div className="text-sm text-muted-foreground opacity-0 group-hover:opacity-100 duration-300">
<ExternalLink />
</div>
</div>
<p className="text-sm text-muted-foreground">
{post.smallDescription}
</p>
<p className="text-xs text-muted-foreground mt-2">
Published on: {formattedDate}{" "}
{/* Display the formatted date */}
</p>
</CardContent>
</Link>
</Card>
);
})}
</section>
<div className="flex-center mt-12">
{totalPages > 1 && (

5
svrjs/schemaTypes/blog.ts
View file

@ -21,6 +21,11 @@ export default {
type: 'image',
title: 'Title Image',
},
// {
// name: 'publishedAt',
// title: 'Published At',
// type: 'datetime',
// },
{
name: 'smallDescription',
type: 'text',