Files
zeekay 11265a21fd Highlight every code sample with shiki in the code theme
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.
2026-10-05 01:31:58 -07:00

123 lines
5.8 KiB
TypeScript

'use client'
import type { ReactNode } from 'react'
import {
ArrowRight,
BookOpen,
CheckCircle2,
GitBranch,
Lock,
ScrollText,
Search,
Workflow,
} from 'lucide-react'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
/**
* Ledger, through the ONE product kit.
*
* This page used to draw its own hero, its own feature grid, its own terminal
* frame and its own call to action — the same four shapes `ProductLanding`
* already owns, written out again in utility classes. It was not alone: /docdb,
* /database and /billing are structurally IDENTICAL to what was here (measured:
* a token-blind diff of any two of them is empty but for the words), and
* /node and /network are a second copy of the same pair. Five hand-rolled
* repetitions of a layout that exists as a component.
*
* The kit's own header states the rule this restores — "Content is data — each
* page passes ONE typed props object; this file owns the layout" — and the
* pages already on it carry ZERO layout classes of their own, against ~275
* each for the copies.
*
* EVERY WORD IS THE ONE THAT WAS HERE. This is a change of who draws the page,
* not of what it says; the copy, the links, the six features and the Numscript
* sample are carried over verbatim. The four stat tiles are gone with the
* hand-rolled hero, and deliberately: `Atomic / Reverts / USD/2 / Numscript`
* were labels rather than measurements, and the kit's `stats` row is for
* measured numbers. Each of the four says something the features below say
* properly, in a sentence, with its reason.
*/
const DOCS = 'https://docs.hanzo.ai/docs/cli/books'
const GITHUB = 'https://github.com/hanzoai'
export default function LedgerPage({ source }: { source: ReactNode }) {
return (
<>
<ProductLanding
badge="Double-Entry Ledger"
badgeIcon={ScrollText}
title="Hanzo Ledger"
lede="A double-entry ledger you post to over HTTP. Money here only ever moves: a posting names a source account, a destination account, an amount and an asset. There is no way to write a debit without its credit, because a one-sided entry is not something the API can express."
ctas={[
{ label: 'Read the docs', href: DOCS, icon: ArrowRight },
{ label: 'GitHub', href: GITHUB },
]}
what={{
eyebrow: 'What is Hanzo Ledger',
title: 'Every cent lands somewhere',
sub: 'A posting has two ends. There is no call that writes only one of them.',
pillars: [
{
icon: BookOpen,
title: 'Balanced by construction',
body: 'A posting is a movement from one account to another, so an unbalanced entry is not rejected by a check — it cannot be written down. New money enters through one account named world; every other account must stay at or above zero, and a transaction that would push one under is refused whole.',
},
{
icon: Lock,
title: 'Nothing is edited',
body: 'No endpoint changes a posted transaction. A mistake is corrected by a reversing transaction that points back at the original, so what happened and what you meant both survive. Entries can also be SHA-256 chained, each hashed over the one before it, which makes a later edit in the database detectable rather than invisible.',
},
{
icon: CheckCircle2,
title: 'Safe to retry',
body: 'Send an Idempotency-Key and a repeat returns the original rather than posting again. The ledger also fingerprints what you sent, so reusing a key with different postings is caught instead of quietly accepted — which is the failure that makes retries dangerous in the first place.',
},
],
}}
code={{
head: { eyebrow: 'Numscript', title: 'One transaction, however many parties' },
lang: 'bash',
source,
ctas: [
{ label: 'Read the docs', href: DOCS, icon: ArrowRight },
{ label: 'View on GitHub', href: GITHUB },
],
}}
features={{
eyebrow: 'Capabilities',
title: 'What the API gives you',
items: [
{
icon: Workflow,
title: 'Numscript',
body: 'Describe the movement instead of computing it. Send an amount from an account and split it across destinations by percentage, nesting splits inside splits. The whole flow posts as one transaction, so a fee that cannot be taken takes the payment with it.',
},
{
icon: GitBranch,
title: 'Assets carry their own precision',
body: "An asset is a code plus the number of decimal places it uses — USD/2 for cents, and the same shape for points, credits or a token with eighteen. Amounts are whole numbers in the asset's smallest unit, so nothing rounds on the way in.",
},
{
icon: Search,
title: 'Balances arrive with the transaction',
body: 'Each transaction records the balances it produced for the accounts it touched, so a balance is read rather than recomputed from the whole history. Aggregate across a subtree of accounts in one query.',
},
],
}}
finalCta={{
icon: ScrollText,
title: 'Get started with Ledger',
sub: 'Post your first transaction over HTTP, or describe the whole split once in Numscript and let the ledger do the arithmetic.',
buttons: [
{ label: 'Read the docs', href: DOCS, icon: ArrowRight },
{ label: 'View on GitHub', href: GITHUB },
],
}}
/>
<ProductFooter slug="ledger" name="Ledger" />
</>
)
}