Performance optimization: progressive images, inlining critical CSS, …

…async CSS, changed logo to SVG, minify HTML

.gitignore

@@ -2,8 +2,10 @@
 .bundle
 .sass-cache
 _site
+_img
 Gemfile.lock
 
+
 # OS Generated files #
 ######################
 *.DS_Store
@@ -48,13 +50,6 @@ build/
 build-iPhoneOS/
 build-iPhoneSimulator/
 
-
-## Documentation cache and generated files:
-/.yardoc/
-/_yardoc/
-/doc/
-/rdoc/
-
 ## Environment normalization:
 /.bundle/
 /vendor/bundle

404.md

@@ -1,7 +1,6 @@
 ---
 layout: page
-title: 404 Error
-permalink: /404/
+title: Page not found
 ---
 
 Try got get back to the Home Page and start over!

README.md

@@ -1,3 +1,5 @@
+[![Gem Version](https://badge.fury.io/rb/jekyll-sleek.svg)](https://badge.fury.io/rb/jekyll-sleek)
+
 # Sleek
 
 Sleek is a modern Jekyll theme focused on speed performance & SEO best practices. In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.

_config.yml

@@ -5,6 +5,8 @@ description: > # this means to ignore newlines until "baseurl:"
   Write an awesome description for your new site here. You can edit this
   line in _config.yml. It will appear in your document head meta (for
   Google search results) and in your feed.xml site description.
+baseurl: "/" # the subpath of your site, e.g. /blog
+url: "https://janczizikow.github.io/sleek" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: jekyllrb
 github_username:  jekyll
 instagram_username: shanlongjj
@@ -18,11 +20,6 @@ social:
     - https://github.com/benbalter
     - https://keybase.io/benbalter
 
-# If you want to link only specific pages in your header, uncomment
-# this and add the path to the pages in order as they should show up
-#header_pages:
-# - about.html
-
 disqus:
   shortname: janczizikow
 
@@ -37,11 +34,14 @@ exclude:
   - Gemfile
   - Gemfile.lock
   - vendor
+  - npm-debug.log
+
 include: ['_pages']
 permalink: /:title/
 
+compress_html:
+  clippings: all
+
 plugins:
   - jekyll-sitemap
   - jekyll-seo-tag
-# compress_html:
-#   clippings: all

_includes/card.html

@@ -0,0 +1,31 @@
+<a class="post-card" href="{{ post.url | relative_url }}" itemprop="blogPosts" itemscope="" itemtype="http://schema.org/BlogPosting">
+  {% if post.featured-img %}
+  <div class="post-card__thumb">
+    <img
+      src="/assets/img/posts/{{post.featured-img}}_placehold.jpg",
+      data-srcset="/assets/img/posts/{{post.featured-img}}_thumb.jpg, /assets/img/posts/{{post.featured-img}}[email protected] 2x"
+      class="lazyload blur-up"
+      alt="{{post.title}}"
+    />
+    <noscript><img src="/assets/img/posts/{{post.featured-img}}_thumb.jpg" alt="{{ post.title }}"></noscript>
+  </div>
+  {% else %}
+  <figure class="post-card__thumb">
+    <!-- <img src="./assets/img/shane-rounce-205187.jpg" alt="{{post.title}}"/> -->
+  </figure>
+  {% endif %}
+  <div class="post-card__inner">
+    <div class="post-card__header">
+      <h2>{{ post.title | strip_html | truncate: 50 }}</h2>
+      {% assign date_format = site.sleek.date_format | default: "%b %-d, %Y" %}
+      <span class="post-card__meta">
+        <time>{{ post.date | date: date_format }}</time>
+      </span>
+    </div>
+    {% if post.summary %}
+      <p>{{ post.summary | strip_html | truncatewords:20 }}</p>
+    {% else %}
+      <p>{{ post.content | strip_html | truncatewords: 20 }}</p>
+    {% endif %}
+  </div>
+</a>

_includes/ga.html → _includes/gtm.html

@@ -1,9 +1,9 @@
 <!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_tag_manager }}"></script>
 <script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
 
-  gtag('config', '{{ site.google_analytics }}');
+  gtag('config', '{{ site.google_tag_manager }}');
 </script>

_includes/head.html

@@ -5,6 +5,40 @@
 
   {% seo %}
 
