Add support of Global Notification

[naranyinyun]

Is your feature request related to a problem? Please describe.

Sometimes I need to inform the user about a project, such as status or other notifications.

Describe the solution you'd like

I think adding a banner at the top of the page would be a good solution.
It should be at the top of the page, with the content box on the left and centre and a cancel button on the right.

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

You can use layout-top slot for that: https://vitepress.dev/guide/extending-default-theme#layout-slots

Refer this PR for reference: faker-js/faker#1487

[brc-dd]

Keeping it open for docs.

[xsjcTony]

@brc-dd Thanks for redirecting me to here, I've tried your implementation, but I think it's still better to make it built-in.

• https://github.com/faker-js/faker/pull/1487/files#diff-9754133185f3e6c3b638820d12908088f4ad30452a7af1870783a592e0ed950fR56-R70 This part is not dynamic at all. For everytime the content being changed, this needs to be changed, since you never know whether it's going to span multiple lines or not if content is dynamic.
• https://github.com/faker-js/faker/pull/1487/files#diff-9754133185f3e6c3b638820d12908088f4ad30452a7af1870783a592e0ed950fR56-R70 This is indeed not that straight forward from my perspective, that the fact we need to hijack to insert an script into the head just makes it a bit hard to use, especially with different strategies of controlling whether to show the announcement bar or not.

I know those are all for preventing layout shifts during SSR, but it's basically all caused by we are using layout-top slots, and the navbar is with position: fixed in wider screen causing the main content to have top: based on the --layout-top-height.

If we can change the HTML structure a bit, to make it part of the documents instead of inserting into the slot and changes those heights and CSS variables with JS, it's going to be a lot easier to deal with.

Thoughts? 🙏

[xsjcTony]

Once one of the above is missing, it's just hard to get it done.
E.g. the OXC documentation: https://oxc.rs/docs/guide/usage/linter.html
If you close the banner, and refresh the page. You can see a flick of the banner showing up because they missed the script to add .banner-dismissed globally in the head.
And if you refresh the page with the banner open on the small screen, there will be some CLS because the media query px value is not 100% correct.

Those are all because of the lack of built-in support, and due to that we are using the slot way, it's also hard to make it dynamic, e.g. to make it a plugin.

Honestly I think make this built-in is kind of a basic functionality of content-based SSG tool, especially VitePress is widely used for documenting technical tools.