From 6b41a41a6130555881eaee9fbeb175d90fdd4434 Mon Sep 17 00:00:00 2001
From: Matt Carroll <mattca@meta.com>
Date: Wed, 31 Jan 2024 17:21:21 -0800
Subject: [PATCH 1/2] Add React Conf banner

---
 src/components/Banner.tsx      | 58 ++++++++++++++++++++++++++++++++++
 src/components/Layout/Page.tsx |  8 +++++
 2 files changed, 66 insertions(+)
 create mode 100644 src/components/Banner.tsx

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
new file mode 100644
index 00000000000..16c152b1c33
--- /dev/null
+++ b/src/components/Banner.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {useState, useRef, useEffect} from 'react';
+import cn from 'classnames';
+import {ExternalLink} from './ExternalLink';
+
+export default function Banner({
+  text,
+  link,
+  linkText,
+}: {
+  text: string;
+  link: string;
+  linkText: string;
+}) {
+  const [isVisible, setIsVisible] = useState(true);
+  const ref = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    function patchedScrollTo(x: number, y: number) {
+      if (y === 0) {
+        // We're trying to reset scroll.
+        // If we already scrolled past the banner, consider it as y = 0.
+        const bannerHeight = ref.current?.offsetHeight ?? 0; // Could be zero (e.g. mobile)
+        y = Math.min(window.scrollY, bannerHeight);
+      }
+      return realScrollTo(x, y);
+    }
+    const realScrollTo = window.scrollTo;
+    (window as any).scrollTo = patchedScrollTo;
+    return () => {
+      (window as any).scrollTo = realScrollTo;
+    };
+  }, []);
+  if (!isVisible) return null;
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        `h-[40px] hidden lg:flex w-full bg-gray-100 dark:bg-gray-700 text-base md:text-lg py-2 sm:py-0 items-center flex-col sm:flex-row space-x-4`
+      )}>
+      <div className="hidden sm:block flex-grow text-center">
+        {text}
+        <ExternalLink
+          className="ms-0 sm:ms-1 text-link dark:text-link-dark hover:underline"
+          href={link}>
+          {linkText}
+        </ExternalLink>
+      </div>
+      <button
+        onClick={() => setIsVisible(false)}
+        className="text-3xl text-gray-800 ml-auto">
+        &times;
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 5194279c280..4e535c05c26 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -9,6 +9,7 @@ import {SidebarNav} from './SidebarNav';
 import {Footer} from './Footer';
 import {Toc} from './Toc';
 import SocialBanner from '../SocialBanner';
+import Banner from '../Banner';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {Seo} from 'components/Seo';
 import ButtonLink from 'components/ButtonLink';
@@ -117,6 +118,13 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         image={`/images/og-` + section + '.png'}
         searchOrder={searchOrder}
       />
+      <Banner
+        text={
+          'React Conf is on May 15-16! Grab your tickets, sign up for updates, and join the free livestream at'
+        }
+        link={'https://conf.react.dev'}
+        linkText={'conf.react.dev'}
+      />
       <SocialBanner />
       <TopNav
         section={section}

From c74cdbd006c658e6d3aea02e015bc12cb9875601 Mon Sep 17 00:00:00 2001
From: Matt Carroll <mattca@meta.com>
Date: Wed, 31 Jan 2024 20:14:55 -0800
Subject: [PATCH 2/2] Remove previous banner

---
 src/components/Banner.tsx       | 58 ---------------------------------
 src/components/Layout/Page.tsx  |  8 -----
 src/components/SocialBanner.tsx |  8 ++---
 3 files changed, 3 insertions(+), 71 deletions(-)
 delete mode 100644 src/components/Banner.tsx

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
deleted file mode 100644
index 16c152b1c33..00000000000
--- a/src/components/Banner.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- */
-
-import {useState, useRef, useEffect} from 'react';
-import cn from 'classnames';
-import {ExternalLink} from './ExternalLink';
-
-export default function Banner({
-  text,
-  link,
-  linkText,
-}: {
-  text: string;
-  link: string;
-  linkText: string;
-}) {
-  const [isVisible, setIsVisible] = useState(true);
-  const ref = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    function patchedScrollTo(x: number, y: number) {
-      if (y === 0) {
-        // We're trying to reset scroll.
-        // If we already scrolled past the banner, consider it as y = 0.
-        const bannerHeight = ref.current?.offsetHeight ?? 0; // Could be zero (e.g. mobile)
-        y = Math.min(window.scrollY, bannerHeight);
-      }
-      return realScrollTo(x, y);
-    }
-    const realScrollTo = window.scrollTo;
-    (window as any).scrollTo = patchedScrollTo;
-    return () => {
-      (window as any).scrollTo = realScrollTo;
-    };
-  }, []);
-  if (!isVisible) return null;
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        `h-[40px] hidden lg:flex w-full bg-gray-100 dark:bg-gray-700 text-base md:text-lg py-2 sm:py-0 items-center flex-col sm:flex-row space-x-4`
-      )}>
-      <div className="hidden sm:block flex-grow text-center">
-        {text}
-        <ExternalLink
-          className="ms-0 sm:ms-1 text-link dark:text-link-dark hover:underline"
-          href={link}>
-          {linkText}
-        </ExternalLink>
-      </div>
-      <button
-        onClick={() => setIsVisible(false)}
-        className="text-3xl text-gray-800 ml-auto">
-        &times;
-      </button>
-    </div>
-  );
-}
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 4e535c05c26..5194279c280 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -9,7 +9,6 @@ import {SidebarNav} from './SidebarNav';
 import {Footer} from './Footer';
 import {Toc} from './Toc';
 import SocialBanner from '../SocialBanner';
-import Banner from '../Banner';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {Seo} from 'components/Seo';
 import ButtonLink from 'components/ButtonLink';
@@ -118,13 +117,6 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         image={`/images/og-` + section + '.png'}
         searchOrder={searchOrder}
       />
-      <Banner
-        text={
-          'React Conf is on May 15-16! Grab your tickets, sign up for updates, and join the free livestream at'
-        }
-        link={'https://conf.react.dev'}
-        linkText={'conf.react.dev'}
-      />
       <SocialBanner />
       <TopNav
         section={section}
diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx
index e980b6f4d7b..4e1bf8e3db0 100644
--- a/src/components/SocialBanner.tsx
+++ b/src/components/SocialBanner.tsx
@@ -7,9 +7,9 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-const bannerText = 'Support Ukraine 🇺🇦';
-const bannerLink = 'https://opensource.fb.com/support-ukraine';
-const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine';
+const bannerText = 'Join us for React Conf on May 15-16.';
+const bannerLink = 'https://conf.react.dev/';
+const bannerLinkText = 'Learn more.';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -39,9 +39,7 @@ export default function SocialBanner() {
       <ExternalLink
         className="ms-0 sm:ms-1 text-link dark:text-link-dark hover:underline"
         href={bannerLink}>
-        <div className="inline sm:hidden">🇺🇦 </div>
         {bannerLinkText}
-        <span className="hidden sm:inline">.</span>
       </ExternalLink>
     </div>
   );