Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Welcome, Welcomments! #57

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Welcome, Welcomments! #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions _includes/welcomments/comment_form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<form id="welcomments__form" class="welcomments__comment-form" action="{{ include.api_url }}/comments" method="post">
<input type="hidden" name="website-id" id="website-id" value="{{ include.website_id }}"/>
<input type="hidden" name="replying-to" id="replying-to"/>
<input type="hidden" name="permalink" id="permalink" value="{{ site.url }}{{ page.url }}"/>
<input type="hidden" name="page-slug" id="page-slug" value="{{ page.slug }}"/>
<div class="welcomments__form-group">
<textarea rows="10" name="message" id="message" required spellcheck="true" placeholder="Type here..."></textarea>
<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>
</div>
<div class="welcomments__form-group">
<label for="author-name">Name</label>
<input type="text" id="author-name" name="author-name" required spellcheck="false" placeholder="Your name"/>
</div>
<div class="welcomments__form-group welcomments__flex">
<div class="welcomments__column-left">
<label for="author-url">Website <span class="welcomments__optional-notice">(optional)</span></label>
<input type="url" id="author-url" name="author-url" placeholder="https://example.com"/>
</div>
<div class="welcomments__column-right">
<label for="author-email">Email <span class="welcomments__optional-notice">(optional)</span></label>
<input type="email" id="author-email" name="author-email" placeholder="johndoe@example.com"/>
</div>
</div>
<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>
<button type="submit" class="welcomments__submit-button" id="welcomments__submit-button">Send comment</button>
</form>
109 changes: 109 additions & 0 deletions _includes/welcomments/comments.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
{%- if include.api_url -%}
{%- assign api_url = include.api_url -%}
{%- else -%}
{%- assign api_url = "https://welcomments.io/api" -%}
{%- endif -%}

{%- if include.website_id == "YOUR-WEBSITE-ID-HERE" -%}
<div style="color: #ff0000;">
<h1>Website id not configured!</h1>
<p>Please replace <code>YOUR-WEBSITE-ID-HERE</code> with the website id from Welcomments console.</p>
</div>
{%- endif -%}

<div id="welcomments__container" class="welcomments__container">
{%- assign article_url = page.slug -%}

{%- if article_url != "" -%}
{%- assign all_comments = site.data.welcomments[article_url] -%}
{%- else -%}
{%- assign all_comments = site.data.welcomments["___root___"] -%}
{%- endif -%}

{%- if all_comments.size > 0 -%}
<h3 id="welcomments__comment-count-title" class="welcomments__comments-title">{{ all_comments.size }} comment{%- if all_comments.size > 1 -%}s{%- endif -%}</h3>
{%- else -%}
<h3 id="welcomments__comment-count-title" class="welcomments__comments-title">No comments yet!</h3>
{%- endif -%}

<section id="welcomments__comment-container" class="welcomments__comment-container">
{%- if all_comments.size > 0 -%}
{%- assign parent_comments = all_comments | where_exp: "c", "c.replying_to == nil" | sort: 'id' -%}

{%- for comment_map in parent_comments -%}
{%- assign comment = comment_map -%}
{%- include welcomments/single_comment.html
nesting_level = 0
all_comments = all_comments
comment = comment
api_url = api_url
website_id = include.website_id -%}
{%- endfor -%}
{%- endif -%}
</section>

{%- include welcomments/comment_form.html
api_url = api_url
website_id = include.website_id -%}
</div>

<!--
Contains some basic comment section styling, so that you can get started quickly
without having to come up with your own CSS if you don't want to.
-->
<link rel="stylesheet" href="https://cdn.welcomments.io/welcomments.css" />

<!--
Includes the optional Welcomments Javascript file. It enhances the user experience
by sending the comment form fields without the user having to leave your site.

It also saves the comment to the local storage while your site is being rebuilt so
that your users don't get confused and resubmit the same comment multiple times. If
there are comments that other users posted that haven't been rebuilt as a part of your
site yet, this script also "fills in" them from the Welcomments Pending Comments API.

