Files
my-portfolio/src/app/blogs/page.tsx
T
luna ffb57a9f34
Build Check / build (pull_request) Successful in 32s
Build Check / push-image (pull_request) Has been skipped
Build Check / deploy-coolify (pull_request) Has been skipped
Polish blog landing copy
2026-07-17 22:17:53 +00:00

66 lines
2.3 KiB
TypeScript

import Link from "next/link";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/sections/Footer";
import { BlogCard } from "@/components/BlogCard";
import { prisma } from "@/lib/prisma";
import { toBlogSummary } from "@/lib/blogs";
export const metadata = {
title: "Blog | Paul W. Portfolio",
description: "Notes on infrastructure, tooling, and shipping software.",
};
export const dynamic = "force-dynamic";
export default async function BlogsPage() {
const posts = await prisma.blogPost.findMany({
where: { isPublished: true },
orderBy: [{ publishedAt: "desc" }, { createdAt: "desc" }],
});
const blogs = posts.map(toBlogSummary);
return (
<>
<Navbar />
<div className="mx-auto w-full max-w-6xl px-4 pb-20 pt-28 sm:pt-32">
<section className="rounded-[2rem] border border-white/10 bg-white/[0.03] px-6 py-10 sm:px-10 sm:py-14">
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-gray-500">
writing
</p>
<h1 className="mt-4 max-w-3xl text-4xl font-semibold text-white sm:text-5xl">
Technical writing on infrastructure, software, and product work.
</h1>
<p className="mt-4 max-w-2xl text-sm leading-7 text-gray-400 sm:text-base">
Notes, updates, and technical writing across current projects and systems.
</p>
</section>
<section className="mt-10">
{blogs.length === 0 ? (
<div className="rounded-[1.75rem] border border-white/10 bg-white/[0.03] px-6 py-10 text-center text-gray-400">
No published posts yet.
</div>
) : (
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
{blogs.map((blog) => (
<BlogCard key={blog.id} blog={blog} />
))}
</div>
)}
</section>
<div className="mt-10 flex justify-center">
<Link
href="/"
className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-6 py-3 text-sm font-semibold text-white transition-all duration-300 hover:border-white/30 hover:bg-white/10"
>
Back home
</Link>
</div>
</div>
<Footer />
</>
);
}