Add closable App.js banner to docs landing page (#2781)

<img width="1194" alt="image"
src="https://github.com/software-mansion/react-native-gesture-handler/assets/59940332/71db5db8-d285-4888-b041-f8a5c17e8b9c">

docs/docusaurus.config.js

@@ -88,6 +88,11 @@ const config = {
           },
         ],
       },
+      announcementBar: {
+        content: ' ',
+        backgroundColor: '#03c',
+        textColor: '#fff',
+      },
       footer: {
         style: 'light',
         links: [],

docs/src/theme/AnnouncementBar/CloseButton/index.jsx → docs/src/theme/AnnouncementBar/CloseButton/index.js

@@ -14,7 +14,7 @@ export default function AnnouncementBarCloseButton(props) {
       })}
       {...props}
       className={clsx('clean-btn close', styles.closeButton, props.className)}>
-      <IconClose width={14} height={14} strokeWidth={3.1} />
+      <IconClose width={14} height={14} strokeWidth={3.1} color={'#fff'} />
     </button>
   );
 }

docs/src/theme/AnnouncementBar/CloseButton/styles.module.css

@@ -1,19 +1,4 @@
 .closeButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   padding: 0;
   line-height: 0;
-  z-index: 1;
-}
-
-.closeButton svg {
-  color: white;
-}
-
-@media screen and (max-width: 996px) {
-  .closeButton {
-    align-items: flex-start;
-    padding: 24px;
-  }
 }

docs/src/theme/AnnouncementBar/Content/ArrowButton/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+function ArrowButton({ className }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      className={className}
+      viewBox="0 0 24 24">
+      <g>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M7 17L17 7m0 0H7m10 0v10"></path>
+      </g>
+    </svg>
+  );
+}
+
+export default ArrowButton;

docs/src/theme/AnnouncementBar/Content/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import ArrowButton from './ArrowButton';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarContent(props) {
+  return (
+    <div className={clsx(styles.content, props.className)}>
+      <div className={styles.wrapper}>
+        <strong className={styles.headline}>App.js Conf 2024</strong>
+        <p className={styles.subText}>
+          An Expo & React Native conference in Europe is back, May 22-24 in
+          Kraków, Poland!
+        </p>
+      </div>
+      <a
+        className={styles.link}
+        href="https://appjs.co/"
+        target="_blank"
+        rel="noreferrer noopener">
+        <span className={styles.linkTitle}>Learn More</span>
+        <div className={styles.linkArrowContainer}>
+          <ArrowButton className={styles.linkArrow} />
+        </div>
+      </a>
+    </div>
+  );
+}

docs/src/theme/AnnouncementBar/Content/styles.module.css

@@ -5,68 +5,83 @@
   margin: 0 auto;
   max-width: 1440px;
 
-  padding: 10px 0;
+  padding: 1rem 1.5rem;
 }
 
 .content a {
   color: inherit;
-  text-decoration: underline;
 }
+
 .wrapper {
   display: flex;
-  align-items: flex-end;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
   justify-content: center;
 }
 
 .headline {
-  margin-right: 8px;
+  font-size: 16px;
 }
 
-.subText {
+p.subText {
+  font-size: 14px;
   margin: 0;
 }
 
-.subText::before {
-  content: ' - ';
+a.link {
+  text-decoration: none;
 }
 
 .link {
-  font-size: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  padding: 4px 12px;
+  border: 1px solid var(--swm-off-white);
+  border-radius: 6px;
+  background-color: var(--swm-off-white);
+  transition: 0.2s ease-in-out;
+}
+
+.linkTitle {
+  color: #03c;
+  font-weight: 500;
+}
+
+.link:hover {
+  background-color: var(--swm-navy-light-20);
+  border-color: var(--swm-navy-light-20);
+  text-decoration: none;
+}
+
+.linkArrow {
+  width: 16px;
+  height: 16px;
+  color: #03c;
+}
+
+.linkArrowContainer {
+  display: flex;
+  align-items: center;
 }
 
 @media screen and (max-width: 996px) {
   .content {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 20px 24px;
+    gap: 12px;
   }
-
   .wrapper {
     flex-direction: column;
     align-items: flex-start;
-    margin-bottom: 8px;
-  }
-
-  .headline,
-  .subText {
-    font-size: 20px;
-  }
-
-  .subText::before {
-    content: '';
-  }
-
-  .link {
-    font-size: 16px;
   }
 }
-@media screen and (max-width: 600px) {
-  .headline,
-  .subText {
-    font-size: 16px;
-  }
 
-  .link {
-    font-size: 14px;
+@media screen and (max-width: 768px) {
+  .content {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 1rem 1.5rem;
   }
 }

docs/src/theme/AnnouncementBar/index.js

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import { useAnnouncementBar } from '@docusaurus/theme-common/internal';
+import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
+import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import styles from './styles.module.css';
+
+function AnnouncementBar() {
+  const { announcementBar } = useThemeConfig();
+  const { isActive, close } = useAnnouncementBar();
+  const [isPageLoaded, setIsPageLoaded] = useState(
+    document.readyState === 'complete'
+  );
+
+  useEffect(() => {
+    const handlePageLoad = () => {
+      setIsPageLoaded(true);
+    };
+
+    if (document.readyState === 'complete') {
+      setIsPageLoaded(true);
+    } else {
+      window.addEventListener('load', handlePageLoad);
+    }
+
+    return () => {
+      window.removeEventListener('load', handlePageLoad);
+    };
+  }, []);
+
+  if (!isPageLoaded || !isActive) {
+    return null;
+  }
+
+  // hide announcement bar after app.js
+  const today = new Date();
+  const endOfAppJS = new Date('2024-05-25T00:00:00.000Z');
+  if (today > endOfAppJS) {
+    return null;
+  }
+
+  const { backgroundColor, textColor, isCloseable } = announcementBar;
+  return (
+    <BrowserOnly fallback={<div>Loading...</div>}>
+      {() => (
+        <div
+          className={styles.announcementBar}
+          style={{ backgroundColor, color: textColor }}
+          role="banner">
+          {isCloseable && <div className={styles.announcementBarPlaceholder} />}
+          <AnnouncementBarContent className={styles.announcementBarContent} />
+          {isCloseable && (
+            <div className={styles.buttonContainer}>
+              <AnnouncementBarCloseButton
+                onClick={close}
+                className={styles.announcementBarClose}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </BrowserOnly>
+  );
+}
+
+export default function HOCAnnouncementBar() {
+  return (
+    <BrowserOnly fallback={<div></div>}>
+      {() => <AnnouncementBar />}
+    </BrowserOnly>
+  );
+}