Add includes for static-based comments powered by Staticman

- Configure Staticman with sane defaults
- Build comment form to capture new comments and ajax data to Staticman
- Build comments view that iterates over `_data/comments/post-slug/*.yml` files
This commit is contained in:
Michael Rose 2016-08-10 16:08:13 -04:00
parent fb32147148
commit fdcaf16e2f
5 changed files with 143 additions and 1 deletions

View file

@ -18,7 +18,7 @@ teaser : # filename of teaser fallback teaser image placed in
# breadcrumbs : false # true, false (default) # breadcrumbs : false # true, false (default)
words_per_minute : 200 words_per_minute : 200
comments: comments:
provider : # false (default), "disqus", "discourse", "facebook", "google-plus", custom" provider : "staticman" # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "custom"
disqus: disqus:
shortname : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname- shortname : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
discourse: discourse:
@ -28,6 +28,15 @@ comments:
appid : appid :
num_posts : # 5 (default) num_posts : # 5 (default)
colorscheme : # "light" (default), "dark" colorscheme : # "light" (default), "dark"
staticman:
allowedFields : ['name', 'email', 'url', 'message']
branch : # "master", "gh-pages"
format : "yml"
moderation : true
path : "_data/comments/{options.slug}"
requiredFields : ['name', 'email', 'message']
transforms:
email : "md5"
atom_feed: atom_feed:
path : # blank (default) uses feed.xml path : # blank (default) uses feed.xml

22
_includes/comment.html Normal file
View file

@ -0,0 +1,22 @@
<article id="comment{{ include.index }}" class="js-comment comment">
<div class="comment__avatar-wrapper">
<img class="comment__avatar" src="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=80">
</div>
<div class="comment__content-wrapper">
<h3 class="comment__author">
{% if (include.url) and (include.url != '@url') %}
<a rel="nofollow" href="{{ include.url }}">{{ include.name }}</a>
{% else %}
{{ include.name }}
{% endif %}
</h3>
<p class="comment__date">
{% if include.date %}
{% if include.index %}<a href="#comment{{ include.index }}">{% endif %}
<time datetime="{{ include.date | date_to_xmlschema }}">{{ include.date | date: "%B %d, %Y at %I:%M %p" }}</time>
{% if include.index %}</a>{% endif %}
{% endif %}
</p>
{{ include.message | markdownify }}
</div>
</article>

View file

@ -9,6 +9,8 @@
{% include /comments-providers/facebook.html %} {% include /comments-providers/facebook.html %}
{% when "google-plus" %} {% when "google-plus" %}
{% include /comments-providers/google-plus.html %} {% include /comments-providers/google-plus.html %}
{% when "staticman" %}
{% include /comments-providers/staticman.html %}
{% when "custom" %} {% when "custom" %}
{% include /comments-providers/custom.html %} {% include /comments-providers/custom.html %}
{% endcase %} {% endcase %}

View file

@ -0,0 +1,52 @@
{% if site.repository and site.staticman.branch %}
<!-- Start comment form modal -->
<article class="modal">
<h2 class="modal__title js-modal-title"></h2>
<div class="modal__supporting-text js-modal-text"></div>
<div class="modal__actions">
<button class="btn btn--danger js-close-modal">Close</button>
</div>
</article>
<!-- End comment form modal -->
<script>
(function ($) {
var $comments = $('.js-comments');
$('.js-form').submit(function () {
var form = this;
$(form).addClass('form--loading');
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
contentType: 'application/x-www-form-urlencoded',
success: function (data) {
showModal('{{ site.data.ui-text[site.locale].comment_success_title | default: "Comment submitted" }}', '{{ site.data.ui-text[site.locale].comment_success_msg | default: "Thanks for your comment! It will show on the site once it has been approved." }}');
$(form).removeClass('form--loading');
},
error: function (err) {
console.log(err);
showModal('{{ site.data.ui-text[site.locale].comment_error_title | default: "Error" }}', '{{ site.data.ui-text[site.locale].comment_error_msg | default: "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." }}');
$(form).removeClass('form--loading');
}
});
return false;
});
$('.js-close-modal').click(function () {
$('body').removeClass('show-modal');
});
function showModal(title, message) {
$('.js-modal-title').text(title);
$('.js-modal-text').html(message);
$('body').addClass('show-modal');
}
})(jQuery);
</script>
{% endif %}

View file

@ -9,6 +9,63 @@
<section class="fb-comments" data-href="{{ base_path }}{{ page.url }}" data-mobile="true" data-num-posts="{{ site.comments.facebook.num_posts | default: 5 }}" data-width="100%" data-colorscheme="{{ site.comments.facebook.colorscheme | default: 'light' }}"></section> <section class="fb-comments" data-href="{{ base_path }}{{ page.url }}" data-mobile="true" data-num-posts="{{ site.comments.facebook.num_posts | default: 5 }}" data-width="100%" data-colorscheme="{{ site.comments.facebook.colorscheme | default: 'light' }}"></section>
{% when "google-plus" %} {% when "google-plus" %}
<section class="g-comments" data-href="{{ base_path }}{{ page.url }}" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD">Loading Google+ Comments ...</section> <section class="g-comments" data-href="{{ base_path }}{{ page.url }}" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD">Loading Google+ Comments ...</section>
{% when "staticman" %}
<section id="comments">
{% if site.repository and site.staticman.branch %}
<!-- Start new comment form -->
<form class="js-form form" method="post" action="https://api.staticman.net/v1/entry/{{ site.repository }}/{{ site.staticman.branch }}">
<div class="form__spinner">
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
<fieldset>
<label for="comment-form-name">Your name <small class="required">*</small></label>
<input type="text" id="comment-form-name" name="fields[name]" tabindex="1" />
</fieldset>
<fieldset>
<label for="comment-form-email">Email address <small class="required">*</small></label>
<input type="email" id="comment-form-email" name="fields[email]" tabindex="2" />
<div class="small help-block">Your email address will remain private and won't be shared with anyone.</div>
</fieldset>
<fieldset>
<label for="comment-form-url">Website <small>(optional)</small></label>
<input type="url" id="comment-form-url" name="fields[url]" tabindex="3"/>
</fieldset>
<fieldset>
<label for="comment-form-message">Your comment <small class="required">*</small></label>
<textarea type="text" rows="3" id="comment-form-message" name="fields[message]" tabindex="4"></textarea>
<div class="small help-block"><a href="https://daringfireball.net/projects/markdown/">Markdown</a> is supported.</div>
</fieldset>
<fieldset class="hidden">
<input type="hidden" name="options[slug]" value="{{ page.slug }}">
<input type="hidden" name="fields[hidden]"/>
</fieldset>
<fieldset>
<button class="btn btn--large">Submit</button>
</fieldset>
</form>
<!-- End new comment form -->
<!-- Start static comments -->
<div class="js-comments">
{% if site.data.comments[page.slug] %}
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_title | default: "Comments" }}</h4>
{% assign comments = site.data.comments[page.slug] | sort %}
{% for comment in comments %}
{% assign email = comment[1].email %}
{% assign name = comment[1].name %}
{% assign url = comment[1].url %}
{% assign date = comment[1].date %}
{% assign message = comment[1].message %}
{% include comment.html index=forloop.index email=email name=name url=url date=date message=message %}
{% endfor %}
{% endif %}
</div>
<!-- End static comments -->
{% endif %}
</section>
{% when "custom" %} {% when "custom" %}
<section id="comments"></section> <section id="comments"></section>
{% endcase %} {% endcase %}