{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "blog-post-card-grid", "title": "Blog Post Card Grid", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/blog-post-card-grid/blog-post-card-grid.component.ts", "content": "// Modern editorial magazine 3-column article card grid with featured hero story, reading\n// time pills, category filter pills, author avatars, and a newsletter subscription box.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowRight, BookOpen, Check, Clock, Loader2, LucideAngularModule, Mail, Star } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarFallbackComponent, UiAvatarImageComponent, UiAvatarComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface Author {\n name: string\n role: string\n avatar: string\n initials: string\n}\n\nexport interface BlogPost {\n id: string\n title: string\n excerpt: string\n category: 'Architecture' | 'Design Systems' | 'Performance' | 'Tutorials'\n readTime: string\n date: string\n image: string\n author: Author\n}\n\nconst categories = ['All', 'Architecture', 'Design Systems', 'Performance', 'Tutorials'] as const\nexport type BlogCategory = (typeof categories)[number]\n\nconst featuredPost: BlogPost = {\n id: 'featured-1',\n title: 'Deconstructing Event-Driven Micro-Frontends at Scale',\n excerpt:\n 'How we transitioned a monolithic dashboard into decoupled, independently deployable island architectures using web components, resilient event buses, and broadcast channels.',\n category: 'Architecture',\n readTime: '8 min read',\n date: 'Aug 18, 2026',\n image: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1200&auto=format&fit=crop&q=80',\n author: {\n name: 'Elena Rostova',\n role: 'Principal Systems Architect',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80',\n initials: 'ER',\n },\n}\n\nconst initialPosts: BlogPost[] = [\n {\n id: 'post-1',\n title: 'Architecting Token Hierarchies in Tailwind CSS v4',\n excerpt:\n 'A comprehensive guide to structured OKLCH color palettes, dynamic light and dark elevation layers, and type scale ergonomics.',\n category: 'Design Systems',\n readTime: '5 min read',\n date: 'Aug 16, 2026',\n image: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&auto=format&fit=crop&q=80',\n author: {\n name: 'Marcus Chen',\n role: 'Design Technologist',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80',\n initials: 'MC',\n },\n },\n {\n id: 'post-2',\n title: 'Eliminating Layout Shift in Hydrated Islands',\n excerpt:\n 'Techniques for zero-CLS component streaming, skeleton synchronization, and sub-100ms Interaction to Next Paint (INP).',\n category: 'Performance',\n readTime: '6 min read',\n date: 'Aug 14, 2026',\n image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&auto=format&fit=crop&q=80',\n author: {\n name: 'Sarah Jenkins',\n role: 'Performance Engineer',\n avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&auto=format&fit=crop&q=80',\n initials: 'SJ',\n },\n },\n {\n id: 'post-3',\n title: 'Deterministic State Synchronization Over WebSockets',\n excerpt:\n 'Building conflict-free collaborative data models with operational transformation and CRDTs for multi-tenant SaaS.',\n category: 'Architecture',\n readTime: '7 min read',\n date: 'Aug 11, 2026',\n image: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&auto=format&fit=crop&q=80',\n author: {\n name: 'Devon Vance',\n role: 'Distributed Systems Lead',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&auto=format&fit=crop&q=80',\n initials: 'DV',\n },\n },\n {\n id: 'post-4',\n title: 'Building Headless Accessible Dropdowns with Reka UI',\n excerpt:\n 'Step-by-step implementation of focus trap management, keyboard navigation patterns, and polymorphic slot composition.',\n category: 'Tutorials',\n readTime: '4 min read',\n date: 'Aug 08, 2026',\n image: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&auto=format&fit=crop&q=80',\n author: {\n name: 'Aaliyah Patel',\n role: 'Frontend Engineer',\n avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150&auto=format&fit=crop&q=80',\n initials: 'AP',\n },\n },\n {\n id: 'post-5',\n title: 'Fluid Typography and Motion Curves in Modern Web Apps',\n excerpt:\n 'Using CSS clamp functions and spring physics to create tactile, responsive interfaces that adapt directly across devices.',\n category: 'Design Systems',\n readTime: '5 min read',\n date: 'Aug 04, 2026',\n image: 'https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?w=800&auto=format&fit=crop&q=80',\n author: {\n name: 'Lucas Meyer',\n role: 'UI Engineer',\n avatar: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=150&auto=format&fit=crop&q=80',\n initials: 'LM',\n },\n },\n {\n id: 'post-6',\n title: 'Continuous Benchmarking with Playwright and GitHub Actions',\n excerpt:\n 'Automate regression detection for memory leaks, bundle sizes, and render latency directly within your CI pull request checks.',\n category: 'Tutorials',\n readTime: '6 min read',\n date: 'Jul 30, 2026',\n image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&auto=format&fit=crop&q=80',\n author: {\n name: 'Elena Rostova',\n role: 'Principal Systems Architect',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80',\n initials: 'ER',\n },\n },\n]\n\nconst additionalPosts: BlogPost[] = [\n {\n id: 'post-7',\n title: 'Optimizing JavaScript Garbage Collection in High-Frequency Canvas',\n excerpt:\n 'How object pooling and typed array buffers solved stuttering frame rates during real-time telemetry rendering.',\n category: 'Performance',\n readTime: '9 min read',\n date: 'Jul 26, 2026',\n image: 'https://images.unsplash.com/photo-1504639725590-34d0984388bd?w=800&auto=format&fit=crop&q=80',\n author: {\n name: 'Marcus Chen',\n role: 'Design Technologist',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80',\n initials: 'MC',\n },\n },\n {\n id: 'post-8',\n title: 'Resilient Edge Caching Strategies for Dynamic Multi-Region APIs',\n excerpt:\n 'Configuring stale-while-revalidate headers, cache tagging, and instant surrogate key purging across worldwide POPs.',\n category: 'Architecture',\n readTime: '7 min read',\n date: 'Jul 22, 2026',\n image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=800&auto=format&fit=crop&q=80',\n author: {\n name: 'Devon Vance',\n role: 'Distributed Systems Lead',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&auto=format&fit=crop&q=80',\n initials: 'DV',\n },\n },\n {\n id: 'post-9',\n title: 'Designing High-Contrast Dark Modes without Washing Out Brand Identity',\n excerpt:\n 'Tuning APCA perceptual contrast ratios, luminance curves, and colored alpha borders in enterprise dark themes.',\n category: 'Design Systems',\n readTime: '5 min read',\n date: 'Jul 18, 2026',\n image: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=800&auto=format&fit=crop&q=80',\n author: {\n name: 'Aaliyah Patel',\n role: 'Frontend Engineer',\n avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150&auto=format&fit=crop&q=80',\n initials: 'AP',\n },\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-blog-post-card-grid, [ui-blog-post-card-grid]',\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: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiInputComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n \n
\n
\n \n \n From the Blog\n \n

\n Latest Articles & Engineering Deep Dives\n

\n

\n Technical essays on software architecture, design systems, and frontend performance.\n

\n
\n\n \n
\n @for (cat of categories; track cat) {\n \n {{ cat }}\n \n }\n
\n
\n\n \n @if (isHeroVisible()) {\n \n
\n \n \n
\n \n \n Featured Story\n \n \n {{ featured.category }}\n \n
\n
\n\n
\n
\n
\n \n Editorial Dispatch\n •\n \n \n {{ featured.readTime }}\n \n
\n\n \n \n {{ featured.title }}\n \n \n\n

\n {{ featured.excerpt }}\n

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

{{ featured.author.name }}

\n

\n {{ featured.date }} · {{ featured.author.role }}\n

\n
\n
\n\n \n
\n
\n
\n
\n \n }\n\n \n @if (visiblePosts().length > 0) {\n
\n @for (post of visiblePosts(); track post.id) {\n \n
\n \n
\n \n {{ post.category }}\n \n
\n
\n\n
\n
\n \n \n {{ post.title }}\n \n \n

\n {{ post.excerpt }}\n

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

{{ post.author.name }}

\n

{{ post.date }}

\n
\n
\n\n \n \n {{ post.readTime }}\n
\n
\n
\n
\n \n }\n \n } @else {\n \n
\n
\n \n
\n

No articles found

\n

\n There are no articles published yet under “{{ activeCategory() }}”.\n

\n \n
\n }\n\n \n @if (!showAllPosts() && visiblePosts().length > 0) {\n
\n \n @if (isLoadingMore()) {\n \n }\n {{ isLoadingMore() ? 'Loading articles...' : 'Load More Stories' }}\n \n
\n }\n\n \n
\n \n
\n \n \n
\n

Subscribe to our editorial dispatch

\n

\n Get weekly teardowns on frontend architecture, component design systems, and web performance delivered\n straight to your inbox.\n

\n
\n\n
\n @if (!isSubscribed()) {\n
\n \n \n \n

\n No spam. Sent bi-weekly. Unsubscribe with one click.\n

\n } @else {\n \n \n You're subscribed! Check your inbox for the welcome issue.\n
\n }\n \n \n \n \n
\n `,\n})\nexport class UiBlogPostCardGridComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly BookOpen = BookOpen\n protected readonly Check = Check\n protected readonly Clock = Clock\n protected readonly Loader2 = Loader2\n protected readonly Mail = Mail\n protected readonly Star = Star\n\n protected readonly categories = categories\n protected readonly featured = featuredPost\n\n @Input() showFeatured = true\n @Input('class') className?: string\n\n readonly activeCategory = signal('All')\n readonly isLoadingMore = signal(false)\n readonly showAllPosts = signal(false)\n readonly emailInput = signal('')\n readonly isSubscribed = signal(false)\n private loadTimer: ReturnType | undefined\n\n readonly visiblePosts = computed(() => {\n const pool = this.showAllPosts() ? [...initialPosts, ...additionalPosts] : initialPosts\n if (this.activeCategory() === 'All') return pool\n return pool.filter((p) => p.category === this.activeCategory())\n })\n\n readonly isHeroVisible = computed(() => {\n if (!this.showFeatured) return false\n return this.activeCategory() === 'All' || featuredPost.category === this.activeCategory()\n })\n\n get rootClass(): string {\n return cn('bg-background w-full py-12 sm:py-16 lg:py-20', this.className)\n }\n\n handleCategorySelect(cat: BlogCategory): void {\n this.activeCategory.set(cat)\n }\n\n handleLoadMore(): void {\n this.isLoadingMore.set(true)\n clearTimeout(this.loadTimer)\n this.loadTimer = setTimeout(() => {\n this.showAllPosts.set(true)\n this.isLoadingMore.set(false)\n }, 400)\n }\n\n handleSubscribe(event: Event): void {\n event.preventDefault()\n if (!this.emailInput().includes('@')) return\n this.isSubscribed.set(true)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/blog-post-card-grid/blog-post-card-grid.component.ts" }, { "path": "packages/registry-angular/blocks/blog-post-card-grid/index.ts", "content": "export {\n UiBlogPostCardGridComponent,\n type Author,\n type BlogCategory,\n type BlogPost,\n} from './blog-post-card-grid.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/blog-post-card-grid/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Modern editorial magazine 3-column article card grid with featured hero story, reading time pills, category filter badges, author avatars, and newsletter subscription box.", "categories": [ "media", "marketing", "content" ] }