-  <style class="inlineCSS">{% include critical.css %}</style>
-  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+  <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/icons/apple-touch-icon.png?v=qA3OXqyw77">
+  <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/icons/favicon-32x32.png?v=qA3OXqyw77">
+  <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/icons/favicon-16x16.png?v=qA3OXqyw77">
+  <link rel="manifest" href="/assets/img/icons/manifest.json?v=qA3OXqyw77">
+  <link rel="mask-icon" href="/assets/img/icons/safari-pinned-tab.svg?v=qA3OXqyw77" color="#5bbad5">
+  <!--[if IE]><link rel="shortcut icon" href="/assets/img/icons/favicon.ico?v=qA3OXqyw77"><![endif]-->
+  <link rel="shortcut icon" href="/assets/img/icons/favicon.ico?v=qA3OXqyw77">
+  <meta name="apple-mobile-web-app-title" content="Sleek">
+  <meta name="application-name" content="Sleek">
+  <meta name="msapplication-config" content="/assets/img/icons/browserconfig.xml?v=qA3OXqyw77">
+  <meta name="theme-color" content="#ffffff">
+
+  {% if site.google_tag_manager %}
+
+    {% include gtm.html %}
+
+  {% endif %}
+
+  <style class="inlineCSS">
+
+    {% include critical.css %}
+
+  </style>
+  <link rel="preload" href="{{ '/assets/css/main.css' | relative_url }}" as="style" onload="this.rel='stylesheet'">
+  <noscript><link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}"></noscript>
+  <script type="text/javascript">
+  /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
+  (function(w){"use strict";if(!w.loadCSS){w.loadCSS=function(){}}
+  var rp=loadCSS.relpreload={};rp.support=(function(){var ret;try{ret=w.document.createElement("link").relList.supports("preload")}catch(e){ret=!1}
+  return function(){return ret}})();rp.bindMediaToggle=function(link){var finalMedia=link.media||"all";function enableStylesheet(){link.media=finalMedia}
+  if(link.addEventListener){link.addEventListener("load",enableStylesheet)}else if(link.attachEvent){link.attachEvent("onload",enableStylesheet)}
+  setTimeout(function(){link.rel="stylesheet";link.media="only x"});setTimeout(enableStylesheet,3000)};rp.poly=function(){if(rp.support()){return}
+  var links=w.document.getElementsByTagName("link");for(var i=0;i<links.length;i++){var link=links[i];if(link.rel==="preload"&&link.getAttribute("as")==="style"&&!link.getAttribute("data-loadcss")){link.setAttribute("data-loadcss",!0);rp.bindMediaToggle(link)}}};if(!rp.support()){rp.poly();var run=w.setInterval(rp.poly,500);if(w.addEventListener){w.addEventListener("load",function(){rp.poly();w.clearInterval(run)})}else if(w.attachEvent){w.attachEvent("onload",function(){rp.poly();w.clearInterval(run)})}}
+  if(typeof exports!=="undefined"){exports.loadCSS=loadCSS}
+  else{w.loadCSS=loadCSS}}(typeof global!=="undefined"?global:this))
+  </script>
 </head>

_includes/header.html

@@ -1,22 +1,20 @@
 <header class="header" itemscope itemtype="http://schema.org/SiteNavigationElement" aria-label="Main navigation">
   <div class="container">
     <div class="header__inner">
-      <a class="header__logo" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
+      <a class="header__logo" href="{{ '/' | relative_url }}">
+        <div class="header__logo--container">
+          {% include logo.svg %}
+        </div>
+      </a>
       <nav class="header__links">
-        <a href="/about" itemprop="url"><span itemprop="name">About</span></a>
-        <a href="/contact" itemprop="url"><span itemprop="name">Contact</span></a>
-        {% if page_paths %}
-          {% for path in page_paths %}
-            {% assign my_page = site.pages | where: "path", path | first %}
-            {% if my_page.title %}
-              {% if my_page.title contains "404" %}
-              {% else %}
-                <a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
-              {% endif %}
-            {% endif %}
-          {% endfor %}
-        {% endif %}
+        <a href="{{ '/about' | relative_url }}" itemprop="url"><span itemprop="name">About</span></a>
+        <a href="{{ '/contact' | relative_url }}" itemprop="url"><span itemprop="name">Contact</span></a>
       </nav>
+      <div class="header__toggle">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
     </div>
   </div>
 </header>

_includes/pagination.html

@@ -0,0 +1,3 @@
+<nav class="pagination">
+  <a href="#" class="pagination__item">1</a>
+</nav>