Adding CNCF logo to footer (#163)

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

---------

Co-authored-by: Nick Snyder <[email protected]>
Signed-off-by: Steve Ayers <[email protected]>

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>
   );

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;
   }
 }

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": "."
   }
 }