Add Redux.dev course banners

website/docusaurus.config.js

@@ -71,6 +71,21 @@ module.exports = {
     colorMode: {
       respectPrefersColorScheme: true,
     },
+    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: 'Redux Toolkit',
       logo: {

website/src/css/custom.css

@@ -272,3 +272,15 @@ table.checkbox-table tbody td {
   color: var(--ifm-color-info);
   position: relative;
 }
+
+/* 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;
+}

website/src/pages/index.js

@@ -176,6 +176,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">