text

Assets/WebsiteAssets/css/site.css

@@ -24,6 +24,15 @@ a {
 	padding-bottom: 225px;
 }
 
+.press-carousel .photo {
+	width: 123px;
+	height: 136px;
+}
+
+.press-carousel a {
+	color: inherit;
+}
+
 .fw400 {
 	font-weight: 400;
 }
@@ -94,6 +103,22 @@ a {
 	font-size: 16px !important;
 }
 
+.donate-button i {
+	font-size: 0.8em;
+}
+
+.donate-button .heart-full {
+	display: none;
+}
+
+.donate-button:hover .heart-full {
+	display: inline;
+}
+
+.donate-button:hover .heart-line {
+	display: none;
+}
+
 a.heading-anchor {
 	display: inline-block;
 	opacity: 0;
@@ -145,15 +170,27 @@ h2 {
 	margin-bottom: 0.6em;
 	margin-top: 1.1em;
 	border-bottom: 1px solid #ddd;
-	line-height: 2em;
+	line-height: 1.3em;
 	/* line-height: 57.6px;
 	font-weight: 600;
 	margin-bottom: 20px; */
 }
 
+.front-page h1 {
+	font-size: 3em;
+}
+
+.front-page h2 {
+	font-size: 2.5em;
+	border-bottom: none;
+}
+
+.front-page p {
+	font-size: 1.3em;
+}
+
 p,
 .button-link {
-	/* font-size: 22px; */
 	line-height: 30.8px;
 	font-weight: 400;
 	text-decoration: none;
@@ -161,13 +198,14 @@ p,
 }
 
 .button-link {
+	font-size: 18px;
 	text-align: center;
-	min-width: 300px;
+	/* min-width: 300px; */
 	display: inline-block;
 	font-weight: 500;
 	border: solid 1px #fff;
 	border-radius: 40px;
-	padding: 20px 30px;
+	padding: 8px 20px;
 	color: #fff;
 }
 
@@ -225,6 +263,7 @@ p,
 	width: 100%;
 	z-index: 9;
 }
+
 #nav-section a {
 	display: inline-block;
 	margin-left: 50px;
@@ -233,7 +272,7 @@ p,
 
 #nav-section a:hover,
 #nav-section a:focus {
-	color: #fff;
+	/* color: #fff; */
 	text-decoration: underline;
 }
 
@@ -247,11 +286,11 @@ p,
 	text-decoration: underline;
 }
 
-#nav-section .button-link {
+/* #nav-section .button-link {
 	padding: 15px;
 	min-width: 200px;
 	text-decoration: none;
-}
+} */
 
 #nav-section {
 	box-shadow: 0 3px 11px 0 rgba(0,0,0,0.1);
@@ -266,6 +305,43 @@ p,
 	align-items: center;
 }
 
+#sponsors-section .sponsor-github-item {
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+#sponsors-section .sponsors-github,
+#sponsors-section .sponsors-org {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 900px;
+	padding-bottom: 50px;
+}
+
+#sponsors-section .sponsors-org {
+	display: flex;
+	justify-content: center;
+	flex-flow: wrap;
+}
+
+#sponsors-section .sponsors-org .sponsor-org-item {
+	display: inline-flex;
+	align-items: center;
+	margin-left: 15px;
+	margin-bottom: 10px;
+}
+
+#sponsors-section .sponsors-org .sponsor-org-item img {
+	max-width: 256px;
+	max-height: 80px;
+}
+
+#sponsors-section .sponsors-github .sponsor-github-item {
+	margin-left: 10px;
+	margin-bottom: 10px;
+}
+
 /* top-section  */
 
 #top-section {
@@ -274,7 +350,7 @@ p,
 	background-repeat: no-repeat, no-repeat;
 	background-position: left, right bottom;
 	background-size: contain;
-	padding-top: 150px;
+	padding-top: 100px;
 }
 
 #top-section .frame-bg {
@@ -292,7 +368,7 @@ p,
 
 #top-section-img {
 	margin-bottom: -280px;
-	margin-top: 70px;
+	margin-top: 40px;
 }
 
 .main-content {
@@ -343,8 +419,8 @@ p,
 
 /* customise-it-section  */
 #customise-it-section {
-	padding-top: 120px;
-	padding-bottom: 150px;
+	padding-top: 100px;
+	padding-bottom: 0px;
 	background-image: url("../images/customise-it-bg.png");
 	background-position: 100% 80%;
 	background-repeat: no-repeat;
@@ -363,8 +439,8 @@ p,
 
 /* in-the-press-section  */
 #in-the-press-section {
-	padding-top: 180px;
-	padding-bottom: 100px;
+	padding-top: 0;
+	padding-bottom: 50px;
 	background-image: url("../images/in-the-web-bg.png");
 	background-position: center;
 	background-repeat: no-repeat;
@@ -372,12 +448,13 @@ p,
 }
 
 #in-the-press-section .carousel-item {
-	min-height: 500px;
+	min-height: 550px;
 }
 
 #in-the-press-section .carousel-caption {
 	left: 0;
 	right: 0;
+	top: 0;
 }
 
 #in-the-press-section .carousel-indicators [data-bs-target] {
@@ -409,6 +486,10 @@ p,
 	display: none;
 }
 
+.page-download {
+	text-align: center;
+}
+
 @media (min-width: 767px) {
 	.content-wrapper{
 		display: flex;
@@ -535,6 +616,8 @@ footer .right-links a {
 }
 
 /* responsive */
+
+/*
 @media (min-width: 1200px) and (max-width: 1799px) {
 	#nav-section a {
 		margin-left: 80px;
@@ -561,19 +644,22 @@ footer .right-links a {
 		text-decoration: none;
 	}
 
-	/* h1 {
-		font-size: 44px;
+	.front-page h1 {
+		font-size: 2.7em;
+	}
+	
+	.front-page h2 {
+		font-size: 2.3em;
+		border-bottom: none;
+	}
+	
+	.front-page p {
+		font-size: 1.1em;
 	}
 
-	h2 {
-		font-size: 30px;
-		line-height: 40px;
-	} */
-
-	/* p,
-	.button-link {
-		font-size: 16px;
-	} */
+	.front-page .button-link {
+		font-size: 1.1em;
+	}
 
 	.button-link {
 		min-width: 200px;
@@ -593,9 +679,7 @@ footer .right-links a {
 
 	#work-together-section,
 	#save-web-section,
-	#customise-it-section,
 	#your-data-section,
-	#in-the-press-section,
 	#your-note-section {
 		padding-top: 50px;
 		padding-bottom: 50px;
@@ -645,12 +729,6 @@ footer .right-links a {
 	.price-container p.price {
 		margin-top: 0px;
 	}
-
-	/* #top-section-img,
-	#multimedia-notes-section-img,
-	#save-web-img {
-		max-width: none;
-	}*/
 }
 
 @media (min-width: 992px) and (max-width: 1200px) {
@@ -691,43 +769,87 @@ footer .right-links a {
 	}
 
 	#in-the-press-section .carousel-item {
-		min-height: 600px;
+		min-height: 650px;
+	}
+}
+*/
+
+/*****************************************************************
+ IN THE PRESS
+ The "In the press" section height needs to be adjusted as the
+ window is changed so that the content is fully visible.
+*****************************************************************/
+
+@media (max-width: 1200px) {
+	#in-the-press-section .carousel-item {
+		min-height: 670px;
 	}
 }
 
+@media (max-width: 767px) {
+	#in-the-press-section {
+		padding-top: 0px;
+		padding-bottom: 50px;
+	}
+
+	#in-the-press-section h2 {
+		padding-bottom: 20px;
+	}
+
+	#in-the-press-section .carousel {
+		margin-top: -50px;
+	}
+
+	#in-the-press-section .carousel-item {
+		min-height: 500px;
+	}
+}
+
+@media (max-width: 500px) {
+	#in-the-press-section .carousel-item {
+		min-height: 700px;
+	}
+}
+
+@media (max-width: 300px) {
+	#in-the-press-section .carousel-item {
+		min-height: 800px;
+	}
+}
+
+/*****************************************************************
+ NARROW VIEW
+ - Top right menu is displayed
+ - Sections are changed: columns with text, then button, then image
+*****************************************************************/
 @media (max-width: 767px) {
 	#main-container {
 		position: relative;
 		min-height: 100vh;
-		padding-bottom: 415px;
+		padding-bottom: 260px;
 	}
 
-	/* h1 {
-		font-size: 34px;
-		line-height: 37.4px;
+	.front-page h1 {
+		font-size: 2.5em;
+	}
+	
+	.front-page h2 {
+		font-size: 2.1em;
+		border-bottom: none;
+	}
+	
+	.front-page p {
+		font-size: 1em;
+	}
+
+	.front-page .button-link {
+		font-size: 1em;
 	}
-	h2 {
-		font-size: 28px;
-		line-height: 33.6px;
-	} */
-	/* p {
-		font-size: 16px;
-		line-height: 25.6px;
-	} */
 
 	.ml-mobile-0 {
 		margin-left: 0px;
 	}
 
-	.button-link {
-		display: block;
-		min-width: inherit;
-		width: 100%;
-		max-width: 400px;
-		margin: auto;
-		padding: 12px 20px;
-	}
-
 	.img-fluid {
 		margin: auto;
 	}
@@ -769,13 +891,17 @@ footer .right-links a {
 		box-shadow: -3px 0px 11px 0 rgba(0,0,0,0.1);
 	}
 
+	#menu-mobile a {
+		margin-left: 0;
+	}
+
 	#toc-mobile {
 		overflow-y: scroll;
 		text-align: left;
 	}
 
 	#toc-mobile ul li a {
-		margin-left: 5px;
+		/* margin-left: 5px; */
 	}
 
 	#toc-mobile ul {
@@ -785,7 +911,7 @@ footer .right-links a {
 
 	#toc-mobile ul > li > p {
 		font-weight: bold;
-		text-align: center;
+		/* text-align: center; */
 		margin-top: 1em;
 	}
 
@@ -827,7 +953,7 @@ footer .right-links a {
 
 	#top-section,
 	.page-container {
-		padding-top: 120px;
+		padding-top: 80px;
 	}
 
 	#top-section-img {
@@ -836,7 +962,7 @@ footer .right-links a {
 	}
 
 	#work-together-section {
-		padding-top: 100px;
+		padding-top: 10px;
 		padding-bottom: 0px;
 	}
 
@@ -846,39 +972,26 @@ footer .right-links a {
 	#save-web-section,
 	#customise-it-section,
 	#your-data-section {
-		padding-top: 30px;
+		padding-top: 10px;
 		padding-bottom: 50px;
 		background-image: inherit;
 	}
 
-	#your-note-section .button-link {
-		margin-bottom: 0px;
-	}
-
-	#in-the-press-section {
-		padding-top: 30px;
-		padding-bottom: 50px;
-	}
-
-	#in-the-press-section .carousel {
-		margin-top: -50px;
-	}
-
-	#in-the-press-section .carousel-item {
-		min-height: 480px;
-	}
-
 	footer {
 		padding-top: 30px;
 		padding-bottom: 30px;
 	}
 }
 
-@media (max-width: 576px) {
+/* @media (max-width: 576px) {
 	#in-the-press-section .carousel {
 		margin-top: -20px;
 	}
-}
+} */
+
+/*****************************************************************
+ MOBILE VIEW
+*****************************************************************/
 
 @media (max-width: 400px) {
 	#top-section {

Assets/WebsiteAssets/js/script.js

@@ -1,8 +1,50 @@
+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 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 os = getOs();
+	if (!os || !downloadLinks[os]) {
+		$('.page-download .get-it-desktop').show();
+	} else {
+		window.location = downloadLinks[os];
+	}
+}
+
 $(function () {
-  $("#open-menu-mobile").click(function () {
-    $("#menu-mobile").animate({ "margin-right": "0px" }, 300);
-  });
-  $("#close-menu-mobile").click(function () {
-    $("#menu-mobile").animate({ "margin-right": "-300px" }, 300);
-  });
+	setupMobileMenu();
+	setupDownloadPage();
 });

Assets/WebsiteAssets/templates/front.mustache

@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<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="Jopli website" />
+		<link rel="stylesheet" href="{{cssBaseUrl}}/fontawesome-all.min.css">
+		<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"
+		/>
+		<link rel="stylesheet" href="{{cssBaseUrl}}/site.css" as="style" />
+		<title>Joplin</title>
+	</head>
+	<body class="front-page">
+		<div class="container-fluid" id="main-container">
+			<div class="blue-bg" id="nav-section">
+				<div class="container">
+					<div class="row">
+						<div class="col-3">
+							<a href="{{baseUrl}}">
+								<img
+									src="{{imageBaseUrl}}/logo-text.svg"
+									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>
+
+							<a class="button-link btn-blue donate-button" href="{{baseUrl}}/donate">
+								<i class="fas fa-heart heart-full"></i><i class="far fa-heart heart-line"></i>&nbsp;Support</a
+							>
+						</div>
+						<div class="col-9 text-right d-block d-md-none">
+							<span class="pointer"
+								><img
+									src="{{imageBaseUrl}}/mobile-menu-open-icon.png"
+									id="open-menu-mobile"
+									alt=""
+							/></span>
+							&nbsp;&nbsp;
+
+							<div id="menu-mobile">
+								<br />
+								<div class="text-right">
+									<img
+										src="{{imageBaseUrl}}/close-icon.png"
+										alt=""
+										class="pointer"
+										id="close-menu-mobile"
+									/>
+								</div>
+								<br />
+								<div class="text-center">
+									<a href="{{baseUrl}}"><img src="{{imageBaseUrl}}/logo-text-blue.svg" alt="" /></a>
+									<br />
+									<br />
+									<!-- <a href="#" class="fw500 mobile-menu-link">Contacts</a> -->
+									<a href="{{forumUrl}}" class="fw500 mobile-menu-link">Forum</a>
+									<a href="{{baseUrl}}/help/" class="fw500 mobile-menu-link">Help</a>
+								</div>
+								<br />
+								<br />
+								<br />
+								<br />
+								<a class="button-link btn-blue donate-button" href="{{baseUrl}}/donate">
+									<i class="far fa-heart"></i>&nbsp;Support</a
+								>
+								<!-- <a class="button-link btn-blue" href="{{baseUrl}}/download/">
+									<img src="{{imageBaseUrl}}/download-icon.svg" alt="" />
+									Download</a
+								>-->
+								<br />
+								<p class="light-blue mobile-menu-link-bottom text-center">
+									Copyright (C) 2016-{{yyyy}} Laurent Cozic
+									<br />
+									{{! <a href="#" class="fw500">Terms & Conditions</a> }}
+									<br />
+									<a href="{{baseUrl}}/privacy/" class="fw500">Privacy Policy</a>
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="blue-bg" id="top-section">
+				<div class="container">
+					<div class="row">
+						<div class="col-12">
+							<h1 class="text-center">
+								Your <span class="frame-bg frame-bg-blue">notes</span>, anywhere
+								you are
+							</h1>
+							<p class="text-center" id="top-section-text">
+								Capture your thoughts, save notes, documents and photos and
+								access them from any device
+							</p>
+							<br />
+							<br />
+							<p class="text-center">
+								<a href="{{baseUrl}}/download/" class="button-link btn-blue">Download the app</a>
+								<!--
+								&nbsp; &nbsp;
+								<a href="#" class="button-link btn-trans"
+									>Sign up with Joplin Cloud</a
+								>
+								-->
+							</p>
+							<img
+								src="{{imageBaseUrl}}/home-top-img.png"
+								alt=""
+								class="img-fluid img-center"
+								id="top-section-img"
+							/>
+						</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">
+									Multimedia <span class="frame-bg frame-bg-yellow">notes</span>
+								</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>
+
+			<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 together</h2>
+								<p>
+									With Joplin Cloud, share your notes with your friends, family
+									or colleagues and collaborate on them.
+								</p>
+								<br />
+								<p>
+									<a href="https://discourse.joplinapp.org/t/introducing-joplin-cloud-beta-program/18014" 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>
+
+			<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 web pages <br /><span class="frame-bg frame-bg-blue"
+										>as notes</span
+									>
+								</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-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% your data</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 EndTo-End Encryption (E2EE) to ensure no-one but
+									yourself can access your notes.
+								</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="your-note-section" class="blue-bg">
+				<div class="container">
+					<div class="row">
+						<div class="col-12">
+							<h2 class="text-center">
+								<span class="frame-bg frame-bg-blue-lg">Your notes,</span> everywhere you are.
+							</h2>
+							<p class="text-center" id="your-note-text">
+								Access your notes from your computer, phone or tablet. All your
+								data is synced to all your devices. 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="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 class="col-12 col-md-6">
+							<p class="text-center">
+								<a href="#">Help</a>
+								&nbsp;&nbsp;&nbsp;
+								<a href="#">Forum</a>
+								&nbsp;&nbsp;&nbsp;
+								<a href="#">Contacts</a>
+							</p>
+						</div>
+						-->
+						
+						<!--
+						<div class="col-12 col-md-3">
+							<br class="d-block d-md-none" />
+							<div class="text-right">
+								<a href="#" class="button-link btn-blue"
+									><img src="{{imageBaseUrl}}/download-icon.svg" alt="" />&nbsp;
+									Download</a
+								>
+							</div>
+						</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 (C) 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}}/jquery-3.6.0.min.js"
+			rel="preload"
+			as="script"
+		></script>
+		<script src="{{jsBaseUrl}}/script.js"></script>
+		{{> analytics}}
+	</body>
+</html>

Assets/WebsiteAssets/templates/main-new.mustache

@@ -40,7 +40,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 		<title>{{pageTitle}}</title>
 	</head>
 	<body>
-		<div class="container-fluid" id="main-container">
+		<div class="container-fluid generic-template" id="main-container">
 			<div class="with-profile white-bg" id="nav-section">
 				<div class="container">
 					<div class="row">
@@ -58,7 +58,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 							<!-- <a href="#" class="fw500">Help</a> -->
 
 							<a href="https://joplinapp.org/gsoc2021/index/" class="fw500">GSoC 2021</a>
-							<a href="https://discourse.joplinapp.org/" class="fw500">Forum</a>
+							<a href="{{forumUrl}}" class="fw500">Forum</a>
 
 							<!--
 							<a href="#" class="fw500">Joplin Cloud</a>
@@ -99,7 +99,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 								<div class="text-center">
 									<img src="{{imageBaseUrl}}/logo-text-blue.svg" alt="" />
 									<a href="#" class="fw500 mobile-menu-link">Contacts</a>
-									<a href="https://discourse.joplinapp.org/" class="fw500 mobile-menu-link">Forum</a>
+									<a href="{{forumUrl}}" class="fw500 mobile-menu-link">Forum</a>
 									<a href="#" class="fw500 mobile-menu-link">Help</a>
 								</div>
 								-->
@@ -117,7 +117,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 								>
 								<br />
 								<p class="light-blue mobile-menu-link-bottom text-center">
-									Joplin© 2021, All rights reserved
+									Joplin© 2021
 									<br />
 									<a href="#" class="fw500">Terms & Conditions</a>
 									<br />
@@ -145,7 +145,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 
 					<br />
 					<div class="row content-wrapper">
