Search results image summary (#604)

Author: kentcdodds

app/components/navbar.tsx

@@ -142,6 +142,9 @@ type SearchSuggestion = {
 	url: string
 	segment: string
 	title: string
+	summary?: string
+	imageUrl?: string
+	imageAlt?: string
 }
 
 function isPlainLeftClick(event: React.MouseEvent) {
@@ -527,14 +530,41 @@ function NavSearch({
 															: 'hover:bg-secondary',
 													)}
 												>
-													<div className="text-primary truncate text-base font-medium">
-														{s.title}
-													</div>
-													<div className="text-secondary mt-1 flex items-baseline justify-between gap-3 text-sm">
-														<span className="truncate">{s.segment}</span>
-														<span className="shrink-0">
-															{new URL(s.url).pathname}
-														</span>
+													<div className="flex items-start gap-3">
+														<div className="shrink-0">
+															{s.imageUrl ? (
+																<img
+																	src={s.imageUrl}
+																	alt={s.imageAlt ?? ''}
+																	className="h-10 w-10 rounded-md object-cover"
+																	loading="lazy"
+																/>
+															) : (
+																<div className="h-10 w-10 rounded-md bg-gray-200 dark:bg-gray-700" />
+															)}
+														</div>
+														<div className="min-w-0 flex-1">
+															<div className="text-primary truncate text-base font-medium">
+																{s.title}
+															</div>
+															<div className="text-secondary mt-1 flex items-baseline justify-between gap-3 text-sm">
+																<span className="truncate">{s.segment}</span>
+																<span className="shrink-0">
+																	{(() => {
+																		try {
+																			return new URL(s.url).pathname
+																		} catch {
+																			return s.url
+																		}
+																	})()}
+																</span>
+															</div>
+															{s.summary ? (
+																<div className="text-secondary mt-2 line-clamp-2 text-sm">
+																	{s.summary}
+																</div>
+															) : null}
+														</div>
 													</div>
 												</div>
 											</li>

app/routes/mcp+/mcp.server.ts

@@ -263,6 +263,9 @@ function createServer() {
 										title: r.title ?? url ?? r.id,
 										url: absoluteUrl,
 										category: r.type ?? 'Results',
+										summary: r.summary ?? r.snippet ?? null,
+										imageUrl: r.imageUrl ?? null,
+										imageAlt: r.imageAlt ?? null,
 									})
 								})
 								.join('\n'),

app/routes/resources+/search.ts

@@ -5,6 +5,14 @@ import {
 	semanticSearchKCD,
 } from '#app/utils/semantic-search.server.ts'
 
+function normalizeSummary(value: unknown) {
+	if (typeof value !== 'string') return undefined
+	const text = value.replace(/\s+/g, ' ').trim()
+	if (!text) return undefined
+	// Keep payloads small for consumers like Discord embeds/autocomplete UIs.
+	return text.length > 220 ? `${text.slice(0, 217)}...` : text
+}
+
 export async function loader({ request }: LoaderFunctionArgs) {
 	const query = new URL(request.url).searchParams.get('query')
 	const domainUrl = getDomainUrl(request)
@@ -39,6 +47,9 @@ export async function loader({ request }: LoaderFunctionArgs) {
 				url: absoluteUrl,
 				segment: r.type ?? 'Results',
 				title: r.title ?? url ?? r.id,
+				summary: normalizeSummary(r.summary ?? r.snippet),
+				imageUrl: r.imageUrl,
+				imageAlt: r.imageAlt,
 			}
 		}),
 		{ headers },

app/routes/search.tsx

@@ -181,28 +181,43 @@ function SearchResults({
 								key={r.id}
 								className="rounded-lg bg-gray-100 p-6 dark:bg-gray-800"
 							>
-								<div className="flex items-baseline justify-between gap-4">
-									<div className="min-w-0">
-										<H4 className="truncate">
-											{href ? (
-												<Link to={href}>{r.title ?? r.url ?? r.id}</Link>
+								<div className="flex items-start justify-between gap-4">
+									<div className="flex min-w-0 flex-1 items-start gap-4">
+										<div className="shrink-0">
+											{r.imageUrl ? (
+												<img
+													src={r.imageUrl}
+													alt={r.imageAlt ?? ''}
+													className="h-16 w-16 rounded-lg object-cover"
+													loading="lazy"
+												/>
 											) : (
-												r.id
+												<div className="h-16 w-16 rounded-lg bg-gray-200 dark:bg-gray-700" />
 											)}
-										</H4>
-										{r.type ? (
-											<p className="text-sm text-slate-500">{r.type}</p>
-										) : null}
+										</div>
+										<div className="min-w-0 flex-1">
+											<H4 className="truncate">
+												{href ? (
+													<Link to={href}>{r.title ?? r.url ?? r.id}</Link>
+												) : (
+													r.id
+												)}
+											</H4>
+											<div className="mt-1 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm text-slate-500">
+												{r.type ? <span>{r.type}</span> : null}
+												{r.url ? <span className="truncate">{r.url}</span> : null}
+											</div>
+											{r.summary || r.snippet ? (
+												<p className="mt-3 line-clamp-3 text-base text-slate-600 dark:text-slate-400">
+													{r.summary ?? r.snippet}
+												</p>
+											) : null}
+										</div>
 									</div>
 									<p className="shrink-0 text-sm text-slate-500">
 										{Number.isFinite(r.score) ? r.score.toFixed(3) : ''}
 									</p>
 								</div>
-								{r.snippet ? (
-									<p className="mt-3 text-base text-slate-600 dark:text-slate-400">
-										{r.snippet}
-									</p>
-								) : null}
 							</li>
 						)
 					})}