disqus comment system

README.md

@@ -13,10 +13,10 @@ Personal website created with Astro.
 - [x] Multilang web-site
 - [x] Prefetch pages via [Quicklink](https://getquick.link/)
 - [x] Form handling via [Netlify Forms](https://www.netlify.com/products/forms/)
-- [x] Comment system via [utterances](https://utteranc.es/)
+- [x] Comment system via [Disqus](https://disqus.com/)
 - [x] RSS Feed for articles
 - [x] SEO optimized
-- [x] Views counter 
+- [x] Views counter
 
 ## License
 

src/components/ArticleComments/ArticleComments.astro

@@ -1,29 +1,43 @@
 ---
-import UIString from "../UIString";
+interface Props {
+	url: string;
+	id: string;
+}
+
+const { url, id } = Astro.props as Props;
 ---
 
-<footer>
-	<h2><UIString key={"articlePost.comments"} /></h2>
-	<div id="comments"></div>
+<footer itemscope itemtype="http://schema.org/UserComments">
+	<div id="disqus_thread"></div>
 </footer>
 
-<script>
-	const $commentsWrapper = document.getElementById("comments");
-	const $commentsScript = document.createElement("script");
+<script define:vars={{ url, id }}>
+	var disqus_config = function () {
+		this.page.url = url;
+		this.page.identifier = id;
+	};
 
-	$commentsScript.async = true;
-	$commentsScript.src = "https://utteranc.es/client.js";
-	$commentsScript.setAttribute("repo", "sergeyyarkov/comments");
-	$commentsScript.setAttribute("issue-term", "title");
-	$commentsScript.setAttribute("label", "Comment");
-	$commentsScript.setAttribute("id", "utterances");
-	$commentsScript.setAttribute("crossorigin", "anonymous");
-
-	if (window.theme) {
-		$commentsScript.setAttribute("theme", window.theme === "dark" ? "dark-blue" : "github-light");
-	} else {
-		$commentsScript.setAttribute("theme", "github-light");
+	var e = document.getElementById("disqus_thread");
+	if ("IntersectionObserver" in window) {
+		var t = new IntersectionObserver((e) => {
+			e.forEach((e) => {
+				e.isIntersecting &&
+					((function () {
+						var e = document,
+							t = e.createElement("script");
+						(t.src = "https://yarkov-tech.disqus.com/embed.js"),
+							t.setAttribute("data-timestamp", +new Date()),
+							(e.head || e.body).appendChild(t);
+					})(),
+					t.unobserve(e.target));
+			});
+		});
+		t.observe(e);
 	}
 
-	if ($commentsWrapper) $commentsWrapper.appendChild($commentsScript);
+	window.addEventListener(
+		"onthemetoggled",
+		() =>
+			document.readyState == "complete" && setTimeout(() => DISQUS.reset({ reload: true, config: disqus_config }), 100)
+	);
 </script>

src/components/ArticlePost/ArticlePost.astro

@@ -14,6 +14,7 @@ export type Props = {
 };
 
 const { data, lang } = Astro.props as Props;
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
 const { slug, title, description, coverImage, tags, author, published_at } = data;
 const t = useTranslation(Astro);
 ---
@@ -73,7 +74,7 @@ const t = useTranslation(Astro);
 		</div>
 	</header>
 	<slot />
-	<ArticleComments />
+	<ArticleComments url={canonicalUrl.href} id={data.slug} />
 </article>
 
 <script define:vars={{ slug }}>

src/styles/theme.scss

@@ -144,4 +144,11 @@
 	& body > main svg:not([data-filter="none"]) {
 		filter: var(--icon-filter);
 	}
+
+	/*
+		https://sergeyski.com/css-color-scheme-and-iframes-lessons-learned-from-disqus-background-bug/
+	*/
+	iframe[src*="disqus.com"] {
+		color-scheme: light;
+	}
 }