{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "newsletter-issue-archive", "title": "Newsletter Issue Archive", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/newsletter-issue-archive/NewsletterIssueArchive.tsx", "content": "'use client'\n\nimport { useMemo, useState, type FormEvent } from 'react'\nimport {\n ArrowRight,\n Bookmark,\n Calendar,\n Check,\n Clock,\n Heart,\n MessageSquare,\n Newspaper,\n Rss,\n Search,\n Users,\n X,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\n\nexport interface NewsletterIssue {\n id: string\n issueNumber: number\n volumeDate: string\n title: string\n excerpt: string\n category: 'Architecture' | 'Design Tokens' | 'Performance' | 'Interviews'\n tags: string[]\n readTime: string\n date: string\n commentsCount: number\n likesCount: number\n featured?: boolean\n}\n\nexport interface NewsletterIssueArchiveProps {\n publicationName?: string\n subtitle?: string\n subscriberCount?: string\n className?: string\n}\n\nconst categories = ['All Issues', 'Architecture', 'Design Tokens', 'Performance', 'Interviews'] as const\n\nconst featuredIssue: NewsletterIssue = {\n id: 'issue-43',\n issueNumber: 43,\n volumeDate: 'Aug 2026',\n title: 'The Death of npm Component Libraries: Why Copy-Paste Architecture Won',\n excerpt:\n 'How unbundled UI registries replaced monolithic node_modules packages, eliminated dependency hell, and gave full code ownership back to frontend engineering teams across the industry.',\n category: 'Architecture',\n tags: ['#architecture', '#registries', '#future-of-web', '#tooling'],\n readTime: '9 min read',\n date: 'Aug 25, 2026',\n commentsCount: 128,\n likesCount: 1420,\n featured: true,\n}\n\nconst archiveIssues: NewsletterIssue[] = [\n {\n id: 'issue-42',\n issueNumber: 42,\n volumeDate: 'Aug 2026',\n title: 'Why Zero-Dependency Registries Are Winning',\n excerpt:\n 'A deep dive into why enterprise engineering teams are abandoning monolithic UI packages in favor of composable own-your-code registry models that eliminate breaking upgrade cascades.',\n category: 'Architecture',\n tags: ['#architecture', '#web-performance', '#dx'],\n readTime: '6 min read',\n date: 'Aug 18, 2026',\n commentsCount: 84,\n likesCount: 642,\n },\n {\n id: 'issue-41',\n issueNumber: 41,\n volumeDate: 'Aug 2026',\n title: 'Mastering Tailwind v4: OKLCH Colors & Dynamic Themes',\n excerpt:\n 'How modern CSS color spaces and inline theme definitions unlock mathematically perceptually uniform light/dark transitions without CSS variables explosion.',\n category: 'Design Tokens',\n tags: ['#design-tokens', '#css', '#theming'],\n readTime: '8 min read',\n date: 'Aug 11, 2026',\n commentsCount: 56,\n likesCount: 519,\n },\n {\n id: 'issue-40',\n issueNumber: 40,\n volumeDate: 'Aug 2026',\n title: 'Zero-CLS Island Hydration in Modern Web Frameworks',\n excerpt:\n 'Eliminating Cumulative Layout Shift when server-rendered islands hydrate in Astro and Nuxt. Practical patterns distilled from serving 1M+ monthly pageviews.',\n category: 'Performance',\n tags: ['#performance', '#core-web-vitals', '#astro'],\n readTime: '5 min read',\n date: 'Aug 04, 2026',\n commentsCount: 92,\n likesCount: 730,\n },\n {\n id: 'issue-39',\n issueNumber: 39,\n volumeDate: 'Jul 2026',\n title: 'Interview: Building High-Craft Interfaces with Paco Coursey',\n excerpt:\n 'The creator of cmdk and sonner breaks down spring physics, popover placement math, and why 60fps micro-interactions define software brand trust.',\n category: 'Interviews',\n tags: ['#interviews', '#craft', '#animation'],\n readTime: '11 min read',\n date: 'Jul 28, 2026',\n commentsCount: 147,\n likesCount: 1205,\n },\n {\n id: 'issue-38',\n issueNumber: 38,\n volumeDate: 'Jul 2026',\n title: 'Building Resilient Component APIs with Polymorphic Slots',\n excerpt:\n 'Why the asChild composition pattern beat standard prop drilling for accessible primitives, and how Reka UI implements headless polymorphism without DOM overhead.',\n category: 'Architecture',\n tags: ['#architecture', '#vue', '#reka-ui'],\n readTime: '7 min read',\n date: 'Jul 21, 2026',\n commentsCount: 63,\n likesCount: 488,\n },\n {\n id: 'issue-37',\n issueNumber: 37,\n volumeDate: 'Jul 2026',\n title: 'Designing for Multi-Tenant White-Labeling at Scale',\n excerpt:\n 'Architecting a headless token graph that dynamically maps corporate brand identities and custom color palettes across 500+ enterprise subdomains in real time.',\n category: 'Design Tokens',\n tags: ['#design-tokens', '#architecture', '#enterprise'],\n readTime: '9 min read',\n date: 'Jul 14, 2026',\n commentsCount: 71,\n likesCount: 610,\n },\n]\n\nexport function NewsletterIssueArchive({\n publicationName = 'The Unbundled Engineer',\n subtitle = 'Weekly architectural teardowns of modern design systems, web performance, and component registries.',\n subscriberCount = '42,500+ Subscribers · Top 1% on Substack',\n className,\n}: NewsletterIssueArchiveProps) {\n const [email, setEmail] = useState('')\n const [isSubscribed, setIsSubscribed] = useState(false)\n const [searchQuery, setSearchQuery] = useState('')\n const [selectedCategory, setSelectedCategory] = useState('All Issues')\n\n function handleSubscribe(e: FormEvent) {\n e.preventDefault()\n if (!email || !email.includes('@')) return\n setIsSubscribed(true)\n }\n\n const filteredIssues = useMemo(() => {\n const query = searchQuery.trim().toLowerCase()\n return archiveIssues.filter((issue) => {\n const matchesCategory = selectedCategory === 'All Issues' || issue.category === selectedCategory\n\n const matchesSearch =\n !query ||\n issue.title.toLowerCase().includes(query) ||\n issue.excerpt.toLowerCase().includes(query) ||\n issue.tags.some((tag) => tag.toLowerCase().includes(query)) ||\n `issue #${issue.issueNumber}`.toLowerCase().includes(query)\n\n return matchesCategory && matchesSearch\n })\n }, [searchQuery, selectedCategory])\n\n function getCategoryCount(cat: string) {\n if (cat === 'All Issues') return archiveIssues.length\n return archiveIssues.filter((issue) => issue.category === cat).length\n }\n\n function clearFilters() {\n setSearchQuery('')\n setSelectedCategory('All Issues')\n }\n\n return (\n \n {/* Newsletter Header Hero */}\n
\n
\n \n {subscriberCount}\n
\n\n

{publicationName}

\n\n

{subtitle}

\n\n {/* Subscribe Form */}\n
\n {!isSubscribed ? (\n
\n
\n setEmail(e.target.value)}\n type=\"email\"\n placeholder=\"Enter your work email...\"\n required\n className=\"bg-card h-11 text-sm shadow-xs sm:rounded-r-none\"\n aria-label=\"Work email address\"\n />\n \n \n

\n Free weekly issues\n Zero spam\n 1-click unsubscribe\n

\n
\n ) : (\n
\n \n You’re subscribed! Check your inbox for confirmation.\n
\n )}\n
\n
\n\n {/* Featured Issue Spotlight Card */}\n
\n
\n \n Pinned Spotlight Edition\n \n \n Latest Release\n \n
\n\n \n
\n {/* Text Content */}\n
\n
\n
\n \n Issue #{featuredIssue.issueNumber} · {featuredIssue.volumeDate}\n \n \n {featuredIssue.category}\n \n \n \n {featuredIssue.readTime}\n \n
\n\n

\n {featuredIssue.title}\n

\n\n

{featuredIssue.excerpt}

\n
\n\n
\n
\n {featuredIssue.tags.map((tag) => (\n \n {tag}\n \n ))}\n
\n\n
\n
\n \n \n {featuredIssue.date}\n \n \n \n {featuredIssue.commentsCount} comments\n \n \n \n {featuredIssue.likesCount}\n \n
\n\n \n
\n
\n
\n\n {/* Schematic Cover Illustration */}\n
\n
\n
\n
\n \n \n \n
\n registry-teardown.ts\n
\n
\n
// Own your component code
\n
\n $ npx shadcn@latest add @uipkge/card\n
\n
✔ Fetched raw TypeScript TSX
\n
✔ Merged local Tailwind v4 tokens
\n
// Zero runtime package lock-in
\n
\n
\n \n Zero npm deps\n \n \n Tailwind v4\n \n \n OKLCH\n \n
\n
\n
\n
\n \n
\n\n {/* Search and Filter Bar */}\n
\n
\n {/* Search Input */}\n
\n setSearchQuery(e.target.value)}\n type=\"search\"\n placeholder=\"Search issues by title, topic, or tag...\"\n prefixIcon={}\n allowClear\n className=\"bg-card shadow-xs\"\n aria-label=\"Search archive issues\"\n />\n
\n\n {/* Result Counter */}\n
\n \n Showing {filteredIssues.length} {filteredIssues.length === 1 ? 'edition' : 'editions'}\n \n {(searchQuery || selectedCategory !== 'All Issues') && (\n \n Reset filters\n \n \n )}\n
\n
\n\n {/* Category Filter Pills */}\n
\n {categories.map((cat) => {\n const isSelected = selectedCategory === cat\n return (\n setSelectedCategory(cat)}\n >\n {cat}\n \n {getCategoryCount(cat)}\n \n \n )\n })}\n
\n
\n\n {/* Issue Archive List */}\n
\n {filteredIssues.length > 0 ? (\n
\n {filteredIssues.map((issue) => (\n \n \n
\n \n Issue #{issue.issueNumber} · {issue.volumeDate}\n \n \n \n {issue.readTime}\n \n
\n\n \n {issue.title}\n \n\n \n {issue.excerpt}\n \n \n\n \n
\n {issue.tags.map((tag) => (\n \n {tag}\n \n ))}\n
\n \n\n \n
\n \n \n {issue.date}\n \n \n \n {issue.commentsCount}\n \n \n \n {issue.likesCount}\n \n
\n\n \n Read Issue\n \n \n \n \n ))}\n
\n ) : (\n /* Empty State */\n
\n \n

No issues found

\n

\n No newsletter issues matched “{searchQuery}” in {selectedCategory}.\n

\n
\n \n
\n
\n )}\n
\n\n {/* Publication Cadence & RSS Bar */}\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/NewsletterIssueArchive.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json" ], "description": "Substack and Beehiiv style publication archive with issue numbers, read times, subscriber counts, category filtering, search, featured issue spotlight, and subscribe flow.", "categories": [ "media", "marketing", "app" ], "deprecated": true, "replacedBy": "newsletter" }