Desktop release v2.4.3

Signed-off-by: Aaron <admin@datahoarder.dev>

.dockerignore

@@ -6,4 +6,7 @@ packages/app-desktop
 packages/app-cli
 packages/app-mobile
 packages/app-clipper
-packages/generator-joplin
+packages/generator-joplin
+packages/plugin-repo-cli
+packages/server/db-*.sqlite
+packages/server/temp

.env-sample

@@ -1,9 +1,26 @@
-# Example of local config, for development:
+# =============================================================================
+# PRODUCTION CONFIG EXAMPLE
+# -----------------------------------------------------------------------------
+# By default it will use SQLite, but that's mostly to test and evaluate the
+# server. So you'll want to specify db connection settings to use Postgres.
+# =============================================================================
 #
-# JOPLIN_BASE_URL=http://localhost:22300
+# APP_BASE_URL=https://example.com/joplin
-# JOPLIN_PORT=22300
+# APP_PORT=22300
+# 
+# DB_CLIENT=pg
+# POSTGRES_PASSWORD=joplin
+# POSTGRES_DATABASE=joplin
+# POSTGRES_USER=joplin
+# POSTGRES_PORT=5432
+# POSTGRES_HOST=localhost
 
-# Example of config for production:
+# =============================================================================
+# DEV CONFIG EXAMPLE
+# -----------------------------------------------------------------------------
+# Example of local config, for development. In dev mode, you would usually use
+# SQLite so database settings are not needed.
+# =============================================================================
 #
-# JOPLIN_BASE_URL=https://example.com/joplin
+# APP_BASE_URL=http://localhost:22300
-# JOPLIN_PORT=22300
+# APP_PORT=22300

.eslintrc.js

@@ -37,6 +37,9 @@ module.exports = {
 
 		// Server admin UI global variables
 		'onDocumentReady': 'readonly',
+		'setupPasswordStrengthHandler': 'readonly',
+		'$': 'readonly',
+		'zxcvbn': 'readonly',
 
 		'tinymce': 'readonly',
 	},
@@ -76,7 +79,7 @@ module.exports = {
 
 		// Warn only for now because fixing everything would take too much
 		// refactoring, but new code should try to stick to it.
-		'complexity': ['warn', { max: 10 }],
+		// 'complexity': ['warn', { max: 10 }],
 
 		// Checks rules of Hooks
 		'react-hooks/rules-of-hooks': 'error',
@@ -125,6 +128,7 @@ module.exports = {
 		'space-before-blocks': 'error',
 		'spaced-comment': ['error', 'always'],
 		'keyword-spacing': ['error', { 'before': true, 'after': true }],
+		'no-multi-spaces': ['error'],
 	},
 	'plugins': [
 		'react',
@@ -167,6 +171,34 @@ module.exports = {
 					},
 				}],
 				'@typescript-eslint/no-floating-promises': ['error'],
+				'@typescript-eslint/naming-convention': ['error',
+					// Naming conventions over the codebase is very inconsistent
+					// unfortunately and fixing it would be way too much work.
+					// In general, we use "strictCamelCase" for variable names.
+
+					// {
+					// 	selector: 'default',
+					// 	format: ['StrictPascalCase', 'strictCamelCase', 'snake_case', 'UPPER_CASE'],
+					// 	leadingUnderscore: 'allow',
+					// 	trailingUnderscore: 'allow',
+					// },
+					{
+						selector: 'enumMember',
+						format: ['StrictPascalCase'],
+					},
+					{
+						selector: 'enumMember',
+						format: null,
+						'filter': {
+							'regex': '^(GET|POST|PUT|DELETE|PATCH|HEAD|SQLite|PostgreSQL|ASC|DESC|E2EE|OR|AND|UNION|INTERSECT|EXCLUSION|INCLUSION|EUR|GBP|USD)$',
+							'match': true,
+						},
+					},
+					{
+						selector: 'interface',
+						format: ['StrictPascalCase'],
+					},
+				],
 			},
 		},
 	],

.github/scripts/run_ci.sh

@@ -0,0 +1,141 @@
+#!/bin/bash
+
+# =============================================================================
+# Setup environment variables
+# =============================================================================
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+ROOT_DIR="$SCRIPT_DIR/../.."
+
+IS_PULL_REQUEST=0
+IS_DEV_BRANCH=0
+IS_LINUX=0
+IS_MACOS=0
+
+if [ "$GITHUB_EVENT_NAME" == "pull_request" ]; then
+	IS_PULL_REQUEST=1
+fi
+
+if [ "$GITHUB_REF" == "refs/heads/dev" ]; then
+	IS_DEV_BRANCH=1
+fi
+
+if [ "$RUNNER_OS" == "Linux" ]; then
+	IS_LINUX=1
+	IS_MACOS=0
+else
+	IS_LINUX=0
+	IS_MACOS=1
+fi
+
+# =============================================================================
+# Print environment
+# =============================================================================
+
+echo "GITHUB_WORKFLOW=$GITHUB_WORKFLOW"
+echo "GITHUB_EVENT_NAME=$GITHUB_EVENT_NAME"
+echo "GITHUB_REF=$GITHUB_REF"
+echo "RUNNER_OS=$RUNNER_OS"
+echo "GIT_TAG_NAME=$GIT_TAG_NAME"
+
+echo "IS_CONTINUOUS_INTEGRATION=$IS_CONTINUOUS_INTEGRATION"
+echo "IS_PULL_REQUEST=$IS_PULL_REQUEST"
+echo "IS_DEV_BRANCH=$IS_DEV_BRANCH"
+echo "IS_LINUX=$IS_LINUX"
+echo "IS_MACOS=$IS_MACOS"
+
+echo "Node $( node -v )"
+echo "Npm $( npm -v )"
+
+# =============================================================================
+# Install packages
+# =============================================================================
+
+cd "$ROOT_DIR"
+npm install
+
+# =============================================================================
+# Run test units. Only do it for pull requests and dev branch because we don't
+# want it to randomly fail when trying to create a desktop release.
+# =============================================================================
+
+if [ "$IS_PULL_REQUEST" == "1" ] || [ "$IS_DEV_BRANCH" = "1" ]; then
+	echo "Step: Running tests..."
+
+	npm run test-ci
+	testResult=$?
+	if [ $testResult -ne 0 ]; then
+		exit $testResult
+	fi
+fi
+
+# =============================================================================
+# Run linter for pull requests only. We also don't want this to make the desktop
+# release randomly fail.
+# =============================================================================
+
+if [ "$IS_PULL_REQUEST" == "1" ]; then
+	echo "Step: Running linter..."
+
+	npm run linter-ci ./
+	testResult=$?
+	if [ $testResult -ne 0 ]; then
+		exit $testResult
+	fi
+fi
+
+# =============================================================================
+# Validate translations - this is needed as some users manually edit .po files
+# (and often make mistakes) instead of using a proper tool like poedit. Doing it
+# for Linux only is sufficient.
+# =============================================================================
+
+if [ "$IS_PULL_REQUEST" == "1" ]; then
+	if [ "$IS_LINUX" == "1" ]; then
+		echo "Step: Validating translations..."
+
+		node packages/tools/validate-translation.js
+		testResult=$?
+		if [ $testResult -ne 0 ]; then
+			exit $testResult
+		fi
+	fi
+fi
+
+# =============================================================================
+# Find out if we should run the build or not. Electron-builder gets stuck when
+# building PRs so we disable it in this case. The Linux build should provide
+# enough info if the app builds or not.
+# https://github.com/electron-userland/electron-builder/issues/4263
+# =============================================================================
+
+if [ "$IS_PULL_REQUEST" == "1" ]; then
+	if [ "$IS_MACOS" == "1" ]; then
+		echo "Step: Not building Electron app"
+		exit 0
+	fi
+fi
+
+# =============================================================================
+# Prepare the Electron app and build it
+#
+# If the current tag is a desktop release tag (starts with "v", such as
+# "v1.4.7"), we build and publish to github
+#
+# Otherwise we only build but don't publish to GitHub. It helps finding
+# out any issue in pull requests and dev branch.
+# =============================================================================
+
+cd "$ROOT_DIR/packages/app-desktop"
+
+if [[ $GIT_TAG_NAME = v* ]]; then
+	echo "Step: Building and publishing desktop application..."
+	USE_HARD_LINKS=false npm run dist
+elif [[ $GIT_TAG_NAME = server-v* ]] && [[ $IS_LINUX = 1 ]]; then
+	echo "Step: Building Docker Image..."
+	cd "$ROOT_DIR"
+	npm run buildServerDocker -- --tag-name $GIT_TAG_NAME --push-images
+else
+	echo "Step: Building but *not* publishing desktop application..."
+	USE_HARD_LINKS=false npm run dist -- --publish=never
+fi

