Update docs with version warning

Author: kpgalligan

website/docusaurus.config.js

@@ -195,6 +195,12 @@ const config = {
           darkTheme: darkCodeTheme,
           additionalLanguages: ['kotlin', 'java', 'ruby', 'swift', 'toml'],
         },
+        announcementBar: {
+          id: 'kmmbridge_old_bar',
+          content:
+              'These docs are for older versions of KMMBridge. Please go to <a target="_blank" href="https://touchlab.co/kmmbridge/">https://touchlab.co/kmmbridge/</a> for the updated KMMBridge info.',
+          isCloseable: true,
+        },
       }),
 };
 

website/src/theme/AnnouncementBar/CloseButton/index.js

@@ -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>
+  );
+}

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

@@ -0,0 +1,5 @@
+.closeButton {
+  padding: 0;
+  line-height: 0;
+  @apply text-white opacity-100;
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function AnnouncementBarContent(props) {
+  const {announcementBar} = useThemeConfig();
+  const {content} = announcementBar;
+  return (
+    <div
+      {...props}
+      className={clsx(styles.content, props.className)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: content}}
+    />
+  );
+}

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

@@ -0,0 +1,10 @@
+.content {
+  font-size: 85%;
+  text-align: center;
+  padding: 5px 0;
+}
+
+.content a {
+  color: inherit;
+  text-decoration: underline;
+}

website/src/theme/AnnouncementBar/index.js

@@ -0,0 +1,29 @@
+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';
+export default function AnnouncementBar() {
+  const {announcementBar} = useThemeConfig();
+  const {isActive, close} = useAnnouncementBar();
+  if (!isActive) {
+    return null;
+  }
+  const {backgroundColor, textColor, isCloseable} = announcementBar;
+  return (
+    <div
+      className={`${styles.announcementBar} kmmbridge_old_bar`}
+      style={{backgroundColor, color: textColor}}
+      role="banner">
+      {isCloseable && <div className={styles.announcementBarPlaceholder} />}
+      <AnnouncementBarContent className={styles.announcementBarContent} />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
+          onClick={close}
+          className={styles.announcementBarClose}
+        />
+      )}
+    </div>
+  );
+}

website/src/theme/AnnouncementBar/styles.module.css

@@ -0,0 +1,62 @@
+:root {
+  --docusaurus-announcement-bar-height: auto;
+}
+
+.announcementBar {
+  @apply py-4;
+  background: repeating-linear-gradient(
+          45deg,
+          #ff3333,
+          #ff3333 10px,
+          #cc3333 10px,
+          #cc3333 20px
+  );
+  @apply text-2xl font-bold text-white;
+  text-shadow: 1px 1px 7px #000;
+  display: flex;
+  align-items: center;
+
+  /*
+  Unfortunately we can't make announcement bar render above the navbar
+  IE need to use border-bottom instead of shadow
+  See https://github.com/facebookincubator/infima/issues/275
+
+  box-shadow: var(--ifm-global-shadow-lw);
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+  */
+  border-bottom: 1px solid var(--ifm-color-emphasis-100);
+}
+
+html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
+  display: none;
+}
+
+.announcementBarPlaceholder {
+  flex: 0 0 10px;
+}
+
+.announcementBarClose {
+  flex: 0 0 30px;
+  align-self: stretch;
+}
+
+.announcementBarContent {
+  flex: 1 1 auto;
+}
+
+@media print {
+  .announcementBar {
+    display: none;
+  }
+}
+
+@media (min-width: 997px) {
+  :root {
+    --docusaurus-announcement-bar-height: 30px;
+  }
+
+  .announcementBarPlaceholder,
+  .announcementBarClose {
+    flex-basis: 50px;
+  }
+}