Switch to isso comment system

assets/js/main.js

@@ -2,38 +2,6 @@
  * Utils
  */
 
-// Load and run script via AJAX
-//
-const loadScript = (source, beforeEl, async = true, defer = true) => {
-  return new Promise((resolve, reject) => {
-    let script = document.createElement('script');
-    const prior = beforeEl || document.getElementsByTagName('script')[0];
-
-    script.async = async;
-    script.defer = defer;
-
-    function onloadHander(_, isAbort) {
-      if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) {
-        script.onload = null;
-        script.onreadystatechange = null;
-        script = undefined;
-
-        if (isAbort) {
-          reject();
-        } else {
-          resolve();
-        }
-      }
-    }
-
-    script.onload = onloadHander;
-    script.onreadystatechange = onloadHander;
-
-    script.src = source;
-    prior.parentNode.insertBefore(script, prior);
-  });
-}
-
 // Throttle
 //
 const throttle = (callback, limit) => {
@@ -112,23 +80,22 @@ document.querySelectorAll('.post-year').forEach((ele)=> {
 // Load Comments
 //
 let commentsLoaded = false;
-let comments = document.getElementById('comments');
+let comments = document.getElementById('isso-thread');
 let commentsLoader = document.getElementById('comments-loader');
 
-const valineJsUrl = 'https://cdn.jsdelivr.net/npm/valine@1.4.18/dist/Valine.min.js';
-
 const loadComments = () => {
-  loadScript(valineJsUrl).then(() => {
-    new Valine({
-      el: '#comments',
-      appId: 'QfBLso0johYg7AXtV9ODU6FC-gzGzoHsz',
-      appKey: 'J1tpEEsENa48aLVsPdvwMP14',
-      placeholder: '说点什么吧'
-    });
-    commentsLoader.style.display = 'none';
-  }, () => {
-    console.log('Failed to Load Valine.min.js');
-  });
+  let script = document.createElement("script");
+  script.setAttribute("type", "text/javascript");
+  script.setAttribute("src", "https://comment.ojbk.im/js/embed.min.js");
+
+  // add relevant data-isso attributes here
+  script.setAttribute("data-isso", "https://comment.ojbk.im");
+  script.setAttribute("data-isso-vote", "false");
+  script.setAttribute("data-isso-max-comments-top", "10");
+  script.setAttribute("data-isso-reveal-on-click", "10");
+
+  document.getElementsByTagName("head")[0].appendChild(script);
+  commentsLoader.style.display = 'none';
 }
 
 // Load comments if the window is not scrollable

assets/scss/partials/_comments.scss

@@ -1,22 +1,93 @@
-#comments {
+#site-main > #isso-thread {
   margin-top: 3em;
   font-size: 1em;
 
-  .vwrap {
-    border: 2px solid var(--c-txt-alt);
+  > h4 {
+    color: var(--c-txt);
+  }
+  .isso-comment {
+    border-color: var(--c-bg-alt);
+  }
+
+  .isso-postbox {
+    max-width: unset;
+    margin-bottom: 1em;
+  }
+
+  .isso-preview {
+    color: #545250;
+  }
+
+  .isso-textarea {
+    border-radius: 0;
+    border-color: transparent;
+    color: var(--c-txt);
+    background-color: var(--c-bg-alt);
+    box-shadow: none;
+  }
+
+  .isso-input-wrapper {
+    > label {
+      font-size: .85em;
+      color: var(--c-txt-alt);
+    }
+    > input {
+      width: 100%;
+      background-color: var(--c-bg-alt);
+      line-height: unset;
+      border: 1px solid var(--c-bg);
+      border-radius: 0;
+      box-shadow: none;
+    }
   }
-  .vat {
+
+  .isso-post-action > input {
+    margin-top: .2em;
+    padding: .4em;
+    border-radius: 0;
+    border-color: var(--c-bg-alt);
     color: var(--c-txt);
+    background: transparent;
+    box-shadow: none;
     &:hover {
-      color: $accent;
+      border-color: $accent;
     }
+    &:active {
+      border-style: dashed;
+    }
+  }
+
+  .isso-notification-section > label {
+    font-size: .8em;
+    color: var(--c-txt-alt);
+    vertical-align: middle;
+    &> input {
+      margin-right: .5em;
+    }
+  }
+
+  .isso-avatar > img {
+    max-width: 3em;
+    height: auto;
+  }
+
+  .isso-text {
+    text-align: initial;
   }
 
-  .vquote {
+  a.isso-reply,
+  a.isso-permalink {
     border: none;
+    &:hover {
+      color: $accent!important;
+    }
   }
-  .vh {
-    border-color: var(--c-bg-alt);
-    border-width: 2px;
+
+
+  .isso-author {
+    color: var(--c-txt);
+  }
+  a.isso-author:hover {
+    color: $accent!important;
   }
 }

assets/scss/partials/_footer.scss

@@ -11,7 +11,7 @@ p.site-copy {
 }
 
 .site-nav > span {
-  margin: 0 .15em;
+  margin: 0 .2em;
   color: var(--c-txt-alt);
   &:last-child{
     display: none;

assets/scss/partials/_single.scss

@@ -220,7 +220,7 @@ hr.post-end {
   margin-bottom: 2em;
   font-size: 1.2em;
   padding: .5em;
-  background: var(--c-bg-alt);
+  border: 1px solid $accent;
   > a {
     flex-basis: 50%;
     flex-grow: 1;

layouts/partials/comments.html

@@ -1,4 +1,4 @@
 		<div id="comments-loader" style="display: none;">
 			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle animated infinite bounce"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg> 评论加载中……
 		</div>
-		<div id="comments"></div>
+		<div id="isso-thread"></div>