Files
zeekay 9688bba071 the face these docs called Zen was Geist; take it from @hanzo/font
global.css declared its faces by importing @hanzo/design/tokens/fonts.css. The
file that import points at, assets/fonts/Zen-Variable.woff2, is Geist: at the
version this lockfile pinned its name table reads Geist outright, it signs VRCL,
and it carries 975 glyphs including U+F8FF. Zen signs HNZO, has 974, and has no
U+F8FF. So the site served Geist behind an @font-face named "Zen".

@hanzo/font is where Zen is drawn and its bytes check out, so bind it there
through next/font. That hashes the family, which no stray @font-face for "Zen"
can shadow, and the theme reads --font-zen-sans / --font-zen-mono instead of
naming a family literally. @hanzo/design was a direct dependency for that one
import and nothing else here uses it.

The two families also move out of @theme and into a plain :root, because the
@hanzo/docs import is a BUILT Tailwind sheet: it arrives with its own
@layer theme carrying the stock --font-sans and --font-mono, and inside @theme
those win. Measured on the built sheet, --font-mono came out as the OS
monospace stack — so .font-mono, used in six places, and every code block
through --code-font were rendering in the platform's monospace and not in Zen
Mono. Unlayered beats any layer, so the plain :root settles it. The export now
carries two woff2 files, family Zen and Zen Mono, vendor HNZO, 974 and 1158
glyphs, and the word Geist appears nowhere in 293 pages.
2026-08-28 17:13:06 -07:00

95 lines
3.2 KiB
TypeScript

import './global.css';
import { RootProvider } from '@hanzo/docs/ui/provider/base';
import { NextProvider } from '@hanzo/docs/core/framework/next';
import { Zen } from '@hanzo/font/sans';
import { ZenMono } from '@hanzo/font/mono';
import type { ReactNode } from 'react';
import { SearchDialog } from '@/components/search-dialog';
export const metadata = {
title: {
default: 'Hanzo Improvement Proposals (HIPs) - AI Infrastructure Standards',
template: '%s | HIPs',
},
description: 'Technical standards and protocols for Hanzo AI infrastructure - Model Context Protocol, Agent SDK, LLM Gateway, and AI services that power the next generation of applications.',
keywords: ['Hanzo', 'AI', 'proposals', 'HIP', 'MCP', 'agents', 'infrastructure', 'LLM', 'gateway'],
authors: [{ name: 'Hanzo AI' }],
metadataBase: new URL('https://hips.hanzo.ai'),
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/favicon.png', type: 'image/png' },
],
shortcut: '/favicon.svg',
apple: '/favicon.png',
},
openGraph: {
title: 'Hanzo Improvement Proposals (HIPs) - AI Infrastructure Standards',
description: 'Explore the technical foundations of Hanzo AI - standards for Model Context Protocol, Agent SDK, LLM Gateway, and AI services.',
type: 'website',
siteName: 'Hanzo Improvement Proposals',
images: [
{
url: '/og.png',
width: 1200,
height: 630,
alt: 'Hanzo Improvement Proposals - AI Infrastructure Standards',
},
],
},
twitter: {
card: 'summary_large_image',
title: 'Hanzo Improvement Proposals (HIPs) - AI Infrastructure Standards',
description: 'Technical standards for Hanzo AI infrastructure - MCP, Agent SDK, LLM Gateway, and more.',
images: ['/twitter.png'],
},
};
export default function Layout({ children }: { children: ReactNode }) {
return (
<html
lang="en"
className={`${Zen.variable} ${ZenMono.variable}`}
suppressHydrationWarning
>
<head>
{/* Prevent flash - respect system preference or stored preference */}
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
const stored = localStorage.getItem('hanzo-hips-theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (stored === 'dark' || (stored !== 'light' && prefersDark)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
})();
`,
}}
/>
</head>
<body className="min-h-svh bg-background font-sans antialiased">
<NextProvider>
<RootProvider
search={{
enabled: false,
}}
theme={{
enabled: true,
defaultTheme: 'system',
storageKey: 'hanzo-hips-theme',
}}
>
<SearchDialog />
<div className="relative flex min-h-svh flex-col bg-background">
{children}
</div>
</RootProvider>
</NextProvider>
</body>
</html>
);
}