Files
zeekayandHanzo Dev 5313260909 Every docs site wears the same chrome
One app carried the Hanzo shell and twenty did not, so a reader crossing from
base.hanzo.ai to zen.hanzo.ai left the ecosystem and landed somewhere that only
resembled it. Five of those twenty had hand-rolled a footer of their own —
sixteen lines of copyright and a repo link, written five separate times.

Each app now loads the brand tokens before its own sheet, reports through
docs-analytics under its own product name, and renders HanzoFooter from
@hanzogui/shell — the same 6-column ecosystem footer, defined once, that
apps/docs already used.

A footer written inside a layout was chrome pretending to be content, and it is
gone. A footer written inside a page is content pretending to be chrome: those
keep their words and become sections, so each page has one contentinfo landmark
instead of two.

Three manifests listed @hanzo/font twice in the same object.

Builds verified across the four shapes this repo has: a static export, a
next.config.mjs app, a single-page app with no route groups, and one that
already reported analytics. Every one renders exactly one footer.

Co-authored-by: Hanzo Dev <[email protected]>
2026-08-29 14:29:19 -07:00

37 lines
1.2 KiB
TypeScript

// Brand tokens load before the app's own sheet so the theme can override
// where the two meet.
import '@hanzo/brand/styles/variables.css';
import './global.css';
import type { Viewport } from 'next';
import { baseUrl, createMetadata } from '@/lib/metadata';
import { RootProvider } from '@hanzo/docs-base-ui/provider/next';
import type { ReactNode } from 'react';
import { Analytics } from '@hanzo/docs-analytics';
export const metadata = createMetadata({
title: {
template: '%s | Hanzo Insights',
default: 'Hanzo Insights — Product Analytics Platform',
},
description: 'Self-hosted product analytics with event tracking, feature flags, session replay, A/B testing, and more. Open source, privacy-first, built by Hanzo AI.',
metadataBase: baseUrl,
});
export const viewport: Viewport = {
themeColor: [
{ media: '(prefers-color-scheme: dark)', color: '#0A0A0A' },
{ media: '(prefers-color-scheme: light)', color: '#fff' },
],
};
export default function Layout({ children }: { children: ReactNode }) {
return (
<html lang="en" className="dark" suppressHydrationWarning>
<body className="antialiased">
<RootProvider>{children}</RootProvider>
<Analytics product="insights-docs" />
</body>
</html>
);
}