Change to new comment system

* Update instant.page as well

assets/js/main.js

@@ -77,41 +77,7 @@ document.querySelectorAll('.post-year').forEach((ele)=> {
   });
 });
 
-// Load Comments
-//
-let commentsLoaded = false;
-let comments = document.getElementById('isso-thread');
-let commentsLoader = document.getElementById('comments-loader');
-
-const loadComments = () => {
-  let script = document.createElement("script");
-  script.setAttribute("type", "text/javascript");
-  script.setAttribute("src", "/js/embed.min.js");
-
-  // add relevant data-isso attributes here
-  script.setAttribute("data-isso", "https://comment.zak.ee");
-  script.setAttribute("data-isso-vote", "false");
-  // script.setAttribute("data-isso-max-comments-top", "10");
-  // script.setAttribute("data-isso-reveal-on-click", "10");
-  script.setAttribute("data-isso-css", "false");
-
-  document.getElementsByTagName("head")[0].appendChild(script);
-  commentsLoader.style.display = 'none';
-}
-
-// Load comments if the window is not scrollable
-if ((comments !== null) && (comments.offsetTop < window.innerHeight)) {
-  loadComments();
-  commentsLoaded = true;
-}
-
 window.addEventListener('scroll', throttle(() => {
-  if ((comments !== null) && (commentsLoaded == false)) {
-    if (window.pageYOffset + window.innerHeight > comments.offsetTop) {
-      loadComments();
-      commentsLoaded = true;
-    }
-  }
   if (scrollBtn !== null) {
     btnVisibility();
   }

assets/scss/partials/_comments.scss

@@ -1,159 +1,69 @@
-#isso-thread {
+#comments {
   margin-top: 3em;
-  font-size: 0.95rem;
   overflow-wrap: break-word;
-
-  > h4 {
-    color: var(--c-txt);
-  }
-}
-
-#isso-root {
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-// Comment Post Box
-//
-.isso-postbox {
-  padding: .7em;
-  background-color: var(--c-bg-alt);
-  border: 5px double var(--c-bg);
-  label {
-    font-size: .9em;
-  }
-}
-
-.isso-textarea {
-  min-height: 7em;
-  padding: .1em .3em;
-  background-color: var(--c-bg);
-}
-
-.isso-preview {
-  border: 1px dashed var(--c-txt-alt);
-  padding: .1em .3em;
-  .isso-text-wrapper {
-    margin: 0;
-  }
+  text-align: initial;
 }
 
-.isso-auth-section {
-  margin-top: .2rem;
+.comment-counter {
+  margin-left: .5em;
 }
 
-.isso-input-wrapper {
-  display: inline-block;
-  position: relative;
-  max-width: 25%;
-  margin: 0;
+.comment-form {
+  margin: 1em 0;
+  border: 3px double var(--c-txt-alt);
+  padding: .5em;
   > label {
-    display: inline-block;
-    font-size: .85em;
-    line-height: normal;
+    font-size: .9em;
   }
-  > input {
+  > button[type=submit] {
+    margin-top: 1em;
+    margin-bottom: .2em;
     width: 100%;
-    border-color: var(--c-bg-alt);
-    letter-spacing: normal;
-    padding: .1em .3em;
   }
 }
 
-.isso-post-action {
-  float: right;
-  margin: 1.7em 0 0 .2em;
-}
-
-.isso-notification-section input[type=checkbox] {
-  margin-right: .4em;
-  vertical-align: middle;
-}
-
-.isso-preview,
-.isso-form-wrapper input[name="edit"],
-.isso-preview-mode .isso-post-action > input[name="preview"],
-.isso-preview-mode .isso-textarea {
-  display: none;
-}
-.isso-preview-mode .isso-preview {
-  display: block;
-}
-.isso-preview-mode .isso-post-action > input[name="edit"] {
-  display: inline-block;
-}
-
-// Comments list
-//
-.isso-comment {
-  border-top: 1px solid var(--c-bg-alt);
-  clear: both;
-}
-
-.isso-follow-up {
-  padding-left: calc(7% + 1em);
+.comment-group {
+  margin-top: 1em;
+  article {
+    display: flex;
+    margin: 1em 0;
+    padding: 1em 0;
+    border-top: 1px solid var(--c-bg-alt);
+  }
 }
 
-.isso-avatar {
-  float: left;
-  margin-top: 1em;
+.comment-avatar {
+  margin-right: 1em;
   > img {
-    max-width: 2.5em;
+    width: 50px;
     height: auto;
     border-radius: 50%;
   }
 }
 
-.isso-text-wrapper {
-  margin: .8em 0 1em 3.5em;
-  display: flex;
-  flex-direction: column;
-}
-
-.isso-comment-header {
-  font-size: .9em;
-  line-height: normal;
-  .isso-spacer {
-    margin: 0 .5em;
-    color: var(--c-bg-alt);
-  }
-  .isso-permalink {
-    color: var(--c-txt-alt);
+.comment-wrapper {
+  position: relative;
+  width: 100%;
+  > header {
     font-size: .9em;
-    border: none;
+    .comment-date {
+      color: var(--c-txt-alt);
+    }
   }
-}
-
-.isso-comment-footer {
-  text-align: right;
-  font-size: .95em;
-  > a {
-    border: none;
-    margin-left: .5em;
+  > main {
+    margin: 1em 0;
+    overflow-wrap: anywhere;
   }
 }
 
-.isso-text {
-  text-align: initial;
-  a {
-    border-color: var(--c-txt-alt);
-    &:hover {
-      border-color: $accent;
-    }
-  }
-  p {
-    margin: .8em 0;
-  }
+.reply-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: .8em;
 }
 
 
-@media screen and (max-width:650px) {
-  .isso-input-wrapper {
-      display: block;
-      max-width: 100%;
-      margin-bottom: .3em;
-  }
-  .isso-post-action {
-    margin-top: 1em;
-  }
+.replies {
+  margin-left: calc(7% + 1em);
 }

assets/scss/style.scss

@@ -157,7 +157,17 @@ button, [type=button], [type=reset], [type=submit] {
 }
 
 input[type=text], input[type=email]{
+  width: 100%;
+  border: 1px solid var(--c-txt-alt);
+  border-width: 0 0 1px 0;
+}
+
+textarea {
+  width: 100%;
+  max-width: 100%;
+  padding: 2px 6px;
   border: 1px solid var(--c-txt-alt);
+
 }
 
 // Global layouts

layouts/_default/baseof.html

@@ -44,7 +44,7 @@
 	<div id="bg-img"></div>
 	{{ $script := resources.Get "js/main.js" | minify | fingerprint -}}
 	<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }}></script>
-	<script src="/js/instant.page-5.1.0.js" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
+	<script src="/js/instant.page-5.1.1.js" type="module" integrity="sha384-MWfCL6g1OTGsbSwfuMHc8+8J2u71/LA8dzlIN3ycajckxuZZmF+DNjdm7O6H3PSq"></script>
 </body>
 
 </html>

layouts/partials/comments.html

@@ -1,4 +1,2 @@
-		<div id="comments-loader">
-			<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="isso-thread"></div>
+<div id="comments"></div>
+<script type="module" crossorigin src="/js/comment.js"></script>