feat(site): switch display type to Instrument Sans by sudhashrestha · Pull Request #499 · codse/animata

sudhashrestha · 2026-06-11T10:30:10Z

and add docs sidebar on /components

Replace Young Serif with self-hosted Instrument Sans, share docs shell layout with the components index, fix category grid typography, and update OG cards.

Summary by CodeRabbit

Style
- Switched site display typography to Instrument Sans for app, docs, and OG images.
- Updated heading and body typographic sizing/spacing for improved hierarchy; minor sidebar header indentation tweak.
- Added a global font stylesheet and new CSS variable for display font.
New Features
- Unified documentation shell/layout for consistent sidebar and content presentation.
- Added a dedicated components layout for component docs.
Documentation
- Updated conventions and quick-reference map to require and document category glyph specs.
Chores
- Bumped OG image template version and synced bundled OG fonts.

…ar on /components Replace Young Serif with self-hosted Instrument Sans, share docs shell layout with the components index, fix category grid typography, and update OG cards. Co-authored-by: Cursor <cursoragent@cursor.com>

coderabbitai · 2026-06-11T10:30:35Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 95a045ac-806b-4103-87bc-fea1295fd673

📥 Commits

Reviewing files that changed from the base of the PR and between 3f6cc63 and d0e6dca.

📒 Files selected for processing (1)

CLAUDE.md

📝 Walkthrough

Walkthrough

This PR consolidates typography system changes and layout refactoring across the documentation and components sections. A new DocsShellLayout component extracts shared layout logic, the global font system migrates from Young Serif to Instrument Sans Variable via a unified CSS custom property, and OG template generation is updated accordingly.

Changes

Typography System and Layout Consolidation

Layer / File(s)	Summary
Global Font System Foundation `styles/fonts.css`, `package.json`, `app/layout.tsx`, `styles/docs.css`	New `--font-display` CSS custom property defined with Instrument Sans Variable. Root layout import narrowed to IBM Plex Sans only, `fonts.css` stylesheet added, and Young Serif configuration removed. Documentation styles updated to use `--font-display` instead of local `--font-docs`.
Docs Shell Layout Component `components/docs-shell-layout.tsx`	New reusable `DocsShellLayout` component with responsive grid, sticky sidebar navigation from `docsConfig.sidebarNav`, and main content slot; imports unified styling from `styles/docs.css`.
Documentation Page Layout Refactor `app/(main)/docs/layout.tsx`, `app/(main)/docs/[[...slug]]/page.tsx`	`DocsLayout` simplified to delegate all layout/sidebar/styling to `DocsShellLayout`. Document page wrapper gains `docs-content` CSS class for styling alignment.
Components Section Layout Integration `app/(main)/components/layout.tsx`, `app/(main)/components/page.tsx`	New `ComponentsLayout` component wraps children in `DocsShellLayout`. Components page header typography updated to Tailwind classes; categories grid responsive behavior and item styling adjusted with `min-w-0` constraint.
OG Template and Font Syncing `scripts/lib/og-template.mjs`, `scripts/sync-og-fonts.mjs`	Template version bumped from "24" to "25". OG font CSS now includes Instrument Sans Variable `@font-face` definition. Both common and branded template title styling updated to use new font. Variable font file synced to `public/og-fonts/`.
Project Conventions Documentation `CLAUDE.md`	Font setting convention updated to reference Instrument Sans. File map extended to include `animata/skeleton/CATEGORY-GLYPHS.md` spec; new requirement documented for category glyph specifications when adding component categories.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

codse/animata#489: Overlaps OG generation/font sync work (Instrument Sans Variable, og-template changes).
codse/animata#425: Related changes to app/(main)/docs/layout.tsx layout/container behavior.
codse/animata#497: Related edits to components/sidebar-nav.tsx and sidebar rendering behavior.

Suggested reviewers

hari

Poem

