diff --git a/astro.config.ts b/astro.config.ts index 1be914ecb79707c..4aef100b7774485 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -164,6 +164,7 @@ export default defineConfig({ sidebar: await autogenSections(), customCss: [ "./src/asides.css", + "./src/badges.css", "./src/code.css", "./src/headings.css", "./src/input.css", diff --git a/src/badges.css b/src/badges.css new file mode 100644 index 000000000000000..001beab380fc96d --- /dev/null +++ b/src/badges.css @@ -0,0 +1,85 @@ +.sl-badge { + /* Unset Starlight styling */ + border: none; + font-family: var(--__sl-font); + overflow-wrap: unset; + + /* Apply styling from https://www.npmjs.com/package/@cloudflare/component-label */ + align-items: center; + border-radius: 50px; + display: inline-flex; + font-size: 12px; + font-weight: 400; + line-height: 1; + user-select: none; + white-space: nowrap; + padding: 4px 8px; +} + +:root { + .sl-badge { + &.note { + background-color: theme("colors.cl1.blue.8") !important; + color: theme("colors.cl1.blue.2") !important; + } + + &.danger { + background-color: theme("colors.cl1.red.8") !important; + color: theme("colors.cl1.red.2") !important; + } + + &.success { + background-color: theme("colors.cl1.green.8") !important; + color: theme("colors.cl1.green.2") !important; + } + + &.caution { + background-color: theme("colors.cl1.orange.8") !important; + color: theme("colors.cl1.orange.2") !important; + } + + &.tip { + background-color: theme("colors.cl1.violet.8") !important; + color: theme("colors.cl1.violet.1") !important; + } + + &.default { + background-color: theme("colors.cl1.gray.9") !important; + color: theme("colors.cl1.gray.2") !important; + } + } +} + +:root[data-theme="dark"] { + .sl-badge { + &.note { + background-color: theme("colors.cl1.blue.7") !important; + color: theme("colors.cl1.blue.0") !important; + } + + &.danger { + background-color: theme("colors.cl1.red.8") !important; + color: theme("colors.cl1.red.0") !important; + } + + &.success { + background-color: theme("colors.cl1.green.7") !important; + color: theme("colors.cl1.green.0") !important; + } + + &.caution { + background-color: theme("colors.cl1.orange.8") !important; + color: theme("colors.cl1.orange.0") !important; + } + + &.tip { + background-color: theme("colors.cl1.violet.8") !important; + color: theme("colors.cl1.violet.0") !important; + } + + &.default { + background-color: theme("colors.cl1.gray.8") !important; + color: theme("colors.cl1.gray.3") !important; + } + } +} diff --git a/src/components/InlineBadge.astro b/src/components/InlineBadge.astro index 430296e96f013cc..67705395d6e4f20 100644 --- a/src/components/InlineBadge.astro +++ b/src/components/InlineBadge.astro @@ -23,7 +23,7 @@ if (preset) { } case "beta": { text = "Beta"; - variant = "default"; + variant = "caution"; break; } case "deprecated": { diff --git a/src/components/ModelCatalog.tsx b/src/components/ModelCatalog.tsx index 6d5ed3ba90a7b99..e65eb0f4144643a 100644 --- a/src/components/ModelCatalog.tsx +++ b/src/components/ModelCatalog.tsx @@ -240,11 +240,7 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => { {model.model_display_name} - {isBeta && ( - - Beta - - )} + {isBeta && Beta}
diff --git a/src/components/Type.astro b/src/components/Type.astro index 1f18743c5f0b0ad..9f36a01f8c6650c 100644 --- a/src/components/Type.astro +++ b/src/components/Type.astro @@ -15,7 +15,6 @@ const { text } = props.parse(Astro.props); ; const props = z.object({ @@ -18,9 +20,7 @@ const data = await getEntries(products); { data.map((product) => ( - - {product.data.product.title} - + )) } diff --git a/src/components/fields/FieldBadges.tsx b/src/components/fields/FieldBadges.tsx index 4739f088cde4212..16cc2c0c5036fb8 100644 --- a/src/components/fields/FieldBadges.tsx +++ b/src/components/fields/FieldBadges.tsx @@ -1,12 +1,9 @@ const FieldBadges = ({ badges }: { badges: string[] }) => { return ( -
    +
      {badges.map((badge) => ( -
    • - {badge} +
    • + {badge}
      • ))}
    diff --git a/src/components/models/ModelBadges.tsx b/src/components/models/ModelBadges.tsx index 7da99cd27725370..5392cd5cede0483 100644 --- a/src/components/models/ModelBadges.tsx +++ b/src/components/models/ModelBadges.tsx @@ -30,13 +30,10 @@ const ModelBadges = ({ model }: { model: WorkersAIModelsSchema }) => { }); return ( -
      +
        {badges.map((badge) => ( -
      • - {badge.text} +
      • + {badge.text}
        • ))}
      diff --git a/src/components/overrides/PageTitle.astro b/src/components/overrides/PageTitle.astro index 2cef29cdeb4aba5..60ffa4670652702 100644 --- a/src/components/overrides/PageTitle.astro +++ b/src/components/overrides/PageTitle.astro @@ -16,7 +16,6 @@ import { getEntry } from "astro:content"; const spotlightDetails = Astro.props.entry.data.spotlight; const updated = Astro.props.entry.data.updated; -const badge = Astro.props.entry.data.sidebar?.badge; const summary = Astro.props.entry.data.summary; const slug = Astro.props.entry.slug; @@ -97,8 +96,6 @@ const hideBreadcrumbs = Astro.props.hideBreadcrumbs; {!hideTitle && } -{badge && } - {updated && } { diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro index e470eccd9403c8a..4631d4417ebcc9a 100644 --- a/src/components/overrides/Sidebar.astro +++ b/src/components/overrides/Sidebar.astro @@ -29,6 +29,28 @@ interface Group { order: number; } +function inferBadgeVariant(badge: ComponentProps) { + if (badge.variant === "default") { + switch (badge.text) { + case "Beta": { + badge.variant = "caution"; + break; + } + case "New": { + badge.variant = "note"; + break; + } + case "Deprecated": + case "Legacy": { + badge.variant = "danger"; + break; + } + } + } + + return badge; +} + const currentSection = slug?.split("/")[0]; let filtered = sidebar.filter( @@ -76,7 +98,10 @@ async function handleGroup(group: Group): Promise { group.label = frontmatter.sidebar.group?.label ?? frontmatter.title; group.order = frontmatter.sidebar.order ?? Number.MAX_VALUE; - group.badge = frontmatter.sidebar.group?.badge; + + if (frontmatter.sidebar.group?.badge) { + group.badge = inferBadgeVariant(frontmatter.sidebar.group?.badge); + } if (frontmatter.hideChildren) { return { @@ -127,6 +152,10 @@ async function handleLink(link: Link): Promise { const frontmatter = page.data; link.order = frontmatter.sidebar.order ?? Number.MAX_VALUE; + if (link.badge) { + link.badge = inferBadgeVariant(link.badge); + } + if (slug === currentSection) { link.order = 0; } @@ -139,6 +168,7 @@ async function handleLink(link: Link): Promise { badge: frontmatter.external_link.startsWith("/api") ? { text: "API", + variant: "note", } : undefined, }; diff --git a/src/content/docs/style-guide/components/badges.mdx b/src/content/docs/style-guide/components/badges.mdx index 657dcf0052b31cf..c806adadf268668 100644 --- a/src/content/docs/style-guide/components/badges.mdx +++ b/src/content/docs/style-guide/components/badges.mdx @@ -6,21 +6,19 @@ import { Badge } from "~/components"; Badges are a built-in component provided by [Starlight](https://starlight.astro.build/guides/components/#bades). Use them to indicate a product is in beta, for example. -:::note - -For guidance on using badges inline with other text, refer to [Inline badges](/style-guide/components/inline-badge/). - -::: - ## Component +To adopt this styling in a React component, apply the `sl-badge` class to a `span` element. + ```mdx live import { Badge } from "~/components"; - - - - + + + + + + ``` ## Sidebar diff --git a/src/content/docs/style-guide/components/inline-badge.mdx b/src/content/docs/style-guide/components/inline-badge.mdx index 57dc07ef7217829..af6375f6a0a168a 100644 --- a/src/content/docs/style-guide/components/inline-badge.mdx +++ b/src/content/docs/style-guide/components/inline-badge.mdx @@ -12,7 +12,9 @@ Guidelines: - For instructions related to the feature (such as instructions on turning the feature on or off), you may mention again it's in beta, and also include "(beta)" in the side nav. ::: -## Example +## Component + +To adopt this styling in a React component, apply the `sl-badge` class to a `span` element. ```mdx live import { InlineBadge } from '~/components'; @@ -27,7 +29,7 @@ import { InlineBadge } from '~/components'; ### Legacy -### Custom +### Default ``` ## Inputs diff --git a/src/pages/workers-ai/models/[name].astro b/src/pages/workers-ai/models/[name].astro index d4dd9e138061740..0938fe60b1763d3 100644 --- a/src/pages/workers-ai/models/[name].astro +++ b/src/pages/workers-ai/models/[name].astro @@ -4,7 +4,7 @@ import { getCollection } from "astro:content"; import StarlightPage, { type StarlightPageProps, } from "@astrojs/starlight/components/StarlightPage.astro"; -import { LinkButton, Tabs, TabItem, Code, Aside } from "~/components"; +import { LinkButton, Tabs, TabItem, Code, Aside, Badge } from "~/components"; import ModelInfo from "~/components/models/ModelInfo.tsx"; import ModelBadges from "~/components/models/ModelBadges.tsx"; import SchemaViewer from "~/components/models/SchemaViewer.astro"; @@ -120,16 +120,16 @@ const starlightPageProps = { --- -
      +
      { author ? ( {`${author.name} ) : ( -
      +
      {model.name.split("/")[1].substring(0, 1)}
      ) @@ -137,24 +137,18 @@ const starlightPageProps = {

      {name} - { - isBeta && ( - - Beta - - ) - } + {isBeta && }

      - +
      - {model.name} + {model.name} -

      {description}

      +

      {description}

      {terms && Terms and License} diff --git a/src/pages/workers/ai.astro b/src/pages/workers/ai.astro index afa42557791a31c..037e02f86e40330 100644 --- a/src/pages/workers/ai.astro +++ b/src/pages/workers/ai.astro @@ -2,6 +2,8 @@ import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro"; import { Image } from "astro:assets"; +import { Badge } from "@astrojs/starlight/components"; + import CursorDark from "~/assets/images/workers/ai/cursor-dark.png"; import CursorLight from "~/assets/images/workers/ai/cursor-light.png"; --- @@ -26,11 +28,7 @@ import CursorLight from "~/assets/images/workers/ai/cursor-light.png";

      Meet your AI assistant, Cursor
      - - AI Preview - +

      diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 25f168481eeba43..bb5c887a3578b1b 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -12,6 +12,134 @@ const gray = { 900: "#181818", }; +const cl1 = { + white: "#fff", + black: "#000", + red: { + 0: "#3c0501", + 1: "#5a0801", + 2: "#780a02", + 3: "#970d02", + 4: "#b20f03", + 5: "#e81403", + 6: "#fc574a", + 7: "#fe9f97", + 8: "#feccc8", + 9: "#ffefee", + }, + orange: { + 0: "#361a02", + 1: "#482303", + 2: "#592b04", + 3: "#763905", + 4: "#8d4406", + 5: "#c05d08", + 6: "#ee730a", + 7: "#f8a054", + 8: "#fbcda5", + 9: "#fef1e6", + }, + gold: { + 0: "#361a02", + 1: "#3e2d00", + 2: "#4c3700", + 3: "#644900", + 4: "#735400", + 5: "#a77a00", + 6: "#dda100", + 7: "#ffce4b", + 8: "#ffeab2", + 9: "#fff8e4", + }, + green: { + 0: "#0a2614", + 1: "#0e381d", + 2: "#104122", + 3: "#15562d", + 4: "#196535", + 5: "#228b49", + 6: "#2db35e", + 7: "#55d584", + 8: "#a8e9c0", + 9: "#e3f8eb", + }, + cyan: { + 0: "#061b20", + 1: "#0b333e", + 2: "#0d3e4b", + 3: "#115061", + 4: "#156074", + 5: "#1e89a5", + 6: "#30b6da", + 7: "#73cee6", + 8: "#ace2f0", + 9: "#e9f7fb", + }, + blue: { + 0: "#001c43", + 1: "#002b67", + 2: "#003681", + 3: "#0045a6", + 4: "#0051c3", + 5: "#086fff", + 6: "#4693ff", + 7: "#82b6ff", + 8: "#b9d6ff", + 9: "#ecf4ff", + }, + indigo: { + 0: "#170f58", + 1: "#221785", + 2: "#2c1ea9", + 3: "#3524cd", + 4: "#4b3bdc", + 5: "#7366e4", + 6: "#9d94ec", + 7: "#c2bdf3", + 8: "#dfdcf9", + 9: "#f1f0fc", + }, + violet: { + 0: "#350b42", + 1: "#490f5c", + 2: "#5f1477", + 3: "#741892", + 4: "#8d1eb1", + 5: "#b73cdf", + 6: "#cf7ee9", + 7: "#dfa8f1", + 8: "#ebcaf6", + 9: "#f7eafb", + }, + pink: { + 0: "#2d0210", + 1: "#4e031c", + 2: "#6a0426", + 3: "#8d0633", + 4: "#af0740", + 5: "#e80954", + 6: "#f85189", + 7: "#fb97b9", + 8: "#fdc9db", + 9: "#fef1f5", + }, + gray: { + 0: "#1d1d1d", + 1: "#313131", + 2: "#3d3d3d", + 3: "#4a4a4a", + 4: "#595959", + 5: "#797979", + 6: "#999999", + 7: "#b6b6b6", + 8: "#d9d9d9", + 9: "#f2f2f2", + }, + brand: { + orange: "#f6821f", + }, +}; + /** @type {import('tailwindcss').Config} */ export default { content: ["./src/**/*.{astro,html,js,jsx,ts,tsx}"], @@ -29,6 +157,7 @@ export default { 900: "var(--tw-accent-900)", }, gray, + cl1, }, }, },