New Feature·Pushed May 1, 2026·M

Editorial design lifted from gitsky with sticky header and repo headers

Gitpulse gets a full editorial redesign with a sticky header, repository headers displaying real GitHub descriptions, and a visual size indicator replacing text labels.

Gitpulse now reads like a publication. A sticky header keeps the wordmark visible as users scroll through the development log, and a new repository header displays the actual GitHub description pulled from the API. Story cards received the same treatment: category labels appear in gold uppercase, merge and push dates display alongside a five-bar size indicator (filled bars in gold, empty in gray). Text sizes follow an editorial scale — display type for headlines, body fonts for prose, monospace for bylines and metadata. Story detail pages use the same typography stack throughout. The backend feeds repository metadata to the site at startup. A new GraphQL query fetches the description and URL from GitHub, writing it to a JSON file the site reads at build time. If the fetch fails, the system falls back to parsing the environment variable. The design language matches gitsky's codebase, bringing visual consistency across related projects. The size bars mirror gitsky's PR feed items, letting readers gauge change scope without hunting through diff statistics.

Technical description

This PR lifts gitsky's editorial design language into gitpulse and adds repository metadata fetching from GitHub. **Design Components** Three new components bring the visual language: [[code ref=1]]TopBar[[/code]] is a sticky 48px header with the wordmark in font-feed-display and a hairline rule below. It mounts in [[code ref=9]]RootLayout[[/code]] so every page picks it up. [[code ref=2]]RepoHeader[[/code]] displays a centered "Repository activity" eyebrow in mono, the owner/repo title in display type, and an italic description with a diamond divider glyph. [[code ref=3]]SizeBars[[/code]] renders a five-bar XS/S/M/L/XL widget matching gitsky's PRFeedItem — filled bars use bg-feed-gold, empty bars use bg-border-medium. [[code ref=4]]StoryCard[[/code]] receives a revised meta row: gold-uppercase category, dot separator, relative date ("Merged X / Pushed X"), another dot, and SizeBars. Headlines move to font-feed-display at 2xl-3xl. Body text uses font-feed-body, author bylines use font-feed-mono. [[code ref=5]]StoryPage[[/code]] mirrors the same meta-row pattern and applies the editorial typography stack throughout. **Backend Repository Fetching** The action now fetches repository metadata at startup. [[code ref=7]]fetchRepo[[/code]] in [[code]]action/src/github.ts[[/code]] calls the GraphQL repository query for description and url, returning a RepoInfo object. [[code ref=8]]writeRepoJson[[/code]] in [[code]]action/src/index.ts[[/code]] persists this to [[code]]site/src/content/repo.json[[/code]]. On the site side, [[code ref=6]]loadRepo[[/code]] reads repo.json via readFileSync. If the file doesn't exist (static build without running the action), it falls back to parsing GITHUB_REPOSITORY from the environment. **Files at a Glance** - [[code]]site/src/components/TopBar.tsx[[/code]] — sticky header component - [[code]]site/src/components/RepoHeader.tsx[[/code]] — repository header with description - [[code]]site/src/components/SizeBars.tsx[[/code]] — five-bar size indicator - [[code]]site/src/components/StoryCard.tsx[[/code]] — story card with editorial typography - [[code]]site/src/app/stories/[id]/page.tsx[[/code]] — story detail with same patterns - [[code]]site/src/app/page.tsx[[/code]] — home page using RepoHeader - [[code]]site/src/app/layout.tsx[[/code]] — mounts TopBar globally - [[code]]site/src/lib/repo.ts[[/code]] — loadRepo utility - [[code]]action/src/github.ts[[/code]] — fetchRepo GraphQL query - [[code]]action/src/index.ts[[/code]] — writes repo.json at startup