feat(v2): add announcement bar

[lex111]

Motivation

Resolve https://docusaurus.canny.io/admin/board/feature-requests/p/announcement-bar

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Preview.

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit b652771

https://deploy-preview-2330--docusaurus-2.netlify.com

[lex111]

FYI may not be the best solution because sticky navbar here makes it difficult to "elegantly" implement such a thing. Any improvements are welcome!

[yangshun]

I don't think this should be added to Navbar. Can we add it into Layout and leave Navbar alone? I hope this is possible if the styling is not affected.

Most users will not AnnouncementBar but everyone needs Navbar. Doing this will just bloat up the Navbar.

[lex111]

@yangshun It was a bit tricky, but now it really got better, re-check it please.

[yangshun]

I think there's a bug - after I dismiss the announcement bar and refresh the page, the page layout goes haywire totally.

To be honest I'm not really in favor of this feature as it makes the code much more complicated to work together with the existing Nav. But both Gatsby and Next.js websites have an announcement bar :/

Let's fix the bugs first then I'll try to improve the code.

[yangshun]

Better to namespace it - docusaurus.announcement.dismiss.

I'd also recommend adding allowing a key for the announcement config. Otherwise users will never ever see new announcements after they've dismissed an announcement. Library authors can create new announcements but it will never show up for users who have dismissed announcements before.

We can allow the announcement config to take in a key/id prop that is added at the end of the storage key so that new announcements will still be visible to users who have dismissed older announcements - docusaurus.announcement.dismiss.<id>

[lex111]

I think there's a bug - after I dismiss the announcement bar and refresh the page, the page layout goes haywire totally.

I'll see what is wrong 😱 😱 😱 . But why is the current code bad?

[lex111]

@yangshun I fixed all the bugs, now it should be fine, check again please.

[lex111]

I reworked PR according to new changes (navbar via sticky positioning)

[yangshun]

Let's release this in alpha.45. Some issues which still exist:

• I don't want to overload theme/Layout with non-essential features. If a user is not using the announcement feature they are still paying the cost of it. Using dynamic imports would be better
• Serializing the content to use as a key is less work, but letting the user specify a key is still better. If the user had a typo and they fixed it later on, the announcement shows up twice

[lex111]

Serializing the content to use as a key is less work, but letting the user specify a key is still better. If the user had a typo and they fixed it later on, the announcement shows up twice

This is an additional work for user, since in addition to the announcement text, they needs to specify a new id. It seems to me serialization would be enough, because, for example, typos is a rare use case..

[lex111]

@yangshun I reworked component (using ids, styles, updating docs). I think it would be nice to delivery this feature in a new release.

[lex111]

Apparently we need to add a shadow or border for better view in light mode 🤔

[nebrelbug]

@lex111 this is awesome! I personally think it might look nice in the same color of the search bar, which is (I think) var(--ifm-navbar-search-input-background-color)