mirror of
https://github.com/hanzoai/gui.git
synced 2026-11-03 00:13:54 +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]>
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import { useLoader } from 'one'
|
|
import { H2, Paragraph, Spacer, XStack } from '@hanzo/gui'
|
|
import { ContainerLarge } from '~/components/Containers'
|
|
import { Link } from '~/components/Link'
|
|
import { GuiCard } from '~/components/GuiCard'
|
|
import { authors } from '~/data/authors'
|
|
import { HeadInfo } from '~/components/HeadInfo'
|
|
|
|
export async function loader() {
|
|
const { getAllFrontmatter } = await import('~/features/mdx/getMDXBySlug')
|
|
const frontmatters = getAllFrontmatter('data/blog')
|
|
const sortedFrontmatters = frontmatters
|
|
.filter((x) => !x.draft)
|
|
.sort(
|
|
(a, b) =>
|
|
Number(new Date(b.publishedAt || '')) - Number(new Date(a.publishedAt || ''))
|
|
)
|
|
return { frontmatters: sortedFrontmatters }
|
|
}
|
|
|
|
export default function Blog() {
|
|
const { frontmatters } = useLoader(loader)
|
|
|
|
return (
|
|
<>
|
|
<HeadInfo title="Blog — Gui" description="What's up with Gui." />
|
|
<Spacer size="$7" />
|
|
<ContainerLarge mb="$7">
|
|
<H2 size="$8" color="$color9" fontFamily="$pixel">
|
|
Blog
|
|
</H2>
|
|
<Spacer size="$6" />
|
|
<XStack flexWrap="wrap" gap="$4" $md={{ flexDirection: 'column' }}>
|
|
{frontmatters.map((frontmatter) => (
|
|
<Link asChild key={frontmatter.title} href={`/blog/${frontmatter.slug}`}>
|
|
<GuiCard
|
|
title={frontmatter.title}
|
|
render="a"
|
|
width="calc(50% - var(--space-2))"
|
|
minH="max-content"
|
|
$md={{
|
|
width: '100%',
|
|
maxWidth: '100%',
|
|
flex: 'unset',
|
|
flexShrink: 0,
|
|
}}
|
|
$sm={{
|
|
width: '100%',
|
|
maxWidth: '100%',
|
|
flex: 'unset',
|
|
flexShrink: 0,
|
|
}}
|
|
subTitle={
|
|
<Paragraph opacity={0.5} cursor="inherit" color="$color10" size="$3">
|
|
{Intl.DateTimeFormat('en-US', {
|
|
month: 'short',
|
|
year: 'numeric',
|
|
day: 'numeric',
|
|
}).format(new Date(frontmatter.publishedAt || ''))}{' '}
|
|
by
|
|
{authors[frontmatter.by || '']?.name}
|
|
</Paragraph>
|
|
}
|
|
>
|
|
{frontmatter.description}
|
|
</GuiCard>
|
|
</Link>
|
|
))}
|
|
</XStack>
|
|
</ContainerLarge>
|
|
</>
|
|
)
|
|
}
|