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

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

@@ -29,8 +29,9 @@ 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">
<Window title={postData.title} showProgress className="lg:flex-1 min-w-0">
<article> <article>
<div className="mb-4 text-gray-500 flex flex-col gap-1"> <div className="mb-4 text-gray-500 flex flex-col gap-1">
<span> <span>
@@ -50,15 +51,14 @@ export default async function Post({ params }: PageProps) {
</div> </div>
)} )}
{/* Mobile TOC — shown above article, hidden on lg+ */} {/* Mobile TOC — inline above article, hidden on lg+ */}
{postData.headings.length > 0 && ( {postData.headings.length > 0 && (
<div className="lg:hidden mb-6"> <div className="lg:hidden mb-6 bg-white/20 backdrop-blur border border-white/30 rounded-lg p-4">
<TableOfContents headings={postData.headings} /> <TableOfContents headings={postData.headings} />
</div> </div>
)} )}
<div className="lg:flex lg:gap-8 lg:items-start"> <div className="prose lg:prose-lg max-w-none">
<div className="prose lg:prose-lg max-w-none flex-1 min-w-0">
<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">
<Window title="Contents">
<TableOfContents headings={postData.headings} /> <TableOfContents headings={postData.headings} />
</Window>
</div> </div>
)} )}
</div> </div>
</article>
</Window>
<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>