mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
11265a21fd
Code on hanzo.ai was plain monospace: 285 blocks across 200 pages, one of them hand-inked in four greys. components/code now renders each sample at build with shiki and @hanzo/ui's codeTheme (Dracula dark, GitHub Light light), every colour written as light-dark() so the page's color-scheme picks it, on the theme's own ground. The page ships the coloured spans and no highlighter; e2e/gates/code.spec.ts holds both. A client page that shows code is split into a server page.tsx that owns the sample and a client view.tsx that takes the highlighted node: ProductLanding's code.source, the blockchain pages' codeExamples, the models kit Sample, the guest-key card, realtime, analytics, payments, sdks and the rest. Transcripts, agent prompts and ASCII diagrams are not code and keep their markup. Takes @hanzo/ui 8.27.83 for codeTheme and @hanzo/design 0.5.35 with it, regenerates app/gui.css for the new theme keys, and lowers the raw-colour allowance to 58: the samples' literal inks are gone.
80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import { Cta, Page, PageHero, Prose, Section } from '@/components/marketing/page-kit'
|
|
import type { Layer, Link } from '@/lib/layers'
|
|
import { XStack } from '@/components/ui'
|
|
import { Stack } from './Stack'
|
|
import { Code } from '@/components/code'
|
|
|
|
/** A row of links that wraps: the docs, or the pages a layer is made of. */
|
|
function Links({ links }: { links: Link[] }) {
|
|
return (
|
|
<XStack flexWrap="wrap" gap="$3">
|
|
{links.map((l) => (
|
|
<Cta key={l.href} href={l.href}>
|
|
{l.label}
|
|
</Cta>
|
|
))}
|
|
</XStack>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* One layer of Hanzo OS, and the one template every /products/<id> page is: what
|
|
* the layer is, the operations that serve it, a request to paste, what measures
|
|
* it, where to read more, and where it sits in the stack.
|
|
*/
|
|
export function LayerPage({ layer }: { layer: Layer }) {
|
|
return (
|
|
<Page>
|
|
<PageHero eyebrow={layer.rail ? 'Hanzo OS ยท beside every layer' : 'Hanzo OS'} title={layer.name} lede={layer.line} />
|
|
<Section>
|
|
<Prose>
|
|
<p>{layer.body}</p>
|
|
</Prose>
|
|
</Section>
|
|
<Section title="API" lede="Operations on api.hanzo.ai. One key reaches every layer.">
|
|
<Prose>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Method</th>
|
|
<th>Path</th>
|
|
<th>What it does</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{layer.ops.map((op) => (
|
|
<tr key={`${op.method} ${op.path}`}>
|
|
<td>
|
|
<code>{op.method}</code>
|
|
</td>
|
|
<td>
|
|
<code>{op.path}</code>
|
|
</td>
|
|
<td>{op.does}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</Prose>
|
|
</Section>
|
|
<Section title="Try it">
|
|
<Code lang="bash" code={layer.sample} rounded="var(--radius-lg)" borderWidth={1} borderColor="var(--border)" />
|
|
</Section>
|
|
{layer.proofs?.length ? (
|
|
<Section title="Measured">
|
|
<Links links={layer.proofs} />
|
|
</Section>
|
|
) : null}
|
|
<Section title="Docs">
|
|
<Links links={layer.docs} />
|
|
</Section>
|
|
<Section title="On this site">
|
|
<Links links={layer.pages} />
|
|
</Section>
|
|
<Section title="The stack">
|
|
<Stack current={layer.id} />
|
|
</Section>
|
|
</Page>
|
|
)
|
|
}
|