type-on-strap 1.3.0 → 1.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c99e7dccd2e2c2478de4df5f26f1acc043df4e7f02c6979c6efdf06b4a406074
-  data.tar.gz: 5372838e020faf93ade4284f5e43c21b13529102d6afe6595a9aa5b85f9228f1
+  metadata.gz: 97ab072caae05eaaddc4d20a84cc79ed6b77512ae78ae56096675762b0dc2ed0
+  data.tar.gz: 17d5ca6e3903b4cb1f6f96c61374a87ec92572f09c95153a57a072d94191ddcb
 SHA512:
-  metadata.gz: 8ef1dc0964271a0a50d2a106be4596a8d09f3b3cfa0288e89b746818a831afc0eb6109734a3f001594543ef76be26ed306d9e5cdbb781ec059df238ec06c7712
-  data.tar.gz: adf56ba3a7c75267b4fb800cdacc3688fe020482017e4ab45cd671f0636f897aeb4938a5de7a4ccd6bee43c9e1851650c69f8054b5c537a7eb159997626476da
+  metadata.gz: 5e861d4acf3b60c4a6b29844b7ba8f8431c81e8448e153e3763167b6fc977e58ebbf81c6e2bbc9d909a228446ba365acbddd26897fef07d2a497b10ba9cd2bbe
+  data.tar.gz: 52dc4221b463bd40e61639ac00a6f5e68f9f01242089ce66e38c2c35bfdc51395ec021145469b4b4780053a3fc517f3a613c20e643b451c0f0e3c586a5f11e13

data/README.md

