From 5eb473f660e3d85fb8105bd4f22a70e325102921 Mon Sep 17 00:00:00 2001
From: Derek Perez <dperez@buf.build>
Date: Tue, 21 May 2024 10:07:31 -0700
Subject: [PATCH] Adding CNCF logo to footer (#163)

Addressing logo requirements for CNCF onboarding:
https://github.com/cncf/toc/issues/1299

---------

Co-authored-by: Nick Snyder <nsnyder@buf.build>
---
 .../Footer/cncf-sandbox-horizontal-black.svg  |  1 +
 src/theme/Footer/index.tsx                    | 24 ++++++++++++-------
 src/theme/Footer/styles.module.css            | 12 ++++++++++
 tsconfig.json                                 |  1 +
 4 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 src/theme/Footer/cncf-sandbox-horizontal-black.svg

diff --git a/src/theme/Footer/cncf-sandbox-horizontal-black.svg b/src/theme/Footer/cncf-sandbox-horizontal-black.svg
new file mode 100644
index 00000000..8f9eaac3
--- /dev/null
+++ b/src/theme/Footer/cncf-sandbox-horizontal-black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="-3.65 -3.40 358.80 85.80"><style>svg {enable-background:new 0 0 351.3 79}</style><style>.st10{opacity:.8}.st11{opacity:.6}</style><path id="XMLID_207_" d="M96.9 24.5c2.7 0 4.9-1.1 6.5-3.2l3.5 3.6c-2.8 3.1-6 4.7-9.8 4.7-3.7 0-6.8-1.2-9.3-3.6-2.4-2.4-3.6-5.4-3.6-9 0-3.6 1.2-6.6 3.7-9 2.5-2.4 5.5-3.6 9.1-3.6 4 0 7.3 1.5 10 4.6l-3.4 3.8c-1.7-2.1-3.9-3.2-6.4-3.2-2 0-3.8.7-5.2 2-1.5 1.3-2.2 3.1-2.2 5.4s.7 4.1 2.1 5.4c1.4 1.5 3 2.1 5 2.1z"/><path id="XMLID_205_" d="M111.2 29.4V5h5.4v19.5H127v4.8h-15.8z"/><path id="XMLID_157_" d="M150.8 26c-2.5 2.4-5.5 3.6-9.1 3.6-3.6 0-6.6-1.2-9.1-3.6-2.5-2.4-3.7-5.4-3.7-9 0-3.6 1.2-6.6 3.7-9 2.5-2.4 5.5-3.6 9.1-3.6 3.6 0 6.6 1.2 9.1 3.6 2.5 2.4 3.7 5.4 3.7 9 0 3.6-1.3 6.6-3.7 9zm-1.9-9c0-2.2-.7-4-2.1-5.6-1.4-1.5-3.1-2.3-5.1-2.3-2 0-3.7.8-5.1 2.3-1.4 1.5-2.1 3.4-2.1 5.6 0 2.2.7 4 2.1 5.5 1.4 1.5 3.1 2.3 5.1 2.3 2 0 3.7-.8 5.1-2.3 1.4-1.4 2.1-3.3 2.1-5.5z"/><path id="XMLID_155_" d="M165.5 23.1c.9 1.1 2.1 1.7 3.7 1.7 1.5 0 2.7-.6 3.6-1.7.9-1.1 1.3-2.7 1.3-4.6V5h5.4v13.6c0 3.5-1 6.2-2.9 8.1-2 1.9-4.4 2.8-7.5 2.8-3 0-5.5-1-7.5-2.9s-2.9-4.6-2.9-8.1V5h5.4v13.4c0 2 .5 3.5 1.4 4.7z"/><path id="XMLID_151_" d="M203.8 8.2c2.3 2.1 3.5 5.1 3.5 8.9s-1.1 6.8-3.4 9-5.7 3.3-10.4 3.3h-8.3V5h8.6c4.3 0 7.7 1.1 10 3.2zm-4 14.5c1.3-1.3 2-3.1 2-5.5s-.7-4.2-2-5.5c-1.3-1.3-3.4-1.9-6.1-1.9h-3v14.8h3.4c2.5-.1 4.4-.7 5.7-1.9z"/><path id="XMLID_103_" d="M238.2 5h5.4v24.3h-5.4L226.6 14v15.3h-5.4V5h5.1l11.9 15.7V5z"/><path id="XMLID_100_" d="M267 29.4l-2.3-5.3h-10.2l-2.3 5.3h-5.8L257 5h5.3l10.5 24.3H267zm-7.4-17.1l-3.1 7.1h6.1l-3-7.1z"/><path id="XMLID_98_" d="M284.1 9.7v19.6h-5.4V9.7h-6.9V5H291v4.7h-6.9z"/><path id="XMLID_96_" d="M295 5h5.4v24.3H295V5z"/><path id="XMLID_94_" d="M315.4 20.5L321.6 5h5.9l-9.8 24.3h-4.6L303.3 5h5.9l6.2 15.5z"/><path id="XMLID_12_" d="M347.9 5v4.8h-12.1v5h10.9v4.6h-10.9v5h12.5v4.8h-17.9V5h17.5z"/><path d="M84.2 68.9l2.4-2.8c3.5 3.2 6.9 4.8 11.7 4.8 4.6 0 7.6-2.4 7.6-5.8V65c0-3.2-1.7-5-8.8-6.5-7.8-1.7-11.4-4.2-11.4-9.8v-.1c0-5.3 4.7-9.3 11.2-9.3 5 0 8.5 1.4 12 4.2l-2.2 3c-3.2-2.6-6.3-3.7-9.8-3.7-4.4 0-7.2 2.4-7.2 5.5v.1c0 3.2 1.7 5 9.2 6.6 7.6 1.7 11.1 4.4 11.1 9.6v.1c0 5.8-4.9 9.6-11.6 9.6-5.7 0-10.1-1.8-14.2-5.4zm47.6-29.3h3.6l15.5 34.2h-4.1l-4-9h-18.5l-4 9h-3.9l15.4-34.2zm9.5 21.8L133.6 44l-7.8 17.3h15.5zm18.8-21.6h3.6l21.4 27.3V39.8h3.7v34h-3.1l-22-27.9v27.9H160v-34zm40.8 0h11.8c10.7 0 18.1 7.3 18.1 16.9v.1c0 9.6-7.4 17-18.1 17h-11.8v-34zm11.8 30.5c8.6 0 14.1-5.8 14.1-13.4v-.1c0-7.5-5.5-13.5-14.1-13.5h-8v26.9h8zm28.6-30.5h14.5c3.9 0 6.9 1.1 8.9 3 1.4 1.5 2.2 3.3 2.2 5.4v.1c0 4.4-2.7 6.7-5.4 7.9 4 1.2 7.3 3.5 7.3 8.2v.1c0 5.8-4.9 9.3-12.3 9.3h-15.1v-34zM255.1 55c4.6 0 7.8-2.1 7.8-6.1v-.1c0-3.4-2.7-5.5-7.5-5.5h-10.3V55h10zm1.4 15.4c5.1 0 8.4-2.3 8.4-6.1v-.1c0-3.7-3.1-5.8-9-5.8h-10.7v12h11.3zm20.8-13.5c0-9.5 7-17.7 17.4-17.7 10.3 0 17.3 8.1 17.3 17.5v.1c0 9.4-7 17.6-17.4 17.6s-17.3-8.1-17.3-17.5zm30.7 0c0-7.8-5.6-14.1-13.4-14.1-7.8 0-13.3 6.2-13.3 13.9v.1c0 7.7 5.6 14 13.4 14 7.7.1 13.3-6.2 13.3-13.9zm22.6-.4L318 39.8h4.5l10.4 13.9 10.3-13.9h4.5l-12.6 16.6 13.1 17.4h-4.6l-10.9-14.6-10.9 14.6h-4.4l13.2-17.3z"/><path fill="none" d="M13.6 14.1V16v-1.9z"/><path d="M29.7 65.4c.1 0 0 0 0 0z"/><path d="M27.3 14.1l-13.7.1V16l.1 11.8-.1 9v14.8c1.8-1.5 3.5-3.3 5.4-4.8 2.8-2.4 6-3.5 9.5-3.1l4.3 1.8c1.1-1.6 2.8-2.3 4.8-2.3 1.6 0 3.3.2 4.9.2.2-.6.4-1.1.5-1.7.5-2.9 1.6-5.5 2.5-8.2 1.6-5.1 3-10.3 4.9-15.2.1-.9 1-1.1 1.5-1.7h2.5l.7.7c1 .8 1.7 1.7 1.1 3.1l-8.7 22.8c.2 1.1 1.1.7 1.7.7 2.8.1 3.4.8 3 3.5-.1.9 0 1.9 0 2.8 1.5-.6 2.9-1.2 4.5-1.6 3-.7 5.7.2 8.1 2l.1-7.9V14H36.3l-9 .1z" opacity=".2"/><path d="M53 20.4zM32.2 57.2c.1 0 .1 0 0 0 .1 0 .1 0 0 0z"/><path d="M65 65.3v-.1.1zm-13.7.1c5.8 0 7.8 4.3 13.5 4.3.3 0-.1-4.5.1-4.5V51.8l-.1-.1v-1.1c-2.5-1.9-5.1-2.8-8.1-2-1.5.4-3 .9-4.5 1.6 0 .5-.1 1-.3 1.5-1 2.6-2.7 4.9-3.9 7.4-.3.7-.7 1.8-1.8 1.5-.1 0-.2 0-.3-.1-1.7.1-3.5.2-4.9-1.1-.5-.5-1.2-.2-1.8-.3-1.7.2-3.3.3-5 .7-1.4-.1-2.9 1-4.2 1.1-.9.5-3.1 1-4.1-.2h-.1s-.1 0-.1-.1l.3-.5c1.5-3.9 4.5-10.2 6.2-13.7.1-.3.3-.6.5-.8l-4.3-1.8c-3.5-.5-6.7.7-9.5 3.1-1.8 1.5-3.5 3.3-5.4 4.8v13.8h1.2c.1-.1-1.6 1.3-1.5 1.2 4.9 0 9.1-1.2 14-1.2" opacity=".4"/><path d="M46.7 65.4H65v-.2h-.8m-38.4-4.5c.1 0 .1 0 0 0 .1 0 .1 0 0 0 0-.1 0 0 0 0zm20.4-.1z"/><path d="M53 20.3c0 .1 0 .1 0 0 .3-.4.5-.9.7-1.3.2-1.2-.6-1.9-1.4-2.5h-.4c-.5.6-1.4.8-1.5 1.7l.2.4c2.2-.6 2.3-.5 2.4 1.7z" class="st10"/><path d="M53.7 19l.4.4c.9-.4-.1-1.8 1-2.1l-.7-.7h-2.1c.8.5 1.6 1.2 1.4 2.4z" class="st10"/><path d="M43.4 41.5c2.1.4 2.3-1.2 2.8-2.5 2.7-6.1 5.1-12.2 6.8-18.6v-.1c-.1-2.2-.3-2.3-2.4-1.7 0 0-.1-.3-.2-.4-1.9 5-3.3 10.2-4.9 15.2-.9 2.7-2 5.4-2.5 8.2.2 0 .3-.1.4-.1zM26.1 60l3.8-6.7c1.1-2.3 2.1-4.6 3.3-6.7.7-1 1.6-1.9 2.9-2.1.2-.1.4-.1.6-.2 2.1-.5 4.1 0 6.2.2 2.3.1 4.7.2 7 .3 1.4.1 2 1.1 1.5 2.4l-.3.6c-.9 2.1-1.4 3.1-3.1 3.1 1.3.3 1.4 1.1.7 2.7s-1.6 3.3-2.2 5c-.2.6-.4 1.1-.4 1.7.1 0 .2.1.3.1 1-3.3 2.8-6.1 4.3-9.6.8-1.3.8-1.7 1.5-2.5v3.2c.2-.5.3-1 .3-1.5 0-.9-.2-1.9 0-2.8.4-2.7-.2-3.4-3-3.5-.6 0-1.5.4-1.7-.7-.4.4-.7 1.1-1.3.3-1.2.3-2.5.1-3.7-.1-1.6-.1-3.3-.3-4.9-.2-2 0-3.7.7-4.8 2.3-.2.3-.4.5-.5.8-2 3.7-5 10-6.5 13.9z" class="st11"/><path d="M46.3 43.5c.9-3.2 2.4-6.2 3.6-9.3 1.1-3.1 2.4-6.1 3.2-9.2.5-1.9 1.3-3.6 1.1-5.6l-.4-.4c-.2.5-.4.9-.7 1.4-1.8 6.4-4.2 12.6-6.9 18.6-.6 1.3-.8 2.9-2.8 2.5-.1 0-.2.2-.2.2-.2.6-.4 1.1-.5 1.7 1.1.1 2.3.4 3.6.1z" class="st11"/><path d="M32.2 57.2c-.1-.1-.1-.2-.2-.3l-2.3-3.5v-.1L26.1 60l-.3.5s.1 0 .1.1c1 1.1 3.2.7 4.1.2l2-3.2c.1-.1.2-.2.2-.4zm21.9-37.8c.3 2-.6 3.8-1.1 5.6-.8 3.2-2.1 6.2-3.2 9.2-1.1 3.1-2.6 6.1-3.6 9.3.7.8.9 0 1.3-.3l8.7-22.8c.5-1.4-.1-2.3-1.1-3.1-1.2.3-.1 1.7-1 2.1zM50.5 51c-1.5 3.4-3.3 6.2-4.3 9.6h.1c1.1.3 1.5-.7 1.8-1.5 1.2-2.5 2.9-4.8 3.9-7.4v-3.2c-.7.8-.8 1.2-1.5 2.5z" class="st10"/><path d="M48.5 53.8c.8-1.7.6-2.5-.7-2.7-.3 0-.6 0-.9-.1-2.8-.1-5.5-.3-8.3-.4-.8 0-1.6-.1-2 .7 1.2 2.5 2.4 4.9 2.5 7.8.6.1 1.3-.1 1.8.3 1.4 1.4 3.2 1.2 4.9 1.1 0-.6.2-1.1.4-1.7.8-1.7 1.6-3.3 2.3-5z" class="st11"/><path d="M34.6 53.5c.9-1 1.3-1.5 2.1-2.2.5-.8 1.3-.7 2-.7 2.8.1 5.5.3 8.3.4.3.1.6.1.9.1 1.7 0 2.2-1 3.1-3.1l.3-.6c.5-1.3-.1-2.3-1.5-2.4-2.3-.2-4.7-.2-7-.3-2.1-.2-4.1-.7-6.2-.2-.2 0-.4.1-.6.2-1.3.2-2.1 1.1-2.9 2.1 1.9 1.8 3 4 1.5 6.7z" class="st10"/><path d="M32.1 57c0 .1.1.2.2.2.9-1.3 1.4-2.3 2.3-3.6v-.2c1.5-2.7.4-4.9-1.5-6.8-1.2 2.1-2.2 4.4-3.3 6.7v.1l2.3 3.6z" class="st10"/><path d="M36.7 51.3c-.8.7-1.2 1.2-2 2.3l-.1.1c-.9 1.2-1.5 2.3-2.3 3.6-.1.1-.2.2-.3.4l-2 3.2c1.3-.1 2.8-1.2 4.2-1.1 1.6-.4 3.3-.5 5-.7-.1-2.9-1.4-5.4-2.5-7.8z" class="st11"/><path d="M27.3 65.4H13.6V51.7H3.3v24h24zm37.6-13.7l.1 13.5v.1l-13.7.1v10.3h24v-24H64.9zM13.6 16v-1.9h13.7V3.7h-24v24h10.4zM51.3 3.7V14H65v13.7h10.3v-24z"/><path d="M36.3 14h15V3.7h-24v10.4zm28.6 37.7h10.4v-24H65v15m-51.4 8.9V36.7l.1-9H3.3v24h10.3zm22.7 24.1h15V65.4h-24v10.3z" class="st10"/></svg>
\ No newline at end of file
diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx
index 1e6edc77..029a922e 100644
--- a/src/theme/Footer/index.tsx
+++ b/src/theme/Footer/index.tsx
@@ -33,6 +33,7 @@ import React, { PropsWithChildren } from "react";
 
 import IconGithub from "./icon-github--gray.svg";
 import IconSlack from "./icon-slack--gray.svg";
+import CncfSandbox from "./cncf-sandbox-horizontal-black.svg";
 import styles from "./styles.module.css";
 
 type LinkProps = {
@@ -153,15 +154,20 @@ function Footer(): JSX.Element | null {
           })}
         </div>
 
