Footer.astro

---
import { Icon } from "@astrojs/starlight/components";
import type { StarlightIcon } from "@astrojs/starlight/types";
import EditLink from "@astrojs/starlight/components/EditLink.astro";
import LastUpdated from "@astrojs/starlight/components/LastUpdated.astro";
import Pagination from "@astrojs/starlight/components/Pagination.astro";

import OneTrust from "../OneTrust.astro";
import FeedbackPrompt from "../FeedbackPrompt.tsx";

const groups = Object.entries({
	Resources: [
		{ text: "API", href: "/api/" },
		{
			text: "New to Cloudflare?",
			href: "/fundamentals/",
		},
		{ text: "Directory", href: "/directory/" },
		{
			text: "Sponsorships",
			href: "/sponsorships/",
		},
		{ text: "Open Source", href: "https://github.com/cloudflare" },
	],
	Support: [
		{ text: "Help Center", href: "https://support.cloudflare.com/" },
		{ text: "System Status", href: "https://www.cloudflarestatus.com/" },
		{
			text: "Compliance",
			href: "https://www.cloudflare.com/trust-hub/compliance-resources/",
		},
		{ text: "GDPR", href: "https://www.cloudflare.com/trust-hub/gdpr/" },
	],
	Company: [
		{ text: "cloudflare.com", href: "https://www.cloudflare.com/" },
		{ text: "Our team", href: "https://www.cloudflare.com/people/" },
		{ text: "Careers", href: "https://www.cloudflare.com/careers/" },
	],
	Tools: [
		{ text: "Cloudflare Radar", href: "https://radar.cloudflare.com/" },
		{ text: "Speed Test", href: "https://speed.cloudflare.com/" },
		{ text: "Is BGP Safe Yet?", href: "https://isbgpsafeyet.com/" },
		{ text: "RPKI Toolkit", href: "https://rpki.cloudflare.com/" },
		{ text: "Certificate Transparency", href: "https://ct.cloudflare.com/" },
	],
	Community: [
		{ text: "X", href: "https://x.com/cloudflare", icon: "x.com" },
		{
			text: "Discord",
			href: "http://discord.cloudflare.com/",
			icon: "discord",
		},
		{
			text: "YouTube",
			href: "https://www.youtube.com/cloudflare",
			icon: "youtube",
		},
		{
			text: "GitHub",
			href: "https://github.com/cloudflare/cloudflare-docs",
			icon: "github",
		},
	],
});

const links = Object.entries({
	"Privacy Policy": "https://www.cloudflare.com/privacypolicy/",
	"Terms of Use": "https://www.cloudflare.com/website-terms/",
	"Report Security Issues": "https://www.cloudflare.com/disclosure/",
	Trademark: "https://www.cloudflare.com/trademark/",
});

const homepage = Astro.locals.starlightRoute.entry.id === "";
const splash = Astro.locals.starlightRoute.entry.data.template === "splash";
const showFeedback = Astro.locals.starlightRoute.entry.data.feedback;

let isProduction = false;

if (
	import.meta.env.CF_PAGES_BRANCH === "production" ||
	import.meta.env.GITHUB_REF_NAME === "production"
) {
	isProduction = true;
}
---

<footer class="sl-flex">
	<div class="custom-footer-section w-full">
		<div class="grid grid-cols-2 gap-8 pt-6 pb-10 lg:grid-cols-5">
			{
				groups.map(([title, items]) => (
					<ul class="flex w-full list-none flex-col gap-3 pl-0">
						<li class="text-xs leading-5">
							<strong>{title}</strong>
						</li>
						{items.map((link) => (
							<li class="text-sm">
								<a
									href={link.href}
									class="flex items-center gap-2 text-black! no-underline"
								>
									{"icon" in link && <Icon name={link.icon as StarlightIcon} />}
									{link.text}
								</a>
							</li>
						))}
					</ul>
				))
			}
		</div>
		<div>
			<ul
				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"
			>
				<li class="list-none">© 2026 Cloudflare, Inc.</li>
				{
					links.map(([text, href]) => (
						<li>
							<a
								href={href}
								class="text-cl1-gray-4! dark:text-cl1-gray-7! no-underline"
							>
								{text}
							</a>
						</li>
					))
				}
				{
					isProduction && (
						<li>
							<OneTrust />
						</li>
					)
				}
			</ul>
		</div>
	</div>

	{
		!splash && (
			<div class="starlight-footer-section">
				<Pagination />
				<div class="meta sl-flex">
					<EditLink />
					<LastUpdated />
				</div>
			</div>
		)
	}

	{
		!homepage && showFeedback && (
			<div class="feedback-prompt">
				<FeedbackPrompt client:idle />
			</div>
		)
	}
</footer>

<style>
	footer {
		flex-direction: column-reverse !important;
	}

	.feedback-prompt {
		padding-top: 2rem;
		margin-bottom: 2rem;
	}

	.starlight-footer-section {
		padding-bottom: 2rem;

		.meta {
			margin-top: 2em;
			gap: 0.75rem 3rem;
			justify-content: space-between;
			flex-wrap: wrap;
			font-size: var(--sl-text-sm);
			color: var(--sl-color-gray-3);
		}
	}

	.custom-footer-section {
		padding-top: 2rem;
	}

	@media (min-width: 72rem) {
		html[data-has-toc] {
			.feedback-prompt {
				display: none;
			}
		}
	}
</style>