Announcement Banner Fixes

[zstix]

Description

This addresses a few issues that are specific to the developer site when it comes to using the Announcement Banner:

• Fixes an issue where Gatsby would try to create a new page for an announcement MDX file
• Fixes an issue where the sidebar was appearing under the header when a banner was present

Reviewer Notes

I added a hook called useResizeObserver that uses ResizeObserver under the hood. This may be helpful in other locations. At the moment, it's just set up to work with height, but we can make it more generalized if we want.

Related Issue(s) / Ticket(s)

N/A

Screenshot(s)

With a Banner:

Without a Banner:

[jerelmiller]

It looks like we may need to polyfill the ResizeObserver when building.

2020-09-08T22:08:45.576Z [INFO]: 5 |   const [height, setHeight] = useState(0);
                                 6 |
                                 >  7 |   const resizeObserver = new ResizeObserver((entries) => {
                                 |                          ^
                                 8 |     entries.forEach((entry) => {
                                 9 |       setHeight(entry.contentBoxSize.blockSize);
                                 10 |     });
                                 �[0m
                                 �[0m  �[0m�[97m�[41mWebpackError�[0m�[37m�[41m:�[0m�[37m�[41m �[0m�[97m�[41mReferenceError: ResizeObserver is not defined�[0m

[zstix]

I fixed the build issue with ResizeObserver but it looks like the build fails on some new functionality that comes from the AnnouncementBanner in the theme. Going to work on a fix there and then bump the version in this branch.

[nr-opensource-bot]

🎉 This PR is included in version 1.20.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