fixing disqus comments thread not loading

layouts/partials/comments/provider/disqus.html

@@ -1,22 +1,61 @@
+{{- $pc := .Site.Config.Privacy.Disqus -}}
+{{- $disqusjs := .Site.Params.Comments.disqusjs -}}
+{{- if and (not $pc.Disable) (and $disqusjs.Shortname $disqusjs.ApiKey) -}}
+
+{{- $style := resources.Get "scss/partials/comments/disqusjs.scss" | resources.ToCSS | minify -}}
+<link rel="stylesheet" href="{{ $style.RelPermalink }}">
+
 <div class="disqus-container">
-    {{ template "_internal/disqus.html" . }}
+    <div id="disqus_thread"></div>
-</div>
+    <script type="application/javascript">
-
+        let disqusjs;
-<style>
+        function loadDisqusJS() {
-    .disqus-container {
+            disqusjs = new DisqusJS({
-        background-color: var(--card-background);
+                shortname: {{ $disqusjs.Shortname }},
-        border-radius: var(--card-border-radius);
+                siteName: {{ .Site.Title }},
-        box-shadow: var(--shadow-l1);
+                apikey: {{ $disqusjs.ApiKey }},
-        padding: var(--card-padding);
+                {{ with $disqusjs.ApiUrl }}api: {{ . }},{{ end }}
-    }
+                {{ with $disqusjs.Admin }}admin: {{ . }},{{ end }}
-</style>
+                {{ with $disqusjs.AdminLabel }}adminLabel: {{ . }}{{ end }}
-
-<script>
-    window.addEventListener('onColorSchemeChange', (e) => {
-        if (typeof DISQUS == 'object') {
-            DISQUS.reset({
-                reload: true
             });
         }
+
+        function lazyLoadDisqusJS() {
+            if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
+                document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
+                return;
+            }
+
+            let d = document.createElement('script');
+            d.src = 'https://cdn.jsdelivr.net/npm/disqusjs@1.3/dist/disqus.js';
+            d.async = false;
+            document.body.appendChild(d);
+            d.onload = () => {
+                loadDisqusJS();
+                window.addEventListener('onColorSchemeChange', (e) => {
+                    if (disqusjs) {
+                        loadDisqusJS();
+                    }
                 })
+            }
+        }
+
+        let runningOnBrowser = typeof window !== "undefined";
+        let isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);
+        let supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
+
+        if (!isBot && supportsIntersectionObserver) {
+            let disqus_observer = new IntersectionObserver(function(entries) {
+                if (entries[0].isIntersecting) {
+                    lazyLoadDisqusJS();
+                    disqus_observer.disconnect();
+                }
+            });
+            disqus_observer.observe(document.getElementById('disqus_thread'));
+        } else {
+            lazyLoadDisqusJS();
+        }
     </script>
+    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+</div>
+{{- end -}}