mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 07:20:43 +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.
24 lines
789 B
TypeScript
24 lines
789 B
TypeScript
import { Code } from '@/components/code'
|
|
import type { CodeExample } from './BlockchainProductLayout'
|
|
|
|
/** The labels the blockchain pages tab by, as the grammars shiki knows them. */
|
|
const GRAMMAR: Record<string, string> = {
|
|
Solidity: 'solidity',
|
|
Node: 'javascript',
|
|
Python: 'python',
|
|
Go: 'go',
|
|
Rust: 'rust',
|
|
Ruby: 'ruby',
|
|
C: 'c',
|
|
'C++': 'cpp',
|
|
}
|
|
|
|
/**
|
|
* A page's sample with its code highlighted where the page is built
|
|
* (components/code). The server page maps its examples through this and hands
|
|
* the client layout nodes, so the tabs switch between finished blocks.
|
|
*/
|
|
export function sample(example: { language: string; filename: string; code: string }): CodeExample {
|
|
return { ...example, code: <Code lang={GRAMMAR[example.language]} code={example.code} /> }
|
|
}
|