moved comments area to new <bt-comments> web component

traceypooh · Jan 27, 2025 · 6773c93 · 6773c93
1 parent 04dad83
commit 6773c93
Show file tree

Hide file tree

Showing 8 changed files with 388 additions and 406 deletions.
diff --git a/css/future-imperfect.css b/css/future-imperfect.css
@@ -78,14 +78,6 @@ video {
   vertical-align: middle;
   max-width: 100%; }
 
-/*
-* Remove default fieldset styles.
-*/
-fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0; }
-
 /*
 * Allow only vertical resizing of textareas.
 */
@@ -797,132 +789,7 @@ figcaption {
   margin: -0.25em 0 0.25em 0;
   width: 0; }
 
-/* Staticman Comments - Form */
-.new-comment.loading {
-  opacity: 0.5; }
-
-.new-comment .reply-notice .comment-avatar {
-  width: 2em;
-  height: 2em;
-  margin: 0 0.6em; }
-
-.new-comment .reply-notice .reply-close-btn {
-  padding: unset;
-  border: none;
-  vertical-align: top;
-  font-size: 1em;
-  line-height: 0;
-  height: 0; }
-  .new-comment .reply-notice .reply-close-btn:hover {
-    border: none; }
-
-.new-comment .reply-notice .reply-name {
-  vertical-align: middle; }
-  .new-comment .reply-notice .reply-name::before {
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    content: "\f3e5";
-    margin-right: .5em;
-    width: 20px; }
-
-.submit-success {
-  border: 1px solid #2eb8ac;
-  background: rgba(46, 184, 172, 0.25); }
-
-.submit-failed {
-  border: 1px solid #b82e6e;
-  background: rgba(184, 46, 110, 0.25); }
 
