mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-30 18:12:27 +00:00
zeekayandHanzo Dev
56e004e4b2
The kit shipped ten typefaces. One is ours. Deleted: font-inter, font-silkscreen, font-cherry-bomb, font-nohemi, font-dm-sans, font-dm-serif-display, font-fira-mono, font-glusp, font-munro. Six of those had no dependent in the workspace at all. font-zen stays, and so do font-size, get-font-sized and font, which size and register rather than name a face. Published versions remain on the registry, so anything pinned to one keeps resolving. @hanzogui/config's DEFAULT entry built heading and body from Inter — v4 was already system fonts and v5 already Zen, so an app on the default got a face nobody chose. It builds from Zen now. dev-config, which drives gui.hanzo.ai, was worse: Inter for text, Berkeley Mono for code, plus Cherry Bomb and Silkscreen. Every size, weight, letter-spacing and transform value is unchanged — only the faces moved. The pixel ROLE was worth keeping and only its face was borrowed, so font-zen gained Zen Pixel Square (createZenPixelFont, --font-zen-pixel-*) and the token is `$pixel`. `$silkscreen` and `$cherryBomb` are gone across ~35 call sites. Cherry Bomb had no role of its own and no Zen counterpart, so it is deleted rather than substituted. gui.hanzo.ai now self-hosts three Zen files in place of four foreign ones — one variable file per family instead of a weight per request — and its OG-image route renders cards in the same faces as the pages they link to. The Inter, Berkeley, Silkscreen and glusp binaries are gone from public/fonts, including an otf directory of 20 Inter cuts. Native is honestly short: @hanzo/font ships woff2 and react-native wants otf/ttf, so the expo starter and kitchen-sink's native entry load no custom face and say why, rather than keeping Inter because it happened to be there. bun install 0 · build 161/161 · typecheck passed. Co-authored-by: Hanzo Dev <[email protected]>
91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
import { useTint } from '@hanzogui/logo'
|
|
import { useRef, useState } from 'react'
|
|
import { Button, Paragraph, XStack, YStack } from '@hanzo/gui'
|
|
import { Link } from '~/components/Link'
|
|
|
|
import { ContainerLarge } from '~/components/Containers'
|
|
import { BenchmarkChartWeb } from '~/features/site/benchmarks/BenchmarkChartWeb'
|
|
import { useOnIntersecting } from '~/hooks/useOnIntersecting'
|
|
import { HomeH2, HomeH3 } from './HomeHeaders'
|
|
|
|
export function HomePerformance() {
|
|
const ref = useRef<HTMLElement>(null)
|
|
const [show, setShow] = useState(false)
|
|
|
|
useOnIntersecting(ref, ([entry]) => {
|
|
if (entry?.isIntersecting) {
|
|
setTimeout(() => {
|
|
setShow(true)
|
|
}, 800)
|
|
}
|
|
})
|
|
|
|
return (
|
|
<ContainerLarge position="relative">
|
|
<YStack items="center" z={1} gap="$4">
|
|
<YStack items="center" gap="$2">
|
|
<HomeH2 size="$10" maxW={500} ref={ref as any}>
|
|
Automatically fast
|
|
</HomeH2>
|
|
<HomeH3>
|
|
Partial evaluation, tree flattening, hoisting and
|
|
dead-code elimination ✅
|
|
</HomeH3>
|
|
</YStack>
|
|
|
|
<YStack
|
|
position="relative"
|
|
px="$2"
|
|
$sm={{ px: '$0', mx: -20, width: 'calc(100% + 40px)' }}
|
|
height={131}
|
|
rounded="$8"
|
|
width="100%"
|
|
items="stretch"
|
|
justify="center"
|
|
>
|
|
<Paragraph
|
|
position="absolute"
|
|
b={-20}
|
|
r={20}
|
|
mt={-20}
|
|
color="$color9"
|
|
size="$2"
|
|
$sm={{ display: 'none' }}
|
|
>
|
|
Lower is better.
|
|
</Paragraph>
|
|
|
|
{show && <BenchmarkChartWeb />}
|
|
</YStack>
|
|
|
|
<XStack gap="$4" flexWrap="wrap">
|
|
<BenchmarksLink />
|
|
<CompilerLink />
|
|
</XStack>
|
|
</YStack>
|
|
</ContainerLarge>
|
|
)
|
|
}
|
|
|
|
const BenchmarksLink = () => {
|
|
const { tint } = useTint()
|
|
return (
|
|
<Link href="/docs/intro/benchmarks">
|
|
<Button aria-label="Performance benchmarks" theme={tint as any}>
|
|
<Button.Text fontFamily="$pixel">Benchmarks »</Button.Text>
|
|
</Button>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
const CompilerLink = () => {
|
|
const { tint } = useTint()
|
|
return (
|
|
<Link href="/docs/intro/why-a-compiler">
|
|
<Button aria-label="Compiler" theme={tint as any}>
|
|
<Button.Text fontFamily="$pixel">About »</Button.Text>
|
|
</Button>
|
|
</Link>
|
|
)
|
|
}
|