feat: Launch survey (#153)

feat: Add AnnouncementBar for State of Gulp survey
feat: Re-add American Express as a sponsor
chore: Remove WordTips sponsor that dropped off in 2023
chore: Update content to reflect state of backer banner
feat: Add Web Weekly sponsor

Author: phated

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 <a href="https://www.surveyhero.com/c/9sfd37mk" target="_blank" rel="noopener noreferrer nofollow">Gulp Developer Survey</a> 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: [

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 (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+        message: 'Close',
+        description: 'The ARIA label for close button of announcement bar',
+      })}
+      {...props}
+      className={clsx('clean-btn close', styles.closeButton, props.className)}>
+      <IconClose width={14} height={14} strokeWidth={3.1} />
+    </button>
+  );
+}

src/theme/AnnouncementBar/CloseButton/styles.module.css

@@ -0,0 +1,4 @@
+.closeButton {
+  padding: 0;
+  line-height: 0;
+}

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 (
+    <div
+      {...props}
+      className={clsx(styles.content, props.className)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: content}}
+    />
+  );
+}

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;
+}

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 (
+    <div
+      className={styles.announcementBar}
+      style={{backgroundColor, color: textColor}}
+      role="banner">
+      {isCloseable && <div className={styles.announcementBarPlaceholder} />}
+      <AnnouncementBarContent className={styles.announcementBarContent} />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
+          onClick={close}
+          className={styles.announcementBarClose}
+        />
+      )}
+    </div>
+  );
+}

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;
+  }
+}

src/theme/BackerSection/index.js

@@ -22,12 +22,12 @@ function BackerSection() {
       </div>
       <div className={styles.tier}>
         <h3 className={styles.tierTitle}>$5 each month</h3>
-        <p>We'll rotate your avatar through the individual contributors banner below.</p>
+        <p>In the future, we'll rotate your avatar through an individual contributors banner below.</p>
         <ExternalLink href="https://github.com/sponsors/gulpjs?tier_id=24680" className={styles.tierButton}>Donate $5</ExternalLink>
       </div>
       <div className={styles.tier}>
         <h3 className={styles.tierTitle}>$10 each month</h3>
-        <p>We'll thank you on Twitter and rotate your avatar through the individual contributors banner below.</p>
+        <p>We'll thank you on Twitter and, in the future, rotate your avatar through an individual contributors banner below.</p>
         <ExternalLink href="https://github.com/sponsors/gulpjs?tier_id=24681" className={styles.tierButton}>Donate $10</ExternalLink>
       </div>
     </div>