type-on-strap 2.4.13 → 2.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2420c122c17be2f45cf263d4e7339bd1bb193f985446014de4d8aab3f23bd8be
-  data.tar.gz: 26de41669add59557ccfed11db3a3b0ef67ff18d348132c3f703d06fd31f6ff3
+  metadata.gz: ccb4fee6ac8c69a532174663a2a2c0dcfad5725c42a4f31ecf1d109e8319a170
+  data.tar.gz: ca86903243c9c9b1d660b03962853a7db7b156dbd5f76b5af17e2535734f2a7d
 SHA512:
-  metadata.gz: f3b2c6aca18ecf499017e741cf309ec687f971b1a93668d6ecd9caebe038fcd1707d240d2d351c12466982480c05bfaf75830862c78451a9b5760902f5d4fc5f
-  data.tar.gz: c26e9a0672a93316ec4b305fe567ba9769ad40a15eb78eb2cc3899817676aabd7dc88a97584fe1cd2e034498dcf61106d2ba51420678c65983784e9492e61c8b
+  metadata.gz: 4de654f0b9e47747ada241f063797864252a72705eb543e252da6c0270e1fcc178328170192095372504095eb05d0f5a1f0132eb55d563049087d27f454a6b6c
+  data.tar.gz: ff886caa5eb1c059b8a9df3e175349f6b701059f09fe8cfa071e688aedb0d8552b98de4229df9417c38292ac6973dabf1984b6515106cbca0ac96af2e378a386

data/README.md

