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
parent
fb32147148
commit
fdcaf16e2f
5 changed files with 143 additions and 1 deletions
11
_config.yml
11
_config.yml
|
|
@ -18,7 +18,7 @@ teaser : # filename of teaser fallback teaser image placed in
|
|||
# breadcrumbs : false # true, false (default)
|
||||
words_per_minute : 200
|
||||
comments:
|
||||
provider : # false (default), "disqus", "discourse", "facebook", "google-plus", custom"
|
||||
provider : "staticman" # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "custom"
|
||||
disqus:
|
||||
shortname : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
|
||||
discourse:
|
||||
|
|
@ -28,6 +28,15 @@ comments:
|
|||
appid :
|
||||
num_posts : # 5 (default)
|
||||
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:
|
||||
path : # blank (default) uses feed.xml
|
||||
|
||||
|
|
|
|||
22
_includes/comment.html
Normal file
22
_includes/comment.html
Normal 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>
|
||||
|
|
@ -9,6 +9,8 @@
|
|||
{% include /comments-providers/facebook.html %}
|
||||
{% when "google-plus" %}
|
||||
{% include /comments-providers/google-plus.html %}
|
||||
{% when "staticman" %}
|
||||
{% include /comments-providers/staticman.html %}
|
||||
{% when "custom" %}
|
||||
{% include /comments-providers/custom.html %}
|
||||
{% endcase %}
|
||||
|
|
|
|||
52
_includes/comments-providers/staticman.html
Normal file
52
_includes/comments-providers/staticman.html
Normal 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 %}
|
||||
|
|
@ -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>
|
||||
{% 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>
|
||||
{% 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" %}
|
||||
<section id="comments"></section>
|
||||
{% endcase %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue