History

feat(react): use favicon on connected source list items (#226)

* feat(react): use favicon on connected source list items Replace the generic SVG icon in the connected sources list with SourceFavicon, which renders the site's actual favicon from the source URL. * fix(react): match favicon size to popular sources list (20px) * fix(react): match favicon size to CardStackEntryMedia container (32px)

Moritz Meyer committed 7 months ago

Commit b685f361 parent bdf736b1 file · +3 −9Browse files

Unified · Split

packages/react/src/pages/sources.tsx+3−9
@@ -20,6 +20,7 @@ import { · 19 unmodified lines
20 CardStackEntryDescription,20 CardStackEntryDescription,
21 CardStackEntryActions,21 CardStackEntryActions,
22} from "../components/card-stack";22} from "../components/card-stack";
23import { SourceFavicon } from "../components/source-favicon";
23 24
24const KIND_TO_PLUGIN_KEY: Record<string, string> = {25const KIND_TO_PLUGIN_KEY: Record<string, string> = {
25 openapi: "openapi",26 openapi: "openapi",
@@ -267,6 +268,7 @@ function SourceGrid(props: { · 241 unmodified lines
267 id: string;268 id: string;
268 name: string;269 name: string;
269 kind: string;270 kind: string;
271 url?: string;
270 runtime?: boolean;272 runtime?: boolean;
271 }[];273 }[];
272}) {274}) {
@@ -278,15 +280,7 @@ function SourceGrid(props: { · 5 unmodified lines
278 <CardStackEntry key={s.id} asChild searchText={`${s.name} ${s.id} ${s.kind}`}>280 <CardStackEntry key={s.id} asChild searchText={`${s.name} ${s.id} ${s.kind}`}>
279 <Link to="/sources/$namespace" params={{ namespace: s.id }}>281 <Link to="/sources/$namespace" params={{ namespace: s.id }}>
280 <CardStackEntryMedia>282 <CardStackEntryMedia>
281 <svg viewBox="0 0 16 16" className="size-3.5" fill="none">283 <SourceFavicon url={s.url} size={32} />
282 <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.2" />
283 <path
284 d="M8 5v6M5 8h6"
285 stroke="currentColor"
286 strokeWidth="1.2"
287 strokeLinecap="round"
288 />
289 </svg>
290 </CardStackEntryMedia>284 </CardStackEntryMedia>
291 <CardStackEntryContent>285 <CardStackEntryContent>
292 <CardStackEntryTitle>{s.name}</CardStackEntryTitle>286 <CardStackEntryTitle>{s.name}</CardStackEntryTitle>