Merge branch 'feature/staticman-commenting' into develop
This commit is contained in:
Michael Rose
commit
9706f6e201
10 changed files with 564 additions and 155 deletions
|
|
@ -24,7 +24,7 @@ The theme includes responsive layouts (`single`, `archive`, and `splash` pages)
|
|||
- Several layout options (single, archive, splash pages)
|
||||
- SEO optimized with support for [Twitter Cards](https://dev.twitter.com/cards/overview) and [Open Graph](http://ogp.me/) data
|
||||
- Optional header images, sidebars, table of contents, galleries, related posts, breadcrumb links, and more.
|
||||
- Optional comments ([Disqus](https://disqus.com/), [Facebook](https://developers.facebook.com/docs/plugins/comments), Google+, [Discourse](https://www.discourse.org/), and custom).
|
||||
- Optional comments ([Disqus](https://disqus.com/), [Facebook](https://developers.facebook.com/docs/plugins/comments), Google+, [Discourse](https://www.discourse.org/), static-based via [Staticman](https://staticman.net/), and custom).
|
||||
- Optional analytics ([Google Analytics](https://www.google.com/analytics/) and custom).
|
||||
- UI localized text: English (default), Spanish, French, and Turkish.
|
||||
|
||||
|
|
|
|||
17
_config.yml
17
_config.yml
|
|
@ -18,7 +18,7 @@ teaser : # filename of teaser fallback teaser image placed in
|
|||
# breadcrumbs : false # true, false (default)
|
||||
words_per_minute : 200
|
||||
comments:
|
||||
provider : # false (default), "disqus", "discourse", "facebook", "google-plus", custom"
|
||||
provider : # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "custom"
|
||||
disqus:
|
||||
shortname : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
|
||||
discourse:
|
||||
|
|
@ -28,6 +28,21 @@ comments:
|
|||
appid :
|
||||
num_posts : # 5 (default)
|
||||
colorscheme : # "light" (default), "dark"
|
||||
staticman:
|
||||
allowedFields : ['name', 'email', 'url', 'message']
|
||||
branch : # "master", "gh-pages"
|
||||
commitMessage : "New comment."
|
||||
format : "yml"
|
||||
moderation : true
|
||||
path : "_data/comments/{options.slug}"
|
||||
requiredFields : ['name', 'email', 'message']
|
||||
transforms:
|
||||
email : "md5"
|
||||
generatedFields:
|
||||
date:
|
||||
type : "date"
|
||||
options:
|
||||
format : "iso8601" # "iso8601" (default), "timestamp-seconds", "timestamp-milliseconds"
|
||||
atom_feed:
|
||||
path : # blank (default) uses feed.xml
|
||||
|
||||
|
|
|
|||
|
|
@ -3,30 +3,45 @@
|
|||
# English (default)
|
||||
# -----------------
|
||||
en: &DEFAULT_EN
|
||||
page : "Page"
|
||||
pagination_previous : "Previous"
|
||||
pagination_next : "Next"
|
||||
breadcrumb_home_label : "Home"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "On This Page"
|
||||
ext_link_label : "Direct Link"
|
||||
less_than : "less than"
|
||||
minute_read : "minute read"
|
||||
share_on_label : "Share on"
|
||||
meta_label :
|
||||
tags_label : "Tags:"
|
||||
categories_label : "Categories:"
|
||||
date_label : "Updated:"
|
||||
comments_label : "Leave a Comment"
|
||||
more_label : "Learn More"
|
||||
related_label : "You May Also Enjoy"
|
||||
follow_label : "Follow:"
|
||||
feed_label : "Feed"
|
||||
powered_by : "Powered by"
|
||||
website_label : "Website"
|
||||
email_label : "Email"
|
||||
recent_posts : "Recent Posts"
|
||||
undefined_wpm : "Undefined parameter words_per_minute at _config.yml"
|
||||
page : "Page"
|
||||
pagination_previous : "Previous"
|
||||
pagination_next : "Next"
|
||||
breadcrumb_home_label : "Home"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "On This Page"
|
||||
ext_link_label : "Direct Link"
|
||||
less_than : "less than"
|
||||
minute_read : "minute read"
|
||||
share_on_label : "Share on"
|
||||
meta_label :
|
||||
tags_label : "Tags:"
|
||||
categories_label : "Categories:"
|
||||
date_label : "Updated:"
|
||||
comments_label : "Leave a Comment"
|
||||
comments_title : "Comments"
|
||||
more_label : "Learn More"
|
||||
related_label : "You May Also Enjoy"
|
||||
follow_label : "Follow:"
|
||||
feed_label : "Feed"
|
||||
powered_by : "Powered by"
|
||||
website_label : "Website"
|
||||
email_label : "Email"
|
||||
recent_posts : "Recent Posts"
|
||||
undefined_wpm : "Undefined parameter words_per_minute at _config.yml"
|
||||
comment_form_info : "Your email address will not be published. Required fields are marked"
|
||||
comment_form_comment_label : "Comment"
|
||||
comment_form_md_info : "Markdown is supported."
|
||||
comment_form_name_label : "Name"
|
||||
comment_form_email_label : "Email address"
|
||||
comment_form_website_label : "Website (optional)"
|
||||
comment_btn_submit : "Submit Comment"
|
||||
comment_btn_submitted : "Submitted"
|
||||
comment_success_title : "Comment submitted"
|
||||
comment_success_msg : "Thanks for your comment! It will show on the site once it has been approved."
|
||||
comment_error_title : "Error"
|
||||
comment_error_msg : "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again."
|
||||
close_btn_label : "close"
|
||||
loading_label : "Loading..."
|
||||
en-US:
|
||||
<<: *DEFAULT_EN
|
||||
en-CA:
|
||||
|
|
@ -39,30 +54,45 @@ en-AU:
|
|||
# Spanish
|
||||
# --------------
|
||||
es: &DEFAULT_ES
|
||||
page : "Página"
|
||||
pagination_previous : "Anterior"
|
||||
pagination_next : "Siguiente"
|
||||
breadcrumb_home_label : "Inicio"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "Contenidos"
|
||||
ext_link_label : "Enlace"
|
||||
less_than : "menos de"
|
||||
minute_read : "minuto de lectura"
|
||||
share_on_label : "Compartir"
|
||||
meta_label :
|
||||
tags_label : "Etiquetas:"
|
||||
categories_label : "Categorías:"
|
||||
date_label : "Actualizado:"
|
||||
comments_label : "Comentar"
|
||||
more_label : "Ver más"
|
||||
related_label : "Podrías ver también"
|
||||
follow_label : "Seguir:"
|
||||
feed_label : "Feed"
|
||||
powered_by : "Powered by"
|
||||
website_label : "Sitio web"
|
||||
email_label : "Email"
|
||||
recent_posts : "Entradas recientes"
|
||||
undefined_wpm : "Parametro words_per_minute (Palabras por minuto) no definido en _config.yml"
|
||||
page : "Página"
|
||||
pagination_previous : "Anterior"
|
||||
pagination_next : "Siguiente"
|
||||
breadcrumb_home_label : "Inicio"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "Contenidos"
|
||||
ext_link_label : "Enlace"
|
||||
less_than : "menos de"
|
||||
minute_read : "minuto de lectura"
|
||||
share_on_label : "Compartir"
|
||||
meta_label :
|
||||
tags_label : "Etiquetas:"
|
||||
categories_label : "Categorías:"
|
||||
date_label : "Actualizado:"
|
||||
comments_label : "Comentar"
|
||||
comments_title :
|
||||
more_label : "Ver más"
|
||||
related_label : "Podrías ver también"
|
||||
follow_label : "Seguir:"
|
||||
feed_label : "Feed"
|
||||
powered_by : "Powered by"
|
||||
website_label : "Sitio web"
|
||||
email_label : "Email"
|
||||
recent_posts : "Entradas recientes"
|
||||
undefined_wpm : "Parametro words_per_minute (Palabras por minuto) no definido en _config.yml"
|
||||
comment_form_info :
|
||||
comment_form_comment_label :
|
||||
comment_form_md_info :
|
||||
comment_form_name_label :
|
||||
comment_form_email_label :
|
||||
comment_form_website_label :
|
||||
comment_btn_submit :
|
||||
comment_btn_submitted :
|
||||
comment_success_title :
|
||||
comment_success_msg :
|
||||
comment_error_title :
|
||||
comment_error_msg :
|
||||
close_btn_label :
|
||||
loading_label :
|
||||
es-ES:
|
||||
<<: *DEFAULT_ES
|
||||
es-CO:
|
||||
|
|
@ -71,30 +101,45 @@ es-CO:
|
|||
# French
|
||||
# -----------------
|
||||
fr: &DEFAULT_FR
|
||||
page : "Page"
|
||||
pagination_previous : "Précédent"
|
||||
pagination_next : "Suivant"
|
||||
breadcrumb_home_label : "Accueil"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "Sur cette page"
|
||||
ext_link_label : "Lien direct"
|
||||
less_than : "plus petit que"
|
||||
minute_read : "minute de lecture"
|
||||
share_on_label : "Partager sur"
|
||||
meta_label :
|
||||
tags_label : "Tags :"
|
||||
categories_label : "Catégories :"
|
||||
date_label : "Mis à jour :"
|
||||
comments_label : "Laisser un commentaire"
|
||||
more_label : "Lire plus"
|
||||
related_label : "Vous pourriez aimer"
|
||||
follow_label : "Suivez moi"
|
||||
feed_label : "Flux"
|
||||
powered_by : "Propulsé par"
|
||||
website_label : "Site"
|
||||
email_label : "Email"
|
||||
recent_posts : "Posts récents"
|
||||
undefined_wpm : "Le paramètre words_per_minute n'est pas défini dans _config.yml"
|
||||
page : "Page"
|
||||
pagination_previous : "Précédent"
|
||||
pagination_next : "Suivant"
|
||||
breadcrumb_home_label : "Accueil"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "Sur cette page"
|
||||
ext_link_label : "Lien direct"
|
||||
less_than : "plus petit que"
|
||||
minute_read : "minute de lecture"
|
||||
share_on_label : "Partager sur"
|
||||
meta_label :
|
||||
tags_label : "Tags :"
|
||||
categories_label : "Catégories :"
|
||||
date_label : "Mis à jour :"
|
||||
comments_label : "Laisser un commentaire"
|
||||
comments_title :
|
||||
more_label : "Lire plus"
|
||||
related_label : "Vous pourriez aimer"
|
||||
follow_label : "Suivez moi"
|
||||
feed_label : "Flux"
|
||||
powered_by : "Propulsé par"
|
||||
website_label : "Site"
|
||||
email_label : "Email"
|
||||
recent_posts : "Posts récents"
|
||||
undefined_wpm : "Le paramètre words_per_minute n'est pas défini dans _config.yml"
|
||||
comment_form_info :
|
||||
comment_form_comment_label :
|
||||
comment_form_md_info :
|
||||
comment_form_name_label :
|
||||
comment_form_email_label :
|
||||
comment_form_website_label :
|
||||
comment_btn_submit :
|
||||
comment_btn_submitted :
|
||||
comment_success_title :
|
||||
comment_success_msg :
|
||||
comment_error_title :
|
||||
comment_error_msg :
|
||||
close_btn_label :
|
||||
loading_label :
|
||||
fr-FR:
|
||||
<<: *DEFAULT_FR
|
||||
fr-BE:
|
||||
|
|
@ -105,60 +150,90 @@ fr-CH:
|
|||
# Turkish
|
||||
# -----------------
|
||||
tr: &DEFAULT_TR
|
||||
page : "Sayfa"
|
||||
pagination_previous : "Önceki"
|
||||
pagination_next : "Sonraki"
|
||||
breadcrumb_home_label : "Ana Sayfa"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "İçindekiler"
|
||||
ext_link_label : "Doğrudan Bağlantı"
|
||||
less_than : "Şu süreden az: "
|
||||
minute_read : "dakika tahmini okuma süresi"
|
||||
share_on_label : "Paylaş"
|
||||
meta_label :
|
||||
tags_label : "Etiketler:"
|
||||
categories_label : "Kategoriler:"
|
||||
date_label : "Güncelleme tarihi:"
|
||||
comments_label : "Yorum yapın"
|
||||
more_label : "Daha fazlasını öğrenin"
|
||||
related_label : "Bunlar ilginizi çekebilir:"
|
||||
follow_label : "Takip et:"
|
||||
feed_label : "RSS"
|
||||
powered_by : "Emeği geçenler: "
|
||||
website_label : "Web sayfası"
|
||||
email_label : "E-posta"
|
||||
recent_posts : "Son yazılar"
|
||||
undefined_wpm : "_config.yml dosyasında tanımlanmamış words_per_minute parametresi"
|
||||
page : "Sayfa"
|
||||
pagination_previous : "Önceki"
|
||||
pagination_next : "Sonraki"
|
||||
breadcrumb_home_label : "Ana Sayfa"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "İçindekiler"
|
||||
ext_link_label : "Doğrudan Bağlantı"
|
||||
less_than : "Şu süreden az: "
|
||||
minute_read : "dakika tahmini okuma süresi"
|
||||
share_on_label : "Paylaş"
|
||||
meta_label :
|
||||
tags_label : "Etiketler:"
|
||||
categories_label : "Kategoriler:"
|
||||
date_label : "Güncelleme tarihi:"
|
||||
comments_label : "Yorum yapın"
|
||||
comments_title :
|
||||
more_label : "Daha fazlasını öğrenin"
|
||||
related_label : "Bunlar ilginizi çekebilir:"
|
||||
follow_label : "Takip et:"
|
||||
feed_label : "RSS"
|
||||
powered_by : "Emeği geçenler: "
|
||||
website_label : "Web sayfası"
|
||||
email_label : "E-posta"
|
||||
recent_posts : "Son yazılar"
|
||||
undefined_wpm : "_config.yml dosyasında tanımlanmamış words_per_minute parametresi"
|
||||
comment_form_info :
|
||||
comment_form_comment_label :
|
||||
comment_form_md_info :
|
||||
comment_form_name_label :
|
||||
comment_form_email_label :
|
||||
comment_form_website_label :
|
||||
comment_btn_submit :
|
||||
comment_btn_submitted :
|
||||
comment_success_title :
|
||||
comment_success_msg :
|
||||
comment_error_title :
|
||||
comment_error_msg :
|
||||
close_btn_label :
|
||||
loading_label :
|
||||
tr-TR:
|
||||
<<: *DEFAULT_TR
|
||||
|
||||
# Brazilian Portguese
|
||||
# -----------------
|
||||
pt: &DEFAULT_PT
|
||||
page : "Página"
|
||||
pagination_previous : "Anterior"
|
||||
pagination_next : "Próxima"
|
||||
breadcrumb_home_label : "Home"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "Nesta página"
|
||||
ext_link_label : "Link direto"
|
||||
less_than : "meno que"
|
||||
minute_read : "minutos de leitura"
|
||||
share_on_label : "Compartilhe em"
|
||||
meta_label :
|
||||
tags_label : "Tags:"
|
||||
categories_label : "Categorias:"
|
||||
date_label : "Atualizado em:"
|
||||
comments_label : "Deixe um comentário"
|
||||
more_label : "Aprenda Mais"
|
||||
related_label : "Você Talvez Goste Também"
|
||||
follow_label : "Acompanhe em"
|
||||
feed_label : "Feed"
|
||||
powered_by : "Feito com"
|
||||
website_label : "Site"
|
||||
email_label : "Email"
|
||||
recent_posts : "Postagens recentes"
|
||||
undefined_wpm : "Parâmetro indefinido em word_per_minute no _config.yml"
|
||||
page : "Página"
|
||||
pagination_previous : "Anterior"
|
||||
pagination_next : "Próxima"
|
||||
breadcrumb_home_label : "Home"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "Nesta página"
|
||||
ext_link_label : "Link direto"
|
||||
less_than : "meno que"
|
||||
minute_read : "minutos de leitura"
|
||||
share_on_label : "Compartilhe em"
|
||||
meta_label :
|
||||
tags_label : "Tags:"
|
||||
categories_label : "Categorias:"
|
||||
date_label : "Atualizado em:"
|
||||
comments_label : "Deixe um comentário"
|
||||
comments_title :
|
||||
more_label : "Aprenda Mais"
|
||||
related_label : "Você Talvez Goste Também"
|
||||
follow_label : "Acompanhe em"
|
||||
feed_label : "Feed"
|
||||
powered_by : "Feito com"
|
||||
website_label : "Site"
|
||||
email_label : "Email"
|
||||
recent_posts : "Postagens recentes"
|
||||
undefined_wpm : "Parâmetro indefinido em word_per_minute no _config.yml"
|
||||
comment_form_info :
|
||||
comment_form_comment_label :
|
||||
comment_form_md_info :
|
||||
comment_form_name_label :
|
||||
comment_form_email_label :
|
||||
comment_form_website_label :
|
||||
comment_btn_submit :
|
||||
comment_btn_submitted :
|
||||
comment_success_title :
|
||||
comment_success_msg :
|
||||
comment_error_title :
|
||||
comment_error_msg :
|
||||
close_btn_label :
|
||||
loading_label :
|
||||
pt-BR:
|
||||
<<: *DEFAULT_PT
|
||||
pt-PT:
|
||||
|
|
@ -167,30 +242,45 @@ pt-PT:
|
|||
# Italian
|
||||
# -----------------
|
||||
it: &DEFAULT_IT
|
||||
page : "Pagina"
|
||||
pagination_previous : "Precedente"
|
||||
pagination_next : "Prossima"
|
||||
breadcrumb_home_label : "Home"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "Indice della pagina"
|
||||
ext_link_label : "Link"
|
||||
less_than : "meno di"
|
||||
minute_read : "minuto/i di lettura"
|
||||
share_on_label : "Condividi"
|
||||
meta_label :
|
||||
tags_label : "Tags:"
|
||||
categories_label : "Categorie:"
|
||||
date_label : "Aggiornato:"
|
||||
comments_label : "Scrivi un commento"
|
||||
more_label : "Scopri di più"
|
||||
related_label : "Potrebbe Piacerti Anche"
|
||||
follow_label : "Segui:"
|
||||
feed_label : "Feed"
|
||||
powered_by : "Powered by"
|
||||
website_label : "Website"
|
||||
email_label : "Email"
|
||||
recent_posts : "Articoli Recenti"
|
||||
undefined_wpm : "Parametro words_per_minute non definito in _config.yml"
|
||||
page : "Pagina"
|
||||
pagination_previous : "Precedente"
|
||||
pagination_next : "Prossima"
|
||||
breadcrumb_home_label : "Home"
|
||||
breadcrumb_separator : "/"
|
||||
toc_label : "Indice della pagina"
|
||||
ext_link_label : "Link"
|
||||
less_than : "meno di"
|
||||
minute_read : "minuto/i di lettura"
|
||||
share_on_label : "Condividi"
|
||||
meta_label :
|
||||
tags_label : "Tags:"
|
||||
categories_label : "Categorie:"
|
||||
date_label : "Aggiornato:"
|
||||
comments_label : "Scrivi un commento"
|
||||
comments_title :
|
||||
more_label : "Scopri di più"
|
||||
related_label : "Potrebbe Piacerti Anche"
|
||||
follow_label : "Segui:"
|
||||
feed_label : "Feed"
|
||||
powered_by : "Powered by"
|
||||
website_label : "Website"
|
||||
email_label : "Email"
|
||||
recent_posts : "Articoli Recenti"
|
||||
undefined_wpm : "Parametro words_per_minute non definito in _config.yml"
|
||||
comment_form_info :
|
||||
comment_form_comment_label :
|
||||
comment_form_md_info :
|
||||
comment_form_name_label :
|
||||
comment_form_email_label :
|
||||
comment_form_website_label :
|
||||
comment_btn_submit :
|
||||
comment_btn_submitted :
|
||||
comment_success_title :
|
||||
comment_success_msg :
|
||||
comment_error_title :
|
||||
comment_error_msg :
|
||||
close_btn_label :
|
||||
loading_label :
|
||||
it-IT:
|
||||
<<: *DEFAULT_IT
|
||||
|
||||
|
|
|
|||
22
_includes/comment.html
Normal file
22
_includes/comment.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<article id="comment{{ include.index }}" class="js-comment comment">
|
||||
<div class="comment__avatar-wrapper">
|
||||
<img class="comment__avatar" src="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=80">
|
||||
</div>
|
||||
<div class="comment__content-wrapper">
|
||||
<h3 class="comment__author">
|
||||
{% if (include.url) and (include.url != '@url') %}
|
||||
<a rel="nofollow" href="{{ include.url }}">{{ include.name }}</a>
|
||||
{% else %}
|
||||
{{ include.name }}
|
||||
{% endif %}
|
||||
</h3>
|
||||
<p class="comment__date">
|
||||
{% if include.date %}
|
||||
{% if include.index %}<a href="#comment{{ include.index }}">{% endif %}
|
||||
<time datetime="{{ include.date | date_to_xmlschema }}">{{ include.date | date: "%B %d, %Y at %I:%M %p" }}</time>
|
||||
{% if include.index %}</a>{% endif %}
|
||||
{% endif %}
|
||||
</p>
|
||||
{{ include.message | markdownify }}
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -9,6 +9,8 @@
|
|||
{% include /comments-providers/facebook.html %}
|
||||
{% when "google-plus" %}
|
||||
{% include /comments-providers/google-plus.html %}
|
||||
{% when "staticman" %}
|
||||
{% include /comments-providers/staticman.html %}
|
||||
{% when "custom" %}
|
||||
{% include /comments-providers/custom.html %}
|
||||
{% endcase %}
|
||||
|
|
|
|||
53
_includes/comments-providers/staticman.html
Normal file
53
_includes/comments-providers/staticman.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
{% if site.repository and site.staticman.branch %}
|
||||
<!-- Start comment form modal -->
|
||||
<article class="modal">
|
||||
<h2 class="modal__title js-modal-title"></h2>
|
||||
<div class="modal__supporting-text js-modal-text"></div>
|
||||
<div class="modal__actions">
|
||||
<button class="btn btn--danger js-close-modal">{{ site.data.ui-text[site.locale].close_btn_label | default: "close" }}</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- End comment form modal -->
|
||||
|
||||
<script>
|
||||
(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('{{ site.data.ui-text[site.locale].comment_success_title | default: "Comment submitted" }}', '{{ site.data.ui-text[site.locale].comment_success_msg | default: "Thanks for your comment! It will show on the site once it has been approved." }}');
|
||||
$(form).removeClass('form--loading');
|
||||
$('#comment-form-submit').addClass('btn--disabled').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
|
||||
},
|
||||
error: function (err) {
|
||||
console.log(err);
|
||||
showModal('{{ site.data.ui-text[site.locale].comment_error_title | default: "Error" }}', '{{ site.data.ui-text[site.locale].comment_error_msg | default: "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." }}');
|
||||
$(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);
|
||||
</script>
|
||||
{% endif %}
|
||||
|
|
@ -1,14 +1,75 @@
|
|||
{% include base_path %}
|
||||
|
||||
<div class="page__comments">
|
||||
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
|
||||
{% capture comments_label %}{{ site.data.ui-text[site.locale].comments_label | default: "Comments" }}{% endcapture %}
|
||||
{% case site.comments.provider %}
|
||||
{% when "disqus" %}
|
||||
<h4 class="page__comments-title">{{ comments_label }}</h4>
|
||||
<section id="disqus_thread"></section>
|
||||
{% when "facebook" %}
|
||||
<h4 class="page__comments-title">{{ comments_label }}</h4>
|
||||
<section class="fb-comments" data-href="{{ base_path }}{{ page.url }}" data-mobile="true" data-num-posts="{{ site.comments.facebook.num_posts | default: 5 }}" data-width="100%" data-colorscheme="{{ site.comments.facebook.colorscheme | default: 'light' }}"></section>
|
||||
{% when "google-plus" %}
|
||||
<h4 class="page__comments-title">{{ comments_label }}</h4>
|
||||
<section class="g-comments" data-href="{{ base_path }}{{ page.url }}" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD">Loading Google+ Comments ...</section>
|
||||
{% when "staticman" %}
|
||||
<section id="comments">
|
||||
{% if site.repository and site.staticman.branch %}
|
||||
<!-- Start static comments -->
|
||||
<div class="js-comments">
|
||||
{% if site.data.comments[page.slug] %}
|
||||
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_title | default: "Comments" }}</h4>
|
||||
{% assign comments = site.data.comments[page.slug] | sort %}
|
||||
|
||||
{% for comment in comments %}
|
||||
{% assign email = comment[1].email %}
|
||||
{% assign name = comment[1].name %}
|
||||
{% assign url = comment[1].url %}
|
||||
{% assign date = comment[1].date %}
|
||||
{% assign message = comment[1].message %}
|
||||
{% include comment.html index=forloop.index email=email name=name url=url date=date message=message %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<!-- End static comments -->
|
||||
|
||||
<!-- Start new comment form -->
|
||||
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
|
||||
<p class="small help-block">{{ site.data.ui-text[site.locale].comment_form_info | default: "Your email address will not be published. Required fields are marked" }} <span class="required">*</span></p>
|
||||
<form id="new_comment" class="page__comments-form js-form form" method="post" action="https://api.staticman.net/v1/entry/{{ site.repository }}/{{ site.staticman.branch }}">
|
||||
<div class="form__spinner">
|
||||
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
|
||||
<span class="sr-only">{{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<label for="comment-form-message">{{ site.data.ui-text[site.locale].comment_form_comment_label | default: "Comment" }} <small class="required">*</small></label>
|
||||
<textarea type="text" rows="3" id="comment-form-message" name="fields[message]" tabindex="1"></textarea>
|
||||
<div class="small help-block"><a href="https://daringfireball.net/projects/markdown/">{{ site.data.ui-text[site.locale].comment_form_md_info | default: "Markdown is supported." }}</a></div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="comment-form-name">{{ site.data.ui-text[site.locale].comment_form_name_label | default: "Name" }} <small class="required">*</small></label>
|
||||
<input type="text" id="comment-form-name" name="fields[name]" tabindex="2" />
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="comment-form-email">{{ site.data.ui-text[site.locale].comment_form_email_label | default: "Email address" }} <small class="required">*</small></label>
|
||||
<input type="email" id="comment-form-email" name="fields[email]" tabindex="3" />
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="comment-form-url">{{ site.data.ui-text[site.locale].comment_form_website_label | default: "Website (optional)" }}</label>
|
||||
<input type="url" id="comment-form-url" name="fields[url]" tabindex="4"/>
|
||||
</fieldset>
|
||||
<fieldset class="hidden">
|
||||
<input type="hidden" name="options[slug]" value="{{ page.slug }}">
|
||||
<input type="hidden" name="fields[hidden]"/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<!-- End new comment form -->
|
||||
{% endif %}
|
||||
</section>
|
||||
{% when "custom" %}
|
||||
<section id="comments"></section>
|
||||
{% endcase %}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
Forms
|
||||
========================================================================== */
|
||||
|
||||
btnform {
|
||||
form {
|
||||
margin: 0 0 5px 0;
|
||||
|
||||
fieldset {
|
||||
|
|
@ -51,17 +51,20 @@ input,
|
|||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: $sans-serif;
|
||||
box-sizing: border-box;
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 10px / 8;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.25em;
|
||||
color: $text-color;
|
||||
cursor: pointer;
|
||||
|
||||
small {
|
||||
font-size: $type-size-6;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
|
|
@ -74,11 +77,13 @@ textarea,
|
|||
select {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
margin-bottom: 5px / 4;
|
||||
padding: 0.25em;
|
||||
margin-bottom: 0.5em;
|
||||
color: $text-color;
|
||||
background-color: #fff;
|
||||
border: 1px solid mix(#fff, #000, 80%);
|
||||
color: $text-color;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&:hover {
|
||||
border-color: mix(#fff, $primary-color, 50%);
|
||||
|
|
@ -165,6 +170,10 @@ input[type="hidden"] {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio,
|
||||
.checkbox {
|
||||
padding-left: 18px;
|
||||
|
|
@ -315,6 +324,38 @@ select:focus {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
.form--loading
|
||||
========================================================================== */
|
||||
|
||||
.form--loading:before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.form--loading .form__spinner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.form__spinner {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Google search form
|
||||
========================================================================== */
|
||||
|
|
|
|||
|
|
@ -300,6 +300,66 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page__comments-form {
|
||||
padding: 1em;
|
||||
background: $lighter-gray;
|
||||
}
|
||||
|
||||
.comment {
|
||||
margin: 2em 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__avatar-wrapper {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
@include breakpoint($large) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
|
||||
@include breakpoint($large) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
padding: 5px;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__content-wrapper {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.comment__author {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__date {
|
||||
@extend .page__meta;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Related
|
||||
|
|
|
|||
|
|
@ -377,6 +377,61 @@ body:hover .visually-hidden button {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
Modals
|
||||
========================================================================== */
|
||||
|
||||
.show-modal {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -150px;
|
||||
margin-top: -150px;
|
||||
min-height: 0;
|
||||
z-index: 9999;
|
||||
background: #fff;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
&__supporting-text {
|
||||
padding: 0 1em 0.5em 1em;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
padding: 0.5em 1em;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Footnotes
|
||||
========================================================================== */
|
||||
|
|
@ -402,4 +457,14 @@ a.reversefootnote {
|
|||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Required
|
||||
========================================================================== */
|
||||
|
||||
.required {
|
||||
color: $danger-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue