mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 02:13:12 +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.
86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
import { Code } from '@/components/code'
|
|
import type { Samples } from './DeveloperFirst'
|
|
|
|
/** The same work in each of the three ways in: the SDK, the Python client, HTTP. */
|
|
const SAMPLES = {
|
|
js: `// Initialize Hanzo Analytics in your app
|
|
import { HanzoAnalytics } from 'hanzo-analytics';
|
|
|
|
// Configure your instance
|
|
const analytics = new HanzoAnalytics({
|
|
projectId: 'YOUR_PROJECT_ID',
|
|
options: {
|
|
autoPageviews: true,
|
|
trackClicks: true,
|
|
debugMode: false
|
|
}
|
|
});
|
|
|
|
// Track custom events
|
|
analytics.track('purchase_completed', {
|
|
productId: 'prod_123',
|
|
price: 89.99,
|
|
currency: 'USD'
|
|
});
|
|
|
|
// Identify users
|
|
analytics.identify('user_123', {
|
|
name: 'Jane Smith',
|
|
email: '[email protected]',
|
|
plan: 'premium'
|
|
});`,
|
|
|
|
py: `# Install with pip install hanzo-analytics
|
|
import hanzo_analytics
|
|
|
|
# Initialize client
|
|
analytics = hanzo_analytics.Client(
|
|
project_id="YOUR_PROJECT_ID",
|
|
api_key="YOUR_API_KEY"
|
|
)
|
|
|
|
# Track events
|
|
analytics.track(
|
|
event_name="order_completed",
|
|
properties={
|
|
"order_id": "ord_123",
|
|
"total": 99.99,
|
|
"products": [
|
|
{"id": "prod_1", "name": "Keyboard", "price": 59.99},
|
|
{"id": "prod_2", "name": "Mouse", "price": 39.99}
|
|
]
|
|
},
|
|
user_id="user_123"
|
|
)
|
|
|
|
# Batch tracking for performance
|
|
with analytics.batch():
|
|
for event in events:
|
|
analytics.track(event.name, event.properties, event.user_id)`,
|
|
|
|
api: `# Using curl to send events to Hanzo Analytics API
|
|
|
|
curl -X POST https://api.hanzo.analytics/v1/track \\
|
|
-H "Content-Type: application/json" \\
|
|
-H "Authorization: Bearer YOUR_API_KEY" \\
|
|
-d '{
|
|
"projectId": "YOUR_PROJECT_ID",
|
|
"event": "page_view",
|
|
"properties": {
|
|
"url": "https://yourapp.com/pricing",
|
|
"referrer": "https://google.com",
|
|
"title": "Pricing | Your App"
|
|
},
|
|
"userId": "user_123",
|
|
"anonymousId": "anon_456",
|
|
"timestamp": "2023-07-22T15:42:12.123Z"
|
|
}'`
|
|
} as const
|
|
|
|
/** The samples highlighted where the page is built (components/code), for DeveloperFirst. */
|
|
export const samples = (): Samples => ({
|
|
js: <Code lang="javascript" code={SAMPLES.js} />,
|
|
py: <Code lang="python" code={SAMPLES.py} />,
|
|
api: <Code lang="bash" code={SAMPLES.api} />,
|
|
})
|