type-on-strap 2.0.3 → 2.2.5

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 909d4360d960728b6976dae7998f9b7f01918238a0ea68a227d49ab0a38a2796
4
- data.tar.gz: 8f5a5364a81b0559482a8093f9f14015e233102959a1a4f1fe744e09d62f3218
3
+ metadata.gz: ed8a97f0cd96fb6b4cb453fc664880312eb47199ffe4b2fc76eb60f2ab2db593
4
+ data.tar.gz: 263d45173c7dfa1fb586dd38c96edc97799155e5a36fb636ed3a10acc81a6473
5
5
  SHA512:
6
- metadata.gz: 6e018b160763e591a46ee24f788c514a08172961c96c3a402f89f9bbc8c0ada741d2c5c395d2c13ea5770178382d0df5a70d9507d9c08712cc1ccd3653cf83b2
7
- data.tar.gz: 3b2645e13b83aac4f1a36a5fafd57d0b0593641b8b0f0382913c95fb5a28bd7912e70c77943f47486709956e8597eb3a4f4b787e9493d5472a248bef36bc60fb
6
+ metadata.gz: f9fcbb5d9d7332aa45c6263360ba9eda1704d0c4906fdff03d51be88897c31fe947a521ff3b80fa74e6467051534179cf051aa2a5adfd634ba92a7d765f8ceae
7
+ data.tar.gz: 0dd9911ebcea1dae5dda7bfb19a8e0b7f833c9373e1a59ab29118bd1d8c54192cb7c38634b482c6ec9c36d558ea2b652fe3210b6ea8f6f9152ef09015a80a4fa
data/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright (c) 2016-2019 Sylhare
3
+ Copyright (c) 2016-2020 Sylhare
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
data/README.md CHANGED
@@ -1,43 +1,43 @@
1
- # Type on Strap
1
+ # Type on Strap 🎨
2
2
 
