Skip to content

Commit

Permalink
Add comments support (#893)
Browse files Browse the repository at this point in the history 
* 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]>
  • Loading branch information
@minimaluminium @peterzimon
@sanne-san @moreofmorris
4 people committed Aug 12, 2022
1 parent 96f69f8 commit d687d0f
Show file tree
Hide file tree
Showing 6 changed files with 134 additions and 47 deletions.
3 changes: 3 additions & 0 deletions assets/built/portal.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/built/screen.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/built/screen.css.map
View file

Large diffs are not rendered by default.

156 changes: 119 additions & 37 deletions assets/css/screen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
/* ---------------------------------------------------------- */
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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
/* ---------------------------------------------------------- */
Expand Down Expand Up @@ -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);
}
Expand All @@ -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%));
}
Expand All @@ -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;
}
Expand Down
4 changes: 3 additions & 1 deletion partials/post-card.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions post.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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}}


Expand Down

0 comments on commit d687d0f

Please sign in to comment.