Doc: Automatically detect Apple silicon on Download page

Assets/WebsiteAssets/js/script.js

@@ -1,6 +1,31 @@
-function getOs() {
+async function getOs() {
+
+	// The macOS release is available for Intel and Apple silicon processors,
+	// and the only way to get that info is through this new
+	// `getHighEntropyValues` function (which is not available on all browsers).
+	// So here we either return "macOs" for Intel or "macOsM1" for Apple
+	// Silicon. If we don't know which it is, we return "macOsUndefined".
+	// https://stackoverflow.com/a/75177111/561309
+
+	if (navigator.appVersion.indexOf("Mac")!=-1) {
+		let platformInfo = null;
+		try {
+			platformInfo = await navigator.userAgentData.getHighEntropyValues(['architecture'])
+		} catch (error) {
+			console.warn('Failed getting Mac architecture:', error);
+			return 'macOsUndefined';
+		}
+
+		console.info('Got platform info:', platformInfo);
+
+		if (platformInfo.architecture === 'arm') {
+			return "macOsM1";
+		} else {
+			return "macOs";
+		}
+	}
+
 	if (navigator.appVersion.indexOf("Win")!=-1) return "windows";
-	if (navigator.appVersion.indexOf("Mac")!=-1) return "macOs";
 	if (navigator.appVersion.indexOf("X11")!=-1) return "linux";
 	if (navigator.appVersion.indexOf("Linux")!=-1) return "linux";
 	return null;
@@ -45,7 +70,7 @@ function setupMobileMenu() {
 	});
 }
 
