Add Favicons, Add Head Macro, 404 noindex, config.toml Resources, Whitespace Cleanup

30 files changed, 563 insertions, 408 deletions

diff --git a/config.toml b/config.toml
index f095616..31b3efb 100644
--- a/config.toml
+++ b/config.toml
@@ -29,18 +29,19 @@ external_links_no_referrer = false # rel="noreferrer"
 smart_punctuation = false          # `...` to `…`, `"quote"` to `“curly”` etc
 
 [extra]
+language_code = "en-US"
 author = "Your Name"
-author_show = true # displays the author name below the title after the date, tags, categories
-readtime = true # displays the read time below the title after the date, tags, categories
+author_show = true # displays the author name on line with date, tags, categories
+readtime = true # displays the read time on line with date, tags, categories
+readtime_string = "min" # read time indication eg "min": - 1 min  "min read": - 1 min read
 recent = true
 recent_items = 9
 footer_credit = true
-#google = "Your Google Site verification code."
-#bing = "Your Bing Site verification code."
+
 textlogo = '<font color="#f90">A</font>bridge'
 sitedesc = false # enables or disables the display of the site description below the logo.
-favicon = "favicon.png"
-banner = "banner.png"
+#copyright_start_year = 2019  # optional
+#copyright_end_year = 2020  # optional, recommend leaving unset, zola build will set this to current year by default
 menu = [
     {url = "/", name = "Home", slash = true},
     {url = "/about/", name = "About", slash = true},
@@ -55,26 +56,48 @@ menu_footer = [
     {url = "/privacy/", name = "Privacy", slash = true},
     {url = "/sitemap.xml", name = "Sitemap", slash = false},
 ]
-#copyright_start_year = 2019  # optional
-#copyright_end_year = 2020  # optional, recommend leaving unset, zola build will set this to current year by default
 
-# meta tags
-keywords = "Whatever, SEO, keywords, you want"
-twitter = "your-user-name"
-seo = true  # enable or disable seo-related meta tags: opengraph, facebook, twitter
+
+#################
+# Resource Files
+#################
+banner = "banner.png" # Used as default image for OpenGraph/Twitter if page specific image is undefined.
+stylesheet = "abridge.css" # location and file to use for stylesheet
+js_search_index ="search_index.en.js"
+js_search = "search.min.js"
+rss_atom_feed = "atom.xml"
 
 # For externally loaded fonts make sure the include the FULL url including the http/https prefix
 fonts_load = false
 fonts = [
     {url = "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro"},
     {url = "https://fonts.googleapis.com/css?family=Merriweather:300,400|Montserrat:400,700"},
-    {url = "FiraCode-Bold.woff2"},
-    {url = "FiraCode-Regular.woff2"},
+    {url = "font/FiraCode-Bold.woff2"},
+    {url = "font/FiraCode-Regular.woff2"},
 ]
 
+# favicons, comment out a line to disable loading some or all of these.
+favicon_theme_color = "#333333"
+favicon_ms_color = "#333333"
+favicon_webmanifest = "site.webmanifest" # Used for android-chrome-512x512.png and android-chrome-192x192.png
+favicon_mask = "safari-pinned-tab.svg" # safari-pinned-tab.svg
+favicon_mask_color = "#ff9900"
+favicon180 = "apple-touch-icon.png" # apple-touch-icon.png
+favicon32 = "favicon-32x32.png" # favicon-32x32.png
+favicon16 = "favicon-16x16.png" # favicon-16x16.png
+
 katex_enable = false # used to to render mathematical notations, requires js
 katex_auto_render = false
 
+##########################
+# meta/seo/analytic tags
+##########################
+keywords = "Whatever, SEO, keywords, you want" # used for the primary site index
+twitter = "your-user-name" # used for twitter related
+#google = "Your Google Site verification code."
+#bing = "Your Bing Site verification code."
+seo = true  # enable or disable seo-related meta tags: opengraph, facebook, twitter
+
 # Footer social links; full options listed in macros/social.html
 [extra.social]
 feed = true
diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png
new file mode 100644
index 0000000..fc9c419
--- /dev/null
+++ b/static/android-chrome-192x192.png
diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png
new file mode 100644
index 0000000..f8df883
--- /dev/null
+++ b/static/android-chrome-512x512.png
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
new file mode 100644
index 0000000..c603b5b
--- /dev/null
+++ b/static/apple-touch-icon.png
diff --git a/static/banner.png b/static/banner.png
new file mode 100644
index 0000000..7dd3a54
--- /dev/null
+++ b/static/banner.png
diff --git a/static/browserconfig.xml b/static/browserconfig.xml
new file mode 100644
index 0000000..c76c07c
--- /dev/null
+++ b/static/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#333333</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png
new file mode 100644
index 0000000..46673b3
--- /dev/null
+++ b/static/favicon-16x16.png
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
new file mode 100644
index 0000000..7f30ec9
--- /dev/null
+++ b/static/favicon-32x32.png
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..c412603
--- /dev/null
+++ b/static/favicon.ico
diff --git a/static/favicon.png b/static/favicon.png
deleted file mode 100644
index 10dd64a..0000000
--- a/static/favicon.png
+++ /dev/null
diff --git a/static/FiraCode-Bold.woff2 b/static/font/FiraCode-Bold.woff2
index 05eb043..05eb043 100644
--- a/static/FiraCode-Bold.woff2
+++ b/static/font/FiraCode-Bold.woff2
diff --git a/static/FiraCode-Regular.woff2 b/static/font/FiraCode-Regular.woff2
index ab47287..ab47287 100644
--- a/static/FiraCode-Regular.woff2
+++ b/static/font/FiraCode-Regular.woff2
diff --git a/static/mstile-150x150.png b/static/mstile-150x150.png
new file mode 100644
index 0000000..448313f
--- /dev/null
+++ b/static/mstile-150x150.png
diff --git a/static/safari-pinned-tab.svg b/static/safari-pinned-tab.svg
new file mode 100644
index 0000000..40e7cc4
--- /dev/null
+++ b/static/safari-pinned-tab.svg
@@ -0,0 +1 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="682.7" height="682.7" viewBox="0 0 512 512"><path d="M0 256v256h512V0H0v256zm448 0v192H64V64h384v192z"/></svg>
\ No newline at end of file
diff --git a/static/site.webmanifest b/static/site.webmanifest
new file mode 100644
index 0000000..b20abb7
--- /dev/null
+++ b/static/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/templates/404.html b/templates/404.html
index 3b02be6..401d657 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,23 +1,24 @@
 {% extends "base.html" %}
-{# Title #}
-{% block title %}
-  <title>Sorry! Page not found.</title>
-{% endblock title %}
 
-{% block current_url %}
-  {% if config.extra.seo | default(value=true) %}
-    <meta property="og:url" content="{{ get_url(path='/') }}">
-    <meta name="twitter:url" content="{{ get_url(path='/') }}">
-  {% endif %}
-{% endblock current_url %}
+{%- block seo %}
+  {{ super() }}
+  {%- set title = "404 Page not found" %}
 
-{# Page heading #}
+  {%- if config.title %}
+    {%- set title_addition = title_separator ~ config.title %}
+  {%- else %}
+    {%- set title_addition = "" %}
+  {%- endif %}
 
-{% block content %}
-  <div>
-    <h1>404 Error</h1>
-    <h2>Sorry</h2>
-    <p>The requested page does not exist or has been moved to another address.</p>
-    <p>Please go back to <a href="{{ get_url(path="/", trailing_slash=true) }}">home</a>.</p>
-  </div>
-{% endblock content %}
+  {%- set description = config.description %}
+
+  {{- macros_head::seo(title=title, title_addition=title_addition, description=description, is_404=true) }}
+{%- endblock seo %}
+
+{%- block content %}
+    <div>
+      <h1>Page not found :(</h1>
+      <p>The page you are looking for doesn't exist or has been moved.</p>
+      <p>Try using the search, or <a href="{{ get_url(path="/", trailing_slash=true) }}">go home</a>.</p>
+    </div>
+{%- endblock content %}
diff --git a/templates/base.html b/templates/base.html
index e811e33..237bf41 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,158 +1,32 @@
-{% import "macros/social.html" as social_macros %}
+{%- import 'macros/head.html' as macros_head %}
+{%- import "macros/social.html" as social_macros %}
+{%- import "macros/page.html" as page_macros %}
+{%- import "macros/macros.html" as macros %}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ config.extra.language_code | default(value="en-US") }}">
 <head>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-  {% block title %}<title>{% if page.title %}{{ page.title }} | {% endif %}{{ config.title }}</title>{% endblock title %}
-
-  {% if is_404 %}
-    <meta name="robots" content="noindex, follow">
-  {% else %}
-    <meta name="robots" content="index, follow">
-    <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
-    <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
-  {% endif %}
-  {% if current_url %}
-      {% set page_url = current_url %}
-  {% else %}
-      {% set page_url = get_url(path="404.html") %}
-  {% endif %}
-  {% if current_path %}
-      {% set page_path = current_path %}
-  {% else %}
-      {% set page_path = "/404.html" %}
-  {% endif %}
-
-  {% block description %}
-    {% if page.description %}
-      <meta name="description" content="{{ page.description }}" />
-
-      {% if config.extra.seo | default(value=true) %}
-        <meta name="twitter:description" content="{{ page.description }}">
-        <meta property="og:description" content="{{ page.description }}">
-      {% endif %}
-
-    {% else %}
-      <meta name="description" content="{{ config.description }}" />
-
-      {% if config.extra.seo | default(value=true) %}
-        <meta name="twitter:description" content="{{ config.description}}">
-        <meta property="og:description" content="{{ config.description }}">
-      {% endif %}
-
-    {% endif %}
-  {% endblock description %}
-
-  {% if page.extra.keywords %}
-    <meta name="keywords" content="{{ page.extra.keywords }}, {{ config.extra.keywords }}">
-  {% else %}
-    <meta name="keywords" content="{{ config.extra.keywords }}">
-  {% endif %}
-
-  <meta name="author" content="{{ config.extra.author }}">
-  <meta name="copyright" content="{{ config.title }}">
-
-  {% if config.extra.google %}<meta name="google-site-verification" content="{{ config.extra.google | safe }}">{% endif %}
-  {% if config.extra.bing %}<meta name="msvalidate.01" content="{{ config.extra.bing | safe}}">{% endif %}
+  {{- macros_head::resource() }}
+  {{- macros_head::stylesheet() }}
+  {%- block seo %}
+    {%- if config.extra.title_separator %}
+      {%- set title_separator = " " ~ config.extra.title_separator ~ " " -%}
+    {%- else %}
+      {%- set title_separator = " | " -%}
+    {%- endif %}
+  {%- endblock seo %}
+  {{- macros_head::favicons() }}
   <meta name="referrer" content="no-referrer-when-downgrade">
-
   <meta name="HandheldFriendly" content="True">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="default">
-
-  {% block css %}<link rel="stylesheet" href="{{ get_url(path="abridge.css", trailing_slash=false, cachebust=true) }}">{% endblock css %}
-
-  {% if config.extra.favicon %}
-    <link rel="shortcut icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}" sizes="16x16" type="image/png"/>
-  {% endif %}
-
-  <link rel="canonical" href="{{ get_url(path="/") }}">
-  {% if config.generate_feed %}<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="atom.xml") }}">{% endif %}
-
-  {% if config.extra.seo | default(value=true) %}
-    {% block ogp_head %}
-      {% if page.title %}
-        <meta property="og:title" content="{{ page.title }} | {{ config.title }}">
-        <meta name="twitter:title" content="{{ page.title }} | {{ config.title }}">
-      {% else %}
-        <meta property="og:title" content="{{ config.title }}">
-        <meta name="twitter:title" content="{{ config.title }}">
-      {% endif %}
-
-      <meta property="og:site_name" content="{{ config.title }}">
-      <meta property="og:locale" content="en_US">
-      <meta property="og:type" content="website">
-      <meta property="og:updated_time" content="{{ now() }}">
-    {% endblock ogp_head %}
-
-    {% block current_url %}
-      <meta property="og:url" content="{{ current_url | safe }}">
-      <meta name="twitter:url" content="{{ current_url | safe }}">
-    {% endblock current_url %}
-
-    {% if config.extra.social.twitter %}
-      <meta name="twitter:site" content="@{{ config.extra.twitter }}">
-      <meta name="twitter:creator" content="@{{ config.extra.twitter }}">
-    {% endif %}
-
-    {% if page.extra.thumbnail %}
-      <meta name="twitter:card" content="summary_large_image">
-      <meta name="twitter:image" content="{{ get_url(path=page.path ~ page.extra.thumbnail, trailing_slash=false) }}">
-      <meta property="og:image" content="{{ get_url(path=page.path ~ page.extra.thumbnail, trailing_slash=false) }}">
-    {% elif page.extra.static_thumbnail %}
-      {%if page.extra.static_thumbnail is matching("^http[s]?://") %}
-        <meta name="twitter:card" content="summary_large_image">
-        <meta name="twitter:image" content="{{ page.extra.static_thumbnail }}">
-        <meta property="og:image" content="{{ page.extra.static_thumbnail }}">
-      {% else %}
-        <meta name="twitter:card" content="summary_large_image">
-        <meta name="twitter:image" content="{{ get_url(path=page.extra.static_thumbnail, trailing_slash=false) }}">
-        <meta property="og:image" content="{{ get_url(path=page.extra.static_thumbnail, trailing_slash=false) }}">
-      {% endif %}
-    {% elif config.extra.default_og_image %}
-      <meta name="twitter:card" content="summary_large_image">
-      <meta name="twitter:image" content="{{ get_url(path=config.extra.default_og_image, trailing_slash=false) }}">
-      <meta property="og:image" content="{{ get_url(path=config.extra.default_og_image, trailing_slash=false) }}">
-    {% elif config.extra.banner %}
-      <meta name="twitter:card" content="summary_large_image">
-      <meta name="twitter:image" content="{{ get_url(path=config.extra.banner, trailing_slash=false) }}">
-      <meta property="og:image" content="{{ get_url(path=config.extra.banner, trailing_slash=false) }}">
-    {% else %}
-      <meta name="twitter:card" content="summary">
-    {% endif %}
-  {% endif %}
-
-  {% if config.extra.fonts_load %}
-    {% for i in config.extra.fonts %}
-      {% if 'http' in i.url %}
-        <link rel="preload" href="{{ i.url | safe }}" as="style">
-      {% else %}
-        <link rel="preload" href="{{ get_url(path=i.url, trailing_slash=false, cachebust=true) }}" as="style">
-      {% endif %}
-    {% endfor %}
-  {% endif %}
-
-  {% if config.build_search_index %}
-    <script defer type="text/javascript" src="{{ get_url(path="search_index.en.js", trailing_slash=false, cachebust=true) | safe }}"></script>
-    <script defer type="text/javascript" src="{{ get_url(path="search.min.js", trailing_slash=false, cachebust=true) | safe }}"></script>
-  {% endif %}
-
-  {% if config.extra.katex_enabled %}
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
-  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/mathtex-script-type.min.js" integrity="sha384-jiBVvJ8NGGj5n7kJaiWwWp9AjC+Yh8rhZY3GtAX8yU28azcLgoRo4oukO87g7zDT" crossorigin="anonymous"></script>
-  {% if config.extra.katex_auto_render %}
-  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
-  {% endif %}
-  {% endif %}
-{% block extra_head %}{% endblock extra_head %}
+  {{- macros_head::math() }}
 </head>
 <body>
