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
4.8 KiB
TypeScript

'use client'
import type { ReactNode } from 'react'
import { ArrowRight, BarChart3, Clock, Layers, ListOrdered, Repeat, Shield, Zap } from 'lucide-react'
import { OSSRevenueBanner } from '@/components/oss/OSSRevenueBanner'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
/**
* MQ, 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 MQPage({ source }: { source: ReactNode }) {
return (
<>
<ProductLanding
badge={"Job queue"}
badgeIcon={ListOrdered}
title={"Hanzo MQ"}
tagline={"Background work, done later"}
lede={"MQ is a TypeScript library, not a server to run. Import it and your jobs live as data structures in Hanzo KV: add one here, and a worker in another process picks it up — with priorities, delays, retries with backoff, a rate limit per queue, and parent jobs that wait on their children. Every state change is a Lua script running inside the store, so two workers never take the same job."}
ctas={[
{ label: "GitHub", href: "https://github.com/hanzoai" },
]}
what={{
title: "The queue is data, the workers are yours",
sub: "Nothing sits in the middle deciding. The state is in Hanzo KV and your processes race for it, safely.",
pillars: [
{
icon: Clock,
title: "Scheduling",
body: "A cron expression, a delay in milliseconds, or a job that repeats on an interval — timezone aware, and held in the store rather than in a process that might restart.",
},
{
icon: Zap,
title: "Rate Limiting",
body: "Cap how many jobs a queue may start in a window, and how many a single worker runs at once. The third-party API with a quota stops being the reason your service falls over.",
},
{
icon: Layers,
title: "Priority Queues",
body: "A job carries a priority, so the urgent one goes ahead of the backlog. Inside one priority it stays first in, first out, which is what keeps ordinary work from quietly starving.",
},
{
icon: Repeat,
title: "Retry & Backoff",
body: "Set attempts and a backoff — fixed, exponential, or a function you write. A worker that dies mid-job loses its lock and the job is handed to another, so work is attempted at least once and can be attempted twice. Write it to be idempotent and that is a property rather than a surprise.",
},
{
icon: BarChart3,
title: "Watch it happen",
body: "QueueEvents streams completed, failed, progress and stalled as they occur, so a job's life is something you observe rather than reconstruct from logs afterwards.",
},
{
icon: Shield,
title: "Failure is a state, not a deletion",
body: "A job that runs out of attempts lands in the failed set carrying its error and stack. Read it, fix the cause, retry it. Nothing disappears because it went wrong.",
},
],
}}
stats={{
items: [
{ value: "Library", label: "No broker to run" },
{ value: "Cron", label: "Scheduling" },
{ value: "Retries", label: "With backoff" },
{ value: "At-least-once", label: "Delivery" },
],
}}
code={{
head: { title: "Add a job here, run it there" },
name: "worker.ts",
source,
}}
finalCta={{
title: "Add a job and walk away",
sub: "Free tier includes 10K jobs/month. No job size limits.",
buttons: [
{ label: "View on GitHub", href: "https://github.com/hanzoai" },
],
}}
>
<OSSRevenueBanner />
</ProductLanding>
<ProductFooter slug={"mq"} name={"MQ"} />
</>
)
}