From 0ac01012ca701c53bf18b754065f8bb0013e942a Mon Sep 17 00:00:00 2001 From: Kian Date: Tue, 24 Sep 2024 17:05:17 +0100 Subject: [PATCH] [Docs Site] Homepage footer styling overhaul (#17037) * [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 --- src/components/homepage/FooterHeroBlock.astro | 30 ++- src/components/overrides/Footer.astro | 234 +++++++++--------- 2 files changed, 140 insertions(+), 124 deletions(-) diff --git a/src/components/homepage/FooterHeroBlock.astro b/src/components/homepage/FooterHeroBlock.astro index 8e9da79abed9aa9..41f29f5148b1f1f 100644 --- a/src/components/homepage/FooterHeroBlock.astro +++ b/src/components/homepage/FooterHeroBlock.astro @@ -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", @@ -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/", }, ], @@ -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/", }, ], @@ -50,7 +50,7 @@ const blocks = [ links: [ { text: "Read the blog", - icon: "seti:notebook", + icon: "open-book", href: "https://blog.cloudflare.com/", }, ], @@ -59,20 +59,24 @@ const blocks = [ ---
{ blocks.map(({ title, text, links }) => (
-

{title}

+ {title}

{text}

    {links.map((link) => (
  • - + {link.text} @@ -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); } } diff --git a/src/components/overrides/Footer.astro b/src/components/overrides/Footer.astro index dd7de73930fb9e7..58f689cf210c81c 100644 --- a/src/components/overrides/Footer.astro +++ b/src/components/overrides/Footer.astro @@ -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 ? ( - <> -
    - {homepageLinks.map(([header, links]) => ( -
    - {header} - -
    - ))} -
    -
    -
      -
    • © 2024 Cloudflare, Inc.
      • - {homepageLegalLinks.map(([text, href]) => ( -
    • - - {text} - -
      • - ))} - {isProduction && } - -
    -
    - - ) : ( - <> - -
    - {Object.entries(links).map(([text, href]) => ( - - {text} - - ))} - {isProduction && -
    - -
    - } -
    - - ) + isHomepage ? ( + <> +
    +
    + {homepageLinks.map(([header, links]) => ( +
    + {header} + +
    + ))} +
    +
    +
    +
      +
    • + 2024 Cloudflare, Inc. +
      • + {homepageLegalLinks.map(([text, href]) => ( +
    • + + {text} + +
      • + ))} +
    • + {isProduction && } +
      • +
    +
    + + ) : ( + <> + +
    + {Object.entries(links).map(([text, href]) => ( + + {text} + + ))} + {isProduction && ( +
    + +
    + )} +
    + + ) } + +