Files
hanzo.ai/components/oss/RepoCard.tsx
zeekay 24e67d965e landing: what we ship is counted, and drawn from the page's own parts
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
2026-10-26 09:57:01 -07:00

61 lines
2.4 KiB
TypeScript

'use client'
import { Text, XStack } from '@hanzo/ui'
import { Repo } from '@hanzo/ui/marketing'
import { useI18n } from '@hanzo/i18n/react'
import DualStarButton from './DualStarButton'
export interface RepoCardProps {
repo: string
line: string
language: string
}
export function GithubMark({ size = 14, color = 'currentColor' }: { size?: number; color?: string }) {
return (
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
</svg>
)
}
export function ForgeMark({ size = 14, color = 'currentColor' }: { size?: number; color?: string }) {
return (
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<circle cx="12" cy="18" r="3" />
<circle cx="6" cy="6" r="3" />
<circle cx="18" cy="6" r="3" />
<path d="M18 9v2a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9" />
<path d="M12 12v3" />
</svg>
)
}
/**
* A featured repository: @hanzo/ui's `Repo` card with the star button and the
* forge link at its foot. The card is a link to GitHub; the star count is the
* button's, and it is what GitHub holds.
*/
export default function RepoCard({ repo, line, language }: RepoCardProps) {
const { t } = useI18n()
const [owner, name] = repo.split('/')
return (
<Repo
name={repo}
description={t(line)}
href={`https://github.com/${repo}`}
target="_blank"
rel="noopener noreferrer"
language={language}
actions={
<XStack items="center" gap={10}>
<DualStarButton owner={owner} repo={name} size="sm" />
<Text render={<a href={`https://forge.hanzo.ai/${repo}`} target="_blank" rel="noopener noreferrer" title={t('View on Hanzo Forge')} />} fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)" hoverStyle={{ color: 'var(--foreground)' }} $platform-web={{ textDecoration: 'none' }}>
{t('Forge')}
</Text>
</XStack>
}
/>
)
}