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

102 lines
5.1 KiB
TypeScript

'use client'
import type { ReactNode } from 'react'
import { ArrowRight, BarChart3, GitBranch, Layers, Radio, Server, Shield, Zap } from 'lucide-react'
import { OSSRevenueBanner } from '@/components/oss/OSSRevenueBanner'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
/**
* Stream, through the ONE product kit.
*
* One of NINE pages — console, insights, kms, kv, mq, pubsub, sql, storage,
* stream — that shared a class set 100%: the same hero, stat row, six-card
* grid, terminal and call to action, written out nine times in ~310 utility
* classes each. They now pass one typed props object to `ProductLanding` and
* carry zero layout classes. See LLM.md, "Tailwind is NOT gone", for the rule.
*
* EVERY WORD IS THE ONE THAT WAS HERE, the four stat tiles included: 28 of the
* group's 36 carry a port, a version, a licence or a coding the prose does not
* (measured), so unlike /ledger's four they are not restatements and they stay.
*
* One fix the move makes by construction: ProductFooter sat INSIDE the final
* card's `max-w-4xl` wrapper on all nine, so the OSS attribution and deploy
* block rendered narrower here than on every other product page.
*/
export default function StreamPage({ source }: { source: ReactNode }) {
return (
<>
<ProductLanding
badge={"Kafka Wire Protocol"}
badgeIcon={Radio}
title={"Hanzo Stream"}
tagline={"A Kafka port in front of Hanzo PubSub"}
lede={"Stream speaks the Kafka binary protocol on 9092 and stores nothing itself. A produce becomes a message in a durable PubSub stream — topic orders, partition 0, is the stream kafka-orders-0 — and a fetch reads it back out. Your producers and consumers connect unchanged, and it runs inside your cluster, next to the store it fronts."}
ctas={[
{ label: "GitHub", href: "https://github.com/hanzoai/stream" },
]}
what={{
title: "Your clients, our store",
sub: "Keep the producers and consumers you have. Drop the cluster underneath them.",
pillars: [
{
icon: Layers,
title: "It speaks Kafka",
body: "Produce, Fetch, ListOffsets, Metadata, OffsetCommit, OffsetFetch, FindCoordinator, JoinGroup, SyncGroup, Heartbeat, CreateTopics and ApiVersions, at the versions modern clients negotiate. kafka-python, sarama, confluent-kafka and franz-go all connect.",
},
{
icon: Zap,
title: "The log lives in PubSub",
body: "One topic partition is one durable PubSub stream. Retention, replicas and disk are that stream's settings, so the thing actually holding your events is a system you already run and already back up.",
},
{
icon: Server,
title: "Nothing to operate",
body: "One Go binary that keeps no state of its own. Restart it, run several, roll it mid-deploy — the log is somewhere else, so the gateway is never the piece you are afraid to touch.",
},
{
icon: GitBranch,
title: "Offsets survive a restart",
body: "A group's committed offsets live in a PubSub key-value bucket, so a consumer that dies comes back where it left off instead of at the top. Ask for an offset that has aged out and you get OFFSET_OUT_OF_RANGE, so the client resets rather than hangs.",
},
{
icon: BarChart3,
title: "Offsets are stamped, not inferred",
body: "Every Kafka offset is written into the record batch header when the batch is produced, and read straight back from there. Deriving them from the store's own sequence numbers works right up until the sequence has gaps in it — and then one record can make every fetch after it unreadable.",
},
{
icon: Shield,
title: "Bad batches are refused on arrival",
body: "A produce whose batch chain does not line up is refused with INVALID_RECORD instead of being written and discovered later by a consumer that cannot get past it. The scan that recovers a partition's bounds is capped, so a damaged topic degrades rather than stalls.",
},
],
}}
stats={{
items: [
{ value: "Kafka", label: "Wire protocol" },
{ value: "PubSub", label: "Holds the log" },
{ value: "Stateless", label: "No broker disk" },
{ value: "Durable", label: "At-least-once" },
],
}}
code={{
head: { title: "One line changes: the bootstrap server" },
name: "producer.py",
source,
}}
finalCta={{
title: "Point the bootstrap server at it",
sub: "The clients stay as they are. The cluster underneath them goes away.",
buttons: [
{ label: "View on GitHub", href: "https://github.com/hanzoai/stream" },
],
}}
>
<OSSRevenueBanner />
</ProductLanding>
<ProductFooter slug={"stream"} name={"Stream"} />
</>
)
}