It's gzipped and weighs just about 2.1kB. If you want, you can just delete this line
and your comment form works just fine but is a bit less interactive! :-)
-->
<script defer id="welcomments__script" src="https://cdn.welcomments.io/welcomments.js" type="text/javascript"></script>
<script type="text/javascript">
welcomments = {
apiUrl: "{{ api_url }}",

// Updates the "x comments" title when there are comments that are dynamically loaded.
// By default, the result of this function becomes the innerText of an element with the
// id "welcomments__comment-count-title". It's okay if that element doesn't exist.
commentCountTitleFactory: function (commentCount) {
if (commentCount === 0) {
return "No comments yet!";
}

return commentCount === 1 ? "One comment" : `${commentCount} comments`;
},

// Builds comments dynamically when they are not part of the static HTML of the rest of
// your Jekyll website yet. Should return the desired HTML as a string. By default, appends
// the resulting HTML as a child element into the correct position in an element with the
// id "welcomments__comment-container".
placeholderCommentFactory: function (comment) {
var year = new Intl.DateTimeFormat("en", {year: "numeric"}).format(comment.date);
var month = new Intl.DateTimeFormat("en", {month: "long"}).format(comment.date);
var day = new Intl.DateTimeFormat("en", {day: "2-digit"}).format(comment.date);
var avatarUrl = comment.author.avatar_url ||
`https://eu.ui-avatars.com/api/?background=random&name=${comment.author.name}`

return `{%- include welcomments/template.html
id = "${comment.id}"
element_id = "welcomments__comment-${comment.id}"
element_classname = "welcomments__comment"
nesting_level = "0"
formatted_date = "${month} ${day}, ${year}"
author_name = "${comment.author.name}"
author_website = "${comment.author.website}"
author_avatar_url = "${avatarUrl}"
message = "${comment.message}"
api_url = api_url
website_id = include.website_id -%}`;
},
};
</script>
57 changes: 57 additions & 0 deletions _includes/welcomments/single_comment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
{%- assign nesting_level = include.nesting_level -%}
{%- assign all_comments = include.all_comments -%}
{%- assign comment = include.comment -%}

{%- assign nesting_level_class = "" -%}
{%- if nesting_level > 0 -%}
{% capture nesting_level_class %} welcomments__nesting-level-{{ nesting_level }}{% endcapture %}
{%- endif -%}

{%- assign author_highlight = "" -%}
{%- if comment.author.role == "owner" -%}
{% capture author_highlight %} welcomments__comment-role-owner{% endcapture %}
{%- endif -%}

{%- capture comment_element_id -%}welcomments__comment-{{ comment.id }}{%- endcapture -%}
{%- capture comment_element_class -%}welcomments__comment{{nesting_level_class}}{{ author_highlight }}{%- endcapture -%}

{%- capture formatted_date -%}{{ comment.date | date: '%B %d, %Y' }}{%- endcapture -%}
{%- capture date_xml_schema -%}{{ comment.date | date_to_xmlschema }}{%- endcapture -%}
{%- capture comment_message -%}{{ comment.message | markdownify }}{%- endcapture -%}

{% if comment.author.avatar_url %}
{% capture author_avatar_url %}{{ comment.author.avatar_url }}{% endcapture %}
{% else %}
{% capture author_avatar_url %}https://eu.ui-avatars.com/api/?background=random&name={{ comment.author.name }}{% endcapture %}
{% endif %}

{%- include welcomments/template.html
id = comment.id
element_id = comment_element_id
element_classname = comment_element_class
nesting_level = nesting_level
formatted_date = formatted_date
date_xml_schema = date_xml_schema
author_name = comment.author.name
author_website = comment.author.website
author_avatar_url = author_avatar_url
message = comment_message
api_url = include.api_url
website_id = include.website_id -%}

{%- assign parent_id = comment.id -%}
{%- assign replies = all_comments | where_exp: "c", "c.replying_to == parent_id" -%}

{%- if replies.size > 0 -%}
{%- assign nesting_level = nesting_level | plus:1 -%}
{%- assign sorted_replies = replies | sort: 'id' -%}
{%- for reply in sorted_replies -%}
{%- include
welcomments/single_comment.html
nesting_level = nesting_level
all_comments = all_comments
comment = reply
api_url = include.api_url
website_id = include.website_id -%}
{%- endfor -%}
{%- endif -%}
43 changes: 43 additions & 0 deletions _includes/welcomments/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{%- assign id = include.id -%}
{%- assign element_id = include.element_id -%}
{%- assign element_classname = include.element_classname -%}
{%- assign nesting_level = include.nesting_level -%}
{%- assign formatted_date = include.formatted_date -%}
{%- assign date_xml_schema = include.date_xml_schema -%}
{%- assign author_name = include.author_name -%}
{%- assign author_website = include.author_website -%}
{%- assign avatar_url = include.author_avatar_url -%}
{%- assign message = include.message -%}

<article
id="{{ element_id }}"
class="{{ element_classname }}"
data-comment-id="{{ id }}"
data-author-name="{{ author_name }}"
data-nesting-level="{{ nesting_level }}"
itemprop="comment" itemscope itemtype="https://schema.org/Comment">
<div class="welcomments__comment-header">
<div class="welcomments__author-avatar">
<img class="welcomments__author-avatar-img" src="{{ avatar_url }}" alt="{{ author_name }}"/>
</div>
<div class="welcomments__author-information">
<div class="welcomments__author-name-and-time">
<h3 class="welcomments__author-name" itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">{{ author_name }}</span>
</h3>
<p class="welcomments__comment-time">
<a href="#welcomments__comment-{{ id }}" itemprop="url">
<time datetime="{{ date_xml_schema }}" itemprop="datePublished">
{{- formatted_date -}}
</time>
</a>
</p>
</div>
</div>
</div>
<div itemprop="text" class="welcomments__comment-message">{{ message }}</div>
<a class="welcomments__comment-reply-link"
href="{{ include.api_url }}/websites/{{ include.website_id }}/comments/{{ id }}/reply">
Reply to {{ author_name }}
</a>
</article>