Skip to content

feat(docs): support dark mode styling #550

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
NuroDev wants to merge 1 commit into from
Closed

feat(docs): support dark mode styling #550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion apps/docs/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@ export default defineConfig({
integrations: [mdx()],
markdown: {
shikiConfig: {
theme: 'github-light',
defaultColor: 'light-dark()',
themes: {
dark: 'github-dark',
light: 'github-light',
},
transformers: [
{
name: 'code-block-title',
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/src/components/docs/Callout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ interface Props {
const { kind = 'note', title = kind === 'tip' ? 'Tip' : kind === 'warning' ? 'Caution' : 'Note' } = Astro.props;
---

<aside class:list={['my-6 rounded-lg border p-4', { 'border-transparent bg-blue-50': kind === 'note', 'border-docs-tip-border bg-docs-tip': kind === 'tip', 'border-docs-warning-border bg-docs-warning': kind === 'warning' }]} aria-label={title}>
<p class="mb-3 text-xs font-bold tracking-wider leading-none text-gray-700 uppercase">{title}</p>
<div class="m-0 leading-relaxed text-gray-700 [&_p]:m-0">
<aside class:list={['my-6 rounded-lg border p-4', { 'border-transparent bg-docs-note': kind === 'note', 'border-docs-tip-border bg-docs-tip': kind === 'tip', 'border-docs-warning-border bg-docs-warning': kind === 'warning' }]} aria-label={title}>
<p class="mb-3 text-xs font-bold tracking-wider leading-none text-zinc-700 dark:text-zinc-300 uppercase">{title}</p>
<div class="m-0 leading-relaxed text-zinc-700 dark:text-zinc-300 [&_p]:m-0">
<slot />
</div>
</aside>
6 changes: 3 additions & 3 deletions apps/docs/src/components/docs/CopyPrompt.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ interface Props {
const { text } = Astro.props;
---

<div class="my-5 rounded-[0.3rem] border border-[#37383e] bg-[#161616] px-5 py-4 font-mono text-[0.77rem] leading-[1.7] text-gray-200" data-copy-prompt>
<div class="my-5 rounded-[0.3rem] border border-[#37383e] bg-[#161616] px-5 py-4 font-mono text-[0.77rem] leading-[1.7] text-zinc-200 dark:text-zinc-300" data-copy-prompt>
<div class="flex min-w-0 flex-col items-start gap-4 sm:mx-auto sm:w-fit sm:max-w-full sm:flex-row sm:items-center sm:gap-5">
<button class="order-2 flex shrink-0 cursor-pointer items-center gap-[0.45rem] rounded-[0.3rem] border border-[#4b4c51] bg-[#313136] px-[0.62rem] py-[0.34rem] text-inherit transition-colors hover:border-[#62636a] hover:bg-[#3b3c42] sm:order-1" type="button" aria-label="Copy prompt">
<svg class="size-[0.95rem] fill-current" viewBox="0 0 640 640" aria-hidden="true"><path d="M288 64C252.7 64 224 92.7 224 128L224 384C224 419.3 252.7 448 288 448L480 448C515.3 448 544 419.3 544 384L544 183.4C544 166 536.9 149.3 524.3 137.2L466.6 81.8C454.7 70.4 438.8 64 422.3 64L288 64zM160 192C124.7 192 96 220.7 96 256L96 512C96 547.3 124.7 576 160 576L352 576C387.3 576 416 547.3 416 512L416 496L352 496L352 512L160 512L160 256L176 256L176 192L160 192z"/></svg>
<span data-copy-prompt-label>Copy Prompt</span>
</button>
<p class="order-1 !m-0 min-w-0 max-w-full text-left text-gray-200 sm:order-2 sm:w-[20rem] sm:text-balance sm:text-center">
<span aria-hidden="true" class="text-gray-400">“</span><span data-copy-prompt-text>{text}</span><span aria-hidden="true" class="text-gray-400">”</span>
<p class="order-1 !m-0 min-w-0 max-w-full text-left text-zinc-200 dark:text-zinc-300 sm:order-2 sm:w-[20rem] sm:text-balance sm:text-center">
<span aria-hidden="true" class="text-zinc-400 dark:text-zinc-500">“</span><span data-copy-prompt-text>{text}</span><span aria-hidden="true" class="text-zinc-400 dark:text-zinc-500">”</span>
</p>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/src/components/docs/DocsCover.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ const config = variant === 'agents'
: { shape: 'sphere', scale: '1.02', patternId: 'workflowsCoverGrid' };
---

<div class="relative mb-8 flex h-[200px] items-center justify-center overflow-hidden rounded-sm border border-slate-300 bg-[#e9eef4] max-docs-desktop:mb-6 max-docs-desktop:h-[168px]" aria-hidden="true">
<div class="relative mb-8 flex h-[200px] items-center justify-center overflow-hidden rounded-sm border border-zinc-300 bg-zinc-200 text-zinc-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 max-docs-desktop:mb-6 max-docs-desktop:h-[168px]" aria-hidden="true">
<svg class="absolute inset-0 size-full">
<defs>
<pattern id={config.patternId} width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M20 0H0V20" fill="none" stroke="#64748b" stroke-opacity="0.72" stroke-width="0.8" stroke-dasharray="1 2" />
<path d="M20 0H0V20" fill="none" stroke="currentColor" stroke-opacity="0.72" stroke-width="0.8" stroke-dasharray="1 2" />
</pattern>
</defs>
<rect width="100%" height="100%" fill={`url(#${config.patternId})`} />
Expand Down
8 changes: 4 additions & 4 deletions apps/docs/src/components/docs/DocsHeader.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const githubUrl = 'https://github.com/withastro/flue';
const activeSection = getDocsSection(currentSlug);
---

<header class="sticky top-0 z-20 border-b border-gray-200 bg-white/80 font-[system-ui,sans-serif] backdrop-blur-sm">
<header class="sticky top-0 z-20 border-b border-zinc-200 bg-white/80 font-[system-ui,sans-serif] backdrop-blur-sm dark:border-zinc-800 dark:bg-zinc-950/80">
<div class="mx-auto flex h-14 w-[min(100%,var(--docs-frame-width))] items-center justify-between px-5">
<div class="flex h-full shrink-0 items-center gap-8">
<div class="shrink-0">
Expand All @@ -24,7 +24,7 @@ const activeSection = getDocsSection(currentSlug);
<rect width="18" height="18" transform="matrix(-1 0 0 1 54 36)" fill="white"/>
<rect width="18" height="18" transform="matrix(-1 0 0 1 72 54)" fill="white"/>
</svg>
<span class="text-2xl font-extrabold tracking-tight text-gray-950 leading-8">Flue</span>
<span class="text-2xl font-extrabold tracking-tight text-zinc-950 dark:text-zinc-50 leading-8">Flue</span>
</a>
</div>
<nav class="hidden h-full items-center gap-7 text-sm font-medium docs-desktop:flex" aria-label="Documentation sections">
Expand All @@ -33,10 +33,10 @@ const activeSection = getDocsSection(currentSlug);
</div>
<div class="ml-auto flex min-w-0 flex-1 items-center justify-end gap-3 pl-6 docs-desktop:gap-5 docs-desktop:pl-0">
<DocsSearch />
<a href={githubUrl} target="_blank" rel="noopener noreferrer" class="hidden text-gray-500 transition-colors hover:text-gray-950 focus-visible:text-gray-950 docs-desktop:inline-flex" aria-label="GitHub">
<a href={githubUrl} target="_blank" rel="noopener noreferrer" class="hidden text-zinc-500 transition-colors hover:text-zinc-950 focus-visible:text-zinc-950 dark:text-zinc-400 dark:hover:text-zinc-50 dark:focus-visible:text-zinc-50 docs-desktop:inline-flex" aria-label="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12Z" /></svg>
</a>
<button class="inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-gray-600 transition-colors hover:bg-docs-code hover:text-gray-950 docs-desktop:hidden" type="button" data-mobile-menu-toggle aria-label="Open documentation menu" aria-expanded="false" aria-controls="mobile-docs-menu">
<button class="inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-zinc-600 dark:text-zinc-400 transition-colors hover:bg-docs-code hover:text-zinc-950 dark:hover:text-zinc-50 docs-desktop:hidden" type="button" data-mobile-menu-toggle aria-label="Open documentation menu" aria-expanded="false" aria-controls="mobile-docs-menu">
<svg class="size-6 fill-none stroke-current [stroke-linecap:round] [stroke-linejoin:round] [stroke-width:1.8]" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" /></svg>
</button>
</div>
Expand Down
8 changes: 4 additions & 4 deletions apps/docs/src/components/docs/DocsSearch.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
import SearchIcon from './SearchIcon.astro';
---

<button class="inline-flex w-50 cursor-pointer items-center gap-2 rounded-lg border border-transparent bg-docs-code py-1.5 transition-colors duration-150 pr-2 pl-3 text-sm leading-none text-gray-600 hover:border-gray-400 hover:text-gray-950 max-docs-desktop:h-9 max-docs-desktop:w-full max-docs-desktop:min-w-0 max-docs-desktop:border-docs-border max-docs-desktop:px-3" type="button" data-search-open aria-label="Search documentation" aria-haspopup="dialog" aria-controls="docs-search-dialog">
<button class="inline-flex w-50 cursor-pointer items-center gap-2 rounded-lg border border-transparent bg-docs-code py-1.5 transition-colors duration-150 pr-2 pl-3 text-sm leading-none text-zinc-600 dark:text-zinc-400 hover:border-zinc-400 dark:hover:border-zinc-500 hover:text-zinc-950 dark:hover:text-zinc-50 max-docs-desktop:h-9 max-docs-desktop:w-full max-docs-desktop:min-w-0 max-docs-desktop:border-docs-border max-docs-desktop:px-3" type="button" data-search-open aria-label="Search documentation" aria-haspopup="dialog" aria-controls="docs-search-dialog">
<SearchIcon />
<span class="text-gray-500">Search</span>
<kbd class="ml-auto rounded-md py-1 px-1.5 font-sans text-xs text-gray-400 max-docs-desktop:hidden">⌘ K</kbd>
<span class="text-zinc-500 dark:text-zinc-400">Search</span>
<kbd class="ml-auto rounded-md py-1 px-1.5 font-sans text-xs text-zinc-400 dark:text-zinc-500 max-docs-desktop:hidden">⌘ K</kbd>
</button>

<dialog id="docs-search-dialog" class="fixed top-18 m-auto w-[min(620px,calc(100%-2rem))] rounded-xl border-0 bg-white p-0 shadow-[0_20px_65px_rgb(15_23_42_/_24%)] backdrop:bg-[rgb(15_23_42_/_32%)] max-docs-desktop:top-2.5 max-docs-desktop:w-[calc(100%-1.25rem)]" aria-label="Search documentation">
<dialog id="docs-search-dialog" class="fixed top-18 m-auto w-[min(620px,calc(100%-2rem))] rounded-xl border-0 bg-white dark:bg-zinc-950 p-0 shadow-[0_20px_65px_rgb(15_23_42_/_24%)] backdrop:bg-[rgb(15_23_42_/_32%)] max-docs-desktop:top-2.5 max-docs-desktop:w-[calc(100%-1.25rem)]" aria-label="Search documentation">
<div class="overflow-hidden rounded-[inherit]" data-search-panel>
<form class="flex items-center gap-3 border-b border-docs-border p-3" method="dialog">
<label class="flex flex-1 items-center gap-3 text-docs-subtle">
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/src/components/docs/DocsSectionLink.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ const { section, active, mobile = false } = Astro.props;

<a
class:list={[
mobile ? 'text-sm font-medium' : 'relative flex h-full items-center gap-2 hover:text-blue-600',
active ? 'text-blue-600' : 'text-docs-muted',
mobile ? 'text-sm font-medium' : 'relative flex h-full items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400',
active ? 'text-blue-600 dark:text-blue-400' : 'text-docs-muted',
{ 'after:absolute after:right-0 after:-bottom-px after:left-0 after:h-0.5 after:bg-blue-500 after:content-[\'\']': active && !mobile },
]}
href={docsHref(section.landingSlug)}
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/components/docs/DocsSidebarGroup.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3';
---

<section class:list={[mobile ? 'pb-3 [&+&]:pt-3' : 'pb-6 [&+&]:pt-1.5']}>
{group.title && <Heading class="mb-2 text-sm font-semibold tracking-normal text-gray-700">{group.title}</Heading>}
{group.title && <Heading class="mb-2 text-sm font-semibold tracking-normal text-zinc-700 dark:text-zinc-300">{group.title}</Heading>}
<ul class="m-0 list-none p-0">
{group.items.map((item) => (
<li><DocsSidebarLink item={item} currentSlug={currentSlug} /></li>
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/src/components/docs/DocsSidebarLink.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const children = !external ? item.items : undefined;
---

<a
class:list={['group relative flex items-center py-1.5 text-sm font-normal leading-snug', active ? 'font-medium text-blue-600' : 'text-gray-600 hover:text-gray-950']}
class:list={['group relative flex items-center py-1.5 text-sm font-normal leading-snug', active ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-zinc-50']}
href={external ? item.href : docsHref(item.slug, item.anchor)}
target={external ? '_blank' : undefined}
rel={external ? 'noopener noreferrer' : undefined}
Expand All @@ -27,7 +27,7 @@ const children = !external ? item.items : undefined;
)}
{item.title}
{external && (
<svg class="ml-1.5 size-4 shrink-0 text-gray-400 group-hover:text-gray-950" viewBox="0 0 640 640" fill="currentColor" aria-hidden="true">
<svg class="ml-1.5 size-4 shrink-0 text-zinc-400 group-hover:text-zinc-950 dark:text-zinc-500 dark:group-hover:text-zinc-50" viewBox="0 0 640 640" fill="currentColor" aria-hidden="true">
<path d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z" />
</svg>
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/components/docs/DocsTableOfContents.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const { headings } = Astro.props;

{headings.length > 1 && (
<nav class="sticky top-[calc(var(--docs-header-height)+var(--docs-aside-top))] max-h-[calc(100vh-var(--docs-header-height)-var(--docs-aside-top)-2rem)] overflow-y-auto pr-2" aria-label="On this page">
<p class="mb-3 text-xs font-semibold tracking-wider text-gray-500 uppercase">On this page</p>
<p class="mb-3 text-xs font-semibold tracking-wider text-zinc-500 dark:text-zinc-400 uppercase">On this page</p>
<ul class="m-0 list-none p-0">
{headings.map((heading) => <DocsTocItem depth={heading.depth} slug={heading.slug} text={heading.text} />)}
</ul>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/components/docs/DocsTocItem.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ const { depth, slug, text } = Astro.props;
---

<li class:list={['[&+&]:mt-2.5 leading-none', { 'pl-3.5': depth === 3 }]}>
<a class="block text-sm text-gray-500 hover:text-gray-950" href={`#${slug}`}>{text}</a>
<a class="block text-sm text-zinc-500 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-zinc-50" href={`#${slug}`}>{text}</a>
</li>
2 changes: 1 addition & 1 deletion apps/docs/src/components/docs/MobileDocsNavigation.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface Props {
const { groups, currentSlug, sectionTitle } = Astro.props;
---

<div id="mobile-docs-menu" class="fixed inset-x-0 top-[var(--docs-header-height)] bottom-0 z-10 hidden overflow-y-auto bg-white px-4 py-4 docs-desktop:hidden" data-mobile-menu aria-hidden="true">
<div id="mobile-docs-menu" class="fixed inset-x-0 top-[var(--docs-header-height)] bottom-0 z-10 hidden overflow-y-auto bg-white dark:bg-zinc-950 px-4 py-4 docs-desktop:hidden" data-mobile-menu aria-hidden="true">
<nav class="mb-4 flex gap-4 border-b border-docs-border pb-3" aria-label="Documentation sections">
{docsSections.map((section) => <DocsSectionLink section={section} active={section.title === sectionTitle} mobile />)}
</nav>
Expand Down
23 changes: 14 additions & 9 deletions apps/docs/src/layouts/DocsLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ const formattedReviewedDate = lastReviewedAt?.toLocaleDateString('en-US', {
<link rel="apple-touch-icon" sizes="180x180" href={`${import.meta.env.BASE_URL}apple-touch-icon.png`} />
<link rel="manifest" href={`${import.meta.env.BASE_URL}site.webmanifest`} />
<meta name="generator" content={Astro.generator} />
<meta name="theme-color" content="#ffffff" />
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#09090b" media="(prefers-color-scheme: dark)" />
<meta name="description" content={pageDescription} />
<link rel="canonical" href={canonicalUrl} />
<meta property="og:type" content="website" />
Expand Down Expand Up @@ -110,23 +111,23 @@ const formattedReviewedDate = lastReviewedAt?.toLocaleDateString('en-US', {
variant === 'default' && (
<header class="mb-8 border-b border-docs-border pb-3 max-docs-desktop:mb-7">
{coverVariant && <DocsCover variant={coverVariant} />}
<h1 data-pagefind-body class="m-0 text-5xl font-bold leading-[1.08] tracking-[-0.05em] text-gray-950 max-docs-desktop:text-[2.375rem]">{title}</h1>
{subtitle && <p data-pagefind-body class="mt-4 mb-0 text-lg leading-7 text-gray-600">{subtitle}</p>}
<div class:list={['flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-gray-500 max-docs-desktop:gap-x-4 mt-4 max-docs-desktop:mt-3 place-content-between sm:place-content-start']}>
<h1 data-pagefind-body class="m-0 text-5xl font-bold leading-[1.08] tracking-[-0.05em] text-zinc-950 dark:text-zinc-50 max-docs-desktop:text-[2.375rem]">{title}</h1>
{subtitle && <p data-pagefind-body class="mt-4 mb-0 text-lg leading-7 text-zinc-600 dark:text-zinc-400">{subtitle}</p>}
<div class:list={['flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-zinc-500 dark:text-zinc-400 max-docs-desktop:gap-x-4 mt-4 max-docs-desktop:mt-3 place-content-between sm:place-content-start']}>
{
lastReviewedAt ? (
<span>Last updated <time datetime={reviewedDate} data-review-date title={formattedReviewedDate}>{formattedReviewedDate}</time></span>
) : (
<span>AI-generated, awaiting review</span>
)
}
<a class="inline-flex items-center gap-2 text-gray-500 transition-colors hover:text-gray-800" href={markdownUrl}>
<a class="inline-flex items-center gap-2 text-zinc-500 dark:text-zinc-400 transition-colors hover:text-zinc-800 dark:hover:text-zinc-200" href={markdownUrl}>
<svg class="size-[1.25rem] shrink-0 fill-current" aria-hidden="true" viewBox="0 0 640 640"><path d="M593.8 123.1L46.2 123.1C20.7 123.1 0 143.8 0 169.2L0 470.7C0 496.2 20.7 516.9 46.2 516.9L593.9 516.9C619.4 516.9 640.1 496.2 640 470.8L640 169.2C640 143.8 619.3 123.1 593.8 123.1zM338.5 424.6L277 424.6L277 304.6L215.5 381.5L154 304.6L154 424.6L92.3 424.6L92.3 215.4L153.8 215.4L215.3 292.3L276.8 215.4L338.3 215.4L338.3 424.6L338.5 424.6zM473.8 427.7L381.5 320L443 320L443 215.4L504.5 215.4L504.5 320L566 320L473.8 427.7z" /></svg>
View as Markdown
</a>
{
packageLink && (
<a class="inline-flex items-center gap-2 text-gray-500 transition-colors hover:text-gray-800" href={packageLink.href} target="_blank" rel="noopener noreferrer">
<a class="inline-flex items-center gap-2 text-zinc-500 dark:text-zinc-400 transition-colors hover:text-zinc-800 dark:hover:text-zinc-200" href={packageLink.href} target="_blank" rel="noopener noreferrer">
<svg class="h-[0.8rem] w-[2.05rem] shrink-0" aria-hidden="true" viewBox="0 0 18 7">
<path fill="currentColor" d="M0,0h18v6H9v1H5V6H0V0z M1,5h2V2h1v3h1V1H1V5z M6,1v5h2V5h2V1H6z M8,2h1v2H8V2z M11,1v4h2V2h1v3h1V2h1v3h1V1H11z" />
<polygon fill="#fff" points="1,5 3,5 3,2 4,2 4,5 5,5 5,1 1,1" />
Expand Down Expand Up @@ -174,9 +175,13 @@ const formattedReviewedDate = lastReviewedAt?.toLocaleDateString('en-US', {
const visuallyActive = pageActive || locationActive;
link.classList.toggle('font-medium', visuallyActive);
link.classList.toggle('text-blue-600', pageActive);
link.classList.toggle('text-black', locationActive);
link.classList.toggle('text-gray-600', !visuallyActive);
link.classList.toggle('hover:text-gray-950', !visuallyActive);
link.classList.toggle('dark:text-blue-400', pageActive);
link.classList.toggle('text-zinc-950', locationActive);
link.classList.toggle('dark:text-zinc-50', locationActive);
link.classList.toggle('text-zinc-600', !visuallyActive);
link.classList.toggle('dark:text-zinc-400', !visuallyActive);
link.classList.toggle('hover:text-zinc-950', !visuallyActive);
link.classList.toggle('dark:hover:text-zinc-50', !visuallyActive);
link.parentElement?.classList.toggle('docs-sidebar-location-active', locationActive);

if (locationActive) {
Expand Down
Loading
Loading