'How to add a top alert banner on Docusaurus 1.x?

I want to show some global message on my Docusaurus site. Something like:

example

https://codesandbox.io/s/duudl

https://next.ant.design/components/alert/

Is this possible?

docusaurus


Solution 1:[1]

You will have to inject the DOM via scripts. An example is React Native website where they injected feedback banners at the bottom of the page - https://facebook.github.io/react-native/docs/getting-started

Look at their repo and the script they used.

Solution 2:[2]

Update: you can now add it to the docusaurus.config.js file:

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      announcementBar: {
        id: 'support_ukraine',
        content:
          'Support Ukraine ?? <a target="_blank" rel="noopener noreferrer" href="https://opensource.facebook.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
        backgroundColor: '#20232a',
        textColor: '#fff',
        isCloseable: false,
      },
 ...

You can style it with these CSS selectors in src/css/customTheme.scss:

/* Announcement banner */

:root {
  --docusaurus-announcement-bar-height: auto !important;
}

div[class^="announcementBar"][role="banner"] {
  border-bottom-color: var(--deepdark);

  button.close {
    svg {
      fill: white;
    }
  }
}

div[class^="announcementBarContent"] {
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
  padding: 8px 30px;

  a {
    text-decoration: underline;
    display: inline-block;
    color: var(--brand) !important;

    &:hover {
      color: var(--ifm-color-primary) !important;
    }
  }
}

@media only screen and (max-width: 768px) {
  .announcement {
    font-size: 18px;
  }
}

@media only screen and (max-width: 500px) {
  .announcement {
    font-size: 15px;
    line-height: 22px;
    padding: 6px 30px;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yangshun Tay
Solution 2 Ramin

Related Questions