🐰 A rabbit hums as fonts take flight,
Instrument Sans now reads so bright,
Docs shell nested, tidy and light,
Components snug, OGs set right,
Hopping through pixels—what a sight! 🎋

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'switch display type to Instrument Sans' accurately describes the main change: replacing Young Serif font with Instrument Sans across the codebase.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/instrument-sans-components-sidebar

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Use pl-5.5 so the section label lines up with chevron-aligned category titles. Co-authored-by: Cursor <cursoragent@cursor.com>

cloudflare-workers-and-pages · 2026-06-11T10:31:42Z

Deploying animata with Cloudflare Pages

Latest commit:	`d0e6dca`
Status:	⚡️ Build in progress...

View logs

Fixes frozen-lockfile CI failure from the Instrument Sans migration. Co-authored-by: Cursor <cursoragent@cursor.com>

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@CLAUDE.md`:
- Line 20: CLAUDE.md currently references a non-existent spec file
animata/skeleton/CATEGORY-GLYPHS.md; either update that link to the actual spec
location or add the missing markdown spec. Locate the reference in CLAUDE.md and
replace animata/skeleton/CATEGORY-GLYPHS.md with the correct path to the spec
(or create a new CATEGORY-GLYPHS.md in animata/skeleton/), and ensure it aligns
with the existing implementation file animata/skeleton/category-glyphs.tsx and
any related stories/styles so contributors can follow the guideline.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f1b2e629-f36e-405a-9937-5465eb4564bb

📥 Commits

Reviewing files that changed from the base of the PR and between d0f986f and 673b919.

⛔ Files ignored due to path filters (2)

public/og-fonts/instrument-sans-latin-wght-normal.woff2 is excluded by !**/*.woff2
public/og-fonts/young-serif-latin-400-normal.woff2 is excluded by !**/*.woff2

📒 Files selected for processing (12)

CLAUDE.md
app/(main)/components/layout.tsx
app/(main)/components/page.tsx
app/(main)/docs/[[...slug]]/page.tsx
app/(main)/docs/layout.tsx
app/layout.tsx
components/docs-shell-layout.tsx
package.json
scripts/lib/og-template.mjs
scripts/sync-og-fonts.mjs
styles/docs.css
styles/fonts.css

💤 Files with no reviewable changes (1)

package.json

Replace the stale animata/skeleton/CATEGORY-GLYPHS.md reference with the contributing guide paths and document the real implementation files. Co-authored-by: Cursor <cursoragent@cursor.com>

sudhashrestha requested a review from hari June 11, 2026 10:30

fix(docs): align Components sidebar label with category rows

ddb9deb

Use pl-5.5 so the section label lines up with chevron-aligned category titles. Co-authored-by: Cursor <cursoragent@cursor.com>

chore: sync lockfile after removing young-serif

3f6cc63

Fixes frozen-lockfile CI failure from the Instrument Sans migration. Co-authored-by: Cursor <cursoragent@cursor.com>

coderabbitai Bot reviewed Jun 11, 2026

View reviewed changes

Comment thread CLAUDE.md Outdated

hari approved these changes Jun 11, 2026

View reviewed changes

docs(claude): point category glyph spec to contributing docs

d0e6dca

Replace the stale animata/skeleton/CATEGORY-GLYPHS.md reference with the contributing guide paths and document the real implementation files. Co-authored-by: Cursor <cursoragent@cursor.com>

sudhashrestha merged commit 7649472 into main Jun 11, 2026
4 of 6 checks passed

sudhashrestha deleted the feat/instrument-sans-components-sidebar branch June 11, 2026 10:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(site): switch display type to Instrument Sans#499

feat(site): switch display type to Instrument Sans#499
sudhashrestha merged 4 commits into
mainfrom
feat/instrument-sans-components-sidebar

sudhashrestha commented Jun 11, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 11, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

cloudflare-workers-and-pages Bot commented Jun 11, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

sudhashrestha commented Jun 11, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

cloudflare-workers-and-pages Bot commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying animata with Cloudflare Pages

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sudhashrestha commented Jun 11, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 11, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jun 11, 2026 •

edited

Loading