Add new Banner module

[gkoscky]

What

The new Banner module allows for much easier creation, deployment, tear-down of promotional banners on the Flashbots website. Banners can be created by just editing a new configuration file - Banner.config.tsx - to set the content, basic appearance, and display period. This greatly simplifies the process of adding promotional content to the page, compared to all the manual dev work required before.

The module gives you the option to set:

• Banner content: This can be in plain-text or full HTML markup
• Background color: A solid background color for the banner
• Text color: Color for the banner text
• Start date: When the banner should appear on the site
• End date: When the banner should stop appearing on the site
• Custom CSS: Allows you to override the background and text colors and use a full set of CSS rules from a custom file

These allow you to create any kind of banner, from very basic notifications to fully-styled promotional banners.

How to create a new banner

To add a new banner all you need to do is edit the properties in components/banner/Banner.config.tsx and set them to your desired values. For simple banners with just a couple of colors - for copy and background - you can use the properties there. But if the banner requires more sophisticated styling you can override the color options by setting customCSS: true and adding your CSS rules to components/banner/Banner.custom.module.scss.

There are detailed explanations for each property in the configuration file itself.

How it works

The new Banner module is loaded by the Navbar module, injecting a banner right above the navigation menu:

flashbots-docs/src/theme/Navbar/index.js

Lines 8 to 12 in 69cf4a6

	<div className={styles.combinedNavigation}>
	<Banner/>
	<Navbar {...props} />
	</div>
	);

All of relevant configuration files (for banner options and custom CSS) live inside the components/banner folder to make it easier for users to find and edit them if needed.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
flashbots-docs	✅ Ready (Inspect)	Visit Preview	Nov 22, 2023 9:24pm

[deadpine]

LGTM. Is it necessary to include the sass plugin?

[gkoscky]

LGTM. Is it necessary to include the sass plugin?

Yes. The CSS importing, supporting the standard and custom rules, wouldn't work without it. I think there's a way to do it without SASS, but we'd have to refactor all of the CSS parts.

(which, to be honest, I kind of want to do but for a v1.5)