Skip to content

Commit

Permalink
[Docs Site] Homepage footer styling overhaul (#17037)
Browse files Browse the repository at this point in the history 
* [Docs Site] Homepage footer styling overhaul

* Only add basis-1/2 on small viewports

* make sure cookie preferences is styled the same

* White logos in dark mode
  • Loading branch information
@KianNH
KianNH authored Sep 24, 2024
1 parent 5d20779 commit 0ac0101
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 124 deletions.
30 changes: 17 additions & 13 deletions src/components/homepage/FooterHeroBlock.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Icon } from "@astrojs/starlight/components";
const blocks = [
{
title: "Community",
text: "The Cloudflare community is a place for Cloudflare users to share ideas, answers, code and compare notes.",
text: "Share ideas, answers, code and compare notes with the Cloudflare community.",
links: [
{
text: "Discord",
Expand All @@ -17,8 +17,8 @@ const blocks = [
href: "https://x.com/CloudflareDev",
},
{
text: "Community Forum",
icon: "discourse",
text: "Community forum",
icon: "cloudflare",
href: "https://community.cloudflare.com/",
},
],
Expand All @@ -28,18 +28,18 @@ const blocks = [
text: "Cloudflare contributes to the open-source ecosystem in a variety of ways, including:",
links: [
{
text: "GitHub Projects",
text: "GitHub projects",
icon: "github",
href: "https://github.com/cloudflare",
},
{
text: "Sponsorship Projects",
text: "Sponsorship projects",
icon: "seti:shell",
href: "/sponsorships/",
},
{
text: "Style Guide",
icon: "open-book",
text: "Style guide",
icon: "document",
href: "/style-guide/",
},
],
Expand All @@ -50,7 +50,7 @@ const blocks = [
links: [
{
text: "Read the blog",
icon: "seti:notebook",
icon: "open-book",
href: "https://blog.cloudflare.com/",
},
],
Expand All @@ -59,20 +59,24 @@ const blocks = [
---

<div
class="flex bg-cyan-50 dark:bg-gray-800 bleed *:!mt-0 items-start justify-between py-10"
class="flex bg-gray-100 dark:bg-gray-800 bleed *:!mt-0 items-start justify-between py-10"
>
{
blocks.map(({ title, text, links }) => (
<div>
<h2>{title}</h2>
<strong>{title}</strong>
<p class="w-80">{text}</p>
<ul class="list-none pl-0">
{links.map((link) => (
<li class="flex !mt-4">
<Icon name={link.icon} size="1.5rem" />
<Icon
name={link.icon}
size="1.5rem"
color="var(--sl-color-white)"
/>
<a
href={link.href}
class="pl-2 no-underline !text-black !text-accent-600 dark:!text-accent-200"
class="pl-2 no-underline !text-black dark:!text-white"
>
{link.text}
</a>
Expand All @@ -94,7 +98,7 @@ const blocks = [

html[data-theme="light"] {
.bleed {
box-shadow: 0 0 0 100vmax theme(colors.cyan.50);
box-shadow: 0 0 0 100vmax theme(colors.gray.100);
clip-path: inset(0 -100vmax);
}
}
Expand Down
234 changes: 123 additions & 111 deletions src/components/overrides/Footer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,137 +5,149 @@ 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/",
"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);
const product = await getEntry("products", currentSection);
if (product) {
if (product.data.resources?.dashboard_link) {
links["Cloudflare Dashboard"] = product.data.resources.dashboard_link;
}
}
if (product) {
if (product.data.resources?.dashboard_link) {
links["Cloudflare Dashboard"] = product.data.resources.dashboard_link;
}
}
}
const homepageLinks = Object.entries({
"Stay in touch": [
{ text: "GitHub", href: "https://github.com/cloudflare" },
{ text: "Discord", href: "https://discord.cloudflare.com/" },
],
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/" },
],
"What we do": [
{ 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/" },
],
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/",
"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";
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;
if (
import.meta.env.CF_PAGES_BRANCH === "production" ||
import.meta.env.GITHUB_REF_NAME === "production"
) {
isProduction = true;
}
---

{
isHomepage ? (
<>
<div class="flex flex-wrap justify-between">
{homepageLinks.map(([header, links]) => (
<div>
<strong>{header}</strong>
<ul class="list-none pl-0">
{links.map((link) => (
<li>
<a
href={link.href}
class="no-underline text-black dark:text-white"
>
{link.text}
</a>
</li>
))}
</ul>
</div>
))}
</div>
<div>
<ul class="list-none pl-0 flex gap-x-2 text-xs">
<li>© 2024 Cloudflare, Inc.</li>
{homepageLegalLinks.map(([text, href]) => (
<li>
<a href={href} class="no-underline text-black dark:text-white">
{text}
</a>
</li>
))}
{isProduction && <OneTrust />}
</li>
</ul>
</div>
</>
) : (
<>
<Default {...Astro.props} />
<div class="items-center flex flex-wrap">
{Object.entries(links).map(([text, href]) => (
<a
href={href}
class="mx-2 my-2 text-xs text-black dark:text-white decoration-accent-600 dark:decoration-accent-200"
>
<span>{text}</span>
</a>
))}
{isProduction &&
<div class="mx-2 my-2 text-xs text-black dark:text-white underline decoration-accent-600 dark:decoration-accent-200">
<OneTrust />
</div>
}
</div>
</>
)
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="no-underline text-white">
{link.text}
</a>
</li>
))}
</ul>
</div>
))}
</div>
</div>
<div>
<ul class="flex gap-x-4 text-xs list-outside pl-0 justify-center 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="no-underline text-gray-600 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 class="items-center flex flex-wrap">
{Object.entries(links).map(([text, href]) => (
<a
href={href}
class="mx-2 my-2 text-xs text-black dark:text-white decoration-accent-600 dark:decoration-accent-200"
>
<span>{text}</span>
</a>
))}
{isProduction && (
<div class="mx-2 my-2 text-xs text-black dark:text-white underline decoration-accent-600 dark:decoration-accent-200">
<OneTrust />
</div>
)}
</div>
</>
)
}

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

0 comments on commit 0ac0101

Please sign in to comment.