Refactor base layouts

- DRY up layouts by creating `default` - Use relative and absolute URL filters to fix links
mmistakes · Jan 19, 2018 · 2ac4034 · 2ac4034
1 parent 17abc3f
commit 2ac4034
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 124 deletions.
diff --git a/_includes/head-feed.html b/_includes/head-feed.html
@@ -0,0 +1 @@
+<link rel="alternate" type="application/atom+xml" title="{{ site.title | escape }}" href="{{ site.feed.path | default: 'feed.xml' | relative_url }}">
diff --git a/_includes/head-seo.html b/_includes/head-seo.html
@@ -0,0 +1 @@
+{% seo %}
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,48 +1,37 @@
-<meta charset="utf-8">
-<title>{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}</title>
-{% if page.excerpt %}<meta name="description" content="{{ page.excerpt | strip_html }}">{% endif %}
-{% if page.tags %}<meta name="keywords" content="{{ page.tags | join: ', ' }}">{% endif %}
-{% if page.author %}
- {% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.owner %}
-{% endif %}
-
-{% include open-graph.html %}
-
-{% if site.owner.google.verify %}<!-- Webmaster Tools verfication -->
-<meta name="google-site-verification" content="{{ site.owner.google.verify }}">{% endif %}
-{% if site.owner.bing-verify %}<meta name="msvalidate.01" content="{{ site.owner.bing-verify }}">{% endif %}
-
-{% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %}
-<link rel="canonical" href="{{ canonical }}">
-<link href="{{ site.url }}/feed.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
-
-<!-- https://t.co/dKP3o1e -->
-<meta name="HandheldFriendly" content="True">
-<meta name="MobileOptimized" content="320">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-<!-- For all browsers -->
-<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
-<!-- Webfonts -->
-<script src="https://use.edgefonts.net/source-sans-pro:n2,i2,n3,i3,n4,i4,n6,i6,n7,i7,n9,i9;source-code-pro:n4,n7;volkhov.js"></script>
-
-<meta http-equiv="cleartype" content="on">
-
-{% if site.mathjax == true %}
-<!-- MathJax -->
-<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
-{% endif %}
-
-<!-- Icons -->
-<!-- 16x16 -->
-<link rel="shortcut icon" href="{{ site.url }}/favicon.ico">
-<!-- 32x32 -->
-<link rel="shortcut icon" href="{{ site.url }}/favicon.png">
-<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
-<link rel="apple-touch-icon-precomposed" href="{{ site.url }}/images/apple-touch-icon-precomposed.png">
-<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ site.url }}/images/apple-touch-icon-72x72-precomposed.png">
-<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ site.url }}/images/apple-touch-icon-114x114-precomposed.png">
-<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.url }}/images/apple-touch-icon-144x144-precomposed.png">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ {% if site.owner.google.verify %}<meta name="google-site-verification" content="{{ site.owner.google.verify }}">{% endif %}
+ {% if site.owner.bing-verify %}<meta name="msvalidate.01" content="{{ site.owner.bing-verify }}">{% endif %}
+
+ {% if site.plugins contains 'jekyll-seo-tag' or site.gems contains 'jekyll-seo-tag' %}
+ {% comment %}
+ Add metadata for search engines and social networks if jekyll-seo-tag plugin is enabled
+ {% endcomment %}
+ {% include head-seo.html %}
+ {% else %}
+ <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
+ <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+ <link rel="canonical" href="{{ page.url | replace:'index.html', '' | absolute_url }}">
+ {% endif %}
+
+ <script>
+ /* Cut the mustard */
+ if ( 'querySelector' in document && 'addEventListener' in window ) {
+ document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + 'js';
+ }
+ </script>
+
+ <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+ {% if site.data.theme.google_fonts %}
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={% for font in site.data.theme.google_fonts %}{{ font.name | replace: ' ', '+' }}{% if font.weights %}:{% endif %}{{ font.weights | remove: ' ' }}{% if forloop.last != true %}|{% endif %}{% endfor %}">
+ {% endif %}
+
+ {% if site.plugins contains 'jekyll-feed' or site.gems contains 'jekyll-feed'%}
+ {% comment %}
+ Add Atom feed link if jekyll-feed plugin is enabled
+ {% endcomment %}
+ {% include head-feed.html %}
+ {% endif %}
+</head>
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -2,12 +2,12 @@
  <nav role="navigation" id="site-nav" class="animated drop">
  <ul>
  {% for link in site.data.navigation %}
- {% if link.url contains 'http' %}
-  {% assign domain = '' %}
-  {% else %}
-  {% assign domain = site.url %}
+ {% if link.url contains '://' %}
+  {% assign url = link.url %}
+ {% else %}
+  {% assign url = link.url | relative_url %}
  {% endif %}
- <li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
+ <li><a href="{{ url }}">{{ link.title }}</a></li>
  {% endfor %}
  </ul>
  </nav>

