Component · Data · v1.6.0

Repo Widget

A small canonical card showing meaningful state for a Marbl-owned GitHub repository. Two independent axes: visual (--filled solid card or --transparent for sidebars) + action layout (default inline, or --stack-actions to stack vertically full-width). Both demos below use --transparent backgrounds; only the second adds --stack-actions for the sidebar use-case. On mobile (≤768px) both layouts collapse to inline 50/50 equal-width.

Implementation

Drop-in pattern

The partial at ./repo-widget.html uses double-brace placeholders consumed at build time. Each consuming site fetches GitHub API once per build, formats the values, and substitutes. Full placeholder list and a build-time fetch reference snippet live in ./repo-widget.md.

HTML

./repo-widget.html (partial with placeholders)

CSS

./repo-widget.css (filled + transparent variants only - buttons come from canonical)

Buttons

ui-items/button.css required: .btn .btn--fill-up.btn--mini (primary) + .btn .btn--outline.btn--mini (secondary)

Spec

./repo-widget.md (placeholders, fetch pattern, microdata, accessibility, tracking)

Schema

SoftwareSourceCode + InteractionCounter via microdata (no inline script, CSP-clean)

Tracking

Every link carries data-fathom-event for the canonical Fathom delegator pattern

Star CTA

Stars stat links to repo root (where the GitHub Star button lives) so logged-in users can star with one extra click