Add comments support (#133)

assets/css/screen.css

@@ -110,6 +110,9 @@
 }
 
 .gh-card-meta {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
     margin-top: 2rem;
     font-size: 1.2rem;
     font-weight: 500;
@@ -122,17 +125,26 @@
     color: var(--ghost-accent-color);
 }
 
-.gh-card-meta-wrapper {
-    display: inline-flex;
-    align-items: center;
-}
-
-.gh-card-meta-wrapper svg {
+.gh-card-meta svg {
     position: relative;
     top: -1px;
     margin-left: 0.6rem;
 }
 
+.gh-card-meta > * {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.gh-card-meta > * + *:not(script)::before {
+    width: 2px;
+    height: 2px;
+    content: "";
+    background-color: var(--color-secondary-text);
+    border-radius: 50%;
+}
+
 .gh-loadmore {
     width: 100%;
     padding-top: 1.4rem;
@@ -377,6 +389,11 @@
     border-top: 1px solid var(--color-light-gray);
 }
 
+.gh-article-footer.no-border {
+    margin-top: 24px;
+    border-top: 0;
+}
+
 .gh-navigation {
     grid-column: wide-start / wide-end;
 }

index.hbs

@@ -11,20 +11,17 @@
                                 <div class="gh-article-meta">
                                     <span class="gh-card-date">Latest — <time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time></span>
                                 </div>
-
                                 <h2 class="gh-article-title gh-card-title">{{title}}</h2>
                             </header>
 
                             <p class="gh-article-excerpt">{{excerpt}}</p>
 
                             <footer class="gh-card-meta">
-                                <span class="gh-card-meta-wrapper">
-                                    <span class="gh-card-duration">{{reading_time}}</span>
-
-                                    {{^has visibility="public"}}
-                                        {{> icons/star}}
-                                    {{/has}}
-                                </span>
+                                <span class="gh-card-duration">{{reading_time}}</span>
+                                {{comment_count class="gh-card-comments"}}
+                                {{^has visibility="public"}}
+                                    {{> icons/star}}
+                                {{/has}}
                             </footer>
                         </a>
                     </article>

partials/loop.hbs

@@ -8,14 +8,11 @@
 
         <footer class="gh-card-meta">
             <time class="gh-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
-            —
-            <span class="gh-card-meta-wrapper">
-                <span class="gh-card-duration">{{reading_time}}</span>
-
-                {{^has visibility="public"}}
-                    {{> icons/star}}
-                {{/has}}
-            </span>
+            <span class="gh-card-duration">{{reading_time}}</span>
+            {{comment_count class="gh-card-comments"}}
+            {{^has visibility="public"}}
+                {{> icons/star}}
+            {{/has}}
         </footer>
     </a>
 </article>

post.hbs

@@ -46,8 +46,14 @@
             {{content}}
         </div>
 
+        {{#if comments}}
+            <div class="gh-comments gh-canvas">
+                {{comments}}
+            </div>
+        {{/if}}
+
         {{#is "post"}}
-            <footer class="gh-article-footer gh-canvas">
+            <footer class="gh-article-footer gh-canvas{{#if @site.comments_enabled}}{{#unless @member}} no-border{{/unless}}{{#unless access}} no-border{{/unless}}{{/if}}">
                 <nav class="gh-navigation">
                     <div class="gh-navigation-previous">
                         {{#prev_post}}