✨ feat: add support for Isso comments

static/js/isso.js

@@ -0,0 +1,80 @@
+// Function to initialise Isso.
+function initIsso() {
+    // Get the div that will contain the comments.
+    const commentsDiv = document.querySelector('.comments');
+    if (commentsDiv) {
+        // Get the lazy-loading setting from the div.
+        const lazyLoading = commentsDiv.getAttribute('data-lazy-loading') === "true";
+
+        // If lazy-loading is enabled, create an Intersection Observer and use it.
+        if (lazyLoading) {
+            const observer = new IntersectionObserver(entries => {
+                // Loop over the entries.
+                entries.forEach(entry => {
+                    // If the element is in the viewport, initialize Isso.
+                    if (entry.isIntersecting) {
+                        loadIsso(commentsDiv);
+                        // Once the Isso is loaded, we don't need to observe the element anymore.
+                        observer.unobserve(commentsDiv);
+                    }
+                });
+            });
+
+            // Start observing the comments div.
+            observer.observe(commentsDiv);
+        } else {
+            // If lazy-loading is not enabled, initialise Isso immediately.
+            loadIsso(commentsDiv);
+        }
+    }
+}
+
+// Function to load Isso.
+function loadIsso(commentsDiv) {
+    // Get the various settings from data attributes on the div.
+    const endpointUrl = commentsDiv.getAttribute('data-endpoint-url');
+    const pageId = commentsDiv.getAttribute('data-isso-id');
+    const title = commentsDiv.getAttribute('data-title');
+    const lang = commentsDiv.getAttribute('data-page-language');
+    const maxCommentsTop = commentsDiv.getAttribute('data-max-comments-top');
+    const maxCommentsNested = commentsDiv.getAttribute('data-max-comments-nested');
+    const avatar = commentsDiv.getAttribute('data-avatar');
+    const voting = commentsDiv.getAttribute('data-voting');
+    const hashes = commentsDiv.getAttribute('data-page-author-hashes');
+
+    // Create a new script tag that will load the Isso script.
+    const script = document.createElement('script');
+    script.src = endpointUrl + 'js/embed.min.js';
+    script.async = true;
+
+    // Set the various settings as data attributes on the script tag.
+    script.setAttribute('data-isso', endpointUrl);
+    script.setAttribute('data-isso-lang', lang);
+    script.setAttribute('data-isso-max-comments-top', maxCommentsTop);
+    script.setAttribute('data-isso-avatar', avatar);
+    script.setAttribute('data-isso-vote', voting);
+    script.setAttribute('data-isso-page-author-hashes', hashes);
+    script.setAttribute('data-isso-css', 'false');
+    
+    // Set the id and data-isso-id of the Isso thread.
+    const section = document.createElement('section');
+    section.id = 'isso-thread';
+    section.setAttribute('data-isso-id', pageId);
+    section.setAttribute('data-title', title);
+    commentsDiv.appendChild(section);
+
+    // Add the script tag to the div.
+    commentsDiv.appendChild(script);
+
+    // Create a link tag for the Isso CSS.
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = '/isso.min.css';
+
+    // Add the CSS link tag to the head of the document.
+    document.head.appendChild(link);
+}
+
+// Initialize Isso.
+initIsso();

static/js/isso.min.js

@@ -0,0 +1 @@
+function initIsso(){const e=document.querySelector(".comments");if(e)if("true"===e.getAttribute("data-lazy-loading")){const a=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting&&(loadIsso(e),a.unobserve(e))})});a.observe(e)}else loadIsso(e)}function loadIsso(t){var e=t.getAttribute("data-endpoint-url"),a=t.getAttribute("data-isso-id"),s=t.getAttribute("data-title"),i=t.getAttribute("data-page-language"),o=t.getAttribute("data-max-comments-top"),r=(t.getAttribute("data-max-comments-nested"),t.getAttribute("data-avatar")),d=t.getAttribute("data-voting"),n=t.getAttribute("data-page-author-hashes"),u=document.createElement("script"),e=(u.src=e+"js/embed.min.js",u.async=!0,u.setAttribute("data-isso",e),u.setAttribute("data-isso-lang",i),u.setAttribute("data-isso-max-comments-top",o),u.setAttribute("data-isso-avatar",r),u.setAttribute("data-isso-vote",d),u.setAttribute("data-isso-page-author-hashes",n),u.setAttribute("data-isso-css","false"),document.createElement("section")),i=(e.id="isso-thread",e.setAttribute("data-isso-id",a),e.setAttribute("data-title",s),t.appendChild(e),t.appendChild(u),document.createElement("link"));i.rel="stylesheet",i.type="text/css",i.href="/isso.min.css",document.head.appendChild(i)}initIsso();

static/js/themeSwitcher.js

@@ -13,7 +13,7 @@ function setTheme(theme, saveToLocalStorage = false) {
         localStorage.setItem("theme", theme);
     }
 
-    // Dispatch a custom event for utterances and giscus.
+    // Dispatch a custom event for comment systems.
     const event = new CustomEvent("themeChanged", {
         detail: { theme: theme }
     });