Skip to content

Commit cfedf26

Browse files
KianNHKianNH
authored
[Docs Site] Adopt new footer styling (#20708)
1 parent f4df6f0 commit cfedf26

File tree

2 files changed

+55
-107
lines changed

2 files changed

+55
-107
lines changed

‎src/components/homepage/FooterHeroBlock.astro‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,7 @@ const blocks = [
5858
] as const;
5959
---
6060

61-
<div
62-
class="bleed flex items-start justify-between bg-gray-100 py-10 *:!mt-0 dark:bg-gray-800"
63-
>
61+
<div class="flex items-start justify-between py-10 *:!mt-0">
6462
{
6563
blocks.map(({ title, text, links }) => (
6664
<div>
@@ -84,19 +82,3 @@ const blocks = [
8482
))
8583
}
8684
</div>
87-
88-
<style>
89-
@tailwind utilities;
90-
91-
.bleed {
92-
box-shadow: 0 0 0 100vmax theme(colors.gray.800);
93-
clip-path: inset(0 -100vmax);
94-
}
95-
96-
html[data-theme="light"] {
97-
.bleed {
98-
box-shadow: 0 0 0 100vmax theme(colors.gray.100);
99-
clip-path: inset(0 -100vmax);
100-
}
101-
}
102-
</style>

‎src/components/overrides/Footer.astro‎

Lines changed: 54 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,8 @@
22
import Default from "@astrojs/starlight/components/Footer.astro";
33
import OneTrust from "../OneTrust.astro";
44
import FeedbackPrompt from "../FeedbackPrompt.tsx";
5-
import { getEntry } from "astro:content";
65
7-
let links = {
8-
"Cloudflare Dashboard": "https://dash.cloudflare.com",
9-
Discord: "https://discord.cloudflare.com",
10-
Community: "https://community.cloudflare.com",
11-
"Learning Center": "https://www.cloudflare.com/learning/",
12-
"Support Portal": "/support/contacting-cloudflare-support/",
13-
};
14-
15-
const currentSection = Astro.params.slug?.split("/")[0];
16-
17-
if (currentSection) {
18-
const product = await getEntry("products", currentSection);
19-
20-
if (product) {
21-
if (product.data.resources?.dashboard_link) {
22-
links["Cloudflare Dashboard"] = product.data.resources.dashboard_link;
23-
}
24-
}
25-
}
26-
27-
const homepageLinks = Object.entries({
6+
const groups = Object.entries({
287
Resources: [
298
{ text: "API", href: "/api/" },
309
{
@@ -61,14 +40,15 @@ const homepageLinks = Object.entries({
6140
],
6241
});
6342
64-
const homepageLegalLinks = Object.entries({
43+
const links = Object.entries({
6544
"Privacy Policy": "https://www.cloudflare.com/privacypolicy/",
6645
"Terms of Use": "https://www.cloudflare.com/website-terms/",
6746
"Report Security Issues": "https://www.cloudflare.com/disclosure/",
6847
Trademark: "https://www.cloudflare.com/trademark/",
6948
});
7049
71-
const isHomepage = Astro.locals.starlightRoute.id === "";
50+
const homepage = Astro.locals.starlightRoute.entry.id === "";
51+
const splash = Astro.locals.starlightRoute.entry.data.template === "splash";
7252
7353
let isProduction = false;
7454
@@ -81,76 +61,67 @@ if (
8161
---
8262

8363
{
84-
isHomepage ? (
85-
<>
86-
<div class="bleed !mt-0">
87-
<div class="flex flex-wrap justify-between bg-[#001C43] py-6">
88-
{homepageLinks.map(([header, links]) => (
89-
<div class="basis-1/2 md:basis-auto">
90-
<strong class="text-gray-400">{header}</strong>
91-
<ul class="list-none pl-0">
92-
{links.map((link) => (
93-
<li>
94-
<a href={link.href} class="text-white no-underline">
95-
{link.text}
96-
</a>
97-
</li>
98-
))}
99-
</ul>
100-
</div>
101-
))}
102-
</div>
103-
</div>
104-
<div>
105-
<ul class="flex list-outside justify-center gap-x-4 pl-0 text-xs text-gray-600 dark:!text-gray-400">
106-
<li class="list-none text-gray-600 dark:text-gray-400">
107-
2024 Cloudflare, Inc.
64+
!homepage && (
65+
<div class="feedback-prompt">
66+
<FeedbackPrompt client:idle />
67+
</div>
68+
)
69+
}
70+
{!splash && <Default />}
71+
<div class="w-full">
72+
<div class="grid grid-cols-2 gap-8 pb-10 pt-6 md:grid-cols-4">
73+
{
74+
groups.map(([title, items]) => (
75+
<ul class="flex w-full list-none flex-col gap-3 pl-0">
76+
<li class="text-xs leading-5">
77+
<strong>{title}</strong>
10878
</li>
109-
{homepageLegalLinks.map(([text, href]) => (
110-
<li>
111-
<a
112-
href={href}
113-
class="text-gray-600 no-underline dark:!text-gray-400"
114-
>
115-
{text}
79+
{items.map((link) => (
80+
<li class="text-sm">
81+
<a href={link.href} class="!text-black no-underline">
82+
{link.text}
11683
</a>
11784
</li>
11885
))}
119-
<li class="text-gray-600 dark:!text-gray-400">
120-
{isProduction && <OneTrust />}
121-
</li>
12286
</ul>
123-
</div>
124-
</>
125-
) : (
126-
<div>
127-
<div class="feedback-prompt">
128-
<FeedbackPrompt client:idle />
129-
</div>
130-
<Default />
131-
<div id="footer-links" class="mt-6 flex flex-wrap items-center space-x-4">
132-
{Object.entries(links).map(([text, href]) => (
133-
<a href={href} class="text-xs text-black decoration-accent">
134-
<span>{text}</span>
135-
</a>
136-
))}
137-
{isProduction && (
138-
<div class="text-xs text-black [&>button]:underline [&>button]:decoration-accent">
87+
))
88+
}
89+
</div>
90+
<div>
91+
<ul
92+
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"
93+
>
94+
<li class="list-none">2025 Cloudflare, Inc.</li>
95+
{
96+
links.map(([text, href]) => (
97+
<li>
98+
<a
99+
href={href}
100+
class="!text-cl1-gray-4 no-underline dark:!text-cl1-gray-7"
101+
>
102+
{text}
103+
</a>
104+
</li>
105+
))
106+
}
107+
{
108+
isProduction && (
109+
<li>
139110
<OneTrust />
140-
</div>
141-
)}
142-
</div>
143-
</div>
144-
)
145-
}
111+
</li>
112+
)
113+
}
114+
</ul>
115+
</div>
116+
</div>
146117

147118
<style>
148119
:global(footer) {
149120
flex-direction: column-reverse !important;
150-
}
151121

152-
:global(.meta) {
153-
margin-top: 0 !important;
122+
.meta {
123+
margin-top: 0 !important;
124+
}
154125
}
155126

156127
.feedback-prompt {
@@ -170,9 +141,4 @@ if (
170141
}
171142
}
172143
}
173-
174-
.bleed {
175-
box-shadow: 0 0 0 100vmax #001c43 !important;
176-
clip-path: inset(0 -100vmax);
177-
}
178144
</style>

0 commit comments

Comments
 (0)