type-on-strap 2.2.4 → 2.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 64e23af743852732351b47a317581898a46eb51166c89d34d269ec28f0705208
-  data.tar.gz: fcc2886a0faa1321a78607e86eb75c7dfda7b9920a06aa50c438f0b1303ee8f0
+  metadata.gz: fc25d3b4bece8a59b95f8f0d121c6017ef7b3928383d2f44cfeb6d32e80cc467
+  data.tar.gz: 5ac573f6d768d1e7df80f87a0d31c1be666066d1cac026d00de96119f60b4c7d
 SHA512:
-  metadata.gz: 651b591231960d11c4a15885ea219bf81033a7c8612ce35be0bbacf92ed3ed930867fe42de05c8e3b1a730cfe1cda57a5b0b34c421c689793a4c44a81c9ec193
-  data.tar.gz: add83657f5553e3789477ae2947c6a3fb6ea8de67b84147401dffd61ea42541131479eb6c9af6d7d0d022cb62abe5b88a5fa568f1e045d6bd70e2bca9564e854
+  metadata.gz: f186834f19b0b5df27a7168d448b7a8befd8d96a510e4f5bc39ca2d0c6aec711c0555850fd85f444744bc22b3a9714716ac28610b9fcb05a6dfad79f0935f30f
+  data.tar.gz: 159476abdd898fc35c8ef32cef82d0d90a639fe1959c6f3fba53e72cf7109d9a8f479165c03b75c2b4dec87b0bc21d03d0014f0037cd5a6dd6c6036713bf80c5

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

@@ -1,25 +1,26 @@
-# Type on Strap 
+# Type on Strap 🎨
 
 [![Build Status](https://travis-ci.org/sylhare/Type-on-Strap.svg?branch=master)](https://travis-ci.org/sylhare/Type-on-Strap)
 [![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)
 
-A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chandra [type-theme](https://github.com/rohanchandra/type-theme) with a few new features:
+[![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/)
+
+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:
 
-* Responsive design
-* Portfolio page for your projects
-* Tags compatibility
-* Bootstrap : [Get Bootstrap](http://getbootstrap.com/)
-* Search feature : [Simple-Jekyll-Search](https://github.com/christian-fei/Simple-Jekyll-Search)
+* Responsive design on all devices (🖥, 💻, 📱, ...)
+* Portfolio 🗂, Gallery 🖼 pages for your projects
+* Tags compatibility 🏷
+* 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)
-* 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/)
+* 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)
+* Find free of rights images on [pexels](https://www.pexels.com/)
 
 > [Demo Site](https://sylhare.github.io/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/)
 
 ## Table of Contents
 
@@ -33,11 +34,11 @@ A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chan
 
 ## Usage
 
-### As a ruby gem
+### As a ruby gem 💎
 
 Check out this tutorial: [Use as Ruby Gem](https://github.com/Sylhare/Type-on-Strap#use-as-ruby-gem)
 
-### As a github page
+### As a github page 📋
 
 1. Fork and clone the [Type on Strap repo](https://github.com/sylhare/Type-On-Strap): `git clone https://github.com/Sylhare/Type-on-Strap.git`
 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.
@@ -77,7 +78,7 @@ Type-on-Strap
 └── index.html                 # sample home page (blog page paginated)
 ```
 	
-## Configure Type on Strap
+## Configure Type on Strap 🛠
 
 Open `_config.yml` in a text editor to change most of the blog's settings.
 
@@ -85,16 +86,17 @@ 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 subpath in in `_config.yml`:
 
-Jekyll website *without* a subpath (such as a GitHub Pages website for a given username):
+Configure Jekyll as your own blog or with a "baseurl" in in `_config.yml`:
+
+Jekyll website *without* a "baseurl" (such as a GitHub Pages website for a given username):
 
 ```yml
 baseurl: ""
 url: "https://username.github.io"
 ```
 
-Jekyll website *with* subpath (like the Type on Strap [demo](https://sylhare.github.io/Type-on-Strap/) page):
+Jekyll website *with* "baseurl" (like the Type on Strap [demo](https://sylhare.github.io/Type-on-Strap/) page):
 
 ```yml
 baseurl: "/sub-directory"
@@ -117,7 +119,9 @@ description: My blog posts            # Short description, primarily used by sea
 favicon: assets/favicon.ico           # Icon displayed in the tab
 ```
 
-### Main configuration
+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/).
+
+### Theme customization 🎨
 
 #### Footer and Header's text
 
@@ -159,7 +163,7 @@ to your project's `_config.yml` file:
 disqus_shortname: my_disqus_shortname
 ```
 
-### Math typesetting
+### Math typesetting with KateX
 
 When KateX is set in `_config.yml`:
 
@@ -184,6 +188,29 @@ $$
 $$
 ```
 
+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`.
+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
+mermaid: true # to Enable it
+```
+
+Find all the help you need on the official [mermaid documentation](https://mermaid-js.github.io/mermaid/).
+You can create with ease diagrams. Add your mermaid script inside two mermaid divs (default Kramdown does not yet support mermaid).
+With the `class="mermaid"` inside the `<div>`:
+
+```html
+<div class="mermaid">
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+</div>
+```
+
 ### Social icons
 
 In `_data/social.yml` you can customize the social icons from other wbesite you wish to display in the blog.
@@ -217,23 +244,26 @@ youtube: UCqECaJ8Gagnn7YCbPEzWH6g  # Youtube token of your channel in the url
 
 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)).
 
-### Customizing Posts
+### Personalize your Blog Posts 📝
 
 When writing a post, be sure in jekyll to:
  - Put it in the `_posts` folder
  - Name it with the date first like `2019-08-21-This-is-my-blog-post.md`
 
+Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/). 
+
 #### Layout: Post
 
 This are the basic features you can use with the  `post` layout.
 
 ```yml
+
 ---
 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/img/thumbnail/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]
@@ -241,7 +271,7 @@ tags: [sample, markdown, html]
 ```
 
 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.
+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.
 
 The background used when `color` is set comes from `lineart.png` from [xukimseven](https://github.com/xukimseven) 
 you can edit it in the config file (`_config.yml > color_image`). If you want another one, put it in `/assets/img` as well. 
@@ -263,6 +293,7 @@ excerpt: true
 Then in your post, add the `excerpt separator`:
 
 ```yml
+
 ---
 layout: post
 title: Sample Page
@@ -298,15 +329,36 @@ Like all CSS variables in the theme, you can edit the color of the code highligh
 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.
 
-## Other Layouts
-Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/). 
+## Feature pages and layouts 
+
+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`. 
+
 Non-standard features are documented below.
 
-### Layout: Page
+### Layout: Default
+
+This layout includes the head, navigation bar and footer around your content. 
+Unless you're 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`.
+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`.
+
+### Layout: Page 📄
 
 The page layout have a bit more features explained here.
 
 ```yml
+
 ---
 layout: page
 title: "About" 
@@ -321,33 +373,14 @@ tags: [sample, markdown, html]
 
 The hide only hides your page from the navigation bar, it is however still generated and can be access through its link. 
 
-### Layout: Default
-
-This layout includes the head, navigation bar and footer around your content.
-
-## Feature pages
-
-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`.
-
-### Home
-
-This page is used as the home page of the template (in the `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`.
-
-### Portfolio
+### Feature: Portfolio 🗂
 
 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:
+
 ```yml
+
 --- 
 layout: page
 title : Portfolio 
@@ -356,13 +389,14 @@ title : Portfolio
 {% include portfolio.html %}
 ```
 
-#### Portofolio posts
+#### Portfolio posts
 
 You can format the portfolio posts in the `_portfolio` folder using the `post layout`. Here are little explaination on some of the possible feature you can use and what they will do.
 
 If you decide to use a date, please be sure to use one that can be parsed such as `yyyy-mm-dd`. You can see more format example on the demo posts that are available for the theme:
 
 ```yml
+
 ---
 layout: post
 title: Circus				       # Title of the portfolio post
@@ -377,7 +411,6 @@ date: 2019-07-25		 	       # Not mandatory, however needs to be in date format t
 Make sure your `_config.yml` contains the following if you are using the theme as a gem:
 
 ```yml
-
 # PORTFOLIO
 collections:
   portfolio:
@@ -387,7 +420,7 @@ collections:
 
 This creates the collection for Jekyll so it can find and display your portfolio posts.
 
-### Gallery
+### 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. 
@@ -395,6 +428,7 @@ You need to specify the `gallery_path` which will be used to find the pictures t
 It will take all of the picture under that directory. Then use the `include` to add it in your page. 
 
 ```yml
+
 ---
 layout: page
 title: Gallery
@@ -405,7 +439,7 @@ gallery: "assets/img/pexels"
 ```
 
 
-### Search
+### 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. 
@@ -415,6 +449,7 @@ Then there's a `search.js` displaying the formatted results entered in the `sear
 The search page can be hidden with the `hide` option. You can remove the icon by removing `icon`:
 
 ```yml
+
 ---
 layout: search
 title: Search
@@ -422,7 +457,7 @@ icon: "search"
 ---
 ```
 
-### Tags
+### Feature: Tags 🏷
 
 Tags should be placed between `[]` in your post metadata. Separate each tag with a comma. 
 Tags are recommended for posts and portfolio items.
@@ -430,6 +465,7 @@ Tags are recommended for posts and portfolio items.
 For example:
 
 ```yml
+
 ---
 layout: post
 title: Markdown and HTML
@@ -455,29 +491,53 @@ 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:
 
-Before you need to have `node` and `npm` installed:
 - 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:
-```shell
+
+```bash
 cd assets/
 sudo npm install gulp-cli -g
 npm install
 ```
 
-**Now, whenever you want to minify and optimize, run:**
-```shell
+#### 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
 ```
 
-### Use as Ruby Gem
+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 create 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 💎
 
 You can use Type-on-strap as a [gem](https://rubygems.org/gems/type-on-strap). 
 
@@ -487,6 +547,7 @@ Add this line to your Jekyll site's Gemfile (or create one):
 ```ruby
 gem "type-on-strap"
 ```
+
 Add this line to your Jekyll site's `_config.yml` file:
 
 ```yml

data/_data/language.yml

@@ -11,3 +11,8 @@ str_previous_post: "Previous post"
 str_next_page: "Next"
 str_previous_page: "Prev"
 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]
+

data/_includes/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 %}