type-on-strap 2.4.12 → 2.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '075180d85d8b3f726379b120cda867ef006c58038108a1eb5d5e8d6bd964552f'
-  data.tar.gz: cbebd901837f8c486e86e0e1375d1c70e9f2c106fbf12502bfae7b40209c1ae6
+  metadata.gz: c7b245eafb6465e6bd1a012032498fb81901591c09680290587ec232ea579643
+  data.tar.gz: f81e6aaf2e9ef2dc13f6275da54a05143cb305a88dbd4e6b3af6cad085555e2c
 SHA512:
-  metadata.gz: 0ab3635eb48b4b914f8a01213f8097151d03efe64fd97508b756e316652ecdde7ad26513e9881890f106ab30a764925e924b6a5d93bd2e08e3a58cb31bab129b
-  data.tar.gz: f4b7a95179014c900312f9b2deb46a3201cf207742204893c68833f549fbd9cf1c31ece6fc56d3e163a6faa5a1eb577b0fd26cd90afc4d521c6b08fd534d5bad
+  metadata.gz: ca5de0fb72854009a6ede7a395e65c572c2100a80d6f338f90dd6cc0b8f08199aca694f54a1be26f01231681673173662caa4b1bc7c277f736b9d14d4569aeef
+  data.tar.gz: 44fe3825598c76e401b010c7b9630b4b7c1a83309c609ef7cff81efaeded6e78242447664e0c567ca88b0cac361fc9ca02da921d944f64a24f6d301d71680c1c

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
@@ -68,6 +66,7 @@ Here are the main files of the template
 ├── _config.yml                # sample configuration
 ├── _data
 |  ├── authors.yml             # Update the post authors configurations 
+|  ├── comments.yml            # Comments configuration (Disqus, Cusdis, Utterances, Giscus)
 |  ├── language.yml            # Localization configuration
 |  ├── biblio.yml              # To create a reference bibliography
 |  ├── social.yml              # Social configurations to share posts (RSS, shares, ...)
@@ -77,7 +76,7 @@ Here are the main files of the template
 	
 ## Configure Type on Strap 🛠
 
-Open `_config.yml` in a text editor to change most of the blog's settings.
+Open [`_config.yml`](_config.yml) in a text editor to change most of the blog's settings.
 
 If a variable in this document is marked as "optional", disable the feature by removing all text from the variable. 
 
@@ -85,7 +84,7 @@ If a variable in this document is marked as "optional", disable the feature by r
 
 #### Base url
 
-Configure Jekyll as your own blog or with a "baseurl" in `_config.yml`:
+Configure Jekyll as your own blog or with a "baseurl" in [`_config.yml`](_config.yml):
 
 Jekyll website *without* a "baseurl" (such as a **GitHub Pages website** with your username as the repository name):
 
@@ -103,7 +102,7 @@ url: "https://username.github.io"
 
 #### Jekyll blog configuration 
 
-And here is the basic information you will need in your `_config.yml` for it to work properly:
+And here is the basic information you will need in your [`_config.yml`](_config.yml) for it to work properly:
 
 ```yaml
 # BLOG CONFIGURATION
@@ -120,7 +119,7 @@ To configure the blog part and default plugins. Those plugins are validated by G
 _Meta variables_ hold basic information about your Jekyll site, which will be used throughout the site 
 and as _meta properties_ that are used for search engines, browsers, and the site's RSS feed.
 
-Change these variables in `_config.yml`:
+Change these variables in [`_config.yml`](_config.yml):
 
 ```yml
 title: My Jekyll Blog                 # Name of website
@@ -131,14 +130,14 @@ color_theme: auto                     # color theme auto, dark or light
 ```
 
 You can also customize the seo tags default option following the jekyll-seo-tag plugin [documentation](http://jekyll.github.io/jekyll-seo-tag/advanced-usage/).
-The color theme can be set to dark or light (customize it in _variables.scss_). 
+The color theme can be set to dark or light (customize it in [`_variables.scss`](_sass/base/_variables.scss)). 
 Using _auto_ you'll have a tiny icon in the navbar allowing the use to manually switch from dark to light theme.
 
 ### Theme customization 🎨
 
 #### Footer and Header text
 
-Customize your site header/footer with these variables in `_config.yml`:
+Customize your site header/footer with these variables in [`_config.yml`](_config.yml):
 
 ```yml
 header_text: Welcome to my Jekyll blog
