type-on-strap 2.3.0 → 2.3.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5f34dd2b2511f5ee05355a8962e017f98295b2efa98a650d063986bf73e16cfc
-  data.tar.gz: 40aa6d606ab5e81ab0550654bebf1a6eb44534e98b8f8bac1c460d38d8a4b064
+  metadata.gz: 7ec12a9dd9f1ebb6a121accb434aac3199012abe93ae3b1cc59e2b0d3e7f233a
+  data.tar.gz: f344537349f557bc2a2c2fe88701ba3fcb8f02ba809c9f0d2721f23ec960bfe2
 SHA512:
-  metadata.gz: 1eb74952eab6d681a53fd72dba8c79b69118e93a2a39db8edf84ce4510ce7e0ad4d8d8102c5ed48efb68d247b14e83aa33c13efead44231875d2897cebf3cb51
-  data.tar.gz: f8aaa2f2d65380f2501de5c55cd1f7b7865cae0a3c97ce84a17ec3a03006df535e494f0dd4d1ceb57958a3d0549c45f2a2b49823b78ab62febfa584d44ea5a42
+  metadata.gz: fe97b6348c8829c62dad820f42e16afaad782f88b7a291ba0062ea4015d4651aa4882134b7652a2c9100b0e3da9bada778444fa4bc47ef3e4db4fd4c9f165c3e
+  data.tar.gz: 0a848716a49bf9efe3bc19c1e10a6d4e4606356ce57e09ceb2a04750c38b619eeacff77c1254d9a65f8a993a5243f3941d8cc6f59a0af5ce1eb4fd8ad7627071

data/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-2020 Sylhare
+Copyright (c) 2016-2021 Sylhare
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/README.md