-{% block header %}
+{%- block header %}
   <header>
     <nav>
       <header>
@@ -160,49 +34,57 @@
       </header>
       <div>
         <ul>
-          {% for i in config.extra.menu %}<li><h2><a href="{{ get_url(path=i.url, trailing_slash=i.slash) }}">{{ i.name }}</a></h2></li>{% endfor %}
+          {%- for i in config.extra.menu %}
+          <li><h2><a href="{{ get_url(path=i.url, trailing_slash=i.slash) }}">{{ i.name }}</a></h2></li>
+          {%- endfor %}
         </ul>
       </div>
-      {% if config.build_search_index %}
-        <div>
-          <form>
-            <input id="userinput" type="search" placeholder="Search" autocomplete="off">
-            <div><div id="suggestions"></div></div>
-          </form>
-        </div>
-      {% endif %}
+      {%- if config.build_search_index %}
+      <div>
+        <form>
+          <input id="userinput" type="search" placeholder="Search" autocomplete="off">
+          <div><div id="suggestions"></div></div>
+        </form>
+      </div>
+      {%- endif %}
     </nav>
-    {% if config.extra.sitedesc %}
-      {% if config.description %}
-        <div>{{ config.description }}</div>
-      {% endif %}
-    {% endif %}
+    {%- if config.extra.sitedesc %}
+    {%- if config.description %}
+    <div>{{ config.description }}</div>
+    {%- endif %}
+    {%- endif %}
     <hr>
   </header>