-/* Staticman Comments - Content */
-.comment header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  background: #ededed;
-  align-items: center;
-  border-radius: 50px 0 0 50px; }
-  @media (min-width: 375px) {
-    .comment header {
-      border-radius: 0; } }
-  .comment header div {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    align-items: center; }
-    @media (min-width: 375px) {
-      .comment header div {
-        flex-direction: row; } }
-.comment.comment-reply {
-  margin-left: 1.875em; }
-  @media (min-width: 375px) {
-    .comment.comment-reply {
-      margin-left: 3.75em; } }
-.comment-author-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center; }
-  @media (min-width: 375px) {
-    .comment-author-container {
-      align-items: flex-start;
-      flex-grow: 1; } }
-  @media (min-width: 768px) {
-    .comment-author-container {
-      flex-direction: row;
-      align-items: center; } }
-.comment-avatar {
-  margin: 0 0 0 1em;
-  width: 3.75em;
-  height: 3.75em;
-  flex-grow: 0; }
-  @media (min-width: 375px) {
-    .comment-avatar {
-      margin: 0 .5em 0 0; }
-      .comment-avatar.circle {
-        -webkit-clip-path: none;
-        clip-path: none; } }
-.comment-author {
-  font-size: 0.9em;
-  margin: 0; }
-  @media (min-width: 768px) {
-    .comment-author {
-      margin-right: .5em;
-      padding-right: .5em;
-      border-right: 1px solid rgba(161, 161, 161, 0.3); } }
-.comment-reply-btn {
-  border: 0; }
-  .comment-reply-btn::before {
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    content: "\f3e5";
-    margin-right: .5em;
-    width: 20px; }
-  @media (min-width: 375px) {
-    .comment-reply-btn {
-      margin-right: 1.5em; } }
-.comment-content {
-  margin: 1em; }
-
-/* TODO: Assess Value
-  .reply-target {
-    font-size: 0.9em;
-    border: 0;
-    &::before {
-      font-family: $fa-free-font;
-      font-weight: 900;
-      content: "\f3e5";
-      margin-right: .5em;
-      width: 20px;
-    }
-  }
-*/
 /* Image Masks */
 .triangle {
   -webkit-clip-path: polygon(0 100%, 100% 100%, 50% 0);

diff --git a/js/blogtini.js b/js/blogtini.js
@@ -625,76 +625,6 @@ function storage_add(post) { // xxx use snippet
 }
 
 
-/**
- * @param {string} path
- */
-async function comments_get(path) {
-  let posts_with_comments
-  try {
-    posts_with_comments = (await fetcher(`${state.top_dir}comments/index.txt`))?.split('\n')
-    /* eslint-disable-next-line no-empty */ // deno-lint-ignore no-empty
-  } catch {}
-  if (!posts_with_comments?.includes(path))
-    return []
-
-  // oldest comments (or oldest in a thread) first
-  return (await fetcher(`${state.top_dir}comments/${path}/index.json`))?.filter((e) => Object.keys(e).length).sort((a, b) => a.date < b.date).map((e) => {
-    // delete any unused keys in each comment hashmap
-    for (const [k, v] of Object.entries(e)) {
-      if (v === '' || v === undefined || v === null)
-        delete e[k]
-      if (!['id', 'name', 'email', 'date', 'website', 'replyID', 'body'].includes(k))
-        delete e[k]
-    }
-    return e
-  })
-}
-
-
-function create_comment_form(entryId, comments) {
-  if (!cfg.staticman?.enabled)
-    return ''
-
-  globalThis.cfg = cfg // xxx
-
-  return `
-  <div class="post">
-    <div>
-      <h2 id="say-something">Say Something</h2>
-      <form id="comment-form" class="new-comment" method="POST">
-        <h3 class="reply-notice hidden">
-          <span class="reply-name"></span>
-          <a class="reply-close-btn button"><i class="fas fa-times"></i></a>
-        </h3>
-
-        <input type="hidden" name="options[entryId]" value="${entryId}">
-        <input type="hidden" name="fields[replyID]"  value="">
-
-        <input required="" name="fields[name]" type="text" placeholder="Your Name">
-        <input name="fields[website]" type="text" placeholder="Your Website">
-        <input required="" name="fields[email]" type="email" placeholder="Your Email">
-        <textarea required="" name="fields[body]" placeholder="Your Message" rows="10"></textarea>
-
-        <div class="submit-notice">
-          <strong class="submit-notice-text submit-success hidden">Thanks for your comment! It will be shown on the site once it has been approved.</strong>
-          <strong class="submit-notice-text submit-failed hidden">Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again.</strong>
-        </div>
-
-        <button type="button" id="comment-form-submit" class="button">Submit</button>
-        <button type="button" id="comment-form-submitted" class="hidden button" disabled="">Submitted</button>
-        <button type="reset"  id="comment-form-reset" class="button">Reset</button>
-      </form>
-    </div>
-
-
-    <div class="comments-container">
-      <h2>Comments</h2>
-      ${comments && comments.length ? '' : '<p>Nothing yet.</p>'}
-    </div>
-
-  </div>`
-}
-
 function share_buttons(post) { // xxxxx
   if (!post) {
     // if no post, parse url for ?tags etc and fake
@@ -947,10 +877,9 @@ export {
   cssify,
   datetime,
   markdown_to_html,
-  comments_get,
-  create_comment_form,
   share_buttons,
   dark_mode,
   PR,
   imgurl,
+  fetcher,
 }
diff --git a/js/staticman.js b/js/staticman.js
@@ -1,8 +1,10 @@
+import { cfg } from './blogtini.js'
+
 function find_form() {
   return document.querySelector('bt-post-full')?.shadowRoot?.querySelector('.new-comment')
 }
 
-function comment_setup(cfg) {
+function comment_setup() {
   const form = find_form()
   if (!form) {
     // eslint-disable-next-line no-console
@@ -120,6 +122,6 @@ function clearForm() {
   form.querySelector('.submit-failed').classList.add('hidden') // hide submission status
 }
 
-comment_setup(window.cfg) // xxx global
+comment_setup()
 
 export default comment_setup
diff --git a/theme/future-imperfect/bt-comment.js b/theme/future-imperfect/bt-comment.js
@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'https://esm.ext.archive.org/[email protected]'
+import { LitElement, html } from 'https://esm.ext.archive.org/[email protected]'
 import { cssify, datetime } from '../../js/blogtini.js'
 import {
   css_post, css_dark, css_footer, css_title, css_buttons,