{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "github-oss-traction-band", "title": "Github Oss Traction Band", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/github-oss-traction-band/github-oss-traction-band.component.ts", "content": "// Open source community traction and velocity band with real-time star metrics,\n// recent releases changelog feed, and quickstart CLI install terminal.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n Check,\n Copy,\n GitBranch,\n GitPullRequest,\n LucideAngularModule,\n MessageSquare,\n Package,\n Star,\n Terminal,\n TrendingUp,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\n\ninterface ReleaseItem {\n version: string\n date: string\n title: string\n type: 'feature' | 'primitive' | 'block'\n}\n\nconst recentReleases: ReleaseItem[] = [\n { version: 'v2.4.0', date: 'Yesterday', title: 'Added 12 new Marketing & Conversion Workbenches', type: 'block' },\n {\n version: 'v2.3.8',\n date: '3 days ago',\n title: 'OKLCH Dynamic Theme Engine & Tailored HSL generator',\n type: 'feature',\n },\n { version: 'v2.3.5', date: 'Last week', title: 'Added SegmentedGauge & SmoothFunnel primitives', type: 'primitive' },\n {\n version: 'v2.3.0',\n date: '2 weeks ago',\n title: 'Full React 19 single-curly-brace AST parity validation',\n type: 'feature',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-github-oss-traction-band, [ui-github-oss-traction-band]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent],\n template: `\n
\n \n
\n \n
\n \n \n \n \n 100% Free & Open Source on GitHub\n \n

\n Backed by a thriving open-source community.\n

\n

\n Zero vendor lock-in. 100% unbundled source code ownership under the permissive MIT License.\n

\n
\n
\n \n \n \n \n Star on GitHub\n {{ starCount() }}\n \n
\n
\n\n
\n
\n
\n GitHub Stars\n \n
\n

14,820

\n

\n +420 this week\n

\n
\n
\n
\n Weekly Installs\n \n
\n

142,500

\n

Across Vue & React

\n
\n
\n
\n Contributors\n \n
\n

84+

\n

Design engineers

\n
\n
\n
\n Community\n \n
\n

4,200+

\n

Active builders

\n
\n
\n\n
\n
\n
\n

\n Recent Registry Releases\n

\n Continuous Shipping\n
\n
\n @for (rel of releases; track rel.version) {\n
\n
\n
\n {{ rel.version }}\n {{ rel.type }}\n
\n

{{ rel.title }}

\n
\n {{ rel.date }}\n
\n }\n
\n
\n\n \n
\n

\n Quickstart CLI\n

\n

\n Add tokens, utils, and theme scaffolding into your repository in seconds.\n

\n
\n \n \n > {{ commandText() }}\n \n \n @if (isCopied()) {\n \n } @else {\n \n }\n {{ isCopied() ? 'Copied' : 'Copy' }}\n \n
\n \n Supports Vue 3.5, Nuxt, React 19, Next.js\n ✓ Zero lock-in\n \n \n \n \n
\n `,\n})\nexport class UiGithubOssTractionBandComponent {\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly GitBranch = GitBranch\n protected readonly GitPullRequest = GitPullRequest\n protected readonly MessageSquare = MessageSquare\n protected readonly Package = Package\n protected readonly Star = Star\n protected readonly Terminal = Terminal\n protected readonly TrendingUp = TrendingUp\n\n protected readonly releases = recentReleases\n\n @Input('class') className?: string\n\n readonly starCount = signal('14.8k')\n readonly isCopied = signal(false)\n readonly commandText = signal('npx shadcn add https://uipkge.dev/r/react/init.json')\n private copyTimer: ReturnType | undefined\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)\n }\n\n async copyCommand(): Promise {\n try {\n await navigator.clipboard.writeText(this.commandText())\n } catch {\n // Clipboard unavailable in test env: still flip the label.\n }\n this.isCopied.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.isCopied.set(false), 2000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/github-oss-traction-band/github-oss-traction-band.component.ts" }, { "path": "packages/registry-angular/blocks/github-oss-traction-band/index.ts", "content": "export { UiGithubOssTractionBandComponent } from './github-oss-traction-band.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/github-oss-traction-band/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "Open source community traction and velocity band with real-time star metrics, recent releases changelog feed, and quickstart CLI install terminal.", "categories": [ "marketing" ] }