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.
52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import { Code } from '@/components/code'
|
|
import TasksPage from './view'
|
|
|
|
const SAMPLES = [
|
|
{
|
|
file: "workflow.go",
|
|
lang: "go",
|
|
delay: 0.1,
|
|
code: `func OrderWorkflow(ctx workflow.Context,
|
|
order Order) error {
|
|
|
|
// Step 1: Reserve inventory
|
|
err := workflow.ExecuteActivity(ctx,
|
|
ReserveInventory, order).Get(ctx, nil)
|
|
|
|
// Step 2: Charge payment
|
|
err = workflow.ExecuteActivity(ctx,
|
|
ChargePayment, order).Get(ctx, nil)
|
|
|
|
// Step 3: Ship order
|
|
return workflow.ExecuteActivity(ctx,
|
|
ShipOrder, order).Get(ctx, nil)
|
|
}`,
|
|
},
|
|
{
|
|
file: "workflow.ts",
|
|
lang: "typescript",
|
|
delay: 0.15,
|
|
code: `async function orderWorkflow(
|
|
order: Order
|
|
): Promise<void> {
|
|
|
|
// Step 1: Reserve inventory
|
|
await reserveInventory(order)
|
|
|
|
// Step 2: Charge payment
|
|
await chargePayment(order)
|
|
|
|
// Step 3: Ship order
|
|
await shipOrder(order)
|
|
|
|
// If any step fails, saga
|
|
// compensation runs automatically
|
|
}`,
|
|
},
|
|
]
|
|
|
|
/** The page, with its workflows highlighted where it is built (components/code). */
|
|
export default function Page() {
|
|
return <TasksPage samples={SAMPLES.map(({ lang, ...s }) => ({ ...s, code: <Code lang={lang} code={s.code} /> }))} />
|
|
}
|