3
3
  [![Build Status](https://travis-ci.org/sylhare/Type-on-Strap.svg?branch=master)](https://travis-ci.org/sylhare/Type-on-Strap)
4
4
  [![Gem Version](https://badge.fury.io/rb/type-on-strap.svg)](https://badge.fury.io/rb/type-on-strap)
5
- [![Docker Pulls](https://img.shields.io/docker/pulls/sylhare/type-on-strap)](https://hub.docker.com/repository/docker/sylhare/type-on-strap)
5
+ [![Docker Pulls](https://img.shields.io/docker/pulls/sylhare/type-on-strap)](https://hub.docker.com/r/sylhare/type-on-strap)
6
6
 
7
- 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:
7
+ [![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/)
8
+
9
+ 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:
8
10
 
9
- * Responsive design
10
- * Portfolio page for your projects
11
- * Tags compatibility
12
- * Bootstrap : [Get Bootstrap](http://getbootstrap.com/)
13
- * Search feature : [Simple-Jekyll-Search](https://github.com/christian-fei/Simple-Jekyll-Search)
11
+ * Responsive design on all devices (🖥, 💻, 📱, ...)
12
+ * Portfolio 🗂, Gallery 🖼 pages for your projects
13
+ * Tags compatibility 🏷
14
+ * Handle Bootstrap'ed pages: [Get Bootstrap](http://getbootstrap.com/)
15
+ * 🔎 Search feature: [Simple-Jekyll-Search](https://github.com/christian-fei/Simple-Jekyll-Search)
14
16
  * Math Rendering : [KateX](https://github.com/Khan/KaTeX)
15
- * 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)
16
- * Seo Tags : [Jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag)
17
- * Syntax Highlighting: Easily customisable [Base16](https://github.com/chriskempson/base16)
17
+ * 🖋 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)
18
+ * Seo Tags: [Jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag)
19
+ * 🛠 Syntax Highlighting: Easily customisable [Base16](https://github.com/chriskempson/base16)
18
20
  * Free of rights images from [pexels](https://www.pexels.com/)
19
21
 
20
22
  > [Demo Site](https://sylhare.github.io/Type-on-Strap/)
21
-
22
- [![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/)
23
23
 
24
24
  ## Table of Contents
25
25
 
26
- 1. [Usage](https://github.com/Sylhare/Type-on-Strap#Usage)
27
- 2. [Structure](https://github.com/Sylhare/Type-on-Strap#structure)
28
- 3. [Configure Type on Strap](https://github.com/Sylhare/Type-on-Strap#configure-type-on-strap)
29
- 4. [Other Layouts](https://github.com/Sylhare/Type-on-Strap#other-layouts)
30
- 5. [Feature pages](https://github.com/Sylhare/Type-on-Strap#feature-pages)
31
- 6. [Advanced](https://github.com/Sylhare/Type-on-Strap#advanced)
32
- 7. [License](https://github.com/Sylhare/Type-on-Strap#license)
26
+ - [Usage](#usage)
27
+ - [Structure](#structure)
28
+ - [Configure Type on Strap](#configure-type-on-strap)
29
+ - [Other Layouts](#other-layouts)
30
+ - [Feature pages](#feature-pages)
31
+ - [Advanced](#advanced)
32
+ - [License](#license)
33
33
 
34
34
  ## Usage
35
35
 
36
- ### As a ruby gem
36
+ ### As a ruby gem 💎
37
37
 
38
38
  Check out this tutorial: [Use as Ruby Gem](https://github.com/Sylhare/Type-on-Strap#use-as-ruby-gem)
39
39
 
40
- ### As a github page
40
+ ### As a github page 📋
41
41
 
42
42
  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`
43
43
  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
51
51
  Here are the main files of the template
52
52
 
53
53
  ```bash
54
- jekyll-theme-basically-basic
54
+ Type-on-Strap
55
55
  ├── _includes # theme includes
56
56
  ├── _layouts # theme layouts (see below for details)
57
57
  ├── _portfolio # collection of article to be populated in the portfolio page
@@ -70,10 +70,14 @@ jekyll-theme-basically-basic
70
70
  | ├── search.html # Search page
71
71
  | └── tags.md # The tag page
72
72
  ├── _config.yml # sample configuration
73
+ ├── _data.yml
74
+ | ├── authors.yml # Update the post authors configurations
75
+ | ├── language.yml # Localization configuration
76
+ | └── social.yml # Social configurations (RSS, Twitter, ...)
73
77
  └── index.html # sample home page (blog page paginated)
74
78
  ```
75
79
 
76
- ## Configure Type on Strap
80
+ ## Configure Type on Strap 🛠
77
81
 
78
82
  Open `_config.yml` in a text editor to change most of the blog's settings.
79
83
 
@@ -81,16 +85,17 @@ If a variable in this document is marked as "optional", disable the feature by r
81
85
 
82
86
 
83
87
  ### Site configuration
84
- Configure Jekyll as your own blog or with a subpath in in `_config.yml`:
85
88
 
86
- Jekyll website *without* a subpath (such as a GitHub Pages website for a given username):
89
+ Configure Jekyll as your own blog or with a "baseurl" in in `_config.yml`:
90
+
91
+ Jekyll website *without* a "baseurl" (such as a GitHub Pages website for a given username):
87
92
 
88
93
  ```yml
89
94
  baseurl: ""
90
95
  url: "https://username.github.io"
91
96
  ```
92
97
 
93
- Jekyll website *with* subpath (like the Type on Strap [demo](https://sylhare.github.io/Type-on-Strap/) page):
98
+ Jekyll website *with* "baseurl" (like the Type on Strap [demo](https://sylhare.github.io/Type-on-Strap/) page):
94
99
 
95
100
  ```yml
96
101
  baseurl: "/sub-directory"
@@ -113,7 +118,7 @@ description: My blog posts # Short description, primarily used by sea
113
118
  favicon: assets/favicon.ico # Icon displayed in the tab
114
119
  ```
115
120
 
116
- ### Main configuration
121
+ ### Theme customization 🎨
117
122
 
118
123
  #### Footer and Header's text
119
124
 
@@ -185,16 +190,21 @@ $$
185
190
  In `_data/social.yml` you can customize the social icons from other wbesite you wish to display in the blog.
186
191
  The site icons come from [Font Awesome](https://fontawesome.com/).
187
192
 
193
+ ### Cookie consent
194
+
195
+ 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).
196
+ Set to true, there will be a banner at the bottom of the page with the disclaimer and a approve button.
197
+ Once the user clicks on "Approve" the cookies will be created for Google Analytics.
198
+
188
199
  #### Share in article
189
200
 
190
201
  The share icons are the one at the bottom of the blog page if enabled,
191
202
  to share the article on those platform.
192
203
 
193
-
194
204
  #### Footer
195
205
 
196
- Display in the footer.
197
- All icon variables should be your username enclosed in quotes (e.g. "username") in `_config.yml`,
206
+ Display in the footer.
207
+ All icon variables should be your username enclosed in quotes (e.g. "username") in `_data/social.yml`,
198
208
  except for the following variables:
199
209
 
200
210
  ```yml
@@ -206,23 +216,28 @@ stack_overflow: https://stackoverflow.com/users/0000/first-last
206
216
  youtube: UCqECaJ8Gagnn7YCbPEzWH6g # Youtube token of your channel in the url
207
217
  ```
208
218
 
209
- ### Customizing Posts
219
+ 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)).
220
+
221
+ ### Personalize your Blog Posts 📝
210
222
 
211
223
  When writing a post, be sure in jekyll to:
212
224
  - Put it in the `_posts` folder
213
225
  - Name it with the date first like `2019-08-21-This-is-my-blog-post.md`
214
226
 
227
+ Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/).
228
+
215
229
  #### Layout: Post
216
230
 
217
231
  This are the basic features you can use with the `post` layout.
218
232
 
219
233
  ```yml
234
+
220
235
  ---
221
236
  layout: post
222
237
  title: Hello World # Title of the page
223
238
  hide_title: true # Hide the title when displaying the post, but shown in lists of posts
224
239
  feature-img: "assets/img/sample.png" # Add a feature-image to the post
225
- thumbnail: "assets/img/thumbnail/sample-th.png" # Add a thumbnail image on blog view
240
+ thumbnail: "assets/thumbnails/sample-th.png" # Add a thumbnail image on blog view
226
241
  color: rgb(80,140,22) # Add the specified color as feature image, and change link colors in post
227
242
  bootstrap: true # Add bootstrap to the page
228
243
  tags: [sample, markdown, html]
@@ -230,7 +245,7 @@ tags: [sample, markdown, html]
230
245
  ```
231
246
 
232
247
  With `thumbnail`, you can add a smaller image than the `feature-img`.
233
- If you don't have a thumbnail you can still use the same image as the feature one.
248
+ 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.
234
249
 
235
250
  The background used when `color` is set comes from `lineart.png` from [xukimseven](https://github.com/xukimseven)
236
251
  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
252
267
  Then in your post, add the `excerpt separator`:
253
268
 
254
269
  ```yml
270
+
255
271
  ---
256
272
  layout: post
257
273
  title: Sample Page
@@ -265,41 +281,43 @@ some text in the excerpt
265
281
 
266
282
  The html is stripped out of the excerpt so it only display text.
267
283
 
268
- ## Other Layouts
269
- Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/).
270
- Non-standard features are documented below.
284
+ #### Image aligner
271
285
 
272
- ### Layout: Page
286
+ To easily add align images side by side in your article using the `aligner.html` include:
273
287
 
274
- The page layout have a bit more features explained here.
275
-
276
- ```yml
277
- ---
278
- layout: page
279
- title: "About"
280
- subtitle: "This is a subtitle"
281
- feature-img: "assets/img/sample.png"
282
- permalink: /about.html # Set a permalink your your page
283
- hide: true # Prevent the page title to appear in the navbar
284
- icon: "fa-search" # Will Display only the fontawesome icon (here: fa-search) and not the title
285
- tags: [sample, markdown, html]
286
- ---
288
+ ```ruby
289
+ {% include aligner.html images="path/to/img1.png,path/to/img2.png,path/to/img3.png" column=3 %}
287
290
  ```
288
291
 
289
- The hide only hides your page from the navigation bar, it is however still generated and can be access through its link.
292
+ Use it in any markdown file. There are two fields in the include you need to look into:
293
+ - _images_: Takes a string separated with `,` of all the images path.
294
+ - It by default look into `assets/img/` so give the path from there.
295
+ - _column_: (OPTIONAL) Set the number of column you want your imaged displayed in.
296
+ - default is 2 columns
297
+ - `column=3` set 3 columns
298
+ - `column="auto"` makes as many columns as images
290
299
 
291
- ### Layout: Default
300
+ #### Code highlight
292
301
 
293
- This layout includes the head, navigation bar and footer around your content.
302
+ Like all CSS variables in the theme, you can edit the color of the code highlight in _sass > base > _variables.scss.
303
+ The code highlighting works with [base16](https://github.com/chriskempson/base16-html-previews/tree/master/css) you can find existing example
304
+ of your favourite highlight color scheme on this format.
294
305
 
295
- ## Feature pages
306
+ ## Feature pages and layouts
296
307
 
297
308
  All feature pages besides the "home" one are stored in the `page` folder,
298
309
  they will appear in the navigation bar unless you set `Hide: true` in the front matter.
299
310
 
300
- Here are the documentation for the other feature pages that can be added through `_config.yml`.
311
+ Here are the documentation for the other feature pages that can be added through `_config.yml`.
312
+
313
+ Non-standard features are documented below.
314
+
315
+ ### Layout: Default
316
+
317
+ This layout includes the head, navigation bar and footer around your content.
318
+ Unless you're making a custom layout you won't need it.
301
319
 
302
- ### Home
320
+ ### Layout: Home 🏡
303
321
 
304
322
  This page is used as the home page of the template (in the `index.html`). It displays the list of articles in `_posts`.
305
323
  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
309
327
 
310
328
  If your posts are not displaying ensure that you have added the line `paginate: 5` to `_config.yml`.
311
329
 
312
- ### Portfolio
330
+ ### Layout: Page 📄
331
+
332
+ The page layout have a bit more features explained here.
333
+
334
+ ```yml
335
+
336
+ ---
337
+ layout: page
338
+ title: "About"
339
+ subtitle: "This is a subtitle"
340
+ feature-img: "assets/img/sample.png"
341
+ permalink: /about.html # Set a permalink your your page
342
+ hide: true # Prevent the page title to appear in the navbar
343
+ icon: "fa-search" # Will Display only the fontawesome icon (here: fa-search) and not the title
344
+ tags: [sample, markdown, html]
345
+ ---
346
+ ```
347
+
348
+ The hide only hides your page from the navigation bar, it is however still generated and can be access through its link.
349
+
350
+ ### Feature: Portfolio 🗂
313
351
 
314
352
  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.
315
353
 
316
354
  To use the portfolio, simply create a `portfolio.md` with this information inside:
355
+
317
356
  ```yml
357
+
318
358
  ---
319
359
  layout: page
320
360
  title : Portfolio
@@ -323,13 +363,14 @@ title : Portfolio
323
363
  {% include portfolio.html %}
324
364
  ```
325
365
 
326
- #### Portofolio posts
366
+ #### Portfolio posts
327
367
 
328
368
  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.
329
369
 
330
370
  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:
331
371
 
332
372
  ```yml
373
+
333
374
  ---
334
375
  layout: post
335
376
  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
344
385
  Make sure your `_config.yml` contains the following if you are using the theme as a gem:
345
386
 
346
387
  ```yml
347
-
348
388
  # PORTFOLIO
349
389
  collections:
350
390
  portfolio:
@@ -354,7 +394,7 @@ collections:
354
394
 
355
395
  This creates the collection for Jekyll so it can find and display your portfolio posts.
356
396
 
357
- ### Gallery
397
+ ### Feature: Gallery 🖼
358
398
 
359
399
  You can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures in optimal position
360
400
  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
362
402
  It will take all of the picture under that directory. Then use the `include` to add it in your page.
363
403
 
364
404
  ```yml
405
+
365
406
  ---
366
407
  layout: page
367
408
  title: Gallery
@@ -372,7 +413,7 @@ gallery: "assets/img/pexels"
372
413
  ```
373
414
 
374
415
 
375
- ### Search
416
+ ### Feature: Search 🔍
376
417
 
377
418
  The search feature is based on [Simple-Jekyll-search](https://github.com/christian-fei/Simple-Jekyll-Search)
378
419
  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
382
423
  The search page can be hidden with the `hide` option. You can remove the icon by removing `icon`:
383
424
 
384
425
  ```yml
426
+
385
427
  ---
386
428
  layout: search
387
429
  title: Search
@@ -389,7 +431,7 @@ icon: "search"
389
431
  ---
390
432
  ```
391
433
 
392
- ### Tags
434
+ ### Feature: Tags 🏷
393
435
 
394
436
  Tags should be placed between `[]` in your post metadata. Separate each tag with a comma.
395
437
  Tags are recommended for posts and portfolio items.
@@ -397,6 +439,7 @@ Tags are recommended for posts and portfolio items.
397
439
  For example:
398
440
 
399
441
  ```yml
442
+
400
443
  ---
401
444
  layout: post
402
445
  title: Markdown and HTML
@@ -424,27 +467,34 @@ You can learn more about them on [shopify's doc](https://help.shopify.com/themes
424
467
 
425
468
  ### Minimizing and optimizing: css, js and images
426
469
 
427
- Before you need to have `node` and `npm` installed:
470
+ Before you need to have *node* and `npm` installed:
471
+
428
472
  - Windows: https://nodejs.org/
429
473
  - Ubuntu/Debian: `apt-get install nodejs npm libgl1 libxi6`
430
474
  - Fedora (dnf) / RHEL/CentOS (yum): `dnf install node npm libglvnd-glx libXi`
431
475
 
432
476
  Then you need to install [`gulp-cli`](https://gulpjs.com/) and its dependencies:
433
- ```shell
477
+
478
+ ```bash
434
479
  cd assets/
435
480
  sudo npm install gulp-cli -g
436
481
  npm install
437
482
  ```
438
483
 
439
- **Now, whenever you want to minify and optimize, run:**
440
- ```shell
484
+ You can run the default task that will compress the js, css and images and create the thumbnails for the supported image
485
+ formats:
486
+
487
+ ```bash
441
488
  cd assets/
442
489
  gulp default
490
+ gulp thumbnails # to create all of the images thumbnails
443
491
  # tip: run a git status to see the changes
444
492
  git status
445
493
  ```
446
494
 
447
- ### Use as Ruby Gem
495
+ You can find more about the gulp tasks in the [gulpfile.js](assets/gulpfile.js)
496
+
497
+ ### Use as Ruby Gem 💎
448
498
 
449
499
  You can use Type-on-strap as a [gem](https://rubygems.org/gems/type-on-strap).
450
500
 
@@ -454,6 +504,7 @@ Add this line to your Jekyll site's Gemfile (or create one):
454
504
  ```ruby
455
505
  gem "type-on-strap"
456
506
  ```
507
+
457
508
  Add this line to your Jekyll site's `_config.yml` file:
458
509
 
459
510
  ```yml
@@ -482,5 +533,7 @@ remote_theme: sylhare/Type-on-Strap
482
533
 
483
534
  ## License
484
535
 
485
- There are some fonts and component on this theme going under the MIT licence as well in this theme.
486
- [The MIT License (MIT)](https://raw.githubusercontent.com/Sylhare/Type-on-Strap/master/LICENSE)
536
+ This theme is licensed under the [The MIT License (MIT)](https://raw.githubusercontent.com/Sylhare/Type-on-Strap/master/LICENSE)
537
+
538
+ - Pictures from [Pexels](https://www.pexels.com/) are under Creative Commons Zero (CC0) license
539
+ - Fonts are licensed under the [SIL Open Font License (OFL)](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)
@@ -11,3 +11,6 @@ str_previous_post: "Previous post"
11
11
  str_next_page: "Next"
12
12
  str_previous_page: "Prev"
13
13
  str_javascript_required_disqus: "Please enable JavaScript to view comments."
14
+ str_no_result_found: "No result found"
15
+ str_cookie_approve: "Approve"
16
+ str_cookie_disclaimer: "We would like to use third party cookies and scripts to improve the functionality of this website."
@@ -0,0 +1,19 @@
1
+ {% assign images = include.images | split: ',' %}
2
+
3
+ {% if include.column == "auto" %}
4
+ {% assign column = 100.0 | divided_by: images.size %}
5
+ {% elsif include.column > 0 %}
6
+ {% assign column = 100.0 | divided_by: include.column %}
7
+ {% endif %}
8
+
9
+ <div class="row">
10
+ {% for image in images %}
11
+ <div {% if column %} style="flex: {{ column }}%" {% else %} class="column" {% endif %} >
12
+ <img {% if images.size == 1 %}class="single"{% endif %}
13
+ src="{{ image | prepend: 'assets/img/' | relative_url }}"
14
+ alt="{{ image | prepend: '/' | split: '/' | last }}">
15
+ </div>
16
+ {% endfor %}
17
+ </div>
18
+
19
+ {% assign column = false %}