adds apple silicon download url to apple warning

Author: fdoflorenzano

i18n/react-intl/en.json

@@ -79,7 +79,7 @@
   "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.",
+  "macOsIntelWarning": "Got an M1 or M2 CPU? Download the <a href='{0}'>Apple Silicon</a> version 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>.",

i18n/react-intl/es.json

@@ -79,7 +79,7 @@
   "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.",
+  "macOsIntelWarning": "¿Usas macOS con CPU M1 o M2? Descarga entonces la versión <a href='{0}'>Apple Silicon</a>.",
   "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>.",

src/styles/templates/download.module.css

@@ -18,7 +18,7 @@
   align-items: center;
   flex-basis: var(--col8);
 
-  margin: var(--vertical-margin-medium) 0;
+  margin: var(--vertical-margin-large) 0;
 }
 
 a.mainDownloadButton {
@@ -61,7 +61,7 @@ a.mainDownloadButton {
   & > p {
     font-size: var(--text-large);
     line-height: 1.5;
-    font-weight: 500;
+    font-weight: 700;
     color: var(--download-inactive);
     margin-bottom: 0;
   }
@@ -213,7 +213,6 @@ a.mainDownloadButton {
 .infoTooltipContainer {
   display: inline-block;
   position: relative;
-  /* z-index: 1; */
 
   & > button {
     display: inline-flex;

src/templates/download.js

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef, useState } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { navigate, graphql } from 'gatsby';
 import { useIntl } from 'react-intl';
 import classnames from 'classnames';
@@ -129,6 +129,13 @@ const MainDownloadSection = memo(({ release, onAfterDownload }) => {
   const intl = useIntl();
   const detectedAsset = useMachineOS(release.assetsByOs, release.publishedAt);
 
+  const appleSiliconAsset = useMemo(() => {
+    for (let asset of release.assets) {
+      if (asset.bit === 'Apple Silicon') return asset;
+    }
+    return null;
+  }, [release]);
+
   return (
     <div className={classnames(grid.container, grid.grid)}>
       <div className={classnames(grid.col, css.mainDownloadButtonContainer)}>
@@ -143,7 +150,7 @@ const MainDownloadSection = memo(({ release, onAfterDownload }) => {
         </a>
 
         {detectedAsset.asset && (
-          <div className={css.osDetails}>
+          <div>
             <p className={css.osBit}>
               {detectedAsset.asset.os}
               {detectedAsset.asset.bit && (
@@ -165,11 +172,19 @@ const MainDownloadSection = memo(({ release, onAfterDownload }) => {
             />
           </div>
         )}
-        {detectedAsset.asset && detectedAsset.asset.name.includes('macos-x64') && (
-          <div>
-            <p>{intl.formatMessage({ id: 'macOsIntelWarning' })}</p>
-          </div>
-        )}
+        {detectedAsset.asset &&
+          detectedAsset.asset.name.includes('macos-x64') &&
+          appleSiliconAsset && (
+            <div>
+              <p
+                dangerouslySetInnerHTML={{
+                  __html: intl
+                    .formatMessage({ id: 'macOsIntelWarning' })
+                    .replace('{0}', appleSiliconAsset.url)
+                }}
+              />
+            </div>
+          )}
       </div>
     </div>
   );