From b88cc462061a1bb8cd5c189c3b55745935e641ff Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Sun, 28 Apr 2024 18:36:43 -0400 Subject: [PATCH 1/7] feat: Add AnnouncementBar for State of Gulp survey --- docusaurus.config.js | 6 +++ .../AnnouncementBar/CloseButton/index.js | 20 +++++++++ .../CloseButton/styles.module.css | 4 ++ src/theme/AnnouncementBar/Content/index.js | 17 ++++++++ .../AnnouncementBar/Content/styles.module.css | 10 +++++ src/theme/AnnouncementBar/index.js | 29 +++++++++++++ src/theme/AnnouncementBar/styles.module.css | 41 +++++++++++++++++++ 7 files changed, 127 insertions(+) create mode 100644 src/theme/AnnouncementBar/CloseButton/index.js create mode 100644 src/theme/AnnouncementBar/CloseButton/styles.module.css create mode 100644 src/theme/AnnouncementBar/Content/index.js create mode 100644 src/theme/AnnouncementBar/Content/styles.module.css create mode 100644 src/theme/AnnouncementBar/index.js create mode 100644 src/theme/AnnouncementBar/styles.module.css diff --git a/docusaurus.config.js b/docusaurus.config.js index f13b9e3..325fa58 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: + 'Participate in the State of Gulp survey—Seeking feedback until May 31st!', + isCloseable: false, + }, colorMode: { defaultMode: 'light', disableSwitch: true, 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..16635d4 --- /dev/null +++ b/src/theme/AnnouncementBar/Content/styles.module.css @@ -0,0 +1,10 @@ +.content { + font-size: 85%; + text-align: center; + padding: 5px 0; +} + +.content a { + color: inherit; + 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 ( +

$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

From becf22b8aa56473d5f1e790cdfacfe2edc5fa7f2 Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Sun, 28 Apr 2024 19:48:42 -0400 Subject: [PATCH 5/7] chore: Rework banner --- docusaurus.config.js | 2 +- src/theme/AnnouncementBar/Content/styles.module.css | 4 ++-- src/theme/AnnouncementBar/styles.module.css | 5 +---- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 6eda93a..2e654a5 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -18,7 +18,7 @@ module.exports = { announcementBar: { id: 'state_of_gulp', content: - 'Participate in the State of Gulp survey—Seeking feedback until May 31st!', + `We're seeking your feedback until May 31st—participate in the Gulp Developer Survey today!`, isCloseable: false, }, colorMode: { diff --git a/src/theme/AnnouncementBar/Content/styles.module.css b/src/theme/AnnouncementBar/Content/styles.module.css index 16635d4..425d607 100644 --- a/src/theme/AnnouncementBar/Content/styles.module.css +++ b/src/theme/AnnouncementBar/Content/styles.module.css @@ -1,10 +1,10 @@ .content { - font-size: 85%; + font-size: 1rem; text-align: center; padding: 5px 0; } .content a { - color: inherit; + color: var(--ifm-color-primary); text-decoration: underline; } diff --git a/src/theme/AnnouncementBar/styles.module.css b/src/theme/AnnouncementBar/styles.module.css index 1891cc4..f20b54d 100644 --- a/src/theme/AnnouncementBar/styles.module.css +++ b/src/theme/AnnouncementBar/styles.module.css @@ -1,7 +1,7 @@ .announcementBar { display: flex; align-items: center; - height: 40px; + height: 64px; background-color: var(--ifm-color-secondary); color: var(--ifm-color-white); } @@ -30,9 +30,6 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar { } @media (min-width: 997px) { - :root { - --docusaurus-announcement-bar-height: 30px; - } .announcementBarPlaceholder, .announcementBarClose { From b6841fe71c5ef6bba364920073d580e216ecf27e Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Sun, 28 Apr 2024 21:38:47 -0400 Subject: [PATCH 6/7] feat: Add survey url --- docusaurus.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 2e654a5..7b353e7 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -18,7 +18,7 @@ module.exports = { announcementBar: { id: 'state_of_gulp', content: - `We're seeking your feedback until May 31st—participate in the Gulp Developer Survey today!`, + `We're seeking your feedback until May 31st—participate in the Gulp Developer Survey today!`, isCloseable: false, }, colorMode: { From 70636f94176d81f4be4f81365d2d17ed41107f47 Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Sun, 28 Apr 2024 21:39:15 -0400 Subject: [PATCH 7/7] feat: Add Web Weekly sponsor --- docusaurus.config.js | 9 +++++++++ static/sponsor-logos/web-weekly.svg | 1 + 2 files changed, 10 insertions(+) create mode 100644 static/sponsor-logos/web-weekly.svg diff --git a/docusaurus.config.js b/docusaurus.config.js index 7b353e7..d0777ff 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -195,6 +195,15 @@ module.exports = { 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/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