Merge pull request #4026 from processing/remove-banner-new-p5-ver

Remove Temporary Maintenance Banner and Add p5.js 2.2.3

Author: raclim

client/modules/IDE/components/Banner.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-// import { Trans } from 'react-i18next';
+import { Trans } from 'react-i18next';
 import { CrossIcon } from '../../../common/icons';
 
 /**
@@ -24,28 +24,18 @@ 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';
 
   // 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 = (
+  const bannerCopy = (
     <>
-      p5js.org will be undergoing scheduled maintenance on{' '}
-      <strong>Sunday March 22, 2026 8:00am CET</strong>. The p5.js website may
-      be down for up to 24 hours.
+      <Trans i18nKey="Banner.Copy" components={{ bold: <strong /> }} />
     </>
   );
 
   return (
     <div className="banner">
-      {/* <a href={bannerURL}>{bannerCopy}</a> */}
-      <a href="https://p5js.org">{bannerTempCopy}</a>
+      <a href={bannerURL}>{bannerCopy}</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(true); // set to true if in use
+  const [displayBanner, setDisplayBanner] = useState(false); // set to true if in use
 
   const cmRef = useRef({});
 
@@ -189,12 +189,12 @@ const IDEView = () => {
     const lastClosedAt = stored ? Number(stored) : null;
 
     if (!lastClosedAt) {
-      setDisplayBanner(true); // set to true if in use
+      setDisplayBanner(false); // set to true if in use
       return;
     }
 
     if (minutesSince(lastClosedAt) >= BANNER_COOLDOWN_MINUTES) {
-      setDisplayBanner(true); // set to true if in use
+      setDisplayBanner(false); // set to true if in use
     } else {
       setDisplayBanner(false);
     }

common/p5Versions.js

@@ -5,7 +5,8 @@ export const currentP5Version = '1.11.11'; // Don't update to 2.x until 2026
 // JSON.stringify([...document.querySelectorAll('._132722c7')].map(n => n.innerText), null, 2)
 // TODO: use their API for this to grab these at build time?
 export const p5Versions = [
-  { version: '2.2.2', label: '(Beta)' },
+  { version: '2.2.3', label: '(Beta)' },
+  '2.2.2',
   '2.2.1',
   '2.2.0',
   '2.1.2',