docs: add app.js banner

docs/docusaurus.config.js

@@ -125,6 +125,12 @@ module.exports = {
     prism: {
       theme: prismConfig,
     },
+    announcementBar: {
+      id: 'appjs_announcement',
+      content: 'mleko', // content is set in swizzled component but docusaurus requires it to be non-empty
+      backgroundColor: '#0033CC',
+      textColor: '#FFFFFF',
+    },
   },
   presets: [
     [

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import clsx from 'clsx';
+import { translate } from '@docusaurus/Translate';
+import IconClose from '@theme/Icon/Close';
+import styles from './styles.module.css';
+export default function AnnouncementBarCloseButton(props) {
+  return (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+        message: 'Close',
+        description: 'The ARIA label for close button of announcement bar',
+      })}
+      {...props}
+      className={clsx('clean-btn close', styles.closeButton, props.className)}>
+      <IconClose width={14} height={14} strokeWidth={3.1} />
+    </button>
+  );
+}

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

@@ -0,0 +1,19 @@
+.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/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarContent(props) {
+  return (
+    <div {...props} className={clsx(styles.content, props.className)}>
+      <div className={styles.wrapper}>
+        <strong className={styles.headline}>We're organizing app.js</strong>
+        <p className={styles.subText}>
+          a React Native & Expo-focused conference
+        </p>
+      </div>
+      <a
+        className={styles.link}
+        href="https://appjs.co/"
+        target="_blank"
+        rel="noreferrer noopener">
+        Learn more
+      </a>
+    </div>
+  );
+}

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

@@ -0,0 +1,69 @@
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 1440px;
+
+  padding: 10px 0;
+}
+
+.content a {
+  color: inherit;
+  text-decoration: underline;
+}
+.wrapper {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.headline {
+  margin-right: 8px;
+}
+
+.subText {
+  margin: 0;
+}
+
+.subText::before {
+  content: ' - ';
+}
+
+.link {
+  font-size: 20px;
+}
+
+@media screen and (max-width: 996px) {
+  .content {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px 24px;
+  }
+  .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;
+  }
+}

docs/src/theme/AnnouncementBar/index.jsx

@@ -0,0 +1,48 @@
+import React 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 styles from './styles.module.css';
+import Particles from './particles.svg';
+
+export default function AnnouncementBar() {
+  const { announcementBar } = useThemeConfig();
+  const { isActive, close } = useAnnouncementBar();
+  if (!isActive) {
+    return null;
+  }
+  const { backgroundColor, textColor, isCloseable } = announcementBar;
+
+  // hide announcement bar after app.js
+  const today = new Date();
+  const endOfAppJS = new Date('2023-05-13T00:00:00.000Z');
+  if (today > endOfAppJS) {
+    return null;
+  }
+
+  return (
+    <div
+      className={styles.announcementBar}
+      style={{
+        backgroundColor,
+        color: textColor,
+      }}
+      role="banner">
+      <Particles
+        className={`${styles.announcementBarAdornment} ${styles.announcementBarLeftAdornment}`}
+      />
+      {isCloseable && <div className={styles.announcementBarPlaceholder} />}
+      <AnnouncementBarContent className={styles.announcementBarContent} />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
+          onClick={close}
+          className={styles.announcementBarClose}
+        />
+      )}
+      <Particles
+        className={`${styles.announcementBarAdornment} ${styles.announcementBarRightAdornment}`}
+      />
+    </div>
+  );
+}