Merge pull request #4013 from processing/temp-maintenance-banner

Temporary Maintenance Banner (March 22 2026)

Author: raclim

client/modules/IDE/components/Banner.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
+// import { Trans } from 'react-i18next';
 import { CrossIcon } from '../../../common/icons';
 
 /**
  * Banner displays a dismissible announcement bar with a link and a close icon.
  * It's typically used to highlight opportunities, but use and design can be flexible.
  *
- * This component is **presentational only** — visibility logic (open/close state) should be
+ * This component is presentational only — visibility logic (open/close state) should be
  * controlled by the parent via the `onClose` handler.
  *
  * @param {Object} props
@@ -24,17 +24,28 @@ import { CrossIcon } from '../../../common/icons';
 
 const Banner = ({ onClose }) => {
   // URL can be updated depending on the opportunity or announcement.
-  const bannerURL = 'https://processingfoundation.org/donate';
+  // const bannerURL = 'https://processingfoundation.org/donate';
 
-  const bannerCopy = (
+  // currently holds donation copy, will switch back when temp maintenance is done
+  // const bannerCopy = (
+  //   <>
+  //     <Trans i18nKey="Banner.Copy" components={{ bold: <strong /> }} />
+  //   </>
+  // );
+
+  // temp copy for maintenance, will remove on 3/22/2026
+  const bannerTempCopy = (
     <>
-      <Trans i18nKey="Banner.Copy" components={{ bold: <strong /> }} />
+      p5js.org will be undergoing scheduled maintenance on{' '}
+      <strong>Sunday March 22, 2026 2026 8:00am CET</strong>. The editor and the
+      website may be down for up to 24 hours.
     </>
   );
 
   return (
     <div className="banner">
-      <a href={bannerURL}>{bannerCopy}</a>
+      {/* <a href={bannerURL}>{bannerCopy}</a> */}
+      <a href="https://p5js.org">{bannerTempCopy}</a>
       <button className="banner-close-button" onClick={onClose}>
         <CrossIcon icon={{ default: '#000', hover: '#333' }} />
       </button>

client/modules/IDE/pages/IDEView.jsx

@@ -114,7 +114,7 @@ const IDEView = () => {
   const [sidebarSize, setSidebarSize] = useState(160);
   const [isOverlayVisible, setIsOverlayVisible] = useState(false);
   const [MaxSize, setMaxSize] = useState(window.innerWidth);
-  const [displayBanner, setDisplayBanner] = useState(false); // set to true if in use
+  const [displayBanner, setDisplayBanner] = useState(true); // set to true if in use
 
   const cmRef = useRef({});
 
@@ -189,12 +189,12 @@ const IDEView = () => {
     const lastClosedAt = stored ? Number(stored) : null;
 
     if (!lastClosedAt) {
-      setDisplayBanner(false); // set to true if in use
+      setDisplayBanner(true); // set to true if in use
       return;
     }
 
     if (minutesSince(lastClosedAt) >= BANNER_COOLDOWN_MINUTES) {
-      setDisplayBanner(false); // set to true if in use
+      setDisplayBanner(true); // set to true if in use
     } else {
       setDisplayBanner(false);
     }