feat: add tkdodo past query and router articles to blog feed

src/components/BlogCard.tsx

@@ -1,40 +1,40 @@
 import { Link } from '@tanstack/react-router'
+import { ArrowSquareOutIcon } from '@phosphor-icons/react'
 import { Card } from '~/components/Card'
 import { CoverFallback } from '~/components/CoverFallback'
 import {
   formatAuthors,
   formatPublishedDate,
   getBlogLibraries,
+  type BlogCardPost,
 } from '~/utils/blog-format'
 import { getOptimizedImageUrl } from '~/utils/optimizedImage'
 
-export type BlogCardPost = {
-  slug: string
-  title: string
-  published: string
-  excerpt: string
-  headerImage: string | undefined
-  authors: string[]
-  library: string | undefined
-}
+export type { BlogCardPost } from '~/utils/blog-format'
 
 type BlogCardProps = {
   post: BlogCardPost
   showLibraryBadges?: boolean
 }
 
 export function BlogCard({ post, showLibraryBadges = true }: BlogCardProps) {
-  const { slug, title, published, excerpt, headerImage, authors, library } =
-    post
+  const {
+    slug,
+    title,
+    published,
+    excerpt,
+    headerImage,
+    authors,
+    library,
+    externalUrl,
+    source,
+  } = post
   const blogLibraries = showLibraryBadges ? getBlogLibraries(library) : []
+  const cardClassName =
+    'relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-sm hover:border-blue-500'
 
-  return (
-    <Card
-      as={Link}
-      to="/blog/$"
-      params={{ _splat: slug } as never}
-      className="relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-sm hover:border-blue-500"
-    >
+  const content = (
+    <>
       {blogLibraries.length ? (
         <div className="absolute right-3 top-3 z-10 flex flex-wrap justify-end gap-1">
           {blogLibraries.map((blogLibrary) => (
@@ -88,11 +88,43 @@ export function BlogCard({ post, showLibraryBadges = true }: BlogCardProps) {
           ) : null}
         </div>
         <div>
-          <div className="text-blue-500 uppercase font-black text-sm">
-            Read More
-          </div>
+          {externalUrl ? (
+            <div className="inline-flex items-center gap-1 text-blue-500 uppercase font-black text-sm">
+              Read on {source ?? 'Source'}
+              <ArrowSquareOutIcon className="h-3.5 w-3.5" aria-hidden="true" />
+            </div>
+          ) : (
+            <div className="text-blue-500 uppercase font-black text-sm">
+              Read More
+            </div>
+          )}
         </div>
       </div>
+    </>
+  )
+
+  if (externalUrl) {
+    return (
+      <Card
+        as="a"
+        href={externalUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cardClassName}
+      >
+        {content}
+      </Card>
+    )
+  }
+
+  return (
+    <Card
+      as={Link}
+      to="/blog/$"
+      params={{ _splat: slug } as never}
+      className={cardClassName}
+    >
+      {content}
     </Card>
   )
 }

src/components/BlogSearchFilter.tsx

@@ -0,0 +1,37 @@
+import { MagnifyingGlassIcon } from '@phosphor-icons/react'
+import { twMerge } from 'tailwind-merge'
+
+type BlogSearchFilterProps = {
+  id: string
+  value: string
+  onChange: (value: string) => void
+  className?: string
+}
+
+export function BlogSearchFilter({
+  id,
+  value,
+  onChange,
+  className,
+}: BlogSearchFilterProps) {
+  return (
+    <div className={twMerge('relative w-full', className)}>
+      <MagnifyingGlassIcon
+        className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500 dark:text-gray-400"
+        aria-hidden="true"
+      />
+      <input
+        id={id}
+        type="search"
+        value={value}
+        onChange={(event) => onChange(event.currentTarget.value)}
+        placeholder="Search posts..."
+        className={twMerge(
+          'w-full rounded-md border border-gray-500/20 bg-transparent py-1.5 pl-8 pr-2 text-sm transition-colors',
+          'placeholder:text-gray-500 dark:placeholder:text-gray-400',
+          'focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+        )}
+      />
+    </div>
+  )
+}

src/components/RecentPostsWidget.tsx

@@ -21,22 +21,45 @@ function RecentPostsList({ posts }: { posts: ReadonlyArray<RecentPost> }) {
         </Link>
       </div>
       <div className="flex flex-col divide-y divide-gray-500/10">
-        {posts.map((post) => (
-          <Link
-            key={post.slug}
-            to="/blog/$"
-            params={{ _splat: post.slug } as never}
-            className="flex flex-col gap-0.5 px-3 py-2.5
-              hover:bg-gray-500/5 transition-colors duration-150"
-          >
-            <span className="text-xs font-medium leading-snug line-clamp-2">
-              {post.title}
-            </span>
-            <span className="text-[10px] text-gray-500 dark:text-gray-500">
-              {formatPublishedDate(post.published)}
-            </span>
-          </Link>
-        ))}
+        {posts.map((post) => {
+          const content = (
+            <>
+              <span className="text-xs font-medium leading-snug line-clamp-2">
+                {post.title}
+              </span>
+              <span className="text-[10px] text-gray-500 dark:text-gray-500">
+                {formatPublishedDate(post.published)}
+              </span>
+            </>
+          )
+          const className = `flex flex-col gap-0.5 px-3 py-2.5
+              hover:bg-gray-500/5 transition-colors duration-150`
+
+          if (post.externalUrl) {
+            return (
+              <a
+                key={post.slug}
+                href={post.externalUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={className}
+              >
+                {content}
+              </a>
+            )
+          }
+
+          return (
+            <Link
+              key={post.slug}
+              to="/blog/$"
+              params={{ _splat: post.slug } as never}
+              className={className}
+            >
+              {content}
+            </Link>
+          )
+        })}
       </div>
     </div>
   )

src/components/ds/ui/BlogPostCard.tsx

@@ -14,18 +14,12 @@ export function BlogPostCard({
   onNavigate?: () => void
   post: RecentPost
 }) {
-  return (
-    <Link
-      to="/blog/$"
-      params={{ _splat: post.slug } as never}
-      onClick={onNavigate}
-      preload="intent"
-      activeProps={{ className: 'bg-surface-state-pressed' }}
-      className={twMerge(
-        'group/post flex flex-col gap-3 rounded-xl corner-squircle p-3 transition-colors hover:bg-surface-state-hover focus-visible:bg-surface-state-hover focus-visible:outline-none',
-        className,
-      )}
-    >
+  const cardClassName = twMerge(
+    'group/post flex flex-col gap-3 rounded-xl corner-squircle p-3 transition-colors hover:bg-surface-state-hover focus-visible:bg-surface-state-hover focus-visible:outline-none',
+    className,
+  )
+  const content = (
+    <>
       {post.headerImage ? (
         <div className="aspect-video w-full overflow-hidden rounded-lg corner-squircle border border-border-subtle">
           <img
@@ -58,6 +52,33 @@ export function BlogPostCard({
           {formatAuthors(post.authors)} · {formatPublishedDate(post.published)}
         </div>
       </div>
+    </>
+  )
+
+  if (post.externalUrl) {
+    return (
+      <a
+        href={post.externalUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={onNavigate}
+        className={cardClassName}
+      >
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <Link
+      to="/blog/$"
+      params={{ _splat: post.slug } as never}
+      onClick={onNavigate}
+      preload="intent"
+      activeProps={{ className: 'bg-surface-state-pressed' }}
+      className={cardClassName}
+    >
+      {content}
     </Link>
   )
 }