Add overlay hero layout for blog posts#8
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| position: relative; | ||
| width: 100vw; | ||
| margin-left: calc(50% - 50vw); | ||
| margin-top: -80px; |
There was a problem hiding this comment.
Mobile hero offset overshoots viewport top
Medium Severity
margin-top: -80px in blog.module.css cancels desktop postWrapper padding, but mobile uses smaller top padding. Overlay posts can render shifted above the viewport on small screens, so the hero no longer cleanly starts at the top and content alignment becomes inconsistent.
| const posts: BlogMeta[] = files.map((fileName) => { | ||
| const slug = fileName.replace(/\.md$/, '') | ||
| const overlay = fileName.endsWith('.overlay.md') | ||
| const slug = fileName.replace(/\.overlay\.md$/, '').replace(/\.md$/, '') |
There was a problem hiding this comment.
Overlay and regular files can collide
Low Severity
getAllPosts() now normalizes both post.md and post.overlay.md to the same slug, but still loads every .md file. If both files exist, the index and static params can contain duplicate slugs, causing duplicate cards and conflicting route generation.
Additional Locations (1)
| .overlayHero { | ||
| position: relative; | ||
| width: 100vw; | ||
| margin-left: calc(50% - 50vw); |
There was a problem hiding this comment.
Full-bleed hero can trigger horizontal scrolling
Low Severity
The new full-bleed hero uses width: 100vw with margin-left: calc(50% - 50vw), which can exceed the layout width when a vertical scrollbar is present. Overlay posts may show an unwanted horizontal scrollbar and slight sideways page shift on some browsers.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
Posts with .overlay.md filename get a full-bleed hero image with title/meta overlaid on a gradient. The slug and image lookup are unchanged -- only the markdown filename triggers the variant. - Parse .overlay.md convention in loadBlog.ts - Add overlay boolean to BlogMeta type - Conditional overlay layout in post page - Full-bleed hero with gradient (transparent to opaque) - Applied to your-basic-blog as first overlay post Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
ad926ba to
338818c
Compare
1 participant
Summary
.overlay.mdfilename convention that triggers a full-bleed hero image with title/subtitle overlaid on a gradient.overlayfrom filenameHow it works
blog/post-name.mdtoblog/post-name.overlay.mdto enableTest plan
/blog/your-basic-blog-- should show overlay hero/blog/its-happening-- should show default layout (unchanged)🤖 Generated with Claude Code
Note
Medium Risk
Touches blog content discovery and slug parsing by introducing a
.overlay.mdconvention, which could affect which markdown file is selected/rendered for a given post. Rendering changes are otherwise isolated to blog post presentation whenoverlayis enabled and an image exists.Overview
Adds an optional overlay-hero blog post layout enabled via a
.overlay.mdfilename convention.lib/blog/loadBlog.tsnow detects.overlay.mdfiles, derives slugs by stripping the.overlaysuffix, and exposes a newmeta.overlayflag (also added toBlogMeta) while preferring the overlay file when both variants exist.app/(blog)/blog/[slug]/page.tsxconditionally renders a new full-bleed hero (image + gradient + overlaid meta/title/subtitle) whenmeta.overlayis true, with accompanying styles added inblog.module.css.Written by Cursor Bugbot for commit 338818c. This will update automatically on new commits. Configure here.