mirror of
https://github.com/cloudflare/cloudflare-docs.git
synced 2026-01-11 20:06:58 +00:00
[Docs Site] Upgrade to Tailwind v4 (#21744)
* [Docs Site] Upgrade to Tailwind v4 * delete learning-paths/index.mdx * update deps * include css in class scanning * fix ts errors * make tailwind.css the first customCss file * fix formatting * fix learning paths line height * changelog header border * bump deps
This commit is contained in:
Kian
GitHub
parent
9f5efd0971
commit
1f18b07985
50 changed files with 1323 additions and 1810 deletions
|
|
@ -1,6 +1,5 @@
|
|||
import { defineConfig } from "astro/config";
|
||||
import starlight from "@astrojs/starlight";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import starlightDocSearch from "@astrojs/starlight-docsearch";
|
||||
import starlightImageZoom from "starlight-image-zoom";
|
||||
import liveCode from "astro-live-code";
|
||||
|
|
@ -45,7 +44,8 @@ async function autogenStyles() {
|
|||
})
|
||||
)
|
||||
.filter((x) => x.isFile())
|
||||
.map((x) => x.parentPath + x.name);
|
||||
.map((x) => x.parentPath + x.name)
|
||||
.sort((a) => (a === "./src/styles/tailwind.css" ? -1 : 1));
|
||||
|
||||
return styles;
|
||||
}
|
||||
|
|
@ -90,11 +90,19 @@ export default defineConfig({
|
|||
src: "./src/assets/logo.svg",
|
||||
},
|
||||
favicon: "/favicon.png",
|
||||
social: {
|
||||
github: "https://github.com/cloudflare/cloudflare-docs",
|
||||
"x.com": "https://x.com/cloudflare",
|
||||
youtube: "https://www.youtube.com/cloudflare",
|
||||
},
|
||||
social: [
|
||||
{
|
||||
label: "GitHub",
|
||||
icon: "github",
|
||||
href: "https://github.com/cloudflare/cloudflare-docs",
|
||||
},
|
||||
{ label: "X.com", icon: "x.com", href: "https://x.com/cloudflare" },
|
||||
{
|
||||
label: "YouTube",
|
||||
icon: "youtube",
|
||||
href: "https://www.youtube.com/cloudflare",
|
||||
},
|
||||
],
|
||||
editLink: {
|
||||
baseUrl:
|
||||
"https://github.com/cloudflare/cloudflare-docs/edit/production/",
|
||||
|
|
@ -143,9 +151,9 @@ export default defineConfig({
|
|||
starlightImageZoom(),
|
||||
],
|
||||
lastUpdated: true,
|
||||
}),
|
||||
tailwind({
|
||||
applyBaseStyles: false,
|
||||
markdown: {
|
||||
headingLinks: false,
|
||||
},
|
||||
}),
|
||||
liveCode({}),
|
||||
icon(),
|
||||
|
|
|
|||
2318
package-lock.json
generated
2318
package-lock.json
generated
File diff suppressed because it is too large
Load diff
17
package.json
17
package.json
|
|
@ -29,13 +29,12 @@
|
|||
"@actions/github": "6.0.0",
|
||||
"@apidevtools/swagger-parser": "10.1.1",
|
||||
"@astrojs/check": "0.9.4",
|
||||
"@astrojs/react": "4.2.1",
|
||||
"@astrojs/react": "4.2.5",
|
||||
"@astrojs/rss": "4.0.11",
|
||||
"@astrojs/sitemap": "3.3.0",
|
||||
"@astrojs/starlight": "0.32.5",
|
||||
"@astrojs/sitemap": "3.3.1",
|
||||
"@astrojs/starlight": "0.34.1",
|
||||
"@astrojs/starlight-docsearch": "0.6.0",
|
||||
"@astrojs/starlight-tailwind": "3.0.1",
|
||||
"@astrojs/tailwind": "5.1.5",
|
||||
"@astrojs/starlight-tailwind": "4.0.1",
|
||||
"@cloudflare/vitest-pool-workers": "0.8.20",
|
||||
"@cloudflare/workers-types": "4.20250421.0",
|
||||
"@codingheads/sticky-header": "1.0.2",
|
||||
|
|
@ -45,6 +44,7 @@
|
|||
"@marsidev/react-turnstile": "1.1.0",
|
||||
"@octokit/webhooks-types": "7.6.1",
|
||||
"@stoplight/json-schema-tree": "4.0.0",
|
||||
"@tailwindcss/postcss": "4.1.4",
|
||||
"@types/hast": "3.0.4",
|
||||
"@types/he": "1.2.3",
|
||||
"@types/node": "22.14.1",
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
"@types/react-dom": "19.0.4",
|
||||
"@typescript-eslint/parser": "8.31.0",
|
||||
"algoliasearch": "5.23.4",
|
||||
"astro": "5.6.1",
|
||||
"astro": "5.7.7",
|
||||
"astro-breadcrumbs": "3.3.1",
|
||||
"astro-icon": "1.1.5",
|
||||
"astro-live-code": "0.0.5",
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
"parse-duration": "2.1.4",
|
||||
"prettier": "3.5.3",
|
||||
"prettier-plugin-astro": "0.14.1",
|
||||
"prettier-plugin-tailwindcss": "0.6.9",
|
||||
"prettier-plugin-tailwindcss": "0.6.11",
|
||||
"pretty-bytes": "6.1.1",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0",
|
||||
|
|
@ -113,8 +113,9 @@
|
|||
"starlight-package-managers": "0.11.0",
|
||||
"starlight-showcases": "0.3.0",
|
||||
"strip-markdown": "6.0.0",
|
||||
"suf-log": "2.5.3",
|
||||
"svgo": "3.3.2",
|
||||
"tailwindcss": "3.4.17",
|
||||
"tailwindcss": "4.1.4",
|
||||
"tippy.js": "6.3.7",
|
||||
"ts-blank-space": "0.6.1",
|
||||
"tsx": "4.19.3",
|
||||
|
|
|
|||
5
postcss.config.mjs
Normal file
5
postcss.config.mjs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
|
@ -123,7 +123,7 @@ export default function CopyPageButton() {
|
|||
<button
|
||||
ref={refs.setReference}
|
||||
{...getReferenceProps()}
|
||||
className="inline-flex h-8 min-w-32 cursor-pointer items-center justify-center gap-2 rounded border border-[--sl-color-hairline] bg-transparent px-3 text-sm text-black hover:bg-[--sl-color-bg-nav]"
|
||||
className="inline-flex h-8 min-w-32 cursor-pointer items-center justify-center gap-2 rounded-sm border border-(--sl-color-hairline) bg-transparent px-3 text-sm text-black hover:bg-(--sl-color-bg-nav)"
|
||||
>
|
||||
{getButtonContent()}
|
||||
</button>
|
||||
|
|
@ -133,19 +133,19 @@ export default function CopyPageButton() {
|
|||
ref={refs.setFloating}
|
||||
style={floatingStyles}
|
||||
{...getFloatingProps()}
|
||||
className="list-none rounded border border-[--sl-color-hairline] bg-[--sl-color-bg] pl-0 shadow-md"
|
||||
className="list-none rounded-sm border border-(--sl-color-hairline) bg-(--sl-color-bg) pl-0 shadow-md"
|
||||
>
|
||||
{options.map(({ label, description, icon: Icon, onClick }) => (
|
||||
<li key={label}>
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="relative block w-full cursor-pointer bg-transparent px-3 py-2 text-left text-black no-underline hover:bg-[--sl-color-bg-nav]"
|
||||
className="relative block w-full cursor-pointer bg-transparent px-3 py-2 text-left text-black no-underline hover:bg-(--sl-color-bg-nav)"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Icon />
|
||||
{label}
|
||||
</div>
|
||||
<div className="ml-6 mt-0.5 text-xs text-[--sl-color-gray-3]">
|
||||
<div className="mt-0.5 ml-6 text-xs text-(--sl-color-gray-3)">
|
||||
{description}
|
||||
</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ if (cta) {
|
|||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
<div class="!mt-0 self-center">
|
||||
<div class="mt-0! self-center">
|
||||
<LinkCard title={title} href={href} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ function Buttons({
|
|||
}}
|
||||
className="cursor-pointer bg-transparent"
|
||||
>
|
||||
<MdOutlineThumbUp className="text-2xl text-sl hover:text-accent" />
|
||||
<MdOutlineThumbUp className="text-sl hover:text-accent text-2xl" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
|
|
@ -46,7 +46,7 @@ function Buttons({
|
|||
}}
|
||||
className="cursor-pointer bg-transparent"
|
||||
>
|
||||
<MdOutlineThumbDown className="text-2xl text-sl hover:text-accent" />
|
||||
<MdOutlineThumbDown className="text-sl hover:text-accent text-2xl" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -83,13 +83,13 @@ const FieldCatalog = ({ fields }: { fields: Fields }) => {
|
|||
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
||||
/>
|
||||
|
||||
<div className="!mb-8 hidden md:block">
|
||||
<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
|
||||
<div className="mb-8! hidden md:block">
|
||||
<span className="text-sm font-bold text-gray-600 uppercase dark:text-gray-200">
|
||||
▼ Categories
|
||||
</span>
|
||||
|
||||
{categories.map((category) => (
|
||||
<label key={category} className="!my-2 block">
|
||||
<label key={category} className="my-2! block">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mr-2"
|
||||
|
|
@ -117,10 +117,10 @@ const FieldCatalog = ({ fields }: { fields: Fields }) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="!mt-0 flex w-full flex-wrap items-stretch gap-[1%] self-start md:w-3/4">
|
||||
<div className="mt-0! flex w-full flex-wrap items-stretch gap-[1%] self-start md:w-3/4">
|
||||
{fieldList.length === 0 && (
|
||||
<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle dark:border-gray-500 dark:bg-gray-800">
|
||||
<span className="text-lg !font-bold">No fields found</span>
|
||||
<span className="text-lg font-bold!">No fields found</span>
|
||||
<p>
|
||||
Try a different search term, or broaden your search by removing
|
||||
filters.
|
||||
|
|
@ -131,24 +131,24 @@ const FieldCatalog = ({ fields }: { fields: Fields }) => {
|
|||
return (
|
||||
<a
|
||||
key={field.name}
|
||||
className="mb-3 block w-full self-stretch rounded-md border border-solid border-gray-200 p-3 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 lg:w-[48%]"
|
||||
className="mb-3 block w-full self-stretch rounded-md border border-solid border-gray-200 p-3 text-inherit! no-underline hover:bg-gray-50 lg:w-[48%] dark:border-gray-700 dark:hover:bg-gray-800"
|
||||
href={`/ruleset-engine/rules-language/fields/reference/${field.name}/`}
|
||||
>
|
||||
<div className="-mb-1 flex items-center">
|
||||
<span
|
||||
className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold"
|
||||
className="overflow-hidden text-lg font-semibold text-ellipsis whitespace-nowrap"
|
||||
title={`${field.name}: ${field.data_type}`}
|
||||
>
|
||||
{field.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="!mt-2 line-clamp-2 text-sm leading-6">
|
||||
<div className="mt-2! line-clamp-2 text-sm leading-6">
|
||||
<Markdown disallowedElements={["a"]} unwrapDisallowed={true}>
|
||||
{field.summary}
|
||||
</Markdown>
|
||||
</div>
|
||||
{field.plan_info_label && (
|
||||
<div className="!mt-2 text-xs">
|
||||
<div className="mt-2! text-xs">
|
||||
<FieldBadges badges={[field.plan_info_label]} />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="flex flex-col justify-between gap-x-2 md:flex-row [&_p]:!mt-0">
|
||||
<div class="flex flex-col justify-between gap-x-2 md:flex-row [&_p]:mt-0!">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const INITIAL_VISIBLE_ROWS = 20;
|
|||
<div class="flex items-center justify-center">
|
||||
<button
|
||||
id="glossary-button"
|
||||
class="h-12 cursor-pointer rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black"
|
||||
class="h-12 cursor-pointer rounded-sm bg-cl1-brand-orange px-6 font-medium text-cl1-black"
|
||||
>
|
||||
View more terms
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
|
|||
<button
|
||||
ref={refs.setReference}
|
||||
{...getReferenceProps()}
|
||||
className="flex cursor-pointer items-center justify-center gap-2 rounded bg-transparent p-2 font-medium hover:bg-cl1-white hover:shadow-md dark:hover:bg-cl1-gray-0"
|
||||
className="hover:bg-cl1-white dark:hover:bg-cl1-gray-0 flex cursor-pointer items-center justify-center gap-2 rounded-sm bg-transparent p-2 font-medium hover:shadow-md"
|
||||
>
|
||||
{label}
|
||||
<PiCaretDownBold />
|
||||
|
|
@ -61,13 +61,13 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
|
|||
ref={refs.setFloating}
|
||||
style={floatingStyles}
|
||||
{...getFloatingProps()}
|
||||
className="min-w-60 max-w-80 list-none rounded border border-cl1-gray-8 bg-cl1-white pl-0 shadow-md dark:border-cl1-gray-1 dark:bg-cl1-gray-0"
|
||||
className="border-cl1-gray-8 bg-cl1-white dark:border-cl1-gray-1 dark:bg-cl1-gray-0 max-w-80 min-w-60 list-none rounded-sm border pl-0 shadow-md"
|
||||
>
|
||||
{pages.map((page) => (
|
||||
<li key={page.href}>
|
||||
<a
|
||||
href={page.href}
|
||||
className="8 block p-3 text-black no-underline hover:bg-cl1-gray-9 dark:hover:bg-cl1-gray-1"
|
||||
className="8 hover:bg-cl1-gray-9 dark:hover:bg-cl1-gray-1 block p-3 text-black no-underline"
|
||||
target={page.href.startsWith("https") ? "_blank" : undefined}
|
||||
>
|
||||
{page.label}
|
||||
|
|
@ -82,12 +82,12 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
|
|||
|
||||
export default function HeaderDropdownsComponent() {
|
||||
return (
|
||||
<div className="flex gap-2 text-nowrap leading-6">
|
||||
<div className="flex gap-2 leading-6 text-nowrap">
|
||||
{links.map(({ label, href }) => (
|
||||
<a
|
||||
key={href}
|
||||
href={href}
|
||||
className="flex items-center justify-center rounded p-2 font-medium text-black no-underline hover:bg-cl1-white hover:shadow-md dark:hover:bg-cl1-gray-0"
|
||||
className="hover:bg-cl1-white dark:hover:bg-cl1-gray-0 flex items-center justify-center rounded-sm p-2 font-medium text-black no-underline hover:shadow-md"
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -69,13 +69,13 @@ const LearningPathCatalog = ({
|
|||
return (
|
||||
<div className="md:flex">
|
||||
<div className="mr-8 w-full md:w-1/4">
|
||||
<div className="!mb-8 hidden md:block">
|
||||
<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
|
||||
<div className="mb-8! hidden md:block">
|
||||
<span className="text-sm font-bold text-gray-600 uppercase dark:text-gray-200">
|
||||
Product groups
|
||||
</span>
|
||||
|
||||
{groups.map((group) => (
|
||||
<label key={group} className="!my-2 block">
|
||||
<label key={group} className="my-2! block">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mr-2"
|
||||
|
|
@ -102,13 +102,13 @@ const LearningPathCatalog = ({
|
|||
))}
|
||||
</div>
|
||||
|
||||
<div className="!mb-8 hidden md:block">
|
||||
<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
|
||||
<div className="mb-8! hidden md:block">
|
||||
<span className="text-sm font-bold text-gray-600 uppercase dark:text-gray-200">
|
||||
Products
|
||||
</span>
|
||||
|
||||
{products.map((product) => (
|
||||
<label key={product} className="!my-2 block">
|
||||
<label key={product} className="my-2! block">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mr-2"
|
||||
|
|
@ -136,10 +136,10 @@ const LearningPathCatalog = ({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="!mt-0 grid w-full grid-cols-1 items-stretch gap-2 self-start lg:w-3/4 lg:grid-cols-2 lg:gap-4">
|
||||
<div className="mt-0! grid w-full grid-cols-1 items-stretch gap-2 self-start lg:w-3/4 lg:grid-cols-2 lg:gap-4">
|
||||
{filtered.length === 0 && (
|
||||
<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle dark:border-gray-500 dark:bg-gray-800 md:col-span-2 lg:col-span-3">
|
||||
<span className="text-lg !font-bold">No products found</span>
|
||||
<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle md:col-span-2 lg:col-span-3 dark:border-gray-500 dark:bg-gray-800">
|
||||
<span className="text-lg font-bold!">No products found</span>
|
||||
<p>
|
||||
Try a different search term, or broaden your search by removing
|
||||
filters.
|
||||
|
|
@ -151,7 +151,7 @@ const LearningPathCatalog = ({
|
|||
<a
|
||||
key={path.title}
|
||||
href={path.link}
|
||||
className="rounded-md border border-solid border-gray-200 p-6 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
|
||||
className="rounded-md border border-solid border-gray-200 p-6 text-inherit! no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
|
||||
>
|
||||
<div className="flex gap-2">
|
||||
{path.icon && (
|
||||
|
|
@ -166,8 +166,8 @@ const LearningPathCatalog = ({
|
|||
)}
|
||||
{path.video && <span className="sl-badge tip">Video</span>}
|
||||
</div>
|
||||
<p className="!mt-3 font-semibold">{path.title}</p>
|
||||
<div className="leading-2 !mt-1 text-sm">
|
||||
<p className="mt-3! font-semibold">{path.title}</p>
|
||||
<div className="mt-1! text-sm">
|
||||
<Markdown disallowedElements={["a"]} unwrapDisallowed={true}>
|
||||
{path.description}
|
||||
</Markdown>
|
||||
|
|
|
|||
|
|
@ -40,9 +40,17 @@ const filterValues: Record<string, string[]> = {};
|
|||
|
||||
if (filters) {
|
||||
for (const filter of filters) {
|
||||
const values = examples.flatMap((x) =>
|
||||
filter in x.data ? x.data[filter] : [],
|
||||
);
|
||||
const values = examples.flatMap((x) => {
|
||||
if (filter in x.data) {
|
||||
const value = x.data[filter];
|
||||
|
||||
if (typeof value === "string") {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
});
|
||||
|
||||
const unique = [...new Set(values.flatMap((v) => v?.toString() ?? []))];
|
||||
|
||||
|
|
|
|||
|
|
@ -156,13 +156,13 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
|
|||
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
||||
/>
|
||||
|
||||
<div className="!mb-8 hidden md:block">
|
||||
<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
|
||||
<div className="mb-8! hidden md:block">
|
||||
<span className="text-sm font-bold text-gray-600 uppercase dark:text-gray-200">
|
||||
▼ Tasks
|
||||
</span>
|
||||
|
||||
{tasks.map((task) => (
|
||||
<label key={task} className="!my-2 block">
|
||||
<label key={task} className="my-2! block">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mr-2"
|
||||
|
|
@ -189,13 +189,13 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
|
|||
))}
|
||||
</div>
|
||||
|
||||
<div className="!mb-8 hidden md:block">
|
||||
<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
|
||||
<div className="mb-8! hidden md:block">
|
||||
<span className="text-sm font-bold text-gray-600 uppercase dark:text-gray-200">
|
||||
▼ Capabilities
|
||||
</span>
|
||||
|
||||
{capabilities.map((capability) => (
|
||||
<label key={capability} className="!my-2 block">
|
||||
<label key={capability} className="my-2! block">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={capability}
|
||||
|
|
@ -225,12 +225,12 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
|
|||
</div>
|
||||
|
||||
<div className="hidden md:block">
|
||||
<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
|
||||
<span className="text-sm font-bold text-gray-600 uppercase dark:text-gray-200">
|
||||
▼ Authors
|
||||
</span>
|
||||
|
||||
{authors.map((author) => (
|
||||
<label key={author} className="!my-2 block">
|
||||
<label key={author} className="my-2! block">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mr-2"
|
||||
|
|
@ -259,10 +259,10 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="!mt-0 flex w-full flex-wrap items-stretch gap-[1%] self-start md:w-3/4">
|
||||
<div className="mt-0! flex w-full flex-wrap items-stretch gap-[1%] self-start md:w-3/4">
|
||||
{modelList.length === 0 && (
|
||||
<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle dark:border-gray-500 dark:bg-gray-800">
|
||||
<span className="text-lg !font-bold">No models found</span>
|
||||
<span className="text-lg font-bold!">No models found</span>
|
||||
<p>
|
||||
Try a different search term, or broaden your search by removing
|
||||
filters.
|
||||
|
|
@ -282,11 +282,11 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
|
|||
return (
|
||||
<a
|
||||
key={model.model.id}
|
||||
className="relative mb-3 block w-full self-start rounded-md border border-solid border-gray-200 p-3 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 lg:w-[48%]"
|
||||
className="relative mb-3 block w-full self-start rounded-md border border-solid border-gray-200 p-3 text-inherit! no-underline hover:bg-gray-50 lg:w-[48%] dark:border-gray-700 dark:hover:bg-gray-800"
|
||||
href={`/workers-ai/models/${model.model_display_name}`}
|
||||
>
|
||||
{isPinned && (
|
||||
<span className="absolute right-2 top-1" title="Pinned model">
|
||||
<span className="absolute top-1 right-2" title="Pinned model">
|
||||
📌
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -298,22 +298,22 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
|
|||
alt={`${authorInfo.name} logo`}
|
||||
/>
|
||||
) : (
|
||||
<div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-gray-100 text-sm font-black uppercase text-gray-400">
|
||||
<div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-gray-100 text-sm font-black text-gray-400 uppercase">
|
||||
{author.slice(0, 1)}
|
||||
</div>
|
||||
)}
|
||||
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold">
|
||||
<span className="overflow-hidden text-lg font-semibold text-ellipsis whitespace-nowrap">
|
||||
{model.model_display_name}
|
||||
</span>
|
||||
{isBeta && <span className="sl-badge caution ml-1">Beta</span>}
|
||||
</div>
|
||||
<div className="!m-0 text-xs">
|
||||
<div className="m-0! text-xs">
|
||||
<ModelInfo model={model.model} />
|
||||
</div>
|
||||
<p className="!mt-2 line-clamp-2 text-sm leading-6">
|
||||
<p className="mt-2! line-clamp-2 text-sm leading-6">
|
||||
{model.model.description}
|
||||
</p>
|
||||
<div className="!mt-2 text-xs">
|
||||
<div className="mt-2! text-xs">
|
||||
<ModelBadges model={model.model} />
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -65,13 +65,13 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
|
|||
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
||||
/>
|
||||
|
||||
<div className="!mb-8 hidden md:block">
|
||||
<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
|
||||
<div className="mb-8! hidden md:block">
|
||||
<span className="text-sm font-bold text-gray-600 uppercase dark:text-gray-200">
|
||||
Groups
|
||||
</span>
|
||||
|
||||
{groups.map((group) => (
|
||||
<label key={group} className="!my-2 block">
|
||||
<label key={group} className="my-2! block">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mr-2"
|
||||
|
|
@ -99,10 +99,10 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="!mt-0 grid w-full grid-cols-1 items-stretch gap-2 self-start md:grid-cols-2 lg:w-3/4 lg:grid-cols-3 lg:gap-4">
|
||||
<div className="mt-0! grid w-full grid-cols-1 items-stretch gap-2 self-start md:grid-cols-2 lg:w-3/4 lg:grid-cols-3 lg:gap-4">
|
||||
{productList.length === 0 && (
|
||||
<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle dark:border-gray-500 dark:bg-gray-800 md:col-span-2 lg:col-span-3">
|
||||
<span className="text-lg !font-bold">No products found</span>
|
||||
<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle md:col-span-2 lg:col-span-3 dark:border-gray-500 dark:bg-gray-800">
|
||||
<span className="text-lg font-bold!">No products found</span>
|
||||
<p>
|
||||
Try a different search term, or broaden your search by removing
|
||||
filters.
|
||||
|
|
@ -114,7 +114,7 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
|
|||
<a
|
||||
key={product.data.name}
|
||||
href={product.data.product.url}
|
||||
className="block self-stretch rounded-md border border-solid border-gray-200 p-3 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
|
||||
className="block self-stretch rounded-md border border-solid border-gray-200 p-3 text-inherit! no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
|
||||
>
|
||||
<div className="flex items-start">
|
||||
{product.icon && (
|
||||
|
|
@ -128,7 +128,7 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
|
|||
</div>
|
||||
)}
|
||||
{!product.icon && (
|
||||
<div className="mr-2 flex h-8 w-8 items-center justify-center rounded-full bg-orange-50 p-1 text-lg font-bold leading-none text-[color:var(--orange-accent-200)] dark:bg-orange-950">
|
||||
<div className="mr-2 flex h-8 w-8 items-center justify-center rounded-full bg-orange-50 p-1 text-lg leading-none font-bold text-[color:var(--orange-accent-200)] dark:bg-orange-950">
|
||||
{product.data.name.substr(0, 1)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -137,7 +137,7 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
|
|||
</span>
|
||||
</div>
|
||||
{product.data.meta && (
|
||||
<p className="!mt-2 line-clamp-2 text-sm leading-6">
|
||||
<p className="mt-2! line-clamp-2 text-sm leading-6">
|
||||
{product.data.meta.description}
|
||||
</p>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ if (!releaseNotes) {
|
|||
</a>
|
||||
<p class="text-xs">{entry.date}</p>
|
||||
{page.data.release_notes_product_area_name && (
|
||||
<h3 class="!mt-4">
|
||||
<h3 class="mt-4!">
|
||||
<a href={entry.productLink}>{entry.product}</a>
|
||||
</h3>
|
||||
)}
|
||||
|
|
@ -125,7 +125,7 @@ if (!releaseNotes) {
|
|||
<AnchorHeading depth={2} title={date} />
|
||||
<div data-product={entry.product.toLowerCase()}>
|
||||
{page.data.release_notes_product_area_name && (
|
||||
<h3 class="!mt-4">
|
||||
<h3 class="mt-4!">
|
||||
<a href={entry.productLink}>{entry.product}</a>
|
||||
</h3>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const input = props.parse(Astro.props);
|
|||
|
||||
<a
|
||||
href={"href" in input ? input.href : `/changelog/rss/${input.changelog}.xml`}
|
||||
class="inline-flex items-center justify-center gap-1 rounded font-semibold no-underline"
|
||||
class="inline-flex items-center justify-center gap-1 rounded-sm font-semibold no-underline"
|
||||
target="_blank"
|
||||
>
|
||||
{input.text}
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@ const { header, href, product } = props.parse(Astro.props);
|
|||
name={product}
|
||||
class="text-7xl text-[color:var(--orange-accent-200)]"
|
||||
/>
|
||||
<div class="!mt-0">
|
||||
<div class="mt-0!">
|
||||
<strong>
|
||||
<a
|
||||
href={href}
|
||||
class="!text-black decoration-[color:var(--orange-accent-200)]"
|
||||
class="text-black! decoration-[color:var(--orange-accent-200)]"
|
||||
>{header}</a
|
||||
>
|
||||
</strong>
|
||||
|
|
|
|||
|
|
@ -63,16 +63,16 @@ if (thumbnail) {
|
|||
thumbnail.searchParams.set("time", `${totalSeconds}s`);
|
||||
|
||||
return (
|
||||
<li class="!mt-0">
|
||||
<li class="mt-0!">
|
||||
<button
|
||||
class="flex h-full w-36 cursor-pointer flex-col rounded border border-gray-200 bg-transparent p-4 dark:border-gray-700"
|
||||
class="flex h-full w-36 cursor-pointer flex-col rounded-sm border border-gray-200 bg-transparent p-4 dark:border-gray-700"
|
||||
data-chapter={chapter}
|
||||
data-time={totalSeconds}
|
||||
>
|
||||
<img
|
||||
src={thumbnail.toString()}
|
||||
alt={chapter}
|
||||
class="rounded border border-accent"
|
||||
class="rounded-sm border border-accent"
|
||||
/>
|
||||
<div class="flex h-full flex-col items-center justify-between">
|
||||
<strong class="line-clamp-2 text-xs" title={chapter}>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default function SubtractIPCalculator({
|
|||
</div>
|
||||
<div>
|
||||
<button
|
||||
className="h-8 cursor-pointer rounded bg-cl1-brand-orange px-4 text-sm font-medium text-cl1-black disabled:cursor-not-allowed disabled:bg-cl1-gray-4 disabled:text-cl1-gray-1"
|
||||
className="bg-cl1-brand-orange text-cl1-black disabled:bg-cl1-gray-4 disabled:text-cl1-gray-1 h-8 cursor-pointer rounded-sm px-4 text-sm font-medium disabled:cursor-not-allowed"
|
||||
disabled={disableButton()}
|
||||
onClick={() => calculate()}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const resources = await getCollection("docs", (entry) => {
|
|||
const title =
|
||||
resource.data.head
|
||||
.find((x) => x.tag === "title")
|
||||
?.content.split(" · ")[0] ?? resource.data.title;
|
||||
?.content?.split(" · ")[0] ?? resource.data.title;
|
||||
|
||||
return (
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -218,7 +218,7 @@ let range = (n: number) => [...Array(n).keys()];
|
|||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
shrink: 0;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
|
|
@ -234,7 +234,7 @@ let range = (n: number) => [...Array(n).keys()];
|
|||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
shrink: 0;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export type Props = Parameters<typeof Card>[0];
|
|||
background-color: currentColor;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex-shrink: 0;
|
||||
shrink: 0;
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
mask-size: 100%;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const products = await uniqueProducts(notes);
|
|||
---
|
||||
|
||||
<div
|
||||
class="bg-linear-to-r !mt-0 mb-16 ml-[calc(50%-50vw)] flex w-screen items-center justify-evenly border-b-2 bg-gradient-to-r from-[#FFE9CB99] to-[#FFFFFF99] p-4 dark:border-b-[#2C2C2C] dark:from-[#FBAD411F] dark:to-[#2C2C2C00] max-sm:flex-col-reverse sm:h-[18.75rem]"
|
||||
class="mt-0! mb-16 ml-[calc(50%-50vw)] flex w-screen items-center justify-evenly border-b-2 border-b-(--sl-color-hairline) bg-linear-to-r from-[#FFE9CB99] to-[#FFFFFF99] p-4 max-sm:flex-col-reverse sm:h-[18.75rem] dark:from-[#FBAD411F] dark:to-[#2C2C2C00]"
|
||||
>
|
||||
<div class="text-center sm:text-left">
|
||||
<h1>Changelog</h1>
|
||||
|
|
@ -54,7 +54,7 @@ const products = await uniqueProducts(notes);
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
<Image src={HeroImage} alt="hero image" height="240" class="!mt-0" />
|
||||
<Image src={HeroImage} alt="hero image" height="240" class="mt-0!" />
|
||||
</div>
|
||||
|
||||
<style is:global>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ const blocks = [
|
|||
] as const;
|
||||
---
|
||||
|
||||
<div class="flex items-start justify-between py-10 *:!mt-0">
|
||||
<div class="flex items-start justify-between py-10 *:mt-0!">
|
||||
{
|
||||
blocks.map(({ title, text, links }) => (
|
||||
<div>
|
||||
|
|
@ -66,13 +66,13 @@ const blocks = [
|
|||
<p class="w-80">{text}</p>
|
||||
<ul class="list-none pl-0">
|
||||
{links.map((link) => (
|
||||
<li class="!mt-4 flex">
|
||||
<li class="mt-4! flex">
|
||||
<Icon
|
||||
name={link.icon}
|
||||
size="1.5rem"
|
||||
color="var(--sl-color-white)"
|
||||
/>
|
||||
<a href={link.href} class="pl-2 !text-black no-underline">
|
||||
<a href={link.href} class="pl-2 text-black! no-underline">
|
||||
{link.text}
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import Render from "~/components/Render.astro";
|
|||
|
||||
<div class="tryit-sidebar">
|
||||
<Card title="">
|
||||
<div class="*:block *:rounded *:p-2">
|
||||
<div class="*:block *:rounded-sm *:p-2">
|
||||
<label for="section1" id="section1Label">
|
||||
<strong>Return HTML</strong>
|
||||
</label>
|
||||
|
|
@ -34,20 +34,20 @@ import Render from "~/components/Render.astro";
|
|||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="tryit-code !mt-0 ml-8 w-full">
|
||||
<div id="section1Content" class="!mt-0 hidden">
|
||||
<div class="tryit-code mt-0! ml-8 w-full">
|
||||
<div id="section1Content" class="mt-0! hidden">
|
||||
<Render file="return-html-example-js" product="workers" />
|
||||
</div>
|
||||
<div id="section2Content" class="!mt-0 hidden">
|
||||
<div id="section2Content" class="mt-0! hidden">
|
||||
<Render file="return-json-example-js" product="workers" />
|
||||
</div>
|
||||
<div id="section3Content" class="!mt-0 hidden">
|
||||
<div id="section3Content" class="mt-0! hidden">
|
||||
<Render file="fetch-html-example-js" product="workers" />
|
||||
</div>
|
||||
<div id="section4Content" class="!mt-0 hidden">
|
||||
<div id="section4Content" class="mt-0! hidden">
|
||||
<Render file="redirect-example-js" product="workers" />
|
||||
</div>
|
||||
<div id="section5Content" class="!mt-0 hidden">
|
||||
<div id="section5Content" class="mt-0! hidden">
|
||||
<Render file="respond-another-site-example-js" product="workers" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const ModelInfo = ({ model }: { model: WorkersAIModelsSchema }) => {
|
|||
const author =
|
||||
authorData[model.name.split("/")[1]]?.name ?? model.name.split("/")[1];
|
||||
return (
|
||||
<span className="mt-2 !block leading-5 text-gray-400">
|
||||
<span className="mt-2 block! leading-5 text-gray-400">
|
||||
{model.task.name} • {author}
|
||||
</span>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ const { node, root } = Astro.props;
|
|||
---
|
||||
|
||||
<li
|
||||
class={`py-2 !my-0 !list-none ${root ? "" : "border-l border-l-gray-200 dark:border-l-gray-500 pl-4"}`}
|
||||
class={`py-2 my-0! list-none! ${root ? "" : "border-l border-l-gray-200 dark:border-l-gray-500 pl-4"}`}
|
||||
>
|
||||
{
|
||||
(
|
||||
<code
|
||||
class="mr-2 rounded-md bg-gray-100 !pr-0 font-mono"
|
||||
class="mr-2 rounded-md bg-gray-100 pr-0! font-mono"
|
||||
title={node.title}
|
||||
>
|
||||
{node.subpath[node.subpath.length - 1]}
|
||||
|
|
@ -50,11 +50,11 @@ const { node, root } = Astro.props;
|
|||
/>
|
||||
)
|
||||
}
|
||||
<p class="!mb-0">{node.annotations.description}</p>
|
||||
<p class="mb-0!">{node.annotations.description}</p>
|
||||
|
||||
{
|
||||
node.children && (
|
||||
<ul class="m-0 ml-4 !list-none p-0">
|
||||
<ul class="m-0 ml-4 list-none! p-0">
|
||||
{node.children.map((node: SchemaNode) => (
|
||||
<Astro.self node={node} />
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ if (
|
|||
<li class="text-sm">
|
||||
<a
|
||||
href={link.href}
|
||||
class="flex items-center gap-2 !text-black no-underline"
|
||||
class="flex items-center gap-2 text-black! no-underline"
|
||||
>
|
||||
{"icon" in link && <Icon name={link.icon as StarlightIcon} />}
|
||||
{link.text}
|
||||
|
|
@ -114,7 +114,7 @@ if (
|
|||
</div>
|
||||
<div>
|
||||
<ul
|
||||
class="flex list-inside flex-wrap items-center justify-center gap-3 gap-y-4 pl-0 text-xs !text-cl1-gray-4 dark:!text-cl1-gray-7"
|
||||
class="flex list-inside flex-wrap items-center justify-center gap-3 gap-y-4 pl-0 text-xs text-cl1-gray-4! dark:text-cl1-gray-7!"
|
||||
>
|
||||
<li class="list-none">2025 Cloudflare, Inc.</li>
|
||||
{
|
||||
|
|
@ -122,7 +122,7 @@ if (
|
|||
<li>
|
||||
<a
|
||||
href={href}
|
||||
class="!text-cl1-gray-4 no-underline dark:!text-cl1-gray-7"
|
||||
class="text-cl1-gray-4! no-underline dark:text-cl1-gray-7!"
|
||||
>
|
||||
{text}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -37,14 +37,12 @@ if (currentSection) {
|
|||
|
||||
head[titleIdx] = {
|
||||
tag: "title",
|
||||
attrs: {},
|
||||
content: title,
|
||||
};
|
||||
} else {
|
||||
title = `${frontmatter.title} · ${product.data.meta.title}`;
|
||||
head.push({
|
||||
tag: "title",
|
||||
attrs: {},
|
||||
content: title,
|
||||
});
|
||||
}
|
||||
|
|
@ -71,7 +69,6 @@ if (currentSection) {
|
|||
name: "pcx_content_group",
|
||||
content: product.data.product.group,
|
||||
},
|
||||
content: "",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -133,7 +130,6 @@ if (frontmatter.pcx_content_type === "changelog") {
|
|||
type: "application/rss+xml",
|
||||
href: href.toString(),
|
||||
},
|
||||
content: "",
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -157,14 +153,12 @@ head.push({
|
|||
type: "text/markdown",
|
||||
href: Astro.url.pathname + "index.md",
|
||||
},
|
||||
content: "",
|
||||
});
|
||||
|
||||
metaTags.map((attrs) => {
|
||||
head.push({
|
||||
tag: "meta",
|
||||
attrs,
|
||||
content: "",
|
||||
});
|
||||
});
|
||||
---
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import HeaderDropdowns from "../HeaderDropdowns.tsx";
|
|||
<a
|
||||
id="header-login-button"
|
||||
href="https://dash.cloudflare.com/"
|
||||
class="mr-2 flex items-center justify-center rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black no-underline"
|
||||
class="mr-2 flex items-center justify-center rounded-sm bg-cl1-brand-orange px-6 font-medium text-cl1-black no-underline"
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -58,9 +58,3 @@ if (data.updated) {
|
|||
---
|
||||
|
||||
<Default set:html={html} />
|
||||
|
||||
<style>
|
||||
html:not([data-has-toc]) {
|
||||
--sl-content-width: 67.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ const hideBreadcrumbs = Astro.locals.starlightRoute.hideBreadcrumbs;
|
|||
)
|
||||
}
|
||||
|
||||
{!hideTitle && <Default />}
|
||||
{!hideTitle && <Default />}
|
||||
|
||||
{updated && <LastReviewed date={updated} />}
|
||||
|
||||
|
|
@ -112,17 +112,49 @@ const hideBreadcrumbs = Astro.locals.starlightRoute.hideBreadcrumbs;
|
|||
|
||||
{summary && <Description set:html={marked.parse(summary)} />}
|
||||
|
||||
{component && <Aside>To see a list of pages this component is used on, please visit the <a href={`/style-guide/components/usage/#${component.toLowerCase()}`}>usage page</a>.</Aside>}
|
||||
{
|
||||
component && (
|
||||
<Aside>
|
||||
To see a list of pages this component is used on, please visit the{" "}
|
||||
<a href={`/style-guide/components/usage/#${component.toLowerCase()}`}>
|
||||
usage page
|
||||
</a>
|
||||
.
|
||||
</Aside>
|
||||
)
|
||||
}
|
||||
|
||||
{frontmatter.template !== "splash" && (
|
||||
<div class="flex justify-end items-center">
|
||||
<CopyPageButton client:idle />
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
frontmatter.template !== "splash" && (
|
||||
<div class="flex items-center justify-end">
|
||||
<CopyPageButton client:idle />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--color-link-breadcrumbs: var(--sl-color-text-accent);
|
||||
|
||||
.c-breadcrumbs {
|
||||
--spacing-vertical-separator-breadcrumbs: 0.625rem;
|
||||
|
||||
padding: 0.5rem 0;
|
||||
|
||||
.c-breadcrumbs__link {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c-breadcrumbs__separator {
|
||||
color: var(--color-cl1-brand-orange);
|
||||
}
|
||||
|
||||
.c-breadcrumbs__truncated-button {
|
||||
color: var(--color-cl1-brand-orange);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import FeedbackPrompt from "../FeedbackPrompt.tsx";
|
|||
{Astro.locals.starlightRoute.editUrl && (
|
||||
<a
|
||||
href={Astro.locals.starlightRoute.editUrl}
|
||||
class="inline-flex h-8 items-center justify-center gap-2 rounded border border-[--sl-color-hairline] px-3 text-black"
|
||||
class="inline-flex h-8 items-center justify-center gap-2 rounded-sm border border-(--sl-color-hairline) px-3 text-black"
|
||||
>
|
||||
<Icon name="pencil" />
|
||||
Edit
|
||||
|
|
@ -24,7 +24,7 @@ import FeedbackPrompt from "../FeedbackPrompt.tsx";
|
|||
)}
|
||||
<a
|
||||
href="https://github.com/cloudflare/cloudflare-docs/issues/new/choose"
|
||||
class="inline-flex h-8 items-center justify-center gap-2 rounded border border-[--sl-color-hairline] px-3 text-black"
|
||||
class="inline-flex h-8 items-center justify-center gap-2 rounded-sm border border-(--sl-color-hairline) px-3 text-black"
|
||||
>
|
||||
<Icon name="github" />
|
||||
Issue
|
||||
|
|
|
|||
|
|
@ -35,12 +35,12 @@ function SearchBox(props: UseSearchBoxProps) {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex items-center rounded border border-cl1-gray-8 p-2 dark:border-cl1-gray-2">
|
||||
<div className="border-cl1-gray-8 dark:border-cl1-gray-2 flex items-center rounded-sm border p-2">
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(event) => refine(event.target.value)}
|
||||
className="w-full border-none bg-transparent p-0 text-sm outline-none"
|
||||
className="w-full border-none bg-transparent p-0 text-sm outline-hidden"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -64,7 +64,7 @@ function InfiniteHits(props: UseInfiniteHitsProps) {
|
|||
<a
|
||||
key={item.objectID}
|
||||
href={item.url}
|
||||
className="flex flex-col rounded border border-cl1-gray-8 p-6 !text-black no-underline hover:bg-cl1-gray-9 dark:border-cl1-gray-2 dark:bg-cl1-gray-0 dark:hover:bg-cl1-gray-1"
|
||||
className="border-cl1-gray-8 hover:bg-cl1-gray-9 dark:border-cl1-gray-2 dark:bg-cl1-gray-0 dark:hover:bg-cl1-gray-1 flex flex-col rounded-sm border p-6 text-black! no-underline"
|
||||
>
|
||||
<strong>{title}</strong>
|
||||
<p className="line-clamp-2">
|
||||
|
|
@ -77,7 +77,7 @@ function InfiniteHits(props: UseInfiniteHitsProps) {
|
|||
<div className="flex items-center justify-center">
|
||||
<button
|
||||
onClick={showMore}
|
||||
className="h-12 cursor-pointer rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black"
|
||||
className="bg-cl1-brand-orange text-cl1-black h-12 cursor-pointer rounded-sm px-6 font-medium"
|
||||
>
|
||||
Load more
|
||||
</button>
|
||||
|
|
@ -143,7 +143,7 @@ function FilterDropdown({
|
|||
<button
|
||||
ref={refs.setReference}
|
||||
{...getReferenceProps()}
|
||||
className="flex cursor-pointer items-center justify-center gap-2 rounded border border-cl1-gray-8 bg-transparent p-2 dark:border-cl1-gray-2"
|
||||
className="border-cl1-gray-8 dark:border-cl1-gray-2 flex cursor-pointer items-center justify-center gap-2 rounded-sm border bg-transparent p-2"
|
||||
>
|
||||
<span>
|
||||
{label}
|
||||
|
|
@ -157,7 +157,7 @@ function FilterDropdown({
|
|||
ref={refs.setFloating}
|
||||
style={floatingStyles}
|
||||
{...getFloatingProps()}
|
||||
className="rounded border border-cl1-gray-8 bg-cl1-white p-4 shadow-md dark:border-cl1-gray-1 dark:bg-cl1-gray-0"
|
||||
className="border-cl1-gray-8 bg-cl1-white dark:border-cl1-gray-1 dark:bg-cl1-gray-0 rounded-sm border p-4 shadow-md"
|
||||
>
|
||||
<div className="max-h-60 space-y-2 overflow-y-auto">
|
||||
{items.map((item) => (
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
pcx_content_type: navigation
|
||||
title: Learning paths
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ const props = {
|
|||
|
||||
return (
|
||||
<div
|
||||
class="!mt-0 sm:flex"
|
||||
class="mt-0! sm:flex"
|
||||
data-products={JSON.stringify(
|
||||
productIds.concat(
|
||||
productGroups.map((group) =>
|
||||
|
|
@ -67,13 +67,13 @@ const props = {
|
|||
{date}
|
||||
</time>
|
||||
<Steps>
|
||||
<ol class="!mt-0 overflow-x-auto">
|
||||
<li class="!pb-16">
|
||||
<ol class="mt-0! overflow-x-auto">
|
||||
<li class="pb-16!">
|
||||
<div>
|
||||
<h3 class="leading-none">
|
||||
<a
|
||||
href={`/changelog/${entry.id}/`}
|
||||
class="mb-4 !text-black no-underline hover:underline"
|
||||
class="mb-4 text-black! no-underline hover:underline"
|
||||
>
|
||||
{entry.data.title}
|
||||
</a>
|
||||
|
|
@ -91,7 +91,7 @@ const props = {
|
|||
<div class="flex items-center justify-center">
|
||||
<button
|
||||
id="changelogs-next-button"
|
||||
class="h-12 cursor-pointer rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black"
|
||||
class="h-12 cursor-pointer rounded-sm bg-cl1-brand-orange px-6 font-medium text-cl1-black"
|
||||
>
|
||||
Load more items
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -217,7 +217,7 @@ const recommendedSection = {
|
|||
<a
|
||||
href={link.href}
|
||||
target={link.target}
|
||||
class="!text-black hover:!text-accent dark:!text-accent-high dark:hover:!text-black"
|
||||
class="text-black! hover:text-accent! dark:text-accent-high! dark:hover:text-black!"
|
||||
>
|
||||
{link.text}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -21,87 +21,87 @@ import { ProductFeatures } from "~/components";
|
|||
</p>
|
||||
|
||||
<h2 id="account">Account</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="account" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="analytics">Analytics</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="analytics" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="cache">Cache</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="cache" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="dns">DNS</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="dns" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="email">Email</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="email" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="global_configurations">Global configurations</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="global_configurations" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="network">Network</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="network" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="rules">Rules</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="rules" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="scrapeshield">Scrape Shield</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="scrape_shield" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="security">Security</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="security" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="spectrum">Spectrum</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="spectrum" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="speed">Speed</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="speed" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="ssl">SSL/TLS</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="ssl" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="support">Support</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="support" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="traffic">Traffic</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="traffic" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="web3">Web3</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="web3" additional_descriptions />
|
||||
</div>
|
||||
|
||||
<h2 id="zaraz">Zaraz</h2>
|
||||
<div class="grid grid-cols-2 *:!mt-0">
|
||||
<div class="grid grid-cols-2 *:mt-0!">
|
||||
<ProductFeatures id="zaraz" additional_descriptions />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const props = {
|
|||
<div>
|
||||
<h4 class="text-nowrap">{format(date, "do MMMM yyyy")}</h4>
|
||||
</div>
|
||||
<div class="!mt-0">
|
||||
<div class="mt-0!">
|
||||
{entries?.map(async (entry) => {
|
||||
let title = entry.title;
|
||||
let description = entry.description || "";
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const starlightPageProps = {
|
|||
<div>
|
||||
<h1
|
||||
id="_top"
|
||||
class="!-mt-4 !mb-2 flex items-center !text-2xl !font-bold !leading-none"
|
||||
class="-mt-4! mb-2! flex items-center text-2xl! font-bold! leading-none!"
|
||||
>
|
||||
{name}
|
||||
</h1>
|
||||
|
|
@ -120,7 +120,7 @@ const starlightPageProps = {
|
|||
)
|
||||
}
|
||||
|
||||
<div class="!mt-8">
|
||||
<div class="mt-8!">
|
||||
<span class="text-xs"
|
||||
>Categories: <FieldBadges badges={field.categories as string[]} /></span
|
||||
>
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ const starlightPageProps = {
|
|||
<div>
|
||||
<h1
|
||||
id="_top"
|
||||
class="!-mt-4 !mb-0 flex items-center !text-4xl !font-bold !leading-none"
|
||||
class="-mt-4! mb-0! flex items-center text-4xl! font-bold! leading-none!"
|
||||
>
|
||||
{name}
|
||||
{isBeta && <Badge text="Beta" variant="caution" class="ml-3 mt-2" />}
|
||||
|
|
@ -162,7 +162,7 @@ const starlightPageProps = {
|
|||
|
||||
<span class="mt-4 block font-mono text-sm text-gray-400">{model.name}</span>
|
||||
|
||||
<p class="!mb-2 mt-3">{description}</p>
|
||||
<p class="mb-2! mt-3">{description}</p>
|
||||
|
||||
{
|
||||
model.name === "@cf/meta/llama-3.2-11b-vision-instruct" && (
|
||||
|
|
|
|||
|
|
@ -88,10 +88,10 @@ export default () => {
|
|||
properties: {
|
||||
className: [
|
||||
"playground-frame",
|
||||
"!flex",
|
||||
"!p-4",
|
||||
"!justify-end",
|
||||
"!items-center",
|
||||
"flex!",
|
||||
"p-4!",
|
||||
"justify-end!",
|
||||
"items-center!",
|
||||
],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -100,13 +100,13 @@ export default () => {
|
|||
tagName: "a",
|
||||
properties: {
|
||||
className: [
|
||||
"!bg-cl1-brand-orange",
|
||||
"!rounded",
|
||||
"!px-6",
|
||||
"!py-2",
|
||||
"!text-cl1-black",
|
||||
"!font-medium",
|
||||
"!no-underline",
|
||||
"bg-cl1-brand-orange!",
|
||||
"rounded-sm!",
|
||||
"px-6!",
|
||||
"py-2!",
|
||||
"text-cl1-black!",
|
||||
"font-medium!",
|
||||
"no-underline!",
|
||||
],
|
||||
href: `https://workers.cloudflare.com/playground#${serialised}`,
|
||||
target: "_blank",
|
||||
|
|
|
|||
|
|
@ -19,33 +19,33 @@
|
|||
:root {
|
||||
.sl-badge {
|
||||
&.note {
|
||||
background-color: theme("colors.cl1.blue.8") !important;
|
||||
color: theme("colors.cl1.blue.2") !important;
|
||||
background-color: var(--color-cl1-blue-8) !important;
|
||||
color: var(--color-cl1-blue-2) !important;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: theme("colors.cl1.red.8") !important;
|
||||
color: theme("colors.cl1.red.2") !important;
|
||||
background-color: var(--color-cl1-red-8) !important;
|
||||
color: var(--color-cl1-red-2) !important;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: theme("colors.cl1.green.8") !important;
|
||||
color: theme("colors.cl1.green.2") !important;
|
||||
background-color: var(--color-cl1-green-8) !important;
|
||||
color: var(--color-cl1-green-2) !important;
|
||||
}
|
||||
|
||||
&.caution {
|
||||
background-color: theme("colors.cl1.orange.8") !important;
|
||||
color: theme("colors.cl1.orange.2") !important;
|
||||
background-color: var(--color-cl1-orange-8) !important;
|
||||
color: var(--color-cl1-orange-2) !important;
|
||||
}
|
||||
|
||||
&.tip {
|
||||
background-color: theme("colors.cl1.violet.8") !important;
|
||||
color: theme("colors.cl1.violet.1") !important;
|
||||
background-color: var(--color-cl1-violet-8) !important;
|
||||
color: var(--color-cl1-violet-1) !important;
|
||||
}
|
||||
|
||||
&.default {
|
||||
background-color: theme("colors.cl1.gray.9") !important;
|
||||
color: theme("colors.cl1.gray.2") !important;
|
||||
background-color: var(--color-cl1-gray-9) !important;
|
||||
color: var(--color-cl1-gray-2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -53,33 +53,33 @@
|
|||
:root[data-theme="dark"] {
|
||||
.sl-badge {
|
||||
&.note {
|
||||
background-color: theme("colors.cl1.blue.7") !important;
|
||||
color: theme("colors.cl1.blue.0") !important;
|
||||
background-color: var(--color-cl1-blue-7) !important;
|
||||
color: var(--color-cl1-blue-0) !important;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: theme("colors.cl1.red.8") !important;
|
||||
color: theme("colors.cl1.red.0") !important;
|
||||
background-color: var(--color-cl1-red-8) !important;
|
||||
color: var(--color-cl1-red-0) !important;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: theme("colors.cl1.green.7") !important;
|
||||
color: theme("colors.cl1.green.0") !important;
|
||||
background-color: var(--color-cl1-green-7) !important;
|
||||
color: var(--color-cl1-green-0) !important;
|
||||
}
|
||||
|
||||
&.caution {
|
||||
background-color: theme("colors.cl1.orange.8") !important;
|
||||
color: theme("colors.cl1.orange.0") !important;
|
||||
background-color: var(--color-cl1-orange-8) !important;
|
||||
color: var(--color-cl1-orange-0) !important;
|
||||
}
|
||||
|
||||
&.tip {
|
||||
background-color: theme("colors.cl1.violet.8") !important;
|
||||
color: theme("colors.cl1.violet.0") !important;
|
||||
background-color: var(--color-cl1-violet-8) !important;
|
||||
color: var(--color-cl1-violet-0) !important;
|
||||
}
|
||||
|
||||
&.default {
|
||||
background-color: theme("colors.cl1.gray.8") !important;
|
||||
color: theme("colors.cl1.gray.3") !important;
|
||||
background-color: var(--color-cl1-gray-8) !important;
|
||||
color: var(--color-cl1-gray-3) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,7 @@
|
|||
.c-breadcrumbs {
|
||||
--spacing-vertical-separator-breadcrumbs: 0.625rem;
|
||||
|
||||
padding: 0.5rem 0;
|
||||
|
||||
.c-breadcrumbs__link {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c-breadcrumbs__separator {
|
||||
color: theme("colors.cl1.brand.orange");
|
||||
}
|
||||
|
||||
.c-breadcrumbs__truncated-button {
|
||||
color: theme("colors.cl1.brand.orange");
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--color-link-breadcrumbs: theme("colors.cl1.gray.7");
|
||||
--color-link-breadcrumbs: var(--color-cl1-gray-7);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--color-link-breadcrumbs: theme("colors.cl1.gray.4");
|
||||
--color-link-breadcrumbs: var(--color-cl1-gray-4);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,9 +40,9 @@
|
|||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--pagination-arrow-color: theme("colors.cl1.gray.0");
|
||||
--pagination-arrow-color: var(--color-cl1-gray-0);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--pagination-arrow-color: theme("colors.cl1.gray.9");
|
||||
--pagination-arrow-color: var(--color-cl1-gray-9);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,12 +77,12 @@
|
|||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--sl-color-bg-sidebar: theme("colors.cl1.gray.0");
|
||||
--sl-color-sidebar-active: theme("colors.cl1.blue.7");
|
||||
--sl-color-sidebar-hover: theme("colors.cl1.gray.2");
|
||||
--sl-color-bg-sidebar: var(--color-cl1-gray-0);
|
||||
--sl-color-sidebar-active: var(--color-cl1-blue-7);
|
||||
--sl-color-sidebar-hover: var(--color-cl1-gray-2);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--sl-color-sidebar-active: theme("colors.cl1.blue.4");
|
||||
--sl-color-sidebar-hover: theme("colors.cl1.gray.9");
|
||||
--sl-color-sidebar-active: var(--color-cl1-blue-4);
|
||||
--sl-color-sidebar-hover: var(--color-cl1-gray-9);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,147 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@layer base, starlight, theme, components, utilities;
|
||||
|
||||
@import "@astrojs/starlight-tailwind";
|
||||
@import "tailwindcss/theme.css" layer(theme) source(none);
|
||||
@import "tailwindcss/utilities.css" layer(utilities) source(none);
|
||||
|
||||
@source "../**/*.{astro,html,js,jsx,ts,tsx,css}";
|
||||
@source not "../content/";
|
||||
|
||||
@theme {
|
||||
--color-black: var(--sl-color-white);
|
||||
|
||||
--color-accent-200: var(--tw-accent-200);
|
||||
--color-accent-600: var(--tw-accent-600);
|
||||
--color-accent-900: var(--tw-accent-900);
|
||||
--color-accent: var(--sl-color-accent);
|
||||
--color-accent-high: var(--tw-accent-200);
|
||||
|
||||
--color-sl: var(--sl-color-text);
|
||||
|
||||
--color-gray-100: #f6f6f6;
|
||||
--color-gray-200: #eeeeee;
|
||||
--color-gray-300: #c2c2c2;
|
||||
--color-gray-400: #8b8b8b;
|
||||
--color-gray-500: #585858;
|
||||
--color-gray-700: #383838;
|
||||
--color-gray-800: #272727;
|
||||
--color-gray-900: #181818;
|
||||
|
||||
--color-cl1-white: #fff;
|
||||
--color-cl1-black: #000;
|
||||
|
||||
--color-cl1-red-0: #3c0501;
|
||||
--color-cl1-red-1: #5a0801;
|
||||
--color-cl1-red-2: #780a02;
|
||||
--color-cl1-red-3: #970d02;
|
||||
--color-cl1-red-4: #b20f03;
|
||||
--color-cl1-red-5: #e81403;
|
||||
--color-cl1-red-6: #fc574a;
|
||||
--color-cl1-red-7: #fe9f97;
|
||||
--color-cl1-red-8: #feccc8;
|
||||
--color-cl1-red-9: #ffefee;
|
||||
|
||||
--color-cl1-orange-0: #361a02;
|
||||
--color-cl1-orange-1: #482303;
|
||||
--color-cl1-orange-2: #592b04;
|
||||
--color-cl1-orange-3: #763905;
|
||||
--color-cl1-orange-4: #8d4406;
|
||||
--color-cl1-orange-5: #c05d08;
|
||||
--color-cl1-orange-6: #ee730a;
|
||||
--color-cl1-orange-7: #f8a054;
|
||||
--color-cl1-orange-8: #fbcda5;
|
||||
--color-cl1-orange-9: #fef1e6;
|
||||
|
||||
--color-cl1-gold-0: #361a02;
|
||||
--color-cl1-gold-1: #3e2d00;
|
||||
--color-cl1-gold-2: #4c3700;
|
||||
--color-cl1-gold-3: #644900;
|
||||
--color-cl1-gold-4: #735400;
|
||||
--color-cl1-gold-5: #a77a00;
|
||||
--color-cl1-gold-6: #dda100;
|
||||
--color-cl1-gold-7: #ffce4b;
|
||||
--color-cl1-gold-8: #ffeab2;
|
||||
--color-cl1-gold-9: #fff8e4;
|
||||
|
||||
--color-cl1-green-0: #0a2614;
|
||||
--color-cl1-green-1: #0e381d;
|
||||
--color-cl1-green-2: #104122;
|
||||
--color-cl1-green-3: #15562d;
|
||||
--color-cl1-green-4: #196535;
|
||||
--color-cl1-green-5: #228b49;
|
||||
--color-cl1-green-6: #2db35e;
|
||||
--color-cl1-green-7: #55d584;
|
||||
--color-cl1-green-8: #a8e9c0;
|
||||
--color-cl1-green-9: #e3f8eb;
|
||||
|
||||
--color-cl1-cyan-0: #061b20;
|
||||
--color-cl1-cyan-1: #0b333e;
|
||||
--color-cl1-cyan-2: #0d3e4b;
|
||||
--color-cl1-cyan-3: #115061;
|
||||
--color-cl1-cyan-4: #156074;
|
||||
--color-cl1-cyan-5: #1e89a5;
|
||||
--color-cl1-cyan-6: #30b6da;
|
||||
--color-cl1-cyan-7: #73cee6;
|
||||
--color-cl1-cyan-8: #ace2f0;
|
||||
--color-cl1-cyan-9: #e9f7fb;
|
||||
|
||||
--color-cl1-blue-0: #001c43;
|
||||
--color-cl1-blue-1: #002b67;
|
||||
--color-cl1-blue-2: #003681;
|
||||
--color-cl1-blue-3: #0045a6;
|
||||
--color-cl1-blue-4: #0051c3;
|
||||
--color-cl1-blue-5: #086fff;
|
||||
--color-cl1-blue-6: #4693ff;
|
||||
--color-cl1-blue-7: #82b6ff;
|
||||
--color-cl1-blue-8: #b9d6ff;
|
||||
--color-cl1-blue-9: #ecf4ff;
|
||||
|
||||
--color-cl1-indigo-0: #170f58;
|
||||
--color-cl1-indigo-1: #221785;
|
||||
--color-cl1-indigo-2: #2c1ea9;
|
||||
--color-cl1-indigo-3: #3524cd;
|
||||
--color-cl1-indigo-4: #4b3bdc;
|
||||
--color-cl1-indigo-5: #7366e4;
|
||||
--color-cl1-indigo-6: #9d94ec;
|
||||
--color-cl1-indigo-7: #c2bdf3;
|
||||
--color-cl1-indigo-8: #dfdcf9;
|
||||
--color-cl1-indigo-9: #f1f0fc;
|
||||
|
||||
--color-cl1-violet-0: #350b42;
|
||||
--color-cl1-violet-1: #490f5c;
|
||||
--color-cl1-violet-2: #5f1477;
|
||||
--color-cl1-violet-3: #741892;
|
||||
--color-cl1-violet-4: #8d1eb1;
|
||||
--color-cl1-violet-5: #b73cdf;
|
||||
--color-cl1-violet-6: #cf7ee9;
|
||||
--color-cl1-violet-7: #dfa8f1;
|
||||
--color-cl1-violet-8: #ebcaf6;
|
||||
--color-cl1-violet-9: #f7eafb;
|
||||
|
||||
--color-cl1-pink-0: #2d0210;
|
||||
--color-cl1-pink-1: #4e031c;
|
||||
--color-cl1-pink-2: #6a0426;
|
||||
--color-cl1-pink-3: #8d0633;
|
||||
--color-cl1-pink-4: #af0740;
|
||||
--color-cl1-pink-5: #e80954;
|
||||
--color-cl1-pink-6: #f85189;
|
||||
--color-cl1-pink-7: #fb97b9;
|
||||
--color-cl1-pink-8: #fdc9db;
|
||||
--color-cl1-pink-9: #fef1f5;
|
||||
|
||||
--color-cl1-gray-0: #1d1d1d;
|
||||
--color-cl1-gray-1: #313131;
|
||||
--color-cl1-gray-2: #3d3d3d;
|
||||
--color-cl1-gray-3: #4a4a4a;
|
||||
--color-cl1-gray-4: #595959;
|
||||
--color-cl1-gray-5: #797979;
|
||||
--color-cl1-gray-6: #999999;
|
||||
--color-cl1-gray-7: #b6b6b6;
|
||||
--color-cl1-gray-8: #d9d9d9;
|
||||
--color-cl1-gray-9: #f2f2f2;
|
||||
|
||||
--color-cl1-brand-orange: #f6821f;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ export async function entryToString(
|
|||
});
|
||||
container.addServerRenderer({
|
||||
name: "@astrojs/react",
|
||||
// @ts-expect-error incompatible types
|
||||
renderer: reactRenderer,
|
||||
});
|
||||
|
||||
|
|
@ -43,6 +44,7 @@ export async function componentToString(
|
|||
});
|
||||
container.addServerRenderer({
|
||||
name: "@astrojs/react",
|
||||
// @ts-expect-error incompatible types
|
||||
renderer: reactRenderer,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,168 +0,0 @@
|
|||
// @ts-check
|
||||
import starlightPlugin from "@astrojs/starlight-tailwind";
|
||||
|
||||
const gray = {
|
||||
100: "#f6f6f6",
|
||||
200: "#eeeeee",
|
||||
300: "#c2c2c2",
|
||||
400: "#8b8b8b",
|
||||
500: "#585858",
|
||||
700: "#383838",
|
||||
800: "#272727",
|
||||
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}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
black: {
|
||||
DEFAULT: "var(--sl-color-white)",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "var(--sl-color-accent)",
|
||||
high: "var(--tw-accent-200)",
|
||||
200: "var(--tw-accent-200)",
|
||||
600: "var(--tw-accent-600)",
|
||||
900: "var(--tw-accent-900)",
|
||||
},
|
||||
sl: {
|
||||
DEFAULT: "var(--sl-color-text)",
|
||||
},
|
||||
gray,
|
||||
cl1,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [starlightPlugin()],
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue