Add GitHub footer to home page

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 3adc4d03-d0c9-40f9-abbe-937931f6c523

website/public/github-cookie-consent.js

@@ -0,0 +1,48 @@
+(function () {
+  const assetBase = "https://github.githubassets.com/assets/";
+  const assets = [
+    "high-contrast-cookie-e99d8801a8e707d0.js",
+    "wp-runtime-fd4d28ade03ac1d0.js",
+    "app-runtime-2cb7c64f0defbe9d.js",
+    "fetch-utilities-7fed68b8333e9826.js",
+    "78205-5d6a6f402b7a8e68.js",
+    "89415-812392e4104ab411.js",
+    "environment-17a3813da72840a4.js",
+    "runtime-helpers-176627970fd228b1.js",
+    "catalyst-2b159a120cac7df3.js",
+    "selector-observer-6cc59d6d6cb4ac45.js",
+    "relative-time-element-ae9705f9acc73694.js",
+    "296-4c0a68ac3f1b71d1.js",
+    "816-8d95115b2deb6077.js",
+    "21265-6a76b64e3534ad57.js",
+    "81683-bbf17e7ded27669b.js",
+    "46740-eafd9231dd2851b5.js",
+    "30058-00fdf1aae5a3d0d2.js",
+    "github-elements-3efe2af7b4535ce7.js",
+    "element-registry-eeff84bbec91d759.js",
+  ];
+
+  async function loadAssets() {
+    for (const asset of assets) {
+      await new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.type = "module";
+        script.crossOrigin = "anonymous";
+        script.src = assetBase + asset;
+        script.addEventListener("load", resolve, { once: true });
+        script.addEventListener(
+          "error",
+          () => reject(new Error("Unable to load " + asset)),
+          { once: true },
+        );
+        // Keep GitHub's webpack runtime after Astro's scripts so it derives the
+        // github.githubassets.com public path for its lazy-loaded consent chunks.
+        document.body.appendChild(script);
+      });
+    }
+  }
+
+  loadAssets().catch((error) => {
+    console.error("Unable to initialize GitHub cookie consent.", error);
+  });
+})();

website/src/components/Footer.astro

@@ -5,9 +5,12 @@ import Pagination from "@astrojs/starlight/components/Pagination.astro";
 import config from "virtual:starlight/user-config";
 import { Icon } from "@astrojs/starlight/components";
 import ThemeToggle from "./ThemeToggle.astro";
+
+const isHomePage = Astro.url.pathname === import.meta.env.BASE_URL;
+const currentYear = new Date().getFullYear();
 ---
 
-<footer class="sl-flex">
+<footer class:list={["sl-flex", { "home-footer": isHomePage }]}>
   <div class="meta sl-flex">
     <EditLink />
     <LastUpdated />
@@ -23,8 +26,113 @@ import ThemeToggle from "./ThemeToggle.astro";
   }
 
   <p class="made-by">Made with love by our amazing <a href="/contributors/">contributors</a></p>
