Skip to content

feat(spotlight): add Developer Spotlight layout with cover hero#779

Merged
dergigi merged 16 commits into
developer-spotlight-kurt-unger-bitshokafrom
spotlight-layout
May 22, 2026
Merged

feat(spotlight): add Developer Spotlight layout with cover hero#779
dergigi merged 16 commits into
developer-spotlight-kurt-unger-bitshokafrom
spotlight-layout

Conversation

@dergigi
Copy link
Copy Markdown
Member

@dergigi dergigi commented May 22, 2026

Adds a SpotlightLayout for posts tagged spotlight, built on the existing blog post shell with a Substack-style full-width cover hero. The first image in images is used for OG/social cards; the second is the in-page hero. The nav overlays the cover on spotlight pages, with responsive tweaks for mobile and ~1000px widths.

  • New SpotlightLayout, PostCoverHero, and shared PostArticleBody extracted from PostLayout
  • Auto-select layout via the spotlight tag (getBlogLayout)
  • Kurt post uses featured.jpg + hero.jpg; Apply button hidden below lg on spotlight only

Build preview:

dergigi added 10 commits May 22, 2026 00:07
Share sidebar, prose, footer, and comment chrome between PostLayout and
the upcoming spotlight layout.
Full-bleed cover band with title and date overlay, aligned to the post
grid. Uses images[1] for the hero via getSpotlightHeroImage.
Auto-apply the spotlight layout when a post includes the spotlight tag;
explicit layout in frontmatter still overrides.
images[0] is featured.jpg for social previews; images[1] is hero.jpg
for the in-page cover band.
Position the header over the hero on spotlight pages with light nav text.
Show the cover at native aspect ratio on desktop so less of the photo is cropped.
Taller hero band with stronger gradients, smaller title and shorter date,
left-aligned author row, and clearer overlay nav on small screens.
Frame Kurt's portrait better in narrow viewports while keeping desktop
object position unchanged.
Use calc-based full-bleed breakout, drop nested SectionContainer, enable
sidebar grid from 1000px, and share section width classes site-wide.
Remove overflow clipping and calc full-bleed that truncated the hero.
Use full-width main for spotlight pages with header and content sharing
postSectionClasses alignment.
Keeps the Apply CTA on desktop spotlight pages and on all layouts at
smaller widths where the full nav is not shown.
@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
os-website Ready Ready Preview, Comment May 22, 2026 10:54am

Request Review

@dergigi dergigi marked this pull request as ready for review May 22, 2026 09:37
@dergigi dergigi requested a review from Arvin21M May 22, 2026 09:37
@dergigi dergigi changed the title feat(blog): add Developer Spotlight layout with cover hero feat(spotlight): add Developer Spotlight layout with cover hero May 22, 2026
@dergigi
Copy link
Copy Markdown
Member Author

dergigi commented May 22, 2026

I think this is ready for review, please have a quick look @OpenSats/content (but especially @Arvin21M). I tested it on all kinds of screen sizes and devices, and it looks good to my eye.

The plan is to merge this into #770 & do eventual refinements in follow-up PRs after publication.

@dergigi
Copy link
Copy Markdown
Member Author

dergigi commented May 22, 2026

I'll do the /spotlight overview at a later point. Doesn't make much sense to do it now, given that we only have one item in the series.

@dergigi dergigi requested a review from a team May 22, 2026 10:34
@dergigi dergigi mentioned this pull request May 22, 2026
@dergigi
Copy link
Copy Markdown
Member Author

dergigi commented May 22, 2026

@Kokkomaki tested this as well so I'll go ahead and merge it.

@dergigi dergigi merged commit 879fa10 into developer-spotlight-kurt-unger-bitshoka May 22, 2026
2 checks passed
@dergigi dergigi deleted the spotlight-layout branch May 22, 2026 11:32
Copy link
Copy Markdown
Contributor

@Arvin21M Arvin21M left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants