type-on-strap 2.0.3 → 2.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 909d4360d960728b6976dae7998f9b7f01918238a0ea68a227d49ab0a38a2796
-  data.tar.gz: 8f5a5364a81b0559482a8093f9f14015e233102959a1a4f1fe744e09d62f3218
+  metadata.gz: ed8a97f0cd96fb6b4cb453fc664880312eb47199ffe4b2fc76eb60f2ab2db593
+  data.tar.gz: 263d45173c7dfa1fb586dd38c96edc97799155e5a36fb636ed3a10acc81a6473
 SHA512:
-  metadata.gz: 6e018b160763e591a46ee24f788c514a08172961c96c3a402f89f9bbc8c0ada741d2c5c395d2c13ea5770178382d0df5a70d9507d9c08712cc1ccd3653cf83b2
-  data.tar.gz: 3b2645e13b83aac4f1a36a5fafd57d0b0593641b8b0f0382913c95fb5a28bd7912e70c77943f47486709956e8597eb3a4f4b787e9493d5472a248bef36bc60fb
+  metadata.gz: f9fcbb5d9d7332aa45c6263360ba9eda1704d0c4906fdff03d51be88897c31fe947a521ff3b80fa74e6467051534179cf051aa2a5adfd634ba92a7d765f8ceae
+  data.tar.gz: 0dd9911ebcea1dae5dda7bfb19a8e0b7f833c9373e1a59ab29118bd1d8c54192cb7c38634b482c6ec9c36d558ea2b652fe3210b6ea8f6f9152ef09015a80a4fa

