Yanib SDK Demo

One script tag. Four embeddable components. Works in any HTML page.
All examples below use slug="demo" to render with sample data — no API calls needed.

<script src="https://yanib.dev/sdk.js"></script>

---

1. Changelog Component

Full changelog feed for a repo. Use <yanib-changelog>

<yanib-changelog slug="your-repo-slug" theme="light" limit="3"></yanib-changelog>

---

2. Announcement Bar

Dismissible bar showing the latest release. Use <yanib-banner>

<yanib-banner slug="your-repo-slug" dismissible="true"></yanib-banner>

Check the top of this page — the banner is there if you haven't dismissed it.

---

3. Notification Bell

Floating button that opens a release popup. Use <yanib-notifications>

<yanib-notifications slug="your-repo-slug" position="bottom-right"></yanib-notifications>

Click the bell button in the bottom-right corner.

---

4. Personal Feed

Show a developer's releases across all repos. Use <yanib-feed>

<yanib-feed user="your-username" theme="light" limit="3"></yanib-feed>

---

5. Stats Widget

Show shipping metrics with a sparkline and change breakdown. Use <yanib-stats>

<yanib-stats user="your-username" theme="light" period="all"></yanib-stats>

---

6. Portfolio Widget

Rich shipping portfolio with stats, top repos, and recent releases. Use <yanib-portfolio>

<yanib-portfolio user="your-username" theme="light" limit="3"></yanib-portfolio>

---

7. Filtered Feed with Stats

Feed with stats header and filters. Use attributes like repos, type, show-stats

<yanib-feed user="your-username" show-stats="true" limit="3"></yanib-feed>

---

8. Dark Theme

All components support theme="dark"

---

Quick Start

Add the SDK script to your page, then drop in any component:

<script src="https://yanib.dev/sdk.js"></script>

<!-- Full changelog (per-repo) -->
<yanib-changelog slug="my-repo" theme="light" limit="5"></yanib-changelog>

<!-- Announcement banner -->
<yanib-banner slug="my-repo" dismissible="true"></yanib-banner>

<!-- Notification bell -->
<yanib-notifications slug="my-repo" position="bottom-right"></yanib-notifications>

<!-- Developer feed (cross-repo, filterable) -->
<yanib-feed user="username" show-stats="true" limit="5"></yanib-feed>

<!-- Shipping stats card -->
<yanib-stats user="username" theme="light"></yanib-stats>

<!-- Full portfolio -->
<yanib-portfolio user="username" theme="light" limit="5"></yanib-portfolio>