@@ -4,39 +4,30 @@
 [![Gem Version](https://badge.fury.io/rb/type-on-strap.svg)](https://badge.fury.io/rb/type-on-strap)
 [![Docker Pulls](https://img.shields.io/docker/pulls/sylhare/type-on-strap)](https://hub.docker.com/r/sylhare/type-on-strap)
 
-[![Default Type on Strap blog](https://github.com/Sylhare/Type-on-Strap/blob/master/screenshot.png?raw=true)](https://sylhare.github.io/Type-on-Strap/)
+[![Default Type on Strap blog](https://github.com/Sylhare/Type-on-Strap/blob/master/assets/img/screenshot.png?raw=true)](https://sylhare.github.io/Type-on-Strap/)
 
-A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chandra [type-theme](https://github.com/rohanchandra/type-theme) packed with extra features and easily cusomizable:
+A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chandra [type-theme](https://github.com/rohanchandra/type-theme) packed with extra features and easily customizable:
 
 * Responsive design on all devices (🖥, 💻, 📱, ...)
 * Portfolio 🗂, Gallery 🖼 pages for your projects
 * Tags compatibility 🏷
-* Handle Bootstrap'ed pages: [Get Bootstrap](http://getbootstrap.com/)
+* Handle _Bootstrap_'ed pages: [Get Bootstrap](http://getbootstrap.com/)
 * 🔎 Search feature: [Simple-Jekyll-Search](https://github.com/christian-fei/Simple-Jekyll-Search)
 * Math Rendering : [KateX](https://github.com/Khan/KaTeX)
 * Diagram Rendering: [Mermaid-js](https://github.com/mermaid-js/mermaid)
 * 🖋 Nice fonts: [Font Awesome](https://fontawesome.com/), [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro), [Pacifico](https://fonts.google.com/specimen/Pacifico?selection.family=Pacifico) 
 * Seo Tags: [Jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag)
 * 🛠 Syntax Highlighting: Easily customisable [Base16](https://github.com/chriskempson/base16)
-* Free of rights images from [pexels](https://www.pexels.com/)
+* 💡 Light and dark theme supported
+* Find free of rights images on [pexels](https://www.pexels.com/)
 
 > [Demo Site](https://sylhare.github.io/Type-on-Strap/)
 
-## Table of Contents
-
-  - [Usage](#usage)
-  - [Structure](#structure)
-  - [Configure Type on Strap](#configure-type-on-strap)
-  - [Other Layouts](#other-layouts)
-  - [Feature pages](#feature-pages)
-  - [Advanced](#advanced)
-  - [License](#license)
-
 ## Usage
 
 ### As a ruby gem 💎
 
-Check out this tutorial: [Use as Ruby Gem](https://github.com/Sylhare/Type-on-Strap#use-as-ruby-gem)
+Check out this tutorial: [Use as Ruby Gem](#use-as-ruby-gem-)
 
 ### As a github page 📋
 
@@ -44,7 +35,7 @@ Check out this tutorial: [Use as Ruby Gem](https://github.com/Sylhare/Type-on-St
 2. Install [Jekyll](https://jekyllrb.com/docs/installation/): `gem install jekyll`, check [#1](https://github.com/Sylhare/Type-on-Strap/issues/1) if you have a problem.
 3. Install the theme's dependencies: `bundle install`
 4. Customize the theme
-	- Github Page: [update `_config.yml`](https://github.com/Sylhare/Type-on-Strap#site-configuration)
+	- GitHub Page: [update `_config.yml`](#site-configuration)
 5. Run the Jekyll server: `bundle exec jekyll serve`
 
 ## Structure
@@ -87,7 +78,7 @@ If a variable in this document is marked as "optional", disable the feature by r
 
 ### Site configuration
 
-Configure Jekyll as your own blog or with a "baseurl" in in `_config.yml`:
+Configure Jekyll as your own blog or with a "baseurl" in `_config.yml`:
 
 Jekyll website *without* a "baseurl" (such as a GitHub Pages website for a given username):
 
@@ -117,9 +108,12 @@ title: My Jekyll Blog                 # Name of website
 avatar: assets/img/triangle.png       # Path of avatar image, to be displayed in the theme's header
 description: My blog posts            # Short description, primarily used by search engines
 favicon: assets/favicon.ico           # Icon displayed in the tab
+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_). 
+Using _auto_ you'll have a tiny icon in the navbar allowing the use to manually switch from dark to light theme.
 
 ### Theme customization 🎨
 
@@ -140,7 +134,7 @@ If you don't want anything, replace the value by `" "`.
 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`.
 
-By default it is in english, but you can easily add your own language.
+By default, it is in english, but you can easily add your own language.
 
 ### Google Analytics
 
@@ -151,7 +145,9 @@ to `_config.yml` like so:
 google_analytics: UA-NNNNNNNN-N
 ```
 
-### Comments (via Disqus)
+### Comments 
+
+#### Disqus
 
 Optionally, if you have a [Disqus](https://disqus.com/) account, you can show a 
 comments section below each post.
@@ -163,12 +159,23 @@ to your project's `_config.yml` file:
 disqus_shortname: my_disqus_shortname
 ```
 
+#### Cusdis
+
+[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`:
+
+```yaml
+cusdis_app_id: my_data-app-id                                     
+```
+
 ### Math typesetting with KateX
 
 When KateX is set in `_config.yml`:
 
 ```yml
-katex: true # to Enable it
+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 
@@ -188,6 +195,8 @@ $$
 $$
 ```
 
+You can find a cheat sheet of the compatible LaTex symbols [online](https://artofproblemsolving.com/wiki/index.php/LaTeX:Symbols).
+
 ### Diagrams with Mermaid
 
 Enable the [mermaid-js](https://github.com/mermaid-js/mermaid) diagram rendering by setting mermaid to true in the `_config.yml`.
@@ -211,13 +220,13 @@ sequenceDiagram
 
 ### Social icons
 
-In `_data/social.yml` you can customize the social icons from other wbesite you wish to display in the blog.
+In `_data/social.yml` you can customize the social icons from other website you wish to display in the blog.
 The site icons come from [Font Awesome](https://fontawesome.com/).
 
 ### Cookie consent
 
 You can add a cookie consent with a disclaimer if you use Google Analytics while respecting the [GDPR](https://en.wikipedia.org/wiki/General_Data_Protection_Regulation).
-Set to true, there will be a banner at the bottom of the page with the disclaimer and a approve button.
+Set to true, there will be a banner at the bottom of the page with the disclaimer, and an _approve_ button.
 Once the user clicks on "Approve" the cookies will be created for Google Analytics.
 
 #### Share in article
@@ -252,7 +261,7 @@ Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/po
 
 #### Layout: Post
 
-This are the basic features you can use with the  `post` layout.
+These are the basic features you can use with the `post` layout.
 
 ```yml
 
@@ -261,7 +270,7 @@ layout: post
 title: Hello World                                # Title of the page
 hide_title: true                                  # Hide the title when displaying the post, but shown in lists of posts
 feature-img: "assets/img/sample.png"              # Add a feature-image to the post
-thumbnail: "assets/thumbnails/sample-th.png"      # Add a thumbnail image on blog view
+thumbnail: "assets/img/thumbnails/sample-th.png"  # Add a thumbnail image on blog view
 color: rgb(80,140,22)                             # Add the specified color as feature image, and change link colors in post
 bootstrap: true                                   # Add bootstrap to the page
 tags: [sample, markdown, html]
@@ -303,7 +312,7 @@ some text in the excerpt
 ... rest of the text not shown in the excerpt ...
 ```
 
-The html is stripped out of the excerpt so it only display text.
+The html is stripped out of the excerpt, so it only displays text.
 
 #### Image aligner
 
@@ -313,8 +322,8 @@ To easily add align images side by side in your article using the `aligner.html`
 {% include aligner.html images="path/to/img1.png,path/to/img2.png,path/to/img3.png" column=3 %}
 ```
 
-Use it in any markdown file. There are two fields in the include you need to look into:
-  - _images_: Takes a string separated with `,` of all the images path. 
+Use it in any markdown file. There are two fields in the _include_ you need to look into:
+  - _images_: Takes a string separated with `,` of all the images' path. 
     - It by default look into `assets/img/` so give the path from there.
   - _column_: (OPTIONAL) Set the number of column you want your imaged displayed in.
     - default is 2 columns
@@ -323,7 +332,7 @@ Use it in any markdown file. There are two fields in the include you need to loo
 
 #### Code highlight
 
-Like all CSS variables in the theme, you can edit the color of the code highlight in _sass > base > _variables.scss.
+Like all CSS variables in the theme, you can edit the color of the code highlight in *_sass > base > _variables.scss*.
 The code highlighting works with [base16](https://github.com/chriskempson/base16-html-previews/tree/master/css) you can find existing example 
 of your favourite highlight color scheme on this format.
 
@@ -384,7 +393,7 @@ layout: page
 title : Portfolio 
 ---
 
-{% include portfolio.html %}
+{% include default/portfolio.html %}
 ```
 
 #### Portfolio posts
@@ -416,14 +425,14 @@ collections:
     permalink: /:collection/:name
 ```    
 
-This creates the collection for Jekyll so it can find and display your portfolio posts.
+This creates the collection for Jekyll, so it can find and display your portfolio posts.
 
 ### Feature: Gallery 🖼
 
 You can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures in 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 of the picture under that directory. Then use the `include` to add it in your page. 
+It will take all the pictures under that directory. Then use the `include` to add it in your page. 
 
 ```yml
 
@@ -433,14 +442,14 @@ title: Gallery
 gallery: "assets/img/pexels"
 ---
 
-{% include gallery.html gallery_path=page.gallery %}
+{% include default/gallery.html gallery_path=page.gallery %}
 ```
 
 
 ### Feature: Search 🔍
 
 The search feature is based on [Simple-Jekyll-search](https://github.com/christian-fei/Simple-Jekyll-Search) 
-there is a `search.json` file that will create a list of all of the site posts, pages and portfolios. 
+there is a `search.json` file that will create a list of all the site posts, pages and portfolios. 
 
 Then there's a `search.js` displaying the formatted results entered in the `search.html` page.
 
@@ -471,7 +480,7 @@ tags: [sample, markdown, html]
 ---
 ```
 
-> Tags are case sensitive `Tag_nAme` ≠ `tag_name`
+> Tags are case-sensitive `Tag_nAme` ≠ `tag_name`
 
 All the tags will be listed in `tags.html` with a link toward the pages or posts.
 The Tag page can be hidden with the `hide` option. You can remove the icon by removing `icon` (like for the search page).
@@ -489,7 +498,9 @@ 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)
 
-### Minimizing and optimizing: css, js and images
+### Gulp toolbox
+
+#### Requirements
 
 Before you need to have *node* and `npm` installed:
 
@@ -505,18 +516,33 @@ sudo npm install gulp-cli -g
 npm install
 ```
 
+#### 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 # to create all of the images thumbnails
+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)
+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 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.
 
 ### Use as Ruby Gem 💎
 
@@ -548,7 +574,7 @@ Then you can start adding content like:
 
 ### 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).
+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:
 
 ```yml
@@ -557,7 +583,7 @@ remote_theme: sylhare/Type-on-Strap
 
 ## License
 
-This theme is licensed under the [The MIT License (MIT)](https://raw.githubusercontent.com/Sylhare/Type-on-Strap/master/LICENSE)
+This theme is licensed under the [The MIT License (MIT)](/LICENSE)
 
 - Pictures from [Pexels](https://www.pexels.com/) are under Creative Commons Zero (CC0) license
 - Fonts are licensed under the [SIL Open Font License (OFL)](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL) 

data/_data/language.yml

@@ -14,3 +14,7 @@ str_javascript_required_disqus: "Please enable JavaScript to view comments."
 str_no_result_found: "No result found"
 str_cookie_approve: "Approve"
 str_cookie_disclaimer: "We would like to use third party cookies and scripts to improve the functionality of this website."
+str_months: [January, February, March, April, May, June, July, August, September, October, November, December]
+
+# Localization settings 
+cusdis_lang: # zh-cn, es, tr, pt-BR

data/_includes/{blog.html → blog/blog.html}

@@ -1,4 +1,7 @@
 <div class="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">
         {% if post.thumbnail %}
@@ -15,7 +18,7 @@
                 {{ post.title }}
               </a>
             </h1>
-            {% include post_info.html author=post.author date=post.date %}
+            {% include blog/post_info.html author=post.author date=post.date %}
           </header>
           {% if site.excerpt or site.theme_settings.excerpt %}
               <div class="excerpt">
@@ -31,4 +34,4 @@
     {% endfor %}
 </div>
 
-{% include blog_nav.html %}
+{% include blog/blog_nav.html %}

data/_includes/{blog_nav.html → blog/blog_nav.html}

@@ -5,14 +5,14 @@
         {% if paginator.previous_page and paginator.previous_page != 1%}
         <!-- << -->
         <a aria-label="{{ site.data.language.str_previous_page | default: 'Prev' }}" href="{{ '/' | relative_url }}" class="button">
-            <span><i class="fa fa-angle-double-left"></i></span>
+            <span><i class="fas fa-angle-double-left"></i></span>
         </a>
         {% endif %}
         
         <!-- < previous -->
         <a aria-label="{{ site.data.language.str_previous_page | default: 'Prev' }}" href="{{ paginator.previous_page_path | relative_url }}"
            {% unless paginator.previous_page %}style="visibility:hidden"{% endunless %} class="button">
-            <span><i class="fa fa-chevron-left"></i></span>
+            <span><i class="fas fa-chevron-left"></i></span>
             {{ site.data.language.str_previous_page | default: "Prev" }}
         </a>
     </div>
@@ -27,14 +27,14 @@
         <a aria-label="{{ site.data.language.str_next_page | default: 'Next' }}" href="{{ paginator.next_page_path | relative_url }}"
            {% unless paginator.next_page %}style="visibility:hidden"{% endunless %} class="button">
             {{ site.data.language.str_next_page | default: "Next" }}
-            <span><i class="fa fa-chevron-right"></i></span>
+            <span><i class="fas fa-chevron-right"></i></span>
         </a>
 
         {% if paginator.next_page and paginator.next_page != paginator.total_pages %}
         <!-- >> -->
         <a aria-label="{{ site.data.language.str_next_page | default: 'Next' }}"
         href="{{ site.paginate_path | relative_url | replace: ':num', paginator.total_pages }}" class="button">
-            <span><i class="fa fa-angle-double-right"></i></span>
+            <span><i class="fas fa-angle-double-right"></i></span>
         </a>
         {% endif %}
         

data/_includes/blog/post_info.html

@@ -0,0 +1,15 @@
+{% assign author = site.data.authors[include.author] %}
+{% assign date = include.date | default: "today" | date: "%B %-d, %Y" %}
+
+<div class="post-info">
+  {%- if author.url -%}<a href="{{ author.url | relative_url }}" target="_blank">{%- endif -%}
+    {% if author.avatar  %}
+      <img alt="Author's avatar" src="{{ author.avatar | relative_url }}">
+    {% 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 -%}
+</div>

data/_includes/{footer.html → default/footer.html}

@@ -4,7 +4,7 @@
             <div class="footer-icons">
                 <ul>
                 <!-- Social icons from Font Awesome, if enabled -->
-                {% include icons.html %}
+                {% include social/icons.html %}
                 </ul>
             </div>
 </footer>

data/_includes/{head.html → default/head.html}

@@ -1,6 +1,19 @@
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=5">
+
+    <!-- Theme Mode-->
+    {% if site.color_theme == 'auto' %}
+    <script>
+        const isAutoTheme = true;
+        document.documentElement.setAttribute('data-theme', sessionStorage.getItem('theme'))
+    </script>
+    {% else %}
+    <script>
+        const isAutoTheme = false;
+        document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}")
+    </script>
+    {% endif %}
 
     <!-- Main JS (navbar.js, katex_init.js and masonry_init.js)-->
     <script defer src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
@@ -12,8 +25,8 @@
     <link rel="shortcut icon" href="{{ site.favicon | relative_url }}" type="image/x-icon">
 
     <!-- RSS -->
-    <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ 'feed.xml' | absolute_url }}"/>
-    
+    <link rel="alternate" type="application/atom+xml" title="{{ site.title | default: 'Title' }}" href="{{ 'feed.xml' | absolute_url }}"/>
+
     {% 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 }}">
@@ -25,19 +38,18 @@
     <script 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.12.0 -->
+    <!-- KaTeX 0.13.9 -->
     {% 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/auto-render.min.js' | relative_url }}" onload="renderMathInElement(document.body);"></script>
     {% endif %}
 
-    <!-- Mermaid 8.8.2 -->
+    <!-- Mermaid 8.9.2 -->
     {% if site.mermaid %}
-    <!-- <script src=”https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.8.2/mermaid.min.js" onload="mermaid.initialize({startOnLoad:true});"></script> -->
     <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}" onload="mermaid.initialize({startOnLoad:true});"></script>
     {% endif %}
 
-    <!-- Simple-Jekyll-Search 1.17.12 -->
+    <!-- Simple Jekyll Search 1.9.1 -->
     <script src="{{ '/assets/js/vendor/simple-jekyll-search.min.js' | relative_url }}" type="text/javascript"></script>
 
     <!-- Google Analytics / Cookie Consent -->
@@ -48,9 +60,9 @@
     </script>
 
     {% if site.cookie_consent %}
-        <div id="cookie-notice"><span>{{ site.data.language.str_cookie_disclaimer | default: "We would like to use third party cookies and scripts to improve the functionality of this website." }}
+        <span id="cookie-notice"><span>{{ site.data.language.str_cookie_disclaimer | default: "We would like to use third party cookies and scripts to improve the functionality of this website." }}
           </span><a id="cookie-notice-accept" class="button">{{ site.data.language.str_cookie_approve | default: "Approve" }}</a>
-        </div>
+        </span>
     {% endif %}
     {% if site.google_analytics %}
         <!-- Global site tag (gtag.js) -->