Skip to content

Commit b7630ca

Browse files
Daniele-rolliDaniele-rolli
authored
Merge pull request #1 from Beaver-Notes/feature/add-welcomments-7yl4a
Integrate Welcomments
2 parents 02874dd + 7bc5d63 commit b7630ca

File tree

4 files changed

+235
-0
lines changed

4 files changed

+235
-0
lines changed

‎_includes/welcomments/comment_form.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<form id="welcomments__form" class="welcomments__comment-form" action="{{ include.api_url }}/comments" method="post">
2+
<input type="hidden" name="website-id" id="website-id" value="{{ include.website_id }}"/>
3+
<input type="hidden" name="replying-to" id="replying-to"/>
4+
<input type="hidden" name="permalink" id="permalink" value="{{ site.url }}{{ page.url }}"/>
5+
<input type="hidden" name="page-slug" id="page-slug" value="{{ page.slug }}"/>
6+
<div class="welcomments__form-group">
7+
<textarea rows="10" name="message" id="message" required spellcheck="true" placeholder="Type here..."></textarea>
8+
<p class="welcomments__markdown-notice"><a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" target="_blank">GitHub-flavored Markdown</a> & a sane subset of HTML is supported.</p>
9+
</div>
10+
<div class="welcomments__form-group">
11+
<label for="author-name">Name</label>
12+
<input type="text" id="author-name" name="author-name" required spellcheck="false" placeholder="Your name"/>
13+
</div>
14+
<div class="welcomments__form-group welcomments__flex">
15+
<div class="welcomments__column-left">
16+
<label for="author-url">Website <span class="welcomments__optional-notice">(optional)</span></label>
17+
<input type="url" id="author-url" name="author-url" placeholder="https://example.com"/>
18+
</div>
19+
<div class="welcomments__column-right">
20+
<label for="author-email">Email <span class="welcomments__optional-notice">(optional)</span></label>
21+
<input type="email" id="author-email" name="author-email" placeholder="[email protected]"/>
22+
</div>
23+
</div>
24+
<p class="welcomments__email-notice">Fill in your email address if you want to get notified when someone replies to your comment. Your email address is safely stored with strong 256-bit AES encryption. You can unsubscribe from notification emails any time by following a link on the bottom of a reply notification email.</p>
25+
<button type="submit" class="welcomments__submit-button" id="welcomments__submit-button">Send comment</button>
26+
</form>

