Add banner for visitors redirected from docs.anthology.com

src/Components/RedirectBanner/RedirectBanner.jsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from "react";
+import styles from "./RedirectBanner.module.css";
+
+const REDIRECT_PARAM = "from";
+const REDIRECT_VALUE = "anthology-redirect";
+const DISMISS_KEY = "anthology-redirect-banner-dismissed";
+
+const RedirectBanner = () => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const wasRedirected = params.get(REDIRECT_PARAM) === REDIRECT_VALUE;
+
+    if (wasRedirected && !window.localStorage.getItem(DISMISS_KEY)) {
+      setVisible(true);
+    }
+
+    if (params.has(REDIRECT_PARAM)) {
+      params.delete(REDIRECT_PARAM);
+      const newSearch = params.toString();
+      const newUrl =
+        window.location.pathname +
+        (newSearch ? `?${newSearch}` : "") +
+        window.location.hash;
+      window.history.replaceState({}, "", newUrl);
+    }
+  }, []);
+
+  const dismiss = () => {
+    setVisible(false);
+    window.localStorage.setItem(DISMISS_KEY, "1");
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className={styles["redirect-banner"]} role="status">
+      <button
+        type="button"
+        className={styles["dismiss-button"]}
+        onClick={dismiss}
+        aria-label="Dismiss"
+      >
+        &times;
+      </button>
+      <span>
+        Did you notice? our url is now <strong>docs.blackboard.com</strong>!
+      </span>
+    </div>
+  );
+};
+
+export default RedirectBanner;

src/Components/RedirectBanner/RedirectBanner.module.css

@@ -0,0 +1,36 @@
+.redirect-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  width: 100%;
+  padding: 0.6rem 1rem;
+  /* Blackboard brand green (#0dac14), darkened for AA contrast with white text */
+  background-color: #0a8a10;
+  border-bottom: 3px solid #0dac14;
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Dark mode gets the lighter/true brand green, matching this repo's existing
+   convention of brighter accent colors in dark mode (see custom.css) */
+:global(html[data-theme="dark"]) .redirect-banner {
+  background-color: #0dac14;
+  border-bottom-color: #7ee383;
+}
+
+.dismiss-button {
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 1.3rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+}
+
+.dismiss-button:hover {
+  opacity: 0.8;
+}

src/theme/Root.js

@@ -0,0 +1,11 @@
+import React from "react";
+import RedirectBanner from "../Components/RedirectBanner/RedirectBanner";
+
+export default function Root({ children }) {
+  return (
+    <>
+      <RedirectBanner />
+      {children}
+    </>
+  );
+}