-{% endblock header %}
-<main>
-{% block content %}
-{% endblock content %}
-</main>
-{% block footer %}
+{%- endblock header %}
+  <main>
+  {%- block content %}
+  {%- endblock content %}
+  </main>
+{%- block footer %}
   <footer>
     <hr>
     <center>
-      <p>{{ social_macros::social_links(social_config=config.extra.social) }}</p>
+      <p>
+        {{- social_macros::social_links(social_config=config.extra.social) }}
+      </p>
 
-      {# Copyright #}
-      {% set copyright_start_year=config.extra.copyright_start_year | default(value="") %}
-      {% if copyright_start_year %}{% set copyright_start_year=copyright_start_year ~ "-" %}{% endif %}
-      {% set copyright_end_year=config.extra.copyright_end_year | default(value=now() | date(format="%Y")) %}
-      <p>Copyright &copy; {{ copyright_start_year ~ copyright_end_year}} {{ config.title }}</p>
+      {#- Copyright START #}
+      {%- set copyright_start_year=config.extra.copyright_start_year | default(value="") %}
+      {%- if copyright_start_year %}{%- set copyright_start_year=copyright_start_year ~ "-" %}{%- endif %}
+      {%- set copyright_end_year=config.extra.copyright_end_year | default(value=now() | date(format="%Y")) %}
+      <p>Copyright &copy; {{ copyright_start_year ~ copyright_end_year }} {{ config.title }}</p>
+      {#- Copyright END #}
+      <p>
+        {%- for i in config.extra.menu_footer %}
+        <a href="{{ get_url(path=i.url, trailing_slash=i.slash) }}">{{ i.name }}</a> &nbsp;
+        {%- endfor %}
+      </p>
 
-      <p>{% for i in config.extra.menu_footer %}<a href="{{ get_url(path=i.url, trailing_slash=i.slash) }}">{{ i.name }}</a> &nbsp; {% endfor %}</p>
-      {# Optional footer credit #}
-      {% if config.extra.footer_credit | default(value=true) %}
-        <p>Powered by <a href="https://www.getzola.org/">Zola</a> and <a href="https://github.com/jieiku/abridge/">Abridge</a></p>
-      {% endif %}
+      {%- if config.extra.footer_credit | default(value=true) %}
+      <p>Powered by <a href="https://www.getzola.org/">Zola</a> and <a href="https://github.com/jieiku/abridge/">Abridge</a></p>
+      {%- endif %}
     </center>
   </footer>
-{% endblock footer %}
+{%- endblock footer %}
 </body>
 </html>
diff --git a/templates/categories/list.html b/templates/categories/list.html
index bce31fa..485d54d 100644
--- a/templates/categories/list.html
+++ b/templates/categories/list.html
@@ -1,16 +1,16 @@
 {% extends "base.html" %}
 
-{% block content %}
-<div>
-  <center>
-    <h1>{{ terms | length }} Categories</h1>
-    <p>{% for term in terms -%}[<a href="#{{ term.name }}">{{ term.name }}</a>] &nbsp; {%- endfor %}</p>
-  </center>
-  {% for term in terms -%}
-    <h2 id="{{ term.name }}"><a href="{{ term.permalink | safe }}">{{ term.name }}</a></h2>
-    {% for page in term.pages -%}
+{%- block content %}
+    <div>
+      <center>
+        <h1>{{ terms | length }} Categories</h1>
+        <p>{%- for term in terms %}[<a href="#{{ term.name }}">{{ term.name }}</a>] &nbsp; {%- endfor %}</p>
+      </center>
+      {%- for term in terms %}
+      <h2 id="{{ term.name }}"><a href="{{ term.permalink | safe }}">{{ term.name }}</a></h2>
+      {%- for page in term.pages %}
       <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat |	default(value="%B %e, %Y")) }}</time></p>
-    {% endfor -%}
-  {% endfor -%}
-</div>
-{% endblock content %}
+      {%- endfor %}
+      {%- endfor %}
+    </div>
+{%- endblock content %}
diff --git a/templates/categories/single.html b/templates/categories/single.html
index 641add7..0fe639d 100644
--- a/templates/categories/single.html
+++ b/templates/categories/single.html
@@ -1,13 +1,13 @@
 {% extends "base.html" %}
 
-{% block content %}
-<div>
-  <h2>{{ term.name }}</h2>
-  {% for year, posts in term.pages | group_by(attribute="year") %}
-    <h3>{{ year }}</h3>
-    {% for page in posts %}
+{%- block content %}
+    <div>
+      <h2>{{ term.name }}</h2>
+      {%- for year, posts in term.pages | group_by(attribute="year") %}
+      <h3>{{ year }}</h3>
+      {%- for page in posts %}
       <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat | default(value="%B %e, %Y")) }}</time></p>
