195 lines
7.3 KiB
HTML
195 lines
7.3 KiB
HTML
<section class="js-comments staticman-comments">
|
|
|
|
{{ $slug := replace .URL "/" "" }}
|
|
|
|
{{ if .Site.Data.comments }}
|
|
{{ $comments := index $.Site.Data.comments $slug }}
|
|
{{ if $comments }}
|
|
{{ if gt (len $comments) 1 }}
|
|
<h3>{{ len $comments }} comments</h3>
|
|
{{ else }}
|
|
<h3>{{ len $comments }} comment</h3>
|
|
{{ end }}
|
|
{{ else }}
|
|
<h3>No comment</h3>
|
|
{{ end }}
|
|
|
|
<!-- Display main comments -->
|
|
{{ $.Scratch.Set "hasComments" 0 }}
|
|
{{ range $comments }}
|
|
{{ if not .replyThread }}
|
|
{{ $.Scratch.Add "hasComments" 1 }}
|
|
{{ $.Scratch.Set "hasReplies" 0 }}
|
|
{{ $.Scratch.Set "threadID" ._id }}
|
|
<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 "02 Jan 2006" .date }}</time></a></div>
|
|
<div class="comment-content"><p>{{ .comment | markdownify }}</p></div>
|
|
<div class="comment-reply-btn">
|
|
<a id="{{ ._id }}" class="btn" href="#comment-form" title="{{ ._id }}">Reply to this comment</a>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Display comment replies -->
|
|
{{ range $comments }}
|
|
{{ if eq .replyThread ($.Scratch.Get "threadID") }}
|
|
{{ $.Scratch.Add "hasReplies" 1 }}
|
|
<article id="comment-{{ $.Scratch.Get "hasComments" }}r{{ $.Scratch.Get "hasReplies" }}" class="static-comment static-comment-reply">
|
|
<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 }}
|
|
<h5 class="comment-reply-target"><a href="#{{ .replyID }}"><i class="fas fa-reply"></i> {{ .replyName }}</a></h5>
|
|
<div class="comment-timestamp"><a href="#comment-{{ $.Scratch.Get "hasComments" }}r{{ $.Scratch.Get "hasReplies" }}" title="Permalink to this comment"><time datetime="{{ .date }}">{{ dateFormat "02 Jan 2006" .date }}</time></a></div>
|
|
<div class="comment-content"><p>{{ .comment | markdownify }}</p></div>
|
|
<div class="comment-reply-btn">
|
|
<a id="{{ ._id }}" class="btn" href="#comment-form" title="{{ $.Scratch.Get "threadID" }}">Reply to this comment</a>
|
|
</div>
|
|
</article>
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
<!-- HTML comment form -->
|
|
<form id="comment-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="">
|
|
<input type="hidden" name="fields[replyThread]" value="">
|
|
<input type="hidden" name="fields[replyID]" value="">
|
|
<input type="hidden" name="fields[replyName]" value="">
|
|
|
|
{{ 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]" rows="12" cols="80" 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"/>
|
|
</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 type="submit" class="button">
|
|
Submit
|
|
</button>
|
|
<button type="reset" value="Reset">
|
|
Reset
|
|
</button>
|
|
</fieldset>
|
|
</form>
|
|
<!-- hyphen causes error in KaTeX's renderMathInElement -->
|
|
<div id="commentPreview" class="comment-preview"></div>
|
|
</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>
|
|
|
|
<!-- Alert user of the submission status -->
|
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
|
{{- if .Site.Params.staticman.recaptcha -}}
|
|
<script src='https://www.google.com/recaptcha/api.js'></script>
|
|
{{- end -}}
|
|
<script type="text/javascript">
|
|
// 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');
|
|
}
|
|
|
|
$('.comment-reply-btn a').click(function (){
|
|
$('input[name="fields[replyThread]"]').val(this.title);
|
|
$('input[name="fields[replyID]"]').val(this.id);
|
|
authorTag = $(this).parents('.static-comment').children('h4.comment-author');
|
|
$('input[name="fields[replyName]"]').val(authorTag.text());
|
|
$('.js-form fieldset button.button').text('Submit reply');
|
|
});
|
|
|
|
$('.js-form fieldset button[type="reset"]').click(function (){
|
|
$('input[name="fields[replyThread]"]').val("");
|
|
$('input[name="fields[replyID]"]').val("");
|
|
$('input[name="fields[replyName]"]').val("");
|
|
$('.js-form fieldset button.button').text('Submit');
|
|
});
|
|
|
|
$('.comment-reply-target a[href^="#"]').click(function (){
|
|
targetPostID = $(this).attr('href');
|
|
targetID = "#" + $(targetPostID).parents('.static-comment').attr('id');
|
|
$('html, body').animate({ scrollTop: $(targetID).offset().top }, 500);
|
|
});
|
|
})(jQuery);
|
|
</script>
|