Skip to content

feat: implement typography system updates, integrate custom Google fonts via next/font, and add marquee animation utilities - #2471

Open
10vulture1005 wants to merge 5 commits into
json-schema-org:mainfrom
10vulture1005:main
Open

feat: implement typography system updates, integrate custom Google fonts via next/font, and add marquee animation utilities#2471
10vulture1005 wants to merge 5 commits into
json-schema-org:mainfrom
10vulture1005:main

Conversation

@10vulture1005

@10vulture1005 10vulture1005 commented Aug 29, 2026 •
edited
Loading

Copy link
Copy Markdown

📝 Summary

Migrates the project from manually injected Google Fonts <link> tags to next/font/google for self-hosted, zero-CLS font loading. This PR also introduces a unified typography scale and reusable marquee animation utilities in Tailwind.

Closes #2469

🎯 Motivation

  • Eliminate FOUT & Render-Blocking Requests: Replace manually loaded Google Fonts with next/font/google to self-host and optimize fonts.
  • Unified Vertical Rhythm: Introduce consistent typography tokens for font sizes, line heights, and letter spacing.
  • Improved Readability: Improve long-form content with better text wrapping, readable content widths, and spacing.
  • Editorial Styling: Add a dedicated serif font for quote components.
  • Centralized Animation: Provide reusable marquee animation utilities configurable through CSS variables.

🛠️ Changes

🔤 Fonts

  • Added Inter, JetBrains_Mono, and Source_Serif_4 using next/font/google.
  • Applied font CSS variables through pages/_app.page.tsx.
  • Removed legacy Google Fonts <link> and <preconnect> tags.
  • Updated next.config.js to preserve next/font optimization.

🎨 Typography

  • Standardized fontFamily definitions using CSS variables.
  • Added consistent font sizes, line heights, and letter spacing.
  • Added mobile typography variants.
  • Added reusable lineHeight and letterSpacing tokens.
  • Added maxWidth.prose for long-form content.

🔄 Marquee Animations

  • Added reusable marquee keyframes to Tailwind.
  • Added configurable animation duration using --duration.
  • Added marquee-fast and marquee-slow presets.
  • Added reduced-motion accessibility support.

🌐 Global Styles

  • Updated global font configuration and font-feature settings.
  • Added font antialiasing.
  • Added improved text wrapping for headings and body content.
  • Added scroll-padding-top.
  • Added selection styling.
  • Added reduced-motion overrides.

🧩 Components & Pages

  • Updated Headlines.tsx with the new typography scale.
  • Improved code typography in Code.tsx.
  • Improved long-form content styling in StyledMarkdownBlock.tsx.
  • Harmonized card typography across homepage and community pages.
  • Added UpcomingEventsList preview/expander behavior.

What kind of change does this PR introduce?

This PR introduces frontend improvements to typography, font loading, readability, accessibility, and reusable marquee animations. It replaces externally loaded Google Fonts with next/font/google, centralizes typography tokens, and improves long-form content styling.

📸 Proof

image image

✅ Checklist

  • Linked the relevant issue using a closing keyword.
  • Added a meaningful description of the kind of change introduced.
  • Included screenshots/proof for the UI changes.
  • Verified the changes against the existing project conventions.

@10vulture1005
feat: implement typography system updates and integrate custom Google…
59c58d7 
… fonts via next/font

- Add lib/fonts.js configuring Inter, JetBrains_Mono, and Source_Serif_4
  via next/font/google with CSS variables (--font-sans, --font-mono, --font-serif).
- Wire font variables in pages/_app.page.tsx and remove manual Google Fonts
  <link>/<preconnect> tags from pages/_document.page.tsx.
- Exclude lib/fonts from the dev babel-loader rule in next.config.js so
  next/font can process it.
- Rewrite tailwind fontFamily to consume the CSS variables and rebuild
  fontSize (base, xl, h1-h5 + mobile variants) with line-height and
  letter-spacing tuples; add lineHeight, letterSpacing, and maxWidth.prose
  tokens.
