cloudflare-docs/src/components/overrides/Footer.astro

---
import type { Props } from "@astrojs/starlight/props";
import Default from "@astrojs/starlight/components/Footer.astro";
import OneTrust from "../OneTrust.astro";
import { getEntry } from "astro:content";

let links = {
	"Cloudflare Dashboard": "https://dash.cloudflare.com",
	Discord: "https://discord.cloudflare.com",
	Community: "https://community.cloudflare.com",
	"Learning Center": "https://www.cloudflare.com/learning/",
	"Support Portal": "/support/contacting-cloudflare-support/",
};

const currentSection = Astro.params.slug?.split("/")[0];

if (currentSection) {
	const product = await getEntry("products", currentSection);

	if (product) {
		if (product.data.resources?.dashboard_link) {
			links["Cloudflare Dashboard"] = product.data.resources.dashboard_link;
		}
	}
}

const homepageLinks = Object.entries({
	Resources: [
		{ text: "API", href: "/api/" },
		{
			text: "New to Cloudflare?",
			href: "/fundamentals/",
		},
		{ text: "Products", href: "/products/" },
		{
			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/" },
	],
});

const homepageLegalLinks = 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 isHomepage =
	Astro.props.siteTitleHref === "/" && Astro.props.id === ".md";

let isProduction = false;

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

{
	isHomepage ? (
		<>
			<div class="bleed !mt-0">
				<div class="flex flex-wrap justify-between bg-[#001C43] py-6">
					{homepageLinks.map(([header, links]) => (
						<div class="basis-1/2 md:basis-auto">
							<strong class="text-gray-400">{header}</strong>
							<ul class="list-none pl-0">
								{links.map((link) => (
									<li>
										<a href={link.href} class="text-white no-underline">
											{link.text}
										</a>
									</li>
								))}
							</ul>
						</div>
					))}
				</div>
			</div>
			<div>
				<ul class="flex list-outside justify-center gap-x-4 pl-0 text-xs text-gray-600 dark:!text-gray-400">
					<li class="list-none text-gray-600 dark:text-gray-400">
						2024 Cloudflare, Inc.
					</li>
					{homepageLegalLinks.map(([text, href]) => (
						<li>
							<a
								href={href}
								class="text-gray-600 no-underline dark:!text-gray-400"
							>
								{text}
							</a>
						</li>
					))}
					<li class="text-gray-600 dark:!text-gray-400">
						{isProduction && <OneTrust />}
					</li>
				</ul>
			</div>
		</>
	) : (
		<>
			<Default {...Astro.props} />
			<div id="footer-links" class="flex flex-wrap items-center">
				{Object.entries(links).map(([text, href]) => (
					<a href={href} class="mx-2 my-2 text-xs text-black decoration-accent">
						<span>{text}</span>
					</a>
				))}
				{isProduction && (
					<div class="mx-2 my-2 text-xs text-black [&>button]:underline [&>button]:decoration-accent">
						<OneTrust />
					</div>
				)}
			</div>
		</>
	)
}

<style>
	.bleed {
		box-shadow: 0 0 0 100vmax #001c43 !important;
		clip-path: inset(0 -100vmax);
	}
</style>