From 2b8f97a1afb2698c89414ece073f946a8ed89a52 Mon Sep 17 00:00:00 2001
From: Peter Cai <peter@typeblog.net>
Date: Tue, 14 Apr 2020 20:36:17 +0800
Subject: [PATCH] theme: add support for itte as the comment system

---
 README.md                      |  3 +++
 theme/default/post.hbs         |  5 +++++
 theme/default/static/style.css | 12 ++++++++++++
 3 files changed, 20 insertions(+)

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;
+}