Added announcement bar

docusaurus.config.js

@@ -95,6 +95,10 @@ const config = {
     themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
         ({
+            announcementBar: {
+                id: 'warning',
+                content: 'This website is still under development and is missing a lot of information. <a href="https://docs.altv.mp">Click here to access the latest docs.</a>'
+            },
             metadata: [
                 {
                     name: 'darkreader-lock',

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

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

@@ -0,0 +1,4 @@
+.closeButton {
+  padding: 0;
+  line-height: 0;
+}

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

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

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, id} = announcementBar;
+  return (
+    <div
+      className={`${styles.announcementBar} ${id ? ('announcementBar-' + id) : ''}`}
+      style={{backgroundColor, color: textColor}}
+      role="banner">
+      {isCloseable && <div className={styles.announcementBarPlaceholder} />}
+      <AnnouncementBarContent className={styles.announcementBarContent} />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
+          onClick={close}
+          className={styles.announcementBarClose}
+        />
+      )}
+    </div>
+  );
+}

src/theme/AnnouncementBar/styles.module.css

@@ -0,0 +1,67 @@
+:root {
+  --docusaurus-announcement-bar-height: auto;
+}
+
+.announcementBar {
+  display: flex;
+  align-items: center;
+  height: var(--docusaurus-announcement-bar-height);
+  /*background-color: var(--ifm-color-white);*/
+  color: var(--ifm-color-black);
+
+  /*
+  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);
+}
+
+:global .announcementBar-warning {
+  --site-announcement-bar-stripe-color1: hsl(44, 100%, 10%);
+  --site-announcement-bar-stripe-color2: black;
+  color: white;
+  font-weight: bold;
+  background: repeating-linear-gradient(35deg,var(--site-announcement-bar-stripe-color1),var(--site-announcement-bar-stripe-color1) 20px,var(--site-announcement-bar-stripe-color2) 10px,var(--site-announcement-bar-stripe-color2) 40px)
+}
+
+:global(.announcementBar-warning) .announcementBarClose {
+  color: white;
+}
+
+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;
+  }
+}