69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
import { getSortedPostsData, PostMeta } from "../lib/posts";
|
|
import Link from "next/link";
|
|
import Window from "../components/window";
|
|
import Badges from "../components/badges";
|
|
|
|
function isNew(dateStr: string): boolean {
|
|
const postDate = new Date(dateStr);
|
|
const now = new Date();
|
|
const diffDays = (now.getTime() - postDate.getTime()) / (1000 * 60 * 60 * 24);
|
|
return diffDays <= 30;
|
|
}
|
|
|
|
export default function Home() {
|
|
const allPostsData: PostMeta[] = getSortedPostsData();
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<header className="text-center">
|
|
<h1 className="text-5xl font-bold text-white [text-shadow:_2px_2px_4px_rgb(0_0_0_/_40%)]">
|
|
Gabriel's Kaszewski Blog
|
|
</h1>
|
|
<p className="mt-2 text-lg text-white/90 [text-shadow:_1px_1px_2px_rgb(0_0_0_/_30%)]">
|
|
A little corner of the internet from the 2000s.
|
|
</p>
|
|
</header>
|
|
|
|
<section>
|
|
<Window title="Blog Posts" showRss>
|
|
{allPostsData.length > 0 ? (
|
|
<ul className="space-y-4">
|
|
{allPostsData.map(({ id, date, title, wip }) => (
|
|
<li key={id}>
|
|
<Link
|
|
href={`/posts/${id}`}
|
|
className="relative block overflow-hidden rounded-md bg-white/50 p-4 transition-all duration-200 hover:bg-white/80 hover:shadow-md"
|
|
>
|
|
{isNew(date) && !wip && (
|
|
<div className="animate-blink absolute top-[10px] right-[-24px] w-[100px] rotate-[35deg] bg-[#e05010] py-0.5 text-center text-[9px] font-bold text-white shadow-sm">
|
|
NEW!
|
|
</div>
|
|
)}
|
|
{wip && (
|
|
<div className="absolute top-[10px] right-[-24px] w-[100px] rotate-[35deg] bg-amber-500 py-0.5 text-center text-[9px] font-bold text-white shadow-sm">
|
|
🚧 WIP
|
|
</div>
|
|
)}
|
|
<h3 className="font-bold text-lg text-blue-800">{title}</h3>
|
|
<small className="text-gray-600">
|
|
{new Date(date).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
</small>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p className="text-gray-600">
|
|
No posts found. Add some markdown files to the 'posts' directory!
|
|
</p>
|
|
)}
|
|
</Window>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|