+
+  {
+    isHomePage && (
+      <div class="subfooter-bar">
+        <div class="subfooter">
+          <nav aria-label="Legal and resource links" class="subfooter-legal-nav">
+            <ul class="subfooter-legal">
+              <li class="subfooter-copyright">
+                <time datetime={String(currentYear)}>© {currentYear} GitHub, Inc.</time>
+              </li>
+              <li>
+                <a href="https://docs.github.com/site-policy/github-terms/github-terms-of-service">
+                  Terms
+                </a>
+              </li>
+              <li>
+                <a href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement">
+                  Privacy
+                </a>
+              </li>
+              <li>
+                <cookie-consent-link>
+                  <button
+                    type="button"
+                    class="cookie-button"
+                    data-action="click:cookie-consent-link#showConsentManagement"
+                    data-analytics-event='{"location":"footer","tag":"link","action":"cookies","context":"subfooter"}'
+                  >
+                    Manage cookies
+                  </button>
+                </cookie-consent-link>
+              </li>
+            </ul>
+          </nav>
+          <nav aria-label="GitHub's social media links">
+            <ul class="social-links">
+              <li>
+                <a href="https://www.linkedin.com/company/github" aria-label="GitHub on LinkedIn">
+                  <svg viewBox="0 0 19 18" aria-hidden="true">
+                    <path d="M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z" />
+                  </svg>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.instagram.com/github" aria-label="GitHub on Instagram">
+                  <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M12 0C8.74 0 8.33.02 7.05.07 5.78.13 4.91.33 4.14.63c-.79.31-1.46.72-2.13 1.38S.94 3.35.63 4.14C.33 4.91.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.02 3.67.07 4.95c.06 1.28.26 2.15.56 2.91.31.79.72 1.46 1.38 2.13s1.34 1.08 2.13 1.38c.77.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.02 4.95-.07c1.28-.06 2.15-.26 2.91-.56.79-.31 1.46-.72 2.13-1.38s1.08-1.34 1.38-2.13c.3-.77.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.02-3.67-.07-4.95c-.06-1.28-.26-2.15-.56-2.91-.31-.79-.72-1.46-1.38-2.13S20.65.94 19.86.63c-.77-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 12 18.16 6.16 6.16 0 0 0 12 5.84zm0 10.16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm7.85-10.41a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0z" />
+                  </svg>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.youtube.com/github" aria-label="GitHub on YouTube">
+                  <svg viewBox="0 0 19.17 13.6" aria-hidden="true">
+                    <path d="M18.77 2.13A2.4 2.4 0 0 0 17.09.42C15.59 0 9.58 0 9.58 0a57.55 57.55 0 0 0-7.5.4A2.49 2.49 0 0 0 .39 2.13 26.27 26.27 0 0 0 0 6.8a26.15 26.15 0 0 0 .39 4.67 2.43 2.43 0 0 0 1.69 1.71c1.52.42 7.5.42 7.5.42a57.69 57.69 0 0 0 7.51-.4 2.4 2.4 0 0 0 1.68-1.71 25.63 25.63 0 0 0 .4-4.67 24 24 0 0 0-.4-4.69zM7.67 9.71V3.89l5 2.91z" />
+                  </svg>
+                </a>
+              </li>
+              <li>
+                <a href="https://x.com/github" aria-label="GitHub on X">
+                  <svg viewBox="0 0 1200 1227" aria-hidden="true">
+                    <path d="M714.16 519.28 1160.89 0h-105.86L667.14 450.89 357.33 0H0l468.49 681.82L0 1226.37h105.87l409.62-476.15 327.18 476.15H1200L714.14 519.28h.02ZM569.17 687.83 144.01 79.69h162.6l752.47 1070.61H892.48L569.17 687.83Z" />
+                  </svg>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.tiktok.com/@github" aria-label="GitHub on TikTok">
+                  <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M12.53.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
+                  </svg>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.twitch.tv/github" aria-label="GitHub on Twitch">
+                  <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M11.57 4.71h1.72v5.15h-1.72zm4.72 0H18v5.15h-1.71zM6 0 1.71 4.29v15.42h5.15V24l4.28-4.29h3.43L22.29 12V0zm14.57 11.14-3.43 3.43h-3.43l-3 3v-3H6.86V1.71h13.71Z" />
+                  </svg>
+                </a>
+              </li>
+              <li>
+                <a href="https://github.com/github" aria-label="GitHub's organization on GitHub">
+                  <svg viewBox="0 0 98 96" aria-hidden="true">
+                    <path d="M48.85 0C21.84 0 0 22 0 49.22c0 21.75 13.99 40.17 33.41 46.69 2.42.49 3.31-1.06 3.31-2.36 0-1.14-.08-5.05-.08-9.13-13.59 2.94-16.42-5.87-16.42-5.87-2.18-5.7-5.42-7.17-5.42-7.17-4.45-3.01.33-3.01.33-3.01 4.93.32 7.52 5.05 7.52 5.05 4.37 7.5 11.4 5.38 14.24 4.07.4-3.18 1.7-5.38 3.07-6.6-10.84-1.14-22.24-5.38-22.24-24.28 0-5.38 1.94-9.78 5.01-13.2-.48-1.22-2.18-6.28.49-13.04 0 0 4.12-1.3 13.42 5.05a46.97 46.97 0 0 1 12.22-1.63c4.12 0 8.33.57 12.21 1.63 9.3-6.35 13.43-5.05 13.43-5.05 2.67 6.76.97 11.82.48 13.04 3.16 3.42 5.02 7.82 5.02 13.2 0 18.9-11.4 23.06-22.32 24.28 1.78 1.55 3.31 4.48 3.31 9.13 0 6.6-.08 11.9-.08 13.53 0 1.3.89 2.85 3.32 2.36 19.41-6.52 33.4-24.94 33.4-46.69C97.71 22 75.79 0 48.85 0z" />
+                  </svg>
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    )
+  }
 </footer>
 
