Merge 3578dce54c into 3551425f3f
This commit is contained in:
Vincent Tam
GitHub
commit
a399fbe927
10
README.md
10
README.md
|
|
@ -73,6 +73,16 @@ __`Hyde-hyde`__ essentially inherits most of Hyde's [options](https://github.com
|
|||
* `UtterancesIssueTerm = "pathname"` Method for Utterances to match issue's to posts (pathname, url, title, og:title)
|
||||
* `UtterancesTheme = "github-light"` Theme for Utterances (github-light, github-dark)
|
||||
|
||||
* `[params.staticman]`: to use [Staticman](https://staticman.net/) for static comments.
|
||||
|
||||
```toml
|
||||
[params.staticman]
|
||||
api = "https://staticman3.herokuapp.com/v3/entry/{gitlab|github}/{username}/{repo}/{branch}/comments"
|
||||
[params.staticman.recaptcha]
|
||||
sitekey = # your own reCAPTCHA site key
|
||||
secret = # encrypt reCAPTCHA site secret with https://staticman3.herokuapp.com/v3/encrypt/{secret}
|
||||
```
|
||||
|
||||
* `[params.social]`: in this section, you can set many social identities such as Twitter, Facebook, Github, Bitbucket, Gitlab, Instagram, LinkedIn, StackOverflow, Medium, Xing, Keybase.
|
||||
|
||||
```toml
|
||||
|
|
|
|||
|
|
@ -41,6 +41,12 @@ theme = "hyde-hyde"
|
|||
# Table of contents
|
||||
#toc = none, "hugo", or "tocbot"
|
||||
|
||||
#[params.staticman]
|
||||
# api = "https://staticman3.herokuapp.com/v3/entry/{gitlab|github}/{username}/{repo}/{branch}/comments"
|
||||
#[params.staticman.recaptcha]
|
||||
# sitekey = # your own reCAPTCHA site key
|
||||
# secret = # encrypt reCAPTCHA site secret with https://staticman3.herokuapp.com/v3/encrypt/{secret}
|
||||
|
||||
## Social Accounts
|
||||
[params.social]
|
||||
github = "<username>"
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@ layout: 'portfolio'
|
|||
featured: 'true'
|
||||
---
|
||||
|
||||
[_Hyde-hyde_](https://github.com/htr3n/hyde-hyde) is a responsive [Hugo](https://gohugo.io) theme inspired by @spf13's [Hyde](https://github.com/spf13/hyde.git) and its variant [Nate Finch's blog](https://npf.io). It was heavily restructured with modularised page layouts for easier maintenance and modification. _Hyde-hyde_ offers awesome features such as nice colour tone, [code highlighting](https://highlightjs.org), [Font-Awesome 5's sidebar icons](https://fontawesome.com)), a cool portfolio page, more choices for commenting (e.g. [GraphComment](https://graphcomment.com), [Disqus](https://disqus.com)).
|
||||
[_Hyde-hyde_](https://github.com/htr3n/hyde-hyde) is a responsive [Hugo](https://gohugo.io) theme inspired by @spf13's [Hyde](https://github.com/spf13/hyde.git) and its variant [Nate Finch's blog](https://npf.io). It was heavily restructured with modularised page layouts for easier maintenance and modification. _Hyde-hyde_ offers awesome features such as nice colour tone, [code highlighting](https://highlightjs.org), [Font-Awesome 5's sidebar icons](https://fontawesome.com)), a cool portfolio page, more choices for commenting (e.g. [GraphComment](https://graphcomment.com), [Disqus](https://disqus.com), [Staticman](https://staticman.net)).
|
||||
|
|
|
|||
|
|
@ -11,4 +11,7 @@
|
|||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="/favicon.png">
|
||||
{{ partial "header/feeds.html" . }}
|
||||
{{- if .Site.Params.staticman -}}
|
||||
{{ partial "header/staticman-css.html" . }}
|
||||
{{- end -}}
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<link rel="stylesheet" href="{{ "css/staticman.css" | relURL }}" />
|
||||
|
|
@ -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 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>
|
||||
|
|
@ -5,5 +5,7 @@
|
|||
{{ partial "page-single/comment/graphcomment.html" . }}
|
||||
{{ else if .Site.Params.UtterancesRepo }}
|
||||
{{ partial "page-single/comment/utterances.html" . }}
|
||||
{{ else if .Site.Params.Staticman }}
|
||||
{{ partial "page-single/comment/staticman.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
.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 article {
|
||||
margin: 30px 0px 30px 0px;
|
||||
}
|
||||
|
||||
.staticman-comments .static-comment-reply {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.staticman-comments .comment-reply-btn a {
|
||||
margin: 0px 0px 14px 58px;
|
||||
}
|
||||
|
||||
.staticman-comments .comment-reply-target {
|
||||
margin: 0px 0px 0px 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;
|
||||
}
|
||||
|
|
@ -2,8 +2,8 @@ name = "hyde-hyde"
|
|||
license = "MIT"
|
||||
licenselink = "https://github.com/htr3n/hyde-hyde/blob/master/LICENSE.md"
|
||||
description = "A simply cool Hyde inspired theme"
|
||||
tags = ["blog", "theme", "hyde", "highlight.js", "font-awesome", "google analytics", "disqus", "personal", "syntax highlighting", "responsive", "graphcomment"]
|
||||
features = ["blog", "theme", "highlight.js", "font-awesome", "responsive", "disqus", "graphcomment", "portfolio"]
|
||||
tags = ["blog", "theme", "hyde", "highlight.js", "font-awesome", "google analytics", "disqus", "personal", "syntax highlighting", "responsive", "graphcomment", "staticman"]
|
||||
features = ["blog", "theme", "highlight.js", "font-awesome", "responsive", "disqus", "graphcomment", "portfolio", "staticman"]
|
||||
homepage = "https://github.com/htr3n/hyde-hyde"
|
||||
min_version = "0.43"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue