Skip to content

Commit d1c8b2f

Browse files
VincentTamdaattali
VincentTam
authored and
daattali
committed
[Feature] Staticman v3 Support (daattali#440)
* Added Staicman support * Corrected template for staticman.yml * Edit for coherence with _includes/disqus.html * Updated documentation for Staticman * Updated License to give credits to Michale Rose * Update LICENSE * add more staticman details to readme * Clearer instructions about reCAPTCHA in YML * Nest reCAPTCHA param inside Staticman * Prepend all css selectors with .staticman-comments Edit suggested by theme owner to avoid CSS rules overriding. * Add myself to the change log * Update _config.yml
1 parent 018bac4 commit d1c8b2f

14 files changed

+976
-4
lines changed

‎CHANGELOG.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
# CHANGELOG
1+
# CHANGELOG
22

33
This file lists all non-trivial changes to Beautiful Jekyll.
44

55
I often make small changes to documentation, to the demo site, or to the general look-and-feel. These changes will not be listed here. Any other minor changes will also not be listed here.
66

7+
**2018-12-24** Add support for Staticman comments (#440) (thanks @VincentTam)
8+
79
**2018-10-19** Move Google Analytics to the head (#419) (thanks @jpvicari)
810

911
**2018-06-08** Add support for Facebook comments (#350) (thanks @npes87184)

‎LICENSE

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2016 Dean Attali
3+
Copyright (c) 2015-2018 Dean Attali
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +19,12 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121
SOFTWARE.
22+
23+
24+
25+
staticman integration
26+
=================================================================================
27+
28+
The MIT License (MIT)
29+
30+
Copyright (c) 2013-2018 Michael Rose

‎README.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,13 +104,21 @@ Many personalization settings in `_config.yml`, such as setting your name and si
104104

105105
### Allowing users to leave comments
106106

107-
If you want to enable comments on your site, Beautiful Jekyll supports either the [Disqus](https://disqus.com/) comments plugin or [Facebook](https://developers.facebook.com/docs/plugins/comments) comments.
107+
If you want to enable comments on your site, Beautiful Jekyll supports either the [Disqus](https://disqus.com/) comments plugin, [Facebook](https://developers.facebook.com/docs/plugins/comments) comments or [Staticman](https://staticman.net). If any of these are set in the configuration file, then all blog posts will have comments turned on by default. To turn off comments on a particular blog post, add `comments: false` to the YAML front matter. If you want to add comments on the bottom of a non-blog page, add `comments: true` to the YAML front matter.
108+
109+
#### Disqus comments
108110

109111
To use Disqus, simply sign up to [Disqus](https://disqus.com/) and add your Disqus shortname to the `disqus` parameter in the `_config.yml` file.
110112

113+
#### Facebook comments
114+
111115
To use Facebook comments, create a Facebook app using [Facebook developers](https://developers.facebook.com/docs/apps/register), and add the Facebook App ID to the `fb_comment_id` parameter in `_config.yml`.
112116

113-
If either `disqus` or `fb_comment_id` parameters are set in the configuration file, then all blog posts will have comments turned on by default. To turn off comments on a particular blog post, add `comments: false` to the YAML front matter. If you want to add comments on the bottom of a non-blog page, add `comments: true` to the YAML front matter.
117+
#### Staticman comments
118+
119+
To use Staticman, you first need to invite `staticmanlab` as a collaborator to your repository (by going to your repository **Settings** page, navigate to the **Collaborators** tab, and add the username `staticmanlab`), and then accept the invitation by going to `https://staticman3.herokuapp.com/v3/connect/github/<username>/<repo-name>`. Lastly, fill in your `repository` and `branch` in `_config.yml`. If you're not using `master` branch, then you also need to update the `branch` parameter in `staticman.yml`.
120+
121+
![Staicman invitation screenshot](https://user-images.githubusercontent.com/5748535/50357920-e8f25500-0557-11e9-9cb6-73f8b575c4f0.png)
114122

115123
### Adding Google Analytics to track page views
116124

‎_config.yml

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,17 @@ url-pretty: "MyWebsite.com" # eg. "deanattali.com/beautiful-jekyll"
129129
# To use Facebook Comments, fill in a Facebook App ID
130130
# fb_comment_id: ""
131131

132+
# Staticman support
133+
staticman:
134+
repository : # GitHub username/repo-name e.g. "daattali/beautiful-jekyll"
135+
branch : # "master"
136+
endpoint : # URL of your own deployment with trailing slash, will fallback to the public GitLab instance
137+
# reCaptcha for Staticman (OPTIONAL)
138+
# If you use recaptcha, you must also set these parameters in staticman.yml
139+
reCaptcha:
140+
siteKey : # Use your OWN site key. You may apply to Google for one.
141+
secret : # (!) ENCRYPT your password by opening https://staticman3.herokuapp.com/v3/encrypt/{your-site-secret}
142+
132143
# --- Misc --- #
133144

134145
# Facebook App ID

‎_data/ui-text.yml

Lines changed: 494 additions & 0 deletions
Large diffs are not rendered by default.

‎_includes/head.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,4 +123,9 @@
123123
{% include matomo.html %}
124124
{% endif %}
125125

126+
<!-- Staticman -->
127+
{% if page.comments and site.staticman.repository and site.staticman.branch %}
128+
<link rel="stylesheet" href="{{ "/css/staticman.css" | prepend: site.baseurl }}" />
129+
{% endif %}
130+
126131
</head>

‎_includes/staticman-comment.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<article id="comment{{ include.index }}" class="js-comment comment" itemprop="comment" itemscope itemtype="https://schema.org/Comment">
2+
<div class="comment__avatar-wrapper">
3+
<img class="comment__avatar" src="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=80" alt="{{ include.name }}">
4+
</div>
5+
<div class="comment__content-wrapper">
6+
<h4 class="comment__author" itemprop="author" itemscope itemtype="https://schema.org/Person">
7+
{% unless include.url == blank %}
8+
<span itemprop="name"><a rel="external nofollow" itemprop="url" href="{{ include.url }}">{{ include.name }}</a></span>
9+
{% else %}
10+
<span itemprop="name">{{ include.name }}</span>
11+
{% endunless %}
12+
</h4>
13+
<p class="comment__date">
14+
{% if include.date %}
15+
{% if include.index %}<a href="#comment{{ include.index }}" itemprop="url">{% endif %}
16+
<time datetime="{{ include.date | date_to_xmlschema }}" itemprop="datePublished">{{ include.date | date: "%B %d, %Y at %I:%M %p" }}</time>
17+
{% if include.index %}</a>{% endif %}
18+
{% endif %}
19+
</p>
20+
<div itemprop="text">{{ include.message | markdownify }}</div>
21+
</div>
22+
</article>

‎_includes/staticman-comments.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
{% if site.staticman.repository and site.staticman.branch %}
2+
<div class="page__comments">
3+
<!-- Start static comments -->
4+
<div class="js-comments">
5+
{% if site.data.comments[page.slug] %}
6+
<h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_title | default: "Comments" }}</h3>
7+
{% assign comments = site.data.comments[page.slug] | sort %}
8+
{% for comment in comments %}
9+
{% assign email = comment[1].email %}
10+
{% assign name = comment[1].name %}
11+
{% assign url = comment[1].url %}
12+
{% assign date = comment[1].date %}
13+
{% assign message = comment[1].message %}
14+
{% include staticman-comment.html index=forloop.index email=email name=name url=url date=date message=message %}
15+
{% endfor %}
16+
{% endif %}
17+
</div>
18+
<!-- End static comments -->
19+
<!-- Start new comment form -->
20+
<div class="page__comments-form">
21+
<h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h3>
22+
<p class="small">{{ site.data.ui-text[site.locale].comment_form_info | default: "Your email address will not be published. Required fields are marked" }} <span class="required">*</span></p>
23+
<form id="new_comment" class="page__comments-form js-form form" method="post" action="{{ site.staticman.endpoint | default: 'https://staticman3.herokuapp.com/v3/entry/github/' }}{{ site.staticman.repository }}/{{ site.staticman.branch }}/comments">
24+
<div class="form-group">
25+
<label for="comment-form-message">{{ site.data.ui-text[site.locale].comment_form_comment_label | default: "Comment" }} <small class="required">*</small></label><br>
26+
<textarea type="text" rows="12" cols="36" id="comment-form-message" name="fields[message]" tabindex="1"></textarea>
27+
<div class="small help-block"><a href="https://daringfireball.net/projects/markdown/">{{ site.data.ui-text[site.locale].comment_form_md_info | default: "Markdown is supported." }}</a></div>
28+
</div>
29+
<div class="form-group">
30+
<label for="comment-form-name">{{ site.data.ui-text[site.locale].comment_form_name_label | default: "Name" }} <small class="required">*</small></label>
31+
<input type="text" id="comment-form-name" name="fields[name]" tabindex="2" />
32+
</div>
33+
<div class="form-group">
34+
<label for="comment-form-email">{{ site.data.ui-text[site.locale].comment_form_email_label | default: "Email address" }} <small class="required">*</small></label>
35+
<input type="email" id="comment-form-email" name="fields[email]" tabindex="3" />
36+
</div>
37+
<div class="form-group">
38+
<label for="comment-form-url">{{ site.data.ui-text[site.locale].comment_form_website_label | default: "Website (optional)" }}</label>
39+
<input type="url" id="comment-form-url" name="fields[url]" tabindex="4"/>
40+
</div>
41+
<div class="form-group hidden" style="display: none;">
42+
<input type="hidden" name="options[origin]" value="{{ page.url | absolute_url }}">
43+
<input type="hidden" name="options[slug]" value="{{ page.slug }}">
44+
<label for="comment-form-location">Not used. Leave blank if you are a human.</label>
45+
<input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/>
46+
{% if site.staticman.reCaptcha.siteKey %}<input type="hidden" name="options[reCaptcha][siteKey]" value="{{ site.staticman.reCaptcha.siteKey }}">{% endif %}
47+
{% if site.staticman.reCaptcha.secret %}<input type="hidden" name="options[reCaptcha][secret]" value="{{ site.staticman.reCaptcha.secret }}">{% endif %}
48+
</div>
49+
<!-- Start comment form alert messaging -->
50+
<p class="hidden js-notice">
51+
<strong class="js-notice-text"></strong>
52+
</p>
53+
<!-- End comment form alert messaging -->
54+
{% if site.staticman.reCaptcha.siteKey %}
55+
<div class="form-group">
56+
<div class="g-recaptcha" data-sitekey="{{ site.staticman.reCaptcha.siteKey }}"></div>
57+
</div>
58+
{% endif %}
59+
<div class="form-group">
60+
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--primary btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
61+
</div>
62+
</form>
63+
</div>
64+
<!-- End new comment form -->
65+
<!-- Load reCaptcha if site key is set -->
66+
{% if site.staticman.reCaptcha.siteKey %}
67+
<script async src="https://www.google.com/recaptcha/api.js"></script>
68+
{% endif %}
69+
</div>
70+
<!-- Load script to handle comment form submission -->
71+
{% include staticman-script.html %}
72+
{% endif %}

‎_includes/staticman-script.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{% if site.staticman.repository and site.staticman.branch %}
2+
<!-- doing something a bit funky here because I want to be careful not to include JQuery twice! -->
3+
<script>
4+
if (typeof jQuery == 'undefined') {
5+
document.write('<script src="/beautiful-jekyll/js/jquery-1.11.2.min.js"></scr' + 'ipt>');
6+
}
7+
</script>
8+
<script>
9+
(function ($) {
10+
var $comments = $('.js-comments');
11+
12+
$('#new_comment').submit(function () {
13+
var form = this;
14+
15+
$(form).addClass('disabled');
16+
17+
$.ajax({
18+
type: $(this).attr('method'),
19+
url: $(this).attr('action'),
20+
data: $(this).serialize(),
21+
contentType: 'application/x-www-form-urlencoded',
22+
success: function (data) {
23+
$('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
24+
$('.page__comments-form .js-notice').removeClass('notice--danger');
25+
$('.page__comments-form .js-notice').addClass('notice--success');
26+
showAlert('{{ 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." }}');
27+
},
28+
error: function (err) {
29+
console.log(err);
30+
$('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}');
31+
$('.page__comments-form .js-notice').removeClass('notice--success');
32+
$('.page__comments-form .js-notice').addClass('notice--danger');
33+
showAlert('{{ 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." }}');
34+
$(form).removeClass('disabled');
35+
}
36+
});
37+
38+
return false;
39+
});
40+
41+
function showAlert(message) {
42+
$('.page__comments-form .js-notice').removeClass('hidden');
43+
$('.page__comments-form .js-notice-text').html(message);
44+
}
45+
})(jQuery);
46+
</script>
47+
{% endif %}

‎_layouts/page.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
{% include disqus.html %}
1414
</div>
1515
{% include fb-comment.html %}
16+
<div class="staticman-comments">
17+
{% include staticman-comments.html %}
18+
</div>
1619
{% endif %}
1720
</div>
1821
</div>

‎_layouts/post.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@
7070
{% include disqus.html %}
7171
</div>
7272
{% include fb-comment.html %}
73+
<div class="staticman-comments">
74+
{% include staticman-comments.html %}
75+
</div>
7376
{% endif %}
7477
</div>
7578
</div>

‎_posts/2015-02-28-test-markdown.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ subtitle: Each post also has a subtitle
55
gh-repo: daattali/beautiful-jekyll
66
gh-badge: [star, fork, follow]
77
tags: [test]
8+
comments: true
89
---
910

1011
You can write regular [markdown](http://markdowntutorial.com/) here and Jekyll will automatically convert it to a nice webpage. I strongly encourage you to [take 5 minutes to learn how to write in markdown](http://markdowntutorial.com/) - it'll teach you how to transform regular text into bold/italics/headings/tables/etc.

0 commit comments

Comments
 (0)