fix(web): keep the packages grid inside the page; add italic Inter and font preloads

web/packages/ui/package.json

@@ -7,8 +7,10 @@
 	"exports": {
 		"./components/Header.astro": "./src/components/Header.astro",
 		"./components/Footer.astro": "./src/components/Footer.astro",
+		"./components/FontPreload.astro": "./src/components/FontPreload.astro",
 		"./components/Logo.astro": "./src/components/Logo.astro",
 		"./components/RssPill.astro": "./src/components/RssPill.astro",
+		"./components/starlight/Head.astro": "./src/components/starlight/Head.astro",
 		"./components/starlight/Header.astro": "./src/components/starlight/Header.astro",
 		"./components/starlight/Footer.astro": "./src/components/starlight/Footer.astro",
 		"./components/starlight/SocialIcons.astro": "./src/components/starlight/SocialIcons.astro",

web/packages/ui/src/components/FontPreload.astro

@@ -0,0 +1,11 @@
+---
+// Preload the two brand fonts every page renders text in, so the browser
+// fetches them with the HTML instead of after the stylesheet. `?url` gives the
+// same hashed, base-prefixed file the @font-face rules in fonts.css point at.
+// The italic face is left to load on demand.
+import interUrl from '../assets/fonts/inter-latin-wght-normal.woff2?url';
+import monoUrl from '../assets/fonts/jetbrains-mono-latin-wght-normal.woff2?url';
+---
+
+<link rel="preload" href={interUrl} as="font" type="font/woff2" crossorigin />
+<link rel="preload" href={monoUrl} as="font" type="font/woff2" crossorigin />

web/packages/ui/src/components/starlight/Head.astro

@@ -0,0 +1,14 @@
+---
+// Mirrors @astrojs/starlight 0.39.2 Head.astro; re-sync on every Starlight upgrade.
+//
+// Starlight's head tags (what its own Head component renders: route data from
+// Astro.locals.starlightRoute.head), plus the brand-font preloads. Rendered
+// directly rather than wrapping Starlight's Head, which this package can't
+// import without depending on @astrojs/starlight.
+import FontPreload from '../FontPreload.astro';
+
+const { head } = Astro.locals.starlightRoute;
+---
+
+{head.map(({ tag: Tag, attrs, content }) => <Tag {...attrs} set:html={content} />)}
+<FontPreload />

web/packages/ui/src/styles/fonts.css

@@ -1,6 +1,6 @@
 /*
  * Self-hosted brand fonts: Inter and JetBrains Mono, the faces --font-sans and
- * --font-mono in tokens.css name. Latin subset only, as variable fonts
+ * --font-mono in tokens.css name (Inter in normal and italic). Latin subset only, as variable fonts
  * (weights 100-900), served from this package so no page requests a font from
  * a third party. font-display: swap keeps text visible while they load.
  * Files and their SIL Open Font License texts: ../assets/fonts/.
@@ -16,6 +16,17 @@
 		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 100 900;
+	src: url('../assets/fonts/inter-latin-wght-italic.woff2') format('woff2');
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 @font-face {
 	font-family: 'JetBrains Mono';
 	font-style: normal;

web/sites/api/astro.config.mjs

@@ -43,6 +43,7 @@ export default defineConfig({
 				'@wheels-dev/ui/styles/starlight-theme.css',
 			],
 			components: {
+				Head: '@wheels-dev/ui/components/starlight/Head.astro',
 				Header: '@wheels-dev/ui/components/starlight/Header.astro',
 				Footer: '@wheels-dev/ui/components/starlight/Footer.astro',
 				SocialIcons: '@wheels-dev/ui/components/starlight/SocialIcons.astro',

web/sites/blog/src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import Header from '@wheels-dev/ui/components/Header.astro';
 import Footer from '@wheels-dev/ui/components/Footer.astro';
+import FontPreload from '@wheels-dev/ui/components/FontPreload.astro';
 import NewsletterSignup from '../components/NewsletterSignup.astro';
 import '@wheels-dev/ui/styles/tokens.css';
 import '@wheels-dev/ui/styles/base.css';
@@ -18,6 +19,7 @@ const { title, description = 'News, tutorials, and release announcements for Whe
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<FontPreload />
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
 		<title>{title}</title>
 		<meta name="description" content={description} />

web/sites/guides/astro.config.mjs

@@ -209,6 +209,7 @@ const config = defineConfig({
 				'@wheels-dev/ui/styles/starlight-theme.css',
 			],
 			components: {
+				Head: '@wheels-dev/ui/components/starlight/Head.astro',
 				Header: '@wheels-dev/ui/components/starlight/Header.astro',
 				Footer: '@wheels-dev/ui/components/starlight/Footer.astro',
 				SocialIcons: '@wheels-dev/ui/components/starlight/SocialIcons.astro',

web/sites/landing/src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import Header from '@wheels-dev/ui/components/Header.astro';
 import Footer from '@wheels-dev/ui/components/Footer.astro';
+import FontPreload from '@wheels-dev/ui/components/FontPreload.astro';
 import '@wheels-dev/ui/styles/tokens.css';
 import '@wheels-dev/ui/styles/base.css';
 
@@ -17,6 +18,7 @@ const { title, description = 'Wheels — a CFML MVC framework.', current = 'land
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<FontPreload />
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
 		<title>{title}</title>
 		<meta name="description" content={description} />

web/sites/packages/src/components/PackageCard.astro

@@ -77,6 +77,7 @@ const homepage = /^https?:\/\//.test(pkg.homepage) ? pkg.homepage : '';
   .install { display: flex; align-items: center; gap: 0.5rem; }
   .install code {
     flex: 1;
+    min-width: 0;
     font-size: 0.8125rem;
     padding: 0.25rem 0.5rem;
     background: var(--color-surface-2, #f3f3f3);

web/sites/packages/src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import Header from '@wheels-dev/ui/components/Header.astro';
 import Footer from '@wheels-dev/ui/components/Footer.astro';
+import FontPreload from '@wheels-dev/ui/components/FontPreload.astro';
 import '@wheels-dev/ui/styles/tokens.css';
 import '@wheels-dev/ui/styles/base.css';
 
@@ -16,6 +17,7 @@ const { title, description = 'Wheels packages registry' } = Astro.props;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <FontPreload />
     <title>{title}</title>
     <meta name="description" content={description} />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

web/sites/packages/src/pages/index.astro

@@ -103,14 +103,14 @@ const packages = await listAll();
   }
   .package-grid {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: 1rem;
   }
   @media (min-width: 640px) {
-    .package-grid { grid-template-columns: repeat(2, 1fr); }
+    .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
   @media (min-width: 960px) {
-    .package-grid { grid-template-columns: repeat(3, 1fr); }
+    .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   }
   .count-line { margin-top: 1.5rem; color: var(--color-fg-muted, #555); font-size: 0.875rem; }
 </style>