mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
James RussoandClaude Opus 4.7
4ae5c0340f
Move all preview mp4/png/gif assets under docs/images/ out of the repo and serve them from https://static.heygen.ai/hyperframes-oss/docs/images/ (backed by s3://heygen-public/hyperframes-oss/docs/images/, CloudFront). Drops ~49MB from the working tree and, more importantly, ~49MB from every future Mintlify build checkout. Combined with the (already-LFS-tracked) producer snapshots, the remaining bloat in 'npx skills add heygen-com/ hyperframes' (see #300) is LFS smudge during clone — separate fix needed in the skills CLI to pass GIT_LFS_SKIP_SMUDGE=1. Changes: - Delete docs/images/** (103 files, ~49MB). Files are uploaded to S3 already. - Rewrite /images/* references in 44 MDX files, TemplateCard.jsx, and catalog-index.json to absolute CDN URLs. - Update README.md img src to CDN URL (renders correctly on GitHub). - Add docs/images/ to .gitignore so regenerated previews aren't committed. - Add scripts/upload-docs-images.sh to sync docs/images/ → S3 after running the preview generators. - Wire up bun run upload:docs-images and bun run generate:catalog-previews scripts in package.json. - Update generator script docstrings to point at the upload step. External contributors can still regenerate previews locally (mintlify dev reads the CDN URLs, so broken previews appear only for newly added items pending a maintainer upload). Maintainers run: bun run generate:catalog-previews --only <name> bun run upload:docs-images Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
60 lines
1.7 KiB
React
60 lines
1.7 KiB
React
export function TemplateCard({ id, title, description, href, portrait }) {
|
|
const [hovering, setHovering] = React.useState(false);
|
|
|
|
const imgSrc = `https://static.heygen.ai/hyperframes-oss/docs/images/templates/${id}.png`;
|
|
const videoSrc = `https://static.heygen.ai/hyperframes-oss/docs/images/templates/${id}.mp4`;
|
|
|
|
return (
|
|
<a
|
|
href={href}
|
|
className="not-prose group block rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden transition-shadow hover:shadow-lg no-underline"
|
|
onMouseEnter={() => setHovering(true)}
|
|
onMouseLeave={() => setHovering(false)}
|
|
>
|
|
<div
|
|
className="relative overflow-hidden bg-gray-100 dark:bg-gray-800"
|
|
style={{ aspectRatio: portrait ? "9/16" : "16/9" }}
|
|
>
|
|
<img
|
|
src={imgSrc}
|
|
alt={`${title} example`}
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
style={{
|
|
opacity: hovering ? 0 : 1,
|
|
transition: "opacity 0.2s ease",
|
|
}}
|
|
/>
|
|
{hovering && (
|
|
<video
|
|
src={videoSrc}
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="p-4">
|
|
<h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">
|
|
{title}
|
|
</h3>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1 mb-0">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
export function TemplateGrid({ children }) {
|
|
return (
|
|
<div
|
|
className="not-prose grid gap-4"
|
|
style={{ gridTemplateColumns: "repeat(2, 1fr)" }}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|