doc

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.dockerignore

@@ -1,12 +1,19 @@
+_mydocs/
+_releases/
+.git/
+.yarn/cache/
+**/.DS_Store
 **/node_modules
 Assets/
-.git/
-_releases/
-packages/app-desktop
-packages/app-cli
-packages/app-mobile
-packages/app-clipper
-packages/generator-joplin
-packages/plugin-repo-cli
+docs/
+lerna-debug.log
+packages/app-cli/
+packages/app-clipper/
+packages/app-desktop/
+packages/app-mobile/
+packages/generator-joplin/
+packages/plugin-repo-cli/
 packages/server/db-*.sqlite
-packages/server/temp
+packages/server/dist/
+packages/server/logs/
+packages/server/temp/

.eslintrc.js

@@ -42,6 +42,8 @@ module.exports = {
 		'zxcvbn': 'readonly',
 
 		'tinymce': 'readonly',
+
+		'JSX': 'readonly',
 	},
 	'parserOptions': {
 		'ecmaVersion': 2018,
@@ -76,17 +78,29 @@ module.exports = {
 
 		'no-array-constructor': ['error'],
 		'radix': ['error'],
+		'eqeqeq': ['error', 'always'],
+		'no-console': ['error', { 'allow': ['warn', 'error'] }],
 
 		// 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 }],
 
 		// Checks rules of Hooks
-		'react-hooks/rules-of-hooks': 'error',
+		'@seiyab/react-hooks/rules-of-hooks': 'error',
+		'@seiyab/react-hooks/exhaustive-deps': ['error', { 'ignoreThisDependency': 'props' }],
+
 		// Checks effect dependencies
 		// Disable because of this: https://github.com/facebook/react/issues/16265
 		// "react-hooks/exhaustive-deps": "warn",
 
+		'jest/require-top-level-describe': ['error', { 'maxNumberOfTopLevelDescribes': 1 }],
+		'jest/no-identical-title': ['error'],
+		'jest/prefer-lowercase-title': ['error', { 'ignoreTopLevelDescribe': true }],
+
+		'promise/prefer-await-to-then': 'error',
+		'no-unneeded-ternary': 'error',
+		'github/array-foreach': ['error'],
+
 		// -------------------------------
 		// Formatting
 		// -------------------------------
@@ -96,14 +110,18 @@ module.exports = {
 		'semi': ['error', 'always'],
 		'eol-last': ['error', 'always'],
 		'quotes': ['error', 'single'],
+
+		// Note that "indent" only applies to JavaScript files. See
+		// https://github.com/laurent22/joplin/issues/8360
 		'indent': ['error', 'tab'],
 		'comma-dangle': ['error', {
 			'arrays': 'always-multiline',
 			'objects': 'always-multiline',
 			'imports': 'always-multiline',
 			'exports': 'always-multiline',
-			'functions': 'never',
+			'functions': 'always-multiline',
 		}],
+		'comma-spacing': ['error', { 'before': false, 'after': true }],
 		'no-trailing-spaces': 'error',
 		'linebreak-style': ['error', 'unix'],
 		'prefer-template': ['error'],
@@ -124,19 +142,45 @@ module.exports = {
 			'named': 'never',
 			'asyncArrow': 'always',
 		}],
-		'multiline-comment-style': ['error', 'separate-lines'],
+		'multiline-comment-style': ['error', 'separate-lines', { checkJSDoc: true }],
 		'space-before-blocks': 'error',
 		'spaced-comment': ['error', 'always'],
 		'keyword-spacing': ['error', { 'before': true, 'after': true }],
 		'no-multi-spaces': ['error'],
+		'prefer-object-spread': ['error'],
+		'prefer-regex-literals': ['error', { disallowRedundantWrapping: true }],
+
+		// Regarding the keyword blacklist:
+		// - err: We generally avoid using too many abbreviations, so it should
+		//   be "error", not "err"
+		// - notebook: In code, it should always be "folder" (not "notebook").
+		//   In user-facing text, it should be "notebook".
+		'id-denylist': ['error', 'err', 'notebook', 'notebooks'],
+		'prefer-arrow-callback': ['error'],
 	},
 	'plugins': [
 		'react',
 		'@typescript-eslint',
-		'react-hooks',
+		// Need to use a fork of the official rules of hooks because of this bug:
+		// https://github.com/facebook/react/issues/16265
+		'@seiyab/eslint-plugin-react-hooks',
+		// 'react-hooks',
 		'import',
+		'promise',
+		'jest',
+		'github',
 	],
 	'overrides': [
+		{
+			'files': [
+				'packages/tools/**',
+				'packages/app-mobile/tools/**',
+				'packages/app-desktop/tools/**',
+			],
+			'rules': {
+				'no-console': 'off',
+			},
+		},
 		{
 			// enable the rule specifically for TypeScript files
 			'files': ['*.ts', '*.tsx'],
@@ -145,10 +189,18 @@ module.exports = {
 				'project': './tsconfig.eslint.json',
 			},
 			'rules': {
-				// Warn only because it would make it difficult to convert JS classes to TypeScript, unless we
-				// make everything public which is not great. New code however should specify member accessibility.
-				'@typescript-eslint/explicit-member-accessibility': ['warn'],
+				'@typescript-eslint/indent': ['error', 'tab', {
+					'ignoredNodes': [
+						// See https://github.com/typescript-eslint/typescript-eslint/issues/1824
+						'TSUnionType',
+					],
+				}],
+				'@typescript-eslint/ban-ts-comment': ['error'],
+				'@typescript-eslint/ban-types': 'error',
+				'@typescript-eslint/explicit-member-accessibility': ['error'],
 				'@typescript-eslint/type-annotation-spacing': ['error', { 'before': false, 'after': true }],
+				'@typescript-eslint/array-type': 'error',
+				'@typescript-eslint/no-inferrable-types': ['error'],
 				'@typescript-eslint/comma-dangle': ['error', {
 					'arrays': 'always-multiline',
 					'objects': 'always-multiline',
@@ -157,8 +209,9 @@ module.exports = {
 					'enums': 'always-multiline',
 					'generics': 'always-multiline',
 					'tuples': 'always-multiline',
-					'functions': 'never',
+					'functions': 'always-multiline',
 				}],
+				'@typescript-eslint/object-curly-spacing': ['error', 'always'],
 				'@typescript-eslint/semi': ['error', 'always'],
 				'@typescript-eslint/member-delimiter-style': ['error', {
 					'multiline': {

.github/scripts/run_ci.sh

@@ -37,6 +37,9 @@ 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 "BUILD_SEQUENCIAL=$BUILD_SEQUENCIAL"
+echo "SERVER_REPOSITORY=$SERVER_REPOSITORY"
+echo "SERVER_TAG_PREFIX=$SERVER_TAG_PREFIX"
 
 echo "IS_CONTINUOUS_INTEGRATION=$IS_CONTINUOUS_INTEGRATION"
 echo "IS_PULL_REQUEST=$IS_PULL_REQUEST"
@@ -46,13 +49,19 @@ echo "IS_MACOS=$IS_MACOS"
 
 echo "Node $( node -v )"
 echo "Npm $( npm -v )"
+echo "Yarn $( yarn -v )"
 
 # =============================================================================
 # Install packages
 # =============================================================================
 
 cd "$ROOT_DIR"
-npm install
+yarn install
+testResult=$?
+if [ $testResult -ne 0 ]; then
+	echo "Yarn installation failed. Search for 'exit code 1' in the log for more information."
+	exit $testResult
+fi
 
 # =============================================================================
 # Run test units. Only do it for pull requests and dev branch because we don't
@@ -78,7 +87,7 @@ if [ "$IS_PULL_REQUEST" == "1" ] || [ "$IS_DEV_BRANCH" = "1" ]; then
 	#
 	# https://stackoverflow.com/questions/38558989
 	export NODE_OPTIONS="--max-old-space-size=4096"
-	npm run test-ci
+	yarn run test-ci
 	testResult=$?
 	if [ $testResult -ne 0 ]; then
 		exit $testResult
@@ -93,7 +102,13 @@ fi
 if [ "$IS_PULL_REQUEST" == "1" ] || [ "$IS_DEV_BRANCH" = "1" ]; then
 	echo "Step: Running linter..."
 
-	npm run linter-ci ./
+	yarn run linter-ci ./
+	testResult=$?
+	if [ $testResult -ne 0 ]; then
+		exit $testResult
+	fi
+
+	yarn run packageJsonLint
 	testResult=$?
 	if [ $testResult -ne 0 ]; then
 		exit $testResult
@@ -121,12 +136,11 @@ fi
 # =============================================================================
 # Check that we didn't lose any string due to gettext not being able to parse
 # newly modified or added scripts. This is convenient to quickly view on GitHub
-# what commit may have broken translation building. We run this on macOS because
-# we need the latest version of gettext (and stable Ubuntu doesn't have it).
+# what commit may have broken translation building.
 # =============================================================================
 
 if [ "$IS_PULL_REQUEST" == "1" ] || [ "$IS_DEV_BRANCH" = "1" ]; then
-	if [ "$IS_MACOS" == "1" ]; then
+	if [ "$IS_LINUX" == "1" ]; then
 		echo "Step: Checking for lost translation strings..."
 
 		xgettext --version
@@ -139,6 +153,39 @@ if [ "$IS_PULL_REQUEST" == "1" ] || [ "$IS_DEV_BRANCH" = "1" ]; then
 	fi
 fi
 
+# =============================================================================
+# Check .gitignore and .eslintignore files - they should be updated when
+# new TypeScript files are added by running `yarn run updateIgnored`.
+# See coding_style.md
+# =============================================================================
+
+if [ "$IS_PULL_REQUEST" == "1" ]; then
+	if [ "$IS_LINUX" == "1" ]; then
+		echo "Step: Checking for files that should have been ignored..."
+
+		node packages/tools/checkIgnoredFiles.js 
+		testResult=$?
+		if [ $testResult -ne 0 ]; then
+			exit $testResult
+		fi
+	fi
+fi
+
+# =============================================================================
+# Check that the website still builds
+# =============================================================================
+
+if [ "$IS_PULL_REQUEST" == "1" ] || [ "$IS_DEV_BRANCH" = "1" ]; then
+	echo "Step: Check that the website still builds..."
+
+	mkdir -p ../joplin-website/docs
+	SKIP_SPONSOR_PROCESSING=1 yarn run buildWebsite
+	testResult=$?
+	if [ $testResult -ne 0 ]; then
+		exit $testResult
+	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
@@ -166,12 +213,48 @@ 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
+	# cd "$ROOT_DIR/packages/tools"
+	# node bundleDefaultPlugins.js
+	cd "$ROOT_DIR/packages/app-desktop"
+
+	if [ "$IS_MACOS" == "1" ]; then
+		# This is to fix this error:
+		# 
+		# Exit code: ENOENT. spawn /usr/bin/python ENOENT
+		#
+		# Ref: https://github.com/electron-userland/electron-builder/issues/6767#issuecomment-1096589528
+		#
+		# It can be removed once we upgrade to electron-builder@23, however we
+		# cannot currently do this due to this error:
+		# https://github.com/laurent22/joplin/issues/8149
+		#
+		# electron-builder@24, however, still expects the python binary to be named
+		# "python" and seems to no longer respect the PYTHON_PATH environment variable.
+		# We work around this by aliasing python.
+		alias python=$(which python3)
+		USE_HARD_LINKS=false yarn run dist
+	else
+		USE_HARD_LINKS=false yarn run dist
+	fi	
+elif [[ $IS_LINUX = 1 ]] && [[ $GIT_TAG_NAME = $SERVER_TAG_PREFIX-* ]]; then
 	echo "Step: Building Docker Image..."
 	cd "$ROOT_DIR"
-	npm run buildServerDocker -- --tag-name $GIT_TAG_NAME --push-images
+	yarn run buildServerDocker --tag-name $GIT_TAG_NAME --push-images --repository $SERVER_REPOSITORY
 else
 	echo "Step: Building but *not* publishing desktop application..."
-	USE_HARD_LINKS=false npm run dist -- --publish=never
+	
+	if [ "$IS_MACOS" == "1" ]; then
+		# See above why we need to specify Python
+		alias python=$(which python3)
+
+		# We also want to disable signing the app in this case, because
+		# it randomly fails and we don't even need it
+		# https://www.electron.build/code-signing#how-to-disable-code-signing-during-the-build-process-on-macos
+		export CSC_IDENTITY_AUTO_DISCOVERY=false
+		npm pkg set 'build.mac.identity'=null --json
+		
+		USE_HARD_LINKS=false yarn run dist --publish=never
+	else
+		USE_HARD_LINKS=false yarn run dist --publish=never
+	fi
 fi

.github/stale.yml

@@ -1,25 +0,0 @@
-# Configuration for probot-stale - https://github.com/probot/stale
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 30
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - "good first issue"
-  - "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
-markComment: >
-  Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs.
-  You may comment on the issue and I will leave it open.
-  Thank you for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: >
-  Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.
-only: issues

.github/workflows/build-android.yml

@@ -0,0 +1,46 @@
+# The goal of this action is to compile the Android debug build. That should
+# tell us automatically if something got broken when a dependency was changed.
+
+name: react-native-android-build-apk
+on: [push, pull_request]
+
+jobs:
+  pre_job:
+    if: github.repository == 'laurent22/joplin'
+    runs-on: ubuntu-latest
+    outputs:
+      should_skip: ${{ steps.skip_check.outputs.should_skip }}
+    steps:
+      - id: skip_check
+        uses: fkirc/skip-duplicate-actions@v5
+        with:
+          concurrent_skipping: 'same_content_newer'
+
+  BuildAndroidDebug:
+    needs: pre_job
+    if: github.repository == 'laurent22/joplin' && needs.pre_job.outputs.should_skip != 'true'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install Linux dependencies
+        run: |
+          sudo apt-get update || true
+          sudo apt-get install -y libsecret-1-dev
+          
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+          cache: 'yarn'
+
+      - name: Install Yarn
+        run: |
+          corepack enable
+
+      - name: Install
+        run:  yarn install
+
+      - name: Build Android Release
+        run: |
+          cd packages/app-mobile/android && ./gradlew assembleDebug
+          

.github/workflows/build-macos-m1.yml

@@ -0,0 +1,73 @@
+name: Build macOS M1
+on: [push, pull_request]
+jobs:
+  pre_job:
+    if: github.repository == 'laurent22/joplin'
+    runs-on: ubuntu-latest
+    outputs:
+      should_skip: ${{ steps.skip_check.outputs.should_skip }}
+    steps:
+      - id: skip_check
+        uses: fkirc/skip-duplicate-actions@v5
+        with:
+          concurrent_skipping: 'same_content_newer'
+
+  Main:
+    needs: pre_job
+    # We always process desktop release tags, because they also publish the release
+    if: github.repository == 'laurent22/joplin' && (needs.pre_job.outputs.should_skip != 'true' || startsWith(github.ref, 'refs/tags/v'))
+    runs-on: macos-latest
+    steps:
+
+      - uses: actions/checkout@v2
+      - uses: olegtarasov/get-tag@v2.1
+      - uses: actions/setup-node@v2
+        with:
+          # We need to pin the version to 18.15, because 18.16+ fails with this error:
+          # https://github.com/facebook/react-native/issues/36440
+          node-version: '18.15.0'
+          cache: 'yarn'
+
+      - name: Install Yarn
+        run: |
+          # https://yarnpkg.com/getting-started/install
+          corepack enable
+
+      - name: Build macOS M1 app
+        env:
+          APPLE_ASC_PROVIDER: ${{ secrets.APPLE_ASC_PROVIDER }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
+          CSC_KEY_PASSWORD: ${{ secrets.APPLE_CSC_KEY_PASSWORD }}
+          CSC_LINK: ${{ secrets.APPLE_CSC_LINK }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+          IS_CONTINUOUS_INTEGRATION: 1
+          BUILD_SEQUENCIAL: 1
+        run: |
+          export npm_config_arch=arm64
+          export npm_config_target_arch=arm64
+          yarn install
+          cd packages/app-desktop
+          npm pkg set 'build.mac.artifactName'='${productName}-${version}-${arch}.${ext}'
+          npm pkg set 'build.mac.target.target'='dmg'
+          npm pkg set 'build.mac.target.arch[0]'='arm64'
+
+          if [[ $GIT_TAG_NAME = v* ]]; then
+            echo "Building and publishing desktop application..."
+            PYTHON_PATH=$(which python) USE_HARD_LINKS=false yarn run dist --mac --arm64
+
+            yarn renameReleaseAssets --repo="$GH_REPO" --tag="$GIT_TAG_NAME" --token="$GITHUB_TOKEN"
+          else
+            echo "Building but *not* publishing desktop application..."
+
+            # We also want to disable signing the app in this case, because
+            # it doesn't work and we don't need it.
+            # https://www.electron.build/code-signing#how-to-disable-code-signing-during-the-build-process-on-macos
+
+            export CSC_IDENTITY_AUTO_DISCOVERY=false
+            npm pkg set 'build.mac.identity'=null --json
+
+            PYTHON_PATH=$(which python) USE_HARD_LINKS=false yarn run dist  --mac --arm64 --publish=never
+          fi

.github/workflows/cla.yml

@@ -0,0 +1,37 @@
+name: "CLA Assistant"
+on:
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened,closed,synchronize]
+
+jobs:
+  CLAAssistant:
+    if: github.repository == 'laurent22/joplin'
+    runs-on: ubuntu-latest
+    steps:
+      - name: "CLA Assistant"
+        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
+        # Beta Release
+        uses: contributor-assistant/github-action@v2.3.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # the below token should have repo scope and must be manually added by you in the repository's secret
+          PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+        with:
+          path-to-signatures: 'readme/cla_signatures.json'
+          path-to-document: 'https://github.com/laurent22/joplin/blob/dev/readme/cla.md' # e.g. a CLA or a DCO document
+          # branch should not be protected
+          branch: 'dev'
+          allowlist: joplinbot,renovate[bot]
+
+         # the followings are the optional inputs - If the optional inputs are not given, then default values will be taken
+          #remote-organization-name: enter the remote organization name where the signatures should be stored (Default is storing the signatures in the same repository)
+          #remote-repository-name: enter the  remote repository name where the signatures should be stored (Default is storing the signatures in the same repository)
+          #create-file-commit-message: 'For example: Creating file for storing CLA Signatures'
+          #signed-commit-message: 'For example: $contributorName has signed the CLA in #$pullRequestNo'
+          #custom-notsigned-prcomment: 'pull request comment with Introductory message to ask new contributors to sign'
+          #custom-pr-sign-comment: 'The signature to be committed in order to sign the CLA'
+          #custom-allsigned-prcomment: 'pull request comment when all contributors has signed, defaults to **CLA Assistant Lite bot** All Contributors have signed the CLA.'
+          lock-pullrequest-aftermerge: false
+          #use-dco-flag: true - If you are using DCO instead of CLA

.github/workflows/close-stale-issues.yml

@@ -0,0 +1,24 @@
+name: 'Close stale issues'
+on:
+  schedule:
+    - cron: '0 16 * * *'
+permissions:
+  issues: write
+jobs:
+  ProcessStaleIssues:
+    if: github.repository == 'laurent22/joplin'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v4
+        with:
+          # Use this to do a dry run from a pull request
+          # debug-only: true
+          stale-issue-message: "Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the [Joplin forum](https://discourse.joplinapp.org/). This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions."
+          days-before-stale: 30
+          days-before-close: 7
+          operations-per-run: 1000
+          exempt-issue-labels: 'good first issue,upstream,backlog,high,medium,spec,cannot reproduce,enhancement'
+          stale-issue-label: 'stale'
+          close-issue-message: 'Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, feel free to create a new issue with up-to-date information.'
+          # Don't process pull requests at all
+          days-before-pr-stale: -1

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

@@ -1,13 +1,43 @@
 name: Joplin Continuous Integration
 on: [push, pull_request]
 jobs:
+  pre_job:
+    if: github.repository == 'laurent22/joplin'
+    runs-on: ubuntu-latest
+    outputs:
+      should_skip: ${{ steps.skip_check.outputs.should_skip }}
+    steps:
+      - id: skip_check
+        uses: fkirc/skip-duplicate-actions@v5
+        with:
+          concurrent_skipping: 'same_content_newer'
+
   Main:
+    needs: pre_job
+    # We always process server or desktop release tags, because they also publish the release
+    if: github.repository == 'laurent22/joplin' && (needs.pre_job.outputs.should_skip != 'true' || startsWith(github.ref, 'refs/tags/server-v') || startsWith(github.ref, 'refs/tags/v'))
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-latest, ubuntu-latest, windows-2016]
+        os: [macos-latest, ubuntu-latest, windows-2019]
     steps:
 
+      # Trying to fix random networking issues on Windows
+      # https://github.com/actions/runner-images/issues/1187#issuecomment-686735760
+      - name: Disable TCP/UDP offload on Windows
+        if: runner.os == 'Windows'
+        run: Disable-NetAdapterChecksumOffload -Name * -TcpIPv4 -UdpIPv4 -TcpIPv6 -UdpIPv6
+
+      - name: Disable TCP/UDP offload on Linux
+        if: runner.os == 'Linux'
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Disable TCP/UDP offload on macOS
+        if: runner.os == 'macOS'
+        run: |
+          sudo sysctl -w net.link.generic.system.hwcksum_tx=0
+          sudo sysctl -w net.link.generic.system.hwcksum_rx=0
+
       # 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 -
@@ -20,13 +50,7 @@ jobs:
           sudo apt-get install -y gettext
           sudo apt-get install -y libsecret-1-dev
           sudo apt-get install -y translate-toolkit
-
-      - name: Install macOS dependencies
-        if: runner.os == 'macOS'
-        run: |
-          brew update
-          brew install gettext
-          brew install translate-toolkit
+          sudo apt-get install -y rsync
 
       - name: Install Docker Engine
         # if: runner.os == 'Linux' && startsWith(github.ref, 'refs/tags/server-v')
@@ -48,12 +72,20 @@ jobs:
       - uses: olegtarasov/get-tag@v2.1
       - uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          # We need to pin the version to 18.15, because 18.16+ fails with this error:
+          # https://github.com/facebook/react-native/issues/36440
+          node-version: '18.15.0'
+          cache: 'yarn'
+
+      - name: Install Yarn
+        run: |
+          # https://yarnpkg.com/getting-started/install
+          corepack enable
       
       # 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
+      - uses: docker/login-action@v2
         if: runner.os == 'Linux' && startsWith(github.ref, 'refs/tags/server-v')
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -65,10 +97,14 @@ jobs:
           APPLE_ASC_PROVIDER: ${{ secrets.APPLE_ASC_PROVIDER }}
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
           CSC_KEY_PASSWORD: ${{ secrets.APPLE_CSC_KEY_PASSWORD }}
           CSC_LINK: ${{ secrets.APPLE_CSC_LINK }}
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           IS_CONTINUOUS_INTEGRATION: 1
+          BUILD_SEQUENCIAL: 1
+          SERVER_REPOSITORY: joplin/server
+          SERVER_TAG_PREFIX: server
         run: |
           "${GITHUB_WORKSPACE}/.github/scripts/run_ci.sh"
 
@@ -79,7 +115,98 @@ jobs:
           CSC_LINK: ${{ secrets.WINDOWS_CSC_LINK }}
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           IS_CONTINUOUS_INTEGRATION: 1
+          BUILD_SEQUENCIAL: 1
+        # To ensure that the operations stop on failure, all commands
+        # should be on one line with "&&" in between.
         run: |
-          npm install
-          cd packages/app-desktop
-          npm run dist
+          yarn install && cd packages/app-desktop && yarn run dist
+
+      # Build and package the Windows app, without publishing it, just to
+      # verify that the build process hasn't been broken.
+      - name: Build Windows app (no publishing)
+        if: runner.os == 'Windows' && !startsWith(github.ref, 'refs/tags/v')
+        env:
+          IS_CONTINUOUS_INTEGRATION: 1
+          BUILD_SEQUENCIAL: 1
+          SERVER_REPOSITORY: joplin/server
+          SERVER_TAG_PREFIX: server
+        run: |
+          yarn install && cd packages/app-desktop && yarn run dist --publish=never
+
+  ServerDockerImage:
+    needs: pre_job
+    if: github.repository == 'laurent22/joplin' && needs.pre_job.outputs.should_skip != 'true'
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+    steps:
+
+      - name: Install Docker Engine
+        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: actions/setup-node@v2
+        with:
+          node-version: '18'
+          cache: 'yarn'
+
+      - name: Install Yarn
+        run: |
+          # https://yarnpkg.com/getting-started/install
+          corepack enable
+
+      - name: Build Docker Image
+        env:
+          BUILD_SEQUENCIAL: 1
+        run: |
+          yarn install
+          yarn run buildServerDocker --tag-name server-v0.0.0 --repository joplin/server
+
+          # Basic test to ensure that the created build is valid. It should exit with
+          # code 0  if it works.
+          docker run joplin/server:0.0.0-beta node dist/app.js migrate list
+ 
+      - name: Check HTTP request
+        run: |
+          # Need to pass environment variables:
+          docker run -p 22300:22300 joplin/server:0.0.0-beta node dist/app.js --env dev &
+
+          # Wait for server to start
+          sleep 30
+
+          # Check if status code is correct
+          # if the actual_status DOES NOT include the expected_status
+          # it exits the process with code 1
+          
+          expected_status="HTTP/1.1 200 OK"
+          actual_status=$(curl -I -X GET http://localhost:22300/api/ping | head -n 1)
+          if [[ ! "$actual_status" =~ "$expected_status" ]]; then 
+            echo 'Failed while checking the status code after request to /api/ping'
+            echo 'expected: ' $expected_status
+            echo 'actual:   ' $actual_status
+            exit 1; 
+          fi
+          
+          # Check if the body response is correct
+          # if the actual_body is different of expected_body exit with code 1
+          expected_body='{"status":"ok","message":"Joplin Server is running"}'
+          actual_body=$(curl http://localhost:22300/api/ping)
+          
+          if [[ "$actual_body" != "$expected_body" ]]; then
+            echo 'Failed while checking the body response after request to /api/ping'
+            exit 1;
+          fi
+

.npmpackagejsonlintignore

@@ -0,0 +1,2 @@
+packages/app-clipper/popup/
+packages/app-cli/tests/support/plugins/

.npmpackagejsonlintrc.json

@@ -0,0 +1,24 @@
+{
+	"rules": {
+		"prefer-absolute-version-dependencies": ["error",
+			{
+				"exceptions": [
+					"@joplin/lib",
+					"@joplin/renderer",
+					"@joplin/pdf-viewer",
+					"@joplin/fork-htmlparser2",
+					"@joplin/fork-sax",
+					"@joplin/fork-uslug",
+					"@joplin/htmlpack",
+					"@joplin/turndown",
+					"@joplin/turndown-plugin-gfm",
+					"@joplin/tools",
+					"@joplin/react-native-saf-x",
+					"@joplin/react-native-alarm-notification",
+					"@joplin/utils"
+				]
+		  	}
+		]
+	}
+}
+  

.yarn/patches/app-builder-lib-npm-24.4.0-05322ff057.patch

@@ -0,0 +1,13 @@
+diff --git a/templates/nsis/include/allowOnlyOneInstallerInstance.nsh b/templates/nsis/include/allowOnlyOneInstallerInstance.nsh
+index a1fd1875d852ff69c087a3103eff827c20d37ca5..5222614ddad3276876857e7a9dde4017a6b9fc85 100644
+--- a/templates/nsis/include/allowOnlyOneInstallerInstance.nsh
++++ b/templates/nsis/include/allowOnlyOneInstallerInstance.nsh
+@@ -42,7 +42,7 @@
+     ${nsProcess::FindProcess} "${_FILE}" ${_ERR}
+   !else
+     # find process owned by current user
+-    nsExec::Exec `cmd /c tasklist /FI "USERNAME eq %USERNAME%" /FI "IMAGENAME eq ${_FILE}" | %SYSTEMROOT%\System32\find.exe "${_FILE}"`
++    nsExec::Exec `cmd /c tasklist /FI "USERNAME eq %USERNAME%" /FI "PID ne $pid" /FI "IMAGENAME eq ${_FILE}" | %SYSTEMROOT%\System32\find.exe "${_FILE}"`
+     Pop ${_ERR}
+   !endif
+ !macroend

.yarn/patches/eslint-npm-8.39.0-d92bace04d.patch

@@ -0,0 +1,15 @@
+diff --git a/lib/rules/multiline-comment-style.js b/lib/rules/multiline-comment-style.js
+index 9cb7f3473e5a124e2eedb12685650f047afa84b6..124e062955e1b51cbdddd0920c22446dc97dd261 100644
+--- a/lib/rules/multiline-comment-style.js
++++ b/lib/rules/multiline-comment-style.js
+@@ -377,6 +377,10 @@ module.exports = {
+                     commentLines = commentLines.slice(1, commentLines.length - 1);
+                 }
+ 
++                // We have to allow this because it's always a top comment and
++                // it has to be in a jsdoc block
++                if (commentLines.join('').trim().startsWith('@jest-environment')) return;
++
+                 const tokenAfter = sourceCode.getTokenAfter(firstComment, { includeComments: true });
+ 
+                 if (tokenAfter && firstComment.loc.end.line === tokenAfter.loc.start.line) {

.yarn/patches/react-native-animation-fix/react-native-npm-0.71.10-f9c32562d8.patch

@@ -0,0 +1,25 @@
+diff --git a/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.java b/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.java
+index 0f52b73c61625db2a3081c0950b6bdd2b06e3d40..b0fc3de4be0b3a26b638683613c63c783c2739bb 100644
+--- a/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.java
++++ b/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.java
+@@ -38,7 +38,7 @@ import com.facebook.react.uimanager.common.ViewUtil;
+ import java.util.ArrayList;
+ import java.util.List;
+ import java.util.Queue;
+-import java.util.concurrent.ConcurrentLinkedQueue;
++import java.util.concurrent.LinkedBlockingQueue;
+ import java.util.concurrent.atomic.AtomicReference;
+ 
+ /**
+@@ -151,7 +151,10 @@ public class NativeAnimatedModule extends NativeAnimatedModuleSpec
+   }
+ 
+   private class ConcurrentOperationQueue {
+-    private final Queue<UIThreadOperation> mQueue = new ConcurrentLinkedQueue<>();
++    // Patch: Use LinkedBlockingQueue instead of ConcurrentLinkedQueue.
++    // In some versions of Android, ConcurrentLinkedQueue is known to drop
++    // items, causing crashing. See https://github.com/laurent22/joplin/issues/8425
++    private final Queue<UIThreadOperation> mQueue = new LinkedBlockingQueue<>();
+     @Nullable private UIThreadOperation mPeekedOperation = null;
+ 
+     @AnyThread

.yarn/patches/react-native-camera-npm-4.2.1-24b2600a7e.patch

@@ -0,0 +1,20 @@
+diff --git a/src/RNCamera.js b/src/RNCamera.js
+index b7a271ad64771c0f654dbd5fe3c0d9e0d2e2c4ef..1182a40ace081a32fbaefe2bc4a499b79c2e7dac 100644
+--- a/src/RNCamera.js
++++ b/src/RNCamera.js
+@@ -5,7 +5,6 @@ import {
+   findNodeHandle,
+   Platform,
+   NativeModules,
+-  ViewPropTypes,
+   requireNativeComponent,
+   View,
+   ActivityIndicator,
+@@ -14,6 +13,7 @@ import {
+   PermissionsAndroid,
+ } from 'react-native';
+ 
++import ViewPropTypes from 'deprecated-react-native-prop-types';
+ import type { FaceFeature } from './FaceDetector';
+ 
+ const Rationale = PropTypes.shape({

.yarn/patches/react-native-vosk-npm-0.1.12-76b1caaae8.patch

@@ -0,0 +1,209 @@
+diff --git a/android/build.gradle b/android/build.gradle
+index 6afcbbf0cc8ca2d69dd78077d61e59a90b2136bb..9f8d72b4ec5b2b3d290975d6a255917c95300854 100644
+--- a/android/build.gradle
++++ b/android/build.gradle
+@@ -67,19 +67,19 @@ repositories {
+ }
+ 
+ // Generate UUIDs for each models contained in android/src/main/assets/
+-tasks.register('genUUID') {
+-  doLast {
+-    fileTree(dir: "$rootDir/app/src/main/assets", exclude: ['*/*']).visit { fileDetails ->
+-      if (fileDetails.directory) {
+-        def odir = file("$rootDir/app/src/main/assets/$fileDetails.relativePath")
+-        def ofile = file("$odir/uuid")
+-        mkdir odir
+-        ofile.text = UUID.randomUUID().toString()
+-      }
+-    }
+-  }
+-}
+-preBuild.dependsOn genUUID
++// tasks.register('genUUID') {
++//   doLast {
++//     fileTree(dir: "$rootDir/app/src/main/assets", exclude: ['*/*']).visit { fileDetails ->
++//       if (fileDetails.directory) {
++//         def odir = file("$rootDir/app/src/main/assets/$fileDetails.relativePath")
++//         def ofile = file("$odir/uuid")
++//         mkdir odir
++//         ofile.text = UUID.randomUUID().toString()
++//       }
++//     }
++//   }
++// }
++// preBuild.dependsOn genUUID
+ 
+ def kotlin_version = getExtOrDefault('kotlinVersion')
+ 
+diff --git a/android/src/main/java/com/reactnativevosk/VoskModule.kt b/android/src/main/java/com/reactnativevosk/VoskModule.kt
+index 0e2b6595b1b2cf1ee01c6c64239c4b0ea37fce19..5a8539b9cce8951967640dba755e29a4e3ff404a 100644
+--- a/android/src/main/java/com/reactnativevosk/VoskModule.kt
++++ b/android/src/main/java/com/reactnativevosk/VoskModule.kt
+@@ -19,13 +19,25 @@ class VoskModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaMo
+     return "Vosk"
+   }
+ 
++  @ReactMethod
++  fun addListener(type: String?) {
++    // Keep: Required for RN built in Event Emitter Calls.
++  }
++
++  @ReactMethod
++  fun removeListeners(type: Int?) {
++    // Keep: Required for RN built in Event Emitter Calls.
++  }
++
+   override fun onResult(hypothesis: String) {
+     // Get text data from string object
+     val text = getHypothesisText(hypothesis)
+ 
+     // Stop recording if data found
+     if (text != null && text.isNotEmpty()) {
+-      cleanRecognizer();
++      // Don't auto-stop the recogniser - we want to do that when the user
++      // presses on "stop" only.
++      // cleanRecognizer();
+       sendEvent("onResult", text)
+     }
+   }
+@@ -93,12 +105,11 @@ class VoskModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaMo
+   @ReactMethod
+   fun loadModel(path: String, promise: Promise) {
+     cleanModel();
+-    StorageService.unpack(context, path, "models",
+-      { model: Model? ->
+-        this.model = model
+-        promise.resolve("Model successfully loaded")
+-      }
+-    ) { e: IOException ->
++    
++    try {
++      this.model = Model(path);
++      promise.resolve("Model successfully loaded")
++    } catch (e: IOException) {
+       this.model = null
+       promise.reject(e)
+     }
+@@ -153,6 +164,25 @@ class VoskModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaMo
+     cleanRecognizer();
+   }
+ 
++  @ReactMethod
++  fun stopOnly() {
++    if (speechService != null) {
++      speechService!!.stop()
++    }
++  }
++
++  @ReactMethod
++  fun cleanup() {
++    if (speechService != null) {
++      speechService!!.shutdown();
++      speechService = null
++    }
++    if (recognizer != null) {
++      recognizer!!.close();
++      recognizer = null;
++    }
++  }
++
+   @ReactMethod
+   fun unload() {
+     cleanRecognizer();
+diff --git a/lib/typescript/index.d.ts b/lib/typescript/index.d.ts
+index 441e41cc402cca3a60b34978ef4fea976076259c..a173acebb4b314402550442ad471e0f7c706e3c4 100644
+--- a/lib/typescript/index.d.ts
++++ b/lib/typescript/index.d.ts
+@@ -10,6 +10,8 @@ export default class Vosk {
+     currentRegisteredEvents: EmitterSubscription[];
+     start: (grammar?: string[] | null) => Promise<String>;
+     stop: () => void;
++    stopOnly: () => void;
++    cleanup: () => void;
+     unload: () => void;
+     onResult: (onResult: (e: VoskEvent) => void) => EventSubscription;
+     onFinalResult: (onFinalResult: (e: VoskEvent) => void) => EventSubscription;
+diff --git a/package.json b/package.json
+index 707eddb8d68007f93071ac659c5b087c935c5f01..90ebe20f224eeec472c377df1fef9b15f2ff8200 100644
+--- a/package.json
++++ b/package.json
+@@ -11,12 +11,9 @@
+     "src",
+     "lib",
+     "android",
+-    "ios",
+     "cpp",
+-    "react-native-vosk.podspec",
+     "!lib/typescript/example",
+     "!android/build",
+-    "!ios/build",
+     "!**/__tests__",
+     "!**/__fixtures__",
+     "!**/__mocks__"
+diff --git a/react-native-vosk.podspec b/react-native-vosk.podspec
+deleted file mode 100644
+index e3d41b90c5eef890c7a5108aaf16ac07d34a698b..0000000000000000000000000000000000000000
+--- a/react-native-vosk.podspec
++++ /dev/null
+@@ -1,41 +0,0 @@
+-require "json"
+-
+-package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+-folly_version = '2021.06.28.00-v2'
+-folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+-
+-Pod::Spec.new do |s|
+-  s.name         = "react-native-vosk"
+-  s.version      = package["version"]
+-  s.summary      = package["description"]
+-  s.homepage     = package["homepage"]
+-  s.license      = package["license"]
+-  s.authors      = package["author"]
+-
+-  s.platforms    = { :ios => "10.0" }
+-  s.source       = { :git => "https://github.com/riderodd/react-native-vosk.git", :tag => "#{s.version}" }
+-
+-  s.source_files = "ios/**/*.{h,m,mm,swift}"
+-  s.resource_bundles = { 'Vosk' => ['ios/Vosk/*'] }
+-
+-  s.dependency "React-Core"
+-  s.frameworks = "Accelerate"
+-  s.library = "c++"
+-  s.vendored_frameworks = "ios/libvosk.xcframework"
+-  s.requires_arc = true
+-
+-  # Don't install the dependencies when we run `pod install` in the old architecture.
+-  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+-    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+-    s.pod_target_xcconfig    = {
+-        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+-        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+-    }
+-
+-    s.dependency "React-Codegen"
+-    s.dependency "RCT-Folly", folly_version
+-    s.dependency "RCTRequired"
+-    s.dependency "RCTTypeSafety"
+-    s.dependency "ReactCommon/turbomodule/core"
+-  end
+-end
+diff --git a/src/index.tsx b/src/index.tsx
+index d9f90c921d89b1b4d85e145443ed3376546a368a..29e4068dbd7500828a73145bd25497a52c9bf638 100644
+--- a/src/index.tsx
++++ b/src/index.tsx
+@@ -69,6 +69,15 @@ export default class Vosk {
+     VoskModule.stop();
+   };
+ 
++  stopOnly = () => {
++		VoskModule.stopOnly();
++	};
++
++	cleanup = () => {
++		this.cleanListeners();
++		VoskModule.cleanup();
++	};
++
+   unload = () => {
+     this.cleanListeners();
+     VoskModule.unload();

.yarnrc.yml

@@ -0,0 +1,32 @@
+nmHoistingLimits: workspaces
+
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
+yarnPath: .yarn/releases/yarn-3.6.3.cjs
+
+logFilters:
+
+  # Disable useless non-actionable warnings.
+  # https://github.com/yarnpkg/yarn/issues/4064
+
+  # eg "@joplin/app-desktop@workspace:packages/app-desktop provides react (p87edd) with version 18.2.0, which doesn't satisfy what @testing-library/react-hooks and some of its descendants request"
+  - code: YN0060
+    level: discard
+
+  # eg "@joplin/app-desktop@workspace:packages/app-desktop doesn't provide react-is (p570cf), requested by styled-components"
+  - code: YN0002
+    level: discard
+
+  # eg "string.prototype.matchall@npm:4.0.8 can't be found in the cache and will be fetched from the remote registry"
+  - code: YN0013
+    level: discard
+
+# To avoid the error "The remote archive doesn't match the expected checksum".
+# Yarn offers no way to understand what the issue is when it happens, or what
+# needs to be done so it's just security theater that we have no choice but to
+# disable.
+checksumBehavior: update

Assets/.gitignore

@@ -0,0 +1,2 @@
+*~
+WebsiteAssets/locales/*.mo

Assets/ImageSources/DocSources/Application.drawio

@@ -0,0 +1,136 @@
+<mxfile host="Electron" modified="2023-04-29T09:42:39.598Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/21.2.1 Chrome/112.0.5615.87 Electron/24.1.2 Safari/537.36" etag="apmX4QvXCQymGu7gtKJn" version="21.2.1" type="device">
+  <diagram name="Page-1" id="5f0bae14-7c28-e335-631c-24af17079c00">
+    <mxGraphModel dx="1244" dy="759" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" background="none" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-1" value="Front end" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="465" y="120" width="170" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-4" value="Service" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="320" y="280" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-5" value="Service" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="490" y="280" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-6" value="Service" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="670" y="280" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-10" value="Model" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="320" y="430" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-11" value="Model" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="490" y="430" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-12" value="Model" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="670" y="430" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-14" value="SQLite database" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;" vertex="1" parent="1">
+          <mxGeometry x="490" y="580" width="122.5" height="100" as="geometry" />
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-19" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-10" target="93vzSs2z7RmF_nCAYhdf-4">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-20" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-11" target="93vzSs2z7RmF_nCAYhdf-4">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-21" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-12" target="93vzSs2z7RmF_nCAYhdf-4">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-22" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-10" target="93vzSs2z7RmF_nCAYhdf-5">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-23" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-11" target="93vzSs2z7RmF_nCAYhdf-5">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-24" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-12" target="93vzSs2z7RmF_nCAYhdf-5">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-25" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-10" target="93vzSs2z7RmF_nCAYhdf-6">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-26" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-11" target="93vzSs2z7RmF_nCAYhdf-6">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-27" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-12" target="93vzSs2z7RmF_nCAYhdf-6">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-28" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-10" target="93vzSs2z7RmF_nCAYhdf-14">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-29" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-14" target="93vzSs2z7RmF_nCAYhdf-11">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-30" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-14" target="93vzSs2z7RmF_nCAYhdf-12">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="700" y="440" as="sourcePoint" />
+            <mxPoint x="750" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-31" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-4" target="93vzSs2z7RmF_nCAYhdf-1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="620" y="440" as="sourcePoint" />
+            <mxPoint x="670" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-32" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-5" target="93vzSs2z7RmF_nCAYhdf-1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="620" y="440" as="sourcePoint" />
+            <mxPoint x="670" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-33" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-6" target="93vzSs2z7RmF_nCAYhdf-1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="620" y="440" as="sourcePoint" />
+            <mxPoint x="670" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-37" value="BACKEND" style="swimlane;whiteSpace=wrap;html=1;swimlaneFillColor=none;shadow=0;" vertex="1" parent="1">
+          <mxGeometry x="280" y="230" width="560" height="480" as="geometry" />
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-38" value="JSON config file" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;" vertex="1" parent="1">
+          <mxGeometry x="910" y="420" width="80" height="100" as="geometry" />
+        </mxCell>
+        <mxCell id="93vzSs2z7RmF_nCAYhdf-39" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="93vzSs2z7RmF_nCAYhdf-37" target="93vzSs2z7RmF_nCAYhdf-38">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="830" y="480" as="sourcePoint" />
+            <mxPoint x="800" y="580" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

Assets/ImageSources/DocSources/JoplinServer.drawio

@@ -0,0 +1,70 @@
+<mxfile host="Electron" modified="2023-04-29T10:24:42.580Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/21.2.1 Chrome/112.0.5615.87 Electron/24.1.2 Safari/537.36" etag="kcPEKHJGaBvNGFhEOF2g" version="21.2.1" type="device">
+  <diagram name="Page-1" id="5f0bae14-7c28-e335-631c-24af17079c00">
+    <mxGraphModel dx="1306" dy="797" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" background="none" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-7" value="Joplin Server" style="swimlane;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="320" y="40" width="630" height="465" as="geometry">
+            <mxRectangle x="350" y="300" width="120" height="30" as="alternateBounds" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-2" value="Server application" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="t8PL5avYcYxuv0YEq-6K-7">
+          <mxGeometry x="270" y="92.5" width="170" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-3" value="PostgreSQL" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;" vertex="1" parent="t8PL5avYcYxuv0YEq-6K-7">
+          <mxGeometry x="190" y="262.5" width="140" height="110" as="geometry" />
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-5" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="t8PL5avYcYxuv0YEq-6K-7" source="t8PL5avYcYxuv0YEq-6K-3" target="t8PL5avYcYxuv0YEq-6K-2">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="280" y="232.5" as="sourcePoint" />
+            <mxPoint x="330" y="182.5" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-11" value="Note metadata,&lt;br&gt;user accounts, etc." style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="t8PL5avYcYxuv0YEq-6K-5">
+          <mxGeometry x="0.0586" y="1" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-4" value="AWS S3" style="shape=cube;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;darkOpacity=0.05;darkOpacity2=0.1;" vertex="1" parent="t8PL5avYcYxuv0YEq-6K-7">
+          <mxGeometry x="430" y="277.5" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-6" value="Note and attachment&lt;br&gt;content" style="endArrow=classic;startArrow=classic;html=1;rounded=0;exitX=0;exitY=0;exitDx=50;exitDy=0;exitPerimeter=0;" edge="1" parent="t8PL5avYcYxuv0YEq-6K-7" source="t8PL5avYcYxuv0YEq-6K-4" target="t8PL5avYcYxuv0YEq-6K-2">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="390" y="242.5" as="sourcePoint" />
+            <mxPoint x="440" y="192.5" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-12" value="Reverse proxy" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="t8PL5avYcYxuv0YEq-6K-7">
+          <mxGeometry x="70" y="97.5" width="75" height="75" as="geometry" />
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-13" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="t8PL5avYcYxuv0YEq-6K-7" source="t8PL5avYcYxuv0YEq-6K-12" target="t8PL5avYcYxuv0YEq-6K-2">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="180" y="160" as="sourcePoint" />
+            <mxPoint x="230" y="110" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-18" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="t8PL5avYcYxuv0YEq-6K-7" source="t8PL5avYcYxuv0YEq-6K-14" target="t8PL5avYcYxuv0YEq-6K-2">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-14" value="Env file (config)" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;" vertex="1" parent="t8PL5avYcYxuv0YEq-6K-7">
+          <mxGeometry x="540" y="90" width="60" height="85" as="geometry" />
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-8" value="Joplin Application (mobile, desktop, ...)" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
+          <mxGeometry x="40" y="110" width="130" height="130" as="geometry" />
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-9" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="t8PL5avYcYxuv0YEq-6K-8" target="t8PL5avYcYxuv0YEq-6K-12">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="130" y="270" as="sourcePoint" />
+            <mxPoint x="310" y="230" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="t8PL5avYcYxuv0YEq-6K-10" value="HTTP REST requests" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="t8PL5avYcYxuv0YEq-6K-9">
+          <mxGeometry x="0.0435" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

Assets/TinyMCE/IconPack/package.json

@@ -10,9 +10,9 @@
   "license": "ISC",
   "devDependencies": {
     "@ephox/oxide-icons-tools": "^2.1.1",
-    "gulp": "^4.0.2",
+    "gulp": "4.0.2",
     "gulp-clean": "^0.4.0",
     "prompts": "^2.2.1"
   },
   "iconPackName": "Joplin"
-}
+}

Assets/TinyMCE/JoplinLists/src/main/ts/Plugin.ts

@@ -9,11 +9,13 @@ import PluginManager from 'tinymce/core/api/PluginManager';
 import * as Api from './api/Api';
 import * as Commands from './api/Commands';
 import * as Keyboard from './core/Keyboard';
+import * as Mouse from './core/Mouse'
 import * as Buttons from './ui/Buttons';
 
 export default function () {
   PluginManager.add('joplinLists', function (editor) {
     Keyboard.setup(editor);
+    Mouse.setup(editor);
     Buttons.register(editor);
     Commands.register(editor);
 

Assets/TinyMCE/JoplinLists/src/main/ts/core/Mouse.ts

@@ -0,0 +1,26 @@
+import { isJoplinChecklistItem } from '../listModel/JoplinListUtil';
+
+
+const setup = function (editor) {
+    const editorClickHandler = (event) => {
+        if (!isJoplinChecklistItem(event.target)) return;
+
+        // We only process the click if it's within the checkbox itself (and not the label).
+        // That checkbox, based on
+        // the current styling is in the negative margin, so offsetX is negative when clicking
+        // on the checkbox itself, and positive when clicking on the label. This is strongly
+        // dependent on how the checkbox is styled, so if the style is changed, this might need
+        // to be updated too.
+        // For the styling, see:
+        // packages/renderer/MdToHtml/rules/checkbox.ts
+        //
+        // The previous solution was to use "pointer-event: none", which mostly work, however
+        // it means that links are no longer clickable when they are within the checkbox label.
+        if (event.offsetX >= 0) return;
+
+        editor.execCommand('ToggleJoplinChecklistItem', false, { element: event.target });
+    }
+    editor.on('click', editorClickHandler);
+};
+
+export { setup };

Assets/TinyMCE/JoplinLists/src/main/ts/listModel/JoplinListUtil.ts

@@ -42,7 +42,7 @@ export function addJoplinChecklistCommands(editor, ToggleList) {
   });
 
   editor.addCommand('InsertJoplinChecklist', function (ui, detail) {
-    detail = Object.assign({}, detail, { listType: 'joplinChecklist' });
+    detail = { ...detail,  listType: 'joplinChecklist'  };
     ToggleList.toggleList(editor, 'UL', detail);
   });
 }

Assets/TinyMCE/JoplinLists/src/main/ts/ui/Buttons.ts

@@ -10,7 +10,7 @@ import * as Settings from '../api/Settings';
 import * as NodeType from '../core/NodeType';
 import Editor from 'tinymce/core/api/Editor';
 import { isCustomList } from '../core/Util';
-import { findContainerListTypeFromEvent, isJoplinChecklistItem } from '../listModel/JoplinListUtil';
+import { findContainerListTypeFromEvent } from '../listModel/JoplinListUtil';
 
 const findIndex = function (list, predicate) {
   for (let index = 0; index < list.length; index++) {
@@ -38,37 +38,11 @@ const listState = function (editor: Editor, listName, options:any = {}) {
       buttonApi.setActive(listType === options.listType && lists.length > 0 && lists[0].nodeName === listName && !isCustomList(lists[0]));
     };
 
-    const editorClickHandler = (event) => {
-      if (!isJoplinChecklistItem(event.target)) return;
-
-      // We only process the click if it's within the checkbox itself (and not the label). 
-      // That checkbox, based on
-      // the current styling is in the negative margin, so offsetX is negative when clicking
-      // on the checkbox itself, and positive when clicking on the label. This is strongly
-      // dependent on how the checkbox is styled, so if the style is changed, this might need
-      // to be updated too.
-      // For the styling, see:
-      // packages/renderer/MdToHtml/rules/checkbox.ts
-      //
-      // The previous solution was to use "pointer-event: none", which mostly work, however
-      // it means that links are no longer clickable when they are within the checkbox label.
-      if (event.offsetX >= 0) return;
-
-      editor.execCommand('ToggleJoplinChecklistItem', false, { element: event.target });
-    }
-
-    if (options.listType === 'joplinChecklist') {
-      editor.on('click', editorClickHandler);
-    }
-
     editor.on('NodeChange', nodeChangeHandler);
 
     return () => {
-      if (options.listType === 'joplinChecklist') {
-        editor.off('click', editorClickHandler);
-      }
       editor.off('NodeChange', nodeChangeHandler);
-    } 
+    }
   };
 };
 

Assets/WebsiteAssets/css/brand.css

@@ -0,0 +1,821 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
+
+
+/* Global */
+:root {
+	--primary-DarkBlue: #043873;
+	--primary-White: #ffffff;
+	--primary-DarkGray: #32363f;
+	--accent-LightBlue: #4f9cf9;
+	--accent-Yellow: #ffe492;
+	--variationPrimary-VaraintDark: #072445;
+	--variationPrimary-VaraintWhite: #f8f9fa;
+	--variationPrimary-VaraintDarkGray: #212529;
+	--variationAccent-VaraintLightBlue: #F7FBFF;
+  }
+  * {
+	font-family: "Montserrat", sans-serif;
+  }
+
+  h2 {
+	border-bottom: none;
+	margin-bottom: 0;
+	margin-top: 0.7em;
+  }
+  
+  #mobile_icon_logo{
+	display: none;
+  }
+  .joplin__para {
+	font-weight: 400;
+	font-size: 20.8px;
+	line-height: 1.5;
+	color: var(--primary-DarkGray);
+	margin: 0;
+	padding: 0;
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__para {
+	  /* text-align: center; */
+	  width: 100% !important;
+	}
+  }
+  @media screen and (max-width: 425px) {
+	.joplin__para {
+	  font-size: 18px;
+	}
+  }
+  .joplin__tagline1 {
+	font-weight: 700;
+	font-size: 32px;
+	line-height: 1.5;
+	color: var(--variationPrimary-VaraintDarkGray);
+  }
+  @media screen and (max-width: 425px) {
+	.joplin__tagline1 {
+	  font-size: 28px;
+	}
+  }
+  @media (min-width: 576px) {
+	.container {
+	  max-width: 540px;
+	}
+  }
+  @media (min-width: 768px) {
+	.container {
+	  max-width: 720px;
+	}
+  }
+  @media (min-width: 992px) {
+	.container {
+	  max-width: 960px;
+	}
+  }
+  @media (min-width: 1200px) {
+	.container {
+	  max-width: 1140px;
+	}
+  }
+  @media (min-width: 1400px) {
+	.container {
+	  max-width: 1220px;
+	}
+  }
+  @media (min-width: 768px) and (max-width: 991px) {
+	.justify-content-tablet-end {
+	  justify-content: flex-end;
+	}
+  }
+  /* Global */
+  
+  /* Header */
+  header {
+	background-image: url("../images/brand/background\ blue\ motif\ 1.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	border-radius: 5px;
+	padding: 36px 0;
+  }
+  header .container nav {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+  }
+  @media screen and (max-width: 425px) {
+	header .container nav {
+	  align-items: flex-start;
+	}
+  }
+  h1.main-logo {
+  
+	font-weight: 600;
+	font-size: 48px;
+	color: var(--primary-DarkBlue);
+	margin: 0;
+	border-bottom: 1px solid #ddd;
+	line-height: 1.3em;
+	padding-bottom: 0.5em;
+  }
+  @media screen and (max-width: 992px) {
+	header .container nav img {
+	  max-width: 200px;
+	}
+	#brand_guidelines{
+	  margin-top: 50px;
+	  font-weight: 600;
+	}
+  
+  
+  }
+  @media screen and (max-width: 767px) {
+	header .container nav img {
+	  max-width: 150px;
+	}
+  }
+  @media screen and (max-width: 576px) {
+   #main_lockup {
+	display: none;
+   }
+   #mobile_icon_logo{
+	  display: block;
+	  max-width: 80px;
+	  margin-top: 20px;
+  
+	}
+	#brand_guidelines{
+	  text-align: left;
+	  padding-left: 20px;
+	  margin-top: 10px;
+	}
+  
+  
+  
+  }
+  
+  @media screen and (max-width: 375px) {
+	header .container nav h1.main-logo {
+	  font-size: 40px;
+	}
+	#main_lockup{
+	  display: none;
+	}
+  
+	
+	#mobile_icon_logo{
+	  display: block;
+	  max-width: 80px;
+	  margin-top: 20px;
+  
+	}
+	#brand_guidelines{
+	  text-align: left;
+	  padding-left: 30px;
+	  margin-top: 10px;
+	}
+  
+  }
+  
+  
+  
+  /*header .container nav .logo {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 30px;
+	flex-wrap: nowrap;
+  }*/
+  
+  @media (min-width: 768px) and (max-width: 991px) {
+	header .container nav .logo {
+	  align-items: flex-start;
+	}
+  }
+  header .container nav .logo h3 {
+	font-weight: 600;
+	font-size: 48px;
+	color: #ffffff;
+	letter-spacing: 1px;
+	margin: 0;
+  }
+  @media screen and (max-width: 560px) {
+	header .container nav .logo h3 {
+	  display: none;
+	}
+  
+  }
+  /* Header */
+  /* joplin Logos */
+  .joplin__logos {
+	padding-top: 0px;
+	padding-bottom: 43px;
+  }
+  .joplin__logos h2.main-logo {
+	font-weight: 700;
+	font-size: 40px;
+	color: var(--primary-DarkBlue);
+	/* margin-bottom: 45px; */
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__logos h2.main-logo {
+	  text-align: center;
+	}
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__logos h2.main-logo {
+	  font-size: 33px;
+	}
+  }
+  .joplin__logos .container > p {
+	margin-bottom: 6px;
+  }
+  .joplin__logos > .wrapper {
+	padding: 40px 0 45px 0;
+	margin: 40px 45px;
+	/* width: calc(100% - 6.5vw); */
+	border: 1px solid var(--variationPrimary-VaraintDarkGray);
+	border-radius: 5px;
+	margin-left: 0;
+    margin-right: 0;
+  }
+  @media screen and (max-width: 1440px) {
+	.joplin__logos > .wrapper {
+	  padding: 40px 0 45px 0;
+	  margin: 40px auto;
+	  margin-left: 0;
+      margin-right: 0;
+	}
+  }
+  .joplin__logos .wrapper .para-1 {
+	margin-bottom: 19px;
+  }
+  .joplin__logos .wrapper .logo-wrapper {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 27px;
+  }
+  .joplin__logos .wrapper .logo-wrapper:last-child {
+	gap: 24px;
+  }
+  @media screen and (max-width: 320px) {
+	.joplin__logos .wrapper .logo-wrapper img {
+	  width: 50px;
+	  height: 50px;
+	}
+  }
+  .joplin__logos .wrapper .logo-wrapper h4 {
+	font-size: 38px;
+	font-weight: 600;
+  }
+  @media screen and (max-width: 320px) {
+	.joplin__logos .wrapper .logo-wrapper h4 {
+	  font-size: 32px;
+	  font-weight: 600;
+	}
+  }
+  .joplin__logos .wrapper .logo-wrapper .blue-header {
+	color: var(--accent-LightBlue);
+	margin: 0;
+  }
+  .joplin__logos .wrapper .logo-wrapper .white-header {
+	color: var(--primary-White);
+	margin: 0;
+  }
+  .joplin__logos .wrapper .para-1 .blue-text {
+	font-weight: bold;
+	color: var(--accent-LightBlue);
+  }
+  
+  @media screen and (max-width: 767px) {
+	.joplin__logos .wrapper .box:nth-child(1) {
+	  display: flex;
+	  flex-direction: column;
+	  justify-content: center;
+	  align-items: center;
+	}
+  }
+  .joplin__logos .wrapper .box:nth-child(1) > p {
+	width: 80%;
+  }
+  @media screen and (max-width: 1024px) {
+	.joplin__logos .wrapper .box:nth-child(1) > p {
+	  width: 90%;
+	}
+  }
+  
+  .para-1 {
+	width: 100%;
+  }
+  .joplin__logos .wrapper-2 .our-para {
+	width: 100% !important;
+  }
+  @media screen and (min-width: 1400px) {
+	.joplin__logos .wrapper .box2 {
+	  /* padding-left: 50px;
+	  margin-right: -130px; */
+	}
+  }
+  .joplin__logos .wrapper .colored-box {
+	background-color: var(--primary-DarkBlue);
+	padding: 17px 15px 15px 24px;
+	/* width: 320px; */
+	/* height: 189px; */
+  }
+  @media (min-width: 768px) and (max-width: 991px) {
+	.joplin__logos .wrapper .colored-box {
+	  transform: translateX(-35px);
+	}
+  }
+  .joplin__logos .wrapper .colored-box p {
+	font-weight: normal;
+	color: var(--primary-White);
+	margin-bottom: 20px;
+	line-height: 1.5;
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__logos .wrapper .colored-box {
+	  display: flex;
+	  flex-direction: column;
+	  justify-content: center;
+	  align-items: center;
+	  width: 100%;
+	}
+  }
+  .joplin__logos .wrapper .box-wrapper {
+	display: flex;
+	justify-content: flex-start;
+	align-items: flex-start;
+	gap: 14px;
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__logos .wrapper .box-wrapper {
+	  flex-direction: column-reverse;
+	  justify-content: center;
+	  align-items: center;
+	}
+	.joplin__logos .wrapper h2 {
+	  text-align: center;
+	}
+  }
+  .joplin__logos .wrapper .box-wrapper img {
+	margin-top: 7px;
+	max-width: 100%;
+  }
+  .joplin__logos .wrapper .box-wrapper p {
+	width: 70%;
+  }
+  .joplin__logos .wrapper-2 {
+	position: relative;
+	padding: 42px 0 35px 0;
+  }
+  @media screen and (max-width: 425px) {
+	.joplin__logos .wrapper-2 {
+	  padding: 42px 0 35px 0;
+	}
+  }
+  .joplin__logos .wrapper-2 .pipeline {
+	width: 1px;
+	height: 94%;
+	background-color: var(--variationPrimary-VaraintDarkGray);
+	position: absolute;
+	top: 50%;
+	left: 47%;
+	transform: translate(-50%, -50%);
+  }
+  @media screen and (max-width: 1200px) {
+	.joplin__logos .wrapper-2 .pipeline {
+	  display: none;
+	}
+  }
+  @media screen and (max-width: 1366px) {
+	.joplin__logos .wrapper-2 .pipeline {
+	  left: 49%;
+	}
+  }
+  .joplin__logos .wrapper-2 .joplin__tagline1 {
+	margin-bottom: 34px;
+  }
+  .joplin__logos .wrapper-2 .our-para {
+	margin-top: 19px;
+  }
+  .joplin__logos .wrapper-2 img {
+	max-width: 100%;
+  }
+  @media screen and (max-width: 425px) {
+	.joplin__logos .wrapper-2 .box-wrapper {
+	  margin-right: 0;
+	}
+  }
+  @media (min-width: 1400px) and (max-width: 2100px) {
+	.joplin__logos .wrapper-2 .special-box {
+	  margin-left: 150px;
+	}
+	.joplin__logos .wrapper-2 .special-box p {
+	  width: 100%;
+	}
+	.joplin__logos .wrapper-2 .pipeline {
+	  left: 53%;
+	}
+  }
+  /* @media (min-width: 1441px) and (max-width: 1750px) {
+	.joplin__logos .p-row {
+	  padding: 0 5rem;
+	}
+  } */
+  /* joplin Logos */
+  
+  /* joplin__Colours */
+  .joplin__colours {
+	padding: 5px 0;
+	background-image: url("../images/brand/background\ blue\ motif\ 2.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: cover;
+  }
+  .joplin__colours h2 {
+	color: var(--primary-White);
+	font-size: 40px;
+	margin-bottom: 28px;
+	font-weight: 700;
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__colours h2 {
+	  font-size: 33px;
+	}
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__colours h2 {
+	  text-align: center;
+	}
+  }
+  .joplin__colours p {
+	color: var(--primary-White);
+	margin-bottom: 40px;
+  }
+  .joplin__colours .custom-row {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 45px;
+	padding-bottom: 20px;
+  }
+  @media screen and (max-width: 1400px) {
+	.joplin__colours .custom-row {
+	  flex-wrap: wrap;
+	}
+  }
+  
+  .joplin__colours .custom-row .chartjs-wrapper canvas {
+	width: 535px;
+  }
+  @media screen and (max-width: 575px) {
+	.joplin__colours .custom-row .chartjs-wrapper canvas {
+	  width: 270px;
+	}
+  }
+  /* joplin__Colours */
+  /* joplin__Pallet */
+  .joplin__pallet {
+	padding: 45px 0 92px 0;
+  }
+  .joplin__pallet h3 {
+	font-weight: 600;
+	font-size: 32px;
+	margin-bottom: 50px;
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__pallet h3 {
+	  font-size: 28px;
+	}
+  }
+  @media screen and (max-width: 1200px) {
+	.joplin__pallet h3 {
+	  text-align: center;
+	}
+  }
+  .joplin__pallet .sigma-wrapper {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 35px;
+  }
+  @media screen and (max-width: 555px) {
+	.joplin__pallet .sigma-wrapper {
+	  flex-direction: column;
+	}
+  }
+  .joplin__pallet .sigma-wrapper .circle-wrapper {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: flex-start;
+  }
+  @media screen and (max-width: 992px) {
+	.joplin__pallet .sigma-wrapper .circle-wrapper {
+	  align-items: center;
+	}
+  }
+  @media screen and (max-width: 1200px) {
+	.joplin__pallet .sigma-wrapper {
+	  justify-content: center;
+	}
+  }
+  .joplin__pallet .sigma-wrapper .circle-wrapper .circle {
+	width: 120px;
+	height: 120px;
+	border-radius: 50%;
+	border: 1px solid #000;
+	margin-bottom: 30px;
+  }
+  .joplin__pallet .row-space {
+	padding: 50px 0;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+  }
+  .joplin__pallet .row-space div {
+	width: 97%;
+	height: 1px;
+	background-color: var(--primary-DarkGray);
+  }
+  .joplin__pallet .dark-blue {
+	background-color: var(--primary-DarkBlue);
+  }
+  .joplin__pallet .white {
+	background-color: var(--primary-White);
+  }
+  .joplin__pallet .dark-gray {
+	background-color: var(--primary-DarkGray);
+  }
+  .joplin__pallet .light-blue {
+	background-color: var(--accent-LightBlue);
+  }
+  .joplin__pallet .yellow {
+	background-color: var(--accent-Yellow);
+  }
+  .joplin__pallet .variant-dark {
+	background-color: var(--variationPrimary-VaraintDark);
+  }
+  .joplin__pallet .variant-white {
+	background-color: var(--variationPrimary-VaraintWhite);
+  }
+  .joplin__pallet .variant-dark-gray {
+	background-color: var(--variationPrimary-VaraintDarkGray);
+  }
+  .joplin__pallet .variant-light-blue {
+	background-color: var(--variationAccent-VaraintLightBlue);
+  }
+  /* joplin__Pallet */
+  /* joplin__State */
+  .joplin__state {
+	background-color: var(--primary-DarkBlue);
+	background-image: url("../images/brand/Rectangle\ 16.png");
+	background-position: bottom center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	padding: 65px 0 78px 0;
+	position: relative;
+  }
+  .joplin__state::before {
+	content: "";
+	width: 1px;
+	height: 98%;
+	background-color: var(--variationPrimary-VaraintDarkGray);
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	overflow: hidden;
+  }
+  @media screen and (max-width: 992px) {
+	.joplin__state::before {
+	  display: none;
+	}
+  }
+  .joplin__state .image {
+	transform: translateY(25px);
+  }
+  .joplin__state .wrapper > div {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: center;
+  }
+  .joplin__state .wrapper > div .box h2 {
+	color: var(--primary-White);
+	font-size: 40px;
+	margin-bottom: 28px;
+	font-weight: 700;
+  }
+  /* @media screen and (min-width: 1400px) {
+	.joplin__state .wrapper > div .box h2 {
+	  text-wrap: nowrap;
+	}
+  } */
+  @media screen and (max-width: 767px) {
+	.joplin__state .wrapper > div .box h2 {
+	  text-align: center;
+	}
+  }
+  @media screen and (max-width: 500px) {
+	.joplin__state .wrapper > div .box h2 {
+	  font-size: 38px;
+	}
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__state .wrapper > div .box h2 {
+	  font-size: 33px;
+	}
+  }
+  
+  .joplin__state .wrapper > div .box p {
+	color: var(--primary-White);
+	width: 85%;
+  }
+  @media screen and (max-width: 500px) {
+	.joplin__state .wrapper > div .box p {
+	  font-size: 18px;
+	}
+  }
+  .joplin__state .wrapper > div .box img {
+	max-width: 100%;
+  }
+  .joplin__highlighter {
+	padding: 74px 0;
+	background-image: url("../images/brand/Rectangle\ 16.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: cover;
+  }
+  .joplin__highlighter h2 {
+	color: var(--primary-White);
+	font-size: 40px;
+	margin-bottom: 28px;
+	font-weight: 700;
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__highlighter h2 {
+	  font-size: 33px;
+	}
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__highlighter h2 {
+	  text-align: center;
+	}
+  }
+  .joplin__highlighter p {
+	color: var(--primary-White);
+  }
+  @media screen and (max-width: 500px) {
+	.joplin__highlighter p {
+	  font-size: 18px;
+	}
+  }
+  .joplin__highlighter .wrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 22px;
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__highlighter .wrapper {
+	  flex-wrap: wrap;
+	  row-gap: 25px;
+	  justify-content: center;
+	}
+  }
+  .joplin__highlighter .wrapper div {
+	padding: 32px 62px;
+	border-radius: 5px;
+	position: relative;
+  }
+  .joplin__highlighter .wrapper div:first-child img {
+	position: absolute;
+	top: 57%;
+	max-width: 100%;
+  }
+  .joplin__highlighter .wrapper div:last-child img {
+	position: absolute;
+	top: 59%;
+	max-width: 100%;
+  }
+  @media screen and (max-width: 1200px) {
+	.joplin__highlighter .wrapper div:first-child img {
+	  top: 43%;
+	}
+	.joplin__highlighter .wrapper div:last-child img {
+	  top: 44%;
+	}
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__highlighter .wrapper div:first-child img {
+	  top: 59%;
+	}
+	.joplin__highlighter .wrapper div:last-child img {
+	  top: 59%;
+	}
+  }
+  @media screen and (max-width: 490px) {
+	.joplin__highlighter .wrapper div:first-child img {
+	  top: 43%;
+	}
+	.joplin__highlighter .wrapper div:last-child img {
+	  top: 43%;
+	}
+  }
+  @media screen and (max-width: 320px) {
+	.joplin__highlighter .wrapper div:last-child img {
+	  top: 36%;
+	}
+  }
+  .joplin__highlighter .wrapper div.yellow {
+	background-color: var(--primary-White);
+  }
+  .joplin__highlighter .wrapper div.blue {
+	background-color: var(--primary-DarkBlue);
+  }
+  .joplin__highlighter .wrapper div h4 {
+	color: var(--variationPrimary-VaraintDarkGray);
+	margin: 0;
+	font-weight: 700;
+	font-size: 20.8px;
+	line-height: 1.5;
+  }
+  .joplin__highlighter .wrapper div.blue h4 {
+	color: var(--primary-White);
+  }
+  
+  /* joplin__State */
+  /* joplin__Voice */
+  .joplin__voice {
+	padding: 78px 0;
+  }
+  .joplin__voice .container h2 {
+	font-weight: 700;
+	font-size: 40px;
+	line-height: 1.5;
+	color: var(--variationPrimary-VaraintDarkGray);
+  }
+  
+  @media screen and (max-width: 500px) {
+	.joplin__voice .container h2 {
+	  font-size: 38px;
+	}
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__voice .container h2 {
+	  font-size: 33px;
+	  text-align: center;
+	}
+  }
+  .joplin__voice .container .wrapper {
+	margin-top: 57px;
+  }
+  .joplin__voice .container .wrapper .box {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	gap: 20px;
+  }
+  @media screen and (max-width: 767px) {
+	.joplin__voice .container .wrapper .box {
+	  flex-direction: column;
+	}
+  }
+  .joplin__voice .container .wrapper .box div:first-child {
+	flex: 1;
+  }
+  .joplin__voice .container .wrapper .box div:last-child {
+	flex: 2;
+  }
+  .joplin__voice .container .wrapper .box div h3 {
+	font-weight: 700;
+	font-size: 32px;
+	line-height: 1.7;
+	color: var(--primary-DarkGray);
+  }
+  @media (max-width: 767px) {
+	.joplin__voice .container .wrapper .box div h3 {
+	  text-align: center;
+	  font-size:28px;
+	}
+	.joplin__voice .container .wrapper .box {
+	  align-items: center;
+	}
+  }
+  .joplin__voice .container .wrapper .box div p {
+	margin-bottom: 36px;
+  }
+  @media screen and (max-width: 500px) {
+	.joplin__voice .container .wrapper .box div p {
+	  font-size: 18px;
+	}
+  }
+  /* joplin__Voice */
+  .chartjs-wrapper {
+	background-color: #d9d9d9;
+	padding: 10px 20px;
+	max-width: 45%;
+  }
+  

Assets/WebsiteAssets/css/site.css

@@ -307,7 +307,7 @@ p,
 div.navbar-mobile-content a.sponsor-button {
 	padding: 4px 12px;
 	font-size: 0.9em;
-	margin-right: 1em;
+	margin-right: 0.5em;
 }
 
 #nav-section.white-bg a {
@@ -399,12 +399,12 @@ div.navbar-mobile-content a.sponsor-button {
 	margin: auto;
 }
 
-#top-section-img {
+.top-section-img {
 	margin-bottom: -280px;
 	margin-top: 40px;
 }
 
-#top-section-img img {
+.top-section-img img {
 	width: 100%;
 }
 
@@ -657,6 +657,16 @@ footer .bottom-links-row p {
 	font-size: 1.1em;
 }
 
+.language-switcher {
+	display: inline;
+}
+
+.language-switcher > button {
+	border: none;
+	background-color: transparent;
+	color: #0557ba;
+}
+
 /*****************************************************************
  WHAT'S NEW PAGE
 *****************************************************************/
@@ -670,9 +680,9 @@ footer .bottom-links-row p {
     margin-right: auto;
 }
 
-.news-page     img,
-.news-item-page img {
-	max-width: 650px;
+.news-page .main-content img,
+.news-item-page .main-content img {
+	max-width: 100%;
 }
 
 /*****************************************************************
@@ -728,6 +738,33 @@ footer .bottom-links-row p {
 	}
 }
 
+/*****************************************************************
+ LARGE VIEW
+*****************************************************************/
+
+@media (max-width: 1200px) {
+	#nav-section a {
+		margin-left: 10px;
+	}
+}
+
+/*****************************************************************
+ MEDIUM VIEW
+ - Make menu bar elements smaller and closer to each others
+   so that everything fit.
+*****************************************************************/
+
+@media (max-width: 990px) {
+	#nav-section > .container {
+		max-width: 960px;
+	}
+
+	#nav-section .button-link {
+		padding: 4px 10px;
+		font-size: 15px;
+	}
+}
+
 /*****************************************************************
  NARROW VIEW
  - Top right menu is displayed
@@ -740,6 +777,24 @@ footer .bottom-links-row p {
 		padding-bottom: 130px;
 	}
 
+	#menu-mobile .social-links {
+		display: flex;
+		justify-content: center;
+		margin-top: 20px;
+	}
+
+	#menu-mobile .social-links a {
+		margin-left: 15px;
+		font-size: 20px;
+	}
+
+	#menu-mobile .social-links .social-link-mastodon,
+	#menu-mobile .social-links .social-link-lemmy,
+	#menu-mobile .social-links .social-link-linkedin,
+	#menu-mobile .social-links .social-link-patreon {
+		display: none;
+	}
+
 	.front-page h1 {
 		font-size: 2.5em;
 	}
@@ -857,7 +912,7 @@ footer .bottom-links-row p {
 	}
 
 	#menu-mobile .button-link {
-		padding: 10px 15px;
+		padding: 4px 12px;
 		font-size: 16px;
 		margin-left: 0px;
 	}
@@ -876,7 +931,7 @@ footer .bottom-links-row p {
 		padding-top: 80px;
 	}
 
-	#top-section-img {
+	.top-section-img {
 		margin-bottom: -90px;
 		margin-top: 50px;
 	}
@@ -903,6 +958,73 @@ footer .bottom-links-row p {
 	}
 }
 
+/*****************************************************************
+ MORE NARROW VIEW
+ eg for Galaxy S9
+*****************************************************************/
+
+@media (max-width: 580px) {
+
+	#nav-section .plans-button {
+		display: none;
+	}
+
+}
+
+/*****************************************************************
+ MORE NARROW VIEW
+ eg for Galaxy S9
+*****************************************************************/
+
+@media (max-width: 400px) {
+
+	#nav-section .navbar-mobile-content a.sponsor-button .sponsor-button-label {
+		font-size: 12px;
+	}
+
+	#nav-section .navbar-mobile-content a.sponsor-button {
+		padding: 2px 6px;
+		margin-right: 0.2em;
+	}
+
+	#nav-section a {
+		margin-left: 5px;
+	}
+
+}
+
+/*****************************************************************
+ VERY NARROW VIEW
+ eg for Galaxy Fold
+*****************************************************************/
+
+@media (max-width: 350px) {
+
+	#nav-section .navbar-mobile-content a.sponsor-button {
+		background-color: transparent;
+		color: #0557ba !important;
+		font-size: 18px;
+	}
+
+	#nav-section .navbar-mobile-content a.sponsor-button .sponsor-button-label {
+		display: none;
+	}
+
+	#nav-section a {
+		margin-left: 4px;
+	}
+
+	div.navbar-mobile-content a.sponsor-button {
+		margin-right: 10px;
+	}
+
+	#nav-section .button-link {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+}
+
 /*****************************************************************
  PLANS PAGE
 *****************************************************************/
@@ -1020,6 +1142,10 @@ footer .bottom-links-row p {
 	display: none;
 }
 
+.joplin-cloud-feature-list table {
+	width: 100%;
+}
+
 .price-row .plan-type {
 	display: flex;
 	align-items: center;
@@ -1097,7 +1223,7 @@ footer .bottom-links-row p {
 		background-position: bottom;
 		padding-bottom: 160px;
 	}
-	#top-section-img {
+	.top-section-img {
 		margin-bottom: -240px;
 		margin-top: 130px;
 	}
@@ -1125,3 +1251,29 @@ footer .bottom-links-row p {
 		margin-top: -15p;
 	}
 }
+
+/*****************************************************************
+ ENGLISH VERSION
+*****************************************************************/
+
+:lang(en-gb) #made-in-france-section {
+	display: none;
+}
+
+:lang(en-gb) .top-section-img-cn {
+	display: none;
+}
+
+/*****************************************************************
+ CHINESE VERSION
+*****************************************************************/
+
+:lang(zh-cn) #in-the-press-section,
+:lang(zh-cn) #sponsors-section,
+:lang(zh-cn) .top-section-img-en {
+	display: none;
+}
+
+:lang(zh-cn) #plans-section .faq {
+	display: none;
+}