@@ -40,8 +40,6 @@ Based on Rohan Chandra [type-theme](https://github.com/rohanchandra/type-theme)
 
 Check out this tutorial: [Use as Ruby Gem](#use-as-ruby-gem-)
 
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#/https://github.com/sylhare/Type-On-Strap)
-
 ## Structure
 
 Here are the main files of the template
@@ -356,7 +354,7 @@ tags: [sample, markdown, html]                    # [Opt] Add tags to the page
 ```
 
 With `thumbnail`, you can add a smaller image than the `feature-img`. 
-If you don't have a thumbnail, you can still use the same image as the feature one. Or use the gulp task to create it.
+If you don't have a thumbnail, you can still use the same image as the feature one. Or use the npm script to create it.
 
 If you don't use a feature image, but `color`, the transparent background is set comes from [`lineart.png`](assets/img/lineart.png). 
 You can edit it in the config file (`_config.yml > color_image`). If you want another one, put it in `/assets/img` as well. 
@@ -373,7 +371,7 @@ It will respect the page and theme layout, mind the padding on the sides.
 The [excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) is the head of the article rendered in the blog page. 
 The length of the excerpt has a default of around `250` characters or can be manually set in the post using:
 
-in `conflig.yml`:
+in `_config.yml`:
 
 ```yml
 excerpt: true
@@ -518,8 +516,8 @@ This creates the collection for Jekyll, so it can find and display your portfoli
 
 ### Feature: Gallery 🖼
 
-You can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures at the optimal position 
-based on available vertical space. 
+You can create a gallery using a column layout which will place the pictures at the optimal position
+based on available vertical space.
 You need to specify the `gallery_path` which will be used to find the pictures to render. 
 It will take all the pictures under that directory. Then use the `include` to add it in your page. 
 
@@ -588,51 +586,20 @@ Jekyll works with [liquid](https://shopify.github.io/liquid/) tags usually repre
 These are useful to render your jekyll files. 
 You can learn more about them on [shopify's doc](https://help.shopify.com/themes/liquid/basics)
 
-### Gulp toolbox
-
-#### Requirements
+### npm scripts toolbox
 
-Before you need to have *node* and `npm` installed:
+If you are not familiar with npm scripts, check the [CONTRIBUTING.md](.github/CONTRIBUTING.md) for setup instructions.
 
-- Windows: https://nodejs.org/
-- Ubuntu/Debian: `apt-get install nodejs npm libgl1 libxi6`
-- Fedora (dnf) / RHEL/CentOS (yum): `dnf install node npm libglvnd-glx libXi`
-
-Then you need to install [`gulp-cli`](https://gulpjs.com/) and its dependencies:
+To create a new post with today's date:
 
 ```bash
-cd assets/
-sudo npm install gulp-cli -g
-npm install
+npm run post 'title of the post'
 ```
 
-#### Minimizing and optimizing: css, js and images
-
-You can run the default task that will compress the js, css and images and create the thumbnails for the supported image
-formats:
-
-```bash
-cd assets/
-gulp default
-gulp thumbnails-all # to create all of the images thumbnails
-gulp thumbnails     # to create thumbnails for the feature-img/ only
-# tip: run a git status to see the changes
-git status
-```
-
-You can find more about the gulp tasks in the [gulpfile.js](assets/gulpfile.js).
-
-#### Create a post
-
-To create a `.md` file in the *_posts/* section with the jekyll format of today's date.
-Use this command with the title you'd like to create the very basic post.
-
-```bash
-gulp post -n 'title of the post'
-```
+A file `_posts/YYYY-MM-DD-title-of-the-post.md` will be created with default frontmatter.
+Nothing will happen if the file already exists.
 
-A file will be created following the format `yyyy-mm-dd-title-of-the-post.md` with default post attributes inside.
-Nothing will happen if the file exists already.
+For build scripts, image optimization, and the full development setup, see [CONTRIBUTING.md](.github/CONTRIBUTING.md).
 
 ### Use as Ruby Gem 💎
 

data/_includes/blog/blog.liquid

@@ -1,9 +1,9 @@
-<div class="posts">
+<div class="posts" data-testid="blog-posts">
     {% unless paginator.posts %}
     <article><section class="post-content"><p>There are no blog posts</p></section></article>
     {% endunless %}
     {% for post in paginator.posts %}
-    <div class="post-teaser">
+    <div class="post-teaser" data-testid="blog-post-teaser">
         {% if post.thumbnail %}
         <div class="post-img">
             <a aria-label="{{ post.title }}" href="{{ post.url | relative_url }}">
@@ -14,7 +14,7 @@
         <span>
           <header>
             <h1>
-              <a aria-label="{{ post.title }}" class="post-link" href="{{ post.url | relative_url }}">
+              <a aria-label="{{ post.title }}" class="post-link" data-testid="blog-post-link" href="{{ post.url | relative_url }}">
                 {{ post.title }}
               </a>
             </h1>

data/_includes/blog/blog_nav.liquid

@@ -1,5 +1,5 @@
 {% if paginator.total_pages > 1 %}
-<div class="pagination">
+<div class="pagination" data-testid="blog-pagination">
     <div class="previous">
         
         {% if paginator.previous_page and paginator.previous_page != 1%}

data/_includes/blog/post_footer.liquid

@@ -13,6 +13,7 @@
         .post-content a { color: {{ color }} !important; }
         .share-buttons a { color: {{ color }} !important; }
         .tag-list a:not(:hover) { color: {{ color }} !important; }
+        .category-list a:not(:hover) { color: {{ color }} !important; }
         div#post-nav a { color: {{ color }} !important; }
         footer a { color: {{ color }} !important; }
         .site-header nav a:hover {  color: {{ color }} !important; }

data/_includes/blog/post_nav.liquid

@@ -1,7 +1,7 @@
 <div id="post-nav">
     {% if page.next.url %}
     <div id="previous-post">
-        <a alt="{{ page.next.title }}" href="{{ page.next.url | relative_url | default: 'none' }}">
+        <a href="{{ page.next.url | relative_url | default: 'none' }}">
             <p>{{ site.data.language.str_previous_post | default: "Previous post" }}</p>
             {{ page.next.title }}
         </a>
@@ -10,7 +10,7 @@
 
     {% if page.previous.url %}
     <div id="next-post">
-        <a alt="{{ page.previous.title }}" href="{{ page.previous.url | relative_url | default: 'none' }}">
+        <a href="{{ page.previous.url | relative_url | default: 'none' }}">
             <p>{{ site.data.language.str_next_post | default: "Next post"}}</p>
             {{ page.previous.title }}
         </a>

data/_includes/default/category_list.liquid

@@ -0,0 +1,22 @@
+{% assign categories = include.categories | split:'|' | sort | uniq %}
+
+{% if categories.size > 0 %}
+  <div class="category-list" data-testid="category-list">
+    <ul>
+      {% if categories.size == 1 %}
+        <li class="meta">Category</li>
+      {% else %}
+        <li class="meta">Categories</li>
+      {% endif %}
+
+      {% for category in categories %}
+        <li><a class="button" data-testid="category-link" href="{{ site.baseurl }}/categories#{{ category | cgi_escape }}">
+          <p><i class="fas fa-folder fa-fw fa-sm"></i> {{ category }}</p>
+        </a></li>
+      {% endfor %}
+    </ul>
+  </div>
+{% else %}
+  <div class="category-list"></div>
+{% endif %}
+

data/_includes/default/head.liquid

@@ -15,7 +15,7 @@
         }
     </script>
 
-    <!-- Main JS (navbar.js, katex_init.js and masonry_init.js)-->
+    <!-- Main JS (navbar.js, katex_init.js)-->
     <script defer src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
 
     <!-- CSS -->
@@ -24,29 +24,34 @@
     <!--Favicon-->
     <link rel="shortcut icon" href="{{ site.favicon | relative_url }}" type="image/x-icon">
 
+    <!-- Preconnect to Cusdis for faster loading when comments become visible -->
+    {% if site.data.comments.cusdis.app_id or site.comments.cusdis_app_id or site.cusdis_app_id %}
+    <link rel="preconnect" href="https://cusdis.com">
+    {% endif %}
+
     {% if page.bootstrap %}
-    <!-- Bootstrap-4.1.3 isolation CSS -->
-    <link rel="stylesheet" type="text/css" href="{{ '/assets/css/vendor/bootstrap-iso.min.css' | relative_url }}">
-    <!-- JQuery 3.3.1 -->
-    <script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <!-- Bootstrap 4.1.3 compiled and minified JavaScript -->
-    <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-    <!-- Popper, a dependency of Bootstrap-->
-    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <!-- Bootstrap 4.6.2 CSS CDN -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+    <!-- jQuery 3.5.1 CDN -->
+    <script defer src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <!-- Popper.js 1.16.1 CDN -->
+    <script defer src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+    <!-- Bootstrap 4.6.2 JS CDN -->
+    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbZUBVs2mbGk8cFoTfurqEOk6sD3+6VUuY3" crossorigin="anonymous"></script>
     {% endif %}
 
-    <!-- KaTeX 0.16.25 -->
+    <!-- KaTeX 0.16.38 -->
     {% if site.katex or site.theme_settings.katex %}
     <script defer src="{{ '/assets/js/vendor/katex.min.js' | relative_url }}"></script>
     <script defer src="{{ '/assets/js/vendor/katex.auto-render.min.js' | relative_url }}" onload="renderMathInElement(document.body);"></script>
     {% endif %}
 
-    <!-- Mermaid 11.12.0 -->
+    <!-- Mermaid 11.13.0 -->
     {% if site.mermaid %}
     <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}"></script>
     {% endif %}
 
-    <!-- Simple Jekyll Search 1.10.0 -->
+    <!-- Simple-Jekyll-Search 2.1.3 -->
     <script src="{{ '/assets/js/vendor/simple-jekyll-search.min.js' | relative_url }}" type="text/javascript"></script>
 
     <!-- Google Analytics / Cookie Consent -->

data/_includes/default/navbar.liquid

@@ -30,7 +30,7 @@
             <li>
                 <a class="clear" aria-label="{{ page.title }}" title="{{ page.title }}" href="{{ page.url | relative_url }}">
                     {% if page.icon %} <i class="navbar-icon fas {{ page.icon }}" aria-hidden="true"></i>{% endif %}
-                    <span class="navbar-label {% if page.icon %}navbar-label-with-icon{% endif%}">{{ page.title }}</span>
+                    <span class="navbar-label {% if page.icon %}navbar-label-with-icon{% endif %}">{{ page.title }}</span>
                 </a>
             </li>
         {% endunless %}
@@ -39,7 +39,7 @@
 
         {% if site.color_theme == 'auto' %}
         <li class="separator"> | </li>
-        <li><a id="theme-toggle" title="{{ page.title }} " aria-label="{{ page.title }}" onclick="themeToggle()"></a></li>
+        <li><a id="theme-toggle" title="{{ site.data.language.str_dark | default: 'Toggle theme' }}" aria-label="{{ site.data.language.str_dark | default: 'Toggle theme' }}" onclick="themeToggle()"></a></li>
         {% endif %}
     </ul>
 

data/_includes/default/tags_list.liquid

@@ -1,7 +1,7 @@
 {% assign tags = include.tags | split:'|' | sort | uniq %}
 
 {% if tags.size > 0 %}
-  <div class="tag-list">
+  <div class="tag-list" data-testid="tag-list">
     <ul>
       {% if tags.size == 1 %}
         <li class="meta">Tag</li>
@@ -10,7 +10,7 @@
       {% endif %}
 
       {% for tag in tags %}
-        <li><a class="button" href="{% unless 'Tags' == page.title %}{{ site.baseurl }}/tags{% endunless %}#{{ tag | cgi_escape }}">
+        <li><a class="button" data-testid="tag-link" href="{% unless 'Tags' == page.title %}{{ site.baseurl }}/tags{% endunless %}#{{ tag | cgi_escape }}">
           <p><i class="fas fa-tag fa-fw fa-sm"></i> {{ tag }}</p>
         </a></li>
       {% endfor %}

data/_includes/gallery.html

@@ -6,17 +6,15 @@ html { overflow-y: scroll; }
 /* article {padding:2%;} */
 </style>
 
-<div id='masonry' class="grid">
-<div class="grid-sizer"></div>
-<div class="gutter-sizer"></div>
+<div id="gallery-grid" class="grid">
+<div class="grid-col grid-col--1"></div>
+<div class="grid-col grid-col--2"></div>
+<div class="grid-col grid-col--3"></div>
 {% for image in site.static_files %}
   {% if image.path contains include.gallery_path %}
     {% unless image.path contains '.md' %}
-        <img src="{{ image.path | relative_url }}" alt="" class="grid-item" style="padding: 0;">
+        <img src="{{ image.path | relative_url }}" alt="" class="grid-item" loading="lazy" style="padding: 0;">
     {% endunless %}
   {% endif %}
 {% endfor %}
 </div>
-
-<script src="{{ '/assets/js/vendor/imagesloaded.pkgd.min.js' | relative_url }}" type="text/javascript"></script>
-<script src="{{ '/assets/js/vendor/masonry.pkgd.min.js' | relative_url }}" type="text/javascript"></script>

data/_includes/portfolio.html

@@ -1,14 +1,14 @@
 <!-- Portfolio Grid Section -->
-<div class="portfolio-grid">
+<div class="portfolio-grid" data-testid="portfolio-grid">
     {% for item in site.portfolio %}
-    <div class="portfolio-cell">
-        <a class="portfolio-link" data-keyboard="true" href="{{ item.url | relative_url }}">
-            <div class="caption" title="{{ item.title }}">
+    <div class="portfolio-cell" data-testid="portfolio-item">
+        <a class="portfolio-link" data-testid="portfolio-item-link" data-keyboard="true" href="{{ item.url | relative_url }}">
+            <div class="caption" data-testid="portfolio-item-caption" title="{{ item.title }}">
                 <div class="caption-content">
                     <i class="fas fa-search-plus fa-3x"></i>
                 </div>
             </div>
-            <img alt="" class="" src="{{ item.img | relative_url }}">
+            <img alt="{{ item.title }}" class="" data-testid="portfolio-item-image" loading="lazy" src="{{ item.img | relative_url }}">
         </a>
     </div>
     {% endfor %}

data/_includes/social/cusdis.liquid

@@ -5,9 +5,9 @@
   data-page-url="{{ page.url | absolute_url }}"
   data-page-title="{{ page.title }}"
   data-theme="{{ site.color_theme }}"
+  data-lazy-load="true"
+  {% if site.data.comments.cusdis.lang or site.data.language.cusdis_lang %}
+  data-lang="{% if site.data.comments.cusdis.lang %}{{ site.data.comments.cusdis.lang }}{% else %}{{ site.data.language.cusdis_lang }}{% endif %}"
+  {% endif %}
 ></div>
-
-{% if site.data.comments.cusdis.lang or site.data.language.cusdis_lang %}
-<script defer src="https://cusdis.com/js/widget/lang/{% if site.data.comments.cusdis.lang %}{{ site.data.comments.cusdis.lang }}{% else %}{{ site.data.language.cusdis_lang }}{% endif %}.js"></script>
-{% endif %}
-<script defer src="https://cusdis.com/js/cusdis.es.js"></script>
+<script defer src="{{ '/assets/js/comments-lazy-load.min.js' | relative_url }}"></script>

data/_includes/social/disqus.liquid

@@ -1,12 +1,7 @@
-<div class="comments">
-    <div id="disqus_thread"></div>
-    <script type="text/javascript">
-      var disqus_shortname = '{{ site.data.comments.disqus.shortname }}' || '{{ site.comments.disqus_shortname }}' || '{{ site.disqus_shortname }}';
-      (function() {
-        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-      })();
-    </script>
-    <noscript>{{ site.data.language.str_javascript_required_disqus | default: "Please enable JavaScript to view comments." }}</noscript>
+<div class="comments" id="disqus_thread"
+  data-lazy-load="true"
+  data-shortname="{% if site.data.comments.disqus.shortname %}{{ site.data.comments.disqus.shortname }}{% elsif site.comments.disqus_shortname %}{{ site.comments.disqus_shortname }}{% else %}{{ site.disqus_shortname }}{% endif %}"
+>
+  <noscript>{{ site.data.language.str_javascript_required_disqus | default: "Please enable JavaScript to view comments." }}</noscript>
 </div>
+<script defer src="{{ '/assets/js/comments-lazy-load.min.js' | relative_url }}"></script>

data/_includes/social/giscus.liquid

@@ -1,17 +1,17 @@
-<script src="https://giscus.app/client.js"
-        data-repo="{{ site.data.comments.giscus.repo }}"
-        data-repo-id="{{ site.data.comments.giscus.repo-id }}"
-        {% if site.data.comments.giscus.category %}data-category="{{ site.data.comments.giscus.category }}"{% endif %}
-        data-category-id="{{ site.data.comments.giscus.category-id }}"
-        data-mapping="{{ site.data.comments.giscus.mapping }}"
-        {% if site.data.comments.giscus.term %}data-term="{{ site.data.comments.giscus.term }}"{% endif %}
-        data-strict="{% if site.data.comments.giscus.strict %}{{ site.data.comments.giscus.strict }}{% else %}0{% endif %}"
-        data-reactions-enabled="{% if site.data.comments.giscus.reactions-enabled %}{{ site.data.comments.giscus.reactions-enabled }}{% else %}1{% endif %}"
-        data-emit-metadata="{% if site.data.comments.giscus.emit-metadata %}{{ site.data.comments.giscus.emit-metadata }}{% else %}0{% endif %}"
-        data-input-position="{% if site.data.comments.giscus.input-position %}{{ site.data.comments.giscus.input-position }}{% else %}bottom{% endif %}"
-        data-theme="{% if site.data.comments.giscus.theme %}{{ site.data.comments.giscus.theme }}{% elsif site.color_theme == 'dark' %}dark{% else %}light{% endif %}"
-        data-lang="{% if site.data.comments.giscus.lang %}{{ site.data.comments.giscus.lang }}{% else %}en{% endif %}"
-        {% if site.data.comments.giscus.loading %}data-loading="{{ site.data.comments.giscus.loading }}"{% endif %}
-        crossorigin="anonymous"
-        async>
-</script>
+<div id="giscus_thread"
+  data-lazy-load="true"
+  data-repo="{{ site.data.comments.giscus.repo }}"
+  data-repo-id="{{ site.data.comments.giscus.repo-id }}"
+  {% if site.data.comments.giscus.category %}data-category="{{ site.data.comments.giscus.category }}"{% endif %}
+  data-category-id="{{ site.data.comments.giscus.category-id }}"
+  data-mapping="{{ site.data.comments.giscus.mapping }}"
+  {% if site.data.comments.giscus.term %}data-term="{{ site.data.comments.giscus.term }}"{% endif %}
+  data-strict="{% if site.data.comments.giscus.strict %}{{ site.data.comments.giscus.strict }}{% else %}0{% endif %}"
+  data-reactions-enabled="{% if site.data.comments.giscus.reactions-enabled %}{{ site.data.comments.giscus.reactions-enabled }}{% else %}1{% endif %}"
+  data-emit-metadata="{% if site.data.comments.giscus.emit-metadata %}{{ site.data.comments.giscus.emit-metadata }}{% else %}0{% endif %}"
+  data-input-position="{% if site.data.comments.giscus.input-position %}{{ site.data.comments.giscus.input-position }}{% else %}bottom{% endif %}"
+  data-theme="{% if site.data.comments.giscus.theme %}{{ site.data.comments.giscus.theme }}{% elsif site.color_theme == 'dark' %}dark{% else %}light{% endif %}"
+  data-lang="{% if site.data.comments.giscus.lang %}{{ site.data.comments.giscus.lang }}{% else %}en{% endif %}"
+  {% if site.data.comments.giscus.loading %}data-loading="{{ site.data.comments.giscus.loading }}"{% endif %}
+></div>
+<script defer src="{{ '/assets/js/comments-lazy-load.min.js' | relative_url }}"></script>

data/_includes/social/share_buttons.liquid

@@ -13,7 +13,7 @@
         <li class="meta">Share</li>
         {% if site.data.social.share.facebook or site.theme_settings.share_buttons.facebook %}
         <li>
-            <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url }}" target="_blank"
+            <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url }}" target="_blank" rel="noopener noreferrer"
                title="{{ site.data.social.language.str_share_on }} Facebook">
                 <i class="fab fa-facebook-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} Facebook</span>
@@ -22,7 +22,7 @@
         {% endif %} {% if site.data.social.share.twitter or site.theme_settings.twitter %}
         <li>
             <a href="https://twitter.com/intent/tweet?text={{ page.title | strip_html | url_encode }}%20{{ page.url | absolute_url | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_tweet }}">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_tweet }}">
                 <i class="fab fa-twitter-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_tweet | default: "Tweet" }}</span>
             </a>
