-
Notifications
You must be signed in to change notification settings - Fork 150
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add SASS/SCSS support * Add new Banner module To allow us to create promotional banners more quickly and easily than before. * Fix module reference
- Loading branch information
Showing
10 changed files
with
287 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -102,6 +102,7 @@ module.exports = async function createConfigAsync() { | |
| }, | ||
| }; | ||
| }, | ||
| 'docusaurus-plugin-sass' | ||
| ], | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| @use '_base'; | ||
|
|
||
| /* | ||
| Add custom CSS styling for your banner here | ||
| You can add any classes you'd like based on the markup for your banner | ||
| The .banner class is already provided and apply to the parent element of | ||
| the banner. | ||
| The '@extend %banner-structure' defines the structural properties for the | ||
| banner and should not be removed. | ||
| */ | ||
|
|
||
| .banner { | ||
| @extend %banner-structure; // Do not remove | ||
| } | ||
|
|
||
|
|
||
| [data-theme=dark] .banner { | ||
| @extend %banner-structure; // Do not remove | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| @use 'base'; | ||
|
|
||
| .banner { | ||
| @extend %banner-structure; | ||
|
|
||
| background-color: var(--banner-background-color, var(--ifm-navbar-background-color)); | ||
| color: var(--banner-text-color, var(--ifm-font-color-base)); | ||
|
|
||
| a { | ||
| color: var(--banner-text-color , var(--ifm-font-color-base)); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| /* Custom Banner Module | ||
| Use it to quickly deploy a simple banner to the Flashbots homepage | ||
| To add a new banner all you need to do is edit the ./banner.config.tsx | ||
| file and set the applicable properties. No other work is necessary. | ||
| You'll find more in-depth documentation there. | ||
| */ | ||
|
|
||
| import React from 'react' | ||
| import clsx from 'clsx' | ||
| import bannerConfig from './banner.config' | ||
| import customStyles from './Banner.custom.module.scss' | ||
| import bannerStyles from './Banner.module.scss' | ||
|
|
||
| export interface BannerOptions { | ||
| bannerContent?: JSX.Element | string | null | ||
| backgroundColor: string | ||
| textColor: string | ||
| startDate: string | null | ||
| endDate: string | null | ||
| customBannerCSS: boolean | ||
| } | ||
|
|
||
| class BannerConfigs { | ||
| options: BannerOptions | ||
|
|
||
| constructor(options: BannerOptions) { | ||
| this.options = options | ||
| } | ||
|
|
||
| // Sets the appropriate CSS rules for the element | ||
| // based on the `customCSS` option | ||
| getBannerStyle(): React.CSSProperties | null { | ||
| return !this.options.customBannerCSS | ||
| ? { | ||
| "--banner-text-color": this.options.textColor, | ||
| "--banner-background-color": this.options.backgroundColor | ||
| } | ||
| : null | ||
| } | ||
|
|
||
| // Sets the appropriate class name for the element | ||
| // based on the `customCSS` option | ||
| getBannerClass(): string { | ||
| const styles = this.options.customBannerCSS ? customStyles : bannerStyles | ||
|
|
||
| return clsx(styles.banner) | ||
| } | ||
|
|
||
| // Determines whether the banner should appear based on: | ||
| // 1. Whether there is content to be shown | ||
| // 2. The start and end dates exist and are valid | ||
| shouldShowBanner(): boolean { | ||
| if (!this.options.bannerContent) { | ||
| return false | ||
| } | ||
|
|
||
| const parsedStart = Date.parse(this.options.startDate) | ||
| const parsedEnd = Date.parse(this.options.endDate) | ||
| const currentDate = Date.now() | ||
|
|
||
| return ( | ||
| (isNaN(parsedStart) || parsedStart <= currentDate) && | ||
| (isNaN(parsedEnd) || parsedEnd >= currentDate) | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default function Banner(): JSX.Element { | ||
| const configs = new BannerConfigs(bannerConfig) | ||
|
|
||
| if (!configs.shouldShowBanner()) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <div style={configs.getBannerStyle()} className={configs.getBannerClass()}> | ||
| {configs.options.bannerContent} | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| %banner-structure { | ||
| height: fit-content; | ||
| padding: 0.5rem 2rem; | ||
| text-align: center; | ||
| line-height: 1.25; | ||
|
|
||
| a{ | ||
| cursor: pointer; | ||
| text-decoration: none; | ||
|
|
||
| &:hover { | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 720px){ | ||
| padding: 0.5rem 2rem; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| /* Custom Banner Module | ||
| Use it to quickly deploy a simple banner to the Flashbots homepage | ||
| To add a new banner all you need to do is edit the properties below 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 here. But if the banner requires more sophisticated styling | ||
| you can override the color options by setting `customCSS: true` and adding your CSS | ||
| rules to ./Banner.custom.module.scss. | ||
| There are detailed explanations for each property below, but here's a quick guide: | ||
| - bannerContent: What should appear inside the banner | ||
| - backgroundColor: Solid, single color for the banner | ||
| - textColor: Solid, single color for all the copy inside the banner | ||
| - startDate: When should the banner start appearing on the site | ||
| - endDate: When should the banner stop appearing on the site | ||
| - customCSS: Whether the banner should make use of custom CSS rules loaded from ./Banner.custom.module.scss | ||
| */ | ||
|
|
||
| import React from 'react' | ||
| import BannerOptions from './Banner' | ||
|
|
||
| export const bannerConfig: BannerOptions = { | ||
| /* | ||
| bannerContent: The pure text or HTML markup to appear in the banner | ||
| - Banner won't appear when set to null | ||
| Examples: | ||
| - bannerContent: null | ||
| - bannerContent: "Banner content!" | ||
| - bannerContent: (<span>Banner content! <a href='https://example.com' target='_blank' rel='noreferrer'>Link</a></span>) | ||
| */ | ||
| bannerContent: null, | ||
|
|
||
| /* | ||
| backgroundColor: Single, solid background color for the banner | ||
| - Will default to the site's background when set to null | ||
| - Has no effect if customCSS is true | ||
| Examples: | ||
| - backgroundColor: null | ||
| - backgroundColor: "#023047" | ||
| */ | ||
| backgroundColor: null, | ||
|
|
||
| /* | ||
| textColor: Single, solid text color for the banner | ||
| - Will default to the site's text color when set to null | ||
| - Has no effect if customCSS is true | ||
| Examples: | ||
| - textColor: null | ||
| - textColor: "#ffb703" | ||
| */ | ||
| textColor: null, | ||
|
|
||
| /* | ||
| startDate: Date and time (UTC) when the banner should start appearing on the website | ||
| - When set to null a banner will always appear, provided there is content to be shown | ||
| and the endDate, if there is one, hasn't been reached | ||
| Format: "YYYY-MM-DD HH:mmZ" | ||
| Examples: | ||
| - startDate: null | ||
| - startDate: "2001-09-14 16:00Z" | ||
| */ | ||
| startDate: null, | ||
|
|
||
| /* | ||
| endDate: Date and time (UTC) when the banner should stop appearing on the website | ||
| - When set to null a banner will always appear, provided there is content to be shown | ||
| and the startDate, if there is one, has been reached | ||
| Format: "YYYY-MM-DD HH:mmZ" | ||
| Examples: | ||
| - endDate: null | ||
| - endDate: "2007-02-01 00:00Z" | ||
| */ | ||
| endDate: null, | ||
|
|
||
| /* | ||
| customCSS: Determines whether to use a custom CSS instead instead of the color options | ||
| - Custom CSS must be set in ./Banner.custom.module.scss | ||
| - Will completely bypass backgroundColor and textColor if set to true | ||
| Examples: | ||
| - customCSS: true | ||
| */ | ||
| customBannerCSS: false | ||
| } | ||
|
|
||
| export default bannerConfig |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import React from 'react'; | ||
| import Navbar from '@theme-original/Navbar'; | ||
| import Banner from '../../components/Banner/Banner' | ||
| import styles from './navbar.module.css' | ||
|
|
||
| export default function NavbarWrapper(props) { | ||
| return ( | ||
| <div className={styles.combinedNavigation}> | ||
| <Banner/> | ||
| <Navbar {...props} /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| .combinedNavigation { | ||
| position: sticky; | ||
| top: 0px; | ||
| z-index: var(--ifm-z-index-fixed); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71f3ccfThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
flashbots-docs – ./
flashbots-docs-2u5h.vercel.app
flashbots-docs-git-main-flashbots.vercel.app
flashbots-docs-flashbots.vercel.app
docs.flashbots.net