lepton/Webserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated look
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 2m15s
Details

Browse Source
This commit is contained in:
Akshay Kolli
2026-04-11 23:27:29 -04:00
parent aa7fe8ecc7
commit 382edaab75
21 changed files with 740 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
app/blog/page.tsx
View File

@@ -1,7 +1,7 @@
import type { Metadata } from 'next';
import Link from 'next/link';
import { getAllPosts } from '@/lib/mdx';
import { format } from 'date-fns';
import { getAllPosts } from '@/lib/mdx';
export const metadata: Metadata = {
title: 'Blog',
@@ -16,46 +16,61 @@ export default function BlogIndex() {
const posts = getAllPosts();
return (
<div className="max-w-3xl mx-auto px-6 py-24 space-y-12 animate-fade-in">
<header className="space-y-4 text-center sm:text-left">
<h1 className="text-4xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">Writing</h1>
<p className="text-zinc-500 dark:text-zinc-400 font-light">
Thoughts on software, design, and minimalism.
</p>
</header>
<div className="grid gap-10">
{posts.map((post) => (
<article key={post.slug} className="group relative flex flex-col space-y-3">
<div className="flex items-center gap-3 text-sm text-zinc-400 dark:text-zinc-500">
<time dateTime={post.date}>
{format(new Date(post.date), 'MMMM d, yyyy')}
</time>
<span className="w-1 h-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
<div className="flex gap-2">
{post.tags?.map(tag => (
<span key={tag} className="text-xs uppercase tracking-wider">{tag}</span>
))}
</div>
</div>
<Link href={`/blog/${post.slug}`} className="block">
<h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 group-hover:text-zinc-600 dark:group-hover:text-zinc-300 transition-colors">
{post.title}
</h2>
</Link>
<p className="text-zinc-600 dark:text-zinc-400 font-light leading-relaxed">
{post.description}
<div className="page-frame py-20 sm:py-24">
<div className="mx-auto max-w-[72rem] space-y-10">
<header className="space-y-4 border-b border-line pb-10">
<div className="space-y-4">
<p className="eyebrow">Writing</p>
<h1 className="max-w-[40rem] text-balance font-sans text-[clamp(3rem,6vw,5rem)] font-medium leading-[0.94] tracking-[-0.08em] text-ink">
Notes on software, deep learning, and research.
</h1>
<p className="max-w-[34rem] text-[1rem] leading-8 text-muted">
A small archive of ideas, experiments, and things worth slowing down enough to explain.
</p>
</div>
</header>
<div className="pt-2">
<Link href={`/blog/${post.slug}`} className="text-sm font-medium text-zinc-900 dark:text-zinc-100 underline decoration-zinc-300 dark:decoration-zinc-700 underline-offset-4 hover:decoration-zinc-900 dark:hover:decoration-zinc-100 transition-all">
Read more
</Link>
</div>
</article>
))}
<div className="divide-y divide-line">
{posts.map((post) => (
<article key={post.slug} className="grid gap-3 py-6 md:grid-cols-[8rem_minmax(0,1fr)] md:gap-6">
<div className="pt-1">
<time dateTime={post.date} className="block font-mono text-[0.72rem] uppercase tracking-[0.18em] text-muted-strong">
{format(new Date(post.date), 'MMMM d, yyyy')}
</time>
</div>
<div className="space-y-3">
<Link href={`/blog/${post.slug}`} className="block">
<h2 className="max-w-[38rem] font-sans text-[1.8rem] font-medium leading-tight tracking-[-0.05em] text-ink transition-colors hover:text-accent sm:text-[2.1rem]">
{post.title}
</h2>
</Link>
<p className="max-w-[34rem] text-[0.98rem] leading-7 text-muted">
{post.description}
</p>
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 pt-1 text-[0.76rem] font-mono uppercase tracking-[0.14em] text-muted-strong">
{post.tags?.map((tag) => (
<span key={tag}>
{tag}
</span>
))}
<Link href={`/blog/${post.slug}`} className="text-ink transition-colors hover:text-accent">
Read essay
</Link>
</div>
</div>
</article>
))}
</div>
<section className="grid gap-4 border-t border-line pt-6 md:grid-cols-[8rem_minmax(0,1fr)]">
<p className="eyebrow md:pt-1">Archive</p>
<p className="max-w-[34rem] text-[0.96rem] leading-7 text-muted">
{posts.length} published {posts.length === 1 ? 'essay' : 'essays'}. The archive stays selective.
</p>
</section>
</div>
</div>
);