Add comments support (TryGhost#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 <[email protected]> Co-authored-by: Sanne de Vries <[email protected]> Co-authored-by: James Morris <[email protected]>
sanne-san · Aug 12, 2022 · d687d0f · d687d0f
1 parent 96f69f8
commit d687d0f
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 47 deletions.
diff --git a/assets/built/portal.min.js b/assets/built/portal.min.js
diff --git a/assets/built/screen.css b/assets/built/screen.css
diff --git a/assets/built/screen.css.map b/assets/built/screen.css.map
diff --git a/assets/css/screen.css b/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
 /* ---------------------------------------------------------- */
@@ -2004,48 +2086,48 @@ html.dark-mode .footer-cta-title {
         color: rgba(255, 255, 255, 0.75);
         background: var(--color-darkmode);
     }
-    
+
     html.auto-color img {
         opacity: 0.9;
     }
-    
+
     html.auto-color kbd {
         background: color-mod(var(--color-darkmode) l(+5%));
     }
-    
+
     html.auto-color figcaption a {
         color: #fff;
     }
-    
+
     html.auto-color .gh-head {
         background: var(--color-darkmode);
         color: #fff;
     }
-    
+
     html.auto-color .gh-burger-box {
         color: #fff;
     }
-    
+
     html.auto-color .site-header-content {
         color: #fff;
     }
-    
+
     html.auto-color .post-card-image {
         background: var(--color-darkmode);
     }
-    
+
     html.auto-color :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
         color: color-mod(var(--color-secondary-text) l(-22%));
     }
-    
+
     html.auto-color .post-card-featured {
         color: #fff;
     }
-    
+
     html.auto-color .post-card-title {
         color: #fff;
     }
-    
+
     html.auto-color .post-card-excerpt {
         color: var(--color-secondary-text);
     }
@@ -2061,11 +2143,11 @@ html.dark-mode .footer-cta-title {
     html.auto-color .article-title {
         color: #fff;
     }
-    
+
     html.auto-color .article-excerpt {
         color: var(--color-secondary-text);
     }
-    
+
     html.auto-color .post-full-image {
         background-color: color-mod(var(--color-darkmode) l(+8%));
     }
@@ -2074,107 +2156,107 @@ html.dark-mode .footer-cta-title {
         border-color: var(--color-darkmode);
         background-color: color-mod(var(--color-darkmode) l(+8%));
     }
-    
+
     html.auto-color .author-profile-image {
         opacity: 1;
     }
-    
+
     html.auto-color .author-profile-image path {
         fill: var(--color-darkmode);
     }
-    
+
     html.auto-color .article-byline-meta .author-name a {
         color: #fff;
     }
-    
+
     html.auto-color .no-image .author-social-link a {
         color: rgba(255, 255, 255, 0.75);
     }
-    
+
     html.auto-color .gh-content > [id] {
         color: rgba(255, 255, 255, 0.9);
     }
-    
+
     html.auto-color .gh-content pre {
         background: color-mod(var(--color-darkgrey) l(-8%));
     }
-    
+
     html.auto-color .gh-content :not(pre) > code {
         background: color-mod(var(--color-darkgrey) l(+6%));
         border-color: color-mod(var(--color-darkmode) l(+8%));
         color: var(--color-wash);
     }
-    
+
     html.auto-color .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button) {
         color: #fff;
     }
-    
+
     html.auto-color .gh-content strong {
         color: #fff;
     }
-    
+
     html.auto-color .gh-content em {
         color: #fff;
     }
-    
+
     html.auto-color .gh-content code {
         color: #fff;
         background: #000;
     }
-    
+
     html.auto-color hr {
         border-top-color: color-mod(var(--color-darkmode) l(+8%));
     }
-    
+
     html.auto-color .gh-content hr:after {
         background: color-mod(var(--color-darkmode) l(+8%));
         box-shadow: var(--color-darkmode) 0 0 0 5px;
     }
-    
+
     html.auto-color figcaption {
         color: rgba(255, 255, 255, 0.6);
     }
-    
+
     html.auto-color .gh-content table td:first-child {
         background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
     }
-    
+
     html.auto-color .gh-content table td:last-child {
         background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
     }
-    
+
     html.auto-color .gh-content table th {
         color: rgba(255, 255, 255, 0.85);
         background-color: color-mod(var(--color-darkmode) l(+8%));
     }
-    
+
     html.auto-color .gh-content table th,
     html.auto-color .gh-content table td {
         border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
     }
-    
+
     html.auto-color .gh-content input {
         color: color-mod(var(--color-midgrey) l(-30%));
     }
-    
+
     html.auto-color .site-archive-header .no-image {
         color: rgba(255, 255, 255, 0.9);
         background: var(--color-darkmode);
     }
-    
+
     html.auto-color .kg-header-card.kg-style-dark {
         background: color-mod(var(--color-darkgrey) l(-5%));
     }
-    
+
     html.auto-color .kg-header-card.kg-style-light {
         background: color-mod(var(--color-darkgrey) l(+5%));
     }
-    
+
     html.auto-color .kg-header-card h2.kg-header-card-header,
     html.auto-color .kg-header-card h3.kg-header-card-subheader {
         color: #fff;
     }
-    
+
     html.auto-color .footer-cta-title {
         color: #fff;
     }

diff --git a/partials/post-card.hbs b/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>

diff --git a/post.hbs b/post.hbs
@@ -86,18 +86,19 @@ into the {body} tag of the default.hbs template --}}
         {{content}}
     </section>
 
-    {{!--
-    <section class="article-comments gh-canvas">
-        If you want to embed comments, this is a good place to paste your code!
-    </section>
-    --}}
+    {{#if comments}}
+        <section class="article-comments gh-canvas">
+            {{comments}}
+        </section>
+    {{/if}}
 
 </article>
 </main>
 
 {{!-- 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}}