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.
27 lines
995 B
TypeScript
27 lines
995 B
TypeScript
import { Code } from '@/components/code'
|
|
import Playground from './view'
|
|
|
|
const EXAMPLES = [
|
|
{ lang: 'curl', label: 'One request', code: `curl https://api.hanzo.ai/v1/chat/completions \\
|
|
-H "Authorization: Bearer $HANZO_API_KEY" \\
|
|
-d '{"model":"zen","messages":[{"role":"user","content":"Hello"}]}'` },
|
|
{ lang: 'python', label: 'The Python client', code: `pip install hanzoai
|
|
|
|
import os
|
|
from hanzoai.cloud import ApiClient, Configuration, KeysApi
|
|
|
|
api = ApiClient(Configuration(
|
|
host="https://api.hanzo.ai",
|
|
access_token=os.environ["HANZO_API_KEY"],
|
|
))
|
|
print(KeysApi(api).get_keys().keys)` },
|
|
]
|
|
|
|
/** The grammar each starter's language label is written in. */
|
|
const GRAMMAR: Record<string, string> = { curl: 'bash', python: 'python' }
|
|
|
|
/** The page, with its starters highlighted where they are built (components/code). */
|
|
export default function Page() {
|
|
return <Playground examples={EXAMPLES.map((e) => ({ ...e, code: <Code lang={GRAMMAR[e.lang]} code={e.code} /> }))} />
|
|
}
|