+{
+  isHomePage && (
+    <>
+      <ghcc-consent
+        id="ghcc"
+        data-locale="en"
+        data-initial-cookie-consent-allowed=""
+        data-cookie-consent-required="false"
+        style="position:fixed;bottom:0;left:0;z-index:999999"
+      />
+    </>
+  )
+}
+
 <ThemeToggle />
 
 <style>
@@ -84,4 +192,129 @@ import ThemeToggle from "./ThemeToggle.astro";
   .made-by a:hover {
     color: var(--sl-color-accent);
   }
+
+  footer.home-footer {
+    padding-inline: 0;
+    max-width: none;
+  }
+
+  .subfooter-bar {
+    width: 100%;
+    margin-top: 1.5rem;
+    background: var(--sl-color-bg-nav);
+    border-top: 1px solid var(--sl-color-gray-5);
+  }
+
+  .subfooter {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+    color: var(--sl-color-gray-3);
+    text-align: left;
+  }
+
+  .subfooter ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .subfooter a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .subfooter a:hover {
+    color: var(--sl-color-white);
+    text-decoration: underline;
+  }
+
+  .subfooter-legal-nav {
+    color: var(--sl-color-gray-3);
+    font-family: var(--__sl-font-mono);
+    font-size: var(--sl-text-xs);
+    font-weight: 600;
+    line-height: 1.5;
+  }
+
+  .subfooter-legal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1rem 1.25rem;
+    text-transform: uppercase;
+  }
+
+  .subfooter-copyright {
+    white-space: nowrap;
+  }
+
+  .cookie-button {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    cursor: pointer;
+  }
+
+  .cookie-button:hover {
+    color: var(--sl-color-white);
+    text-decoration: underline;
+  }
+
+  .cookie-button:focus-visible,
+  .subfooter a:focus-visible {
+    border-radius: 0.25rem;
+    outline: 2px solid var(--sl-color-accent-high);
+    outline-offset: 3px;
+  }
+
+  .social-links {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .social-links a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+  }
+
+  .social-links a:hover {
+    text-decoration: none;
+  }
+
+  .social-links svg {
+    display: block;
+    width: 18px;
+    height: 18px;
+    max-width: 100%;
+    max-height: 100%;
+    fill: currentColor;
+  }
+
+  @media (min-width: 768px) {
+    .subfooter {
+      flex-direction: row;
+      justify-content: space-between;
+      padding-inline: 2rem;
+    }
+
+    .subfooter-legal {
+      justify-content: flex-start;
+    }
+  }
 </style>

website/src/components/Head.astro

@@ -2,6 +2,8 @@
 import Default from '@astrojs/starlight/components/Head.astro';
 const { head, entry } = Astro.locals.starlightRoute;
 const basePath = import.meta.env.BASE_URL;
+const isHomePage = Astro.url.pathname === basePath;
+const cookieConsentScript = `${basePath}github-cookie-consent.js`;
 
 const getMetaContent = (key: string, attribute: 'name' | 'property' = 'name') =>
   head.find((tag) => tag.tag === 'meta' && tag.attrs?.[attribute] === key)?.attrs?.content;
@@ -36,6 +38,7 @@ const twitterDomain =
     : undefined;
 ---
 
+{isHomePage && <script is:inline src={cookieConsentScript} defer />}
 <Default><slot /></Default>
 {twitterTitle && <meta name="twitter:title" content={twitterTitle} />}
 {description && <meta name="twitter:description" content={description} />}