From ce2ee9e94c3e1b8f951f4d6dadd093324a53ff86 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Mon, 6 Nov 2023 21:19:18 +0000
Subject: [PATCH] Replace commento with remark

---
 static/src/js/dark-mode.js                    |  4 +++
 static/src/scss/_commento.scss                | 35 -------------------
 static/src/scss/_comments.scss                |  3 ++
 static/src/scss/base.scss                     |  2 +-
 website/common/templates/common/comments.html | 14 ++++++--
 .../templates/wagtailmetadata/parts/tags.html |  1 -
 6 files changed, 19 insertions(+), 40 deletions(-)
 delete mode 100644 static/src/scss/_commento.scss
 create mode 100644 static/src/scss/_comments.scss

diff --git a/static/src/js/dark-mode.js b/static/src/js/dark-mode.js
index 3efe6f4..83d889d 100644
--- a/static/src/js/dark-mode.js
+++ b/static/src/js/dark-mode.js
@@ -14,6 +14,10 @@ function handleDarkMode(darkMode) {
   } else {
     htmlTag.classList.remove(DARK_MODE_CLASS);
   }
+
+  if (window.REMARK42) {
+    window.REMARK42.changeTheme(darkMode ? "dark" : "light");
+  }
 }
 
 if (window.localStorage.getItem(STORAGE_KEY) === null) {
diff --git a/static/src/scss/_commento.scss b/static/src/scss/_commento.scss
deleted file mode 100644
index 146682e..0000000
--- a/static/src/scss/_commento.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-#commento {
-  .commento-profile-button {
-    @include dark-mode {
-      fill: $dark-mode-text;
-    }
-  }
-
-  .commento-name,
-  #commento-mod-tools-lock-button,
-  .commento-login-text,
-  .commento-anonymous-checkbox-container label {
-    @include dark-mode {
-      color: $dark-mode-text;
-    }
-  }
-
-  #commento-textarea-root,
-  #commento-guest-details-input-root,
-  .commento-textarea-container textarea {
-    @include dark-mode {
-      background-color: $black;
-      color: $dark-mode-text;
-    }
-  }
-
-  .commento-card {
-    @include dark-mode {
-      border-top: 1px solid color.adjust($black, $alpha: -0.4);
-
-      p {
-        color: $dark-mode-text;
-      }
-    }
-  }
-}
diff --git a/static/src/scss/_comments.scss b/static/src/scss/_comments.scss
new file mode 100644
index 0000000..e95815b
--- /dev/null
+++ b/static/src/scss/_comments.scss
@@ -0,0 +1,3 @@
+section.comments {
+  margin-top: 2rem;
+}
diff --git a/static/src/scss/base.scss b/static/src/scss/base.scss
index 8a84baf..dc91189 100644
--- a/static/src/scss/base.scss
+++ b/static/src/scss/base.scss
@@ -19,7 +19,7 @@
 @import "spotify";
 @import "404";
 @import "password_required";
-@import "commento";
+@import "comments";
 @import "similar_content";
 @import "support_pill";
 
diff --git a/website/common/templates/common/comments.html b/website/common/templates/common/comments.html
index fd358ca..c88e02c 100644
--- a/website/common/templates/common/comments.html
+++ b/website/common/templates/common/comments.html
@@ -1,5 +1,13 @@
-<section class="container">
-  <div id="commento"></div>
+<section class="container comments">
+  <div id="remark42"></div>
 </section>
 
-<script async defer src="https://commento.theorangeone.net/js/commento.js"></script>
+<script>
+  var remark_config = {
+    host: 'https://remark.theorangeone.net',
+    site_id: 'theorangeone',
+    no_footer: true
+  }
+</script>
+
+<script type="module" async defer src="https://remark.theorangeone.net/web/embed.mjs"></script>
diff --git a/website/common/templates/wagtailmetadata/parts/tags.html b/website/common/templates/wagtailmetadata/parts/tags.html
index 4467e08..9afada3 100644
--- a/website/common/templates/wagtailmetadata/parts/tags.html
+++ b/website/common/templates/wagtailmetadata/parts/tags.html
@@ -18,7 +18,6 @@
 {% block meta %}
   {{ block.super }}
   <link rel="canonical" href="{{ object.get_meta_url }}" />
-  <meta name="color-scheme" content="dark light" />
   <meta name="author" content="TheOrangeOne" />
   <meta name="creator" content="TheOrangeOne" />
   <meta name="publisher" content="TheOrangeOne" />