layout re-design progress

Author: fdoflorenzano

i18n/react-intl/en.json

@@ -72,6 +72,15 @@
   "booksIntro": "Processing books cover topics from programming basics to visualization. Browse this page to find the right books for you.",
   "readMore": "Read more",
   "downloadIntro": "Processing is open source and is available for macOS, Windows, and Linux. Projects created with Processing are also cross-platform, and can be used on macOS, Windows, Android, Raspberry Pi, and many other Linux platforms.",
+  "windowsIntelAssetTooltip": "Tested on Windows 10. Untested on Windows 11 but should work.",
+  "macOsIntelAssetTooltip": "Compatible with macOS 10.15.7 (Catalina), 11 (Big Sur), and 12 (Monterey)",
+  "macOsSiliconAssetTooltip": "Compatible with <a href='https://support.apple.com/en-us/HT211814'>M1 and M2 processors</a>. Tested on macOS 12 (Monterey)",
+  "linuxIntelAssetTooltip": "Tested on Ubuntu 22.04.",
+  "raspberryPi32AssetTooltip": "This is the only 32-bit platform that is supported with Processing 4.",
+  "raspberryPi64AssetTooltip": "Not a ton of people are 64-bit with their RPi devices yet, but releases are happening.",
+  "publishedOn": "Published on",
+  "macOsIntelWarning": "Got an M1 or M2 CPU? Download the Apple Silicon version below instead.",
+  "otherVersions": "Need another version?",
   "olderVersions": "Looking for older versions?",
   "githubEarlierReleases": "Head over to GitHub for <a href='https://github.com/processing/processing4/releases'>earlier releases of Processing 4</a>.",
   "downloadChanges": "The <a href='https://github.com/processing/processing4/blob/main/build/shared/revisions.md'>list of revisions</a> covers the differences between releases in detail.",

i18n/react-intl/es.json

@@ -72,6 +72,15 @@
   "booksIntro": "Los libros sobre Processing cubren temas desde los principios básicos de programación a la visualización. Navega esta pagina para encontrar un libro adecuado para ti.",
   "readMore": "Leer más",
   "downloadIntro": "Processing es código abierto y está disponible para macOS, Windows, y Linux. Proyectos creados con Processing también multiplataforma, y pueden ser ejecutados en macOS, Windows, Android, Raspberry Pi, y muchas plataformas Linux.",
+  "windowsIntelAssetTooltip": "Testeado en Windows 10. No testeado en Windows 11, pero debería funcionar.",
+  "macOsIntelAssetTooltip": "Compatible con macOS 10.15.7 (Catalina), 11 (Big Sur), y 12 (Monterey)",
+  "macOsSiliconAssetTooltip": "Compatible con <a href='https://support.apple.com/en-us/HT211814'>procesadores M1 and M2</a>. Testeado en macOS 12 (Monterey)",
+  "linuxIntelAssetTooltip": "Testeado en Ubuntu 22.04.",
+  "raspberryPi32AssetTooltip": "Esta es la única plataforma de 32-bit compatible con Processing 4.",
+  "raspberryPi64AssetTooltip": "Aún no muchas personas usan 64-bit con sus dispositivos RPi, pero hay avances en progreso.",
+  "publishedOn": "Publicado en",
+  "macOsIntelWarning": "¿Usas macOS con CPU M1 o M2? Descarga entonces la versión de Apple Silicon abajo.",
+  "otherVersions": "¿Necesitas otra versión?",
   "olderVersions": "¿Buscas versiones anteriores?",
   "githubEarlierReleases": "En GitHub encontrarás <a href='https://github.com/processing/processing4/releases'>versiones anteriores de Processing 4</a>.",
   "downloadChanges": "La <a href='https://github.com/processing/processing4/blob/main/build/shared/revisions.md'>lista de revisiones</a> cubre las diferencias entre versiones a detalle.",

src/hooks/download.js

@@ -1,9 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
 
 const getOS = (name) => {
   if (name.includes('windows') || name.includes('.exe')) return 'Windows';
+  else if (name.includes('linux-arm')) return 'Raspberry Pi';
   else if (name.includes('linux')) return 'Linux';
-  else if (name.includes('macos')) return 'MacOS';
+  else if (name.includes('macos')) return 'macOS';
   else return 'Unknown';
 };
 
@@ -12,8 +14,21 @@ const getBit = (name) => {
   else if (name.includes('windows64')) return '64-bit';
   else if (name.includes('windows32')) return '32-bit';
   else if (name.includes('macos-aarch64')) return 'Apple Silicon';
-  else if (name.includes('linux-arm32')) return 'Raspberry Pi 32-bit';
-  else if (name.includes('linux-arm64')) return 'Raspberry Pi 64-bit';
+  else if (name.includes('linux-arm32')) return '32-bit';
+  else if (name.includes('linux-arm64')) return '64-bit';
+  else return null;
+};
+
+const getTooltip = (name, intProvider) => {
+  if (name.includes('windows')) return intProvider('windowsIntelAssetTooltip');
+  else if (name.includes('macos-aarch64'))
+    return intProvider('macOsSiliconAssetTooltip');
+  else if (name.includes('macos')) return intProvider('macOsIntelAssetTooltip');
+  else if (name.includes('linux-arm32'))
+    return intProvider('raspberryPi32AssetTooltip');
+  else if (name.includes('linux-arm64'))
+    return intProvider('raspberryPi64AssetTooltip');
+  else if (name.includes('linux')) return intProvider('linuxIntelAssetTooltip');
   else return null;
 };
 
@@ -36,6 +51,8 @@ function formatBytes(bytes, decimals = 0) {
   @param {Array} releases Array of releases JSON files
 **/
 export const usePreparedReleases = (releases) => {
+  const intl = useIntl();
+
   return useMemo(() => {
     const prepared = [];
 
@@ -52,7 +69,7 @@ export const usePreparedReleases = (releases) => {
           day: 'numeric'
         }),
         assets: [],
-        assetsByOs: { Windows: [], MacOS: [], Linux: [] }
+        assetsByOs: { Windows: [], macOS: [], Linux: [], 'Raspberry Pi': [] }
       };
 
       // Prepare release assets
@@ -63,7 +80,10 @@ export const usePreparedReleases = (releases) => {
           os: getOS(asset.name),
           bit: getBit(asset.name),
           url: asset.downloadUrl,
-          size: formatBytes(asset.size)
+          size: formatBytes(asset.size),
+          tooltipMessage: getTooltip(asset.name, (id) =>
+            intl.formatMessage({ id })
+          )
         });
       }
 
@@ -85,21 +105,24 @@ export const usePreparedReleases = (releases) => {
     }
 
     return prepared;
-  }, [releases]);
+  }, [intl, releases]);
 };
 
 /**
   Hook to detect the OS where the site is mounted. 
   Will default to Windows if fails to detect other.
 **/
 export const useMachineOS = (releases) => {
-  const [selected, setSelected] = useState({ os: '', asset: null });
+  const [detected, setDetected] = useState({
+    os: '',
+    asset: null
+  });
 
   const selectAsset = useCallback(
     (asset) => {
-      setSelected({ os: asset.os, asset });
+      setDetected({ os: asset.os, asset });
     },
-    [setSelected]
+    [setDetected]
   );
 
   useEffect(() => {
@@ -113,13 +136,13 @@ export const useMachineOS = (releases) => {
     if (userAgent.search('Windows') !== -1) {
       selectOS('Windows');
     } else if (userAgent.search('Mac') !== -1) {
-      selectOS('MacOS');
+      selectOS('macOS');
     } else if (userAgent.search('X11') !== -1) {
       selectOS('Linux');
     } else {
       selectOS('Windows');
     }
   }, [releases, selectAsset]);
 
-  return [selected, selectAsset];
+  return detected;
 };