type-on-strap 2.1.0 → 2.2.6

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: ef06489094e16d39de802e362adc81b54d3a464458b52c84c02e0ce2b96cb3b4
4
- data.tar.gz: b66a8e226d91c60fce5fa5ecf4abf7f54b39cfc5acb8234db84d4d1058c5f07b
3
+ metadata.gz: a94f2cf0ce0c4dfd19bd34c6822d7665ed2ad66c8bf8b05f92319779b665f0be
4
+ data.tar.gz: ea00d9fd6147a84ae0699cd53642c3fc4bf06a9962b196aea92b360ebcd6ba96
5
5
  SHA512:
6
- metadata.gz: dbd593fe75da9e1ccc579b9b33250d7ef176fda853622dd8b6fcf4f8dce15eac6ab8c42096442bda6411552a5f56b592f8408dc85e9b6e943a7397b5b0a8b769
7
- data.tar.gz: aed10825e1a462a433438b09d0acabdf0e9c013b6720eb5e2ab08a50a1153ee7a862cabdd63b8bbf1441e166de13ea6c578bd979fc2236565eb6843f0f1649b9
6
+ metadata.gz: 35a632c2cc8f0c9f830d0e6ce94c77bf005e074579d393c7ef3976291e11468f03823ec30a85c069258fc176bd4ca419c85d2dd8d2005436e129aaa97d2230a6
7
+ data.tar.gz: daa6fe964468be5e132d9864475bca5d95bc42453fa46d6a8a237e3e749c51aa717cfcedee4bdf7554e8c38a77aa16b63e4a8412901fb56a94d8dac8b6e591c8
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,25 +1,25 @@
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
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
 
@@ -33,11 +33,11 @@ A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chan
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,8 +281,7 @@ 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
-
269
- ### Image aligner
284
+ #### Image aligner
270
285
 
271
286
  To easily add align images side by side in your article using the `aligner.html` include:
272
287
 
@@ -282,15 +297,42 @@ Use it in any markdown file. There are two fields in the include you need to loo
282
297
  - `column=3` set 3 columns
283
298
  - `column="auto"` makes as many columns as images
284
299
 
285
- ## Other Layouts
286
- Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/).
300
+ #### Code highlight
301
+
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.
305
+
306
+ ## Feature pages and layouts
307
+
308
+ All feature pages besides the "home" one are stored in the `page` folder,
309
+ they will appear in the navigation bar unless you set `Hide: true` in the front matter.
310
+
311
+ Here are the documentation for the other feature pages that can be added through `_config.yml`.
312
+
287
313
  Non-standard features are documented below.
288
314
 
289
- ### Layout: Page
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.
319
+
320
+ ### Layout: Home 🏡
321
+
322
+ This page is used as the home page of the template (in the `index.html`). It displays the list of articles in `_posts`.
323
+ You can use this layout in another page (adding a title to it will make it appear in the navigation bar).
324
+
325
+ The recommended width and height for the home picture is width:`2484px;` and height:`1280px`
326
+ which are the dimensions of the actual picture for it to be rolling down as you scroll the page.
327
+
328
+ If your posts are not displaying ensure that you have added the line `paginate: 5` to `_config.yml`.
329
+
330
+ ### Layout: Page 📄
290
331
 
291
332
  The page layout have a bit more features explained here.
292
333
 
293
334
  ```yml
335
+
294
336
  ---
295
337
  layout: page
296
338
  title: "About"
@@ -305,33 +347,14 @@ tags: [sample, markdown, html]
305
347
 
306
348
  The hide only hides your page from the navigation bar, it is however still generated and can be access through its link.
307
349
 
308
- ### Layout: Default
309
-
310
- This layout includes the head, navigation bar and footer around your content.
311
-
312
- ## Feature pages
313
-
314
- All feature pages besides the "home" one are stored in the `page` folder,
315
- they will appear in the navigation bar unless you set `Hide: true` in the front matter.
316
-
317
- Here are the documentation for the other feature pages that can be added through `_config.yml`.
318
-
319
- ### Home
320
-
321
- This page is used as the home page of the template (in the `index.html`). It displays the list of articles in `_posts`.
322
- You can use this layout in another page (adding a title to it will make it appear in the navigation bar).
323
-
324
- The recommended width and height for the home picture is width:`2484px;` and height:`1280px`
325
- which are the dimensions of the actual picture for it to be rolling down as you scroll the page.
326
-
327
- If your posts are not displaying ensure that you have added the line `paginate: 5` to `_config.yml`.
328
-
329
- ### Portfolio
350
+ ### Feature: Portfolio 🗂
330
351
 
331
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.
332
353
 
333
354
  To use the portfolio, simply create a `portfolio.md` with this information inside:
355
+
334
356
  ```yml
357
+
335
358
  ---
336
359
  layout: page
337
360
  title : Portfolio
@@ -340,13 +363,14 @@ title : Portfolio
340
363
  {% include portfolio.html %}
341
364
  ```
342
365
 
343
- #### Portofolio posts
366
+ #### Portfolio posts
344
367
 
345
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.
346
369
 
347
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:
348
371
 
349
372
  ```yml
373
+
350
374
  ---
351
375
  layout: post
352
376
  title: Circus # Title of the portfolio post
@@ -361,7 +385,6 @@ date: 2019-07-25 # Not mandatory, however needs to be in date format t
361
385
  Make sure your `_config.yml` contains the following if you are using the theme as a gem:
362
386
 
