GKaszewski/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fun improvements #1

Merged
GKaszewski merged 21 commits from fun into main 2026-03-31 00:50:17 +00:00
Conversation 0 Commits 21 Files Changed 13 +38 -36
2 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 893760751b - Show all commits

72
app/posts/[slug]/page.tsx
View File

@@ -29,36 +29,36 @@ export default async function Post({ params }: PageProps) {
const postData: PostData = await getPostData(slug); const postData: PostData = await getPostData(slug);
return ( return (
<div className="mx-auto max-w-5xl"> <div className="mx-auto max-w-6xl">
<Window title={postData.title} showProgress> <div className="lg:flex lg:gap-4 lg:items-start">
<article> <Window title={postData.title} showProgress className="lg:flex-1 min-w-0">
<div className="mb-4 text-gray-500 flex flex-col gap-1"> <article>
<span> <div className="mb-4 text-gray-500 flex flex-col gap-1">
{new Date(postData.date).toLocaleDateString("en-US", { <span>
year: "numeric", {new Date(postData.date).toLocaleDateString("en-US", {
month: "long", year: "numeric",
day: "numeric", month: "long",
})} day: "numeric",
</span> })}
<span className="text-sm text-gray-400">{postData.readingTime}</span> </span>
</div> <span className="text-sm text-gray-400">{postData.readingTime}</span>
{postData.wip && (
<div className="mb-6 flex items-center gap-3 rounded-lg border border-amber-300 bg-amber-50/70 px-4 py-3 text-sm text-amber-800">
<span className="text-lg">🚧</span>
<span>This post is a work in progress — content may change.</span>
</div> </div>
)}
{/* Mobile TOC — shown above article, hidden on lg+ */} {postData.wip && (
{postData.headings.length > 0 && ( <div className="mb-6 flex items-center gap-3 rounded-lg border border-amber-300 bg-amber-50/70 px-4 py-3 text-sm text-amber-800">
<div className="lg:hidden mb-6"> <span className="text-lg">🚧</span>
<TableOfContents headings={postData.headings} /> <span>This post is a work in progress — content may change.</span>
</div> </div>
)} )}
<div className="lg:flex lg:gap-8 lg:items-start"> {/* Mobile TOC — inline above article, hidden on lg+ */}
<div className="prose lg:prose-lg max-w-none flex-1 min-w-0"> {postData.headings.length > 0 && (
<div className="lg:hidden mb-6 bg-white/20 backdrop-blur border border-white/30 rounded-lg p-4">
<TableOfContents headings={postData.headings} />
</div>
)}
<div className="prose lg:prose-lg max-w-none">
<MDXRemote <MDXRemote
source={postData.content} source={postData.content}
options={{ options={{
@@ -77,16 +77,18 @@ export default async function Post({ params }: PageProps) {
}} }}
/> />
</div> </div>
</article>
</Window>
{/* Desktop TOC sidebar — hidden on mobile */} {/* Desktop TOC — separate Aero Window, sticky on the right */}
{postData.headings.length > 0 && ( {postData.headings.length > 0 && (
<div className="hidden lg:block w-52 flex-shrink-0"> <div className="hidden lg:block w-56 flex-shrink-0 sticky top-8">
<TableOfContents headings={postData.headings} /> <Window title="Contents">
</div> <TableOfContents headings={postData.headings} />
)} </Window>
</div> </div>
</article> )}
</Window> </div>
<div className="mt-8 text-center"> <div className="mt-8 text-center">
<Link <Link

2
components/table-of-contents.tsx
View File

@@ -35,7 +35,7 @@ export default function TableOfContents({ headings }: TableOfContentsProps) {
if (headings.length === 0) return null; if (headings.length === 0) return null;
return ( return (
<nav className="bg-white/20 backdrop-blur border border-white/30 rounded-lg p-4 lg:sticky lg:top-8"> <nav>
<p className="text-xs font-bold uppercase tracking-widest text-blue-800 mb-3"> <p className="text-xs font-bold uppercase tracking-widest text-blue-800 mb-3">
Contents Contents
</p> </p>