‎_includes/welcomments/comments.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
{%- if include.api_url -%}
2+
{%- assign api_url = include.api_url -%}
3+
{%- else -%}
4+
{%- assign api_url = "https://welcomments.io/api" -%}
5+
{%- endif -%}
6+
7+
{%- if include.website_id == "YOUR-WEBSITE-ID-HERE" -%}
8+
<div style="color: #ff0000;">
9+
<h1>Website id not configured!</h1>
10+
<p>Please replace <code>YOUR-WEBSITE-ID-HERE</code> with the website id from Welcomments console.</p>
11+
</div>
12+
{%- endif -%}
13+
14+
<div id="welcomments__container" class="welcomments__container">
15+
{%- assign article_url = page.slug -%}
16+
17+
{%- if article_url != "" -%}
18+
{%- assign all_comments = site.data.welcomments[article_url] -%}
19+
{%- else -%}
20+
{%- assign all_comments = site.data.welcomments["___root___"] -%}
21+
{%- endif -%}
22+
23+
{%- if all_comments.size > 0 -%}
24+
<h3 id="welcomments__comment-count-title" class="welcomments__comments-title">{{ all_comments.size }} comment{%- if all_comments.size > 1 -%}s{%- endif -%}</h3>
25+
{%- else -%}
26+
<h3 id="welcomments__comment-count-title" class="welcomments__comments-title">No comments yet!</h3>
27+
{%- endif -%}
28+
29+
<section id="welcomments__comment-container" class="welcomments__comment-container">
30+
{%- if all_comments.size > 0 -%}
31+
{%- assign parent_comments = all_comments | where_exp: "c", "c.replying_to == nil" | sort: 'id' -%}
32+
33+
{%- for comment_map in parent_comments -%}
34+
{%- assign comment = comment_map -%}
35+
{%- include welcomments/single_comment.html
36+
nesting_level = 0
37+
all_comments = all_comments
38+
comment = comment
39+
api_url = api_url
40+
website_id = include.website_id -%}
41+
{%- endfor -%}
42+
{%- endif -%}
43+
</section>
44+
45+
{%- include welcomments/comment_form.html
46+
api_url = api_url
47+
website_id = include.website_id -%}
48+
</div>
49+
50+
<!--
51+
Contains some basic comment section styling, so that you can get started quickly
52+
without having to come up with your own CSS if you don't want to.
53+
-->
54+
<link rel="stylesheet" href="https://cdn.welcomments.io/welcomments.css" />
55+
56+
<!--
57+
Includes the optional Welcomments Javascript file. It enhances the user experience
58+
by sending the comment form fields without the user having to leave your site.
59+
60+
It also saves the comment to the local storage while your site is being rebuilt so
61+
that your users don't get confused and resubmit the same comment multiple times. If
62+
there are comments that other users posted that haven't been rebuilt as a part of your
63+
site yet, this script also "fills in" them from the Welcomments Pending Comments API.
64+
65+
It's gzipped and weighs just about 2.1kB. If you want, you can just delete this line
66+
and your comment form works just fine but is a bit less interactive! :-)
67+
-->
68+
<script defer id="welcomments__script" src="https://cdn.welcomments.io/welcomments.js" type="text/javascript"></script>
69+
<script type="text/javascript">
70+
welcomments = {
71+
apiUrl: "{{ api_url }}",
72+
73+
// Updates the "x comments" title when there are comments that are dynamically loaded.
74+
// By default, the result of this function becomes the innerText of an element with the
75+
// id "welcomments__comment-count-title". It's okay if that element doesn't exist.
76+
commentCountTitleFactory: function (commentCount) {
77+
if (commentCount === 0) {
78+
return "No comments yet!";
79+
}
80+
81+
return commentCount === 1 ? "One comment" : `${commentCount} comments`;
82+
},
83+
84+
// Builds comments dynamically when they are not part of the static HTML of the rest of
85+
// your Jekyll website yet. Should return the desired HTML as a string. By default, appends
86+
// the resulting HTML as a child element into the correct position in an element with the
87+
// id "welcomments__comment-container".
88+
placeholderCommentFactory: function (comment) {
89+
var year = new Intl.DateTimeFormat("en", {year: "numeric"}).format(comment.date);
90+
var month = new Intl.DateTimeFormat("en", {month: "long"}).format(comment.date);
91+
var day = new Intl.DateTimeFormat("en", {day: "2-digit"}).format(comment.date);
92+
var avatarUrl = comment.author.avatar_url ||
93+
`https://eu.ui-avatars.com/api/?background=random&name=${comment.author.name}`
94+
95+
return `{%- include welcomments/template.html
96+
id = "${comment.id}"
97+
element_id = "welcomments__comment-${comment.id}"
98+
element_classname = "welcomments__comment"
99+
nesting_level = "0"
100+
formatted_date = "${month} ${day}, ${year}"
101+
author_name = "${comment.author.name}"
102+
author_website = "${comment.author.website}"
103+
author_avatar_url = "${avatarUrl}"
104+
message = "${comment.message}"
105+
api_url = api_url
106+
website_id = include.website_id -%}`;
107+
},
108+
};
109+
</script>

