Update versioning note + admonition

Author: davepagurek

client/modules/IDE/components/Admonition.jsx

@@ -1,23 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
 
-export default function Admonition({ children }) {
-  const { t } = useTranslation();
+export default function Admonition({ children, title }) {
   return (
     <div className="admonition">
-      <h3 className="admonition__title">
-        <span role="img" aria-label="Flower" className="admonition__icon">
-          🌸
-        </span>
-        {t('Admonition.Note')}
-      </h3>
+      <p className="admonition__title">
+        <strong>{title}</strong>
+      </p>
       {children}
     </div>
   );
 }
 
 Admonition.propTypes = {
+  title: PropTypes.string.isRequired,
   children: PropTypes.node
 };
 

client/modules/IDE/components/Preferences/index.jsx

@@ -1,8 +1,10 @@
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useMemo, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import PropTypes from 'prop-types';
 import PlusIcon from '../../../../images/plus.svg';
 import MinusIcon from '../../../../images/minus.svg';
 import beepUrl from '../../../../sounds/audioAlert.mp3';
@@ -112,6 +114,37 @@ export default function Preferences() {
     cmRef.current?.updateFileContent(indexID, src);
   };
 
+  const markdownComponents = useMemo(() => {
+    const ExternalLink = ({ children, ...props }) => (
+      <a {...props} target="_blank">
+        {children}
+      </a>
+    );
+    ExternalLink.propTypes = {
+      children: PropTypes.node
+    };
+    ExternalLink.defaultProps = {
+      children: undefined
+    };
+
+    const Paragraph = ({ children, ...props }) => (
+      <p className="preference__paragraph" {...props}>
+        {children}
+      </p>
+    );
+    Paragraph.propTypes = {
+      children: PropTypes.node
+    };
+    Paragraph.defaultProps = {
+      children: undefined
+    };
+
+    return {
+      a: ExternalLink,
+      p: Paragraph
+    };
+  }, []);
+
   return (
     <section className="preferences">
       <Helmet>
@@ -505,14 +538,14 @@ export default function Preferences() {
                     ref={pickerRef}
                     onChangeVersion={onChangeVersion}
                   />
-                  <p className="preference__paragraph">
+                  <ReactMarkdown components={markdownComponents}>
                     {t('Preferences.LibraryVersionInfo')}
-                  </p>
+                  </ReactMarkdown>
                 </div>
               </>
             ) : (
               <div>
-                <Admonition>
+                <Admonition title={t('Preferences.CustomVersionTitle')}>
                   <p>{t('Preferences.CustomVersionInfo')}</p>
                 </Admonition>
                 <p className="preference__paragraph">

client/styles/abstracts/_variables.scss

@@ -127,9 +127,9 @@ $themes: (
     hint-inline-text-color-light: $middle-light,
     hint-inline-text-color: $middle-gray,
 
-    admonition-border: #ED225D,
-    admonition-background: #FFE4EC,
-    admonition-text: #AF0E3D,
+    admonition-border: #22C8ED,
+    admonition-background: #E4F8FF,
+    admonition-text: #0E86A1,
   ),
   dark: (
     logo-color: $p5js-pink,
@@ -226,9 +226,9 @@ $themes: (
     hint-inline-text-color-light: $middle-gray,
     hint-inline-text-color: #cfcfcf,
 
-    admonition-border: #ED225D,
-    admonition-background: #FFE4EC,
-    admonition-text: #AF0E3D,
+    admonition-border: #22C8ED,
+    admonition-background: #1681b7,
+    admonition-text: #E4F8FF,
   ),
   contrast: (
     logo-color: $yellow,
@@ -325,9 +325,9 @@ $themes: (
     hint-inline-text-color-light: $middle-gray,
     hint-inline-text-color: #cfcfcf,
 
-    admonition-border: #ED225D,
-    admonition-background: $white,
-    admonition-text: #AF0E3D,
+    admonition-border: #22C8ED,
+    admonition-background: #1681b7,
+    admonition-text: #ffffff,
   )
 );
 

client/styles/components/_preferences.scss

@@ -69,6 +69,15 @@
 
 .preference__paragraph {
   margin-bottom: #{math.div(10, $base-font-size)}rem;
+
+  & a {
+    @include themify() {
+      color: getThemifyVariable('button-background-hover-color');
+    }
+  }
+  & a:hover {
+    text-decoration: underline;
+  }
 }
 
 .preference__textarea {

translations/locales/en-US/translations.json

@@ -217,7 +217,8 @@
     "TableText": "Table-text",
     "TableOutputARIA": "table output on",
     "LibraryVersion": "p5.js Version",
-    "LibraryVersionInfo": "TODO Add helpful info about the new p5.js version, compatibility, etc.",
+    "LibraryVersionInfo": "There's a [new 2.0 release](https://github.com/processing/p5.js/releases/) of p5.js available! It will become default in August, 2026, so take this time to test it out and report bugs. Interested in transitioning sketches from 1.x to 2.0? Check out the [compatibility & transition resources.](https://github.com/processing/p5.js-compatibility)",
+    "CustomVersionTitle": "Managing your own libraries? Nice!",
     "CustomVersionInfo": "The version of p5.js is currently being managed in the code of index.html. This means it can't be adjusted from this tab.",
     "CustomVersionReset": "If you'd like to use the default libraries, you can replace the script tags in index.html with the following:",
     "SoundAddon": "p5.sound.js Addon",
@@ -666,8 +667,5 @@
   },
   "SkipLink": {
     "PlaySketch": "Skip to Play Sketch"
-  },
-  "Admonition": {
-    "Note": "Note"
   }
 }