.github/stale.yml

@@ -9,7 +9,9 @@ exemptLabels:
   - "upstream"
   - "backlog"
   - "high"
+  - "medium"
   - "spec"
+  - "cannot reproduce"
 # Label to use when marking an issue as stale
 staleLabel: stale
 # Comment to post when marking an issue as stale. Set to `false` to disable

.github/workflows/github-actions-main.yml

@@ -0,0 +1,76 @@
+name: Joplin Continuous Integration
+on: [push, pull_request]
+jobs:
+  Main:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-2016]
+    steps:
+
+      # Silence apt-get update errors (for example when a module doesn't
+      # exist) since otherwise it will make the whole build fails, even though
+      # it might work without update. libsecret-1-dev is required for keytar -
+      # https://github.com/atom/node-keytar
+
+      - name: Install Linux dependencies
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt-get update || true
+          sudo apt-get install -y gettext
+          sudo apt-get install -y libsecret-1-dev
+
+      - name: Install Docker Engine
+        if: runner.os == 'Linux' && startsWith(github.ref, 'refs/tags/server-v')
+        run: |
+          sudo apt-get install -y apt-transport-https
+          sudo apt-get install -y ca-certificates
+          sudo apt-get install -y curl
+          sudo apt-get install -y gnupg
+          sudo apt-get install -y lsb-release
+          curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
+          echo \
+              "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
+              $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+          sudo apt-get update || true
+          sudo apt-get install -y docker-ce docker-ce-cli containerd.io
+
+      - uses: actions/checkout@v2
+      - uses: olegtarasov/get-tag@v2.1
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+      
+      # Login to Docker only if we're on a server release tag. If we run this on
+      # a pull request it will fail because the PR doesn't have access to
+      # secrets
+      - uses: docker/login-action@v1
+        if: runner.os == 'Linux' && startsWith(github.ref, 'refs/tags/server-v')
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Run tests, build and publish Linux and macOS apps
+        if: runner.os == 'Linux' || runner.os == 'macOs'
+        env:
+          APPLE_ASC_PROVIDER: ${{ secrets.APPLE_ASC_PROVIDER }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
+          CSC_KEY_PASSWORD: ${{ secrets.APPLE_CSC_KEY_PASSWORD }}
+          CSC_LINK: ${{ secrets.APPLE_CSC_LINK }}
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          IS_CONTINUOUS_INTEGRATION: 1
+        run: |
+          "${GITHUB_WORKSPACE}/.github/scripts/run_ci.sh"
+
+      - name: Build and publish Windows app
+        if: runner.os == 'Windows' && startsWith(github.ref, 'refs/tags/v')
+        env:
+          CSC_KEY_PASSWORD: ${{ secrets.WINDOWS_CSC_KEY_PASSWORD }}
+          CSC_LINK: ${{ secrets.WINDOWS_CSC_LINK }}
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          IS_CONTINUOUS_INTEGRATION: 1
+        run: |
+          npm install
+          cd packages/app-desktop
+          npm run dist

.travis.yml

@@ -1,138 +0,0 @@
-# Only build tags (Doesn't work - doesn't build anything)
-if: tag IS present OR type = pull_request OR branch = dev
-
-rvm: 2.3.3
-
-# It's important to only build production branches otherwise Electron Builder
-# might take assets from dev branches and overwrite those of production.
-# https://docs.travis-ci.com/user/customizing-the-build/#Building-Specific-Branches
-branches:
-  only:
-    - master
-    - dev
-    - /^v\d+\.\d+(\.\d+)?(-\S*)?$/
-
-matrix:
-  include:
-    - os: osx
-      osx_image: xcode12
-      language: node_js
-      node_js: "12"
-      cache:
-        npm: false
-      # Cache was disabled because when changing from node_js 10 to node_js 12
-      # it was still using build files from Node 10 when building SQLite which
-      # was making it fail. Might be ok to re-enable later on, although it doesn't
-      # make build that much faster.
-      #
-      # env:
-      #   - ELECTRON_CACHE=$HOME/.cache/electron
-      #   - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
-
-    - os: linux
-      sudo: required
-      dist: trusty
-      language: node_js
-      node_js: "12"
-      cache:
-        npm: false
-      # env:
-      #   - ELECTRON_CACHE=$HOME/.cache/electron
-      #   - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
-
-# cache:
-#   directories:
-#   - node_modules
-#   - $HOME/.cache/electron
-#   - $HOME/.cache/electron-builder
- 
-before_install:
-  # HOMEBREW_NO_AUTO_UPDATE needed so that Homebrew doesn't upgrade to the next
-  # version, which requires Ruby 2.3, which is not available on the Travis VM.
-
-  # Silence apt-get update errors (for example when a module doesn't exist) since
-  # otherwise it will make the whole build fails, even though all we need is yarn.
-
-  # libsecret-1-dev is required for keytar - https://github.com/atom/node-keytar
-  - |
-    if [ "$TRAVIS_OS_NAME" == "osx" ]; then
-      HOMEBREW_NO_AUTO_UPDATE=1 brew install yarn
-    else
-      curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
-      echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
-      sudo apt-get update || true
-      sudo apt-get install -y yarn
-      sudo apt-get install -y gettext
-      sudo apt-get install -y libsecret-1-dev
-    fi
-
-script:
-  - |
-    # Prints some env variables
-    echo "TRAVIS_OS_NAME=$TRAVIS_OS_NAME"
-    echo "TRAVIS_BRANCH=$TRAVIS_BRANCH"
-    echo "TRAVIS_PULL_REQUEST=$TRAVIS_PULL_REQUEST"
-    echo "TRAVIS_TAG=$TRAVIS_TAG"
-
-    # Install tools
-    npm install
-
-    # Run test units.
-    # Only do it for pull requests because Travis randomly fails to run them
-    # and that would break the desktop release.
-    if [ "$TRAVIS_PULL_REQUEST" != "false" ] || [ "$TRAVIS_BRANCH" = "dev" ]; then
-      npm run test-ci
-      testResult=$?
-      if [ $testResult -ne 0 ]; then
-        exit $testResult
-      fi
-    fi
-
-    # Run linter for pull requests only - this is so that
-    # bypassing eslint is allowed for urgent fixes.
-    if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then
-      npm run linter-ci ./
-      testResult=$?
-      if [ $testResult -ne 0 ]; then
-        exit $testResult
-      fi
-    fi
-
-    # Validate translations - this is needed as some users manually
-    # edit .po files (and often make mistakes) instead of using a proper
-    # tool like poedit. Doing it for Linux only is sufficient.
-    if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then
-      if [ "$TRAVIS_OS_NAME" != "osx" ]; then
-        node packages/tools/validate-translation.js
-        testResult=$?
-        if [ $testResult -ne 0 ]; then
-          exit $testResult
-        fi
-      fi
-    fi
-
-    # Find out if we should run the build or not. Electron-builder gets stuck when
-    # building PRs so we disable it in this case. The Linux build should provide
-    # enough info if the app builds or not.
-    # https://github.com/electron-userland/electron-builder/issues/4263
-    if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then
-      if [ "$TRAVIS_OS_NAME" == "osx" ]; then
-        exit 0
-      fi
-    fi
-
-    # Prepare the Electron app and build it
-    #
-    # If the current tag is a desktop release tag (starts with "v", such as
-    # "v1.4.7"), we build and publish to github
-    #
-    # Otherwise we only build but don't publish to GitHub. It helps finding
-    # out any issue in pull requests and dev branch.
-    
-    cd packages/app-desktop
-
-    if [[ $TRAVIS_TAG = v* ]]; then
-      USE_HARD_LINKS=false npm run dist
-    else
-      USE_HARD_LINKS=false npm run dist -- --publish=never
-    fi

Assets/LICENSE

@@ -0,0 +1,3 @@
+All assets in this directory including, but not limited to, logos, icons
+and images are copyright (c) Laurent Cozic, all rights reserved.
+They may not be used without a permission.

Assets/WebsiteAssets/images/apple-icon.svg

@@ -0,0 +1,11 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M22.6857 0C20.9264 0.121687 18.8701 1.24781 17.6718 2.71423C16.5787 4.04454 15.6795 6.0204 16.0301 7.94058C17.9523 8.00039 19.9385 6.84746 21.0894 5.35628C22.166 3.96823 22.9807 2.00474 22.6857 0Z" fill="white"/>
+<path d="M29.6386 11.2903C27.9494 9.17211 25.5755 7.94287 23.3335 7.94287C20.3739 7.94287 19.1219 9.3598 17.0656 9.3598C14.9454 9.3598 13.3346 7.947 10.7751 7.947C8.26088 7.947 5.58377 9.48355 3.88634 12.1112C1.50004 15.8113 1.90842 22.768 5.77558 28.6936C7.15951 30.8138 9.0075 33.198 11.4247 33.2187C13.5759 33.2393 14.1823 31.8389 17.0966 31.8244C20.0109 31.8079 20.5636 33.2372 22.7107 33.2145C25.13 33.196 27.079 30.5539 28.4629 28.4337C29.455 26.9136 29.8242 26.1485 30.5935 24.4325C24.998 22.3019 24.1008 14.3448 29.6386 11.2903Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="33" height="33" fill="white"/>
+</clipPath>
+</defs>
+</svg>

Assets/WebsiteAssets/images/badges/Donate-IBAN.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="86" height="20" role="img" aria-label="Donate: IBAN"><title>Donate: IBAN</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="86" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="49" height="20" fill="#555"/><rect x="49" width="37" height="20" fill="#007ec6"/><rect width="86" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="255" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="390">Donate</text><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="390">Donate</text><text aria-hidden="true" x="665" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">IBAN</text><text x="665" y="140" transform="scale(.1)" fill="#fff" textLength="270">IBAN</text></g></svg>

Assets/WebsiteAssets/images/download-icon.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9997 13.75L14.6663 10.0833M10.9997 13.75V2.75V13.75ZM10.9997 13.75L7.33301 10.0833L10.9997 13.75Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.83301 15.5833L2.40226 17.8612C2.5014 18.2578 2.73026 18.6099 3.05248 18.8615C3.37469 19.1131 3.77177 19.2499 4.18059 19.2499H17.8188C18.2276 19.2499 18.6247 19.1131 18.9469 18.8615C19.2691 18.6099 19.498 18.2578 19.5971 17.8612L20.1663 15.5833" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

Assets/WebsiteAssets/images/microsoft-icon.svg

@@ -0,0 +1,6 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="17.5312" y="17.5312" width="10.3125" height="10.3125" fill="white"/>
+<rect x="5.15625" y="17.5312" width="10.3125" height="10.3125" fill="white"/>
+<rect x="17.5312" y="5.15625" width="10.3125" height="10.3125" fill="white"/>
+<rect x="5.15625" y="5.15625" width="10.3125" height="10.3125" fill="white"/>
+</svg>

Assets/WebsiteAssets/js/script.js

@@ -0,0 +1,91 @@
+function getOs() {
+	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;
+}
+
+function getFilename(path) {
+	if (!path) return '';
+	const s = path.split('/');
+	return s.pop();
+}
+
+function getMobileOs() {
+	var userAgent = navigator.userAgent || navigator.vendor || window.opera;
+
+	// Windows Phone must come first because its UA also contains "Android"
+	if (/windows phone/i.test(userAgent)) {
+		return "windowsPhone";
+	}
+
+	if (/android/i.test(userAgent)) {
+		return "android";
+	}
+
+	// iOS detection from: http://stackoverflow.com/a/9039885/177710
+	if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+		return "ios";
+	}
+
+	return "";
+}
+
+
+function setupMobileMenu() {
+	$("#open-menu-mobile").click(function () {
+		$("#menu-mobile").animate({ "margin-right": "0px" }, 300);
+	});
+
+	$("#close-menu-mobile").click(function () {
+		$("#menu-mobile").animate({ "margin-right": "-300px" }, 300);
+	});
+}
+
+function setupDownloadPage() {
+	if (!$('.page-download').length) return;
+
+	const downloadLinks = {};
+
+	$('.page-download .get-it-desktop a').each(function() {
+		const href = $(this).attr('href');
+		
+		if (href.indexOf('-Setup') > 0) downloadLinks['windows'] = href;
+		if (href.indexOf('.dmg') > 0) downloadLinks['macOs'] = href;
+		if (href.indexOf('.AppImage') > 0) downloadLinks['linux'] = href;
+	});
+
+	$('.page-download .get-it-desktop').hide();
+
+	$('.page-download .download-click-here').click((event) => {
+		event.preventDefault();
+		$('.page-download .get-it-desktop').show(500);
+	});
+
+	const mobileOs = getMobileOs();
+
+	if (mobileOs) {
+		$('.page-download .intro').hide();
+	} else {
+		const os = getOs();
+		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') {
+			// If it's Linux, the user should probably install it using the
+			// install script so we redirect to the install section
+			window.location = 'https://joplinapp.org/help/#desktop-applications';
+		} else {
+			// Otherwise, start the download
+			const downloadLink = downloadLinks[os];
+			$('.downloaded-filename').text(getFilename(downloadLink));
+			window.location = downloadLink;
+		}
+	}
+}
+
+$(function () {
+	setupMobileMenu();
+	setupDownloadPage();
+});