data/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-2019 Sylhare
+Copyright (c) 2016-2020 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,43 +1,43 @@
-# 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/repository/docker/sylhare/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)
+* 🖋 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/)
 
 > [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
 
-1. [Usage](https://github.com/Sylhare/Type-on-Strap#Usage)
-2. [Structure](https://github.com/Sylhare/Type-on-Strap#structure)
-3. [Configure Type on Strap](https://github.com/Sylhare/Type-on-Strap#configure-type-on-strap)
-4. [Other Layouts](https://github.com/Sylhare/Type-on-Strap#other-layouts)
-5. [Feature pages](https://github.com/Sylhare/Type-on-Strap#feature-pages)
-6. [Advanced](https://github.com/Sylhare/Type-on-Strap#advanced)
-7. [License](https://github.com/Sylhare/Type-on-Strap#license)
+  - [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
+### 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.
@@ -51,7 +51,7 @@ Check out this tutorial: [Use as Ruby Gem](https://github.com/Sylhare/Type-on-St
 Here are the main files of the template
 
 ```bash
-jekyll-theme-basically-basic
+Type-on-Strap
 ├── _includes	               # theme includes
 ├── _layouts                   # theme layouts (see below for details)
 ├── _portfolio	               # collection of article to be populated in the portfolio page
@@ -70,10 +70,14 @@ jekyll-theme-basically-basic
 |   ├── search.html	       # Search page
 |   └── tags.md                # The tag page
 ├── _config.yml                # sample configuration
+├── _data.yml
+|  ├── authors.yml             # Update the post authors configurations 
+|  ├── language.yml            # Localization configuration
+|  └── social.yml              # Social configurations (RSS, Twitter, ...)
 └── 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.
 
@@ -81,16 +85,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"
@@ -113,7 +118,7 @@ description: My blog posts            # Short description, primarily used by sea
 favicon: assets/favicon.ico           # Icon displayed in the tab
 ```
 
-### Main configuration
+### Theme customization 🎨
 
 #### Footer and Header's text
 
@@ -185,16 +190,21 @@ $$
 In `_data/social.yml` you can customize the social icons from other wbesite 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.
+Once the user clicks on "Approve" the cookies will be created for Google Analytics.
+
 #### Share in article
 
 The share icons are the one at the bottom of the blog page if enabled, 
 to share the article on those platform.
 
-
 #### Footer
 
-Display  in the footer. 
-All icon variables should be your username enclosed in quotes (e.g. "username") in `_config.yml`, 
+Display in the footer. 
+All icon variables should be your username enclosed in quotes (e.g. "username") in `_data/social.yml`, 
 except for the following variables:
 
 ```yml
@@ -206,23 +216,28 @@ stack_overflow: https://stackoverflow.com/users/0000/first-last
 youtube: UCqECaJ8Gagnn7YCbPEzWH6g  # Youtube token of your channel in the url 
 ```
 
-### Customizing Posts
+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)).
+
+### 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/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]
@@ -230,7 +245,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. 
@@ -252,6 +267,7 @@ excerpt: true
 Then in your post, add the `excerpt separator`:
 
 ```yml
+
 ---
 layout: post
 title: Sample Page
@@ -265,41 +281,43 @@ some text in the excerpt
 
 The html is stripped out of the excerpt so it only display text.
 
-## Other Layouts
-Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/). 
-Non-standard features are documented below.
+#### Image aligner
 
-### Layout: Page
+To easily add align images side by side in your article using the `aligner.html` include:
 
-The page layout have a bit more features explained here.
-
-```yml
----
-layout: page
-title: "About" 
-subtitle: "This is a subtitle"   
-feature-img: "assets/img/sample.png" 
-permalink: /about.html               # Set a permalink your your page
-hide: true                           # Prevent the page title to appear in the navbar
-icon: "fa-search"                    # Will Display only the fontawesome icon (here: fa-search) and not the title
-tags: [sample, markdown, html]
----
+```ruby
+{% include aligner.html images="path/to/img1.png,path/to/img2.png,path/to/img3.png" column=3 %}
 ```
 
-The hide only hides your page from the navigation bar, it is however still generated and can be access through its link. 
+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
+    - `column=3` set 3 columns
+    - `column="auto"` makes as many columns as images
 
-### Layout: Default
+#### Code highlight
 
-This layout includes the head, navigation bar and footer around your content.
+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.
 
-## Feature pages
+## 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`.
+Here are the documentation for the other feature pages that can be added through `_config.yml`. 
+
+Non-standard features are documented below.
+
+### 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.
 
-### Home
+### 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).
@@ -309,12 +327,34 @@ which are the dimensions of the actual picture for it to be rolling down as you
 
 If your posts are not displaying ensure that you have added the line `paginate: 5` to `_config.yml`.
 
-### Portfolio
+### Layout: Page 📄
+
+The page layout have a bit more features explained here.
+
+```yml
+
+---
+layout: page
+title: "About" 
+subtitle: "This is a subtitle"   
+feature-img: "assets/img/sample.png" 
+permalink: /about.html               # Set a permalink your your page
+hide: true                           # Prevent the page title to appear in the navbar
+icon: "fa-search"                    # Will Display only the fontawesome icon (here: fa-search) and not the title
+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. 
+
+### 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 
@@ -323,13 +363,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
@@ -344,7 +385,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:
@@ -354,7 +394,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. 
@@ -362,6 +402,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
@@ -372,7 +413,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. 
@@ -382,6 +423,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
@@ -389,7 +431,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.
@@ -397,6 +439,7 @@ Tags are recommended for posts and portfolio items.
 For example:
 
 ```yml
+
 ---
 layout: post
 title: Markdown and HTML
@@ -424,27 +467,34 @@ You can learn more about them on [shopify's doc](https://help.shopify.com/themes
 
 ### Minimizing and optimizing: css, js and images
 
-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
+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
 # 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)
+
+### Use as Ruby Gem 💎
 
 You can use Type-on-strap as a [gem](https://rubygems.org/gems/type-on-strap). 
 
@@ -454,6 +504,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
@@ -482,5 +533,7 @@ remote_theme: sylhare/Type-on-Strap
 
 ## License
 
-There are some fonts and component on this theme going under the MIT licence as well in this theme.
-[The MIT License (MIT)](https://raw.githubusercontent.com/Sylhare/Type-on-Strap/master/LICENSE)
+This theme is licensed under the [The MIT License (MIT)](https://raw.githubusercontent.com/Sylhare/Type-on-Strap/master/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

@@ -11,3 +11,6 @@ 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."

data/_includes/aligner.html

@@ -0,0 +1,19 @@
+{% assign images = include.images | split: ',' %}
+
+{% if include.column == "auto" %}
+{% assign column = 100.0 | divided_by: images.size %}
+{% elsif include.column > 0 %}
+{% assign column = 100.0 | divided_by: include.column %}
+{% endif %}
+
+<div class="row">
+    {% for image in images %}
+    <div {% if column %} style="flex: {{ column }}%" {% else %} class="column" {% endif %}  >
+        <img {% if images.size == 1 %}class="single"{% endif %}
+             src="{{ image | prepend: 'assets/img/' | relative_url }}"
+             alt="{{ image | prepend: '/' | split: '/' | last }}">
+    </div>
+    {% endfor %}
+</div>
+
+{% assign column = false %}