‎_includes/welcomments/single_comment.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{%- assign nesting_level = include.nesting_level -%}
2+
{%- assign all_comments = include.all_comments -%}
3+
{%- assign comment = include.comment -%}
4+
5+
{%- assign nesting_level_class = "" -%}
6+
{%- if nesting_level > 0 -%}
7+
{% capture nesting_level_class %} welcomments__nesting-level-{{ nesting_level }}{% endcapture %}
8+
{%- endif -%}
9+
10+
{%- assign author_highlight = "" -%}
11+
{%- if comment.author.role == "owner" -%}
12+
{% capture author_highlight %} welcomments__comment-role-owner{% endcapture %}
13+
{%- endif -%}
14+
15+
{%- capture comment_element_id -%}welcomments__comment-{{ comment.id }}{%- endcapture -%}
16+
{%- capture comment_element_class -%}welcomments__comment{{nesting_level_class}}{{ author_highlight }}{%- endcapture -%}
17+
18+
{%- capture formatted_date -%}{{ comment.date | date: '%B %d, %Y' }}{%- endcapture -%}
19+
{%- capture date_xml_schema -%}{{ comment.date | date_to_xmlschema }}{%- endcapture -%}
20+
{%- capture comment_message -%}{{ comment.message | markdownify }}{%- endcapture -%}
21+
22+
{% if comment.author.avatar_url %}
23+
{% capture author_avatar_url %}{{ comment.author.avatar_url }}{% endcapture %}
24+
{% else %}
25+
{% capture author_avatar_url %}https://eu.ui-avatars.com/api/?background=random&name={{ comment.author.name }}{% endcapture %}
26+
{% endif %}
27+
28+
{%- include welcomments/template.html
29+
id = comment.id
30+
element_id = comment_element_id
31+
element_classname = comment_element_class
32+
nesting_level = nesting_level
33+
formatted_date = formatted_date
34+
date_xml_schema = date_xml_schema
35+
author_name = comment.author.name
36+
author_website = comment.author.website
37+
author_avatar_url = author_avatar_url
38+
message = comment_message
39+
api_url = include.api_url
40+
website_id = include.website_id -%}
41+
42+
{%- assign parent_id = comment.id -%}
43+
{%- assign replies = all_comments | where_exp: "c", "c.replying_to == parent_id" -%}
44+
45+
{%- if replies.size > 0 -%}
46+
{%- assign nesting_level = nesting_level | plus:1 -%}
47+
{%- assign sorted_replies = replies | sort: 'id' -%}
48+
{%- for reply in sorted_replies -%}
49+
{%- include
50+
welcomments/single_comment.html
51+
nesting_level = nesting_level
52+
all_comments = all_comments
53+
comment = reply
54+
api_url = include.api_url
55+
website_id = include.website_id -%}
56+
{%- endfor -%}
57+
{%- endif -%}

‎_includes/welcomments/template.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{%- assign id = include.id -%}
2+
{%- assign element_id = include.element_id -%}
3+
{%- assign element_classname = include.element_classname -%}
4+
{%- assign nesting_level = include.nesting_level -%}
5+
{%- assign formatted_date = include.formatted_date -%}
6+
{%- assign date_xml_schema = include.date_xml_schema -%}
7+
{%- assign author_name = include.author_name -%}
8+
{%- assign author_website = include.author_website -%}
9+
{%- assign avatar_url = include.author_avatar_url -%}
10+
{%- assign message = include.message -%}
11+
12+
<article
13+
id="{{ element_id }}"
14+
class="{{ element_classname }}"
15+
data-comment-id="{{ id }}"
16+
data-author-name="{{ author_name }}"
17+
data-nesting-level="{{ nesting_level }}"
18+
itemprop="comment" itemscope itemtype="https://schema.org/Comment">
19+
<div class="welcomments__comment-header">
20+
<div class="welcomments__author-avatar">
21+
<img class="welcomments__author-avatar-img" src="{{ avatar_url }}" alt="{{ author_name }}"/>
22+
</div>
23+
<div class="welcomments__author-information">
24+
<div class="welcomments__author-name-and-time">
25+
<h3 class="welcomments__author-name" itemprop="author" itemscope itemtype="https://schema.org/Person">
26+
<span itemprop="name">{{ author_name }}</span>
27+
</h3>
28+
<p class="welcomments__comment-time">
29+
<a href="#welcomments__comment-{{ id }}" itemprop="url">
30+
<time datetime="{{ date_xml_schema }}" itemprop="datePublished">
31+
{{- formatted_date -}}
32+
</time>
33+
</a>
34+
</p>
35+
</div>
36+
</div>
37+
</div>
38+
<div itemprop="text" class="welcomments__comment-message">{{ message }}</div>
39+
<a class="welcomments__comment-reply-link"
40+
href="{{ include.api_url }}/websites/{{ include.website_id }}/comments/{{ id }}/reply">
41+
Reply to {{ author_name }}
42+
</a>
43+
</article>

0 commit comments

Comments
 (0)