Merge branch 'feature/staticman-commenting' into develop

2016-08-11 10:22:58 -04:00 · 2016-08-11 10:22:58 -04:00 · 9706f6e201
commit 9706f6e201
parent 41c99f428d 985b58479e
10 changed files with 564 additions and 155 deletions
--- a/README.md
+++ b/README.md
@ -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.

--- a/_config.yml
+++ b/_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

--- a/_data/ui-text.yml
+++ b/_data/ui-text.yml
@ -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

--- a/_includes/comment.html
+++ b/_includes/comment.html
@ -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>
--- a/_includes/comments-providers/scripts.html
+++ b/_includes/comments-providers/scripts.html
@ -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 %}
--- a/_includes/comments-providers/staticman.html
+++ b/_includes/comments-providers/staticman.html
@ -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 %}
--- a/_includes/comments.html
+++ b/_includes/comments.html
@ -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 %}
--- a/_sass/_forms.scss
+++ b/_sass/_forms.scss
@ -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
   ========================================================================== */
--- a/_sass/_page.scss
+++ b/_sass/_page.scss
@ -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
--- a/_sass/_utilities.scss
+++ b/_sass/_utilities.scss
@ -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;
+}