Skip to content

Commit 62bd515

Browse files
kodster28ahaywood
kodster28
and
ahaywood
authored
[Site] Restructure footer so semantic footer is within it (#28093)
* [Site] Restructure footer so semantic footer is within it * AI said this was okay, TBD if it's kosher * 🎨 Replace virtual Starlight component imports with direct imports --------- Co-authored-by: Amy Haywood Dutton <adutton@cloudflare.com>
1 parent 35a5482 commit 62bd515

File tree

1 file changed

+90
-60
lines changed

1 file changed

+90
-60
lines changed

‎src/components/overrides/Footer.astro‎

Lines changed: 90 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
---
2-
import Default from "@astrojs/starlight/components/Footer.astro";
32
import { Icon } from "@astrojs/starlight/components";
43
import type { StarlightIcon } from "@astrojs/starlight/types";
4+
import EditLink from "@astrojs/starlight/components/EditLink.astro";
5+
import LastUpdated from "@astrojs/starlight/components/LastUpdated.astro";
6+
import Pagination from "@astrojs/starlight/components/Pagination.astro";
57
68
import OneTrust from "../OneTrust.astro";
79
import FeedbackPrompt from "../FeedbackPrompt.tsx";
@@ -82,77 +84,88 @@ if (
8284
}
8385
---
8486

85-
{
86-
!homepage && showFeedback && (
87-
<div class="feedback-prompt">
88-
<FeedbackPrompt client:idle />
87+
<footer class="sl-flex">
88+
<div class="custom-footer-section w-full">
89+
<div class="grid grid-cols-2 gap-8 pt-6 pb-10 lg:grid-cols-5">
90+
{
91+
groups.map(([title, items]) => (
92+
<ul class="flex w-full list-none flex-col gap-3 pl-0">
93+
<li class="text-xs leading-5">
94+
<strong>{title}</strong>
95+
</li>
96+
{items.map((link) => (
97+
<li class="text-sm">
98+
<a
99+
href={link.href}
100+
class="flex items-center gap-2 text-black! no-underline"
101+
>
102+
{"icon" in link && <Icon name={link.icon as StarlightIcon} />}
103+
{link.text}
104+
</a>
105+
</li>
106+
))}
107+
</ul>
108+
))
109+
}
89110
</div>
90-
)
91-
}
92-
{!splash && <Default />}
93-
<div class="w-full">
94-
<div class="grid grid-cols-2 gap-8 pt-6 pb-10 lg:grid-cols-5">
95-
{
96-
groups.map(([title, items]) => (
97-
<ul class="flex w-full list-none flex-col gap-3 pl-0">
98-
<li class="text-xs leading-5">
99-
<strong>{title}</strong>
100-
</li>
101-
{items.map((link) => (
102-
<li class="text-sm">
111+
<div>
112+
<ul
113+
class="text-cl1-gray-4! dark:text-cl1-gray-7! flex list-inside flex-wrap items-center justify-center gap-3 gap-y-4 pl-0 text-xs"
114+
>
115+
<li class="list-none">© 2026 Cloudflare, Inc.</li>
116+
{
117+
links.map(([text, href]) => (
118+
<li>
103119
<a
104-
href={link.href}
105-
class="flex items-center gap-2 text-black! no-underline"
120+
href={href}
121+
class="text-cl1-gray-4! dark:text-cl1-gray-7! no-underline"
106122
>
107-
{"icon" in link && <Icon name={link.icon as StarlightIcon} />}
108-
{link.text}
123+
{text}
109124
</a>
110125
</li>
111-
))}
112-
</ul>
113-
))
114-
}
115-
</div>
116-
<div>
117-
<ul
118-
class="text-cl1-gray-4! dark:text-cl1-gray-7! flex list-inside flex-wrap items-center justify-center gap-3 gap-y-4 pl-0 text-xs"
119-
>
120-
<li class="list-none">© 2026 Cloudflare, Inc.</li>
121-
{
122-
links.map(([text, href]) => (
123-
<li>
124-
<a
125-
href={href}
126-
class="text-cl1-gray-4! dark:text-cl1-gray-7! no-underline"
127-
>
128-
{text}
129-
</a>
130-
</li>
131-
))
132-
}
133-
{
134-
isProduction && (
135-
<li>
136-
<OneTrust />
137-
</li>
138-
)
139-
}
140-
</ul>
126+
))
127+
}
128+
{
129+
isProduction && (
130+
<li>
131+
<OneTrust />
132+
</li>
133+
)
134+
}
135+
</ul>
136+
</div>
141137
</div>
142-
</div>
143138

144-
<style>
145-
:global(footer:not(.DocSearch-Footer)) {
146-
flex-direction: column-reverse !important;
139+
{
140+
!splash && (
141+
<div class="starlight-footer-section">
142+
<Pagination />
143+
<div class="meta sl-flex">
144+
<EditLink />
145+
<LastUpdated />
146+
</div>
147+
</div>
148+
)
147149
}
148150

149-
:global(footer) {
150-
.meta {
151-
margin-top: 0 !important;
152-
}
151+
{
152+
!homepage && showFeedback && (
153+
<div class="feedback-prompt">
154+
<FeedbackPrompt client:idle />
155+
</div>
156+
)
157+
}
158+
</footer>
159+
160+
<style>
161+
footer {
162+
flex-direction: column-reverse !important;
153163
}
154164

155165
.feedback-prompt {
166+
padding-top: 2rem;
167+
margin-bottom: 2rem;
168+
156169
h2 {
157170
color: var(--sl-color-white);
158171
font-size: var(--sl-text-h5);
@@ -162,6 +175,23 @@ if (
162175
}
163176
}
164177

178+
.starlight-footer-section {
179+
padding-bottom: 2rem;
180+
181+
.meta {
182+
margin-top: 2em;
183+
gap: 0.75rem 3rem;
184+
justify-content: space-between;
185+
flex-wrap: wrap;
186+
font-size: var(--sl-text-sm);
187+
color: var(--sl-color-gray-3);
188+
}
189+
}
190+
191+
.custom-footer-section {
192+
padding-top: 2rem;
193+
}
194+
165195
@media (min-width: 72rem) {
166196
html[data-has-toc] {
167197
.feedback-prompt {

0 commit comments

Comments
 (0)