Add comments support (#893)

* Added comments to theme

* Cleanup

* Updated spacing and typography

* Removed bottom border

* Added comment counter

* Updated theme name and post template

* Added search support

* Compiled css for search

* Removed the border and brackets for comment count

* Moved the comments helper into the content block so it gets the same paddings at narrow viewports

* Package version bump

* Updated comments helper in post template

* Final tweaks for the comments support

* Revert the package info

* Update {{comment_count}} helper usage

The helper now outputs a span wrapper by default, so we won't have to add a wrapper in the theme

Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
Co-authored-by: James Morris <moreofmorris@users.noreply.github.com>

assets/css/screen.css

@@ -15,6 +15,7 @@ production stylesheet in assets/built/screen.css
   7.2. Members Subscribe Form
   7.4. Related Posts
   7.5. Koenig Styles
+  7.6  Comments
 8.  Author Template
 9.  Error Template
 11. Site Footer
@@ -416,6 +417,35 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
     background: #fff;
 }
 
+/* Search
+/* ---------------------------------------------------------- */
+
+.gh-search {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    outline: none;
+}
+
+.gh-search:hover {
+    opacity: 0.9;
+}
+
+@media (max-width: 991px) {
+    .gh-search {
+        position: fixed;
+        top: 16px;
+        left: 16px;
+        z-index: 10;
+    }
+}
+
 
 /* Search
 /* ---------------------------------------------------------- */
@@ -830,12 +860,27 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 .post-card-meta {
     display: flex;
     align-items: center;
+    gap: 6px;
     margin-top: 12px;
     padding: 0;
     font-size: 1.3rem;
     color: var(--color-secondary-text);
 }
 
+.post-card-meta > * {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.post-card-meta > * + *:not(script)::before {
+    width: 2px;
+    height: 2px;
+    content: "";
+    background-color: var(--color-secondary-text);
+    border-radius: 50%;
+}
+
 .post-card-meta .sep {
     margin: 0 4px;
 }
@@ -1595,6 +1640,43 @@ iframe.instagram-media + script + :not([id]) {
     }
 }
 
+/* 7.6. Comments
+/* ---------------------------------------------------------- */
+.comments {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 60px 0 44px;
+}
+
+
+.comments-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 32px;
+    width: 100%;
+    max-width: 720px;
+}
+
+.comments h2 {
+    width: 100%;
+    max-width: 720px;
+    font-weight: 800;
+    font-size: 3.4rem;
+}
+
+.comments .comment-count {
+    color: var(--color-midgrey);
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.comments #ghost-comments-root {
+    width: 100%;
+    max-width: 720px;
+}
+
 
 /* 8. Author Template
 /* ---------------------------------------------------------- */

partials/post-card.hbs

@@ -66,9 +66,11 @@ which templates loop over to generate a list of posts. --}}
         <footer class="post-card-meta">
             <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
             {{#if reading_time}}
-                <span class="sep">—</span>
                 <span class="post-card-meta-length">{{reading_time}}</span>
             {{/if}}
+            {{#if @site.comments_enabled}}
+                {{comment_count}}
+            {{/if}}
         </footer>
 
     </div>

post.hbs

@@ -86,11 +86,11 @@ into the {body} tag of the default.hbs template --}}
         {{content}}
     </section>
 
-    {{!--
+    {{#if comments}}
         <section class="article-comments gh-canvas">
-        If you want to embed comments, this is a good place to paste your code!
+            {{comments}}
         </section>
-    --}}
+    {{/if}}
 
 </article>
 </main>
@@ -98,6 +98,7 @@ into the {body} tag of the default.hbs template --}}
 {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
 {{#if @site.members_enabled}}
 {{#unless @member}}
+{{#unless @site.comments_enabled}}
 {{#if access}}
     <section class="footer-cta outer">
         <div class="inner">
@@ -106,12 +107,11 @@ into the {body} tag of the default.hbs template --}}
                 <div class="footer-cta-input">Enter your email</div>
                 <span>Subscribe</span>
             </a>
-            {{!-- ^ This looks like a form element, but it's just a link to Portal,
-            making the form validation and submission much simpler. --}}
         </div>
     </section>
 {{/if}}
 {{/unless}}
+{{/unless}}
 {{/if}}