@@ -30,7 +30,7 @@
         {% endif %} {% if site.data.social.share.tumblr or site.theme_settings.tumblr %}
         <li>
             <a href="https://www.tumblr.com/share?v=3&u={{ page.url | absolute_url }}&quote={{ page.title | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}&s="
-               target="_blank" title="{{ site.data.social.language.str_share_on }} Tumblr">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} Tumblr">
                 <i class="fab fa-tumblr-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} Tumblr</span>
             </a>
@@ -38,7 +38,7 @@
         {% endif %} {% if site.data.social.share.pinterest or site.theme_settings.pinterest %}
         <li>
             <a href="https://pinterest.com/pin/create/button/?url={{ page.url | absolute_url }}&media={{ page.feature-img | absolute_url }}$description={{ page.excerpt | strip_html | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_pin_it }}">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_pin_it }}">
                 <i class="fab fa-pinterest-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_pin_it | default: "Pin it" }}</span>
             </a>
@@ -46,7 +46,7 @@
         {% endif %} {% if site.data.social.share.pocket or site.theme_settings.pocket %}
         <li>
             <a href="https://getpocket.com/save?url={{ page.url | absolute_url }}&title={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_add_to }} Pocket">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_add_to }} Pocket">
             <span class="fa-stack fa-1x" style="vertical-align: top">
               <i class="fas fa-square fa-stack-2x" aria-hidden="true"></i>
               <i class="fab fa-get-pocket fa-stack-1x fa-inverse" aria-hidden="true"></i>
