theme: add support for itte as the comment system

3 files changed, 20 insertions, 0 deletions

diff --git a/README.md b/README.md
index 3097113..7e30de4 100644
--- a/README.md
+++ b/README.md
@@ -106,6 +106,7 @@ Configuration: theme_config.json
 ```json
 {
   "avatar_url": "<url_of_your_avatar>",
+  "itte_url": "https://<your_itte_instance>",
   "nav_links": [
     {
       "name": "<nav_name>",
@@ -119,6 +120,8 @@ Configuration: theme_config.json
 
 `nav_links`: a set of navigation links to be displayed in the sidebar (or at the top on mobile). You can set `"target": "_blank"` to make the link open in new tabs, while omitting this attribute will make the link behave as a normal link, that is, open in the current page.
 
+`itte_url`: OPTIONAL. A URL to your [Itte](https://github.com/PeterCxy/itte) instance, the comment system.
+
 Installation in Standard Notes
 ===
 
diff --git a/theme/default/post.hbs b/theme/default/post.hbs
index f472751..348c7fc 100644
--- a/theme/default/post.hbs
+++ b/theme/default/post.hbs
@@ -8,6 +8,11 @@
                 <h1 id="paprika-post-title">{{ title }}</h1>
                 <span class="date">{{ format_date timestamp "%e %b, %Y" }}</span>
                 {{{ content }}}
+                {{ #if blog.theme_config.itte_url }}
+                <section id="itte-thread" data-path="{{ page.base_url }}{{ page.pathname }}">
+                </section>
+                <script src="{{ blog.theme_config.itte_url }}/itte.js"></script>
+                {{ /if }}
             </article>
         </div>
         <div class="toc-wrapper hidden">
diff --git a/theme/default/static/style.css b/theme/default/static/style.css
index a7146ed..3b20be4 100644
--- a/theme/default/static/style.css
+++ b/theme/default/static/style.css
@@ -559,3 +559,15 @@ blockquote {
 .hljs:hover {
     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 }
+
+/* Extra customization for Itte, the comment system */
+#itte-thread::before {
+    content: "";
+    display: block;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    margin-left: calc(50% - 90px);
+    width: 180px;
+    height: 2px;
+    background-color: #e91e63;
+}