-    {% endfor %}
-  {% endfor %}
-</div>
-{% endblock content %}
+      {%- endfor %}
+      {%- endfor %}
+    </div>
+{%- endblock content %}
diff --git a/templates/contact.html b/templates/contact.html
index 6cdbc55..7304551 100644
--- a/templates/contact.html
+++ b/templates/contact.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block content %}
+{%- block content %}
   <div>
     <p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p>
     <form name="contact" method="POST">
@@ -22,4 +22,4 @@
       </p>
     </form>
   </div>
-{% endblock content %}
+{%- endblock content %}
diff --git a/templates/index.html b/templates/index.html
index abc29c0..c17ee63 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,57 +1,74 @@
-{% import "macros/page.html" as page_macros %}
-{% import "macros/macros.html" as macros %}
-{% extends "base.html" %}
-{% block content %}
-  <div>
-    {% for page in paginator.pages %}
+{%- extends "base.html" %}
+
+{%- block seo %}
+  {{- super() }}
+
+  {%- if config.title %}
+    {%- set title = config.title %}
+  {%- else %}
+    {%- set title = "" %}
+  {%- endif %}
+
+  {%- if config.extra.title_addition and title %}
+    {%- set title_addition = title_separator ~ config.extra.title_addition %}
+  {%- elif config.extra.title_addition %}
+    {%- set title_addition = config.extra.title_addition %}
+  {%- else %}
+    {%- set title_addition = "" %}
+  {%- endif %}
+
+  {%- set description = config.description %}
+
+  {{- macros_head::seo(title=title, title_addition=title_addition, description=description, is_home=true) }}
+{%- endblock seo %}
+
+{%- block content %}
+    <div>
+    {%- for page in paginator.pages %}
       <article>
-        {{ macros::title(page=page) }}
+        {{- macros::title(page=page) }}
         <p>
-          {% if page.summary -%}
-            {{ page.summary | markdown(inline=true) | safe }}
-          {% elif page.description %}
-            {{ page.description | safe }}
-          {% elif page.content %}
-            {{ page.content | safe | striptags | truncate(length=150) }}
-          {% elif page.extra.static_thumbnail %}
-          {% endif -%}
+        {%- if page.summary %}
+          {{ page.summary | markdown(inline=true) | safe }}
+        {%- elif page.description %}
+          {{ page.description | safe }}
+        {%- elif page.content %}
+          {{ page.content | safe | striptags | truncate(length=150) }}
+        {%- elif page.extra.static_thumbnail %}
+        {%- endif %}
           <a href="{{ page.permalink | safe }}">...more</a>
         </p>
       </article>
-    {% endfor %}
-    {% if paginator.previous or paginator.next %}
-    <nav>
-      <div>{% if paginator.previous %}<a href="{{ paginator.previous | safe }}">&#60; Previous</a> {% endif %} </div>
-      <div>
-        <ul>
-          {% for pager in range(start=1, end=paginator.number_pagers+1) %}
-          <li>
-            {% if pager == 1 %}
-              <a class="pag {% if paginator.current_index == pager %}cnav{% endif %}" href='{{ get_url(path="/", trailing_slash=true) }}'>
-                {{pager}}
-              </a>
-            {% else %}
-              <a class="pag {% if paginator.current_index == pager %}cnav{% endif %}" href='{{ paginator.base_url }}{{pager}}'>
-                {{pager}}
-              </a>
-            {% endif -%}
-          </li>
-          {% endfor %}
-        </ul>
-      </div>
-      <div>{% if paginator.next %}<a href="{{ paginator.next | safe }}">Next &#62;</a>{% endif %} </div>
-    </nav>
-    {% endif -%}
-  </div>
-  {% set section_item = get_section(path="_index.md") %}
-  {% if config.extra.recent | default(value=true) %}
+    {%- endfor %}
+    {%- if paginator.previous or paginator.next %}
+      <nav>
+        <div>{%- if paginator.previous %}<a href="{{ paginator.previous | safe }}">&#60; Previous</a> {% endif %} </div>
+        <div>
+          <ul>
+            {%- for pager in range(start=1, end=paginator.number_pagers+1) %}
+            <li>
+              {%- if pager == 1 %}
+              <a class="pag {% if paginator.current_index == pager %}cnav{% endif %}" href='{{ get_url(path="/", trailing_slash=true) }}'>{{pager}}</a>
+              {%- else %}
+              <a class="pag {% if paginator.current_index == pager %}cnav{% endif %}" href='{{ paginator.base_url }}{{pager}}'>{{pager}}</a>
+              {%- endif %}
+            </li>
+            {%- endfor %}
+          </ul>
+        </div>
+        <div>{%- if paginator.next %}<a href="{{ paginator.next | safe }}">Next &#62;</a>{% endif %} </div>
+      </nav>
+    {%- endif %}
+    </div>
+  {%- set section_item = get_section(path="_index.md") %}
+  {%- if config.extra.recent | default(value=true) %}
     <div class="toc">
       <div class="toc-sticky">
         <h3>Recent Posts</h3>
