added somestuffs
This commit is contained in:
Cypro Freelance
parent
2a31e73dfb
commit
7a27e2b79e
5 changed files with 324 additions and 77 deletions
|
|
@ -4,6 +4,8 @@ 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 { Metadata } from "next";
|
||||
|
||||
async function getData(slug: string) {
|
||||
const query = `
|
||||
|
|
@ -25,6 +27,48 @@ interface BlogSlugArticle {
|
|||
titleImage: string;
|
||||
}
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: { slug: string };
|
||||
}): Promise<Metadata> {
|
||||
const data = await getData(params.slug);
|
||||
|
||||
if (!data) {
|
||||
return {
|
||||
title: "Not Found",
|
||||
description: "Blog post not found",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: data.title,
|
||||
description: data.smallDescription,
|
||||
openGraph: {
|
||||
title: data.title,
|
||||
description: data.smallDescription,
|
||||
url: `https://svrjs.org/blog/${data.currentSlug}`,
|
||||
type: "website",
|
||||
images: [
|
||||
{
|
||||
url: urlFor(data.titleImage).url(),
|
||||
width: 800,
|
||||
height: 600,
|
||||
alt: data.title,
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
site: "@SVR_JS",
|
||||
title: data.title,
|
||||
description: data.smallDescription,
|
||||
images: [urlFor(data.titleImage).url()],
|
||||
creator: "@SVR_JS",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default async function BlogSlugArticle({
|
||||
params,
|
||||
}: {
|
||||
|
|
@ -32,36 +76,42 @@ export default async function BlogSlugArticle({
|
|||
}) {
|
||||
const data: BlogSlugArticle = await getData(params.slug);
|
||||
|
||||
if (!data) {
|
||||
return <NotFound />;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="max-w-5xl container mx-auto py-8 md:py-28 flex flex-col items-center px-4">
|
||||
<Link
|
||||
href="/blog"
|
||||
className="self-start mb-8 text-primary hover:text-green-300 transition-all flex items-center"
|
||||
>
|
||||
<ArrowLeft className="mr-2" />
|
||||
Back to Blog
|
||||
</Link>
|
||||
<header className="text-start mb-12 w-full">
|
||||
{data.titleImage && (
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl md:text-4xl 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">
|
||||
{data.title}
|
||||
</h1>
|
||||
<Image
|
||||
src={urlFor(data.titleImage).url()}
|
||||
alt={data.title}
|
||||
width={1200}
|
||||
height={800}
|
||||
priority
|
||||
className="w-full h-auto object-cover rounded-md"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
<Separator className="mb-6" />
|
||||
<article className="prose max-w-full md:prose-lg dark:prose-invert">
|
||||
<PortableText value={data.content} />
|
||||
</article>
|
||||
</section>
|
||||
<>
|
||||
<section className="max-w-5xl container mx-auto py-8 md:py-28 flex flex-col items-center px-4">
|
||||
<Link
|
||||
href="/blog?page=1"
|
||||
className="self-start mb-8 text-primary hover:text-green-300 transition-all flex items-center"
|
||||
>
|
||||
<ArrowLeft className="mr-2" />
|
||||
Back to Blog
|
||||
</Link>
|
||||
<header className="text-start mb-12 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">
|
||||
{data.title}
|
||||
</h1>
|
||||
<Image
|
||||
src={urlFor(data.titleImage).url()}
|
||||
alt={data.title}
|
||||
width={1200}
|
||||
height={800}
|
||||
priority
|
||||
className="w-full h-auto object-cover rounded-md"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
<Separator className="mb-6" />
|
||||
<article className="prose max-w-full md:prose-lg dark:prose-invert">
|
||||
<PortableText value={data.content} />
|
||||
</article>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,41 @@ import BlogCards from "@/components/cards/BlogCards";
|
|||
|
||||
export const metadata: Metadata = {
|
||||
title: "Blog - SVRJS",
|
||||
description:
|
||||
"Welcome to the SVR.JS Blog! Explore our latest blog posts featuring web development, web application security, and web server administration tips. Stay tuned for the latest SVR.JS updates.",
|
||||
openGraph: {
|
||||
title: "Blog - SVRJS",
|
||||
description:
|
||||
"Welcome to the SVR.JS Blog! Explore our latest blog posts featuring web development, web application security, and web server administration tips. Stay tuned for the latest SVR.JS updates.",
|
||||
url: "https://svrjs.org/blog",
|
||||
type: "website",
|
||||
images: [
|
||||
{
|
||||
url: "https://svrjs.vercel.app/metadata/svrjs-cover.png",
|
||||
width: 800,
|
||||
height: 600,
|
||||
alt: "Blog - SVRJS",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
site: "@SVR_JS",
|
||||
title: "Blog - SVRJS",
|
||||
description:
|
||||
"Welcome to the SVR.JS Blog! Explore our latest blog posts featuring web development, web application security, and web server administration tips. Stay tuned for the latest SVR.JS updates.",
|
||||
images: ["https://svrjs.vercel.app/metadata/svrjs-cover.png"],
|
||||
creator: "@SVR_JS",
|
||||
},
|
||||
};
|
||||
|
||||
const BlogPage = () => {
|
||||
const BlogPage = async ({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: { page?: string };
|
||||
}) => {
|
||||
// Optionally, you can fetch some initial data here if needed.
|
||||
|
||||
return (
|
||||
<section
|
||||
id="blog"
|
||||
|
|
@ -15,7 +47,7 @@ const BlogPage = () => {
|
|||
<h1 className="text-3xl md:text-5xl mb-12 pb-1 md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
|
||||
SVRJS Blog Post
|
||||
</h1>
|
||||
<BlogCards />
|
||||
<BlogCards searchParams={searchParams} />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,6 +4,14 @@ import Image from "next/image";
|
|||
import { ExternalLink } from "lucide-react";
|
||||
import { client, urlFor } from "@/lib/sanity";
|
||||
import { Card, CardContent } from "../ui/card";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
|
||||
interface BlogPostcard {
|
||||
title: string;
|
||||
|
|
@ -12,57 +20,95 @@ interface BlogPostcard {
|
|||
titleImage: string;
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
interface BlogCardsProps {
|
||||
searchParams: { page?: string };
|
||||
}
|
||||
|
||||
const BlogCards: React.FC<BlogCardsProps> = async ({ searchParams }) => {
|
||||
const cardsPerPage = 6;
|
||||
const currentPage = searchParams.page ? parseInt(searchParams.page) : 1;
|
||||
|
||||
// Fetch the blog posts
|
||||
const query = `*[_type == 'blog'] | order(_createdAt desc) {
|
||||
title,
|
||||
title,
|
||||
smallDescription,
|
||||
"currentSlug": slug.current,
|
||||
titleImage
|
||||
}`;
|
||||
}[${(currentPage - 1) * cardsPerPage}...${currentPage * cardsPerPage}]`;
|
||||
|
||||
const data = await client.fetch(query);
|
||||
const posts: BlogPostcard[] = await client.fetch(query);
|
||||
|
||||
return data;
|
||||
}
|
||||
// Fetch the total number of blog posts
|
||||
const totalPostsQuery = `count(*[_type == 'blog'])`;
|
||||
const totalPosts: number = await client.fetch(totalPostsQuery);
|
||||
|
||||
const BlogCards = async () => {
|
||||
const data: BlogPostcard[] = await getData();
|
||||
console.log(data);
|
||||
const totalPages = Math.ceil(totalPosts / cardsPerPage);
|
||||
|
||||
return (
|
||||
<section className="grid max-w-6xl gap-4 mx-auto sm:grid-cols-2 lg:grid-cols-3">
|
||||
{data.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="SVRJS Blog Cover"
|
||||
width={500}
|
||||
height={300}
|
||||
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>
|
||||
<>
|
||||
<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>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{post.smallDescription}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Link>
|
||||
</Card>
|
||||
))}
|
||||
</section>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Link>
|
||||
</Card>
|
||||
))}
|
||||
</section>
|
||||
<div className="flex-center mt-12">
|
||||
{totalPages > 1 && (
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
{currentPage > 1 && (
|
||||
<PaginationPrevious href={`?page=${currentPage - 1}`} />
|
||||
)}
|
||||
</PaginationItem>
|
||||
{Array.from({ length: totalPages }).map((_, i) => (
|
||||
<PaginationItem key={i}>
|
||||
<PaginationLink
|
||||
href={`?page=${i + 1}`}
|
||||
isActive={currentPage === i + 1}
|
||||
>
|
||||
{i + 1}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
<PaginationItem>
|
||||
{currentPage < totalPages && (
|
||||
<PaginationNext href={`?page=${currentPage + 1}`} />
|
||||
)}
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
117
components/ui/pagination.tsx
Normal file
117
components/ui/pagination.tsx
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
import * as React from "react"
|
||||
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ButtonProps, buttonVariants } from "@/components/ui/button"
|
||||
|
||||
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-label="pagination"
|
||||
className={cn("mx-auto flex w-full justify-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
Pagination.displayName = "Pagination"
|
||||
|
||||
const PaginationContent = React.forwardRef<
|
||||
HTMLUListElement,
|
||||
React.ComponentProps<"ul">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ul
|
||||
ref={ref}
|
||||
className={cn("flex flex-row items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
PaginationContent.displayName = "PaginationContent"
|
||||
|
||||
const PaginationItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentProps<"li">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<li ref={ref} className={cn("", className)} {...props} />
|
||||
))
|
||||
PaginationItem.displayName = "PaginationItem"
|
||||
|
||||
type PaginationLinkProps = {
|
||||
isActive?: boolean
|
||||
} & Pick<ButtonProps, "size"> &
|
||||
React.ComponentProps<"a">
|
||||
|
||||
const PaginationLink = ({
|
||||
className,
|
||||
isActive,
|
||||
size = "icon",
|
||||
...props
|
||||
}: PaginationLinkProps) => (
|
||||
<a
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: isActive ? "outline" : "ghost",
|
||||
size,
|
||||
}),
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
PaginationLink.displayName = "PaginationLink"
|
||||
|
||||
const PaginationPrevious = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) => (
|
||||
<PaginationLink
|
||||
aria-label="Go to previous page"
|
||||
size="default"
|
||||
className={cn("gap-1 pl-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span>Previous</span>
|
||||
</PaginationLink>
|
||||
)
|
||||
PaginationPrevious.displayName = "PaginationPrevious"
|
||||
|
||||
const PaginationNext = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) => (
|
||||
<PaginationLink
|
||||
aria-label="Go to next page"
|
||||
size="default"
|
||||
className={cn("gap-1 pr-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<span>Next</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</PaginationLink>
|
||||
)
|
||||
PaginationNext.displayName = "PaginationNext"
|
||||
|
||||
const PaginationEllipsis = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) => (
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn("flex h-9 w-9 items-center justify-center", className)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<span className="sr-only">More pages</span>
|
||||
</span>
|
||||
)
|
||||
PaginationEllipsis.displayName = "PaginationEllipsis"
|
||||
|
||||
export {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
}
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
import { createClient } from "next-sanity";
|
||||
import imageUrlBuilder from "@sanity/image-url";
|
||||
|
||||
export const client = createClient({
|
||||
apiVersion: "2023-05-03",
|
||||
const config = {
|
||||
apiVersion: "2023-08-08",
|
||||
dataset: "production",
|
||||
projectId: `${process.env.SANITY_PROJECT_ID}`,
|
||||
useCdn: false, // basically enable this for faster loading time
|
||||
});
|
||||
useCdn: false, // ensure fresh data
|
||||
};
|
||||
|
||||
export const client = createClient(config);
|
||||
|
||||
const builder = imageUrlBuilder(client);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue