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>
This commit is contained in:
Sodbileg Gansukh 2022-08-12 21:30:06 +08:00 committed by GitHub
parent 96f69f8c07
commit d687d0f099
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 134 additions and 47 deletions

3
assets/built/portal.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -15,6 +15,7 @@ production stylesheet in assets/built/screen.css
7.2. Members Subscribe Form 7.2. Members Subscribe Form
7.4. Related Posts 7.4. Related Posts
7.5. Koenig Styles 7.5. Koenig Styles
7.6 Comments
8. Author Template 8. Author Template
9. Error Template 9. Error Template
11. Site Footer 11. Site Footer
@ -416,6 +417,35 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
background: #fff; 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 /* Search
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -830,12 +860,27 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
.post-card-meta { .post-card-meta {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px;
margin-top: 12px; margin-top: 12px;
padding: 0; padding: 0;
font-size: 1.3rem; font-size: 1.3rem;
color: var(--color-secondary-text); 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 { .post-card-meta .sep {
margin: 0 4px; 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 /* 8. Author Template
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

View File

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

View File

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