-function setupDownloadPage() {
+async function setupDownloadPage() {
 	if (!$('.page-download').length) return;
 
 	const downloadLinks = {};
@@ -55,6 +80,7 @@ function setupDownloadPage() {
 		
 		if (href.indexOf('-Setup') > 0) downloadLinks['windows'] = href;
 		if (href.indexOf('.dmg') > 0) downloadLinks['macOs'] = href;
+		if (href.endsWith('arm64.DMG')) downloadLinks['macOsM1'] = href;
 		if (href.indexOf('.AppImage') > 0) downloadLinks['linux'] = href;
 	});
 
@@ -70,8 +96,17 @@ function setupDownloadPage() {
 	if (mobileOs) {
 		$('.page-download .intro').hide();
 	} else {
-		const os = getOs();
+		const os = await getOs();
-		if (!os || !downloadLinks[os]) {
+
+		if (os === 'macOsUndefined') {
+			// If we don't know which macOS version it is, we let the user choose.
+			$('.main-content .intro').html('<p class="macos-m1-info">The macOS release is available for Intel processors or for Apple Silicon (M1) processors. Please select your version:</p>');
+			const macOsLink = $('.download-link-macOs');
+			const macOsM1Link = $('.download-link-macOsM1');
+			$('.macos-m1-info').after('<p style="font-style: italic; font-size: .8em;">To find out what processor you have, click on the <b>Apple logo</b> in the macOS menu bar, choose <b>About This Mac</b> from the dropdown menu. If you have an Apple silicon it should say"Apple M1" under "Chip". Otherwise you have an Intel processor.</p>');
+			$('.macos-m1-info').after(macOsM1Link);
+			$('.macos-m1-info').after(macOsLink);
+		} else if (!os || !downloadLinks[os]) {
 			// If we don't know, display the section to manually download the app
 			$('.page-download .get-it-desktop').show();
 		} else if (os === 'linux') {
@@ -89,5 +124,5 @@ function setupDownloadPage() {
 
 $(function () {
 	setupMobileMenu();
-	setupDownloadPage();
+	void setupDownloadPage();
 });

packages/tools/update-readme-download.ts

@@ -13,6 +13,7 @@ async function msleep(ms: number) {
 
 export enum OS {
 	MacOs = 'macos',
+	MacOsM1 = 'macosm1',
 	Windows = 'windows',
 	Android = 'android',
 	Android32 = 'android32',
@@ -31,7 +32,11 @@ export const downloadUrl = (release: GitHubRelease, os: OS, portable = false) =>
 		const githubUrl = 'github.com/laurent22/joplin/releases/download/';
 		const joplinDomain = 'objects.joplinusercontent.com/';
 
-		if (ext === 'dmg' && os === OS.MacOs) return asset.browser_download_url.replace(githubUrl, joplinDomain);
+		if (name.endsWith('arm64.DMG') && os === OS.MacOsM1) {
+			return asset.browser_download_url.replace(githubUrl, joplinDomain);
+		} else if (ext === 'dmg' && os === OS.MacOs) {
+			return asset.browser_download_url.replace(githubUrl, joplinDomain);
+		}
 
 		if (ext === 'exe' && os === OS.Windows) {
 			if (portable) {
@@ -81,29 +86,28 @@ async function main(argv: any) {
 
 	const androidRelease = await gitHubLatestRelease('joplin-android');
 
-	// const android32Url = downloadUrl(androidRelease, OS.Android32);
 	const androidUrl = downloadUrl(androidRelease, OS.Android);
 	const winUrl = downloadUrl(release, OS.Windows);
 	const winPortableUrl = downloadUrl(release, OS.Windows, true);
 	const macOsUrl = downloadUrl(release, OS.MacOs);
+	const macOsM1Url = downloadUrl(release, OS.MacOsM1);
 	const linuxUrl = downloadUrl(release, OS.Linux);
 
 	console.info('Windows: ', winUrl);
 	console.info('Windows Portable: ', winPortableUrl);
 	console.info('macOS: ', macOsUrl);
+	console.info('macOSM1: ', macOsM1Url);
 	console.info('Linux: ', linuxUrl);
 	console.info('Android: ', androidUrl);
-	// console.info('Android 32: ', android32Url);
 
 	let content = readmeContent();
 
 	if (winUrl) content = content.replace(/(https:\/\/objects.joplinusercontent.com\/v\d+\.\d+\.\d+\/Joplin-Setup-.*?\.exe)/, winUrl);
 	if (winPortableUrl) content = content.replace(/(https:\/\/objects.joplinusercontent.com\/v\d+\.\d+\.\d+\/JoplinPortable.exe)/, winPortableUrl);
 	if (macOsUrl) content = content.replace(/(https:\/\/objects.joplinusercontent.com\/v\d+\.\d+\.\d+\/Joplin-.*?\.dmg)/, macOsUrl);
+	if (macOsM1Url) content = content.replace(/(https:\/\/objects.joplinusercontent.com\/v\d+\.\d+\.\d+\/Joplin-.*?arm64\.DMG)/, macOsM1Url);
 	if (linuxUrl) content = content.replace(/(https:\/\/objects.joplinusercontent.com\/v\d+\.\d+\.\d+\/Joplin-.*?\.AppImage)/, linuxUrl);
-
 	if (androidUrl) content = content.replace(/(https:\/\/objects.joplinusercontent.com\/v\d+\.\d+\.\d+\/joplin-v\d+\.\d+\.\d+\.apk)/, androidUrl);
-	// if (android32Url) content = content.replace(/(https:\/\/objects.joplinusercontent.com\/v\d+\.\d+\.\d+\/joplin-v\d+\.\d+\.\d+-32bit\.apk)/, android32Url);
 
 	setReadmeContent(content);
 }

packages/tools/website/updateDownloadPage.ts

@@ -1,7 +1,7 @@
 import { readFile } from 'fs-extra';
 import { rootDir, insertContentIntoFile } from '../tool-utils';
 
-async function getReadmeMd() {
+async function getInstallMd() {
 	return readFile(`${rootDir}/readme/install.md`, 'utf8');
 }
 
@@ -9,25 +9,28 @@ async function createDownloadButtonsHtml(readmeMd: string): Promise<Record<strin
 	const output: Record<string, string> = {};
 	output['windows'] = readmeMd.match(/(<a href=.*?Joplin-Setup-.*?<\/a>)/)[0];
 	output['macOs'] = readmeMd.match(/(<a href=.*?Joplin-.*\.dmg.*?<\/a>)/)[0];
+	output['macOsM1'] = readmeMd.match(/(<a href=.*?Joplin-.*arm64\.DMG.*?<\/a>)/)[0];
 	output['linux'] = readmeMd.match(/(<a href=.*?Joplin-.*\.AppImage.*?<\/a>)/)[0];
 	output['android'] = readmeMd.match(/(<a href='https:\/\/play.google.com\/store\/apps\/details\?id=net\.cozic\.joplin.*?<\/a>)/)[0];
 	output['ios'] = readmeMd.match(/(<a href='https:\/\/itunes\.apple\.com\/us\/app\/joplin\/id1315599797.*?<\/a>)/)[0];
 
 	for (const [k, v] of Object.entries(output)) {
 		if (!v) throw new Error(`Could not get download element for: ${k}`);
+		output[k] = output[k].replace(/<a /, `<a class="download-link-${k}" `);
 	}
 
 	return output;
 }
 
 export default async function updateDownloadPage(readmeMd: string = null) {
-	readmeMd = readmeMd === null ? await getReadmeMd() : readmeMd;
+	readmeMd = readmeMd === null ? await getInstallMd() : readmeMd;
 
 	const downloadButtonsHtml = await createDownloadButtonsHtml(readmeMd);
 
 	const desktopButtonsHtml = [
 		downloadButtonsHtml['windows'],
 		downloadButtonsHtml['macOs'],
+		downloadButtonsHtml['macOsM1'],
 		downloadButtonsHtml['linux'],
 	];
 
@@ -39,3 +42,16 @@ export default async function updateDownloadPage(readmeMd: string = null) {
 	await insertContentIntoFile(`${rootDir}/readme/download.md`, '<!-- DESKTOP-DOWNLOAD-LINKS -->', '<!-- DESKTOP-DOWNLOAD-LINKS -->', desktopButtonsHtml.join(' '));
 	await insertContentIntoFile(`${rootDir}/readme/download.md`, '<!-- MOBILE-DOWNLOAD-LINKS -->', '<!-- MOBILE-DOWNLOAD-LINKS -->', mobileButtonsHtml.join(' '));
 }
+
+const main = async () => {
+	await updateDownloadPage();
+};
+
+if (require.main === module) {
+	// eslint-disable-next-line promise/prefer-await-to-then
+	main().catch((error) => {
+		console.error('Fatal error');
+		console.error(error);
+		process.exit(1);
+	});
+}

readme/download.md

@@ -10,7 +10,7 @@ Your download of <span class="downloaded-filename">Joplin</span> is in progress.
   
 Access your notes on Windows, macOS or Linux.
 
-<!-- DESKTOP-DOWNLOAD-LINKS --><a href='https://objects.joplinusercontent.com/v2.12.19/Joplin-Setup-2.12.19.exe?source=JoplinWebsite&type=New'><img alt='Get it on Windows' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeWindows.png'/></a> <a href='https://objects.joplinusercontent.com/v2.12.19/Joplin-2.12.19.dmg?source=JoplinWebsite&type=New'><img alt='Get it on macOS' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeMacOS.png'/></a> <a href='https://objects.joplinusercontent.com/v2.12.19/Joplin-2.12.19.AppImage?source=JoplinWebsite&type=New'><img alt='Get it on Linux' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeLinux.png'/></a><!-- DESKTOP-DOWNLOAD-LINKS -->
+<!-- DESKTOP-DOWNLOAD-LINKS --><a class="download-link-windows" href='https://objects.joplinusercontent.com/v2.12.19/Joplin-Setup-2.12.19.exe?source=JoplinWebsite&type=New'><img alt='Get it on Windows' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeWindows.png'/></a> <a class="download-link-macOs" href='https://objects.joplinusercontent.com/v2.12.19/Joplin-2.12.19.dmg?source=JoplinWebsite&type=New'><img alt='Get it on macOS' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeMacOS.png'/></a> <a class="download-link-macOsM1" href='https://objects.joplinusercontent.com/v2.12.19/Joplin-2.12.19-arm64.DMG?source=JoplinWebsite&type=New'><img alt='Get it on macOS M1 (Silicon)' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeMacOSM1.png'/></a> <a class="download-link-linux" href='https://objects.joplinusercontent.com/v2.12.19/Joplin-2.12.19.AppImage?source=JoplinWebsite&type=New'><img alt='Get it on Linux' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeLinux.png'/></a><!-- DESKTOP-DOWNLOAD-LINKS -->
 
 </div>
 
@@ -22,7 +22,7 @@ To synchronise your notes on all your devices, whether it's on desktop, mobile o
 
 Access your notes on your phone or tablet from the Android and iOS apps.
 
-<!-- MOBILE-DOWNLOAD-LINKS --><a href='https://play.google.com/store/apps/details?id=net.cozic.joplin&utm_source=GitHub&utm_campaign=README&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' style="max-height: 40px;" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeAndroid.png'/></a> <a href='https://itunes.apple.com/us/app/joplin/id1315599797'><img alt='Get it on the App Store' style="max-height: 40px;" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeIOS.png'/></a><!-- MOBILE-DOWNLOAD-LINKS -->
+<!-- MOBILE-DOWNLOAD-LINKS --><a class="download-link-android" href='https://play.google.com/store/apps/details?id=net.cozic.joplin&utm_source=GitHub&utm_campaign=README&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' style="max-height: 40px;" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeAndroid.png'/></a> <a class="download-link-ios" href='https://itunes.apple.com/us/app/joplin/id1315599797'><img alt='Get it on the App Store' style="max-height: 40px;" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeIOS.png'/></a><!-- MOBILE-DOWNLOAD-LINKS -->
 
 ## More Joplin Versions
 

readme/install.md

@@ -12,6 +12,7 @@ Operating System | Download
 ---|---
 Windows (32 and 64-bit) | <a href='https://objects.joplinusercontent.com/v2.12.19/Joplin-Setup-2.12.19.exe?source=JoplinWebsite&type=New'><img alt='Get it on Windows' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeWindows.png'/></a>
 macOS | <a href='https://objects.joplinusercontent.com/v2.12.19/Joplin-2.12.19.dmg?source=JoplinWebsite&type=New'><img alt='Get it on macOS' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeMacOS.png'/></a>
+macOS M1 (Apple Silicon) | <a href='https://objects.joplinusercontent.com/v2.12.19/Joplin-2.12.19-arm64.DMG?source=JoplinWebsite&type=New'><img alt='Get it on macOS M1 (Silicon)' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeMacOSM1.png'/></a>
 Linux | <a href='https://objects.joplinusercontent.com/v2.12.19/Joplin-2.12.19.AppImage?source=JoplinWebsite&type=New'><img alt='Get it on Linux' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeLinux.png'/></a>
 
 **On Windows**, you may also use the <a href='https://objects.joplinusercontent.com/v2.12.19/JoplinPortable.exe?source=JoplinWebsite&type=New'>Portable version</a>. The [portable application](https://en.wikipedia.org/wiki/Portable_application) allows installing the software on a portable device such as a USB key. Simply copy the file JoplinPortable.exe in any directory on that USB key ; the application will then create a directory called "JoplinProfile" next to the executable file.