post page redesign: header, toc, footer#24
Merged
Merged
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
redesigns how posts render. the header is now left-aligned with a proper h1 and one quiet meta line (date · read time); the card wrapper is gone so prose sits directly on the page in a 65ch column; tags, views, similar, and prev/next are merged into a single bordered footer instead of three stacked blocks. adds a table of contents — sticky rail with scrollspy on wide screens, collapsed native details block on mobile — with heading anchors from rehype-slug, plus a hero treatment so posts opening with an image render it above the contents block.
the image alignment bug was a good lesson in css specificity: a global .prose img rule with width auto and a 65vh height cap was silently beating the w-full utility on PostImage (class + :not() + element outranks a single class), which is why images floated centered at intrinsic size. the fix was also a reminder that height caps and full-width columns are fundamentally incompatible without distortion — the industry norm (medium, substack, github) is width 100%, height auto, and just let tall images be tall.
til: rehype-slug and github-slugger share the same slugger, so you can extract a toc from raw markdown server-side and the ids line up with the rendered heading anchors for free — no client-side dom walking needed.