From c4ae3280a494f40b61880a05786751b37b7aadac Mon Sep 17 00:00:00 2001
From: Mark <mhamilton723@gmail.com>
Date: Wed, 17 Nov 2021 14:47:36 -0500
Subject: [PATCH] docs: add website announcement bar

---
 website/docusaurus.config.js |  4 ++++
 website/src/css/custom.css   | 22 ++++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 9e75fd3b0d..8797aa319b 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -123,6 +123,10 @@ module.exports = {
       trackingID: 'G-RWPE0183E8',
       anonymizeIP: true,
     },
+    announcementBar: {
+      id: 'announcementBar-1', // Increment on change
+      content: `⭐️ If you like SynapseML, consider giving it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/Microsoft/SynapseML">GitHub</a> ⭐`,
+    },
   },
   presets: [
     [
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 814516a9ba..ea32162ac5 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -5,6 +5,9 @@
  */
 
 :root {
+
+  --site-primary-hue-saturation: 167, 68%;
+
   --ifm-color-primary: #3578e5;
   --ifm-color-primary-dark: #1d68e1;
   --ifm-color-primary-darker: #1b62d4;
@@ -173,3 +176,22 @@ html[data-theme='dark'] .DocSearch {
 .markdown > table td {
   min-width: 160px;
 }
+
+div[class^='announcementBar_'] {
+  --site-announcement-bar-stripe-color1: hsl(
+          var(--site-primary-hue-saturation),
+          85%
+  );
+  --site-announcement-bar-stripe-color2: hsl(
+          var(--site-primary-hue-saturation),
+          95%
+  );
+  background: repeating-linear-gradient(
+          35deg,
+          var(--site-announcement-bar-stripe-color1),
+          var(--site-announcement-bar-stripe-color1) 20px,
+          var(--site-announcement-bar-stripe-color2) 10px,
+          var(--site-announcement-bar-stripe-color2) 40px
+  );
+  font-weight: bold;
+}