Assets/WebsiteAssets/templates/front.mustache

@@ -0,0 +1,415 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		{{> gaOptimize}}
+		<meta
+			charset="utf-8"
+			http-equiv="X-UA-Compatible"
+			content="IE=edge,chrome=1"
+		/>
+		<link rel="icon" href="{{imageBaseUrl}}/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#000000" />
+		<meta name="description" content="Joplin, the open source note-taking application" />
+		<link rel="stylesheet" href="{{cssBaseUrl}}/fontawesome-all.min.css?t={{buildTime}}">
+		<link
+			rel="stylesheet"
+			href="{{cssBaseUrl}}/bootstrap5.0.2.min.css"
+			as="style"
+		/>
+		<link
+			href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
+			rel="stylesheet"
+			as="style"
+			media="all"
+			onload="this.media='all'; this.onload = null"
+		/>
+		<script
+			src="{{jsBaseUrl}}/jquery-3.6.0.min.js"
+			rel="preload"
+			as="script"
+		></script>
+		<link rel="stylesheet" href="{{cssBaseUrl}}/site.css?t={{buildTime}}" as="style" />
+		<title>Joplin</title>
+	</head>
+	<body class="front-page website-env-{{env}}">
+		<div class="container-fluid" id="main-container">
+
+			{{#navbar}}
+				{{> navbar}}
+			{{/navbar}}
+
+			<div class="blue-bg" id="top-section">
+				<div class="container">
+					<div class="row">
+						<div class="col-12">
+							<div class="alert alert-danger alert-env-dev" role="alert">
+								Running in {{env}} mode!
+							</div>
+
+							<h1 class="text-center">
+								Free your <span class="frame-bg frame-bg-blue">notes</span>
+							</h1>
+							<p class="text-center" id="top-section-text">
+								Joplin is an open source note-taking app. Capture your thoughts and securely access them from any device.
+							</p>
+							<br />
+							<br />
+							<p class="text-center">
+								<a href="{{baseUrl}}/download/" class="button-link btn-blue download-button">Download the app</a>
+								{{#showJoplinCloudLinks}}
+									<a href="{{baseUrl}}/plans/" class="button-link btn-trans plans-button">Sign up with Joplin Cloud</a>
+								{{/showJoplinCloudLinks}}
+							</p>
+
+							<picture class="img-fluid img-center" id="top-section-img">
+								<source type="image/webp" srcset="
+									{{imageBaseUrl}}/home-top-img-4x.webp 4820w,
+									{{imageBaseUrl}}/home-top-img-2x.webp 2388w,
+									{{imageBaseUrl}}/home-top-img.webp 1205w
+								">
+								<source type="image/png" srcset="
+									{{imageBaseUrl}}/home-top-img-2x.png 2388w,
+									{{imageBaseUrl}}/home-top-img.png 1205w
+								">
+								<img id="top-section-img-img" src="{{imageBaseUrl}}/home-top-img-2x.png">
+							</picture>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div id="multimedia-notes-section">
+				<div class="container">
+					<div class="row">
+						<div class="col-12 col-md-5 col-xxl-6">
+							<div class="ml-30 ml-mobile-0">
+								<h2 id="multimedia-title">
+									<span class="frame-bg frame-bg-yellow">Multimedia</span> notes
+								</h2>
+								<p id="multimedia-text">
+									Images, videos, PDFs and audio files are supported. Create
+									math expressions and diagrams directly from the app. Take
+									photos with the mobile app and save them to a note.
+								</p>
+								<br />
+								<p>
+									<a href="{{baseUrl}}/download/" class="button-link btn-blue">Download the app</a>
+								</p>
+							</div>
+						</div>
+						<div class="col-12 col-md-7 col-xxl-6">
+							<br class="d-block d-lg-none" />
+							<br class="d-block d-lg-none" />
+							<img
+								src="{{imageBaseUrl}}/multimedia-notes-img.png"
+								alt=""
+								class="img-fluid"
+								id="multimedia-notes-section-img"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			{{#showJoplinCloudLinks}}
+			<div id="work-together-section" class="gray-bg">
+				<div class="container">
+					<div class="row">
+						<div class="col-6 d-none d-md-block"></div>
+						<div class="col-12 col-md-6">
+							<div class="ml-30 ml-mobile-0">
+								<h2>Work <span class="frame-bg frame-bg-yellow">together</span></h2>
+								<p>
+									With Joplin Cloud, share your notes with your friends, family
+									or colleagues and collaborate on them.
+								</p>
+								<p>You can also publish a note to the internet and share the URL with others.</p>
+								<br/>
+								<p>
+									<a href="{{baseUrl}}/plans/" class="button-link btn-blue">Try it now</a>
+								</p>
+								<br class="d-block d-md-none" />
+								<br class="d-block d-md-none" />
+								<div class="text-center">
+									<img
+										src="{{imageBaseUrl}}/work-together-img.png"
+										alt=""
+										class="img-fluid d-block-inline d-md-none"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			{{/showJoplinCloudLinks}}
+
+			<div id="save-web-section" class="blue-bg">
+				<div class="container">
+					<div class="row">
+						<div class="col-12 col-md-6">
+							<div class="ml-30 ml-mobile-0">
+								<h2 id="save-web-title">
+									Save <span class="frame-bg frame-bg-blue">web pages</span> <br />as notes
+								</h2>
+								<p>
+									Use the web clipper extension, available on Chrome and
+									Firefox, to save web pages or take screenshots as notes.
+								</p>
+								<br />
+								<p>
+									<a href="{{baseUrl}}/clipper/" class="button-link btn-blue">Get the clipper</a>
+								</p>
+							</div>
+						</div>
+						<div class="col-12 col-md-6">
+							<br class="d-block d-md-none" />
+							<br class="d-block d-md-none" />
+							<img
+								src="{{imageBaseUrl}}/save-web-img.png"
+								alt=""
+								class="img-fluid"
+								id="save-web-img"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div id="customise-it-section">
+				<div class="container">
+					<div class="row">
+						<div class="d-none d-md-block col-md-6">
+							<img
+								src="{{imageBaseUrl}}/customise-it-img.png"
+								alt=""
+								class="img-fluid"
+							/>
+						</div>
+						<div class="col-12 col-md-6">
+							<div class="ml-30 ml-mobile-0">
+								<h2 id="customise-it-title">
+									<span class="frame-bg frame-bg-yellow-lg">Customise</span> it
+									<br />
+									to your needs
+								</h2>
+								<p>
+									Customise the app with plugins, custom themes and multiple
+									text editors (Rich Text or Markdown). Or create your own
+									scripts and plugins using the Extension API.
+								</p>
+								<br />
+								<p>
+									<a href="{{baseUrl}}/help/#plugins" class="button-link btn-blue">Find out more</a>
+								</p>
+
+								<br class="d-block d-lg-none" />
+								<br class="d-block d-lg-none" />
+								<img
+									src="{{imageBaseUrl}}/customise-it-img.png"
+									alt=""
+									class="img-fluid d-block d-md-none"
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div id="your-note-section" class="blue-bg">
+				<div class="container">
+					<div class="row">
+						<div class="col-12">
+							<h2 class="text-center">
+								Your notes, <span class="frame-bg frame-bg-blue-lg">everywhere</span> you are
+							</h2>
+							<p class="text-center" id="your-note-text">
+								Access your notes from your computer, phone or tablet by synchronising with various services, including Joplin Cloud, Dropbox and OneDrive. The app is available on Windows, macOS, Linux, Android and iOS. A terminal app is also available!
+							</p>
+							<br />
+							<br />
+							<p class="text-center">
+								<a href="{{baseUrl}}/download/" class="button-link btn-blue">Download it now</a>
+							</p>
+							<br />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div id="your-data-section" class="gray-bg">
+				<div class="container">
+					<div class="row">
+						<div class="col-12 col-md-6">
+							<br class="d-block d-md-none" />
+							<div class="ml-30 ml-mobile-0">
+								<h2>100% <span class="frame-bg frame-bg-yellow-lg">your data</span></h2>
+								<p>
+									The app is open source and your notes are saved to an open
+									format, so you'll always have access to them. Uses End-To-End Encryption (E2EE) to secure your notes and ensure no-one but
+									yourself can access them.
+								</p>
+								<br />
+								<p>
+									<a href="{{baseUrl}}/e2ee/" class="button-link btn-blue">More about E2EE</a>
+								</p>
+							</div>
+						</div>
+						<div class="col-12 col-md-6">
+							<br class="d-block d-md-none" />
+							<br class="d-block d-md-none" />
+							<br class="d-block d-md-none" />
+							<img
+								src="{{imageBaseUrl}}/your-data-img.png"
+								alt=""
+								class="img-fluid"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div id="in-the-press-section">
+				<div class="container">
+					<div class="row">
+						<div class="col-12">
+							<br />
+							<h2 class="text-center">
+								In the <span class="frame-bg frame-bg-yellow">Press</span>
+							</h2>
+							<br />
+						</div>
+						<div class="d-none d-md-block col-3">
+							<img
+								src="{{imageBaseUrl}}/in-the-press-img-left.png"
+								alt=""
+								class="img-fluid d-none d-md-block"
+							/>
+						</div>
+						<div class="d-none d-md-block col-6">
+							<div
+								id="{{pressCarouselRegular.id}}"
+								class="carousel slide d-none d-md-block"
+								data-bs-ride="carousel"
+							>
+								{{#pressCarouselRegular}}
+									{{> pressCarouselButtons}}
+								{{/pressCarouselRegular}}
+								<div class="carousel-inner">
+									{{#pressCarouselRegular.items}}
+										{{> pressCarouselItem}}
+									{{/pressCarouselRegular.items}}
+								</div>
+							</div>
+						</div>
+						<div class="d-none d-md-block col-3">
+							<div class="text-right">
+								<br />
+								<img
+									src="{{imageBaseUrl}}/in-the-press-img-right.png"
+									alt=""
+									class="img-fluid d-none d-md-inline-block"
+								/>
+							</div>
+						</div>
+					</div>
+					<div class="row d-block d-md-none">
+						<div class="col-12">
+							<div
+								id="{{pressCarouselMobile.id}}"
+								class="carousel slide"
+								data-bs-ride="carousel"
+							>
+								{{#pressCarouselMobile}}
+									{{> pressCarouselButtons}}
+								{{/pressCarouselMobile}}
+								<div class="carousel-inner">
+									{{#pressCarouselMobile.items}}
+										{{> pressCarouselItem}}
+									{{/pressCarouselMobile.items}}
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div id="sponsors-section" class="gray-bg">
+				<div class="container">
+					<div class="row">
+						<div class="col-12">
+							<h2 class="text-center">
+								Our <span class="frame-bg frame-bg-blue-lg">sponsors</span>
+							</h2>
+							<p class="text-center" id="your-note-text">
+								Thank you for your support!
+							</p>
+							<br />
+
+							<div class="text-center sponsors-org">
+								{{#sponsors.orgs}}
+									<a class="sponsor-org-item" href="{{url}}"><img title="{{title}}" src="{{imageBaseUrl}}/sponsors/{{imageName}}"></a>
+								{{/sponsors.orgs}}
+							</div>
+
+							<div class="text-center sponsors-github">
+								{{#sponsors.github}}
+									<div class="sponsor-github-item">
+										<a href="https://github.com/{{name}}" title="{{name}}">
+											<img width="50" src="https://avatars2.githubusercontent.com/u/{{id}}?s=96&amp;v=4">
+										</a>
+									</div>
+								{{/sponsors.github}}
+							</div>
+							<br />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<footer class="darkblue-bg">
+				<div class="container">
+					<div class="row">
+						<div class="col-3 d-none d-md-block">
+							<img src="{{imageBaseUrl}}/logo-text.svg" alt="" width="150" />
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-12">
+							<hr />
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-12 col-md-6">
+							<a href="{{baseUrl}}">
+								<img
+									src="{{imageBaseUrl}}/logo-text.svg"
+									width="120"
+									class="img-center d-block d-md-none"
+									alt=""
+								/>
+							</a>
+							<br class="d-block d-md-none" />
+							<p class="text-center-sm">Copyright &copy; 2016-{{yyyy}} Laurent Cozic</p>
+						</div>
+						<div class="col-12 col-md-6">
+							<p class="text-right text-center-sm right-links">
+								<a href="https://github.com/laurent22/joplin/" class="github-link"><i class="fab fa-github"></i> GitHub Repository</a>
+								<a href="{{baseUrl}}/privacy/">Privacy Policy</a>
+							</p>
+						</div>
+					</div>
+				</div>
+			</footer>
+		</div>
+
+		<script
+			src="{{jsBaseUrl}}/bootstrap5.0.2.min.js"
+			rel="preload"
+			as="script"
+		></script>
+		<script src="{{jsBaseUrl}}/script.js?t={{buildTime}}"></script>
+		{{> analytics}}
+	</body>
+</html>

Assets/WebsiteAssets/templates/main-new.mustache

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!--
+
+!!! WARNING !!!
+
+This file was auto-generated from {{{sourceMarkdownFile}}} and any manual change
+made to it will be overwritten. To make a change to this file please modify
+the source Markdown file:
+
+https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
+
+-->
+
+	<head>
+		{{> gaOptimize}}
+		<meta
+			charset="utf-8"
+			http-equiv="X-UA-Compatible"
+			content="IE=edge,chrome=1"
+		/>
+		<link rel="icon" href="{{imageBaseUrl}}/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#000000" />
+		<meta name="description" content="Joplin, the open source note-taking application" />
+		<link
+			rel="stylesheet"
+			href="{{cssBaseUrl}}/bootstrap5.0.2.min.css"
+			as="style"
+		/>
+		<link rel="stylesheet" href="{{cssBaseUrl}}/fontawesome-all.min.css?t={{buildTime}}">
+		<link
+			href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
+			rel="stylesheet"
+			as="style"
+			media="all"
+			onload="this.media='all'; this.onload = null"
+		/>
+		<link rel="stylesheet" href="{{cssBaseUrl}}/site.css?t={{buildTime}}" as="style" />
+		<title>{{pageTitle}}</title>
+
+		<script
+			src="{{jsBaseUrl}}/jquery-3.6.0.min.js"
+			rel="preload"
+			as="script"
+		></script>
+	</head>
+	<body class="website-env-{{env}}">
+		<div class="container-fluid generic-template {{pageName}}-page" id="main-container">
+
+			{{#navbar}}
+				{{> navbar}}
+			{{/navbar}}
+
+			<div class="help-page-container page-{{sourceMarkdownName}}">
+				<div class="container">
+					<div class="row content-wrapper">
+						{{#showToc}}<div id="toc">{{{tocHtml}}}</div>{{/showToc}}
+
+						<div class="main-content">
+							<div class="alert alert-danger alert-env-dev" role="alert">
+								Running in {{env}} mode!
+							</div>
+							{{{contentHtml}}}
+							{{#showImproveThisDoc}}
+								<div class="bottom-links">
+									<a href="https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}">
+										<i class="fab fa-github"></i> Improve this doc
+									</a>
+								</div>
+							{{/showImproveThisDoc}}
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<footer class="darkblue-bg">
+				<div class="container">
+					<div class="row">
+						<div class="col-3 d-none d-md-block">
+							<img src="{{imageBaseUrl}}/logo-text.svg" alt="" width="150" />
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-12">
+							<hr />
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-12 col-md-6">
+							<img
+								src="{{imageBaseUrl}}/logo-text.svg"
+								width="120"
+								class="img-center d-block d-md-none"
+								alt=""
+							/>
+							<br class="d-block d-md-none" />
+							<p class="text-center-sm">Copyright &copy; 2016-{{yyyy}} Laurent Cozic</p>
+						</div>
+						<div class="col-12 col-md-6 right-links">
+							<p class="text-right text-center-sm">
+								<a href="https://github.com/laurent22/joplin/" class="github-link"><i class="fab fa-github"></i> GitHub Repository</a>
+								<a href="{{baseUrl}}/privacy/">Privacy Policy</a>
+							</p>
+						</div>
+					</div>
+				</div>
+			</footer>
+		</div>
+
+		<script src="{{jsBaseUrl}}/script.js?t={{buildTime}}"></script>
+
+		{{> analytics}}
+	</body>
+</html>

Assets/WebsiteAssets/templates/partials/analytics.mustache

@@ -0,0 +1,10 @@
+<script>
+	if (window.location.hostname !== 'localhost') {
+		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+		ga('create', 'UA-103586105-1', 'auto');
+		ga('send', 'pageview');
+	}
+</script>

Assets/WebsiteAssets/templates/partials/gaOptimize.mustache

@@ -0,0 +1,2 @@
+<!-- Donate button A/B testing -->
+<script async src="https://www.googleoptimize.com/optimize.js?id=OPT-PW3ZPK3"></script>

Assets/WebsiteAssets/templates/partials/joplinCloudButton.mustache

@@ -0,0 +1 @@
+<a href="{{baseUrl}}/plans/" class="button-link btn-trans plans-button">Joplin Cloud</a>

Assets/WebsiteAssets/templates/partials/navbar.mustache

@@ -0,0 +1,72 @@
+<div class="{{#isFrontPage}}navbar-frontpage blue-bg{{/isFrontPage}} {{^isFrontPage}}navbar-main white-bg{{/isFrontPage}}" id="nav-section">
+	<div class="container">
+		<div class="row">
+			<div class="col-3">
+				<a href="{{baseUrl}}/">
+					<img
+						src="{{#isFrontPage}}{{imageBaseUrl}}/logo-text.svg{{/isFrontPage}}{{^isFrontPage}}{{imageBaseUrl}}/logo-text-blue.svg{{/isFrontPage}}"
+						alt=""
+						id="top-logo"
+						width="180"
+					/>
+				</a>
+			</div>
+			<div class="col-9 text-right d-none d-md-block">
+				<a href="{{baseUrl}}/help/" class="fw500">Help</a>
+				<a href="{{forumUrl}}" class="fw500">Forum</a>
+				{{#showJoplinCloudLinks}}
+					{{> joplinCloudButton}}
+				{{/showJoplinCloudLinks}}
+				{{> supportButton}}
+			</div>
+			<div class="col-9 text-right d-block d-md-none navbar-mobile-content">
+				{{> supportButton}}
+
+				<span class="pointer"
+					><img
+						src="{{#isFrontPage}}{{imageBaseUrl}}/mobile-menu-open-icon.png{{/isFrontPage}}{{^isFrontPage}}{{imageBaseUrl}}/mobile-menu-black-open-icon.png{{/isFrontPage}}"
+						id="open-menu-mobile"
+						alt=""
+				/></span>
+				&nbsp;&nbsp;
+
+				<div id="menu-mobile">
+					<div>
+						<div class="text-right">
+							<img
+								src="{{imageBaseUrl}}/close-icon.png"
+								alt=""
+								class="pointer"
+								id="close-menu-mobile"
+							/>
+						</div>
+
+						<div class="text-center menu-mobile-top">
+							<a href="{{forumUrl}}" class="fw500 mobile-menu-link">Forum</a>
+							<a href="{{baseUrl}}/help/" class="fw500 mobile-menu-link">Help</a>
+						</div>
+
+						<div class="menu-mobile-buttons">
+							{{#showJoplinCloudLinks}}
+								{{> joplinCloudButton}}
+							{{/showJoplinCloudLinks}}
+							{{> supportButton}}
+						</div>
+					</div>
+
+					{{#showToc}}
+						<div id="toc-mobile">{{{tocHtml}}}</div>
+					{{/showToc}}
+					
+					<div>
+						<p class="light-blue mobile-menu-link-bottom text-center">
+							Copyright &copy; 2016-{{yyyy}} Laurent&nbsp;Cozic
+							<br/>
+							<a href="{{baseUrl}}/privacy/" class="fw500">Privacy Policy</a>
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

Assets/WebsiteAssets/templates/partials/plan.mustache

@@ -0,0 +1,71 @@
+<div class="col-12 col-lg-4 account-type-{{priceMonthly.accountType}}">
+	<div class="price-container {{#featured}}price-container-blue{{/featured}}">
+		<div class="price-row">
+			<div class="plan-type">
+				<img src="{{imageBaseUrl}}/{{iconName}}.png"/>&nbsp;{{title}}
+			</div>
+
+			<div class="plan-price plan-price-monthly">
+				{{priceMonthly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;/month</sub>
+			</div>
+
+			<div class="plan-price plan-price-yearly">
+				{{priceYearly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;/month</sub>
+			</div>
+		</div>
+
+		<div class="plan-price-yearly-per-year">
+			<div>
+				({{priceYearly.formattedAmount}}<sub class="per-year">&nbsp;/year</sub>)
+			</div>
+		</div>
+
+		{{#featuresOn}}
+			<p><i class="fas fa-check feature feature-on"></i>{{.}}</p>
+		{{/featuresOn}}
+
+		{{#featuresOff}}
+			<p class="unchecked-text"><i class="fas fa-times feature feature-off"></i>{{.}}</p>
+		{{/featuresOff}}
+		
+		<p class="text-center subscribe-wrapper">
+			<a id="subscribeButton-{{name}}" href="{{cfaUrl}}" class="button-link btn-white subscribeButton">{{cfaLabel}}</a>
+		</p>
+	</div>
+
+	<script>
+		(function() {
+			const stripePricesIds = {
+				monthly: '{{{priceMonthly.id}}}',
+				yearly: '{{{priceYearly.id}}}',
+			};
+			const planName = '{{{name}}}';
+			const buttonId = 'subscribeButton-' + planName;
+			const buttonElement = document.getElementById(buttonId);
+
+			if (stripePricesIds.monthly) {
+				function handleResult() {
+					console.info('Redirected to checkout');
+				}
+
+				buttonElement.addEventListener("click", function(evt) {
+					evt.preventDefault();
+
+					const priceId = stripePricesIds[subscriptionPeriod];
+
+					if (!priceId) {
+						console.error('Invalid period: ' + subscriptionPeriod);
+						return;
+					}
+
+					createCheckoutSession(priceId).then(function(data) {
+						stripe.redirectToCheckout({
+							sessionId: data.sessionId
+						})
+						.then(handleResult);
+					});
+				});
+			}
+		})();
+	</script>
+</div>

Assets/WebsiteAssets/templates/partials/pressCarouselButtons.mustache

@@ -0,0 +1,22 @@
+<div class="carousel-indicators">
+	<button
+		type="button"
+		data-bs-target="#{{id}}"
+		data-bs-slide-to="0"
+		class="active"
+		aria-current="true"
+		aria-label="Slide 1"
+	></button>
+	<button
+		type="button"
+		data-bs-target="#{{id}}"
+		data-bs-slide-to="1"
+		aria-label="Slide 2"
+	></button>
+	<button
+		type="button"
+		data-bs-target="#{{id}}"
+		data-bs-slide-to="2"
+		aria-label="Slide 3"
+	></button>
+</div>

Assets/WebsiteAssets/templates/partials/pressCarouselItem.mustache

@@ -0,0 +1,23 @@
+<div class="carousel-item {{active}} press-carousel" data-bs-interval="10000">
+	<img
+		src="{{imageBaseUrl}}/transparent-bg.png"
+		class="d-block w-100"
+		alt=""
+	/>
+	<div class="carousel-caption">
+		<img
+			src="{{imageBaseUrl}}/{{imageName}}"
+			alt=""
+			class="img-fluid img-center photo"
+		/>
+		<br />
+		<p class="text-center">
+			“{{body}}”
+		</p>
+		<br />
+		<p class="fw500 text-center">
+			<a href="{{url}}">{{source}}</a>
+		</p>
+		<p class="fw400 small text-center">By {{author}}</p>
+	</div>
+</div>

Assets/WebsiteAssets/templates/partials/supportButton.mustache

@@ -0,0 +1,3 @@
+<a class="button-link btn-blue sponsor-button" href="{{baseUrl}}/donate">
+	<i class="fas fa-heart heart-full"></i><i class="far fa-heart heart-line"></i>&nbsp;Support us
+</a>

Assets/WebsiteAssets/templates/plans.mustache

@@ -0,0 +1,119 @@
+<div id="plans-section" class="env-{{env}}">
+	<div class="container">
+		<div class="row">
+			<div class="col-12 title-box">
+				<h1 class="text-center">
+					Joplin Cloud <span class="frame-bg frame-bg-yellow">plans</span>
+				</h1>
+				<p class="text-center sub-title">
+					Joplin Cloud allows you to synchronise your notes across devices. It also lets you publish notes, and collaborate on notebooks with your friends, family or colleagues.
+				</p>
+			</div>
+		</div>
+
+		<noscript>
+			<div class="alert alert-danger alert-env-dev" role="alert" style='text-align: center; margin-top: 10px;'>
+				To use this page please enable JavaScript!
+			</div>
+		</noscript>
+
+		<div style="display: flex; justify-content: center; margin-top: 1.2em">	
+			<div class="form-check form-check-inline">
+				<input id="pay-monthly-radio" class="form-check-input" type="radio" name="pay-radio" checked value="monthly">
+				<label style="font-weight: bold" class="form-check-label" for="pay-monthly-radio">
+					Pay Monthly
+				</label>
+			</div>
+
+			<div class="form-check form-check-inline">
+				<input id="pay-yearly-radio" class="form-check-input" type="radio" name="pay-radio" value="yearly">
+				<label style="font-weight: bold" class="form-check-label" for="pay-yearly-radio">
+					Pay Yearly
+				</label>
+			</div>	
+		</div>
+		
+		<div class="row plan-group plan-prices-monthly">
+			{{#plans.basic}}
+				{{> plan}}
+			{{/plans.basic}}
+
+			{{#plans.pro}}
+				{{> plan}}
+			{{/plans.pro}}
+
+			{{#plans.business}}
+				{{> plan}}
+			{{/plans.business}}
+		</div>
+
+		<div class="row">
+			{{{faqHtml}}}
+		</div>
+	</div>
+
+	<script src="https://js.stripe.com/v3/"></script>
+
+	<script>
+		const urlQuery = new URLSearchParams(location.search);
+		let subscriptionPeriod = 'monthly';
+		var stripe = Stripe('{{{stripeConfig.publishableKey}}}');
+
+		let checkoutSessionUser = null;
+
+		// Temporary setup to allow Beta users to start their subscription.
+		function setupBetaHandling(query) {
+			let accountType = Number(query.get('account_type'));
+			if (isNaN(accountType)) accountType = 1;
+
+			const email = query.get('email');
+			if (!email) return;
+		
+			$('.account-type-3').css('display', 'none');
+			$('.subscribeButton').text('Buy now');
+			
+			if (accountType === 2) {
+				$('.account-type-1').css('display', 'none');
+			}
+
+			checkoutSessionUser = { email, accountType };
+		}
+
+		var createCheckoutSession = function(priceId) {
+			const coupon = urlQuery.get('coupon') || '';
+
+			console.info('Creating Stripe session for price:', priceId, 'Coupon:', coupon);
+
+			return fetch("{{{stripeConfig.webhookBaseUrl}}}/stripe/createCheckoutSession", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json"
+				},
+				body: JSON.stringify({
+					priceId: priceId,
+					coupon: coupon,
+					email: checkoutSessionUser ? checkoutSessionUser.email : '',
+				})
+			}).then(async function(result) {
+				if (!result.ok) {
+					console.error('Could not create Stripe checkout session', await result.text());
+					alert('The checkout session could not be created. Please contact support@joplincloud.com for support.');
+				} else {
+					return result.json();
+				}
+			});
+		};
+
+		$(() => {
+			$("input[name='pay-radio']").change(function() {
+				const period = $("input[type='radio'][name='pay-radio']:checked").val();
+				subscriptionPeriod = period;
+			
+				$('.plan-group').removeClass(period === 'monthly' ? 'plan-prices-yearly' : 'plan-prices-monthly');
+				$('.plan-group').addClass('plan-prices-' + period);
+			});
+
+			setupBetaHandling(urlQuery);
+		});
+	</script>
+</div>

BUILD.md

@@ -1,5 +1,3 @@
- [![Travis Build Status](https://travis-ci.org/laurent22/joplin.svg?branch=master)](https://travis-ci.org/laurent22/joplin) [![Appveyor Build Status](https://ci.appveyor.com/api/projects/status/github/laurent22/joplin?branch=master&passingText=master%20-%20OK&svg=true)](https://ci.appveyor.com/project/laurent22/joplin)
-
 # Building the applications
 
 The Joplin source code is hosted on a [monorepo](https://en.wikipedia.org/wiki/Monorepo) managed by Lerna. The usage of Lerna is mostly transparent as the needed commands have been moved to the root package.json and thus are invoked for example when running `npm install` or `npm run watch`. The main thing to know about Lerna is that it links the packages in the monorepo using `npm link`, so if you check the node_modules directory you will see links instead of actual directories for certain packages. This is something to keep in mind as these links can cause issues in some cases.
@@ -21,10 +19,9 @@ There are also a few forks of existing packages under the "fork-*" name.
 ## Required dependencies
 
 - Install node 10+ - https://nodejs.org/en/
-- macOS, Linux: Install rsync - https://nodejs.org/en/
 - macOS: Install Cocoapods - `brew install cocoapods`
-- Windows: Install Windows Build Tools - `npm install -g windows-build-tools`
+- Windows: Install Windows Build Tools - `npm install -g windows-build-tools --vs2015`
-- Linux: Install dependencies - `sudo apt install libnss3 libsecret-1-dev`
+- Linux: Install dependencies - `sudo apt install libnss3 libsecret-1-dev python rsync`
 
 ## Building
 
@@ -65,7 +62,7 @@ Normally the **bundler** should start automatically with the application. If it
 	npm install
 	npm run watch # To watch for changes
 
-To test the extension please refer to the relevant pages for each browser: [Firefox](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#Trying_it_out) / [Chrome](https://developer.chrome.com/extensions/faq#faq-dev-01). Please note that the extension in dev mode will only connect to a dev instance of the desktop app (and vice-versa).
+To test the extension please refer to the relevant pages for each browser: [Firefox](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#Trying_it_out) / [Chrome](https://developer.chrome.com/docs/extensions/mv3/getstarted/). Please note that the extension in dev mode will only connect to a dev instance of the desktop app (and vice-versa).
 
 ## Watching files
 
@@ -110,4 +107,4 @@ It still requires you to quit the application each time you want it to rebuild,
 
 # Troubleshooting
 
-Please read for the [Build Troubleshooting Document](https://github.com/laurent22/joplin/blob/dev/readme/build_troubleshooting.md) for various tips on how to get the build working.
+Please read for the [Build Troubleshooting Document](https://github.com/laurent22/joplin/blob/dev/readme/build_troubleshooting.md) for various tips on how to get the build working.