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

feat: TOC as separate Aero Window on desktop

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-03-31 02:43:45 +02:00
parent 7faaac2081
commit 893760751b
2 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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);
return (
<div className="mx-auto max-w-5xl">
<Window title={postData.title} showProgress>
<article>
<div className="mb-4 text-gray-500 flex flex-col gap-1">
<span>
{new Date(postData.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</span>
<span className="text-sm text-gray-400">{postData.readingTime}</span>
</div>
{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 className="mx-auto max-w-6xl">
<div className="lg:flex lg:gap-4 lg:items-start">
<Window title={postData.title} showProgress className="lg:flex-1 min-w-0">
<article>
<div className="mb-4 text-gray-500 flex flex-col gap-1">
<span>
{new Date(postData.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</span>
<span className="text-sm text-gray-400">{postData.readingTime}</span>
</div>
)}
{/* Mobile TOC — shown above article, hidden on lg+ */}
{postData.headings.length > 0 && (
<div className="lg:hidden mb-6">
<TableOfContents headings={postData.headings} />
</div>
)}
{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 className="lg:flex lg:gap-8 lg:items-start">
<div className="prose lg:prose-lg max-w-none flex-1 min-w-0">
{/* Mobile TOC — inline above article, hidden on lg+ */}
{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
source={postData.content}
options={{
@@ -77,16 +77,18 @@ export default async function Post({ params }: PageProps) {
}}
/>
</div>
</article>
</Window>
{/* Desktop TOC sidebar — hidden on mobile */}
{postData.headings.length > 0 && (
<div className="hidden lg:block w-52 flex-shrink-0">
<TableOfContents headings={postData.headings} />
</div>
)}
{/* Desktop TOC — separate Aero Window, sticky on the right */}
{postData.headings.length > 0 && (
<div className="hidden lg:block w-56 flex-shrink-0 sticky top-8">
<Window title="Contents">
<TableOfContents headings={postData.headings} />
</Window>
</div>
</article>
</Window>
)}
</div>
<div className="mt-8 text-center">
<Link