-						<div id="toc">{{{tocHtml}}}</div>
+						{{#showToc}}<div id="toc">{{{tocHtml}}}</div>{{/showToc}}
 
 						<div class="main-content">
 							{{{contentHtml}}}
@@ -170,7 +170,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 							<p class="text-center">
 								<a href="#">Help</a>
 								&nbsp;&nbsp;&nbsp;
-								<a href="https://discourse.joplinapp.org/">Forum</a>
+								<a href="{{forumUrl}}">Forum</a>
 								&nbsp;&nbsp;&nbsp;
 								<a href="#">Contacts</a>
 							</p>
@@ -200,7 +200,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 								alt=""
 							/>
 							<br class="d-block d-md-none" />
-							<p class="text-center-sm">Copyright (C) 2016-{{yyyy}} Laurent Cozic, all rights reserved</p>
+							<p class="text-center-sm">Copyright (C) 2016-{{yyyy}} Laurent Cozic</p>
 						</div>
 						<div class="col-12 col-md-6 right-links">
 							<p class="text-right text-center-sm">
@@ -226,27 +226,6 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 		></script>
 		<script src="{{jsBaseUrl}}/script.js"></script>
 
-		<script>
-			function stickyHeader() { 
-				return; // Disabled
-
-				if ($(window).scrollTop() > 179) {
-					$('.nav').addClass('sticky'); 
-				} else {
-					$('.nav').removeClass('sticky');
-				}
-			}
-
-			$(window).scroll(function() {
-				stickyHeader();
-			});
-
-			(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>
+		{{> analytics}}
 	</body>
 </html>

Assets/WebsiteAssets/templates/partials/analytics.mustache

@@ -0,0 +1,8 @@
+<script>
+	(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/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>

CONTRIBUTING.md

@@ -25,7 +25,7 @@ Finally, when submitting a pull request, don't forget to [test your code](#autom
 
 # Contributing to Joplin's translation
 
-Joplin is available in multiple languages thanks to the help of its users. You can help translate Joplin to your language or keep it up to date. Please read the documentation about [Localisation](https://joplinapp.org/#localisation).
+Joplin is available in multiple languages thanks to the help of its users. You can help translate Joplin to your language or keep it up to date. Please read the documentation about [Localisation](https://joplinapp.org/help/#localisation).
 
 # Contributing to Joplin's code
 

package.json

@@ -44,6 +44,7 @@
     "updateIgnored": "gulp updateIgnoredTypeScriptBuild",
     "updatePluginTypes": "./packages/generator-joplin/updateTypes.sh",
     "watch": "lerna run watch --stream --parallel",
+    "watch-website": "nodemon --verbose --watch Assets/WebsiteAssets --watch packages/tools/build-website.js --ext md,ts,js,mustache,css,tsx,gif,png,svg --exec \"node packages/tools/build-website.js && http-server docs -a localhost\"",
     "i": "lerna add --no-bootstrap --scope"
   },
   "husky": {
@@ -68,5 +69,9 @@
     "madge": "^4.0.2",
     "typedoc": "^0.17.8",
     "typescript": "^4.0.5"
+  },
+  "dependencies": {
+    "http-server": "^0.12.3",
+    "nodemon": "^2.0.9"
   }
 }

packages/app-cli/app/command-apidoc.js

@@ -180,7 +180,7 @@ async function fetchAllNotes() {
 
 		lines.push('# Searching');
 		lines.push('');
-		lines.push('Call **GET /search?query=YOUR_QUERY** to search for notes. This end-point supports the `field` parameter which is recommended to use so that you only get the data that you need. The query syntax is as described in the main documentation: https://joplinapp.org/#searching');
+		lines.push('Call **GET /search?query=YOUR_QUERY** to search for notes. This end-point supports the `field` parameter which is recommended to use so that you only get the data that you need. The query syntax is as described in the main documentation: https://joplinapp.org/help/#searching');
 		lines.push('');
 		lines.push('To retrieve non-notes items, such as notebooks or tags, add a `type` parameter and set it to the required [item type name](#item-type-id). In that case, full text search will not be used - instead it will be a simple case-insensitive search. You can also use `*` as a wildcard. This is convenient for example to retrieve notebooks or tags by title.');
 		lines.push('');

packages/lib/welcomeAssets.js

@@ -3,7 +3,7 @@ module.exports = {
         {
             "id": "8a1556e382704160808e9a7bef7135d3",
             "title": "1. Welcome to Joplin! 🗒️",
-            "body": "# Welcome to Joplin! 🗒️\n\nJoplin is a free, open source note taking and to-do application, which helps you write and organise your notes, and synchronise them between your devices. The notes are searchable, can be copied, tagged and modified either from the application directly or from your own text editor. The notes are in [Markdown format](https://joplinapp.org/#markdown). Joplin is available as a **💻 desktop**, **📱 mobile** and **🔡 terminal** application.\n\nThe notes in this notebook give an overview of what Joplin can do and how to use it. In general, the three applications share roughly the same functionalities; any differences will be clearly indicated.\n\n![](./AllClients.png)\n\n## Joplin is divided into three parts\n\nJoplin has three main columns:\n\n- **Sidebar** contains the list of your notebooks and tags, as well as the synchronisation status.\n- **Note List** contains the current list of notes - either the notes in the currently selected notebook, the notes in the currently selected tag, or search results.\n- **Note Editor** is the place where you write your notes. There is a **WYSIWYG editor** and a **Markdown editor** - click on **Code View** to switch between both! You may also use an [external editor](https://joplinapp.org/#external-text-editor) to edit notes. For example you can use something like Typora as an external editor and it will display the note as well as any embedded images.\n\n## Writing notes in Markdown\n\nMarkdown is a lightweight markup language with plain text formatting syntax. Joplin supports a [Github-flavoured Markdown syntax](https://joplinapp.org/markdown/) with a few variations and additions.\n\nIn general, while Markdown is a markup language, it is meant to be human readable, even without being rendered. This is a simple example (you can see how it looks in the viewer panel):\n\n* * *\n\n# Heading\n\n## Sub-heading\n\nParagraphs are separated by a blank line. Text attributes _italic_, **bold** and `monospace` are supported. You can create bullet lists:\n\n* apples\n* oranges\n* pears\n\nOr numbered lists:\n\n1. wash\n2. rinse\n3. repeat\n\nThis is a [link](https://joplinapp.org) and, finally, below is a horizontal rule:\n\n* * *\n\nA lot more is possible including adding code samples, math formulae or checkbox lists - see the [Markdown documentation](https://joplinapp.org/#markdown) for more information.\n\n## Organising your notes\n\n### With notebooks 📔\n\nJoplin notes are organised into a tree of notebooks and sub-notebooks.\n\n- On **desktop**, you can create a notebook by clicking on New Notebook, then you can drag and drop them into other notebooks to organise them as you wish.\n- On **mobile**, press the \"+\" icon and select \"New notebook\".\n- On **terminal**, press `:mn`\n\n![](./SubNotebooks.png)\n\n### With tags 🏷️\n\nThe second way to organise your notes is using tags:\n\n- On **desktop**, right-click on any note in the Note List, and select \"Edit tags\". You can then add the tags, separating them by commas.\n- On **mobile**, open the note and press the \"⋮\" button and select \"Tags\".\n- On **terminal**, type `:help tag` for the available commands.\n",
+            "body": "# Welcome to Joplin! 🗒️\n\nJoplin is a free, open source note taking and to-do application, which helps you write and organise your notes, and synchronise them between your devices. The notes are searchable, can be copied, tagged and modified either from the application directly or from your own text editor. The notes are in [Markdown format](https://joplinapp.org/help/#markdown). Joplin is available as a **💻 desktop**, **📱 mobile** and **🔡 terminal** application.\n\nThe notes in this notebook give an overview of what Joplin can do and how to use it. In general, the three applications share roughly the same functionalities; any differences will be clearly indicated.\n\n![](./AllClients.png)\n\n## Joplin is divided into three parts\n\nJoplin has three main columns:\n\n- **Sidebar** contains the list of your notebooks and tags, as well as the synchronisation status.\n- **Note List** contains the current list of notes - either the notes in the currently selected notebook, the notes in the currently selected tag, or search results.\n- **Note Editor** is the place where you write your notes. There is a **WYSIWYG editor** and a **Markdown editor** - click on **Code View** to switch between both! You may also use an [external editor](https://joplinapp.org/help/#external-text-editor) to edit notes. For example you can use something like Typora as an external editor and it will display the note as well as any embedded images.\n\n## Writing notes in Markdown\n\nMarkdown is a lightweight markup language with plain text formatting syntax. Joplin supports a [Github-flavoured Markdown syntax](https://joplinapp.org/markdown/) with a few variations and additions.\n\nIn general, while Markdown is a markup language, it is meant to be human readable, even without being rendered. This is a simple example (you can see how it looks in the viewer panel):\n\n* * *\n\n# Heading\n\n## Sub-heading\n\nParagraphs are separated by a blank line. Text attributes _italic_, **bold** and `monospace` are supported. You can create bullet lists:\n\n* apples\n* oranges\n* pears\n\nOr numbered lists:\n\n1. wash\n2. rinse\n3. repeat\n\nThis is a [link](https://joplinapp.org) and, finally, below is a horizontal rule:\n\n* * *\n\nA lot more is possible including adding code samples, math formulae or checkbox lists - see the [Markdown documentation](https://joplinapp.org/help/#markdown) for more information.\n\n## Organising your notes\n\n### With notebooks 📔\n\nJoplin notes are organised into a tree of notebooks and sub-notebooks.\n\n- On **desktop**, you can create a notebook by clicking on New Notebook, then you can drag and drop them into other notebooks to organise them as you wish.\n- On **mobile**, press the \"+\" icon and select \"New notebook\".\n- On **terminal**, press `:mn`\n\n![](./SubNotebooks.png)\n\n### With tags 🏷️\n\nThe second way to organise your notes is using tags:\n\n- On **desktop**, right-click on any note in the Note List, and select \"Edit tags\". You can then add the tags, separating them by commas.\n- On **mobile**, open the note and press the \"⋮\" button and select \"Tags\".\n- On **terminal**, type `:help tag` for the available commands.\n",
             "tags": [],
             "resources": {
                 "./AllClients.png": {
@@ -20,7 +20,7 @@ module.exports = {
         {
             "id": "b863cbc514cb4cafbae8dd6a4fcad919",
             "title": "2. Importing and exporting notes ↔️",
-            "body": "# Importing and exporting notes ↔️\n\n## Importing from Evernote\n\nJoplin was designed as a replacement for Evernote and so can import complete Evernote notebooks, as well as notes, tags, images, attached files and note metadata (such as author, geo-location, etc.) via ENEX files.\n\nTo import Evernote data, first export your Evernote notebooks to ENEX files as described [here](https://help.evernote.com/hc/en-us/articles/209005557-How-to-back-up-export-and-restore-import-notes-and-notebooks). Then, on **desktop**, do the following: Open File > Import > ENEX and select your file. The notes will be imported into a new separate notebook. If needed they can then be moved to a different notebook, or the notebook can be renamed, etc. Read [more about Evernote import](https://joplinapp.org/#importing-from-evernote).\n\n# Importing from other apps\n\nJoplin can also import notes from [many other apps](https://github.com/laurent22/joplin#importing-from-other-applications) as well as [from Markdown or text files](https://github.com/laurent22/joplin#importing-from-markdown-files).\n\n# Exporting notes\n\nJoplin can export to the JEX format (Joplin Export file), which is an archive that can contain multiple notes, notebooks, etc. This is a format mostly designed for backup purposes. You may also export to other formats such as plain Markdown files, to JSON or to PDF. Find out [more about exporting notes](https://github.com/laurent22/joplin#exporting) on the official website.",
+            "body": "# Importing and exporting notes ↔️\n\n## Importing from Evernote\n\nJoplin was designed as a replacement for Evernote and so can import complete Evernote notebooks, as well as notes, tags, images, attached files and note metadata (such as author, geo-location, etc.) via ENEX files.\n\nTo import Evernote data, first export your Evernote notebooks to ENEX files as described [here](https://help.evernote.com/hc/en-us/articles/209005557-How-to-back-up-export-and-restore-import-notes-and-notebooks). Then, on **desktop**, do the following: Open File > Import > ENEX and select your file. The notes will be imported into a new separate notebook. If needed they can then be moved to a different notebook, or the notebook can be renamed, etc. Read [more about Evernote import](https://joplinapp.org/help/#importing-from-evernote).\n\n# Importing from other apps\n\nJoplin can also import notes from [many other apps](https://github.com/laurent22/joplin#importing-from-other-applications) as well as [from Markdown or text files](https://github.com/laurent22/joplin#importing-from-markdown-files).\n\n# Exporting notes\n\nJoplin can export to the JEX format (Joplin Export file), which is an archive that can contain multiple notes, notebooks, etc. This is a format mostly designed for backup purposes. You may also export to other formats such as plain Markdown files, to JSON or to PDF. Find out [more about exporting notes](https://github.com/laurent22/joplin#exporting) on the official website.",
             "tags": [],
             "resources": {},
             "parent_id": "9bb5d498aba74cc6a047cfdc841e82a1"

packages/tools/build-website.ts

@@ -1,10 +1,42 @@
 import * as fs from 'fs-extra';
+import { filename } from '@joplin/lib/path-utils';
+import * as Mustache from 'mustache';
+import { insertContentIntoFile } from './tool-utils';
 const dirname = require('path').dirname;
-const Mustache = require('mustache');
 const glob = require('glob');
 const MarkdownIt = require('markdown-it');
 const path = require('path');
 
+interface GithubSponsor {
+	name: string;
+	id: string;
+}
+
+interface OrgSponsor {
+	url: string;
+	title: string;
+	imageName: string;
+}
+
+interface Sponsors {
+	github: GithubSponsor[];
+	orgs: OrgSponsor[];
+}
+
+interface PressCarouselItem {
+	active: string;
+	body: string;
+	author: string;
+	source: string;
+	imageName: string;
+	url: string;
+}
+
+interface PressCarousel {
+	id: string;
+	items: PressCarouselItem[];
+}
+
 interface TemplateParams {
 	baseUrl?: string;
 	imageBaseUrl?: string;
@@ -16,11 +48,32 @@ interface TemplateParams {
 	donateLinksMd?: string;
 	pageTitle?: string;
 	yyyy? : string;
+	templateHtml?: string;
+	partials?: Record<string, string>;
+	// pressCarouselItems?: PressCarouselItem[];
+	forumUrl?: string;
+	showToc?: boolean;
+	pressCarouselRegular?: PressCarousel;
+	pressCarouselMobile?: PressCarousel;
+	sponsors: Sponsors;
 }
 
 const rootDir = dirname(dirname(__dirname));
 const websiteAssetDir = `${rootDir}/Assets/WebsiteAssets`;
 const mainTemplateHtml = fs.readFileSync(`${websiteAssetDir}/templates/main-new.mustache`, 'utf8');
+const frontTemplateHtml = fs.readFileSync(`${websiteAssetDir}/templates/front.mustache`, 'utf8');
+const partialDir = `${websiteAssetDir}/templates/partials`;
+
+async function loadMustachePartials(partialDir: string) {
+	const output: Record<string, string> = {};
+	const files = await fs.readdir(partialDir);
+	for (const f of files) {
+		const name = filename(f);
+		const templateContent = await fs.readFile(`${partialDir}/${f}`, 'utf8');
+		output[name] = templateContent;
+	}
+	return output;
+}
 
 function markdownToHtml(md: string, templateParams: TemplateParams): string {
 	const markdownIt = new MarkdownIt({
@@ -39,39 +92,9 @@ function markdownToHtml(md: string, templateParams: TemplateParams): string {
 					['class', 'table'],
 				];
 			}
-
-			// if (token.type === 'heading_open') {
-			// 	insideHeading = true;
-			// 	continue;
-			// }
-
-			// if (token.type === 'heading_close') {
-			// 	insideHeading = false;
-			// 	continue;
-			// }
-
-			// if (insideHeading && token.type === 'inline') {
-			// 	const anchorName = headingTextToAnchorName(token.content, doneNames);
-			// 	doneNames.push(anchorName);
-			// 	const anchorTokens = createAnchorTokens(anchorName);
-			// 	// token.children = anchorTokens.concat(token.children);
-			// 	token.children = token.children.concat(anchorTokens);
-			// }
 		}
-
 	});
 
-	// console.info('iiiiiiiiiiiiiiiiii');
-
-	// markdownIt.renderer.rules.image = function (tokens:any[], idx:number, options:any, env:any, self:any) {
-	// 	const defaultRender = markdownIt.renderer.rules.image;
-	// 	const token = tokens[idx];
-
-	// 	console.info('AAAAAAAAAAA', tokens);
-
-	// 	return defaultRender(tokens, idx, options, env, self);
-	// }
-
 	markdownIt.core.ruler.push('checkbox', (state: any) => {
 		const tokens = state.tokens;
 		const Token = state.Token;
@@ -161,10 +184,10 @@ function markdownToHtml(md: string, templateParams: TemplateParams): string {
 		}
 	});
 
-	return Mustache.render(mainTemplateHtml, {
+	return Mustache.render(templateParams.templateHtml, {
 		...templateParams,
 		contentHtml: markdownIt.render(md),
-	});
+	}, templateParams.partials);
 }
 
 let tocMd_: string = null;
@@ -185,7 +208,7 @@ async function getDonateLinks() {
 
 	if (!matches) throw new Error('Cannot fetch donate links');
 
-	return matches[1].trim();
+	return `<div class="donate-links">\n\n${matches[1].trim()}\n\n</div>`;
 }
 
 function replaceGitHubByJoplinAppLinks(md: string) {
@@ -208,12 +231,20 @@ function renderMdToHtml(md: string, targetPath: string, templateParams: Template
 	// Remove the header because it's going to be added back as HTML
 	md = md.replace(/# Joplin\n/, '');
 
-	templateParams.baseUrl = '';// 'https://joplinapp.org';
-	templateParams.imageBaseUrl = `${templateParams.baseUrl}/images`;
-	templateParams.cssBaseUrl = `${templateParams.baseUrl}/css`;
-	templateParams.jsBaseUrl = `${templateParams.baseUrl}/js`;
-	templateParams.tocHtml = tocHtml();
-	templateParams.yyyy = (new Date()).getFullYear().toString();
+	const baseUrl = '';
+
+	templateParams = {
+		baseUrl: baseUrl, // 'https://joplinapp.org',
+		imageBaseUrl: `${baseUrl}/images`,
+		cssBaseUrl: `${baseUrl}/css`,
+		jsBaseUrl: `${baseUrl}/js`,
+		tocHtml: tocHtml(),
+		yyyy: (new Date()).getFullYear().toString(),
+		templateHtml: templateParams.templateHtml ? templateParams.templateHtml : mainTemplateHtml,
+		forumUrl: 'https://discourse.joplinapp.org/',
+		showToc: true,
+		...templateParams,
+	};
 
 	const title = [];
 
@@ -227,7 +258,7 @@ function renderMdToHtml(md: string, targetPath: string, templateParams: Template
 	md = replaceGitHubByJoplinAppLinks(md);
 
 	if (templateParams.donateLinksMd) {
-		md = `${templateParams.donateLinksMd}\n\n* * *\n\n${md}`;
+		md = `${templateParams.donateLinksMd}\n\n${md}`;
 	}
 
 	templateParams.pageTitle = title.join(' | ');
@@ -266,11 +297,105 @@ function makeHomePageMd() {
 	return md;
 }
 
+async function createDownloadButtonsHtml(readmeMd: string): Promise<Record<string, string>> {
+	const output: Record<string, string> = {};
+	output['windows'] = readmeMd.match(/(<a href=.*?Joplin-Setup-.*?<\/a>)/)[0];
+	output['macOs'] = readmeMd.match(/(<a href=.*?Joplin-.*\.dmg.*?<\/a>)/)[0];
+	output['linux'] = readmeMd.match(/(<a href=.*?Joplin-.*\.AppImage.*?<\/a>)/)[0];
+	output['android'] = readmeMd.match(/(<a href='https:\/\/play.google.com\/store\/apps\/details\?id=net\.cozic\.joplin.*?<\/a>)/)[0];
+	output['ios'] = readmeMd.match(/(<a href='https:\/\/itunes\.apple\.com\/us\/app\/joplin\/id1315599797.*?<\/a>)/)[0];
+
+	for (const [k, v] of Object.entries(output)) {
+		if (!v) throw new Error(`Could not get download element for: ${k}`);
+	}
+
+	return output;
+
+	// <a href='https://github.com/laurent22/joplin/releases/download/v2.1.8/Joplin-Setup-2.1.8.exe'><img alt='Get it on Windows' width="134px" src='https://joplinapp.org/images/BadgeWindows.png'/></a>
+	// <a href='https://github.com/laurent22/joplin/releases/download/v2.1.8/Joplin-2.1.8.dmg'><img alt='Get it on macOS' width="134px" src='https://joplinapp.org/images/BadgeMacOS.png'/></a>
+	// <a href='https://github.com/laurent22/joplin/releases/download/v2.1.8/Joplin-2.1.8.AppImage'><img alt='Get it on Linux' width="134px" src='https://joplinapp.org/images/BadgeLinux.png'/></a>
+
+	// <a href='https://play.google.com/store/apps/details?id=net.cozic.joplin&utm_source=GitHub&utm_campaign=README&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' height="40px" src='https://joplinapp.org/images/BadgeAndroid.png'/></a>
+	// <a href='https://itunes.apple.com/us/app/joplin/id1315599797'><img alt='Get it on the App Store' height="40px" src='https://joplinapp.org/images/BadgeIOS.png'/></a>
+}
+
+async function updateDownloadPage(downloadButtonsHtml: Record<string, string>) {
+	const desktopButtonsHtml = [
+		downloadButtonsHtml['windows'],
+		downloadButtonsHtml['macOs'],
+		downloadButtonsHtml['linux'],
+	];
+
+	const mobileButtonsHtml = [
+		downloadButtonsHtml['android'],
+		downloadButtonsHtml['ios'],
+	];
+
+	await insertContentIntoFile(`${rootDir}/readme/download.md`, '<!-- DESKTOP-DOWNLOAD-LINKS -->', '<!-- DESKTOP-DOWNLOAD-LINKS -->', desktopButtonsHtml.join(' '));
+	await insertContentIntoFile(`${rootDir}/readme/download.md`, '<!-- MOBILE-DOWNLOAD-LINKS -->', '<!-- MOBILE-DOWNLOAD-LINKS -->', mobileButtonsHtml.join(' '));
+}
+
+function pressCarouselItems() {
+	return [
+		{
+			active: 'active',
+			body: 'It lets you create multiple types of notes, reminders, and alarms, all of which can be synced. The app also includes a web clipper too, but in our opinion, Joplin’s best feature is the built-in end-to-end encryption for keeping your notes private.',
+			author: 'Brendan Hesse',
+			source: 'Life Hacker, "The Best Note-Taking Apps"',
+			imageName: 'in-the-press-life-hacker.png',
+			url: 'https://lifehacker.com/the-best-note-taking-apps-1837842880',
+		},
+		{
+			active: '',
+			body: 'Joplin is single handedly the best pick for an open-source note-taking app, making it an Editors\' Choice winner for that category. Unlike some open-source tools, which are incredibly difficult to use, Joplin is surprisingly user friendly, even in setting up storage and syncing.',
+			author: 'Jill Duffy',
+			source: 'PCMag, "The Best Open-Source Note-Taking App"',
+			imageName: 'in-the-press-life-pcmag.png',
+			url: 'https://www.pcmag.com/reviews/joplin',
+		},
+		{
+			active: '',
+			body: 'Joplin is an excellent open source note taking application with plenty of features. You can take notes, make to-do list and sync your notes across devices by linking it with cloud services. The synchronization is protected with end to end encryption.',
+			author: 'Abhishek Prakash',
+			source: 'It\'s FOSS, "Joplin: Open source note organizer"',
+			imageName: 'in-the-press-its-foss.png',
+			url: 'https://itsfoss.com/joplin/',
+		},
+	];
+}
+
+async function loadSponsors(): Promise<Sponsors> {
+	const sponsorsPath = `${rootDir}/packages/tools/sponsors.json`;
+	return JSON.parse(await fs.readFile(sponsorsPath, 'utf8'));
+}
+
 async function main() {
 	await fs.remove(`${rootDir}/docs`);
 	await fs.copy(websiteAssetDir, `${rootDir}/docs`);
 
-	renderMdToHtml(makeHomePageMd(), `${rootDir}/docs/index.html`, { sourceMarkdownFile: 'README.md' });
+	const sponsors = await loadSponsors();
+	const partials = await loadMustachePartials(partialDir);
+
+	const readmeMd = makeHomePageMd();
+
+	const downloadButtonsHtml = await createDownloadButtonsHtml(readmeMd);
+	await updateDownloadPage(downloadButtonsHtml);
+
+	renderMdToHtml(readmeMd, `${rootDir}/docs/help/index.html`, { sourceMarkdownFile: 'README.md', partials, sponsors });
+
+	renderMdToHtml('', `${rootDir}/docs/index.html`, {
+		templateHtml: frontTemplateHtml,
+		partials,
+		pressCarouselRegular: {
+			id: 'carouselRegular',
+			items: pressCarouselItems(),
+		},
+		pressCarouselMobile: {
+			id: 'carouselMobile',
+			items: pressCarouselItems(),
+		},
+		sponsors,
+	});
 
 	const mdFiles = glob.sync(`${rootDir}/readme/**/*.md`, {
 		ignore: [
@@ -286,14 +411,15 @@ async function main() {
 		const targetFilePath = `${mdFile.replace(/\.md/, '').replace(/readme\//, 'docs/')}/index.html`;
 		sources.push([mdFile, targetFilePath, {
 			title: title,
-			donateLinksMd: donateLinksMd,
+			donateLinksMd: mdFile === 'readme/donate.md' ? '' : donateLinksMd,
+			showToc: mdFile !== 'readme/download.md',
 		}]);
 	}
 
 	for (const source of sources) {
 		source[2].sourceMarkdownFile = source[0];
 		source[2].sourceMarkdownName = path.basename(source[0], path.extname(source[0]));
-		renderFileToHtml(`${rootDir}/${source[0]}`, `${rootDir}/${source[1]}`, source[2]);
+		renderFileToHtml(`${rootDir}/${source[0]}`, `${rootDir}/${source[1]}`, { ...source[2], partials });
 	}
 }
 

packages/tools/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@joplin/tools",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -101,6 +101,12 @@
         "@types/node": "*"
       }
     },
+    "@types/mustache": {
+      "version": "0.8.32",
+      "resolved": "https://registry.npmjs.org/@types/mustache/-/mustache-0.8.32.tgz",
+      "integrity": "sha512-RTVWV485OOf4+nO2+feurk0chzHkSjkjALiejpHltyuMf/13fGymbbNNFrSKdSSUg1TIwzszXdWsVirxgqYiFA==",
+      "dev": true
+    },
     "@types/node": {
       "version": "14.14.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.6.tgz",

packages/tools/package.json

@@ -39,6 +39,7 @@
     "@rmp135/sql-ts": "^1.6.0",
     "@types/fs-extra": "^9.0.6",
     "@types/node": "^14.14.6",
+    "@types/mustache": "^0.8.32",
     "gulp": "^4.0.2",
     "sqlite3": "^5.0.0",
     "typescript": "^4.1.3"

packages/tools/sponsors.json

@@ -76,5 +76,22 @@
 			"name": "konishi-t",
 			"id": "24908652"
 		}
+	],
+	"orgs": [
+		{
+			"url": "https://seirei.ne.jp",
+			"title": "Serei Network",
+			"imageName": "SeireiNetwork.png"
+		},
+		{
+			"url": "https://usrigging.com/",
+			"title": "U.S. Ringing Supply",
+			"imageName": "RingingSupply.svg"
+		},
+		{
+			"url": "https://tranio.com/italy/",
+			"title": "Tranio",
+			"imageName": "Tranio.png"
+		}
 	]
 }

readme/api/references/rest_api.md

@@ -116,7 +116,7 @@ Call **GET /ping** to check if the service is available. It should return "Jopli
 
 # Searching
 
-Call **GET /search?query=YOUR_QUERY** to search for notes. This end-point supports the `field` parameter which is recommended to use so that you only get the data that you need. The query syntax is as described in the main documentation: https://joplinapp.org/#searching
+Call **GET /search?query=YOUR_QUERY** to search for notes. This end-point supports the `field` parameter which is recommended to use so that you only get the data that you need. The query syntax is as described in the main documentation: https://joplinapp.org/help/#searching
 
 To retrieve non-notes items, such as notebooks or tags, add a `type` parameter and set it to the required [item type name](#item-type-id). In that case, full text search will not be used - instead it will be a simple case-insensitive search. You can also use `*` as a wildcard. This is convenient for example to retrieve notebooks or tags by title.
 

readme/blog/20190130-230218.md

@@ -4,7 +4,7 @@ The original search engine in Joplin was pretty limited - it would search for yo
 
 The last versions of Joplin include a new search engine that provides much better results, and also allow better specifying search queries.
 
-The search engine indexes in real time the content of the notes, thus it can give back results very fast. It is also built on top of SQLite FTS and thus support [all its queries](https://joplinapp.org/#searching). Unlike the previous search engine, the new one also sorts the results by relevance.
+The search engine indexes in real time the content of the notes, thus it can give back results very fast. It is also built on top of SQLite FTS and thus support [all its queries](https://joplinapp.org/help/#searching). Unlike the previous search engine, the new one also sorts the results by relevance.
 
 The first iteration of this new search engine was a bit limited when it comes to non-English text. For example, for searching text that contains accents or non-alphabetical characters. So in the last update, better support for this was also added - accentuated and non-accentuated characters are treated in the same way, and languages like Russian, Chinese, Japanese or Korean can be searched easily.
 

readme/blog/20190613-202613.md

@@ -1,6 +1,6 @@
 # Customising your notes with the help of the development tools and CSS
 
-In Joplin desktop, it has been possible [to customise the appearance of your notes](https://joplinapp.org/#custom-css) using CSS for quite some time.
+In Joplin desktop, it has been possible [to customise the appearance of your notes](https://joplinapp.org/help/#custom-css) using CSS for quite some time.
 
 An issue however is that it is difficult to know what CSS to write and how to select specific elements with CSS. The development tools that were just added allow figuring this out. They are available under the menu **Help > Toggle development tools.**
 

readme/donate.md

@@ -1,6 +1,8 @@
 # Support Joplin development
 
-Donations to Joplin support the development of the project. Developing quality applications mostly takes time, but there are also some expenses, such as digital certificates to sign the applications, app store fees, hosting, etc. Most of all, your donation will make it possible to keep up the current development standards.
+Donations support the developer of Joplin. Developing quality applications mostly takes time, but there are also expenses, such as digital certificates to sign the applications, app store fees, hosting, as well as the hardware to develop and test a cross-plaform app.
+
+Most of all, your donation will make it possible to keep up the current development standards, and will bring new features and improvements to the app.
 
 ## Donations
 
@@ -17,4 +19,4 @@ Finally, there are other ways to support the development of Joplin:
 
 - Consider rating the app on [Google Play](https://play.google.com/store/apps/details?id=net.cozic.joplin&utm_source=GitHub&utm_campaign=README&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1) or [App Store](https://itunes.apple.com/us/app/joplin/id1315599797).
 - Vote for or review the app on [alternativeTo](https://alternativeto.net/software/joplin/about/) or [Product Hunt](https://www.producthunt.com/posts/joplin).
-- [Create or update a translation](https://joplinapp.org/#localisation).
+- [Create or update a translation](https://joplinapp.org/help/#localisation).

readme/download.md

@@ -0,0 +1,25 @@
+# Download Joplin
+
+Thank you for downloading the Joplin desktop app!
+
+If you download didn't start, <a href="#" class="download-click-here">click here</a>.
+
+<div class="get-it-desktop">
+
+## Get it on desktop
+
+Access your notes on Windows, macOS or Linux.
+
+<!-- DESKTOP-DOWNLOAD-LINKS --><a href='https://github.com/laurent22/joplin/releases/download/v2.1.8/Joplin-Setup-2.1.8.exe'><img alt='Get it on Windows' width="134px" src='https://joplinapp.org/images/BadgeWindows.png'/></a> <a href='https://github.com/laurent22/joplin/releases/download/v2.1.8/Joplin-2.1.8.dmg'><img alt='Get it on macOS' width="134px" src='https://joplinapp.org/images/BadgeMacOS.png'/></a> <a href='https://github.com/laurent22/joplin/releases/download/v2.1.8/Joplin-2.1.8.AppImage'><img alt='Get it on Linux' width="134px" src='https://joplinapp.org/images/BadgeLinux.png'/></a><!-- DESKTOP-DOWNLOAD-LINKS -->
+
+</div>
+
+## Get it on mobile
+
+To access your notes on your mobile or tablet, get the Android or iOS apps!
+
+<!-- MOBILE-DOWNLOAD-LINKS --><a href='https://play.google.com/store/apps/details?id=net.cozic.joplin&utm_source=GitHub&utm_campaign=README&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' height="40px" src='https://joplinapp.org/images/BadgeAndroid.png'/></a> <a href='https://itunes.apple.com/us/app/joplin/id1315599797'><img alt='Get it on the App Store' height="40px" src='https://joplinapp.org/images/BadgeIOS.png'/></a><!-- MOBILE-DOWNLOAD-LINKS -->
+
+## More download options
+
+For other download options, such as the portable application, terminal application or Android APK file, please [follow this link](https://github.com/laurent22/joplin/blob/dev/README.md#installation).

readme/faq.md

@@ -142,4 +142,4 @@ Additionally the Windows Task Manager can be used to verify whether Joplin is st
 
 ## Why is it named Joplin?
 
-The name comes from the composer and pianist [Scott Joplin](https://en.wikipedia.org/wiki/Scott_Joplin), which I often listen to. His name is also easy to remember and type so it felt like a good choice. And, to quote a user on Hacker News, "though Scott Joplin's ragtime musical style has a lot in common with some very informal music, his own approach was more educated, sophisticated, and precise. Every note was in its place for a reason, and he was known to prefer his pieces to be performed exactly as written. So you could say that compared to the people who came before him, his notes were more organized".
+The name comes from the composer and pianist [Scott Joplin](https://en.wikipedia.org/wiki/Scott_Joplin), which I often listen to. His name is also easy to remember and type so it felt like a good choice.

readme/gsoc2020/ideas.md

@@ -84,7 +84,7 @@ More info: [Mobile - Add share menu #876](https://github.com/laurent22/joplin/is
 
 ## 5. Web client for Nextcloud
 
-There is the community's wish to have the notes integrated Nextcloud, so that Notes can be sought by Nextcloud itself. Although this idea focuses on Nextcloud it shall allow to extend it to other collaboration applications going beyond the current scope of  [Synchronisation](https://joplinapp.org/#synchronisation). There is already the [web application](https://github.com/foxmask/joplin-web) what may used as a starting point, but it is also fine to start from scratch.
+There is the community's wish to have the notes integrated Nextcloud, so that Notes can be sought by Nextcloud itself. Although this idea focuses on Nextcloud it shall allow to extend it to other collaboration applications going beyond the current scope of  [Synchronisation](https://joplinapp.org/help/#synchronisation). There is already the [web application](https://github.com/foxmask/joplin-web) what may used as a starting point, but it is also fine to start from scratch.
 
 Feature parity with the desktop client is not needed and would be out of scope. These are the features that would be needed to create a minimal web client:
 

readme/gsoc2020/index.md

@@ -15,7 +15,7 @@ All participants will need a Google account in order to join the program. So, sa
 
 All applications share the same back-end written in JavaScript (Node.js), with Redux for state management. The back-end runs locally.
 
-The GUI's, as listed on the [Joplin's website](https://joplinapp.org/#installation) are:
+The GUI's, as listed on the [Joplin's website](https://joplinapp.org/help/#installation) are:
 
 - CLI: terminal-kit
 - Desktop: Electron

readme/gsoc2021/index.md

@@ -31,7 +31,7 @@ We suggest you read carefully these important documents and bookmark the links a
 
 In general, all applications share the same back-end written in TypeScript or JavaScript (Node.js), with Redux for state management. The back-end runs locally.
 
-The desktop GUI, as listed on the [Joplin's website](https://joplinapp.org/#installation) is done using Electron and React.
+The desktop GUI, as listed on the [Joplin's website](https://joplinapp.org/help/#installation) is done using Electron and React.
 
 The mobile app is done using React Native.
 

readme/terminal.md

@@ -2,7 +2,7 @@
 
 Joplin is a free, open source note taking and to-do application, which can handle a large number of notes organised into notebooks. The notes are searchable, can be copied, tagged and modified with your own text editor.
 
-Notes exported from Evernote via .enex files [can be imported](https://joplinapp.org/#importing) into Joplin, including the formatted content (which is converted to Markdown), resources (images, attachments, etc.) and complete metadata (geolocation, updated time, created time, etc.). Plain Markdown files can also be imported.
+Notes exported from Evernote via .enex files [can be imported](https://joplinapp.org/help/#importing) into Joplin, including the formatted content (which is converted to Markdown), resources (images, attachments, etc.) and complete metadata (geolocation, updated time, created time, etc.). Plain Markdown files can also be imported.
 
 The notes can be [synchronised](#synchronisation) with various targets including the file system (for example with a network directory), Nextcloud, Dropbox, OneDrive or WebDAV. When synchronising the notes, notebooks, tags and other metadata are saved to plain text files which can be easily inspected, backed up and moved around.
 
@@ -347,7 +347,7 @@ The following commands are available in [command-line mode](#command-line-mode):
 
 	    locale                         Language.
 	                                   Please see localisation section on
-	                                   https://joplinapp.org/#localisation
+	                                   https://joplinapp.org/help/#localisation
 	                                   for info on translation completion progress
 	                                   Type: Enum.
 	                                   Possible values: ar (Arabic), eu (Basque),

readme/welcome/1_welcome_to_joplin.md

@@ -1,6 +1,6 @@
 # Welcome to Joplin! 🗒️
 
-Joplin is a free, open source note taking and to-do application, which helps you write and organise your notes, and synchronise them between your devices. The notes are searchable, can be copied, tagged and modified either from the application directly or from your own text editor. The notes are in [Markdown format](https://joplinapp.org/#markdown). Joplin is available as a **💻 desktop**, **📱 mobile** and **🔡 terminal** application.
+Joplin is a free, open source note taking and to-do application, which helps you write and organise your notes, and synchronise them between your devices. The notes are searchable, can be copied, tagged and modified either from the application directly or from your own text editor. The notes are in [Markdown format](https://joplinapp.org/help/#markdown). Joplin is available as a **💻 desktop**, **📱 mobile** and **🔡 terminal** application.
 
 The notes in this notebook give an overview of what Joplin can do and how to use it. In general, the three applications share roughly the same functionalities; any differences will be clearly indicated.
 
@@ -12,7 +12,7 @@ Joplin has three main columns:
 
 - **Sidebar** contains the list of your notebooks and tags, as well as the synchronisation status.
 - **Note List** contains the current list of notes - either the notes in the currently selected notebook, the notes in the currently selected tag, or search results.
-- **Note Editor** is the place where you write your notes. There is a **WYSIWYG editor** and a **Markdown editor** - click on **Code View** to switch between both! You may also use an [external editor](https://joplinapp.org/#external-text-editor) to edit notes. For example you can use something like Typora as an external editor and it will display the note as well as any embedded images.
+- **Note Editor** is the place where you write your notes. There is a **WYSIWYG editor** and a **Markdown editor** - click on **Code View** to switch between both! You may also use an [external editor](https://joplinapp.org/help/#external-text-editor) to edit notes. For example you can use something like Typora as an external editor and it will display the note as well as any embedded images.
 
 ## Writing notes in Markdown
 
@@ -42,7 +42,7 @@ This is a [link](https://joplinapp.org) and, finally, below is a horizontal rule
 
 * * *
 
-A lot more is possible including adding code samples, math formulae or checkbox lists - see the [Markdown documentation](https://joplinapp.org/#markdown) for more information.
+A lot more is possible including adding code samples, math formulae or checkbox lists - see the [Markdown documentation](https://joplinapp.org/help/#markdown) for more information.
 
 ## Organising your notes
 

readme/welcome/2_importing_and_exporting_notes.md

@@ -4,7 +4,7 @@
 
 Joplin was designed as a replacement for Evernote and so can import complete Evernote notebooks, as well as notes, tags, images, attached files and note metadata (such as author, geo-location, etc.) via ENEX files.
 
-To import Evernote data, first export your Evernote notebooks to ENEX files as described [here](https://help.evernote.com/hc/en-us/articles/209005557-How-to-back-up-export-and-restore-import-notes-and-notebooks). Then, on **desktop**, do the following: Open File > Import > ENEX and select your file. The notes will be imported into a new separate notebook. If needed they can then be moved to a different notebook, or the notebook can be renamed, etc. Read [more about Evernote import](https://joplinapp.org/#importing-from-evernote).
+To import Evernote data, first export your Evernote notebooks to ENEX files as described [here](https://help.evernote.com/hc/en-us/articles/209005557-How-to-back-up-export-and-restore-import-notes-and-notebooks). Then, on **desktop**, do the following: Open File > Import > ENEX and select your file. The notes will be imported into a new separate notebook. If needed they can then be moved to a different notebook, or the notebook can be renamed, etc. Read [more about Evernote import](https://joplinapp.org/help/#importing-from-evernote).
 
 # Importing from other apps