From 149e68c12771414d21941e8ccd425c60f0c585f2 Mon Sep 17 00:00:00 2001 From: Vincent Tam Date: Thu, 13 Dec 2018 01:28:45 +0100 Subject: [PATCH 1/5] Add Staticman support --- exampleSite/config.toml | 7 + layouts/partials/header.html | 3 + layouts/partials/header/staticman-css.html | 1 + .../page-single/comment/staticman.html | 195 ++++++++++++++++++ .../partials/page-single/post-comment.html | 2 + static/css/staticman.css | 120 +++++++++++ 6 files changed, 328 insertions(+) create mode 100644 layouts/partials/header/staticman-css.html create mode 100644 layouts/partials/page-single/comment/staticman.html create mode 100644 static/css/staticman.css diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 05db08a..d1d9aaf 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -41,6 +41,13 @@ theme = "hyde-hyde" # Table of contents #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 [params.social] github = "" diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 4bbc0f5..6f9293e 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -11,4 +11,7 @@ {{ partial "header/feeds.html" . }} + {{- if .Site.Params.staticman -}} + {{ partial "header/staticman-css.html" . }} + {{- end -}} diff --git a/layouts/partials/header/staticman-css.html b/layouts/partials/header/staticman-css.html new file mode 100644 index 0000000..b2aecfc --- /dev/null +++ b/layouts/partials/header/staticman-css.html @@ -0,0 +1 @@ + diff --git a/layouts/partials/page-single/comment/staticman.html b/layouts/partials/page-single/comment/staticman.html new file mode 100644 index 0000000..07329cf --- /dev/null +++ b/layouts/partials/page-single/comment/staticman.html @@ -0,0 +1,195 @@ +
+ + {{ $slug := replace .URL "/" "" }} + + {{ if .Site.Data.comments }} + {{ $comments := index $.Site.Data.comments $slug }} + {{ if $comments }} + {{ if gt (len $comments) 1 }} +

{{ len $comments }} comments

+ {{ else }} +

{{ len $comments }} comment

+ {{ end }} + {{ else }} +

No comment

+ {{ end }} + + + {{ $.Scratch.Set "hasComments" 0 }} + {{ range $comments }} + {{ if not .replyThread }} + {{ $.Scratch.Add "hasComments" 1 }} + {{ $.Scratch.Set "hasReplies" 0 }} + {{ $.Scratch.Set "threadID" ._id }} + + + + {{ range $comments }} + {{ if eq .replyThread ($.Scratch.Get "threadID") }} + {{ $.Scratch.Add "hasReplies" 1 }} + + {{ end }} + {{ end }} + {{ end }} + {{ end }} + {{ end }} + + +
+ + + + + + + {{ if .Site.Params.staticman.recaptcha }} + + + {{ end }} + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + {{ if .Site.Params.staticman.recaptcha }} +
+
+
+ {{ end }} + +
+ + +
+
+ +
+
+ +
+
+

+
+
+
+ +
+
+ + + +{{- if .Site.Params.staticman.recaptcha -}} + +{{- end -}} + diff --git a/layouts/partials/page-single/post-comment.html b/layouts/partials/page-single/post-comment.html index a9d2ab7..760706d 100644 --- a/layouts/partials/page-single/post-comment.html +++ b/layouts/partials/page-single/post-comment.html @@ -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 }} diff --git a/static/css/staticman.css b/static/css/staticman.css new file mode 100644 index 0000000..c4ed40f --- /dev/null +++ b/static/css/staticman.css @@ -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; +} From f0a37b9c9b68c61549c085ecbd3e05d797cebfdf Mon Sep 17 00:00:00 2001 From: Vincent Tam Date: Thu, 13 Dec 2018 01:43:32 +0100 Subject: [PATCH 2/5] Fixed link in example site config --- README.md | 10 ++++++++++ exampleSite/config.toml | 11 +++++------ exampleSite/content/portfolio/hyde-hyde.md | 2 +- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index f29ce93..4b708d7 100644 --- a/README.md +++ b/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 diff --git a/exampleSite/config.toml b/exampleSite/config.toml index d1d9aaf..df8d1d2 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -41,12 +41,11 @@ theme = "hyde-hyde" # Table of contents #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==" - +#[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] diff --git a/exampleSite/content/portfolio/hyde-hyde.md b/exampleSite/content/portfolio/hyde-hyde.md index e3b9936..a650a92 100644 --- a/exampleSite/content/portfolio/hyde-hyde.md +++ b/exampleSite/content/portfolio/hyde-hyde.md @@ -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)). From 7ef5c2e87d289148fd20a52368085f73a9cb5f09 Mon Sep 17 00:00:00 2001 From: Vincent Tam Date: Thu, 13 Dec 2018 04:44:07 +0100 Subject: [PATCH 3/5] Fixed abnormal CSS display --- layouts/partials/page-single/comment/staticman.html | 2 +- static/css/staticman.css | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/layouts/partials/page-single/comment/staticman.html b/layouts/partials/page-single/comment/staticman.html index 07329cf..ec5aa3c 100644 --- a/layouts/partials/page-single/comment/staticman.html +++ b/layouts/partials/page-single/comment/staticman.html @@ -50,7 +50,7 @@

{{ .comment | markdownify }}

- Reply to this message + Reply to this comment
{{ end }} diff --git a/static/css/staticman.css b/static/css/staticman.css index c4ed40f..34c0af6 100644 --- a/static/css/staticman.css +++ b/static/css/staticman.css @@ -56,6 +56,9 @@ margin-left: 58px; } +.staticman-comments article { + margin: 30px 0px 30px 0px; +} .staticman-comments .static-comment-reply { margin-left: 2em; @@ -65,6 +68,10 @@ margin: 0px 0px 14px 58px; } +.staticman-comments .comment-reply-target { + margin: 0px 0px 0px 58px; +} + .staticman-comments .js-form { margin-top: 30px; } From cdbb2ca9f8459aece5f2521eed2f0250feb5f13a Mon Sep 17 00:00:00 2001 From: Vincent Tam Date: Thu, 13 Dec 2018 05:06:53 +0100 Subject: [PATCH 4/5] Update theme.toml Add "staticman" to the list of features --- theme.toml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/theme.toml b/theme.toml index 1f8a174..854675c 100644 --- a/theme.toml +++ b/theme.toml @@ -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" From 3578dce54c137f8e5e286624ce9e3b38f8f08b90 Mon Sep 17 00:00:00 2001 From: Vincent Tam Date: Sun, 23 Dec 2018 23:01:55 +0100 Subject: [PATCH 5/5] Consistent with layouts/partials/header/styles-highlight.html My Demo page on Framagit at https://staticman-gitlab-pages.frama.io/hyde-hyde-demo/posts/migrate-from-jekyll/ failed to load. Hope this will provide a fix to the problem. --- layouts/partials/header/staticman-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/header/staticman-css.html b/layouts/partials/header/staticman-css.html index b2aecfc..ac8cfd4 100644 --- a/layouts/partials/header/staticman-css.html +++ b/layouts/partials/header/staticman-css.html @@ -1 +1 @@ - +