Skip to content

Commit c2b5e22

Browse files
KianNHKianNH
authored
[Docs Site] Adopt new header styling (#20630)
1 parent 4774bb4 commit c2b5e22

File tree

7 files changed

+229
-45
lines changed

7 files changed

+229
-45
lines changed

‎astro.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,11 +103,11 @@ export default defineConfig({
103103
components: {
104104
Footer: "./src/components/overrides/Footer.astro",
105105
Head: "./src/components/overrides/Head.astro",
106+
Header: "./src/components/overrides/Header.astro",
106107
Hero: "./src/components/overrides/Hero.astro",
107108
MarkdownContent: "./src/components/overrides/MarkdownContent.astro",
108109
Sidebar: "./src/components/overrides/Sidebar.astro",
109110
PageTitle: "./src/components/overrides/PageTitle.astro",
110-
SocialIcons: "./src/components/overrides/SocialIcons.astro",
111111
TableOfContents: "./src/components/overrides/TableOfContents.astro",
112112
},
113113
sidebar,

‎package-lock.json‎

Lines changed: 66 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"@cloudflare/workers-types": "4.20250303.0",
4141
"@codingheads/sticky-header": "1.0.2",
4242
"@expressive-code/plugin-collapsible-sections": "0.40.2",
43+
"@floating-ui/react": "0.27.5",
4344
"@iarna/toml": "2.2.5",
4445
"@marsidev/react-turnstile": "1.1.0",
4546
"@octokit/webhooks-types": "7.6.1",

‎src/components/HeaderDropdowns.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import {
2+
useFloating,
3+
useInteractions,
4+
useClick,
5+
useDismiss,
6+
shift,
7+
offset,
8+
autoUpdate,
9+
} from "@floating-ui/react";
10+
import { useState } from "react";
11+
import { PiCaretDownBold } from "react-icons/pi";
12+
13+
const dropdowns = Object.entries({
14+
"API & SDKs": [
15+
{
16+
label: "API documentation",
17+
href: "https://developers.cloudflare.com/api/",
18+
},
19+
{ label: "SDKs", href: "/fundamentals/api/reference/sdks/" },
20+
],
21+
Help: [
22+
{ label: "Help center", href: "https://support.cloudflare.com/" },
23+
{ label: "Cloudflare status", href: "https://www.cloudflarestatus.com/" },
24+
{ label: "Community", href: "https://community.cloudflare.com/" },
25+
],
26+
});
27+
28+
function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
29+
const [label, pages] = dropdown;
30+
const [isOpen, setIsOpen] = useState(false);
31+
32+
const { refs, floatingStyles, context } = useFloating({
33+
open: isOpen,
34+
onOpenChange: setIsOpen,
35+
middleware: [shift(), offset(5)],
36+
whileElementsMounted: autoUpdate,
37+
});
38+
39+
const click = useClick(context);
40+
const dismiss = useDismiss(context);
41+
42+
const { getReferenceProps, getFloatingProps } = useInteractions([
43+
click,
44+
dismiss,
45+
]);
46+
47+
return (
48+
<>
49+
<button
50+
ref={refs.setReference}
51+
{...getReferenceProps()}
52+
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"
53+
>
54+
{label}
55+
<PiCaretDownBold />
56+
</button>
57+
{isOpen && (
58+
<ul
59+
ref={refs.setFloating}
60+
style={floatingStyles}
61+
{...getFloatingProps()}
62+
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"
63+
>
64+
{pages.map((page) => (
65+
<li key={page.href}>
66+
<a
67+
href={page.href}
68+
className="8 block p-3 text-black no-underline hover:bg-cl1-gray-9 dark:hover:bg-cl1-gray-1"
69+
target={page.href.startsWith("https") ? "_blank" : undefined}
70+
>
71+
{page.label}
72+
</a>
73+
</li>
74+
))}
75+
</ul>
76+
)}
77+
</>
78+
);
79+
}
80+
81+
export default function HeaderDropdownsComponent() {
82+
return (
83+
<div className="flex gap-2 text-nowrap leading-6">
84+
<a
85+
href="/products/"
86+
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"
87+
>
88+
Docs Directory
89+
</a>
90+
{dropdowns.map((dropdown) => (
91+
<Dropdown key={dropdown[0]} dropdown={dropdown} />
92+
))}
93+
</div>
94+
);
95+
}

‎src/components/overrides/Header.astro‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
3+
import DocSearch from "@astrojs/starlight-docsearch/DocSearch.astro";
4+
import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
5+
import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
6+
import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
7+
8+
import HeaderDropdowns from "../HeaderDropdowns.tsx";
9+
---
10+
11+
<div class="flex h-full items-center justify-between gap-4">
12+
<SiteTitle />
13+
<div class="flex gap-8">
14+
<div id="docsearch">
15+
<DocSearch />
16+
</div>
17+
<div id="right-group" class="hidden h-10 flex-wrap gap-x-8 overflow-hidden">
18+
<HeaderDropdowns client:idle />
19+
<a
20+
href="https://dash.cloudflare.com/"
21+
class="flex items-center justify-center rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black no-underline"
22+
>
23+
Sign up / Log in
24+
</a>
25+
<div id="social-icons" class="flex items-center gap-4">
26+
<SocialIcons />
27+
</div>
28+
<ThemeSelect />
29+
<LanguageSelect />
30+
</div>
31+
</div>
32+
</div>
33+
34+
<style>
35+
:global(.site-title) {
36+
gap: 0.5rem;
37+
min-width: fit-content;
38+
overflow: none;
39+
40+
span {
41+
color: var(--sl-color-white);
42+
}
43+
44+
img {
45+
height: 1.25rem;
46+
}
47+
}
48+
49+
#social-icons {
50+
--sl-icon-color: var(--sl-color-white);
51+
}
52+
53+
:global(starlight-theme-select > label > select) {
54+
line-height: 1.25rem;
55+
}
56+
57+
@media screen and (min-width: 800px) {
58+
#right-group {
59+
display: flex;
60+
}
61+
62+
#docsearch {
63+
width: 20rem;
64+
}
65+
}
66+
</style>

‎src/components/overrides/SocialIcons.astro‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/styles/title.css‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)