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 pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy