send 404 error report

3 months ago · 88d7082eac
parent 3266a35212
commit 88d7082eac
2 changed files with 26 additions and 2 deletions
--- a/content/404.html
+++ b/content/404.html
@ -4,7 +4,7 @@ title: ✋ Error 404 🚨
 image: /404.webp
 layout: ~
 todo:
-  - automatically detect language
+	- automatically detect language
 eleventyExcludeFromCollections: true
 ---
 <!DOCTYPE html>
@ -12,12 +12,30 @@ eleventyExcludeFromCollections: true

 {% render 'head.html', latex: latex, date: date, updated: updated, title: title, description: description, primary: primary, lang: lang, alternate: alternate, accounts: accounts, site: site, url: page.url, layout: layout, isNote: isNote, isPost: isPost, tommi: tommi, image: image %}

+<script>
+window.onload = function(){
+	const pageNotFound = window.location.href.replace(/https:\/\/tommi\.space/g, '');
+	const errorReportUri = '{{ site.encoded_mailto }}?subject=%5Btommi.space%5D%20%5B404%5D%20' + pageNotFound;
+	document.getElementById('error-report').setAttribute('href', errorReportUri);
+};
+</script>
+
 <body class='landing'>
 	<a class='vertical flex' href='/home' onClick='javascript:history.go(-1)'>
 		<h1>{{ title }}</h1>
 		<div class='center box'>
 			Sorry, <strong>page not found 🤯</strong>.<br>
-			Click anywhere<noscript> to go back home</noscript>.
+			Click anywhere to go back<noscript> home</noscript>.
 		</div>
 	</a>
+	<div class='banner box'>
+		<h4>💡 Possible solutions:</h4>
+		<ul>
+			<li>Make sure that the address was <strong>correctly typed</strong></li>
+			<li>Make sure that all of the characters of the address are <strong>downcase</strong></li>
+			<li>
+				<a href='{{ site.encoded_mailto }}?subject=%5Btommi.space%5D%20%5B404%5D&text=The%20page%20I%20cannot%20find$20is$20%5BPAGEURL%5D' id='error-report' title='Send me an error report'>Email me <strong>an error report</strong></a>
+			</li>
+		</ul>
+	</div>
 </body></html>
--- a/styles/style.scss
+++ b/styles/style.scss
@ -823,6 +823,12 @@ h4 {
 	}
 }

+.banner {
+	position: fixed;
+	bottom: 0;
+	right: 0;
+}
+
 #latest-post {
 	position: relative;
 	h2.button {