@@ -163,7 +162,7 @@ with suffix `-small` (620x320) and `-medium` (1240x640) to display on smaller sc
 #### Localisation string
 
 Localization string is a way to quickly change the template language for text like *Next Post* or *Follow on*, ...
-You can find all the properties in `_data/language.yml`.
+You can find all the properties in [`_data/language.yml`](_data/language.yml).
 
 By default, it is in English, but you can add your own language.
 
@@ -173,7 +172,7 @@ Here you also can set the date format, e.g., set `str_date_format: '%B %-d, %Y'`
 ### Google Analytics
 
 To enable Google Analytics (GA4), add your [Measurement ID](https://support.google.com/analytics/answer/12270356?hl=en&sjid=1593376271608310401-NA) 
-to `_config.yml` like so:
+to [`_config.yml`](_config.yml) like so:
 
 ```yml
 google_analytics: G-XXXXXXXXXX
@@ -183,12 +182,15 @@ It will use the [Google Tag Manager](https://support.google.com/analytics/answer
 
 ### Comments 💬
 
+Type-on-Strap supports multiple comment systems. 
+Use [`_data/comments.yml`](_data/comments.yml) for all comment configurations
+
 #### Disqus
 
 If you have a [Disqus](https://disqus.com/) account, you can show a comments section below each post.
 
 To enable Disqus comments, add your [Disqus shortname](https://help.disqus.com/customer/portal/articles/466208) 
-to your project's `_config.yml` file:
+to your project's [`_data/comments.yml`](_data/comments.yml) file:
 
 ```yml
 comments:
@@ -200,7 +202,7 @@ comments:
 [Cusdis](https://cusdis.com/) is an open-source alternative to Disqus.
 You can read more about it in the [documentation](https://cusdis.com/doc#/)
 
-To enable it, set your Cusdis name in `_config.yml`:
+To enable it, set your Cusdis name in [`_data/comments.yml`](_data/comments.yml):
 
 ```yaml
 comments:
@@ -213,7 +215,7 @@ comments:
 It stores the comments as GitHub issues on a repository for each page.
 
 Install the utterance [app](https://github.com/apps/utterances) to your repo.
-After installing, add your info in the `_config.yml`:
+After installing, add your info in the [`_data/comments.yml`](_data/comments.yml):
 
 ```yaml
 comments:
@@ -224,16 +226,41 @@ comments:
     label:                 # OPTIONAL: Adds an issue label in the issue
 ```
 
+#### Giscus
+
+[Giscus](https://giscus.app/) is another open source alternative linked to one's GitHub account.
+It stores the comments as GitHub discussions on a repository for each page.
+
+Install the giscus [app](https://github.com/apps/giscus) to your repo.
+After installing, add your info in the [`_data/comments.yml`](_data/comments.yml):
+
+```yaml
+comments:
+  giscus:                   # Enable by filling below information. For more info, go to https://giscus.app
+    repo:                   # Your public comments repository (e.g. owner/repo)
+    repo-id:                # Your repo id, go to https://giscus.app to check it
+    category:               # Category to search discussions. When removed, discussions will be searched in all categories
+    category-id:            # Your category id, go to https://giscus.app to check it
+    mapping:                # Discussion mapping
+    term:                   # OPTIONAL: some mappings require specific term, go to https://giscus.app to check it
+    strict: 1               # OPTIONAL: Avoid mismatches on similar titles
+    reactions-enabled: 0    # OPTIONAL: Disable reactions
+    emit-metadata: 1        # OPTIONAL: Emit discussion metadata
+    input-position: top     # OPTIONAL: Place the comment box above the comments
+    theme:                  # OPTIONAL: Take the `color_theme` by default, or set a custom one like dark_dimmed
+    lang:                   # OPTIONAL: Choose the language. "en" is used by default
+```
+
 ### Math typesetting with KateX
 
-When KateX is set in `_config.yml`:
+When KateX is set in [`_config.yml`](_config.yml):
 
 ```yml
 katex: true # to enable it
 ```
 
 You can then wrap math expressions with `$$` signs in your posts and make sure you have set the `katex` variable 
-in `_config.yml` to `true` for math typesetting.
+in [`_config.yml`](_config.yml) to `true` for math typesetting.
 
 For inline math typesetting, type your math expression on the *same line* as your content. For example:
 
@@ -253,7 +280,7 @@ You can find a cheat sheet of the compatible LaTex symbols [online](https://arto
 
 ### Diagrams with Mermaid
 
-Enable the [mermaid-js](https://github.com/mermaid-js/mermaid) diagram rendering by setting mermaid to true in the `_config.yml`.
+Enable the [mermaid-js](https://github.com/mermaid-js/mermaid) diagram rendering by setting mermaid to true in the [`_config.yml`](_config.yml).
 This will load and init the [mermaid.min.js](https://mermaid-js.github.io/mermaid/getting-started/n00b-gettingStarted.html#4-calling-mermaid-from-a-relative-link).
 
 ```yml
@@ -272,11 +299,11 @@ sequenceDiagram
 
 ### Social icons
 
-In `_data/social.yml` you can customize the social icons that will be displayed in the post to share your post.
+In [`_data/social.yml`](_data/social.yml) you can customize the social icons that will be displayed in the post to share your post.
 You can also enable RSS.
 The site icons come from [Font Awesome](https://fontawesome.com/).
 
-In `_data/icons.yml` you can set the footer icon that will appear at the bottom of the page.
+In [`_data/icons.yml`](_data/icons.yml) you can set the footer icon that will appear at the bottom of the page.
 They will redirect the user on your profile on to other platforms like Twitter, GitHub and so many more!
 
 ### Cookie consent
@@ -293,11 +320,11 @@ They will on click redirect you to the logo's platform to share the article.
 #### Footer
 
 Display icons in the footer. 
-All icon variables should be your username enclosed in quotes (e.g. "username") in `_data/icons.yml`.
+All icon variables should be your username enclosed in quotes (e.g. "username") in [`_data/icons.yml`](_data/icons.yml).
 
 You can update the RSS settings in `_data/social` to change the default feed path (generated by [jekyll-feel](https://github.com/jekyll/jekyll-feed)).
 To enable the share icons at the bottom of each article,
-set to true the one you'd like under `share` in the `_data/social.yml` file.
+set to true the one you'd like under `share` in the [`_data/social.yml`](_data/social.yml) file.
 
 ### Personalize your Blog Posts 📝
 
@@ -329,7 +356,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 use a feature image, but `color`, the transparent background is set comes from `lineart.png`. 
+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. 
 
 For position, if not set on all pages, it will be by alphabetical order without `position` then by `position` order.
@@ -399,7 +426,7 @@ of your favourite highlight color scheme on this format.
 All feature pages besides the "home" one are stored in the `page` folder, 
 they will appear in the navigation bar unless you set `Hide: true` in the front matter. 
 
-Here are the documentation for the other feature pages that can be added through `_config.yml`. 
+Here are the documentation for the other feature pages that can be added through [`_config.yml`](_config.yml). 
 
 Non-standard features are documented below.
 
@@ -410,13 +437,13 @@ Unless you are making a custom layout you won't need it.
 
 ### Layout: Home 🏡
 
-This page is used as the home page of the template (in the `index.html`). It displays the list of articles in `_posts`.
+This page is used as the home page of the template (in the [`index.html`](index.html)). It displays the list of articles in `_posts`.
 You can use this layout in another page (adding a title to it will make it appear in the navigation bar).
 
 The recommended width and height for the home picture is width:`2484px;` and height:`1280px` 
 which are the dimensions of the actual picture for it to be rolling down as you scroll the page.
 
-If your posts are not displaying ensure that you have added the line `paginate: 5` to `_config.yml`.
+If your posts are not displaying ensure that you have added the line `paginate: 5` to [`_config.yml`](_config.yml).
 
 ### Layout: Page 📄
 
@@ -442,7 +469,7 @@ The hide only hides your page from the navigation bar, it is, however, still gen
 
 Portfolio is a feature page that will take all the markdown/html files in the `_portfolio` folder to create a 3-columns image portfolio matrix.
 
-To use the portfolio, simply create a `portfolio.md` with this information inside:
+To use the portfolio, simply create a [`portfolio.md`](pages/portfolio.md) with this information inside:
 
 ```yml
 
@@ -475,7 +502,7 @@ date: 2019-07-25		 	       # Not mandatory, however needs to be in date format t
 
 #### Portfolio in gem
 
-Make sure your `_config.yml` contains the following if you are using the theme as a gem:
+Make sure your [`_config.yml`](_config.yml) contains the following if you are using the theme as a gem:
 
 ```yml
 # PORTFOLIO
@@ -508,7 +535,7 @@ gallery: "assets/img/pexels"
 ### Feature: Search 🔍
 
 The search feature is based on [Simple-Jekyll-search](https://github.com/sylhare/Simple-Jekyll-Search) 
-there is a `search.liquid` file that will create a list of all the site posts, pages and portfolios. 
+there is a [`search.liquid`](_layouts/search.liquid) file that will create a list of all the site posts, pages and portfolios. 
 Then there's a script displaying the formatted results in the _search page_.
 
 To exclude contents from the search add the `exclude: true` option in the markdown header. 
@@ -616,7 +643,7 @@ Add this line to your Jekyll site's Gemfile (or create one):
 gem "type-on-strap"
 ```
 
-Add this line to your Jekyll site's `_config.yml` file:
+Add this line to your Jekyll site's [`_config.yml`](_config.yml) file:
 
 ```yml
 theme: type-on-strap
@@ -629,14 +656,14 @@ bundle install
 ```
 
 Then you can start adding content like:
-  - Add a `index.html` file
+  - Add a [`index.html`](index.html) file
   - Add the feature page you want. (ex: as it is already in `pages`)
   - Add posts in `_posts` and `_portfolio` to be displayed
 
 ### Remote Theme
 
 Now you can use any theme gem with GitHub pages with [29/11/2017 GitHub Pages Broadcast](https://github.com/blog/2464-use-any-theme-with-github-pages).
-For that remove all `theme:` attributes from `_config.yml` and add instead:
+For that remove all `theme:` attributes from [`_config.yml`](_config.yml) and add instead:
 
 ```yml
 remote_theme: sylhare/Type-on-Strap 

data/_data/language.yml

@@ -18,6 +18,7 @@ str_months: [January, February, March, April, May, June, July, August, September
 str_dark: 'Dark'
 str_light: 'Light'
 str_date_format: '%B %-d, %Y'
+str_last_modified: 'Last modified on'
 
 # Localization settings
 cusdis_lang: # zh-cn, es, tr, pt-BR

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; }
@@ -39,18 +40,29 @@
         {% include blog/post_nav.liquid %}
     {% endif %}
 
+    <!-- Giscus -->
+    {% if site.data.comments.giscus.repo and site.data.comments.giscus.repo-id and site.data.comments.giscus.category-id and site.data.comments.giscus.mapping %}
+        {% include social/giscus.liquid %}
+    {% endif %}
+
     <!--Utterances-->
-    {% if site.comments.utterances.repo and site.comments.utterances.issue-term %}
+    {% if site.data.comments.utterances.repo and site.data.comments.utterances.issue-term %}
+        {% include social/utterances.liquid %}
+    {% elsif site.comments.utterances.repo and site.comments.utterances.issue-term %}
         {% include social/utterances.liquid %}
     {% endif %}
 
     <!-- Cusdis -->
-    {% if site.comments.cusdis_app_id or site.cusdis_app_id %}
+    {% if site.data.comments.cusdis.app_id %}
+        {% include social/cusdis.liquid %}
+    {% elsif site.comments.cusdis_app_id or site.cusdis_app_id %}
         {% include social/cusdis.liquid %}
     {% endif %}
 
     <!-- Disqus -->
-    {% if site.comments.disqus_shortname or site.theme_settings.disqus_shortname or site.disqus_shortname %}
+    {% if site.data.comments.disqus.shortname %}
+        {% include social/disqus.liquid %}
+    {% elsif site.comments.disqus_shortname or site.theme_settings.disqus_shortname or site.disqus_shortname %}
         {% include social/disqus.liquid %}
     {% endif %}
 {% endcapture %}

data/_includes/blog/post_info.liquid

@@ -2,14 +2,25 @@
 {% assign date = include.date | default: "today" | date: site.data.language.str_date_format | default: '%B %-d, %Y' %}
 
 <div class="post-info">
-  {%- if author.url -%}<a href="{{ author.url | relative_url }}" target="_blank" rel="noopener">{%- endif -%}
-    {% if author.avatar  %}
-      <img alt="Author's avatar" src="{{ author.avatar | relative_url }}" loading="lazy">
+  <div class="post-meta">
+    {% if author %}
+      <div class="author-info">
+        {%- if author.url -%}<a href="{{ author.url | relative_url }}" target="_blank" rel="noopener">{%- endif -%}
+          {% if author.avatar  %}
+            <img alt="Author's avatar" src="{{ author.avatar | relative_url }}" loading="lazy">
+          {% endif %}
+          <p class="meta">
+            {% if author.name %}{{ author.name }}{% endif %}
+          </p>
+        {%- if author.url -%}</a>{%- endif -%}
+      </div>
+      <span class="meta-separator">-</span>
     {% endif %}
-    <p class="meta">
-      {% if author.name %}{{ author.name }} - {% endif %}
-      {% assign x = date | date: "%m" | minus: 1 %}
-      {{ site.data.language.str_months[x] | default: date | date: "%B" }} {{ date | date: "%d, %Y" }}
-    </p>
-  {%- if author.url -%}</a>{%- endif -%}
+    {% assign date_month = date | date: "%m" | minus: 1 %}
+    <p class="meta">{{ site.data.language.str_months[date_month] | default: date | date: "%B" }} {{ date | date: "%d, %Y" }}</p>
+  </div>
+  {% if include.last_modified %}
+    {% assign last_modified_month = include.last_modified | date: "%m" | minus: 1 %}
+    <p class="last-modified">{{ site.data.language.str_last_modified | default: "Last modified on" }} {{ site.data.language.str_months[last_modified_month] | default: include.last_modified | date: "%B" }} {{ include.last_modified | date: "%d, %Y" }}</p>
+  {% endif %}
 </div>

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

@@ -24,6 +24,11 @@
     <!--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 }}">
@@ -35,18 +40,18 @@
     <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>
     {% endif %}
 
-    <!-- KaTeX 0.16.11 -->
+    <!-- KaTeX 0.16.28 -->
     {% 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.4.1 -->
+    <!-- Mermaid 11.12.2 -->
     {% 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.1 -->
     <script src="{{ '/assets/js/vendor/simple-jekyll-search.min.js' | relative_url }}" type="text/javascript"></script>
 
     <!-- Google Analytics / Cookie Consent -->

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/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="" class="" data-testid="portfolio-item-image" src="{{ item.img | relative_url }}">
         </a>
     </div>
     {% endfor %}

data/_includes/social/cusdis.liquid

@@ -1,13 +1,13 @@
 <div class="comments" id="cusdis_thread"
   data-host="https://cusdis.com"
-  data-app-id="{% if site.comments.cusdis_app_id %}{{ site.comments.cusdis_app_id }}{% else %}{{ site.cusdis_app_id }}{% endif %}"
+  data-app-id="{% if site.data.comments.cusdis.app_id %}{{ site.data.comments.cusdis.app_id }}{% elsif site.comments.cusdis_app_id %}{{ site.comments.cusdis_app_id }}{% else %}{{ site.cusdis_app_id }}{% endif %}"
   data-page-id="{{ page.relative_path }}"
   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.language.cusdis_lang %}
-<script defer src="https://cusdis.com/js/widget/lang/{{ site.data.language.cusdis_lang }}.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.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

@@ -0,0 +1,17 @@
+<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/utterances.liquid

@@ -1,8 +1,8 @@
-<script src="https://utteranc.es/client.js"
-        repo='{{ site.comments.utterances.repo }}'
-        issue-term="{{ site.comments.utterances.issue-term}}"
-        theme="{% if site.comments.utterances.theme %}{{ site.comments.utterances.theme }}{% elsif site.color_theme == 'dark' %}github-dark{% else %}github-light{% endif %}"
-		{% if site.comments.utterances.label %}label="{{ site.comments.utterances.label }}"{% 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>