@@ -11,6 +11,7 @@ A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chan
 * Bootstrap : [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://help.github.com/articles/search-engine-optimization-for-github-pages/)
 * Syntax Highlighting: Easily customisable [Base16](https://github.com/chriskempson/base16)
 * Free of rights images from [pexels](https://www.pexels.com/)
@@ -27,7 +28,8 @@ A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chan
 4. [Layout](https://github.com/Sylhare/Type-on-Strap#layout)
 5. [Feature pages](https://github.com/Sylhare/Type-on-Strap#feature-pages)
 6. [Template as a Gem](https://github.com/Sylhare/Type-on-Strap#Template-as-a-Gem)
-7. [License](https://github.com/Sylhare/Type-on-Strap#license)
+7. [Advanced](https://github.com/Sylhare/Type-on-Strap#advanced)
+8. [License](https://github.com/Sylhare/Type-on-Strap#license)
 
 ## Usage
 
@@ -53,7 +55,7 @@ jekyll-theme-basically-basic
 ├── assets
 |  ├── js	               # theme javascript, Katex, jquery, bootstrap, jekyll search, 
 |  ├── css                     # isolated Bootstrap, font-awesome, katex and main css
-|  ├── fonts		       # Font-Awesome, Glyphicon, and other fonts
+|  ├── fonts		       # Font-Awesome, and other fonts
 |  └── img		       # Images used for the template
 ├── pages
 |   ├── 404.md		       # To be displayed when url is wrong
@@ -94,15 +96,15 @@ Please configure this  before using the theme.
 
 ### Meta and Branding
 
-Meta variables hold basic information about your Jekyll site which will be used throughout the site and as meta properties for search engines, browsers, and the site's RSS feed.
+Meta variables hold basic information about your Jekyll site which will be used throughout the site 
+and as meta properties for search engines, browsers, and the site's RSS feed.
 
 Change these variables in `_config.yml`:
 
 ```yml
   theme_settings:
     title: My Jekyll Blog                 # Name of website
-    avatar: assets/img/triangular.svg     # Path of avatar image, to be displayed in the theme's header
-    gravatar: f98....6bfc                 # MD5 hash of your email address
+    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
 ```
 
@@ -115,7 +117,7 @@ Customize your site header/footer with these variables in `_config.yml`:
 ```yml
   theme_settings:
     header_text: Welcome to my Jekyll blog
-    header_text_feature_image: assets/img/sample3.png
+    header_feature_image: assets/img/sample3.png
     footer_text: Copyright 2017
 ```
 
@@ -147,11 +149,14 @@ Jekyll works with [liquid](https://shopify.github.io/liquid/) tags usually repre
 {{ liquid.tag | filter }}
 ```
 
-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)
+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)
 
 ### Footer's icons
 
-Display the site's icon from [Font Awesome](https://fortawesome.github.io/Font-Awesome/) in the footer. All icon variables should be your username enclosed in quotes (e.g. "username") in `_config.yml`, except for the following variables:
+Display the site's icon from [Font Awesome](https://fortawesome.github.io/Font-Awesome/) in the footer. 
+All icon variables should be your username enclosed in quotes (e.g. "username") in `_config.yml`, 
+except for the following variables:
 
 ```yml
   theme_settings:
@@ -166,7 +171,8 @@ Display the site's icon from [Font Awesome](https://fortawesome.github.io/Font-A
 Optionally, if you have a [Disqus](https://disqus.com/) account, you can show a 
 comments section below each post.
 
-To enable Disqus comments, add your [Disqus shortname](https://help.disqus.com/customer/portal/articles/466208) to your project's `_config.yml` file:
+To enable Disqus comments, add your [Disqus shortname](https://help.disqus.com/customer/portal/articles/466208) 
+to your project's `_config.yml` file:
 
 ```yml
   theme_settings:
@@ -192,7 +198,8 @@ When KateX is set in `_config.yml`:
      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 in `_config.yml` to `true` for math typesetting.
+You can then wrap math expressions with `$$` signs in your posts and make sure you have set the `katex` variable 
+in `_config.yml` to `true` for math typesetting.
 
 For inline math typesetting, type your math expression on the *same line* as your content. For example:
 
@@ -210,7 +217,9 @@ $$
 
 ### Post excerpt
 
-The [excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) are the first lines of an article that is display on the blog page. The length of the excerpt has a default of around `250` characters and can be manually set in the post using:
+The [excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) are the first lines of an article that is display on the blog page. 
+The length of the excerpt has a default of around `250` characters and can be manually set in the post using:
+
 ```yml
 ---
 layout: post
@@ -226,7 +235,8 @@ some text in the excerpt
 The html is stripped out of the excerpt so it only display text.
 
 ## Layout
-Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/). Non-standard features are documented below.
+Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/). 
+Non-standard features are documented below.
 
 ### Layout: Post
 
@@ -239,14 +249,20 @@ 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
+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]
 ---
 ```
 
-With `thumbnail`, you can add a smaller image than the `feature-img`. If you don't want/have a thumbnail you can still use the same image as the feature one.
+With `thumbnail`, you can add a smaller image than the `feature-img`. 
+If you don't want/have a thumbnail you can still use the same image as the feature one.
+
+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 (`theme_settings > color_image`). If you want another one, put it in `/assets/img` as well. 
 
-So the **bootstrap** is not mandatory and is only usefull if you want to add bootstrapped content in your page. It will respect the page and theme layout, mind the padding on the sides.
+The **bootstrap** is not mandatory and is only useful if you want to add bootstrapped content in your page. 
+It will respect the page and theme layout, mind the padding on the sides.
 
 ### Layout: Page
 
@@ -274,7 +290,8 @@ 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. 
+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`.
 
@@ -283,7 +300,8 @@ Here are the documentation for the other feature pages that can be added through
 This page is the used as the home page of the template (in the `index.html`). It displays the list of article 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 dimension of the actual picture for it to be rolling down as you scroll the page. 
+The recommended width and height for the home picture is width:`2484px;` and height:`1280px` 
+which are the dimension of the actual picture for it to be rolling down as you scroll the page. 
 
 ### Portfolio
 
@@ -299,11 +317,30 @@ title : Portfolio
 {% include portfolio.html %}
 ```
 
-### Gallery
+#### Portofolio posts
 
-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. You need to specify the `gallery_path` which will be used to find the pictures to render. It will take all of the picture under that directory. Then use the `include` to add it in your page. 
+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
+feature-img: "assets/img/portfolio/cake.png"   # Will display the image in the post
+img: "assets/img/portfolio/cake.png"           # Will display the image in the portfolio page
+date: 2019-07-25		 	       # Not mandatory, however needs to be in date format to display the date
+---
 ```
+
+### 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. 
+You need to specify the `gallery_path` which will be used to find the pictures to render. 
+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
@@ -365,6 +402,31 @@ So if you're using the template as a theme, Make sure you have:
 
 Now you can use any theme gem with github pages : [29/11/2017 Github Pages Broadcast](https://github.com/blog/2464-use-any-theme-with-github-pages)
 
+## Advanced
+
+### Minimizing and optimizing: css, js and images
+
+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
+cd assets/
+sudo npm install gulp-cli -g
+npm install
+```
+
+**Now, whenever you want to minify and optimize, run:**
+```shell
+cd assets/
+gulp default
+# tip: run a git status to see the changes
+git status
+```
+
 ## 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)

data/_includes/blog.html

@@ -15,9 +15,7 @@
                 {{ post.title }}
               </a>
             </h1>
-            <p class="meta">
-              {{ post.date | date: "%B %-d, %Y" }}
-            </p>
+            {% include post_info.html post=post %}
           </header>
           <div class="excerpt">
               {{ post.excerpt | strip_html | escape }}

data/_includes/blog_nav.html

@@ -4,16 +4,15 @@
         
         {% if paginator.previous_page and paginator.previous_page != 1%}
         <!-- << -->
-        <a aria-label="{{ site.theme_settings.str_previous_page }}" href="{{ '/' | relative_url }}"
-           style="margin-right:0.1em" class="button">
-            <i class="fa fa-angle-double-left"></i>
+        <a aria-label="{{ site.theme_settings.str_previous_page }}" href="{{ '/' | relative_url }}" class="button">
+            <span><i class="fa fa-angle-double-left"></i></span>
         </a>
         {% endif %}
         
         <!-- < previous -->
         <a aria-label="{{ site.theme_settings.str_previous_page }}" href="{{ paginator.previous_page_path | relative_url }}"
            {% unless paginator.previous_page %}style="visibility:hidden"{% endunless %} class="button">
-            <i class="fa fa-chevron-left"></i>
+            <span><i class="fa fa-chevron-left"></i></span>
             {{ site.theme_settings.str_previous_page }}
         </a>
     </div>
@@ -28,14 +27,13 @@
         <a aria-label="{{ site.theme_settings.str_next_page }}" href="{{ paginator.next_page_path | relative_url }}"
            {% unless paginator.next_page %}style="visibility:hidden"{% endunless %} class="button">
             {{ site.theme_settings.str_next_page }}
-            <i class="fa fa-chevron-right"></i>
+            <span><i class="fa fa-chevron-right"></i></span>
         </a>
 
         {% if paginator.next_page and paginator.next_page != paginator.total_pages %}
         <!-- >> -->
-        <a aria-label="{{ site.theme_settings.str_next_page }}" href="{{ site.paginate_path | relative_url | replace: ':num', paginator.total_pages }}"
-           style="margin-left:0.1em" class="button">
-            <i class="fa fa-angle-double-right"></i>
+        <a aria-label="{{ site.theme_settings.str_next_page }}" href="{{ site.paginate_path | relative_url | replace: ':num', paginator.total_pages }}" class="button">
+            <span><i class="fa fa-angle-double-right"></i></span>
         </a>
         {% endif %}
         

data/_includes/head.html

@@ -15,7 +15,7 @@
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
 
     <!-- RSS -->
-    <link rel="alternate" type="application/atom+xml" title="{{ site.theme_settings.title }}" href="{{ 'feed.xml' | absolute_url }}"/>
+    <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ 'feed.xml' | absolute_url }}"/>
     
     {% if page.bootstrap %}
     <!-- Bootstrap-4.1.3 isolation CSS -->
@@ -37,30 +37,29 @@
 
     <!-- Google Analytics -->
     {% if site.theme_settings.google_analytics %}
+    <!-- Global site tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.theme_settings.google_analytics }}"></script>
     <script>
-        (function(i, s, o, g, r, a, m) {
-            i['GoogleAnalyticsObject'] = r;
-            i[r] = i[r] || function() {
-                (i[r].q = i[r].q || []).push(arguments)
-            }, i[r].l = 1 * new Date();
-            a = s.createElement(o),
-                m = s.getElementsByTagName(o)[0];
-            a.async = 1;
-            a.src = g;
-            m.parentNode.insertBefore(a, m)
-        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-
-        ga('create', '{{ site.theme_settings.google_analytics }}', 'auto');
-        ga('send', 'pageview');
-
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '{{ site.theme_settings.google_analytics }}');
     </script>
-    {% endif %}
     
+    <!-- Page analysis (analytics.js) -->
+    <script async src='https://www.google-analytics.com/analytics.js'></script>
+    <script>
+      window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+      ga('create', '{{ site.theme_settings.google_analytics }}', 'auto');
+      ga('send', 'pageview');
+    </script>
+    {% endif %} <!-- End Google Analytics -->
+
     <!-- seo tags -->
     {% seo %}
     <!-- Manual seo tags -->
     <!--
-    <title>{% if page.title %}{{ page.title }} |{% endif %} {{ site.theme_settings.title }}</title>
+    <title>{% if page.title %}{{ page.title }} |{% endif %} {{ site.title }}</title>
     <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.theme_settings.description }}{% endif %}">
     -->
 </head>

data/_includes/navbar.html

@@ -7,8 +7,8 @@
 		</a>
 
 		<h1 class="site-title">
-			<a aria-label="{{ site.theme_settings.title }}" href="{{ '/' | relative_url }}">
-        {{ site.theme_settings.title }}
+			<a aria-label="{{ site.title }}" href="{{ '/' | relative_url }}">
+        {{ site.title }}
       </a>
 		</h1>
 	</div>

data/_includes/post_info.html

@@ -0,0 +1,22 @@
+{%- assign author-id = include.post.author-id -%}
+
+{%- assign author_name = site.authors[author-id].name | default: author-id -%}
+{%- assign avatar = site.authors[author-id].avatar -%}
+{%- assign author_url = site.authors[author-id].url -%}
+{%- assign date = include.post.date -%}
+{%- if (author_url and (avatar or author_name)) -%}
+  {%- assign render_url = true -%}
+{%- else -%}
+  {%- assign render_url = false -%}
+{% endif %}
+
+<div class="post-info">
+  {%- if render_url -%}<a href="{{ author_url | relative_url }}" target="_blank">{%- endif -%}
+    {% if avatar %}
+      <img src="{{ avatar | relative_url }}">
+    {% endif %}
+    <p class="meta">
+      {% if author_name %}{{ author_name }} - {% endif %}{{ date | date: "%B %-d, %Y" }}
+    </p>
+  {%- if render_url -%}</a>{%- endif -%}
+</div>

data/_includes/post_nav.html

@@ -1,18 +1,19 @@
 <div id="post-nav">
-  {% if page.previous.url %}
-  <div id="previous-post" class="post-nav-post">
-      <p>{{ site.theme_settings.str_previous_post }}</p>
-      <a alt="{{ page.previous.title }}" href="{{ page.previous.url | relative_url }}">
-        {{ page.previous.title }}
-      </a>
-  </div>
-  {% endif %}
-  {% if page.next.url %}
-  <div id="next-post" class="post-nav-post">
-      <p>{{ site.theme_settings.str_next_post }}</p>
-      <a alt="{{ page.next.title }}" href="{{ page.next.url | relative_url }}">
-        {{ page.next.title }}
-      </a>
-  </div>
-  {% endif %}
+    {% if page.next.url %}
+    <div id="previous-post">
+        <p>{{ site.theme_settings.str_next_post }}</p>
+        <a alt="{{ page.next.title }}" href="{{ page.next.url | relative_url }}">
+            {{ page.next.title }}
+        </a>
+    </div>
+    {% endif %}
+    {% if page.previous.url %}
+
+    <div id="next-post">
+        <p>{{ site.theme_settings.str_previous_post }}</p>
+        <a alt="{{ page.previous.title }}" href="{{ page.previous.url | relative_url }}">
+            {{ page.previous.title }}
+        </a>
+    </div>
+    {% endif %}
 </div>

data/_includes/share_buttons.html

@@ -15,13 +15,6 @@
 			<span class="sr-only">{{ site.theme_settings.str_tweet }}</span>
 		</a>
         </li>
-        {% endif %} {% if site.theme_settings.share_buttons.google_plus %}
-        <li>
-            <a href="https://plus.google.com/share?url={{ page.url | absolute_url }}" target="_blank" title="{{ site.theme_settings.str_share_on }} Google+">
-			<i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i>
-			<span class="sr-only">{{ site.theme_settings.str_share_on }} Google+</span>
-		</a>
-        </li>
         {% endif %} {% if site.theme_settings.share_buttons.tumblr %}
         <li>
             <a href="http://www.tumblr.com/share?v=3&u={{ page.url | absolute_url }}&quote={{ page.title | url_encode }}%20%7C%20{{ site.title | url_encode }}&s=" target="_blank" title="{{ site.theme_settings.str_share_on }} Tumblr">
@@ -73,4 +66,4 @@
         </li>
         {% endif %}
     </ul>
-</div>
+</div>

data/_layouts/feed.xml

@@ -1,13 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+<rss version="2.0"
+    xmlns:atom="http://www.w3.org/2005/Atom"
+    xmlns:webfeeds="http://webfeeds.org/rss/1.0">
     <channel>
-        <title>{{ site.theme_settings.title | xml_escape }}</title>
+        <title>{{ site.title | xml_escape }}</title>
         <atom:link href="{{ "/feed.xml" | absolute_url }}" rel="self" type="application/rss+xml"/>
         <link>{{ "/" | absolute_url }}</link>
-        <description>{{ site.theme_settings.description | xml_escape }}</description>
+        <description>{{ site.description | xml_escape }}</description>
         <pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
+        <webfeeds:icon>{{ site.theme_settings.avatar | absolute_url }}</webfeeds:icon>
         {% for post in site.posts limit:15 %}
         <item>
+            {% if post.thumbnail %}
+                <enclosure length="1" type="image" url="{{ post.thumbnail | absolute_url }}"/>
+            {% endif %}
             <title>{{ post.title | xml_escape }}</title>
             <link>{{ post.url | absolute_url }}</link>
             <guid isPermaLink="false">{{ post.url | relative_url }}</guid>