type-on-strap 2.2.6 → 2.3.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a94f2cf0ce0c4dfd19bd34c6822d7665ed2ad66c8bf8b05f92319779b665f0be
-  data.tar.gz: ea00d9fd6147a84ae0699cd53642c3fc4bf06a9962b196aea92b360ebcd6ba96
+  metadata.gz: 478babd84de11e9924830b336ad9741deec1e41d437c36747a53060c6c185a87
+  data.tar.gz: 5a2f74dcb75f627ce7542b34c1b7a76229d6189ec80ea7e3bd19a87d7db79727
 SHA512:
-  metadata.gz: 35a632c2cc8f0c9f830d0e6ce94c77bf005e074579d393c7ef3976291e11468f03823ec30a85c069258fc176bd4ca419c85d2dd8d2005436e129aaa97d2230a6
-  data.tar.gz: daa6fe964468be5e132d9864475bca5d95bc42453fa46d6a8a237e3e749c51aa717cfcedee4bdf7554e8c38a77aa16b63e4a8412901fb56a94d8dac8b6e591c8
+  metadata.gz: 459a18b0e0e372db95920cfa1dedcb6d835c54af709fd13d41a60648df05d952d9edc2a455edc4e6e3411f17b1a215b64bc92219eeb895285f66dc4909f7595c
+  data.tar.gz: '059f94bb911213c4ea06f7109ddf46e25358afd2a581250e27b9701cc416249a6ba114b7752a45230ffbbc7ed6279f2fe81077599d2114b8bfbb2fd77cb48675'

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,7 +4,7 @@
 [![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:
 
@@ -14,10 +14,12 @@ A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chan
 * 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/)
 
@@ -43,7 +45,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`](https://github.com/Sylhare/Type-on-Strap#site-configuration)
 5. Run the Jekyll server: `bundle exec jekyll serve`
 
 ## Structure
@@ -86,7 +88,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):
 
@@ -116,8 +118,13 @@ 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 🎨
 
 #### Footer and Header's text
@@ -137,7 +144,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
 
@@ -148,7 +155,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.
@@ -160,12 +169,23 @@ to your project's `_config.yml` file:
 disqus_shortname: my_disqus_shortname
 ```
 
-### Math typesetting
+#### 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 
@@ -185,6 +205,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.
@@ -228,7 +271,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
 
@@ -237,7 +280,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]
@@ -279,7 +322,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
 
@@ -289,8 +332,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
@@ -360,7 +403,7 @@ layout: page
 title : Portfolio 
 ---
 
-{% include portfolio.html %}
+{% include default/portfolio.html %}
 ```
 
 #### Portfolio posts
@@ -409,7 +452,7 @@ title: Gallery
 gallery: "assets/img/pexels"
 ---
 
-{% include gallery.html gallery_path=page.gallery %}
+{% include default/gallery.html gallery_path=page.gallery %}
 ```
 
 
@@ -465,7 +508,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:
 
@@ -481,18 +526,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 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 💎
 

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>
@@ -11,12 +24,9 @@
     <!--Favicon-->
     <link rel="shortcut icon" href="{{ site.favicon | relative_url }}" type="image/x-icon">
 
-    <!-- Canonical -->
-    <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
-
     <!-- 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 }}">
@@ -29,12 +39,19 @@
     {% endif %}
 
     <!-- KaTeX 0.12.0 -->
-    <!-- if you have any issue check https://github.com/KaTeX/KaTeX -->
     {% 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.9.2 -->
+    {% if site.mermaid %}
+    <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}" onload="mermaid.initialize({startOnLoad:true});"></script>
+    {% endif %}
+
+    <!-- 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 -->
     <script>
       const cookieName = 'cookie-notice-dismissed-{{ site.url }}';
@@ -43,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) -->
@@ -56,15 +73,22 @@
 
     <!-- seo tags -->
     <meta property="og:image" content="{{ '/' | absolute_url }}{% if page.thumbnail %}{{ page.thumbnail }}{% else %}{{ page.feature-img | default: site.header_feature_image }}{% endif %}">
+    {% unless page.layout == post %}
+    <meta property="og:type" content="website" />
+    {% endunless %}
     {% seo %}
 
     <!-- RSS -->
     {% feed_meta %}
 
     <!-- Twitter Cards -->
-    <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.theme_settings.title }}{% endif %}">
-    <meta name="twitter:description" content="{{ page.content | strip_html | strip_newlines | truncate: 160 }}">
-    {% if site.theme_settings.twitter %}<meta name="twitter:creator" content="@{{ site.theme_settings.twitter }}">{% endif %}
+    <meta name="twitter:title" content="{{ page.title | default: site.title }}">
+    <meta name="twitter:description" content="{{ page.content | strip_html | strip_newlines | truncate: 160 | default: site.header_text}}">
+    {% if site.data.social.twitter %}
+    <meta name="twitter:creator" content="@{{ site.data.social.twitter }}">
+    <meta name="twitter:site" content="@{{ site.data.social.twitter }}">
+    {% endif %}
     <meta name="twitter:card" content="{% unless page.thumbnail %}summary{% else %}summary_large_image{% endunless %}">
     <meta name="twitter:image" content="{{ '/' | absolute_url }}{% if page.thumbnail %}{{ page.thumbnail }}{% else %}{{ page.feature-img | default: site.header_feature_image }}{% endif %}">
+    <meta name="twitter:image:alt" content="{{ page.title | default: site.title }}">
 </head>

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

@@ -7,18 +7,15 @@
 			<img alt="logo img" class="avatar" src="{{ site.avatar | relative_url }}" />
 		</a>
         {% endif %}
-
-		<h1 class="site-title">
-			<a aria-label="{{ site.title }}" href="{{ '/' | relative_url }}">
+        <a class="site-title" aria-label="{{ site.title }}" href="{{ '/' | relative_url }}">
         {{ site.title }}
-      </a>
-		</h1>
+		</a>
 	</div>
 
     <!-- Toggle menu -->
     <nav class="clear">
     <a aria-label="pull" id="pull" class="toggle" href="#">
-    <i class="fa fa-bars fa-lg"></i>
+    <i class="fas fa-bars fa-lg"></i>
     </a>
 
     <!-- Menu -->
@@ -30,13 +27,18 @@
             <li class="separator"> | </li>
             <li>
                 <a class="clear" aria-label="{{ page.title }}" title="{{ page.title }}" href="{{ page.url | relative_url }}">
-                    {% if page.icon %} <i class="fa {{ page.icon }}" aria-hidden="true"></i>
+                    {% if page.icon %} <i class="fas {{ page.icon }}" aria-hidden="true"></i>
                     {% else %} {{ page.title }} {% endif%}
                 </a>
             </li>
             {% endunless %}
             {% assign name_page = page.title | append: name_page %}
         {% endfor %}
+        
+        {% if site.color_theme == 'auto' %}
+        <li class="separator"> | </li>
+        <li><a id="theme-toggle" title="{{ page.title }} "aria-label="{{ page.title }}" onclick="themeToggle()"></a></li>
+        {% endif %}
     </ul>
 
 	</nav>