Don't always embed Disqus

_includes/comments.liquid

@@ -11,19 +11,38 @@
 			{% assign disqus_id = site.xaymar.comments.disqus.identifier %}
 		<div id="disqus_thread"></div>
 		<script>
-			var disqus_config = function () {
+			function load_disqus_comments() {
-				this.page.url = "{{ disqus_url }}/";
+				var disqus_config = function () {
-				this.page.identifier = "{{ disqus_page_url }}/";
+					this.page.url = "{{ disqus_url }}/";
-			};
+					this.page.identifier = "{{ disqus_page_url }}/";
-			(function() { // DON'T EDIT BELOW THIS LINE
+				};
-			var d = document, s = d.createElement('script');
+
-			s.defer = true;
+				document.querySelector(".comments > .content > .privacy").style.display = "none";
-			s.src = 'https://{{ disqus_id }}.disqus.com/embed.js';
+
-			s.setAttribute('data-timestamp', +new Date());
+				var d = document, s = d.createElement('script');
-			(d.head || d.body).appendChild(s);
+				s.defer = true;
-			})();
+				s.src = 'https://{{ disqus_id }}.disqus.com/embed.js';
+				s.setAttribute('data-timestamp', +new Date());
+				(d.head || d.body).appendChild(s);
+			}
 		</script>
 		<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+		<div class="privacy">
+			<button class="once">Allow embedded Disqus widget once</button>
+			<button class="always">Always allow embedded Disqus Widget</button>
+		</div>
+		<script>
+			document.querySelector(".comments > .content > .privacy > .once").addEventListener("click", (ev) => {
+				load_disqus_comments();
+			});
+			document.querySelector(".comments > .content > .privacy > .always").addEventListener("click", (ev) => {
+				document.cookie = "allow_disqus_embed=true";
+				load_disqus_comments();
+			});
+			if (document.cookie.indexOf("allow_disqus_embed") !== -1) {
+				load_disqus_comments();
+			}
+		</script>
 		{% endif %}
 	</div>
 </div>

_sass/_base.scss

@@ -43,6 +43,10 @@ $theme-breadcrumbs-link-color-active: hsl($theme-hue, 100%, 85%);
 $theme-footer-background: hsl($theme-hue, 33%, 10.0%);
 $theme-footer-color: hsl($theme-hue, 0%, 80%);
 $theme-code-background: hsl($theme-hue, 50%, 5%);
+$theme-button-background: hsl($theme-hue, 100%, 30.0%);
+$theme-button-background-active: hsl($theme-hue, 100%, 50%);
+$theme-button-color: hsl($theme-hue, 0%, 85%);
+$theme-button-color-active: hsl($theme-hue, 100%, 85%);
 
 * {
 	box-sizing: border-box;
@@ -73,6 +77,21 @@ a.active {
 	text-decoration: inherit;
 }
 
+button {
+	background: $theme-button-background;
+	color: $theme-button-color;
+	border: 0;
+	cursor: pointer;
+}
+
+button.focus,
+button.active,
+button.visited {
+	background: $theme-button-background-active;
+	color: $theme-button-color-active;
+	border: 0;
+}
+
 @import "_header.scss";
 @import "_content.scss";
 @import "_footer.scss";

_sass/_comments.scss

@@ -26,3 +26,31 @@
 	padding: 1rem 1rem;
 	display: flow-root;
 }
+
+.comments > .content > .privacy {
+	margin: 0px;
+	padding: 0px;
+	width: 100%;
+	font-weight: bold;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+	column-gap: .5rem;
+}
+
+.comments > .content > .privacy > button {
+	display: block;
+	padding: .5rem;
+	font-size: 1.5rem;
+
+	background: $theme-button-background;
+	color: $theme-button-color;
+	border: 0;
+}
+
+.comments > .content > .privacy > button {
+	display: block;
+	padding: .5rem;
+	font-size: 1.5rem;
+	font-variant: small-caps;
+	font-weight: bold;
+}