-        {% for page in section_item.pages | slice(end=config.extra.recent_items) %}
-          {{ page_macros::page_listing(page=page) }}
-        {% endfor %}
+        {%- for page in section_item.pages | slice(end=config.extra.recent_items) %}
+          {{- page_macros::page_listing(page=page) }}
+        {%- endfor %}
       </div>
     </div>
-  {% endif %}
-{% endblock content %}
+  {%- endif %}
+{%- endblock content %}
diff --git a/templates/macros/head.html b/templates/macros/head.html
new file mode 100644
index 0000000..bea8f66
--- /dev/null
+++ b/templates/macros/head.html
@@ -0,0 +1,198 @@
+{%- macro stylesheet() %}
+  <link rel="stylesheet" href="{{ get_url(path=config.extra.stylesheet, trailing_slash=false, cachebust=true) | safe }}">
+{%- endmacro %}
+
+
+{%- macro resource() %}
+{%- if config.extra.fonts_load and config.extra.fonts %}{%- for i in config.extra.fonts %}
+  {%- if i.url is matching("^http[s]?://") %}
+  <link rel="preload" as="style" href="{{ i.url | safe }}">
+  {%- else %}
+  <link rel="preload" as="font" href="{{ get_url(path=i.url, trailing_slash=false, cachebust=true) }}">
+  {%- endif %}
+{%- endfor %}{%- endif %}
+
+{%- if config.build_search_index %}
+  <script defer type="text/javascript" src="{{ get_url(path=config.extra.js_search_index, trailing_slash=false, cachebust=true) | safe }}"></script>
+  <script defer type="text/javascript" src="{{ get_url(path=config.extra.js_search, trailing_slash=false, cachebust=true) | safe }}"></script>
+{%- endif %}
+
+{%- if config.generate_feed %}
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path=config.extra.rss_atom_feed, trailing_slash=false) }}">
+{%- endif %}
+
+{%- endmacro %}
+
+
+{%- macro favicons() %}
+  {%- if config.extra.favicon_theme_color %}
+  <meta name="theme-color" content="{{ config.extra.favicon_theme_color }}">
+  {%- endif %}
+
+  {%- if config.extra.favicon_ms_color %}
+  <meta name="msapplication-TileColor" content="{{ config.extra.favicon_ms_color }}">
+  {%- endif %}
+
+  {%- if config.extra.favicon_webmanifest %}
+  <link rel="manifest" href="{{ get_url(path=config.extra.favicon_webmanifest, trailing_slash=false) | safe }}">
+  {%- endif %}
+
+  {%- if config.extra.favicon_mask and config.extra.favicon_mask_color %}
+  <link rel="mask-icon" href="{{ get_url(path=config.extra.favicon_mask, trailing_slash=false) | safe }}" color="{{ config.extra.favicon_mask_color }}">
+  {%- endif %}
+
+  {%- if config.extra.favicon180 %}
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ get_url(path=config.extra.favicon180, trailing_slash=false) | safe }}" />
+  {%- endif %}
+
+  {%- if config.extra.favicon32 %}
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ get_url(path=config.extra.favicon32, trailing_slash=false) | safe }}" />
+  {%- endif %}
+
+  {%- if config.extra.favicon16 %}
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ get_url(path=config.extra.favicon16, trailing_slash=false) | safe }}" />
+  {%- endif %}
+{%- endmacro %}
+
+
+{#- type:          website or article, generally setting article for blog articles -#}
+{#- page_images:   using for the blog single template page -#}
+{#- page_section:  the blog single template page have to pass the parameter -#}
+{#- is_404:        using for the 404.html template -#}
+{%- macro seo( title="",title_addition="",description="",type="website",is_home=false,is_404=false,is_page=false,page_images="",page_section="",created_time="2021-05-01T08:08:00+08:00",  updated_time="2021-05-01T08:08:08+08:00" ) %}
+{%- if is_404 -%}
+  <meta name="robots" content="noindex, follow">
+{%- else -%}
+  <meta name="robots" content="index, follow">
+  <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+  <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+{%- endif -%}
+
+{%- if current_url %}
+  {%- set page_url = current_url %}
+{%- else %}
+  {%- set page_url = get_url(path="404.html", trailing_slash=true) %}
+{%- endif %}
+  <title>{{ title ~ title_addition }}</title>
+
+{%- if config.extra.author %}
+  <meta name="author" content="{{ config.extra.author }}">
+{%- endif %}
+{%- if config.extra.facebook_publisher %}
+  <meta property="article:publisher" content="https://www.facebook.com/{{ config.extra.facebook_publisher }}">
+{%- endif %}
+  <meta name="copyright" content="{{ title }}">
+{%- if config.extra.facebook_author %}
+  <meta property="article:author" content="https://www.facebook.com/{{ config.extra.facebook_author }}">
+{%- endif %}
+{%- if page.description %}
+  <meta name="description" content="{{ page.description }}" />
+{%- else %}
+  <meta name="description" content="{{ config.description }}" />
+{%- endif %}
+  <link rel="canonical" href="{{ page_url | safe }}">
+{%- if page.extra.keywords %}
+  <meta name="keywords" content="{{ page.extra.keywords }}, {{ config.extra.keywords }}">
+{%- else %}
+  <meta name="keywords" content="{{ config.extra.keywords }}">
+{%- endif %}
+
+{#- Extra SEO START #}
+{%- if config.extra.seo | default(value=true) %}
+{%- if not is_404 %}
+
+{%- if config.extra.google %}
+  <meta name="google-site-verification" content="{{ config.extra.google | safe }}">
+{%- endif %}
+
+{%- if config.extra.bing %}
+  <meta name="msvalidate.01" content="{{ config.extra.bing | safe}}">
+{%- endif %}
+  <meta property="og:url" content="{{ page_url | safe }}">
+  <meta name="twitter:url" content="{{ page_url | safe }}">
+
+{%- if page.description %}
+  <meta property="og:description" content="{{ page.description }}">
+  <meta name="twitter:description" content="{{ page.description }}">
+{%- else %}
+  <meta property="og:description" content="{{ config.description }}">
+  <meta name="twitter:description" content="{{ config.description}}">
+{%- endif %}
+
+{%- if page.title %}
+  <meta property="og:title" content="{{ page.title }} | {{ title }}">
+  <meta name="twitter:title" content="{{ page.title }} | {{ title }}">
+{%- else %}
+  <meta property="og:title" content="{{ title }}">
+  <meta name="twitter:title" content="{{ title }}">
+{%- endif %}
+
+
+{#- SEO MEDIA START #}
+{%- if page.extra.thumbnail %}
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:image" content="{{ get_url(path=page.path ~ page.extra.thumbnail, trailing_slash=false) }}">
+  <meta property="og:image" content="{{ get_url(path=page.path ~ page.extra.thumbnail, trailing_slash=false) }}">
+
+{%- elif page.extra.static_thumbnail %}
+  <meta name="twitter:card" content="summary_large_image">
+  {%- if page.extra.static_thumbnail is matching("^http[s]?://") %}
+  <meta name="twitter:image" content="{{ page.extra.static_thumbnail }}">
+  <meta property="og:image" content="{{ page.extra.static_thumbnail }}">
+  {%- else %}
+  <meta name="twitter:image" content="{{ get_url(path=page.extra.static_thumbnail, trailing_slash=false) }}">
+  <meta property="og:image" content="{{ get_url(path=page.extra.static_thumbnail, trailing_slash=false) }}">
+  {%- endif %}
+
+{%- elif config.extra.banner %}
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:image" content="{{ get_url(path=config.extra.banner, trailing_slash=false) }}">
+  <meta property="og:image" content="{{ get_url(path=config.extra.banner, trailing_slash=false) }}">
+
+{%- else %}
+  <meta name="twitter:card" content="summary">
+
+{%- endif %}
+
+{%- if config.extra.open.audio %}
+  <meta property="og:audio" content="{{ config.extra.open.audio }}">
+{%- endif %}
+
+{%- if config.extra.open.locale %}
+  <meta property="og:locale" content="{{ config.extra.open.locale }}">
+{%- endif %}
+
+{%- if config.extra.open.videos %}
+  {%- for video in config.extra.open.videos %}
+  <meta property="og:video" content="{{ get_url(path=video) }}">
+  {%- endfor %}
+{%- endif %}
+
+{#- SEO MEDIA END #}
+  <meta property="og:site_name" content="{{ title }}">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:type" content="website">
+  <meta property="og:updated_time" content="{{ now() }}">
+
+{%- if config.extra.social.twitter %}
+  <meta name="twitter:site" content="@{{ config.extra.twitter }}">
+  <meta name="twitter:creator" content="@{{ config.extra.twitter }}">
+{%- endif %}
+
+
+
+{%- endif %}
+{%- endif %}
+{#- Extra SEO END #}
+{%- endmacro %}
+
+{%- macro math() %}
+  {%- if config.extra.katex_enabled %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/mathtex-script-type.min.js" integrity="sha384-jiBVvJ8NGGj5n7kJaiWwWp9AjC+Yh8rhZY3GtAX8yU28azcLgoRo4oukO87g7zDT" crossorigin="anonymous"></script>
+  {%- if config.extra.katex_auto_render %}
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
+  {%- endif %}
+  {%- endif %}
+{%- endmacro %}
diff --git a/templates/macros/macros.html b/templates/macros/macros.html
index f343828..82e856a 100644
--- a/templates/macros/macros.html
+++ b/templates/macros/macros.html
@@ -1,28 +1,21 @@
-{% macro title(page) %}
-<h1><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h1>
-<span>{{ page.date | date(format="%B %d, %Y") }}
+{%- macro title(page) %}
+        <h1><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h1>
+        <span>{{ page.date | date(format="%B %d, %Y") }}
+        {%- if page.taxonomies.authors and config.taxonomies %} by
+          {%- for author in page.taxonomies.authors %}
+          {%- if author_flag %} and {% endif %}
+          <a href="{{ get_taxonomy_url(kind='authors', name=author) | safe }}">{{ author }}</a>
+          {%- set_global author_flag = true %}
+          {%- endfor %}
+        {%- elif config.extra.author and config.extra.author_show %} by {{ config.extra.author }}
+        {%- endif %}
+{%- if page.taxonomies.categories %} [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind="categories", name=cat) | safe }}">{{ cat }}</a>{% endfor %}]{% endif %}
+{%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind="tags", name=tag) | safe }}">{{ tag }}</a> {% endfor -%}{%- endif %}
+{%- if config.extra.readtime %} - {{ page.reading_time }} {{ config.extra.readtime_string | default(value="min") }} {% endif %}
+        </span>
+{%- endmacro title %}
 
-{% if page.taxonomies.authors and config.taxonomies %} by
-  {% for author in page.taxonomies.authors %}
-    {% if author_flag %} and {% endif %}
-    <a href="{{ get_taxonomy_url(kind='authors', name=author) | safe }}">{{ author }}</a>
-    {% set_global author_flag = true %}
-  {% endfor %}
-{% elif config.extra.author and config.extra.author_show %}
- by {{ config.extra.author }}
-{% endif %}
 
-{% if page.taxonomies.categories %} [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind="categories", name=cat) | safe }}">{{ cat }}</a>{% endfor %}]{% endif %}</span>
-{% if page.taxonomies.tags %}
-  <span>{% for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind="tags", name=tag) | safe }}">{{ tag }}</a> {% endfor %}</span>
-{% endif %}
-
-{% if config.extra.readtime | default(value=true) %}
- - {{ page.reading_time }} min
-{% endif %}
-{% endmacro title %}
-
-
-{% macro footer(page) %}
+{%- macro footer(page) %}
 <h3><a href="#">Back to top</a></h3>
-{% endmacro footer %}
+{%- endmacro footer %}
diff --git a/templates/macros/page.html b/templates/macros/page.html
index 0029e13..d5ef918 100644
--- a/templates/macros/page.html
+++ b/templates/macros/page.html
@@ -1,5 +1,5 @@
-{% macro page_listing(page) %}
-  <div class="toc-item">
-    <a href="{{ page.permalink | safe}}" title="{{ page.title }}">{{ page.title }}</a>
-  </div>
-{% endmacro page_listing %}
+{%- macro page_listing(page) %}
+        <div class="toc-item">
+          <a href="{{ page.permalink | safe}}" title="{{ page.title }}">{{ page.title }}</a>
+        </div>
+{%- endmacro page_listing %}
diff --git a/templates/macros/social.html b/templates/macros/social.html
index 6d45b9e..06f4a7c 100644
--- a/templates/macros/social.html
+++ b/templates/macros/social.html
@@ -1,26 +1,41 @@
-{% macro social_links(social_config) %}
-{% set base_url = get_url(path="", lang=lang) %}
-<span>
-{% if config.generate_feed %}{% if config.extra.social.feed %}      <a href="{{ get_url(path="atom.xml") }}" target="_blank"><span class="svg rss" title="Rss"></span></a>{% endif %}{% endif %}
-
-{% if social_config.mail %}      <a href="mailto:{{ social_config.mail }}" target="_blank"><span class="svg mail" title="Mail"></span></a>{% endif %}
-{% if social_config.mastodon %}      <a href="{{ social_config.mastodon }}/" target="_blank"><span class="svg mastodon" title="Mastodon"></span></a>{% endif %}
-{% if social_config.element %}      <a href="https://{{ social_config.element }}/" target="_blank"><span class="svg element" title="Element"></span></a>{% endif %}
-{% if social_config.matrix %}      <a href="https://{{ social_config.matrix }}/" target="_blank"><span class="svg matrix" title="Matrix"></span></a>{% endif %}
-{% if social_config.twitter %}      <a href="https://twitter.com/{{ social_config.twitter }}/" target="_blank"><span class="svg twitter" title="Twitter"></span></a>{% endif %}
-{% if social_config.facebook %}      <a href="https://www.facebook.com/{{ social_config.facebook }}/" target="_blank"><span class="svg facebook" title="Facebook"></span></a>{% endif %}
-{% if social_config.linkedin %}      <a href="https://www.linkedin.com/in/{{ social_config.linkedin }}/" target="_blank"><span class="svg linkedin" title="LinkedIn"></span></a>{% endif %}
-
-{% if social_config.gitlab %}      <a href="https://gitlab.com/{{ social_config.gitlab }}/" target="_blank"><span class="svg gitlab" title="Gitlab"></span></a>{% endif %}
-{% if social_config.github %}      <a href="https://github.com/{{ social_config.github }}/" target="_blank"><span class="svg github" title="Github"></span></a>{% endif %}
-{% if social_config.bitbucket %}      <a href="https://bitbucket.org/{{ social_config.bitbucket }}/" target="_blank"><span class="svg bitbucket" title="Bitbucket"></span></a>{% endif %}
-{% if social_config.python %}      <a href="https://pypi.org/user/{{ social_config.python }}/" target="_blank"><span class="svg python" title="Python"></span></a>{% endif %}
-{% if social_config.docker %}      <a href="https://hub.docker.com/u/{{ social_config.docker }}/" target="_blank"><span class="svg docker" title="Docker"></span></a>{% endif %}
-{% if social_config.stack %}      <a href="https://stackoverflow.com/users/{{ social_config.stack }}/" target="_blank"><span class="svg stack" title="Stack"></span></a>{% endif %}
-
-{% if social_config.instagram %}      <a href="https://www.instagram.com/{{ social_config.instagram }}/" target="_blank"><span class="svg instagram" title="Instagram"></span></a>{% endif %}
-{% if social_config.pinterest %}      <a href="https://www.pinterest.com/{{ social_config.pinterest }}/" target="_blank"><span class="svg pinterest" title="Pinterest"></span></a>{% endif %}
-{% if social_config.twitch %}      <a href="https://www.twitch.tv/{{ social_config.twitch }}/" target="_blank"><span class="svg twitch" title="Twitch"></span></a>{% endif %}
-{% if social_config.youtube %}      <a href="https://www.youtube.com/channel/{{ social_config.youtube }}/" target="_blank"><span class="svg youtube" title="YouTube"></span></a>{% endif %}
-</span>
-{% endmacro %}
+{%- macro social_links(social_config) %}
+{%- set base_url = get_url(path="", lang=lang) %}
+        <span>
+          {%- if config.generate_feed %}{%- if config.extra.social.feed %}
+          <a href="{{ get_url(path="atom.xml") }}" target="_blank"><span class="svg rss" title="Rss"></span></a>{% endif %}{% endif %}
+          {%- if social_config.mail %}
+          <a href="mailto:{{ social_config.mail }}" target="_blank"><span class="svg mail" title="Mail"></span></a>{% endif %}
+          {%- if social_config.mastodon %}
+          <a href="{{ social_config.mastodon }}/" target="_blank"><span class="svg mastodon" title="Mastodon"></span></a>{% endif %}
+          {%- if social_config.element %}
+          <a href="https://{{ social_config.element }}/" target="_blank"><span class="svg element" title="Element"></span></a>{% endif %}
+          {%- if social_config.matrix %}
+          <a href="https://{{ social_config.matrix }}/" target="_blank"><span class="svg matrix" title="Matrix"></span></a>{% endif %}
+          {%- if social_config.twitter %}
+          <a href="https://twitter.com/{{ social_config.twitter }}/" target="_blank"><span class="svg twitter" title="Twitter"></span></a>{% endif %}
+          {%- if social_config.facebook %}
+          <a href="https://www.facebook.com/{{ social_config.facebook }}/" target="_blank"><span class="svg facebook" title="Facebook"></span></a>{% endif %}
+          {%- if social_config.linkedin %}
+          <a href="https://www.linkedin.com/in/{{ social_config.linkedin }}/" target="_blank"><span class="svg linkedin" title="LinkedIn"></span></a>{% endif %}
+          {%- if social_config.gitlab %}
+          <a href="https://gitlab.com/{{ social_config.gitlab }}/" target="_blank"><span class="svg gitlab" title="Gitlab"></span></a>{% endif %}
+          {%- if social_config.github %}
+          <a href="https://github.com/{{ social_config.github }}/" target="_blank"><span class="svg github" title="Github"></span></a>{% endif %}
+          {%- if social_config.bitbucket %}
+          <a href="https://bitbucket.org/{{ social_config.bitbucket }}/" target="_blank"><span class="svg bitbucket" title="Bitbucket"></span></a>{% endif %}
+          {%- if social_config.python %}
+          <a href="https://pypi.org/user/{{ social_config.python }}/" target="_blank"><span class="svg python" title="Python"></span></a>{% endif %}
+          {%- if social_config.docker %}
+          <a href="https://hub.docker.com/u/{{ social_config.docker }}/" target="_blank"><span class="svg docker" title="Docker"></span></a>{% endif %}
+          {%- if social_config.stack %}
+          <a href="https://stackoverflow.com/users/{{ social_config.stack }}/" target="_blank"><span class="svg stack" title="Stack"></span></a>{% endif %}
+          {%- if social_config.instagram %}
+          <a href="https://www.instagram.com/{{ social_config.instagram }}/" target="_blank"><span class="svg instagram" title="Instagram"></span></a>{% endif %}
+          {%- if social_config.pinterest %}
+          <a href="https://www.pinterest.com/{{ social_config.pinterest }}/" target="_blank"><span class="svg pinterest" title="Pinterest"></span></a>{% endif %}
+          {%- if social_config.twitch %}
+          <a href="https://www.twitch.tv/{{ social_config.twitch }}/" target="_blank"><span class="svg twitch" title="Twitch"></span></a>{% endif %}
+          {%- if social_config.youtube %}
+          <a href="https://www.youtube.com/channel/{{ social_config.youtube }}/" target="_blank"><span class="svg youtube" title="YouTube"></span></a>{% endif %}
+        </span>
+{%- endmacro %}
diff --git a/templates/page.html b/templates/page.html
index f92574e..6ea50d6 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -1,40 +1,35 @@
 {% extends "base.html" %}
 {% import "macros/macros.html" as macros %}
-{{config.title}} - {{page.title}}
-{% block content %}
-  <article>
-    {{ macros::title(page=page) }}
+{%- block content %}
+    <article>
+    {{- macros::title(page=page) }}
     {{ page.content | safe }}
-    {% block page_before_footer %}
-    {% endblock page_before_footer %}
-    {% block page_footer %}
-      {{ macros::footer(page=page) }}
-    {% endblock page_footer %}
-    {% block page_after_footer %}
-    {% endblock page_after_footer %}
-  </article>
-  {% block toc %}
-    {% if page.extra.toc %}
-      {% set toc = page.toc %}
-    {% endif %}
-    {% if toc %}
-      <div class="toc">
-        <div class="toc-sticky">
-          <h3>Index</h3>
-          {% for h in toc %}
-            <div class="toc-item">
-              <a class="subtext" href="{{h.permalink | safe}}">{{ h.title }}</a>
-            </div>
-            {% if h.children %}
-              {% for h2 in h.children %}
-                <div class="toc-item-child">
-                  <a class="subtext" href="{{h2.permalink | safe}}"><small>- {{ h2.title }}</small></a>
-                </div>
-              {% endfor %}
-            {% endif %}
-          {% endfor %}
+    {%- block page_footer %}
+    {{- macros::footer(page=page) }}
+    {%- endblock page_footer %}
+    </article>
+    {%- block toc %}
+    {%- if page.extra.toc %}
+    {%- set toc = page.toc %}
+    {%- endif %}
+    {%- if toc %}
+    <div class="toc">
+      <div class="toc-sticky">
+        <h3>Index</h3>
+        {%- for h in toc %}
+        <div class="toc-item">
+          <a class="subtext" href="{{h.permalink | safe}}">{{ h.title }}</a>
         </div>
+        {%- if h.children %}
+        {%- for h2 in h.children %}
+        <div class="toc-item-child">
+          <a class="subtext" href="{{h2.permalink | safe}}"><small>- {{ h2.title }}</small></a>
+        </div>
+        {%- endfor %}
+        {%- endif %}
+        {%- endfor %}
       </div>
-    {% endif %}
-  {% endblock toc %}
-{% endblock content %}
+    </div>
+    {%- endif %}
+    {%- endblock toc %}
+{%- endblock content %}
diff --git a/templates/pages.html b/templates/pages.html
index 3d2ca80..a9147c7 100644
--- a/templates/pages.html
+++ b/templates/pages.html
@@ -1,4 +1,6 @@
 {% extends "base.html" %}
-{% block content %}
-  <div>{{ page.content | safe }}</div>
-{% endblock content %}
+{%- block content %}
+    <div>
+      {{ page.content | safe }}
+    </div>
+{%- endblock content %}
diff --git a/templates/posts.html b/templates/posts.html
index f093e8e..3d4184d 100644
--- a/templates/posts.html
+++ b/templates/posts.html
@@ -1,12 +1,12 @@
 {% extends "base.html" %}
-{% block content %}
-  {% set section_item = get_section(path="_index.md") %}
-  <div>
-    {% for year, posts in section_item.pages | group_by(attribute="year") %}
+{%- block content %}
+{%- set section_item = get_section(path="_index.md") %}
+    <div>
+      {%- for year, posts in section_item.pages | group_by(attribute="year") %}
       <h2>{{ year }}</h2>
-      {% for post in posts %}
-        <p><a href="{{ post.permalink | safe }}" title="{{ post.title }}">{{ post.title }}</a> - {{ post.date | date(format="%F") }}</p>
-      {% endfor %}
-    {% endfor %}
-  </div>
-{% endblock content %}
+      {%- for post in posts %}
+      <p><a href="{{ post.permalink | safe }}" title="{{ post.title }}">{{ post.title }}</a> - {{ post.date | date(format="%F") }}</p>
+      {%- endfor %}
+      {%- endfor %}
+    </div>
+{%- endblock content %}
diff --git a/templates/tags/list.html b/templates/tags/list.html
index 56575df..2dd3497 100644
--- a/templates/tags/list.html
+++ b/templates/tags/list.html
@@ -1,16 +1,16 @@
 {% extends "base.html" %}
 
-{% block content %}
-  <div>
-    <center>
-      <h1>{{ terms | length }} Tags</h1>
-      <p>{% for term in terms -%}#<a href="#{{ term.name }}">{{ term.name }}</a> &nbsp; {%- endfor %}</p>
-    </center>
-    {% for term in terms -%}
+{%- block content %}
+    <div>
+      <center>
+        <h1>{{ terms | length }} Tags</h1>
+        <p>{%- for term in terms %}#<a href="#{{ term.name }}">{{ term.name }}</a> &nbsp; {%- endfor %}</p>
+      </center>
+      {%- for term in terms %}
       <h2 id="{{ term.name }}">#<a href="{{ term.permalink | safe }}">{{ term.name }}</a></h2>
-      {% for page in term.pages -%}
-        <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat |	default(value="%B %e, %Y")) }}</time></p>
-      {% endfor -%}
-    {% endfor -%}
-  </div>
-{% endblock content %}
+      {%- for page in term.pages %}
+      <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat |	default(value="%B %e, %Y")) }}</time></p>
+      {%- endfor %}
+      {%- endfor %}
+    </div>
+{%- endblock content %}
diff --git a/templates/tags/single.html b/templates/tags/single.html
index 2bddb8e..d9d03eb 100644
--- a/templates/tags/single.html
+++ b/templates/tags/single.html
@@ -1,13 +1,13 @@
 {% extends "base.html" %}
 
-{% block content %}
-  <div>
-    <h2>{{ term.name }}</h2>
-    {% for year, posts in term.pages | group_by(attribute="year") %}
+{%- block content %}
+    <div>
+      <h2>{{ term.name }}</h2>
+      {%- for year, posts in term.pages | group_by(attribute="year") %}
       <h3>{{ year }}</h3>
-      {% for page in term.pages %}
-        <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat | default(value="%B %e, %Y")) }}</time></p>
-      {% endfor %}
-    {% endfor %}
-  </div>
-{% endblock content %}
+      {%- for page in term.pages %}
+      <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat | default(value="%B %e, %Y")) }}</time></p>
+      {%- endfor %}
+      {%- endfor %}
+    </div>
+{%- endblock content %}