From 0d7bf64a9c32c6d1e3b02c41ea5b96a5c80e856a Mon Sep 17 00:00:00 2001
From: dmitryvinn <dmitryvinn@gmail.com>
Date: Tue, 1 Mar 2022 14:44:17 -0800
Subject: [PATCH 1/3] Adding social banner

---
 docusaurus/website/docusaurus.config.js        | 1 +
 docusaurus/website/src/pages/index.js          | 9 +++++++++
 docusaurus/website/src/pages/styles.module.css | 9 +++++++++
 3 files changed, 19 insertions(+)

diff --git a/docusaurus/website/docusaurus.config.js b/docusaurus/website/docusaurus.config.js
index 571a4643671..5dff68f1a9a 100644
--- a/docusaurus/website/docusaurus.config.js
+++ b/docusaurus/website/docusaurus.config.js
@@ -34,6 +34,7 @@ const siteConfig = {
   themeConfig: {
     image: 'img/logo-og.png',
     algolia: {
+      appId: 'create-react-app',
       apiKey: '3be60f4f8ffc24c75da84857d6323791',
       indexName: 'create-react-app',
     },
diff --git a/docusaurus/website/src/pages/index.js b/docusaurus/website/src/pages/index.js
index feda132f3c1..de1f96eeeb3 100644
--- a/docusaurus/website/src/pages/index.js
+++ b/docusaurus/website/src/pages/index.js
@@ -44,6 +44,15 @@ function Home() {
       permalink={'/'}
       description={'Set up a modern web app by running one command.'}
     >
+      <div>
+          <div className={styles.banner}>
+            Support Ukraine 🇺🇦{' '}
+            <Link to="http://www.facebook.com/fundraisers">
+              Help Provide Humanitarian Aid to Ukraine
+            </Link>
+            .
+          </div>
+        </div>
       <div className={clsx('hero hero--dark', styles.heroBanner)}>
         <div className="container">
           <img
diff --git a/docusaurus/website/src/pages/styles.module.css b/docusaurus/website/src/pages/styles.module.css
index e678866e9a1..0167f42dd86 100644
--- a/docusaurus/website/src/pages/styles.module.css
+++ b/docusaurus/website/src/pages/styles.module.css
@@ -5,6 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+ .banner {
+  font-weight: bold;
+  font-size: 20px;
+  padding: 20px;
+  max-width: 768px;
+  margin: 0 auto;
+  text-align: center;
+ }
+
 .heroBanner {
   padding: 2.5rem 0;
   text-align: center;

From 5bbf32caaff8b25bce546e7db81a237a2ea54eaf Mon Sep 17 00:00:00 2001
From: dmitryvinn <dmitryvinn@gmail.com>
Date: Tue, 1 Mar 2022 22:45:09 -0800
Subject: [PATCH 2/3] Adding social banner in support of Ukraine

---
 docusaurus/website/src/pages/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docusaurus/website/src/pages/index.js b/docusaurus/website/src/pages/index.js
index de1f96eeeb3..6f604c9df80 100644
--- a/docusaurus/website/src/pages/index.js
+++ b/docusaurus/website/src/pages/index.js
@@ -47,7 +47,7 @@ function Home() {
       <div>
           <div className={styles.banner}>
             Support Ukraine 🇺🇦{' '}
-            <Link to="http://www.facebook.com/fundraisers">
+            <Link to="https://opensource.facebook.com/support-ukraine">
               Help Provide Humanitarian Aid to Ukraine
             </Link>
             .

From db2e0cd348cd044702ccc7114340b5f96924e6d2 Mon Sep 17 00:00:00 2001
From: dmitryvinn <dmitryvinn@gmail.com>
Date: Wed, 2 Mar 2022 10:32:02 -0800
Subject: [PATCH 3/3] Moving to use an announcement bar

---
 docusaurus/website/docusaurus.config.js       |  9 ++++
 docusaurus/website/src/css/custom.css         | 42 +++++++++++++++++++
 docusaurus/website/src/pages/index.js         |  9 ----
 .../website/src/pages/styles.module.css       |  9 ----
 4 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/docusaurus/website/docusaurus.config.js b/docusaurus/website/docusaurus.config.js
index 5dff68f1a9a..ff233930156 100644
--- a/docusaurus/website/docusaurus.config.js
+++ b/docusaurus/website/docusaurus.config.js
@@ -33,6 +33,15 @@ const siteConfig = {
   ],
   themeConfig: {
     image: 'img/logo-og.png',
+    announcementBar: {
+      id: 'support_ukraine',
+      content:
+        'Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" \
+        href="https://opensource.facebook.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
+      backgroundColor: '#20232a',
+      textColor: '#fff',
+      isCloseable: false,
+    },
     algolia: {
       appId: 'create-react-app',
       apiKey: '3be60f4f8ffc24c75da84857d6323791',
diff --git a/docusaurus/website/src/css/custom.css b/docusaurus/website/src/css/custom.css
index 81210e25031..18b886fc4a7 100644
--- a/docusaurus/website/src/css/custom.css
+++ b/docusaurus/website/src/css/custom.css
@@ -31,3 +31,45 @@
   flex-shrink: 0;
   max-width: 100%;
 }
+
+
+/* Announcement banner */
+
+:root {
+  --docusaurus-announcement-bar-height: auto !important;
+}
+
+div[class^="announcementBar"][role="banner"] {
+  border-bottom-color: var(--deepdark);
+}
+
+div[class^="announcementBarContent"] {
+  line-height: 40px;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 8px 30px;
+}
+
+div[class^="announcementBarContent"] a {
+  text-decoration: underline;
+  display: inline-block;
+  color: var(--ifm-color-primary) !important;
+}
+
+div[class^="announcementBarContent"] a:hover {
+  color: var(--brand) !important;
+}
+
+@media only screen and (max-width: 768px) {
+  .announcement {
+    font-size: 18px;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .announcement {
+    font-size: 15px;
+    line-height: 22px;
+    padding: 6px 30px;
+  }
+}
diff --git a/docusaurus/website/src/pages/index.js b/docusaurus/website/src/pages/index.js
index 6f604c9df80..feda132f3c1 100644
--- a/docusaurus/website/src/pages/index.js
+++ b/docusaurus/website/src/pages/index.js
@@ -44,15 +44,6 @@ function Home() {
       permalink={'/'}
       description={'Set up a modern web app by running one command.'}
     >
-      <div>
-          <div className={styles.banner}>
-            Support Ukraine 🇺🇦{' '}
-            <Link to="https://opensource.facebook.com/support-ukraine">
-              Help Provide Humanitarian Aid to Ukraine
-            </Link>
-            .
-          </div>
-        </div>
       <div className={clsx('hero hero--dark', styles.heroBanner)}>
         <div className="container">
           <img
diff --git a/docusaurus/website/src/pages/styles.module.css b/docusaurus/website/src/pages/styles.module.css
index 0167f42dd86..e678866e9a1 100644
--- a/docusaurus/website/src/pages/styles.module.css
+++ b/docusaurus/website/src/pages/styles.module.css
@@ -5,15 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
- .banner {
-  font-weight: bold;
-  font-size: 20px;
-  padding: 20px;
-  max-width: 768px;
-  margin: 0 auto;
-  text-align: center;
- }
-
 .heroBanner {
   padding: 2.5rem 0;
   text-align: center;