Skip to content

Commit 2199d19

Browse files
cloudflare-docs-bot[bot]cloudflare-docs-bot[bot]
committed
style: format
1 parent c25ee5a commit 2199d19

4 files changed

Lines changed: 219 additions & 247 deletions

File tree

‎src/components/models/ModelBadges.astro‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -56,16 +56,14 @@ const badges: BadgeDef[] = [providerBadge, ...propertyBadges];
5656
---
5757

5858
<ul class="m-0 flex list-none flex-wrap items-center gap-1.5 p-0">
59-
{
60-
badges.map((badge) => (
61-
<li class="m-0">
62-
<Badge
63-
text={badge.text}
64-
variant={badge.variant}
65-
size="small"
66-
title={badge.title}
67-
/>
68-
</li>
69-
))
70-
}
59+
{badges.map((badge) => (
60+
<li class="m-0">
61+
<Badge
62+
text={badge.text}
63+
variant={badge.variant}
64+
size="small"
65+
title={badge.title}
66+
/>
67+
</li>
68+
))}
7169
</ul>

‎src/components/models/ModelCard.astro‎

Lines changed: 33 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -71,69 +71,52 @@ const authorLogo = authorData[model.author]?.logo;
7171
href={href}
7272
class="group/card hover:bg-muted/30 focus-visible:outline-ring relative flex h-full flex-col p-5 text-inherit! no-underline transition-colors duration-150 focus-visible:outline-2 focus-visible:-outline-offset-2"
7373
>
74-
{
75-
isPinned && (
76-
<>
77-
<span class="sr-only">Pinned</span>
78-
<span
79-
class="bg-primary/10 text-primary ring-primary/20 pointer-events-none absolute top-3 right-3 z-20 grid size-6 place-items-center rounded-md ring-1 ring-inset"
80-
title="Pinned model"
81-
aria-hidden="true"
82-
>
83-
<Icon name="ph:push-pin-fill" class="size-3.5" />
84-
</span>
85-
</>
86-
)
87-
}
74+
{isPinned && (
75+
<>
76+
<span class="sr-only">Pinned</span>
77+
<span
78+
class="bg-primary/10 text-primary ring-primary/20 pointer-events-none absolute top-3 right-3 z-20 grid size-6 place-items-center rounded-md ring-1 ring-inset"
79+
title="Pinned model"
80+
aria-hidden="true"
81+
>
82+
<Icon name="ph:push-pin-fill" class="size-3.5" />
83+
</span>
84+
</>
85+
)}
8886
<div class={`flex items-center gap-3${isPinned ? " pr-9" : ""}`}>
89-
{
90-
authorLogo ? (
91-
<img
92-
src={authorLogo}
93-
alt={`${model.authorName} logo`}
94-
loading="lazy"
95-
class="border-border bg-card size-10 shrink-0 rounded-md border object-contain p-1 dark:bg-gray-200"
96-
/>
97-
) : (
98-
<span
99-
aria-hidden="true"
100-
class="border-border bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-md border text-base font-bold uppercase"
101-
>
102-
{model.author.charAt(0)}
103-
</span>
104-
)
105-
}
106-
<div class="flex min-w-0 flex-1 items-center gap-2">
107-
<h3
108-
class="text-foreground group-hover/card:text-primary line-clamp-2 text-sm leading-snug font-semibold break-words"
87+
{authorLogo ? (
88+
<img
89+
src={authorLogo}
90+
alt={`${model.authorName} logo`}
91+
loading="lazy"
92+
class="border-border bg-card size-10 shrink-0 rounded-md border object-contain p-1 dark:bg-gray-200"
93+
/>
94+
) : (
95+
<span
96+
aria-hidden="true"
97+
class="border-border bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-md border text-base font-bold uppercase"
10998
>
99+
{model.author.charAt(0)}
100+
</span>
101+
)}
102+
<div class="flex min-w-0 flex-1 items-center gap-2">
103+
<h3 class="text-foreground group-hover/card:text-primary line-clamp-2 text-sm leading-snug font-semibold break-words">
110104
{model.shortName}
111105
</h3>
112-
{
113-
model.beta && (
114-
<Badge
115-
text="Beta"
116-
variant="caution"
117-
size="small"
118-
class="shrink-0"
119-
/>
120-
)
121-
}
106+
{model.beta && (
107+
<Badge text="Beta" variant="caution" size="small" class="shrink-0" />
108+
)}
122109
</div>
123110
</div>
124111

125-
<div
126-
class="border-border mt-3 mb-3 flex items-center justify-between gap-2 border-t pt-3 text-xs"
127-
>
112+
<div class="border-border mt-3 mb-3 flex items-center justify-between gap-2 border-t pt-3 text-xs">
128113
<span class="text-foreground truncate">{model.authorName}</span>
129114
<span class="text-foreground shrink-0 font-mono tracking-wider uppercase">
130115
{model.task}
131116
</span>
132117
</div>
133118

134-
<p
135-
class="text-muted-foreground mb-4 line-clamp-2 min-h-10 flex-1 text-sm leading-relaxed"
136-
>
119+
<p class="text-muted-foreground mb-4 line-clamp-2 min-h-10 flex-1 text-sm leading-relaxed">
137120
{model.description}
138121
</p>
139122

‎src/components/models/ModelCatalog.astro‎

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,7 @@ const facetMatchMaps = Object.fromEntries(
4242

4343
<div data-models class="not-prose">
4444
{/* Toolbar */}
45-
<div
46-
class="mb-4 flex flex-col gap-3 md:flex-row md:flex-wrap md:items-center"
47-
>
45+
<div class="mb-4 flex flex-col gap-3 md:flex-row md:flex-wrap md:items-center">
4846
{/* Search */}
4947
<div class="relative flex-1 md:min-w-[300px]">
5048
<svg
@@ -57,7 +55,8 @@ const facetMatchMaps = Object.fromEntries(
5755
<path
5856
stroke-linecap="round"
5957
stroke-linejoin="round"
60-
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
58+
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
59+
></path>
6160
</svg>
6261
<input
6362
id="model-search"
@@ -70,19 +69,17 @@ const facetMatchMaps = Object.fromEntries(
7069

7170
{/* Filter dropdowns (React islands) + sort */}
7271
<div class="flex flex-wrap items-center gap-2">
73-
{
74-
facets.map((facet) => (
75-
<FilterDropdownWrapper
76-
label={facet.label}
77-
filterKey={facet.key}
78-
items={facet.options.map((o) => ({
79-
value: o.value,
80-
label: o.label,
81-
}))}
82-
client:load
83-
/>
84-
))
85-
}
72+
{facets.map((facet) => (
73+
<FilterDropdownWrapper
74+
label={facet.label}
75+
filterKey={facet.key}
76+
items={facet.options.map((o) => ({
77+
value: o.value,
78+
label: o.label,
79+
}))}
80+
client:load
81+
/>
82+
))}
8683
<SortSelectWrapper client:load />
8784
</div>
8885
</div>
@@ -122,11 +119,9 @@ const facetMatchMaps = Object.fromEntries(
122119
{/* Grid (server-rendered; script reflows it). */}
123120
<div class="border-border relative w-full border-t border-l">
124121
<div data-models-grid class={LG_GRID_CLASS[cols]}>
125-
{
126-
models.map((model, i) => (
127-
<ModelCard model={model} index={i} cols={cols} basePath={basePath} />
128-
))
129-
}
122+
{models.map((model, i) => (
123+
<ModelCard model={model} index={i} cols={cols} basePath={basePath} />
124+
))}
130125
</div>
131126
</div>
132127
</div>

0 commit comments

Comments
 (0)