363
387
  ```yml
364
-
365
388
  # PORTFOLIO
366
389
  collections:
367
390
  portfolio:
@@ -371,7 +394,7 @@ collections:
371
394
 
372
395
  This creates the collection for Jekyll so it can find and display your portfolio posts.
373
396
 
374
- ### Gallery
397
+ ### Feature: Gallery 🖼
375
398
 
376
399
  You can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures in optimal position
377
400
  based on available vertical space.
@@ -379,6 +402,7 @@ You need to specify the `gallery_path` which will be used to find the pictures t
379
402
  It will take all of the picture under that directory. Then use the `include` to add it in your page.
380
403
 
381
404
  ```yml
405
+
382
406
  ---
383
407
  layout: page
384
408
  title: Gallery
@@ -389,7 +413,7 @@ gallery: "assets/img/pexels"
389
413
  ```
390
414
 
391
415
 
392
- ### Search
416
+ ### Feature: Search 🔍
393
417
 
394
418
  The search feature is based on [Simple-Jekyll-search](https://github.com/christian-fei/Simple-Jekyll-Search)
395
419
  there is a `search.json` file that will create a list of all of the site posts, pages and portfolios.
@@ -399,6 +423,7 @@ Then there's a `search.js` displaying the formatted results entered in the `sear
399
423
  The search page can be hidden with the `hide` option. You can remove the icon by removing `icon`:
400
424
 
401
425
  ```yml
426
+
402
427
  ---
403
428
  layout: search
404
429
  title: Search
@@ -406,7 +431,7 @@ icon: "search"
406
431
  ---
407
432
  ```
408
433
 
409
- ### Tags
434
+ ### Feature: Tags 🏷
410
435
 
411
436
  Tags should be placed between `[]` in your post metadata. Separate each tag with a comma.
412
437
  Tags are recommended for posts and portfolio items.
@@ -414,6 +439,7 @@ Tags are recommended for posts and portfolio items.
414
439
  For example:
415
440
 
416
441
  ```yml
442
+
417
443
  ---
418
444
  layout: post
419
445
  title: Markdown and HTML
@@ -441,27 +467,34 @@ You can learn more about them on [shopify's doc](https://help.shopify.com/themes
441
467
 
442
468
  ### Minimizing and optimizing: css, js and images
443
469
 
444
- Before you need to have `node` and `npm` installed:
470
+ Before you need to have *node* and `npm` installed:
471
+
445
472
  - Windows: https://nodejs.org/
446
473
  - Ubuntu/Debian: `apt-get install nodejs npm libgl1 libxi6`
447
474
  - Fedora (dnf) / RHEL/CentOS (yum): `dnf install node npm libglvnd-glx libXi`
448
475
 
449
476
  Then you need to install [`gulp-cli`](https://gulpjs.com/) and its dependencies:
450
- ```shell
477
+
478
+ ```bash
451
479
  cd assets/
452
480
  sudo npm install gulp-cli -g
453
481
  npm install
454
482
  ```
455
483
 
456
- **Now, whenever you want to minify and optimize, run:**
457
- ```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
458
488
  cd assets/
459
489
  gulp default
490
+ gulp thumbnails # to create all of the images thumbnails
460
491
  # tip: run a git status to see the changes
461
492
  git status
462
493
  ```
463
494
 
464
- ### 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 💎
465
498
 
466
499
  You can use Type-on-strap as a [gem](https://rubygems.org/gems/type-on-strap).
467
500
 
@@ -471,6 +504,7 @@ Add this line to your Jekyll site's Gemfile (or create one):
471
504
  ```ruby
472
505
  gem "type-on-strap"
473
506
  ```
507
+
474
508
  Add this line to your Jekyll site's `_config.yml` file:
475
509
 
476
510
  ```yml
@@ -499,5 +533,7 @@ remote_theme: sylhare/Type-on-Strap
499
533
 
500
534
  ## License
501
535
 
502
- There are some fonts and component on this theme going under the MIT licence as well in this theme.
503
- [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."
@@ -8,8 +8,12 @@
8
8
 
9
9
  <div class="row">
10
10
  {% for image in images %}
11
- <div {% unless column %}class="column"{% endunless%} style="flex: {{ column }}%" >
12
- <img src="{{ image | prepend: 'assets/img/' | relative_url }}" alt="{{ image | prepend: '/' | split: '/' | last }}">
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 }}">
13
15
  </div>
14
16
  {% endfor %}
15
17
  </div>
18
+
19
+ {% assign column = false %}
@@ -0,0 +1,2 @@
1
+ {%- assign citation = site.data.biblio | where:"key", include.key | first -%}
2
+ <span class="cit-authors">{{citation.authors}}</span>, <span class="cit-title">{{citation.title}}</span>
@@ -1,10 +1,12 @@
1
- <div id="disqus_thread"></div>
2
- <script type="text/javascript">
3
- var disqus_shortname = '{{ site.disqus_shortname }}';
4
- (function() {
5
- var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
6
- dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
7
- (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
8
- })();
9
- </script>
10
- <noscript>{{ site.data.language.str_javascript_required_disqus | default: Please enable JavaScript to view comments." }}</noscript>
1
+ <div class="comments">
2
+ <div id="disqus_thread"></div>
3
+ <script type="text/javascript">
4
+ var disqus_shortname = '{{ site.disqus_shortname }}';
5
+ (function() {
6
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
7
+ dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
8
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
9
+ })();
10
+ </script>
11
+ <noscript>{{ site.data.language.str_javascript_required_disqus | default: Please enable JavaScript to view comments." }}</noscript>
12
+ </div>