diff --git a/_includes/open-graph.html b/_includes/open-graph.html
diff --git a/_includes/scripts.html b/_includes/scripts.html
@@ -22,3 +22,9 @@
  })();
 </script>
 {% endif %}
+
+{% if site.mathjax == true %}
+<!-- MathJax -->
+<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+{% endif %}
+
diff --git a/_includes/skip-links.html b/_includes/skip-links.html
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--
+ So Simple Jekyll Theme 3.0.0
+ Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
+ Free for personal and commercial use under the MIT license
+ https://github.com/mmistakes/so-simple-theme/blob/master/LICENSE
+-->
+<html lang="{{ page.lang | default: site.lang | default: 'en-US' }}" class="no-js">
+ {% include head.html %}
+
+ <body class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %} {{ page.title | slugify }}">
+ {% include skip-links.html %}
+ {% include navigation.html %}
+
+ {{ content }}
+
+ <div class="footer-wrapper">
+ <footer role="contentinfo" class="entry-wrapper">
+ {% include footer.html %}
+ </footer>
+ </div><!-- /.footer-wrapper -->
+
+ {% include scripts.html %}
+ </body>
+
+</html>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -1,19 +1,10 @@
-<!doctype html>
-<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
-<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
-<head>
-{% include head.html %}
-</head>
-
-<body id="page">
-
-{% include navigation.html %}
+---
+layout: default
+---
 
 <div id="main" role="main">
  <article class="entry">
- {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></p>{% endif %}{% endif %}
+ {% if page.image.feature %}<img src="{{ page.image.feature | prepend: '/images/' | absolute_url }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></p>{% endif %}{% endif %}
  <div class="entry-wrapper">
  <header class="entry-header">
  <h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}{% endif %}</h1>
@@ -24,14 +15,3 @@ <h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ pa
  </div><!-- /.entry-wrapper -->
  </article>
 </div><!-- /#main -->
-
-<div class="footer-wrapper">
- <footer role="contentinfo" class="entry-wrapper">
- {% include footer.html %}
- </footer>
-</div><!-- /.footer-wrapper -->
-
-{% include scripts.html %}
-
-</body>
-</html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,23 +1,14 @@
-<!doctype html>
-<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
-<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
-<head>
-{% include head.html %}
-</head>
-
-<body id="post">
-
-{% include navigation.html %}
+---
+layout: default
+---
 
 <div id="main" role="main">
  <article class="hentry">
- {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Image credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></p>{% endif %}{% endif %}
+ {% if page.image.feature %}<img src="{{ page.image.feature | prepend: '/images/' | absolute_url }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Image credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></p>{% endif %}{% endif %}
  <div class="entry-wrapper">
  <header class="entry-header">
  <ul class="entry-tags">
- {% for tag in page.tags %}<li><a href="{{ site.url }}/tags/#{{ tag }}" title="Pages tagged {{ tag }}">{{ tag }}</a></li>{% endfor %}
+ {% for tag in page.tags %}<li><a href="{{ tag | prepend: '/tags/#' | relative_url }}" title="Pages tagged {{ tag }}">{{ tag }}</a></li>{% endfor %}
  </ul>
  {% if page.link %}
  <h1 class="entry-title"><a href="{{ page.link }}">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}{% endif %} <span class="link-arrow">&rarr;</span></a></h1>
@@ -32,7 +23,7 @@ <h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ pa
  {% if author.avatar contains 'http' %}
  <img src="{{ author.avatar }}" class="bio-photo" alt="{{ author.name }} bio photo"/>
  {% elsif author.avatar %}
- <img src="{{ site.url }}/images/{{ author.avatar }}" class="bio-photo" alt="{{ author.name }} bio photo"/>
+ <img src="{{ author.avatar | prepend: '/images/' | relative_url }}" class="bio-photo" alt="{{ author.name }} bio photo"/>
  {% endif %}
  <span class="author vcard">By <span class="fn">{{ author.name }}</span></span>
  <span class="entry-date date published"><time datetime="{{ page.date | date_to_xmlschema }}"><i class="fa fa-calendar-o"></i> {{ page.date | date: "%B %d, %Y" }}</time></span>
@@ -51,22 +42,11 @@ <h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ pa
  </div><!-- /.entry-wrapper -->
  <nav class="pagination" role="navigation">
  {% if page.previous %}
- <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous</a>
+ <a href="{{ page.previous.url | relative_url }}" class="btn" title="{{ page.previous.title }}">Previous</a>
  {% endif %}
  {% if page.next %}
- <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next</a>
+ <a href="{{ page.next.url | relative_url }}" class="btn" title="{{ page.next.title }}">Next</a>
  {% endif %}
  </nav><!-- /.pagination -->
  </article>
 </div><!-- /#main -->
-
-<div class="footer-wrapper">
- <footer role="contentinfo" class="entry-wrapper">
- {% include footer.html %}
- </footer>
-</div><!-- /.footer-wrapper -->
-
-{% include scripts.html %}
-
-</body>
-</html>