Add Staticman support
This commit is contained in:
Vincent Tam
parent
8edca610b2
commit
149e68c127
6 changed files with 328 additions and 0 deletions
|
|
@ -41,6 +41,13 @@ theme = "hyde-hyde"
|
||||||
# Table of contents
|
# Table of contents
|
||||||
#toc = none, "hugo", or "tocbot"
|
#toc = none, "hugo", or "tocbot"
|
||||||
|
|
||||||
|
[Params.staticman]
|
||||||
|
api = "https://staticman3.herokuapp.com/v3/entry/gitlab/vincenttam/hyde-hyde-demo/master/comments"
|
||||||
|
[Params.staticman.recaptcha]
|
||||||
|
sitekey = "6Lcv8G8UAAAAAEqV1Y-XEPum00C_DxhD6O--qkFo"
|
||||||
|
secret = "p5uHlH9hCqpMJaGKXdt5MEWFo7K6fX8hoYUwR3aIafOI6rtItLauaDCkGOucysJtrVZy+sHffioGzMsOU64JFDSyPQgrXujegcOHFRXHhD4fOUuBXSvV+OZ8JhSPTGWaRcQcoiGX4pT5hlebLddOl59b6sn6kU1ODQcEbhP83xVLZlaTWOrNrF5Wvy3TMXpH5gyl1tZEORxADAShMYyUbNR7XZYLEg1DfgIBHfIg3cKwdFt7KVLejFGKIiBYRAZDE2JuHItNmzJ2x9JgSK3E+XnShV5tuWpncnyFonJVHGEky/zRfUVLHobDMcJ/u9nlZqE8u47W+833F1WaIYuwNw=="
|
||||||
|
|
||||||
|
|
||||||
## Social Accounts
|
## Social Accounts
|
||||||
[params.social]
|
[params.social]
|
||||||
github = "<username>"
|
github = "<username>"
|
||||||
|
|
|
||||||
|
|
@ -11,4 +11,7 @@
|
||||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
|
||||||
<link rel="shortcut icon" href="/favicon.png">
|
<link rel="shortcut icon" href="/favicon.png">
|
||||||
{{ partial "header/feeds.html" . }}
|
{{ partial "header/feeds.html" . }}
|
||||||
|
{{- if .Site.Params.staticman -}}
|
||||||
|
{{ partial "header/staticman-css.html" . }}
|
||||||
|
{{- end -}}
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
1
layouts/partials/header/staticman-css.html
Normal file
1
layouts/partials/header/staticman-css.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<link rel="stylesheet" href="{{ "css/staticman.css" | absURL }}" />
|
||||||
195
layouts/partials/page-single/comment/staticman.html
Normal file
195
layouts/partials/page-single/comment/staticman.html
Normal file
|
|
@ -0,0 +1,195 @@
|
||||||
|
<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 message</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>
|
||||||
|
|
@ -5,5 +5,7 @@
|
||||||
{{ partial "page-single/comment/graphcomment.html" . }}
|
{{ partial "page-single/comment/graphcomment.html" . }}
|
||||||
{{ else if .Site.Params.UtterancesRepo }}
|
{{ else if .Site.Params.UtterancesRepo }}
|
||||||
{{ partial "page-single/comment/utterances.html" . }}
|
{{ partial "page-single/comment/utterances.html" . }}
|
||||||
|
{{ else if .Site.Params.Staticman }}
|
||||||
|
{{ partial "page-single/comment/staticman.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
120
static/css/staticman.css
Normal file
120
static/css/staticman.css
Normal file
|
|
@ -0,0 +1,120 @@
|
||||||
|
.staticman-comments {
|
||||||
|
padding: 20px 0px 0px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staticman-comments .comment-content {
|
||||||
|
border-top: 1px solid #EEEEEE;
|
||||||
|
padding: 4px 0px 4px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staticman-comments .comment-content > * {
|
||||||
|
padding: 5px 0px 5px 0px;
|
||||||
|
margin: 5px 58px 0px 58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staticman-comments .textfield {
|
||||||
|
max-width: 100%;
|
||||||
|
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-preview {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staticman-comments .comment-avatar {
|
||||||
|
float: left;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staticman-comments .comment-author {
|
||||||
|
margin: 0px 0px 0px 58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.staticman-comments .comment-timestamp {
|
||||||
|
margin-left: 58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.staticman-comments .static-comment-reply {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staticman-comments .comment-reply-btn a {
|
||||||
|
margin: 0px 0px 14px 58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staticman-comments .js-form {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.staticman-comments .js-form fieldset {
|
||||||
|
padding: unset;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue