Use DDG for QR code, fix #14 and #16

config.toml

@@ -82,3 +82,5 @@ show_source = true
 host = "mstdn.social"
 # Used to determine who the original poster is
 user = "Daudix"
+# Display the QR code to Mastodon post (utilizes DuckDuckGo Instant Answer API)
+show_qr = true

sass/_nav.scss

@@ -53,7 +53,7 @@
 		#main-content {
 			background: var(--bg-color);
 			position: absolute;
-			transform: translateY(-200%);
+			transform: translateY(-300%);
 			z-index: 999;
 
 			&:focus {

sass/_qrcode.scss

@@ -1,10 +1,10 @@
 #qrcode {
 	background-color: white;
 	float: right;
-	height: 155px;
+	height: 160px;
 	margin: 3rem 0 0 1rem;
-	padding: 15px;
+	padding: 6px;
-	width: 155px;
+	width: 160px;
 
 	@media only screen and (max-width: 720px) {
 		& {

templates/partials/comments.html

@@ -15,8 +15,21 @@
 {% set id = page.extra.comments.id %}
 
 <section id="comments">
-	<img id="qrcode" class="no-hover pixels" alt="QR code to a Mastodon post"
+
-		src="https://api.qrserver.com/v1/create-qr-code/?data=https://{{ host }}/@{{ username }}/{{ id }}">
+	{% if config.extra.comments.show_qr %}
+		<img id="qrcode" class="no-hover pixels" alt="QR code to a Mastodon post" src="">
+		<script>
+			const apiUrl = "http://api.duckduckgo.com/?q=qr%20https://{{ host }}/@{{ username }}/{{ id }}&format=json";
+
+			fetch(apiUrl)
+				.then(response => response.json())
+				.then(data => {
+					const base64Data = data.Answer.match(/src="([^"]*)"/)[1];
+					document.getElementById("qrcode").src = base64Data;
+				})
+				.catch(error => console.error("Error fetching QR code:", error));
+		</script>
+	{% endif %}
 	<h2>Comments</h2>
 	<p>
 		You can respond to this <a href="https://{{ host }}/@{{ username }}/{{ id }}">post</a> with an account on the