Merge branch 'release/3.4.3'

- Close #458

CHANGELOG.md

@@ -1,3 +1,26 @@
+## [3.4.3](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.3)
+
+### Enhancements
+
+- Make ["honeypot" `input`](https://github.com/mmistakes/minimal-mistakes/commit/06a8249a69a37dddda7e2a5bfbe32056c1a9a607) in Staticman comment form less obvious to spam bots
+- Add padding to `.highlight` code blocks to better [align `overflow` scrollbar](https://github.com/mmistakes/minimal-mistakes/commit/e4abec0a6f7f8cff72505ca0754615df294fd5b3) to the bottom.
+- Add additional image options for Twitter card social sharing meta tags. [#466](https://github.com/mmistakes/minimal-mistakes/pull/466)
+- Add structured data markup for Staticman comments. [#458](https://github.com/mmistakes/minimal-mistakes/issues/458)
+
+### Bug Fixes
+
+- Format `og:locale` tag with `_` instead of `-`. [#462](https://github.com/mmistakes/minimal-mistakes/issues/462)
+
+### Maintenance
+
+- Add note to docs about using `url: http://localhost:4000` when working locally.
+
+## [3.4.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.2)
+
+### Enhancements
+
+- Improve UX of static comment forms. [#448](https://github.com/mmistakes/minimal-mistakes/issues/448)
+
 ## [3.4.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.1)
 
 ### Enhancements

_data/ui-text.yml

@@ -36,11 +36,8 @@ en: &DEFAULT_EN
   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
@@ -87,11 +84,8 @@ es: &DEFAULT_ES
   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
@@ -134,11 +128,8 @@ fr: &DEFAULT_FR
   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
@@ -183,11 +174,8 @@ tr: &DEFAULT_TR
   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
@@ -228,11 +216,8 @@ pt: &DEFAULT_PT
   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
@@ -275,11 +260,8 @@ it: &DEFAULT_IT
   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

_includes/comment.html

@@ -1,22 +1,22 @@
-<article id="comment{{ include.index }}" class="js-comment comment">
+<article id="comment{{ include.index }}" class="js-comment comment" itemprop="comment" itemscope itemtype="http://schema.org/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">
+    <h3 class="comment__author" itemprop="author" itemscope itemtype="http://schema.org/Person">
       {% unless include.url == blank %}
-        <a rel="nofollow" href="{{ include.url }}">{{ include.name }}</a>
+        <span itemprop="name"><a rel="external nofollow" itemprop="url" href="{{ include.url }}">{{ include.name }}</a></span>
       {% else %}
-        {{ include.name }}
+        <span itemprop="name">{{ include.name }}</span>
       {% endunless %}
     </h3>
     <p class="comment__date">
       {% if include.date %}
-        {% if include.index %}<a href="#comment{{ include.index }}">{% endif %}
+        {% if include.index %}<a href="#comment{{ include.index }}" itemprop="url">{% endif %}
-        <time datetime="{{ include.date | date_to_xmlschema }}">{{ include.date | date: "%B %d, %Y at %I:%M %p" }}</time>
+        <time datetime="{{ include.date | date_to_xmlschema }}" itemprop="datePublished">{{ include.date | date: "%B %d, %Y at %I:%M %p" }}</time>
         {% if include.index %}</a>{% endif %}
       {% endif %}
     </p>
-    {{ include.message | markdownify }}
+    <div itemprop="text">{{ include.message | markdownify }}</div>
   </div>
 </article>

_includes/comments-providers/staticman.html

@@ -1,22 +1,13 @@
 {% 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 () {
+    $('#new_comment').submit(function () {
       var form = this;
 
-      $(form).addClass('form--loading');
+      $(form).addClass('disabled');
+      $('#comment-form-submit').html('<i class="fa fa-spinner fa-spin fa-fw"></i> {{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}');
 
       $.ajax({
         type: $(this).attr('method'),
@@ -24,29 +15,27 @@
         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." }}');
+          $('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
-          $(form).removeClass('form--loading');
+          $('.page__comments-form .js-notice').removeClass('notice--danger');
-          $('#comment-form-submit').addClass('btn--disabled').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
+          $('.page__comments-form .js-notice').addClass('notice--success');
+          showAlert('{{ 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." }}');
         },
         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." }}');
+          $('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submit  | default: "Submit Comment" }}');
-          $(form).removeClass('form--loading');
+          $('.page__comments-form .js-notice').removeClass('notice--success');
+          $('.page__comments-form .js-notice').addClass('notice--danger');
+          showAlert('{{ 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('disabled');
         }
       });
 
       return false;
     });
 
-    $('.js-close-modal').click(function () {
+    function showAlert(message) {
-      $('body').removeClass('show-modal');
+      $('.page__comments-form .js-notice').removeClass('hidden');
-    });
+      $('.page__comments-form .js-notice-text').html(message);
-
-    function showModal(title, message) {
-      $('.js-modal-title').text(title);
-      $('.js-modal-text').html(message);
-
-      $('body').addClass('show-modal');
     }
   })(jQuery);
   </script>

_includes/comments.html

@@ -35,7 +35,7 @@
 
         <!-- 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>
+        <p class="small">{{ 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>
@@ -59,10 +59,16 @@
             <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">
+          <fieldset class="hidden" style="display: none;">
             <input type="hidden" name="options[slug]" value="{{ page.slug }}">
-            <input type="hidden" name="fields[hidden]"/>
+            <label for="comment-form-location">Not used. Leave blank if you are a human.</label>
+            <input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/>
           </fieldset>
+          <!-- Start comment form alert messaging -->
+          <p class="hidden js-notice">
+            <strong class="js-notice-text"></strong>
+          </p>
+          <!-- End comment form alert messaging -->
           <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>

_includes/seo.html

@@ -39,7 +39,7 @@
   {% assign seo_author_twitter = seo_author_twitter | replace: "@", "" %}
 {% endif %}
 
-<meta property="og:locale" content="{{ site.locale | default: "en" }}">
+<meta property="og:locale" content="{{ site.locale | replace: "-", "_" | default: "en" }}">
 <meta property="og:site_name" content="{{ site.title }}">
 <meta property="og:title" content="{{ page.title | default: site.title | markdownify | strip_html | strip_newlines | escape_once }}">
 
@@ -63,7 +63,9 @@
     <meta name="twitter:image" content="{% if page.header.image contains "://" %}{{ page.header.image }}{% else %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endif %}">
   {% else %}
     <meta name="twitter:card" content="summary">
-    {% if site.og_image %}
+    {% if page.header.teaser %}
+      <meta name="twitter:image" content="{% if page.header.teaser contains "://" %}{{ page.header.teaser }}{% else %}{{ page.header.teaser | prepend: "/images/" | prepend: base_path }}{% endif %}">
+    {% elsif site.og_image %}
       <meta name="twitter:image" content="{{ site.og_image | prepend: "/images/" | prepend: base_path }}">
     {% endif %}
   {% endif %}
@@ -87,6 +89,10 @@
   <meta property="og:image" content="{% if page.header.image contains "://" %}{{ page.header.image }}{% else %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endif %}">
 {% elsif page.header.overlay_image %}
   <meta property="og:image" content="{% if page.header.overlay_image contains "://" %}{{ page.header.overlay_image }}{% else %}{{ page.header.overlay_image | prepend: "/images/" | prepend: base_path }}{% endif %}">
+{% elsif page.header.teaser %}
+  <meta property="og:image" content="{% if page.header.teaser contains "://" %}{{ page.header.teaser }}{% else %}{{ page.header.teaser | prepend: "/images/" | prepend: base_path }}{% endif %}">
+{% elsif site.og_image %}
+  <meta property="og:image" content="{% if site.og_image contains "://" %}{{ site.og_image }}{% else %}{{ site.og_image | prepend: "/images/" | prepend: base_path }}{% endif %}">
 {% endif %}
 
 {% if page.date %}

_sass/_navigation.scss

@@ -97,7 +97,7 @@
       }
 
       &.disabled {
-        color: $light-gray;
+        color: mix(#fff, $gray, 75%);
         pointer-events: none;
         cursor: not-allowed;
       }
@@ -131,7 +131,7 @@
     font-weight: bold;
     text-align: center;
     text-decoration: none;
-    color: mix(#fff, $gray, 25%);
+    color: mix(#fff, $gray, 50%);
     border: 1px solid $light-gray;
     border-radius: $border-radius;
 
@@ -151,7 +151,7 @@
     }
 
     &.disabled {
-      color: $light-gray;
+      color: mix(#fff, $gray, 75%);
       pointer-events: none;
       cursor: not-allowed;
     }

_sass/_page.scss

@@ -8,10 +8,8 @@
   margin-top: 2em;
   padding-left: 1em;
   padding-right: 1em;
-  -webkit-animation: intro 0.3s both;
+  animation: intro 0.3s both;
-          animation: intro 0.3s both;
+  animation-delay: 0.35s;
-  -webkit-animation-delay: 0.35s;
-          animation-delay: 0.35s;
 
   @include breakpoint($x-large) {
     max-width: $x-large;
@@ -113,10 +111,8 @@
   position: relative;
   margin-bottom: 2em;
   @include clearfix;
-  -webkit-animation: intro 0.3s both;
+  animation: intro 0.3s both;
-          animation: intro 0.3s both;
+  animation-delay: 0.25s;
-  -webkit-animation-delay: 0.25s;
-          animation-delay: 0.25s;
 
   &--overlay {
     position: relative;
@@ -126,10 +122,8 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
-    -webkit-animation: intro 0.3s both;
+    animation: intro 0.3s both;
-            animation: intro 0.3s both;
+    animation-delay: 0.25s;
-    -webkit-animation-delay: 0.25s;
-            animation-delay: 0.25s;
 
     a {
       color: #fff;
@@ -303,10 +297,25 @@
 .page__comments-form {
   padding: 1em;
   background: $lighter-gray;
+  transition: $global-transition;
+
+  &.disabled {
+    input,
+    button,
+    textarea,
+    label {
+      pointer-events: none;
+      cursor: not-allowed;
+      filter: alpha(opacity=65);
+      box-shadow: none;
+      opacity: 0.65;
+    }
+  }
 }
 
 .comment {
-  margin: 2em 0;
+  @include clearfix();
+  margin: 1em 0;
 
   &:not(:last-child) {
     border-bottom: 1px solid $border-color;
@@ -314,8 +323,7 @@
 }
 
 .comment__avatar-wrapper {
-  display: table-cell;
+  float: left;
-  vertical-align: top;
   width: 60px;
   height: 60px;
 
@@ -339,8 +347,12 @@
 }
 
 .comment__content-wrapper {
-  display: table-cell;
+  float: right;
-  vertical-align: top;
+  width: calc(100% - 60px);
+
+  @include breakpoint($large) {
+    width: calc(100% - 100px);
+  }
 }
 
 .comment__author {

_sass/_syntax.scss

@@ -5,7 +5,6 @@
 div.highlighter-rouge, figure.highlight {
   position: relative;
   margin-bottom: 1em;
-  padding: 1em;
   border: 1px solid $border-color;
   border-radius: $border-radius;
   background-color: $code-background-color;
@@ -27,6 +26,7 @@ div.highlighter-rouge, figure.highlight {
 
   .highlight {
     margin: 0;
+    padding: 1em;
     font-family: $monospace;
     font-size: $type-size-7;
     line-height: 1.8;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "minimal-mistakes",
-  "version": "3.4.1",
+  "version": "3.4.3",
   "description": "Minimal Mistakes Jekyll theme npm build scripts",
   "repository": {
     "type": "git",