diff --git a/docusaurus.config.js b/docusaurus.config.js index f13b9e3..d0777ff 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -15,6 +15,12 @@ module.exports = { projectName: 'gulpjs.github.io', // The theme themeConfig: { + announcementBar: { + id: 'state_of_gulp', + content: + `We're seeking your feedback until May 31st—participate in the Gulp Developer Survey today!`, + isCloseable: false, + }, colorMode: { defaultMode: 'light', disableSwitch: true, @@ -170,25 +176,34 @@ module.exports = { // flexBasis: '80px', // }, // }, - { - href: 'https://word.tips/', - src: 'sponsor-logos/word-tips.png', - alt: 'WordTips logo', - title: 'WordTips', - style: { - flexBasis: '150px', - }, - }, - // Stopped donating on June 15th, 2022 + // Stopped donating in Sept 2023 // { - // href: 'https://developer.americanexpress.com', - // src: 'sponsor-logos/american-express.svg', - // alt: 'American Express', - // title: 'American Express', + // href: 'https://word.tips/', + // src: 'sponsor-logos/word-tips.png', + // alt: 'WordTips logo', + // title: 'WordTips', // style: { - // flexBasis: '145px', + // flexBasis: '150px', // }, // }, + { + href: 'https://developer.americanexpress.com', + src: 'sponsor-logos/american-express.svg', + alt: 'American Express', + title: 'American Express', + style: { + flexBasis: '145px', + }, + }, + { + href: 'https://webweekly.email/', + src: 'sponsor-logos/web-weekly.svg', + alt: 'Web Weekly - Your friendly web dev newsletter', + title: 'Web Weekly - Your friendly web dev newsletter', + style: { + flexBasis: '175px', + } + } ] }, stylesheets: [ diff --git a/src/theme/AnnouncementBar/CloseButton/index.js b/src/theme/AnnouncementBar/CloseButton/index.js new file mode 100644 index 0000000..7352c3e --- /dev/null +++ b/src/theme/AnnouncementBar/CloseButton/index.js @@ -0,0 +1,20 @@ +import React from 'react'; +import clsx from 'clsx'; +import {translate} from '@docusaurus/Translate'; +import IconClose from '@theme/Icon/Close'; +import styles from './styles.module.css'; +export default function AnnouncementBarCloseButton(props) { + return ( + + ); +} diff --git a/src/theme/AnnouncementBar/CloseButton/styles.module.css b/src/theme/AnnouncementBar/CloseButton/styles.module.css new file mode 100644 index 0000000..0494ec0 --- /dev/null +++ b/src/theme/AnnouncementBar/CloseButton/styles.module.css @@ -0,0 +1,4 @@ +.closeButton { + padding: 0; + line-height: 0; +} diff --git a/src/theme/AnnouncementBar/Content/index.js b/src/theme/AnnouncementBar/Content/index.js new file mode 100644 index 0000000..a7a8b61 --- /dev/null +++ b/src/theme/AnnouncementBar/Content/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import clsx from 'clsx'; +import {useThemeConfig} from '@docusaurus/theme-common'; +import styles from './styles.module.css'; +export default function AnnouncementBarContent(props) { + const {announcementBar} = useThemeConfig(); + const {content} = announcementBar; + return ( +
+ ); +} diff --git a/src/theme/AnnouncementBar/Content/styles.module.css b/src/theme/AnnouncementBar/Content/styles.module.css new file mode 100644 index 0000000..425d607 --- /dev/null +++ b/src/theme/AnnouncementBar/Content/styles.module.css @@ -0,0 +1,10 @@ +.content { + font-size: 1rem; + text-align: center; + padding: 5px 0; +} + +.content a { + color: var(--ifm-color-primary); + text-decoration: underline; +} diff --git a/src/theme/AnnouncementBar/index.js b/src/theme/AnnouncementBar/index.js new file mode 100644 index 0000000..d2e6339 --- /dev/null +++ b/src/theme/AnnouncementBar/index.js @@ -0,0 +1,29 @@ +import React from 'react'; +import {useThemeConfig} from '@docusaurus/theme-common'; +import {useAnnouncementBar} from '@docusaurus/theme-common/internal'; +import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton'; +import AnnouncementBarContent from '@theme/AnnouncementBar/Content'; +import styles from './styles.module.css'; +export default function AnnouncementBar() { + const {announcementBar} = useThemeConfig(); + const {isActive, close} = useAnnouncementBar(); + if (!isActive) { + return null; + } + const {backgroundColor, textColor, isCloseable} = announcementBar; + return ( +
+ {isCloseable &&
} + + {isCloseable && ( + + )} +
+ ); +} diff --git a/src/theme/AnnouncementBar/styles.module.css b/src/theme/AnnouncementBar/styles.module.css new file mode 100644 index 0000000..f20b54d --- /dev/null +++ b/src/theme/AnnouncementBar/styles.module.css @@ -0,0 +1,38 @@ +.announcementBar { + display: flex; + align-items: center; + height: 64px; + background-color: var(--ifm-color-secondary); + color: var(--ifm-color-white); +} + +html[data-announcement-bar-initially-dismissed='true'] .announcementBar { + display: none; +} + +.announcementBarPlaceholder { + flex: 0 0 10px; +} + +.announcementBarClose { + flex: 0 0 30px; + align-self: stretch; +} + +.announcementBarContent { + flex: 1 1 auto; +} + +@media print { + .announcementBar { + display: none; + } +} + +@media (min-width: 997px) { + + .announcementBarPlaceholder, + .announcementBarClose { + flex-basis: 50px; + } +} diff --git a/src/theme/BackerSection/index.js b/src/theme/BackerSection/index.js index d7b0a8d..3a3da1f 100644 --- a/src/theme/BackerSection/index.js +++ b/src/theme/BackerSection/index.js @@ -22,12 +22,12 @@ function BackerSection() {

$5 each month

-

We'll rotate your avatar through the individual contributors banner below.

+

In the future, we'll rotate your avatar through an individual contributors banner below.

Donate $5

$10 each month

-

We'll thank you on Twitter and rotate your avatar through the individual contributors banner below.

+

We'll thank you on Twitter and, in the future, rotate your avatar through an individual contributors banner below.

Donate $10
diff --git a/static/sponsor-logos/web-weekly.svg b/static/sponsor-logos/web-weekly.svg new file mode 100644 index 0000000..d4aca02 --- /dev/null +++ b/static/sponsor-logos/web-weekly.svg @@ -0,0 +1 @@ + \ No newline at end of file