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
GitHub
parent
96f69f8c07
commit
d687d0f099
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
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
14
post.hbs
14
post.hbs
|
|
@ -86,11 +86,11 @@ 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>
|
||||
|
|
@ -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}}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue