Permalink
Browse files

Add staticman support (static comments coupled with Github pull request)

  • Loading branch information...
badele committed Nov 17, 2017
1 parent 7cdd0e0 commit 8a0d06525df5eb946022622547be7a3cddf83a14
View
@@ -63,6 +63,21 @@ Client side highlighting does not require pygments to be installed. This current
To use this feature, uncomment and fill out the `disqusShortname` parameter in `config.toml`.
### Staticman support
Add *staticman* configuration section in `config.toml` or `config.yaml`
Sample configuration
```
staticman:
api: https://api.staticman.net/v2/entry/badele/blog.jesuislibre.org/master/comments
pulls: https://github.com/badele/blog.jesuislibre.org/pulls
recaptcha:
sitekey: "6LeGeTgUAAAAAAqVrfTwox1kJQFdWl-mLzKasV0v"
secret: "hsGjWtWHR4HK4pT7cUsWTArJdZDxxE2pkdg/ArwCguqYQrhuubjj3RS9C5qa8xu4cx/Y9EwHwAMEeXPCZbLR9eW1K9LshissvNcYFfC/b8KKb4deH4V1+oqJEk/JcoK6jp6Rr2nZV4rjDP9M7nunC3WR5UGwMIYb8kKhur9pAic="
```
### Google Analytics
To add Google Analytics, simply sign up to [Google Analytics](http://www.google.com/analytics/) to obtain your Google Tracking ID, and add this tracking ID to the `googleAnalytics` parameter in `config.toml`.
View
@@ -1,6 +1,8 @@
# Content
- id: dateFormat
translation: "02.01.2006"
- id: shortdateFormat
translation: "2 Jan, 2006 15:04:05"
- id: postedOnDate
translation: "Gepostet am {{ .Count }}"
- id: translationsLabel
View
@@ -1,6 +1,8 @@
# Content
- id: dateFormat
translation: "January 2, 2006"
- id: shortdateFormat
translation: "Jan 2, 2006 15:04:05"
- id: postedOnDate
translation: "Posted on {{ .Count }}"
- id: translationsLabel
@@ -37,4 +39,3 @@
translation: "Search {{ .Site.Title }}"
- id: gcseClose
translation: "Close"
View
@@ -1,6 +1,8 @@
# Content
- id: dateFormat
translation: "2 de enero, 2006"
- id: shortdateFormat
translation: "2 Jan, 2006 15:04:05"
- id: postedOnDate
translation: "Publicado el {{ .Count }}"
- id: translationsLabel
View
@@ -1,6 +1,8 @@
# Content
- id: dateFormat
translation: "January 2, 2006"
- id: shortdateFormat
translation: "2 Jan, 2006 15:04:05"
- id: postedOnDate
translation: "Posté le {{ .Count }}"
- id: translationsLabel
View
@@ -1,6 +1,8 @@
# Content
- id: dateFormat
translation: "2006年1月2日"
- id: shortdateFormat
translation: "2 Jan, 2006 15:04:05"
- id: postedOnDate
translation: "{{ .Count }}に投稿"
- id: translationsLabel
@@ -35,4 +37,3 @@
translation: "{{ .Site.Title }}を検索"
- id: gcseClose
translation: "閉じる"
View
@@ -1,6 +1,8 @@
# Content
- id: dateFormat
translation: "02.01.2006"
- id: shortdateFormat
translation: "2 Jan, 2006 15:04:05"
- id: postedOnDate
translation: "Opublikowany {{ .Count }}"
- id: translationsLabel
@@ -37,4 +39,3 @@
translation: "Szukaj {{ .Site.Title }}"
- id: gcseClose
translation: "Zamknij"
View
@@ -1,6 +1,8 @@
# Content
- id: dateFormat
translation: "Январь 2, 2006"
- id: shortdateFormat
translation: "2 Jan, 2006 15:04:05"
- id: postedOnDate
translation: "Опубликовано {{ .Count }}"
- id: translationsLabel
@@ -37,4 +39,3 @@
translation: "Поиск по {{ .Site.Title }}"
- id: gcseClose
translation: "Закрыть"
View
@@ -1,6 +1,8 @@
# Content
- id: dateFormat
translation: "January 2, 2006"
- id: shortdateFormat
translation: "2 Jan, 2006 15:04:05"
- id: postedOnDate
translation: "发表于 {{ .Count }}"
- id: translationsLabel
@@ -37,4 +39,3 @@
translation: "搜索 {{ .Site.Title }}"
- id: gcseClose
translation: "关闭"
@@ -19,12 +19,18 @@
{{ end }}
</ul>
{{ if (.Params.comments) | or (and (or (not (isset .Params "comments")) (eq .Params.comments nil)) (.Site.Params.comments)) }}
{{ if .Site.DisqusShortname }}
<div class="disqus-comments">
{{ template "_internal/disqus.html" . }}
</div>
{{ end }}
{{ if .Site.Params.staticman }}
<div class="staticman-comments">
{{ partial "staticman-comments.html" . }}
</div>
{{ end }}
{{ end }}
</div>
@@ -58,6 +58,9 @@
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="{{ "js/main.js" | absURL }}"></script>
{{- if .Site.Params.staticman }}
<script src="{{ "js/staticman.js" | absURL }}"></script>
{{- end }}
{{- if (not ( .Site.Params.UseChroma )) }}
<script src="{{ "js/highlight.min.js" | absURL }}"></script>
<script> hljs.initHighlightingOnLoad(); </script>
@@ -42,6 +42,9 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="{{ "css/main.css" | absURL }}" />
{{- if .Site.Params.staticman -}}
<link rel="stylesheet" href="{{ "css/staticman.css" | absURL }}" />
{{- end -}}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
{{- if (not ( .Site.Params.UseChroma )) }}
@@ -52,6 +55,10 @@
<link rel="stylesheet" href="{{ "css/syntax.css" | absURL }}" />
{{- end -}}
{{- if .Site.Params.staticman.recaptcha -}}
<script src='https://www.google.com/recaptcha/api.js'></script>
{{- end -}}
{{- partial "head_custom.html" . }}
{{- partial "load-photoswipe-theme.html" . }}
{{ template "_internal/google_analytics_async.html" . }}
@@ -0,0 +1,84 @@
<section class="js-comments staticman-comments">
<h3>Comments</h3>
{{ $slug := replace .URL "/" "" }}
{{ $.Scratch.Add "hasComments" 0 }}
<!-- Parse all parent comment -->
{{ range $index, $comments := (index $.Site.Data.comments $slug ) }}
<!-- Check if comment has 0 parent -->
{{ if eq $index "0" }}
{{ range $comments}}
{{ $.Scratch.Add "hasComments" 1 }}
<article id="comment-{{ $.Scratch.Get "hasComments" }}" class="static-comment">
<img class="comment-avatar" src="https://www.gravatar.com/avatar/{{ .email }}?s=48">
{{ if .website }}
<h4 class="comment-author"><a rel="external nofollow" href="{{ .website }}">{{ .name }}</a></h4>
{{ else }}
<h4 class="comment-author">{{ .name }}</h4>
{{ end }}
<div class="comment-timestamp"><a href="#comment-{{ $.Scratch.Get "hasComments" }}" title="Permalink to this comment"><time datetime="{{ .date }}">{{ dateFormat (default (i18n "shortdateFormat") .Site.Params.dateformat) .date}}</time></a></div>
<div class="comment-content"><p>{{ .comment | markdownify }}</p></div>
</article>
{{ end }}
{{ end }}
{{ end }}
<form class="js-form form" method="post" action="{{ .Site.Params.staticman.api}}">
<input type="hidden" name="options[slug]" value="{{ replace .URL "/" "" }}">
<input type="hidden" name="options[parent]" value="0">
{{ if .Site.Params.staticman.recaptcha }}
<input type="hidden" name="options[reCaptcha][siteKey]" value="{{ .Site.Params.staticman.recaptcha.sitekey }}">
<input type="hidden" name="options[reCaptcha][secret]" value="{{ .Site.Params.staticman.recaptcha.secret }}">
{{ end }}
<fieldset>
<div class="textfield">
<textarea name="fields[comment]" type="text" placeholder="You can use Markdown syntax"></textarea>
</div>
</fieldset>
<fieldset>
<div class="textfield">
<input name="fields[name]" type="text" placeholder="Your name"/>
</div>
</fieldset>
<fieldset>
<div class="textfield">
<input type="email" name="fields[email]" placeholder="Your email (optional, used only to send comments.)"/>
</div>
</fieldset>
<fieldset>
<div class="textfield">
<input type="text" name="fields[website]" placeholder="Your website"/>
</div>
</fieldset>
{{ if .Site.Params.staticman.recaptcha }}
<fieldset>
<div class="g-recaptcha" data-sitekey="{{ .Site.Params.staticman.recaptcha.sitekey }}"></div>
</fieldset>
{{ end }}
<fieldset>
<button class="button">
Submit
</button>
</fieldset>
</form>
</section>
<article class="modal">
<div class="title">
<h2 class="js-modal-title"></h2>
</div>
<div class="js-modal-text"></div>
<div>
<button class="js-close-modal">Close</button>
</div>
</article>
View
@@ -0,0 +1,92 @@
.staticman-comments {
padding: 20px 0px 0px 0px;
}
.staticman-comments .comment-content{
border-top: 1px solid #EEEEEE;
padding: 4px 0px 30px 0px;
}
.staticman-comments .comment-content p {
padding: 5px 0px 5px 0px;
margin: 5px 58px 0px 58px;
}
.staticman-comments .textfield {
width: 420px;
max-width: 100%;
padding: 0.5rem 0;
width: 100%;
}
.staticman-comments input {
border: 1px solid rgba(0,0,0,0.12);
padding: 4px 5px;
width: 100%;
}
.staticman-comments .g-recaptcha {
padding: 0.5rem 0;
}
.staticman-comments textarea {
border: 1px solid rgba(0,0,0,0.12);
padding: 4px 5px;
vertical-align: top;
height: 10em;
width: 100%;
}
.staticman-comments .comment-avatar {
float:left;
width: 48;
height: 48;
margin-right: 10px;
}
.staticman-comments .show-modal {
overflow: hidden;
position: relative;
}
.staticman-comments .show-modal:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: rgba(0, 0, 0, 0.85);
}
.show-modal .modal {
display: block;
}
.modal {
display: none;
position: fixed;
width: 300px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
min-height: 0;
height: 30%
z-index: 9999;
padding: 0.5rem;
border: 1px solid rgba(0,0,0,0.25);
background-color: rgba(220,220,220,0.9);
height: 10em;
}
form--loading:before {
content: '';
}
.form--loading .form__spinner {
display: block;
}
View
@@ -0,0 +1,40 @@
// Static comments
// from: https://github.com/eduardoboucas/popcorn/blob/gh-pages/js/main.js
(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('Perfect !', '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('Error', 'Sorry, there was an error with the submission!');
$(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);
Oops, something went wrong.

0 comments on commit 8a0d065

Please sign in to comment.