From 8146209091b4a3f5fc3db62f3492d132a24931c2 Mon Sep 17 00:00:00 2001
From: Dmitry Vinnik <dmitryvinn@users.noreply.github.com>
Date: Wed, 2 Mar 2022 10:52:51 -0800
Subject: [PATCH] docs: add homepage banner in support of Ukraine (#12113)

---
 docusaurus/website/docusaurus.config.js | 10 ++++++
 docusaurus/website/src/css/custom.css   | 42 +++++++++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/docusaurus/website/docusaurus.config.js b/docusaurus/website/docusaurus.config.js
index 571a4643671..ff233930156 100644
--- a/docusaurus/website/docusaurus.config.js
+++ b/docusaurus/website/docusaurus.config.js
@@ -33,7 +33,17 @@ 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',
       indexName: 'create-react-app',
     },
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;
+  }
+}