@@ -57,7 +57,7 @@
         {% endif %} {% if site.data.social.share.reddit or site.theme_settings.reddit %}
         <li>
             <a href="https://www.reddit.com/submit?url={{ page.url | absolute_url }}&title={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_share_on }} Reddit">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} Reddit">
                 <i class="fab fa-reddit-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} Reddit</span>
             </a>
@@ -65,7 +65,7 @@
         {% endif %} {% if site.data.social.share.linkedin or site.theme_settings.linkedin %}
         <li>
             <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.url | absolute_url }}&title={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}&summary=&source={{ page.url | absolute_url }}"
-               target="_blank" title="{{ site.data.social.language.str_share_on }} LinkedIn">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} LinkedIn">
                 <i class="fab fa-linkedin fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} LinkedIn</span>
             </a>
@@ -73,7 +73,7 @@
         {% endif %} {% if site.data.social.share.wordpress or site.theme_settings.wordpress %}
         <li>
             <a href="https://wordpress.com/press-this.php?u={{ page.url | absolute_url }}&quote={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}&s="
-               target="_blank" title="{{ site.data.social.language.str_share_on }} WordPress">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} WordPress">
                 <i class="fab fa-wordpress fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} WordPress</span>
             </a>
@@ -81,7 +81,7 @@
         {% endif %} {% if site.data.social.share.email or site.theme_settings.email %}
         <li>
             <a href="mailto:?subject={{ page.title }}%20%7C%20{{ site.title  }}&body={{ page.url | absolute_url }}"
