feat: add logos of folks providing free infra (#482)

Co-authored-by: Erick Zhao <[email protected]>

src/theme/Footer/Layout/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import styles from './styles.module.scss';
+
+export default function FooterLayout({
+  style,
+  links,
+  logo,
+  copyright,
+}: {
+  style: string;
+  links: React.ReactNode;
+  logo: React.ReactNode;
+  copyright: React.ReactNode;
+}) {
+  return (
+    <footer
+      className={clsx('footer', {
+        'footer--dark': style === 'dark',
+      })}
+    >
+      <div className="container container-fluid">
+        {links}
+        {(logo || copyright) && (
+          <div className={styles.footerSplit}>
+            <div className="footer__bottom text--left">
+              {logo && <div className="margin-bottom--sm">{logo}</div>}
+              {copyright}
+            </div>
+            <div className="footer__bottom text--right">
+              <div className="margin-bottom--sm">
+                Hosting and infrastructure graciously provided by
+              </div>
+              <div className={styles.logoCluster}>
+                <img src="/assets/third-parties/azure.png" />
+                <img
+                  src="/assets/third-parties/heroku_dark.png"
+                  className={styles.darkOnly}
+                />
+                <img
+                  src="/assets/third-parties/heroku_light.png"
+                  className={styles.lightOnly}
+                />
+                <img
+                  src="/assets/third-parties/datadog_dark.png"
+                  className={styles.darkOnly}
+                />
+                <img
+                  src="/assets/third-parties/datadog_light.png"
+                  className={styles.lightOnly}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+}

src/theme/Footer/Layout/styles.module.scss

@@ -0,0 +1,46 @@
+.footerSplit {
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column-reverse;
+    flex-wrap: wrap;
+
+    > :first-child,
+    > :last-child {
+      text-align: center;
+    }
+  }
+
+  > div {
+    display: inline-block;
+    width: 50%;
+
+    @media (max-width: 768px) {
+      width: 100%;
+
+      &:last-child {
+        margin-bottom: 24px;
+      }
+    }
+  }
+}
+
+.logoCluster > img {
+  margin: 0 12px;
+  height: 40px;
+}
+
+.darkOnly {
+  display: none;
+}
+
+.lightOnly {
+  display: none;
+}
+
+[data-theme='dark'] .darkOnly {
+  display: initial;
+}
+
+[data-theme='light'] .lightOnly {
+  display: initial;
+}