Only show download for the current OS

_includes/articles/download_card.html

@@ -26,12 +26,12 @@
 				{% if primary[0] == "linux" or primary[0] == "macos" or primary[0] == "windows" %}
 					{% assign platform_info = site.data.download_platforms | find: "name", primary[1] %}
 
-					<div class="download-platform">
+					<div class="download-platform platform-{{primary[0]}}">
 						<img width="24" height="24" src="/assets/images/platforms/{{ primary[0] | split: "_" | join: "-" }}.svg" title="{{ platform_info.title }}" alt="{{ platform_info.title }}" class="lightbox-ignore" />
 						{{ platform_info.title }}
 					</div>
 
-					<a href="{{ release_version | make_download: primary[1], false, "github_builds" }}" class="btn btn-download btn-download-primary">
+					<a href="{{ release_version | make_download: primary[1], false, "github_builds" }}" class="btn btn-download btn-download-primary platform-{{primary[0]}}">
 						<div class="download-title">
 							Standard
 						</div>
@@ -42,7 +42,7 @@
 						<div></div>
 					{% else %}
 						{% assign has_mono = true %}
-						<a href="{{ mono_download }}" class="btn btn-download btn-download-primary btn-download-primary--mono">
+						<a href="{{ mono_download }}" class="btn btn-download btn-download-primary btn-download-primary--mono platform-{{primary[0]}}">
 							<div class="download-title">
 								.NET
 							</div>

assets/css/releases/4.3.scss

@@ -177,6 +177,11 @@ $donate-robot-size: 500px;
 					@include is-mobile() {
 						width: 100%;
 					}
+
+					.download-platform,
+					.btn-download-primary {
+						display: none;
+					}
 				}
 			}
 

assets/js/modules/detect-browser/detect-browser.js

@@ -0,0 +1,85 @@
+// https://github.com/julienetie/detect-browser
+
+const navigatorErrorMessage = 'Could not find `userAgent` or `userAgentData` window.navigator properties to set `os`, `browser` and `version`'
+const removeExcessMozillaAndVersion = /^mozilla\/\d\.\d\W/
+const browserPattern = /(\w+)\/(\d+\.\d+(?:\.\d+)?(?:\.\d+)?)/g
+const engineAndVersionPattern = /^(ver|cri|gec)/
+const brandList = ['chrome', 'opera', 'safari', 'edge', 'firefox']
+const unknown = 'Unknown'
+const empty = ''
+const { isArray } = Array
+let userAgentData = window.navigator.userAgentData
+let userAgent = window.navigator.userAgent
+
+const mobiles = {
+  iphone: /iphone/,
+  ipad: /ipad|macintosh/,
+  android: /android/
+}
+
+const desktops = {
+  windows: /win/,
+  mac: /macintosh/,
+  linux: /linux/
+}
+
+const detectPlatform = (customUserAgent, customUserAgentData) => {
+  // Use a provided UA string instead of the browser's UA
+  userAgent = typeof customUserAgent === 'string' ? customUserAgent : userAgent
+
+  // Use a provided UA data string instead of the browser's UA data
+  userAgentData = typeof customUserAgentData === 'string' ? customUserAgentData : userAgentData
+
+  if (userAgent) {
+    const ua = userAgent.toLowerCase().replace(removeExcessMozillaAndVersion, empty)
+
+    // Determine the operating system.
+    const mobileOS = Object.keys(mobiles).find(os => mobiles[os].test(ua) && window.navigator.maxTouchPoints >= 1)
+    const desktopOS = Object.keys(desktops).find(os => desktops[os].test(ua))
+    const os = mobileOS || desktopOS
+
+    // Extract browser and version information.
+    const browserTest = ua.match(browserPattern)
+    const versionRegex = /version\/(\d+(\.\d+)*)/
+    const safariVersion = ua.match(versionRegex)
+    const saVesion = isArray(safariVersion) ? safariVersion[1] : null
+    const browserOffset = browserTest && (browserTest.length > 2 && !(engineAndVersionPattern.test(browserTest[1])) ? 1 : 0)
+    const browserResult = browserTest && browserTest[browserTest.length - 1 - (browserOffset || 0)].split('/')
+    const browser = browserResult && browserResult[0]
+    const version = saVesion ? saVesion : browserResult && browserResult[1]
+
+    return { os, browser, version }
+  } else if (userAgentData) {
+    const os = userAgentData.platform.toLowerCase()
+    let platformData
+
+    // Extract platform brand and version information.
+    for (const agentBrand of userAgentData.brands) {
+      const agentBrandEntry = agentBrand.brand.toLowerCase()
+      const foundBrand = brandList.find(brand => { //eslint-disable-line
+        if (agentBrandEntry.includes(brand)) {
+          return brand
+        }
+      })
+      if (foundBrand) {
+        platformData = { browser: foundBrand, version: agentBrand.version }
+        break
+      }
+    }
+    const brandVersionData = platformData || { browser: unknown, version: unknown }
+    return { os, ...brandVersionData }
+  } else {
+    // Log error message if there's a problem.
+    console
+      .error(navigatorErrorMessage)
+
+    return {
+      // Ignore the VSCode strikethough. Disable linting line if necessary. This is just a fallback
+      os: navigator.platform || unknown,
+      browser: unknown,
+      version: unknown
+    }
+  }
+}
+
+export default detectPlatform

assets/js/releases/4.3.mjs

@@ -1,6 +1,7 @@
 // GSAP for animations.
 import { gsap } from "../modules/gsap@3.12.5/index.js"
 import { ScrollTrigger } from "../modules/gsap@3.12.5/ScrollTrigger.js"
+import detectPlatform from "../modules/detect-browser/detect-browser.js"
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -59,3 +60,30 @@ for (const element of elements) {
 		duration: 0.2
 	});
 }
+
+// Hide downloads that aren't for the user's platform.
+const platformData = detectPlatform(navigator.userAgent, navigator.userAgentData);
+let platformName = "windows";
+switch (platformData.os) {
+	case "mac": {
+		platformName = "macos";
+	} break;
+
+	case "linux": {
+		platformName = "linux";
+	} break;
+
+	case "windows":
+	default:
+		break;
+}
+const cardDownloadPlatformsElement = document.querySelector(".card-download-platforms");
+if (cardDownloadPlatformsElement != null) {
+	for (const child of Array.from(cardDownloadPlatformsElement.childNodes)) {
+		if (child instanceof HTMLElement) {
+			if (child.classList.contains(`platform-${platformName}`)) {
+				child.style.display = "block";
+			}
+		}
+	}
+}