Add Redux.dev course banners

Author: markerikson

website/docusaurus.config.js

@@ -67,6 +67,21 @@ const siteConfig = {
       theme: require('./static/scripts/monokaiTheme.js'),
     },
     image: 'img/redux-logo-landscape.png',
+    announcementBar: {
+      id: 'redux-dev-course',
+      content: `      
+      <a href="https://redux.dev">
+        <img
+          src="/img/course-callout-wide.svg"
+          alt="Redux.dev - a new course by Mark Erikson + ui.dev - Learn more"
+          style="margin-top: 5px;"
+        />
+      </a>
+      `,
+      backgroundColor: '#fafbfc',
+      textColor: '#091E42',
+      isCloseable: false,
+    },
     navbar: {
       title: 'React Redux',
       logo: {

website/src/pages/index.js

@@ -156,6 +156,14 @@ function Home() {
             </div>
           </section>
         )}
+        <section className="course-callout home-mid">
+          <a href="https://redux.dev">
+            <img
+              src="/img/course-callout-mid.svg"
+              alt="Redux.dev - a new course by Mark Erikson + ui.dev - Learn more"
+            />
+          </a>
+        </section>
         {otherLibraries && otherLibraries.length && (
           <section className={styles.features}>
             <div className="container">

website/static/css/custom.css

@@ -233,3 +233,15 @@ a:visited {
   fill: black;
   stroke: black;
 }
+
+/* course callout on home page */
+.course-callout.home-mid {
+  max-width: 900px;
+  margin: 1rem auto 2rem;
+}
+
+div[class*='announcementBar_'] {
+  /* Intentionally override the theme behavior,
+  so that the course banner image is effectively cropped*/ 
+  z-index: calc(var(--ifm-z-index-fixed) -1) !important;
+}