-        <div
-          className={styles.copyright}
-          // Developer provided the HTML, so assume it's safe.
-          // eslint-disable-next-line react/no-danger
-          // ^^^ comment by FB
-          dangerouslySetInnerHTML={{
-            __html: copyright ?? "",
-          }}
-        />
+        <div className={styles.copyright}>
+          <div
+            // Developer provided the HTML, so assume it's safe.
+            // eslint-disable-next-line react/no-danger
+            // ^^^ comment by FB
+            dangerouslySetInnerHTML={{
+              __html: copyright ?? "",
+            }}
+          />
+          <span>
+            We are a Cloud Native Computing Foundation sandbox project
+          </span>
+          <CncfSandbox width={200} opacity={0.2} className={styles.cncfLogo} />
+        </div>
       </div>
     </footer>
   );
diff --git a/src/theme/Footer/styles.module.css b/src/theme/Footer/styles.module.css
index 90f14839..7ad8e3fe 100644
--- a/src/theme/Footer/styles.module.css
+++ b/src/theme/Footer/styles.module.css
@@ -24,6 +24,10 @@
   color: #93b4be;
 }
 
+.cncfLogo {
+  padding-top: 0.3rem;
+}
+
 .legalGroup {
   display: flex;
   flex-direction: row;
@@ -32,6 +36,9 @@
 }
 
 .copyright {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   font-size: 0.875rem;
   color: var(--buf-footer-color);
   font-family: var(--buf-sans-font);
@@ -54,6 +61,7 @@
     ease-in-out, ease-in-out, ease-in-out, ease-in-out;
   transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s, 0s;
 }
+
 .socialLink:hover {
   opacity: 0.75;
 }
@@ -73,6 +81,7 @@
     background-size 0.4s ease-in-out,
     opacity 0.4s ease-in-out;
 }
+
 .legalLink:hover {
   text-decoration: none;
   background-size: 100% 100%;
@@ -88,15 +97,18 @@
     justify-content: center;
     position: relative;
   }
+
   .legalGroup {
     position: absolute;
     left: 0;
     padding: 0;
     color: var(--buf-footer-color-light);
   }
+
   .copyright {
     color: var(--buf-footer-color-light);
     position: absolute;
+    align-items: end;
     right: 0;
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 6f475698..a8cb11c5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,7 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
+    "jsx": "react",
     "baseUrl": "."
   }
 }