From 4244f9f0142d3a2db1e102d4da242bd2fde74bb0 Mon Sep 17 00:00:00 2001
From: Oliver Booth <me@olivr.me>
Date: Thu, 10 Aug 2023 16:14:30 +0100
Subject: [PATCH] fix: add disqus comment counter after posts have loaded

---
 OliverBooth/Pages/Blog/Index.cshtml |  4 +---
 src/ts/UI.ts                        | 11 +++++++++++
 src/ts/app.ts                       |  2 ++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/OliverBooth/Pages/Blog/Index.cshtml b/OliverBooth/Pages/Blog/Index.cshtml
index 62dc808..518bab7 100644
--- a/OliverBooth/Pages/Blog/Index.cshtml
+++ b/OliverBooth/Pages/Blog/Index.cshtml
@@ -23,7 +23,7 @@
             {{#if post.enable_comments}}
                 <span> &bull; </span>
                 <a href="{{post.url}}#disqus_thread" data-disqus-identifier="{{post.disqus_identifier}}">
-                    0 Comments
+                    Loading comment count &hellip;
                 </a>
             {{/if}}
         </p>
@@ -39,5 +39,3 @@
         {{/if}}
     </div>
 </script>
-
-<script id="dsq-count-scr" src="https://oliverbooth-dev.disqus.com/count.js" async></script>
\ No newline at end of file
diff --git a/src/ts/UI.ts b/src/ts/UI.ts
index d045a11..8a93c78 100644
--- a/src/ts/UI.ts
+++ b/src/ts/UI.ts
@@ -10,6 +10,17 @@ class UI {
         return document.querySelector("#blog-post-template");
     }
 
+    /**
+     * Creates a <script> element that loads the Disqus comment counter.
+     */
+    public static createDisqusCounterScript(): HTMLScriptElement {
+        const script = document.createElement("script");
+        script.id = "dsq-count-scr";
+        script.src = "https://oliverbooth-dev.disqus.com/count.js";
+        script.async = true;
+        return script;
+    }
+
     /**
      * Forces all UI elements to update.
      */
diff --git a/src/ts/app.ts b/src/ts/app.ts
index afd8fe9..4fcebbe 100644
--- a/src/ts/app.ts
+++ b/src/ts/app.ts
@@ -47,6 +47,8 @@ declare const Handlebars: any;
                 i += 4;
             }
 
+            document.body.appendChild(UI.createDisqusCounterScript());
+
             const spinner = document.querySelector("#blog-loading-spinner");
             if (spinner) {
                 spinner.classList.add("removed");