Skip to content

Commit e012d17

Browse files
KianNHKianNH
authored
[Docs Site] Adopt Cloudflare styling for badge component (#19390)
* [Docs Site] Adopt Cloudflare styling for badge component * add variant styling * remove variant note * remove gray class in inline badge docs * add caution variant to workers ai beta badge
1 parent 62bfa17 commit e012d17

File tree

15 files changed

+281
-58
lines changed

15 files changed

+281
-58
lines changed

‎astro.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export default defineConfig({
8282
sidebar,
8383
customCss: [
8484
"./src/asides.css",
85+
"./src/badges.css",
8586
"./src/code.css",
8687
"./src/footnotes.css",
8788
"./src/headings.css",

‎src/badges.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.sl-badge {
2+
/* Unset Starlight styling */
3+
border: none;
4+
font-family: var(--__sl-font);
5+
overflow-wrap: unset;
6+
7+
/* Apply styling from https://www.npmjs.com/package/@cloudflare/component-label */
8+
align-items: center;
9+
border-radius: 50px;
10+
display: inline-flex;
11+
font-size: 12px;
12+
font-weight: 400;
13+
line-height: 1;
14+
user-select: none;
15+
white-space: nowrap;
16+
padding: 4px 8px;
17+
}
18+
19+
:root {
20+
.sl-badge {
21+
&.note {
22+
background-color: theme("colors.cl1.blue.8") !important;
23+
color: theme("colors.cl1.blue.2") !important;
24+
}
25+
26+
&.danger {
27+
background-color: theme("colors.cl1.red.8") !important;
28+
color: theme("colors.cl1.red.2") !important;
29+
}
30+
31+
&.success {
32+
background-color: theme("colors.cl1.green.8") !important;
33+
color: theme("colors.cl1.green.2") !important;
34+
}
35+
36+
&.caution {
37+
background-color: theme("colors.cl1.orange.8") !important;
38+
color: theme("colors.cl1.orange.2") !important;
39+
}
40+
41+
&.tip {
42+
background-color: theme("colors.cl1.violet.8") !important;
43+
color: theme("colors.cl1.violet.1") !important;
44+
}
45+
46+
&.default {
47+
background-color: theme("colors.cl1.gray.9") !important;
48+
color: theme("colors.cl1.gray.2") !important;
49+
}
50+
}
51+
}
52+
53+
:root[data-theme="dark"] {
54+
.sl-badge {
55+
&.note {
56+
background-color: theme("colors.cl1.blue.7") !important;
57+
color: theme("colors.cl1.blue.0") !important;
58+
}
59+
60+
&.danger {
61+
background-color: theme("colors.cl1.red.8") !important;
62+
color: theme("colors.cl1.red.0") !important;
63+
}
64+
65+
&.success {
66+
background-color: theme("colors.cl1.green.7") !important;
67+
color: theme("colors.cl1.green.0") !important;
68+
}
69+
70+
&.caution {
71+
background-color: theme("colors.cl1.orange.8") !important;
72+
color: theme("colors.cl1.orange.0") !important;
73+
}
74+
75+
&.tip {
76+
background-color: theme("colors.cl1.violet.8") !important;
77+
color: theme("colors.cl1.violet.0") !important;
78+
}
79+
80+
&.default {
81+
background-color: theme("colors.cl1.gray.8") !important;
82+
color: theme("colors.cl1.gray.3") !important;
83+
}
84+
}
85+
}

‎src/components/InlineBadge.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ if (preset) {
2323
}
2424
case "beta": {
2525
text = "Beta";
26-
variant = "default";
26+
variant = "caution";
2727
break;
2828
}
2929
case "deprecated": {

‎src/components/ModelCatalog.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -240,11 +240,7 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
240240
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold">
241241
{model.model_display_name}
242242
</span>
243-
{isBeta && (
244-
<span className="ml-1 rounded-full bg-orange-200 px-2 py-0.5 text-xs text-orange-900">
245-
Beta
246-
</span>
247-
)}
243+
{isBeta && <span className="sl-badge caution ml-1">Beta</span>}
248244
</div>
249245
<div className="!m-0 text-xs">
250246
<ModelInfo model={model.model} />

‎src/components/Type.astro‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const { text } = props.parse(Astro.props);
1515

1616
<Badge
1717
text={text}
18-
size="small"
1918
style={{
2019
color: "var(--sl-text-white)",
2120
backgroundColor: "var(--sl-color-gray-6)",

‎src/components/changelog-next/ProductPills.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { getEntries } from "astro:content";
33
import { reference } from "astro:content";
44
import { z } from "astro:schema";
55
6+
import { Badge } from "@astrojs/starlight/components";
7+
68
type Props = z.infer<typeof props>;
79
810
const props = z.object({
@@ -18,9 +20,7 @@ const data = await getEntries(products);
1820
{
1921
data.map((product) => (
2022
<a href={product.data.product.url} class="no-underline">
21-
<span class="ml-1 rounded-full bg-orange-200 px-2 py-0.5 text-xs text-orange-900">
22-
{product.data.product.title}
23-
</span>
23+
<Badge text={product.data.product.title} class="ml-1" />
2424
</a>
2525
))
2626
}

‎src/components/fields/FieldBadges.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
const FieldBadges = ({ badges }: { badges: string[] }) => {
22
return (
3-
<ul className="list-none m-0 p-0 inline-flex items-center gap-2 text-xs">
3+
<ul className="m-0 inline-flex list-none items-center gap-2 p-0 text-xs">
44
{badges.map((badge) => (
5-
<li
6-
key={badge}
7-
className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-md block !mt-0"
8-
>
9-
{badge}
5+
<li key={badge}>
6+
<span className="sl-badge default">{badge}</span>
107
</li>
118
))}
129
</ul>

‎src/components/models/ModelBadges.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,10 @@ const ModelBadges = ({ model }: { model: WorkersAIModelsSchema }) => {
3030
});
3131

3232
return (
33-
<ul className="list-none m-0 p-0 flex items-center gap-2 text-xs">
33+
<ul className="m-0 flex list-none items-center gap-2 p-0 text-xs">
3434
{badges.map((badge) => (
35-
<li
36-
key={badge.text}
37-
className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-md block !mt-0"
38-
>
39-
{badge.text}
35+
<li key={badge.text}>
36+
<span className="sl-badge gray">{badge.text}</span>
4037
</li>
4138
))}
4239
</ul>

‎src/components/overrides/PageTitle.astro‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { getEntry } from "astro:content";
1616
1717
const spotlightDetails = Astro.props.entry.data.spotlight;
1818
const updated = Astro.props.entry.data.updated;
19-
const badge = Astro.props.entry.data.sidebar?.badge;
2019
const summary = Astro.props.entry.data.summary;
2120
2221
const slug = Astro.props.entry.slug;
@@ -97,8 +96,6 @@ const hideBreadcrumbs = Astro.props.hideBreadcrumbs;
9796

9897
{!hideTitle && <Default {...Astro.props} />}
9998

100-
{badge && <Badge variant={badge.variant} text={badge.text} />}
101-
10299
{updated && <LastReviewed date={updated} />}
103100

104101
{

‎src/components/overrides/Sidebar.astro‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,28 @@ interface Group {
3131
order: number;
3232
}
3333
34+
function inferBadgeVariant(badge: ComponentProps<typeof Badge>) {
35+
if (badge.variant === "default") {
36+
switch (badge.text) {
37+
case "Beta": {
38+
badge.variant = "caution";
39+
break;
40+
}
41+
case "New": {
42+
badge.variant = "note";
43+
break;
44+
}
45+
case "Deprecated":
46+
case "Legacy": {
47+
badge.variant = "danger";
48+
break;
49+
}
50+
}
51+
}
52+
53+
return badge;
54+
}
55+
3456
const currentSection = slug?.split("/")[0];
3557
3658
let filtered = sidebar.filter(
@@ -78,7 +100,10 @@ async function handleGroup(group: Group): Promise<SidebarEntry> {
78100
79101
group.label = frontmatter.sidebar.group?.label ?? frontmatter.title;
80102
group.order = frontmatter.sidebar.order ?? Number.MAX_VALUE;
81-
group.badge = frontmatter.sidebar.group?.badge;
103+
104+
if (frontmatter.sidebar.group?.badge) {
105+
group.badge = inferBadgeVariant(frontmatter.sidebar.group?.badge);
106+
}
82107
83108
if (frontmatter.hideChildren) {
84109
return {
@@ -129,6 +154,10 @@ async function handleLink(link: Link): Promise<Link> {
129154
const frontmatter = page.data;
130155
link.order = frontmatter.sidebar.order ?? Number.MAX_VALUE;
131156
157+
if (link.badge) {
158+
link.badge = inferBadgeVariant(link.badge);
159+
}
160+
132161
if (slug === currentSection) {
133162
link.order = 0;
134163
}
@@ -141,6 +170,7 @@ async function handleLink(link: Link): Promise<Link> {
141170
badge: frontmatter.external_link.startsWith("/api")
142171
? {
143172
text: "API",
173+
variant: "note",
144174
}
145175
: undefined,
146176
};

0 commit comments

Comments
 (0)