-               target="_blank" title="{{ site.data.social.language.str_email }}">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_email }}">
                 <i class="fas fa-envelope-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_email | default: "Email" }}</span></a>
         </li>

data/_includes/social/utterances.liquid

@@ -1,8 +1,8 @@
-<script src="https://utteranc.es/client.js"
-        repo='{% if site.data.comments.utterances.repo %}{{ site.data.comments.utterances.repo }}{% else %}{{ site.comments.utterances.repo }}{% endif %}'
-        issue-term="{% if site.data.comments.utterances.issue-term %}{{ site.data.comments.utterances.issue-term }}{% else %}{{ site.comments.utterances.issue-term }}{% endif %}"
-        theme="{% if site.data.comments.utterances.theme %}{{ site.data.comments.utterances.theme }}{% elsif site.comments.utterances.theme %}{{ site.comments.utterances.theme }}{% elsif site.color_theme == 'dark' %}github-dark{% else %}github-light{% endif %}"
-		{% if site.data.comments.utterances.label or site.comments.utterances.label %}label="{% if site.data.comments.utterances.label %}{{ site.data.comments.utterances.label }}{% else %}{{ site.comments.utterances.label }}{% endif %}"{% endif %}
-        crossorigin="anonymous"
-        async>
-</script>
+<div id="utterances_thread"
+  data-lazy-load="true"
+  data-repo="{% if site.data.comments.utterances.repo %}{{ site.data.comments.utterances.repo }}{% else %}{{ site.comments.utterances.repo }}{% endif %}"
+  data-issue-term="{% if site.data.comments.utterances.issue-term %}{{ site.data.comments.utterances.issue-term }}{% else %}{{ site.comments.utterances.issue-term }}{% endif %}"
+  data-theme="{% if site.data.comments.utterances.theme %}{{ site.data.comments.utterances.theme }}{% elsif site.comments.utterances.theme %}{{ site.comments.utterances.theme }}{% elsif site.color_theme == 'dark' %}github-dark{% else %}github-light{% endif %}"
+  {% if site.data.comments.utterances.label or site.comments.utterances.label %}data-label="{% if site.data.comments.utterances.label %}{{ site.data.comments.utterances.label }}{% else %}{{ site.comments.utterances.label }}{% endif %}"{% endif %}
+></div>
+<script defer src="{{ '/assets/js/comments-lazy-load.min.js' | relative_url }}"></script>