From 02b301eb87b18d562599652238c009907fbc4c74 Mon Sep 17 00:00:00 2001
From: Stuart Breckenridge <stuart.breckenridge@icloud.com>
Date: Thu, 16 Sep 2021 17:00:25 +0800
Subject: [PATCH] Tidies up external links

---
 Promenade.nnwtheme/Info.plist     |  2 +-
 Promenade.nnwtheme/stylesheet.css |  6 ++++++
 Promenade.nnwtheme/template.html  | 15 ++++++++++++---
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/Promenade.nnwtheme/Info.plist b/Promenade.nnwtheme/Info.plist
index db06b88..9d5b535 100644
--- a/Promenade.nnwtheme/Info.plist
+++ b/Promenade.nnwtheme/Info.plist
@@ -11,6 +11,6 @@
 	<key>CreatorName</key>
 	<string>Stuart Breckenridge</string>
 	<key>Version</key>
-	<integer>9</integer>
+	<integer>10</integer>
 </dict>
 </plist>
diff --git a/Promenade.nnwtheme/stylesheet.css b/Promenade.nnwtheme/stylesheet.css
index 4d1cb0b..2f6f1fc 100644
--- a/Promenade.nnwtheme/stylesheet.css
+++ b/Promenade.nnwtheme/stylesheet.css
@@ -18,6 +18,12 @@ body {
 	padding-bottom: 1em;
 }
 
+.svg-inline--fa {
+	height: 1em;
+	width: 1em;
+	vertical-align: middle;
+}
+
 a {
 	text-decoration: none;
 	font-weight: bold;
diff --git a/Promenade.nnwtheme/template.html b/Promenade.nnwtheme/template.html
index f8dc22a..5908d8c 100644
--- a/Promenade.nnwtheme/template.html
+++ b/Promenade.nnwtheme/template.html
@@ -16,10 +16,19 @@ <h1>[[title]]</h1>
 </div>
 </article>
 <script type="text/javascript">
+	/* 
+	The arrow-circle-right SVG is provided by Font Awesome under the Creative Commons Attribution 4.0 International License.
+	For more details view the license here: https://fontawesome.com/license
+	*/
 	let externalLinkElement = document.body.getElementsByClassName('externalLink')[0].querySelectorAll('span a')[0];
-	if (externalLinkElement) {
-		let host = externalLinkElement.hostname;
-		externalLinkElement.innerHTML = host;
+	let edit = document.body.getElementsByClassName('externalLink')[0].querySelectorAll('span')[0];
+	if (edit) {
+		edit.innerHTML = edit.innerHTML.replace('Link: ', '');
+		let aLink = edit.querySelectorAll('a')[0];
+		if (aLink) {
+			let host = aLink.hostname;
+			aLink.innerHTML = host + " " + '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-circle-right" class="svg-inline--fa fa-arrow-circle-right fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"></path></svg>';
+		}
 	}
 </script>