mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
24e67d965e
The commits section read numbers that were typed into scripts/sync-oss.ts (5,420 repositories, 214 orgs, 784 pushes a day, 245,417 commits, each contributor's count), a day's count scaled by a made-up factor, and a star count that began at 1,420. The forge's database holds 1,150 repositories and 46 orgs; none of that was read. Its panels were tinted rgba over a stylesheet, DualStarButton showed its guess before GitHub answered, and BulkStarModal said "successfully starred" over a forge PUT. scripts/sync-oss.ts (was .mjs) now counts GitHub's public activity for the orgs we publish: commits a day, the year, the week, active repositories and the newest commits, written at each build with the moment it was read. A figure the snapshot does not hold is not drawn. The grid, bars and repository card are @hanzo/ui/marketing (8.29.19); the showcase stylesheet and DayActivityModal are deleted. The org and repo pages lose their typed "velocity" banners. Design lint is zero in components/oss, home/OpenSource and ForgeBetaBanner. e2e/gates/activity.spec.ts holds each figure to the snapshot, the cards to one fill and edge in both schemes, a card's name, line and foot to their own rows, and the phone to no sideways scroll. Claude-Session: https://claude.ai/code/session_017vrVus6PPBgP5YRzKV1iqW
397 lines
18 KiB
TypeScript
397 lines
18 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* /open-source — what we publish, what we stand on, and what we pay back.
|
|
*
|
|
* NO TAILWIND AND NO STYLE OBJECTS. The four section frames are
|
|
* `components/marketing/band`'s `Band` and `Head`; @hanzo/ui's marketing
|
|
* components carry the type and the controls (`Display`, `Lede`, `Title`,
|
|
* `Chip`, `Action`, `Leaf`); everything left is gui props over
|
|
* @hanzo/design's tokens.
|
|
*
|
|
* Three things the swap moves, each the shared shape winning over this page's
|
|
* own copy of it:
|
|
*
|
|
* - the section headings take `Title quiet`, so they step 3xl -> 4xl at
|
|
* 640 like every other band on the site.
|
|
* - the four button spellings become `Action` at its two weights.
|
|
* - a foundation card is `Leaf`: its `hover:border-primary/50` IS the leaf's
|
|
* hover edge and its `group-hover:text-primary` IS `Lift`, which is
|
|
* the pair that rule exists for. What `Leaf` cannot say is the card's
|
|
* GROUND changing on approach, so `hover:bg-secondary/60` stays a class,
|
|
* stated at the call site where a reader can see it.
|
|
*/
|
|
|
|
import React from "react";
|
|
import { motion } from "@/components/motion";
|
|
import type { ReactNode } from "react";
|
|
import { Star, Heart, ArrowRight, ExternalLink, Code, Building2, Scale, Sparkles, Check } from "lucide-react"
|
|
import { Github } from "@/components/brand"
|
|
import OSSCatalog from "@/components/oss/OSSCatalog"
|
|
import { OSSRevenueBanner } from "@/components/oss/OSSRevenueBanner";
|
|
import HanzoOpenSourceShowcase from "@/components/oss/HanzoOpenSourceShowcase";
|
|
import oss from "@/lib/data/oss.json";
|
|
import { Box, Text, View, XStack } from '@hanzo/ui'
|
|
import { Grid } from '@hanzo/ui/grid'
|
|
import { Band, Head } from '@/components/marketing/band'
|
|
import { Glow } from '@/components/shared/Glow'
|
|
import { Action, Chip, Display, Lede, More, Title, Leaf, Lift, Line } from '@hanzo/ui/marketing'
|
|
import { mix } from '@hanzo/app/lib/mix'
|
|
|
|
/** The inks this page draws in. */
|
|
const INK = 'var(--foreground)'
|
|
const DIM = 'var(--muted-foreground)'
|
|
|
|
/** The badge above a heading, in the tint this page has always drawn it. */
|
|
const BADGE = { mb: 24, px: 12, py: 4, fontSize: "$1", lineHeight: "1.3333", fontWeight: "500", borderColor: "transparent", bg: "color-mix(in srgb, var(--primary) 15%, transparent)", color: "var(--primary)" } as const
|
|
|
|
/** The pair of controls that closes a section, wrapping on a phone. */
|
|
const ROW = { flexWrap: 'wrap', items: 'center', justify: 'center', gap: 16 } as const
|
|
|
|
/** The small rung, on the leading its utility paired it with. */
|
|
const XS = { fontSize: '$1', lineHeight: '1.3333' } as const
|
|
|
|
/** A grey paragraph in a card, at the relaxed leading. */
|
|
const Note = ({ mb, children }: { mb?: number; children: ReactNode }) => (
|
|
<Line render="p" display="block" mb={mb} fontSize="$1" color={DIM} lineHeight="var(--leading-relaxed)">
|
|
{children}
|
|
</Line>
|
|
)
|
|
|
|
/** A foundation card: `Leaf`'s edge at rest, its hover edge, 16px inside.
|
|
*
|
|
* The GROUND is not here, and that is the point: an inline `background-color`
|
|
* out-ranks every rule, including the `hover:` that has to replace it, so the
|
|
* card's ground would have been frozen at rest. Measured in the export — the
|
|
* hover changed nothing. Ground and hover are one decision, so both are
|
|
* classes, side by side at the call site. */
|
|
const FOUNDATION = { p: 16, borderColor: "var(--border)", bg: mix('var(--secondary)', 30), hoverStyle: { borderColor: mix('var(--pure-white)', 50), bg: mix('var(--secondary)', 60) } } as const
|
|
|
|
const CLIP = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } as const
|
|
|
|
const OSS_FOUNDATIONS = [
|
|
{ name: "Python", description: "The language powering our ML/AI stack", url: "https://python.org", github: "https://github.com/python/cpython", creator: "Python Software Foundation", license: "PSF", emoji: "🐍" },
|
|
{ name: "Rust", description: "Systems language for our high-performance runtimes", url: "https://rust-lang.org", github: "https://github.com/rust-lang/rust", creator: "Rust Foundation", license: "MIT/Apache-2.0", emoji: "⚙️" },
|
|
{ name: "Go", description: "Powers our gateway, blockchain, and infra tooling", url: "https://go.dev", github: "https://github.com/golang/go", creator: "Go Authors / Google", license: "BSD-3-Clause", emoji: "🐹" },
|
|
{ name: "TypeScript", description: "The backbone of our developer SDKs and web apps", url: "https://typescriptlang.org", github: "https://github.com/microsoft/TypeScript", creator: "Microsoft", license: "Apache-2.0", emoji: "🔷" },
|
|
{ name: "React", description: "Powering every UI we ship", url: "https://react.dev", github: "https://github.com/facebook/react", creator: "Meta Open Source", license: "MIT", emoji: "⚛️" },
|
|
{ name: "Next.js", description: "Every hanzo.ai product is built on Next.js", url: "https://nextjs.org", github: "https://github.com/vercel/next.js", creator: "Vercel", license: "MIT", emoji: "▲" },
|
|
{ name: "PostgreSQL", description: "The database underlying all our stateful services", url: "https://postgresql.org", github: "https://github.com/postgres/postgres", creator: "PostgreSQL Global Development Group", license: "PostgreSQL License", emoji: "🐘" },
|
|
{ name: "Redis", description: "Fast caching and pub/sub throughout our platform", url: "https://redis.io", github: "https://github.com/redis/redis", creator: "Redis Ltd. / Salvatore Sanfilippo", license: "BSD-3-Clause", emoji: "🔴" },
|
|
{ name: "PyTorch", description: "Foundation of our ML training and inference", url: "https://pytorch.org", github: "https://github.com/pytorch/pytorch", creator: "Meta AI Research", license: "BSD-3-Clause", emoji: "🔥" },
|
|
{ name: "Kubernetes", description: "Orchestrates every workload in production", url: "https://kubernetes.io", github: "https://github.com/kubernetes/kubernetes", creator: "CNCF / Google", license: "Apache-2.0", emoji: "☸️" },
|
|
{ name: "Docker", description: "Containers make our MCP tools portable", url: "https://docker.com", github: "https://github.com/moby/moby", creator: "Docker / Moby Project", license: "Apache-2.0", emoji: "🐳" },
|
|
{ name: "OpenTelemetry", description: "Observability across every service", url: "https://opentelemetry.io", github: "https://github.com/open-telemetry/opentelemetry-specification", creator: "CNCF", license: "Apache-2.0", emoji: "📊" },
|
|
]
|
|
|
|
const COMMITMENTS = [
|
|
{
|
|
title: "We ship open source first",
|
|
body: "Every tool we build for ourselves gets published. If it's useful to us, it belongs to the community. No internal-only forks."
|
|
},
|
|
{
|
|
title: "We contribute upstream",
|
|
body: "When we find bugs or missing features in projects we depend on, we fix them upstream — not in private patches."
|
|
},
|
|
{
|
|
title: "We never lock in what we open",
|
|
body: "Anything published under MIT or Apache-2.0 stays that way. We will never relicense open repos to extract commercial value."
|
|
},
|
|
{
|
|
title: "We credit our foundations",
|
|
body: "Our platform is built on hundreds of open-source projects. We acknowledge, link to, and financially support the communities and maintainers who make this possible."
|
|
},
|
|
{
|
|
title: "We fund what we depend on",
|
|
body: "Through GitHub Sponsors, Open Collective, and direct partnerships, we invest back into the projects that power Hanzo."
|
|
},
|
|
{
|
|
title: "We welcome all contributors",
|
|
body: "Good code can come from anywhere. We maintain a contributor-friendly CONTRIBUTING.md, respond to PRs within 48 hours on active repos, and recognize every contributor."
|
|
},
|
|
]
|
|
|
|
const OpenSource = () => {
|
|
// Counted once per build by scripts/sync-oss.ts. Both numbers come off the
|
|
// same snapshot, so the orgs and the repositories they hold cannot disagree.
|
|
const stats = [
|
|
{ label: "Public Repositories", value: `${oss.repos}+`, icon: Code },
|
|
{ label: "GitHub Organizations", value: String(oss.orgs.length), icon: Building2 },
|
|
{ label: "Open License", value: "MIT/Apache", icon: Scale },
|
|
{ label: "Open-Weight Models", value: "90+", icon: Sparkles },
|
|
];
|
|
|
|
return (
|
|
<Box minH="100vh" $platform-web={{ color: 'var(--foreground)' }}>
|
|
<main>
|
|
{/* Hero Section */}
|
|
<Box
|
|
render="section"
|
|
position="relative"
|
|
overflow="hidden"
|
|
pt={96}
|
|
pb={64}
|
|
px={16}
|
|
$md={{ px: 32 }}
|
|
$lg={{ px: 48 }}
|
|
>
|
|
|
|
<Box position="relative" z="var(--z-raised)" width="100%" maxW={1024} mx="auto">
|
|
<Box $platform-web={{ textAlign: 'center' }}>
|
|
<Chip
|
|
render={<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }} />}
|
|
{...BADGE}
|
|
>
|
|
<Github width={14} height={14} />
|
|
Open Source First
|
|
</Chip>
|
|
|
|
<Display
|
|
render={<motion.h1 initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.05 }} />}
|
|
mb={24}
|
|
>
|
|
Building in the
|
|
<br />
|
|
open.
|
|
</Display>
|
|
|
|
<Lede
|
|
render={<motion.p initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.1 }} />}
|
|
mb={40}
|
|
width="100%"
|
|
maxW={768}
|
|
mx="auto"
|
|
>
|
|
We publish what we build, fix the bugs we find upstream instead of patching them in private,
|
|
and pay the projects we depend on. The commitments below are specific enough to hold us to.
|
|
</Lede>
|
|
|
|
<XStack
|
|
render={<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.15 }} />}
|
|
{...ROW}
|
|
mb={48}
|
|
>
|
|
<Action
|
|
href="https://github.com/hanzoai"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
fill
|
|
>
|
|
<Github width={16} height={16} />
|
|
View on GitHub
|
|
</Action>
|
|
<Action
|
|
href="https://github.com/hanzoai"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Star width={16} height={16} />
|
|
Star Our Repos
|
|
</Action>
|
|
</XStack>
|
|
|
|
{/* Stats */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 16 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4, delay: 0.2 }}
|
|
>
|
|
<Grid columns={{ min: 150, max: 4 }} gap={16}>
|
|
{stats.map((stat) => {
|
|
const Icon = stat.icon;
|
|
return (
|
|
<Box
|
|
key={stat.label}
|
|
p={16}
|
|
rounded="var(--radius-xl)"
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
bg={mix('var(--secondary)', 50)}
|
|
>
|
|
<View render={<Icon width={20} height={20} color={DIM} />} display="inline" mb={8} />
|
|
<Line render="div" display="block" fontSize="$7" fontWeight="700" color={INK} lineHeight="1.3333">{stat.value}</Line>
|
|
<Line render="div" display="block" {...XS} color={DIM}>{stat.label}</Line>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Grid>
|
|
</motion.div>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Standing on the Shoulders of Giants */}
|
|
<Band pad="$11" measure={1152}>
|
|
<Head
|
|
title="What Hanzo is built on"
|
|
lede="The projects our platform actually runs on, each with its licence and the people who maintain it."
|
|
/>
|
|
|
|
<Grid columns={{ min: 260, max: 4 }} gap={16}>
|
|
{OSS_FOUNDATIONS.map((foundation, i) => (
|
|
<Leaf
|
|
render={<motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.3, delay: i * 0.04 }} />}
|
|
key={foundation.name}
|
|
{...FOUNDATION}
|
|
>
|
|
<XStack items="center" gap={12} mb={8}>
|
|
<Line fontSize="$7" color="inherit" lineHeight="1.3333">{foundation.emoji}</Line>
|
|
<Box grow={1} shrink={1} flexBasis="0%" minW={0}>
|
|
<Lift
|
|
render="a"
|
|
href={foundation.github}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
display="block"
|
|
fontSize="$2"
|
|
lineHeight="1.4286"
|
|
fontWeight="600"
|
|
color="inherit"
|
|
{...CLIP}
|
|
>
|
|
{foundation.name}
|
|
</Lift>
|
|
<Line render="div" display="block" {...CLIP} {...XS} color={DIM}>
|
|
<More
|
|
href={foundation.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
fontSize="inherit"
|
|
fontWeight="inherit"
|
|
>
|
|
{foundation.creator}
|
|
</More>
|
|
</Line>
|
|
</Box>
|
|
</XStack>
|
|
<Note mb={8}>
|
|
{foundation.description}
|
|
</Note>
|
|
<Line px={6} py={2} rounded="var(--radius)" bg="var(--muted)" fontFamily="$mono" fontSize="$1" color={mix('var(--foreground)', 70)} display="inline-block" lineHeight="1.3333">
|
|
{foundation.license}
|
|
</Line>
|
|
</Leaf>
|
|
))}
|
|
</Grid>
|
|
</Band>
|
|
|
|
{/* Stewardship Commitments */}
|
|
<Band pad="$11" measure={1152}>
|
|
<Head
|
|
title="Our Stewardship Commitments"
|
|
lede="We hold ourselves to explicit, public commitments — not vague marketing language."
|
|
/>
|
|
|
|
<Grid columns={{ min: 300, max: 3 }} gap={20}>
|
|
{COMMITMENTS.map((commitment, i) => (
|
|
<Box
|
|
key={commitment.title}
|
|
render={<motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.3, delay: i * 0.06 }} />}
|
|
p={20}
|
|
rounded="var(--radius-xl)"
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
bg={mix('var(--secondary)', 30)}
|
|
>
|
|
<XStack items="flex-start" gap={12}>
|
|
<Box
|
|
shrink={0}
|
|
p={4}
|
|
mt={2}
|
|
rounded="var(--radius-full)"
|
|
bg={mix('var(--primary)', 15, 'srgb')}
|
|
>
|
|
<Check width={14} height={14} color="var(--primary)" />
|
|
</Box>
|
|
<Box>
|
|
<Line render="h3" display="block" mb={8} fontSize="$2" fontWeight="600" color={INK} lineHeight="1.4286">{commitment.title}</Line>
|
|
<Note>{commitment.body}</Note>
|
|
</Box>
|
|
</XStack>
|
|
</Box>
|
|
))}
|
|
</Grid>
|
|
</Band>
|
|
|
|
{/* The open-source royalty: apps/author's 20%, described at /oss */}
|
|
<OSSRevenueBanner />
|
|
|
|
{/* Hanzo Open Source Ecosystem Showcase */}
|
|
<HanzoOpenSourceShowcase />
|
|
|
|
{/* OSS Catalog */}
|
|
<OSSCatalog />
|
|
|
|
{/* CTA Section */}
|
|
<Band rule={false} pad="$12" measure={896} ground="linear-gradient(to bottom in oklab, color-mix(in oklab, var(--neutral-900) 30%, transparent), var(--background))">
|
|
<Glow corner="top" pct={10} />
|
|
<Glow corner="bottom" pct={5} />
|
|
|
|
<Box position="relative" z="var(--z-raised)" $platform-web={{ textAlign: 'center' }}>
|
|
<Chip
|
|
render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} />}
|
|
mb={24}
|
|
px={12}
|
|
py={4}
|
|
fontSize="$1"
|
|
lineHeight="1.3333"
|
|
fontWeight="500"
|
|
borderColor="var(--border)"
|
|
bg="var(--white-10)"
|
|
color={mix('var(--foreground)', 70)}
|
|
>
|
|
<Heart width={14} height={14} />
|
|
Join the Community
|
|
</Chip>
|
|
|
|
<Title
|
|
render={<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} />}
|
|
quiet
|
|
mb={16}
|
|
>
|
|
Contribute & Earn
|
|
</Title>
|
|
|
|
<Lede
|
|
render={<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} />}
|
|
mb={40}
|
|
width="100%"
|
|
maxW={672}
|
|
mx="auto"
|
|
mt="$3.5"
|
|
>
|
|
We welcome contributions of all kinds — code, documentation, bug reports, and feature requests.
|
|
Every contribution earns a share of compute revenue through our OSS Revenue Sharing program.
|
|
</Lede>
|
|
|
|
<XStack
|
|
render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.2 }} />}
|
|
{...ROW}
|
|
>
|
|
<Action
|
|
href="https://github.com/hanzoai"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
fill
|
|
>
|
|
Start Contributing
|
|
<ArrowRight width={20} height={20} />
|
|
</Action>
|
|
<Action
|
|
href="https://discord.gg/XthHQQj"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Join Discord
|
|
<ExternalLink width={20} height={20} />
|
|
</Action>
|
|
</XStack>
|
|
</Box>
|
|
</Band>
|
|
</main>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default OpenSource;
|