From fb6069de6da793b112fa8729a6512c4cdc95e9a4 Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Sun, 9 Jan 2022 17:49:37 +0000
Subject: [PATCH] Doc: Add Twitter link in header and fixed donate links

---
 Assets/WebsiteAssets/css/site.css             | 36 ++++++++++++++++++-
 .../templates/partials/footer.mustache        | 11 +-----
 .../templates/partials/navbar.mustache        |  7 ++--
 .../templates/partials/socialFeeds.mustache   | 10 ++++++
 packages/tools/website/build.ts               | 16 ++++++---
 5 files changed, 63 insertions(+), 17 deletions(-)
 create mode 100644 Assets/WebsiteAssets/templates/partials/socialFeeds.mustache

diff --git a/Assets/WebsiteAssets/css/site.css b/Assets/WebsiteAssets/css/site.css
index 1295166350..65f299dce8 100644
--- a/Assets/WebsiteAssets/css/site.css
+++ b/Assets/WebsiteAssets/css/site.css
@@ -728,6 +728,23 @@ footer .bottom-links-row p {
 	}
 }
 
+/*****************************************************************
+ 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 12px;
+		font-size: 15px;
+	}
+}
+
 /*****************************************************************
  NARROW VIEW
  - Top right menu is displayed
@@ -740,6 +757,23 @@ 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-reddit,
+	#menu-mobile .social-links .social-link-patreon {
+		display: none;
+	}
+
 	.front-page h1 {
 		font-size: 2.5em;
 	}
@@ -857,7 +891,7 @@ footer .bottom-links-row p {
 	}
 
 	#menu-mobile .button-link {
-		padding: 10px 15px;
+		padding: 4px 12px;
 		font-size: 16px;
 		margin-left: 0px;
 	}
diff --git a/Assets/WebsiteAssets/templates/partials/footer.mustache b/Assets/WebsiteAssets/templates/partials/footer.mustache
index ef64830c09..d883c711e5 100644
--- a/Assets/WebsiteAssets/templates/partials/footer.mustache
+++ b/Assets/WebsiteAssets/templates/partials/footer.mustache
@@ -1,15 +1,6 @@
 <footer class="darkblue-bg">
 	<div class="container">
-		<div class="row">
-			<div class="col-12 col-md-12 social-links">
-				<a href="https://twitter.com/joplinapp" title="Joplin Twitter feed"><i class="fab fa-twitter"></i></a>
-				<a href="https://mastodon.social/@joplinapp" title="Joplin Mastodon feed"><i class="fab fa-mastodon"></i></a>
-				<a href="https://www.patreon.com/joplin" title="Joplin Patreon"><i class="fab fa-patreon"></i></a>
-				<a href="https://discord.gg/VSj7AFHvpq" title="Joplin Discord chat"><i class="fab fa-discord"></i></a>
-				<a href="https://www.reddit.com/r/joplinapp/" title="Joplin Subreddit"><i class="fab fa-reddit"></i></a>
-				<a href="https://github.com/laurent22/joplin/" title="Joplin GitHub repository"><i class="fab fa-github"></i></a>
-			</div>
-		</div>
+		{{> socialFeeds}}
 
 		<div class="row bottom-links-row">
 			<div class="col-12 col-md-6">
diff --git a/Assets/WebsiteAssets/templates/partials/navbar.mustache b/Assets/WebsiteAssets/templates/partials/navbar.mustache
index a34cd2c647..d75f7c4e73 100644
--- a/Assets/WebsiteAssets/templates/partials/navbar.mustache
+++ b/Assets/WebsiteAssets/templates/partials/navbar.mustache
@@ -12,7 +12,8 @@
 				</a>
 			</div>
 			<div class="col-9 text-right d-none d-md-block">
-				<a href="{{baseUrl}}/news/" class="fw500">What's New</a>
+				<a href="https://twitter.com/joplinapp" title="Joplin Twitter feed" class="fw500"><i class="fab fa-twitter"></i></a>
+				<a href="{{baseUrl}}/news/" class="fw500">News</a>
 				<a href="{{baseUrl}}/help/" class="fw500">Help</a>
 				<a href="{{forumUrl}}" class="fw500">Forum</a>
 				{{#showJoplinCloudLinks}}
@@ -43,7 +44,7 @@
 						</div>
 
 						<div class="text-center menu-mobile-top">
-							<a href="{{baseUrl}}/news/" class="fw500 mobile-menu-link">What's New</a>
+							<a href="{{baseUrl}}/news/" class="fw500 mobile-menu-link">News</a>
 							<a href="{{baseUrl}}/help/" class="fw500 mobile-menu-link">Help</a>
 							<a href="{{forumUrl}}" class="fw500 mobile-menu-link">Forum</a>
 						</div>
@@ -59,6 +60,8 @@
 					{{#showToc}}
 						<div id="toc-mobile">{{{tocHtml}}}</div>
 					{{/showToc}}
+
+					{{> socialFeeds}}
 					
 					<div>
 						<p class="light-blue mobile-menu-link-bottom text-center">
diff --git a/Assets/WebsiteAssets/templates/partials/socialFeeds.mustache b/Assets/WebsiteAssets/templates/partials/socialFeeds.mustache
new file mode 100644
index 0000000000..ced1cc1fea
--- /dev/null
+++ b/Assets/WebsiteAssets/templates/partials/socialFeeds.mustache
@@ -0,0 +1,10 @@
+<div class="row">
+	<div class="col-12 col-md-12 social-links">
+		<a class="social-link-twitter" href="https://twitter.com/joplinapp" title="Joplin Twitter feed"><i class="fab fa-twitter"></i></a>
+		<a class="social-link-mastodon" href="https://mastodon.social/@joplinapp" title="Joplin Mastodon feed"><i class="fab fa-mastodon"></i></a>
+		<a class="social-link-patreon" href="https://www.patreon.com/joplin" title="Joplin Patreon"><i class="fab fa-patreon"></i></a>
+		<a class="social-link-discord" href="https://discord.gg/VSj7AFHvpq" title="Joplin Discord chat"><i class="fab fa-discord"></i></a>
+		<a class="social-link-reddit" href="https://www.reddit.com/r/joplinapp/" title="Joplin Subreddit"><i class="fab fa-reddit"></i></a>
+		<a class="social-link-github" href="https://github.com/laurent22/joplin/" title="Joplin GitHub repository"><i class="fab fa-github"></i></a>
+	</div>
+</div>
diff --git a/packages/tools/website/build.ts b/packages/tools/website/build.ts
index 4797676bd6..4136ea3914 100644
--- a/packages/tools/website/build.ts
+++ b/packages/tools/website/build.ts
@@ -167,6 +167,10 @@ function makeHomePageMd() {
 	// while MarkdownIt doesn't and will in fact display the \. So we remove it here.
 	md = md.replace(/\\\| bash/g, '| bash');
 
+	// We strip-off the donate links because they are added back (with proper
+	// classes and CSS).
+	md = md.replace(donateLinksRegex_, '');
+
 	return md;
 }
 
@@ -212,14 +216,19 @@ async function main() {
 	const assetUrls = await getAssetUrls();
 
 	const readmeMd = makeHomePageMd();
-
-	// await updateDownloadPage(readmeMd);
+	const donateLinksMd = await getDonateLinks();
 
 	// =============================================================
 	// HELP PAGE
 	// =============================================================
 
-	renderPageToHtml(readmeMd, `${docDir}/help/index.html`, { sourceMarkdownFile: 'README.md', partials, sponsors, assetUrls });
+	renderPageToHtml(readmeMd, `${docDir}/help/index.html`, {
+		sourceMarkdownFile: 'README.md',
+		donateLinksMd,
+		partials,
+		sponsors,
+		assetUrls,
+	});
 
 	// =============================================================
 	// FRONT PAGE
@@ -279,7 +288,6 @@ async function main() {
 
 	const mdFiles = glob.sync(`${readmeDir}/**/*.md`).map((f: string) => f.substr(rootDir.length + 1));
 	const sources = [];
-	const donateLinksMd = await getDonateLinks();
 
 	const makeTargetFilePath = (input: string): string => {
 		if (isNewsFile(input)) {