- Add @layer base in styles/globals.css with html/body font-family,
  font-feature-settings, text-wrap: balance/pretty, ::selection, and
  prefers-reduced-motion overrides.
- Update components/Headlines.tsx, Code.tsx, and StyledMarkdownBlock.tsx
  to use the new type scale, max-w-prose for long-form content, and
  Source Serif for Bigquote/Regularquote.
- Harmonize home and community pages with the new typography tokens and
  add an UpcomingEventsList with a 'Read more' expander.
@10vulture1005
10vulture1005 requested a review from a team as a code owner August 29, 2026 15:36
@github-project-automation github-project-automation Bot moved this to Ready to review in PR - Triage Group Aug 29, 2026
@github-actions

github-actions Bot commented Aug 29, 2026

Copy link
Copy Markdown

Hi @10vulture1005! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: issue reference, kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

@10vulture1005
ci: bump Node.js from 20 to 24 in all workflows
0337bcc 
Node 20 is being deprecated on GitHub Actions runners (the workflow was
running on Node 24 by default and emitting a deprecation warning). Bump
all six setup-node usages to Node 24 to match the runner default and
avoid the deprecation notice / future breakage.

Also bump the local-development toolchain to match:
- Dockerfile: node:20-alpine -> node:24-alpine
- package.json engines.node: ^20.0.0 -> >=20.0.0 (still allows 20+ while
  documenting 24 as the new baseline)
- package.json volta.node: 20.9.0 -> 24.0.0

Workflows updated:
- .github/workflows/build-preview.yml
- .github/workflows/ci.yml (two jobs)
- .github/workflows/link-checker.yml
- .github/workflows/production-deployment.yml
- .github/workflows/validate-tooling-data.yml
@github-actions

github-actions Bot commented Aug 29, 2026

Copy link
Copy Markdown

Hi @10vulture1005! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: issue reference, kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

@10vulture1005
fix(tailwind): use <alpha-value> format for custom colors
3feb6f8 
Converts the custom theme colors (white, black, primary, btnOrange,
btnGold, startBlue, endBlue, linkBlue) from plain hex strings to the
rgb(... / <alpha-value>) format introduced in Tailwind 3.3+.

Why: @apply bg-primary/15 (and similar opacity-suffixed classes) inside
@layer base requires the color to be defined in <alpha-value> format,
otherwise Tailwind fails to generate the class and PostCSS reports
'The bg-primary/15 class does not exist'. This manifested in CI as a
webpack build failure on styles/globals.css.

The new format keeps every existing class (bg-primary, hover:bg-primary/90,
text-primary, etc.) working unchanged, and additionally makes the
opacity-suffixed variants usable from @apply directives.
@github-actions

github-actions Bot commented Aug 29, 2026

Copy link
Copy Markdown

Hi @10vulture1005! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: issue reference, kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

@github-actions

github-actions Bot commented Aug 29, 2026

Copy link
Copy Markdown

Hi @10vulture1005! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

1 similar comment
@github-actions

github-actions Bot commented Aug 29, 2026

Copy link
Copy Markdown

Hi @10vulture1005! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

@10vulture1005
fix(css): replace opacity modifier @apply with inline CSS for ::selec…
cb5f31e 
…tion

The 'bg-primary/15' and 'bg-primary/30' classes were failing to build
because the arbitrary opacity modifiers were not resolving correctly
within the @apply directive in the @layer base block.

Replace with explicit RGB color values using CSS custom selectors
to avoid relying on Tailwind's opacity modifier syntax.
@github-actions

github-actions Bot commented Aug 29, 2026 •
edited
Loading

Copy link
Copy Markdown
built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
website ✅ Ready (View Log) Visit Preview 9388d60

@codecov

codecov Bot commented Aug 29, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (d0f61e9) to head (9388d60).

Additional details and impacted files 
@@            Coverage Diff            @@
##              main     #2471   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           31        31           
  Lines          695       695           
  Branches       215       215           
=========================================
  Hits           695       695

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

PR - Triage Group
Status: Ready to review

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Implement typography system updates and integrate custom Google fonts via next/font

1 participant

@10vulture1005