release: v1.0.0

31 files changed, 699 insertions, 0 deletions

diff --git a/_includes/extensions/comments/disqus.html b/_includes/extensions/comments/disqus.html
new file mode 100644
index 0000000..c4f98fa
--- /dev/null
+++ b/_includes/extensions/comments/disqus.html
@@ -0,0 +1,18 @@
+  <div id="disqus_thread"></div>
+  <script>
+    var disqus_config = function () {
+      this.page.url = '{{ page.url | absolute_url }}';
+      this.page.identifier = '{{ page.url | absolute_url }}';
+    };
+
+    (function() {
+      var d = document, s = d.createElement('script');
+
+      // s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+      s.src = 'https://jeffreytse.disqus.com/embed.js';
+
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
diff --git a/_includes/extensions/comments/gitment.html b/_includes/extensions/comments/gitment.html
new file mode 100644
index 0000000..56ad7ee
--- /dev/null
+++ b/_includes/extensions/comments/gitment.html
@@ -0,0 +1,15 @@
+  <div id="gitment_thread"></div>
+  <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
+  <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
+  <script>
+    var gitment = new Gitment({
+      id: '{{ page.id }}',
+      owner: '{{ site.gitment.username }}',
+      repo: '{{ site.gitment.repo }}',
+      oauth: {
+        client_id: '{{ site.gitment.client_id }}',
+        client_secret: '{{ site.gitment.client_secret }}',
+      },
+    });
+    gitment.render('gitment_thread')
+  </script>
diff --git a/_includes/extensions/geopattern.html b/_includes/extensions/geopattern.html
new file mode 100644
index 0000000..3931533
--- /dev/null
+++ b/_includes/extensions/geopattern.html
@@ -0,0 +1,21 @@
+{% if include.selector %}
+  {% assign selector = include.selector %}
+{% endif %}
+
+{% if include.seed %}
+  {% assign seed = include.seed %}
+{% endif %}
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
+<script>
+  function setRandomBgImage(selector, seed) {
+    var pattern = GeoPattern.generate(seed);
+    var element = document.querySelector(selector)
+    if (element) {
+      element.style.backgroundImage = pattern.toDataUrl();
+    }
+  }
+
+  setRandomBgImage('{{ selector }}', '{{ seed }}');
+</script>
+
diff --git a/_includes/extensions/google-analytics.html b/_includes/extensions/google-analytics.html
new file mode 100644
index 0000000..e9afb20
--- /dev/null
+++ b/_includes/extensions/google-analytics.html
@@ -0,0 +1,12 @@
+<script>
+if(!(window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1")) {
+  (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','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('create', '{{ site.google_analytics }}', 'auto');
+  ga('send', 'pageview');
+}
+</script>
+  
diff --git a/_includes/extensions/google-translate.html b/_includes/extensions/google-translate.html
new file mode 100644
index 0000000..53d0996
--- /dev/null
+++ b/_includes/extensions/google-translate.html
@@ -0,0 +1,98 @@
+{% if include.translate_langs %}
+  {% assign translate_langs = include.translate_langs %}
+{% endif %}
+
+<div id="google_translate_element" style="display: none;">
+</div>
+
+<span class="ct-language">
+  <ul class="list-unstyled ct-language-dropdown">
+    {% for item in translate_langs %}
+      <li>
+        <a href="#" class="lang-select" data-lang="{{ item.lang }}">
+          {% if item.img %}
+          <img src="{{ item.img }}" title="{{ item.text }}">
+          {% else %}
+            {{ item.text }}
+          {% endif %}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+</span>
+
+<script type="text/javascript">
+function googleTranslateElementInit() {
+  new google.translate.TranslateElement({
+    pageLanguage: '',
+    autoDisplay: false,
+    layout: google.translate.TranslateElement.InlineLayout.VERTICAL
+  }, 'google_translate_element');
+
+  function restoreLang() {
+    var iframe = document.getElementsByClassName('goog-te-banner-frame')[0];
+    if (!iframe) return;
+
+    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
+    var restore_el = innerDoc.getElementsByTagName("button");
+
+    for (var i = 0; i < restore_el.length; i++) {
+      if (restore_el[i].id.indexOf("restore") >= 0) {
+        restore_el[i].click();
+        var close_el = innerDoc.getElementsByClassName("goog-close-link");
+        close_el[0].click();
+        return;
+      }
+    }
+  }
+
+  function triggerHtmlEvent(element, eventName) {
+    var event;
+    if (document.createEvent) {
+      event = document.createEvent('HTMLEvents');
+      event.initEvent(eventName, true, true);
+      element.dispatchEvent(event);
+    } else {
+      event = document.createEventObject();
+      event.eventType = eventName;
+      element.fireEvent('on' + event.eventType, event);
+    }
+  }
+
+  var googleCombo = document.querySelector("select.goog-te-combo");
+  var langSelect = document.querySelector('.ct-language');
+  langSelect.addEventListener('click', function(event) {
+    if (!event.target) {
+      return;
+    }
+
+    var selected = document.querySelector('.ct-language .ct-language-selected');
+    if (selected) {
+      selected.classList.remove('ct-language-selected');
+    }
+
+    var target = event.target;
+    while (target && target !== langSelect ) {
+      if (target.matches('.lang-select')) {
+        break;
+      }
+      target = target.parentElement;
+    }
+
+    if (target && target.matches('.lang-select')) {
+      var lang = target.getAttribute('data-lang');
+      if (googleCombo.value == lang) {
+        restoreLang();
+      } else {
+        target.parentElement.classList.add('ct-language-selected');
+        googleCombo.value = lang;
+        triggerHtmlEvent(googleCombo, 'change');
+      }
+    }
+
+    event.preventDefault();
+  });
+}
+</script>
+
+<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
diff --git a/_includes/extensions/hashlocate.html b/_includes/extensions/hashlocate.html
new file mode 100644
index 0000000..d44b249
--- /dev/null
+++ b/_includes/extensions/hashlocate.html
@@ -0,0 +1,39 @@
+<script>
+  function hashLocate(hashValue) {
+    hashValue = hashValue.replace(/^.*#h-/, '');
+    var element = document.getElementById(hashValue);
+
+    if (!element) {
+      return;
+    }
+
+    var headerHeight = 0;
+    var header = document.querySelector('header');
+    if (header) {
+      headerHeight = header.offsetHeight;
+    }
+    var supportPageOffset = window.pageXOffset !== undefined;
+    var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+    var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+    var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+
+    var offsetY = element.offsetTop - headerHeight - 12;
+    if (y === offsetY) {
+      return;
+    }
+
+    window.scrollTo(x, offsetY);
+  }
+
+  // The first event occurred
+  if (window.location.hash) {
+    hashLocate(window.location.hash);
+  }
+
+  window.addEventListener('click', function(event) {
+    if (event.target.matches('a')) {
+      hashLocate(event.target.getAttribute('href'));
+    }
+  });
+</script>
diff --git a/_includes/extensions/mathjax.html b/_includes/extensions/mathjax.html
new file mode 100644
index 0000000..b06023b
--- /dev/null
+++ b/_includes/extensions/mathjax.html
@@ -0,0 +1,10 @@
+<script type="text/x-mathjax-config">
+  MathJax.Hub.Config({
+tex2jax: {
+skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
+inlineMath: [['$','$']]
+}
+});
+</script>
+<script
+  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML" type="text/javascript"></script>
diff --git a/_includes/extensions/trianglify.html b/_includes/extensions/trianglify.html
new file mode 100644
index 0000000..22003dc
--- /dev/null
+++ b/_includes/extensions/trianglify.html
@@ -0,0 +1,23 @@
+{% if include.selector %}
+  {% assign selector = include.selector %}
+{% endif %}
+
+{% if include.seed %}
+  {% assign seed = include.seed %}
+{% endif %}
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
+<script>
+  function setRandomBgImage(selector, seed) {
+    var element = document.querySelector(selector);
+    if (!element) return;
+    var pattern = Trianglify({
+      width: screen.width,
+      height: element.offsetHeight,
+      seed: seed
+    });
+    element.appendChild(pattern.canvas());
+  }
+
+  setRandomBgImage('{{ selector }}', '{{ seed }}');
+</script>
diff --git a/_includes/functions.html b/_includes/functions.html
new file mode 100644
index 0000000..3f9fee2
--- /dev/null
+++ b/_includes/functions.html
@@ -0,0 +1,25 @@
+{%- if include.func -%}
+  {%- assign func = include.func -%}
+{%- endif -%}
+
+{%- assign include_path = func -%}
+{%- assign path_array = include_path | split: '.' -%}
+{%- if path_array.size == 1 -%}
+  {%- assign include_path = include_path | append: '.html' -%}
+{%- endif -%}
+
+{%- if func == 'log' -%}
+  {%- include functions/log.html level=include.level msg=include.msg -%}
+{%- else -%}
+  {%- assign include_path = 'functions/' | append: include_path -%}
+  {%- include {{ include_path }} -%}
+{%- endif -%}
+
+{%- if func != 'log' -%}
+  {%- assign msg = '[function]['
+    | append: {{func}}
+    | append: '] '
+    | append: {{return}}
+    -%}
+  {%- include functions.html func='log' level='info' -%}
+{%- endif -%}
diff --git a/_includes/functions/get_categories.html b/_includes/functions/get_categories.html
new file mode 100644
index 0000000..babb7a0
--- /dev/null
+++ b/_includes/functions/get_categories.html
@@ -0,0 +1,12 @@
+{% assign split_mark = '<|>' %}
+
+{% assign categories = '' %}
+{% for category in site.categories %}
+  {% assign name = category | first %}
+  {% assign categories = categories | append: split_mark  | append: name %}
+{% endfor %}
+
+{% assign return = categories
+  | remove_first: split_mark
+  | split: split_mark
+  | sort: self %}
diff --git a/_includes/functions/get_datetimes.html b/_includes/functions/get_datetimes.html
new file mode 100644
index 0000000..4398fbf
--- /dev/null
+++ b/_includes/functions/get_datetimes.html
@@ -0,0 +1,18 @@
+{% if include.filter %}
+  {% assign filter = include.filter %}
+{% endif %}
+
+{% assign split_mark = '<|>' %}
+
+{% assign dates = '' %}
+{% for post in site.posts %}
+  {% assign name = post.date | date: filter %}
+  {% assign dates = dates | append: split_mark  | append: name %}
+{% endfor %}
+
+{% assign return = dates
+  | remove_first: split_mark
+  | split: split_mark
+  | sort: self
+  | uniq %}
+
diff --git a/_includes/functions/get_tags.html b/_includes/functions/get_tags.html
new file mode 100644
index 0000000..8528eeb
--- /dev/null
+++ b/_includes/functions/get_tags.html
@@ -0,0 +1,12 @@
+{% assign split_mark = '<|>' %}
+
+{% assign tags = '' %}
+{% for tag in site.tags %}
+  {% assign name = tag | first %}
+  {% assign tags = tags | append: split_mark  | append: name %}
+{% endfor %}
+
+{% assign return = tags
+  | remove_first: split_mark
+  | split: split_mark
+  | sort: self %}
diff --git a/_includes/functions/get_value.html b/_includes/functions/get_value.html
new file mode 100644
index 0000000..2d90b19
--- /dev/null
+++ b/_includes/functions/get_value.html
@@ -0,0 +1,17 @@
+{%- if include.name -%}
+  {%- assign name = include.name -%}
+{%- endif -%}
+
+{%- assign return = include.return -%}
+
+{%- if page[name] -%}
+  {%- assign return = page[name] -%}
+{%- elsif site.data[name] -%}
+  {%- assign return = site.data[name] -%}
+{%- elsif site.defaults[page.layout][name] -%}
+  {%- assign return = site.defaults[page.layout][name] -%}
+{%- elsif site.data.defaults[page.layout][name] -%}
+  {%- assign return = site.data.defaults[page.layout][name] -%}
+{%- elsif layout[name] -%}
+  {%- assign return = layout[name] -%}
+{%- endif -%}
diff --git a/_includes/functions/log.html b/_includes/functions/log.html
new file mode 100644
index 0000000..b2a6130
--- /dev/null
+++ b/_includes/functions/log.html
@@ -0,0 +1,17 @@
+{% if include.level %}
+  {% assign level = include.level %}
+{% endif %}
+
+{% if include.msg %}
+  {% assign msg = include.msg %}
+{% endif %}
+
+{% if site.debug == true %}
+  {% if level == 'debug' %}
+    {% if jekyll.environment == "development" %}
+      <!-- {{ msg }} -->
+    {% endif %}
+  {% else %}
+      <!-- {{ msg }} -->
+  {% endif %}
+{% endif %}
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000..68a2ba2
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,13 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c"></meta>
+  {%- seo -%}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  {%- feed_meta -%}
+  {%- if jekyll.environment == 'production' and site.google_analytics -%}
+    {%- include google-analytics.html -%}
+  {%- endif -%}
+</head>
diff --git a/_includes/sidebar/archive-list.html b/_includes/sidebar/archive-list.html
new file mode 100644
index 0000000..01968e7
--- /dev/null
+++ b/_includes/sidebar/archive-list.html
@@ -0,0 +1,10 @@
+{%- include functions.html func='log' level='debug' msg='Get datetimes value' -%}
+
+{% assign filter = '%Y' %}
+{% include functions.html func='get_datetimes' %}
+{% assign datetimes = return %}
+
+{% assign keys = datetimes %}
+{% assign field = 'date' %}
+{% assign url = '/archives.html' %}
+{% include sidebar/common-list.html %}
diff --git a/_includes/sidebar/article-menu.html b/_includes/sidebar/article-menu.html
new file mode 100644
index 0000000..aa4184d
--- /dev/null
+++ b/_includes/sidebar/article-menu.html
@@ -0,0 +1,59 @@
+<style type="text/css" media="screen">
+.post-menu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+</style>
+
+<div class="post-menu">
+  <div class="post-menu-title">Contents</div>
+  <div class="post-menu-content"></div>
+</div>
+
+<script>
+  var menu = document.querySelector(".post-menu .post-menu-content");
+  var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");
+
+  // Generate post menu
+  var menuHTML = '';
+  headings.forEach(function (h) {
+    menuHTML += (
+      '<li class="h-' + h.tagName.toLowerCase() + '">'
+      + '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
+  });
+
+  menu.innerHTML = '<ul>' + menuHTML + '</ul>';
+
+  // The anchor offsetHeight
+  var headerHeight = 0;
+  var header = document.querySelector('header');
+  if (header) {
+    offsetHeight = header.offsetHeight + 12;
+  }
+
+  // Active the menu item
+  window.addEventListener('scroll', function (event) {
+    var lastActive = menu.querySelector('.active');
+    var changed = true;
+    for (var i = headings.length - 1; i >= 0; i--) {
+      var h = headings[i];
+      var clientRect = h.getBoundingClientRect();
+      if (clientRect.top < offsetHeight) {
+        var id = 'h-' + h.getAttribute('id');
+        var curActive = menu.querySelector('a[href="#' + id  + '"]');
+        if (curActive) {
+          curActive.classList.add('active');
+        }
+        if (lastActive == curActive) {
+          changed = false;
+        }
+        break;
+      }
+    }
+    if (lastActive && changed) {
+      lastActive.classList.remove('active');
+    }
+    event.preventDefault();
+  });
+</script>
diff --git a/_includes/sidebar/category-list.html b/_includes/sidebar/category-list.html
new file mode 100644
index 0000000..12b26ec
--- /dev/null
+++ b/_includes/sidebar/category-list.html
@@ -0,0 +1,9 @@
+{%- include functions.html func='log' level='debug' msg='Get categories value' -%}
+
+{%- include functions.html func='get_categories' -%}
+{% assign categories = return %}
+
+{% assign keys = categories %}
+{% assign field = 'categories' %}
+{% assign url = '/categories.html' %}
+{% include sidebar/common-list.html %}
diff --git a/_includes/sidebar/common-list.html b/_includes/sidebar/common-list.html
new file mode 100644
index 0000000..7e7bf96
--- /dev/null
+++ b/_includes/sidebar/common-list.html
@@ -0,0 +1,25 @@
+{%- if include.keys -%}
+  {%- assign keys = include.keys -%}
+{%- endif -%}
+
+{%- if include.field -%}
+  {%- assign field = include.field -%}
+{%- endif -%}
+
+<div class="common-list">
+  <ul>
+    <li>
+      <a href="/index.html">
+        All<span>{{ site.posts.size }}</span>
+      </a>
+    </li>
+
+    {% for key in  keys %}
+      <li>
+        <a href="{{ url }}#h-{{ key }}">
+          {{ key }} <span>{{ site.posts | where: field, key | size }}</span>
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/_includes/sidebar/google-translate.html b/_includes/sidebar/google-translate.html
new file mode 100644
index 0000000..496e6e0
--- /dev/null
+++ b/_includes/sidebar/google-translate.html
@@ -0,0 +1,3 @@
+<div>
+{%- include extensions/google-translate.html -%}
+</div>
diff --git a/_includes/sidebar/tag-list.html b/_includes/sidebar/tag-list.html
new file mode 100644
index 0000000..dd7b37e
--- /dev/null
+++ b/_includes/sidebar/tag-list.html
@@ -0,0 +1,9 @@
+{%- include functions.html func='log' level='debug' msg='Get tags value' -%}
+
+{%- include functions.html func='get_tags' -%}
+{% assign tags = return %}
+
+{% assign keys = tags %}
+{% assign field = 'tags' %}
+{% assign url = '/tags.html' %}
+{%- include sidebar/common-list.html -%}
diff --git a/_includes/views/article.html b/_includes/views/article.html
new file mode 100644
index 0000000..e7bd144
--- /dev/null
+++ b/_includes/views/article.html
@@ -0,0 +1,11 @@
+<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+
+    <div class="post-content e-content" itemprop="articleBody">
+
+      {{ content }}
+
+    </div>
+
+  <div>
+
+</article>
diff --git a/_includes/views/banner.html b/_includes/views/banner.html
new file mode 100644
index 0000000..7878997
--- /dev/null
+++ b/_includes/views/banner.html
@@ -0,0 +1,66 @@
+{%- include functions.html func='log' level='debug' msg='Get banner_html value' -%}
+{% assign name = 'banner_html' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_html = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner value' -%}
+{% assign name = 'banner' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get heading value' -%}
+{% assign name = 'heading' %}
+{%- include functions.html func='get_value' -%}
+{% assign heading = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get subheading value' -%}
+{% assign name = 'subheading' %}
+{%- include functions.html func='get_value' -%}
+{% assign subheading = return %}
+
+{% if banner %}
+
+  {% assign auto_banner = true %}
+  {% assign array = banner | split: '//' %}
+  {% assign protocol = array[0]  %}
+
+  {% if array.size > 1 and (protocol == '' or protocol == 'http:' or protocol == 'https:') %}
+    {% assign auto_banner = false %}
+  {% endif %}
+
+  <section class="page-banner">
+    <div class="page-banner-img">
+      {%- if auto_banner == false -%}
+        <div style="background-image: url({{ banner }})"></div>
+      {%- endif  -%}
+    </div>
+    <div class="wrapper">
+      <div class="page-banner-inner">
+
+        {%- if banner_html -%}
+
+        {%- assign banner_html = 'views/' | append: banner_html -%}
+        {%- include {{ banner_html }} -%}
+
+        {%- else -%}
+
+        <h1 class="page-banner-heading">
+          {{ heading | default: page.title | escape }}
+        </h1>
+        <h3 class="page-banner-subheading">
+          {{ subheading | default: page.subtitle | escape }}
+        </h3>
+
+        {%- endif -%}
+      </div>
+    </div>
+  </section>
+
+  {%- if auto_banner -%}
+    {%- assign selector = ".page-banner-img" -%}
+    {%- assign seed = page.id | append: '-seed-' | append: banner -%}
+    {%- include extensions/trianglify.html -%}
+  {%- endif -%}
+
+{%- endif -%}
+
diff --git a/_includes/views/footer.html b/_includes/views/footer.html
new file mode 100644
index 0000000..2df399b
--- /dev/null
+++ b/_includes/views/footer.html
@@ -0,0 +1,13 @@
+<footer class="site-footer h-card">
+  <data class="u-url" href="{{ "/" | relative_url }}"></data>
+
+  <div class="wrapper">
+    <span>
+      <div>{{ site.copyright }} @{{ site.author | escape }}</div>
+      <div>Powered by <a title="Jekyll is a simple, blog-aware, static site
+      generator." href="http://jekyllrb.com/">Jekyll</a> &amp; <a title="Yat, yet
+      another theme." href="https://github.com/jeffreytse/jekyll-theme-yat">Yat Theme</a>.</div>
+    </span>
+    <span class="footer-col rss-subscribe">Subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></span>
+  </div>
+</footer>
diff --git a/_includes/views/header.html b/_includes/views/header.html
new file mode 100644
index 0000000..06a20ed
--- /dev/null
+++ b/_includes/views/header.html
@@ -0,0 +1,44 @@
+<header class="site-header" role="banner">
+
+  <div class="wrapper">
+    {%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
+    {%- assign page_paths = site.header_pages | default: default_paths -%}
+
+    <span class="site-brand">
+      {%- include views/site-brand.html -%}
+    </span>
+
+    {%- if page_paths -%}
+      <nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
+
+        <div class="trigger">
+          {%- for path in page_paths -%}
+            {%- assign my_page = site.pages | where: "path", path | first -%}
+            {%- if my_page.title -%}
+            <a class="page-link" href="{{ my_page.url | relative_url }}">
+              {{ my_page.title | upcase | escape }}
+            </a>
+            {%- endif -%}
+          {%- endfor -%}
+
+          {%- assign name = 'translate_langs' -%}
+          {%- include functions.html func='get_value' -%}
+          {%- assign translate_langs = return -%}
+          {%- if translate_langs.size > 0 -%}
+            <span class="page-link">
+                {%- include extensions/google-translate.html -%}
+            </span>
+          {%- endif -%}
+        </div>
+      </nav>
+    {%- endif -%}
+  </div>
+</header>
diff --git a/_includes/views/pagination.html b/_includes/views/pagination.html
new file mode 100644
index 0000000..11eb5aa
--- /dev/null
+++ b/_includes/views/pagination.html
@@ -0,0 +1,33 @@
+{%- if page.paginator -%}
+  {%- assign paginator = page.paginator -%}
+{%- elsif paginator == nil -%}
+  {%- assign paginator = site -%}
+{%- endif -%}
+
+{%- if paginator.posts.size > 0 -%}
+<div class="pagination">
+  <!-- Post list links -->
+  <ul class="post-list">
+    {%- for post in paginator.posts -%}
+    <li>
+      {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
+      <span class="post-meta">{{ post.date | date: date_format }}</span>
+      <h3>
+        {%- assign post_url = post.url | relative_url -%}
+        <a class="post-link" href="{{ post_url }}">
+          {{ post.title | escape }}
+        </a>
+      </h3>
+      <p class="post-excerpt">
+        {{ post.content | strip_html | truncatewords: 50 }}
+      </p>
+    </li>
+    {%- endfor -%}
+  </ul>
+
+  <!-- Pagination links -->
+  {%- if paginator.posts.size < site.posts.size -%}
+    {%- include views/paginator.html -%}
+  {%- endif -%}
+</div>
+{%- endif -%}
diff --git a/_includes/views/paginator.html b/_includes/views/paginator.html
new file mode 100644
index 0000000..269c20b
--- /dev/null
+++ b/_includes/views/paginator.html
@@ -0,0 +1,21 @@
+{% if include.paginator %}
+  {% assign paginator = include.paginator %}
+{% endif %}
+
+{% if paginator.posts.size > 0 %}
+  <div class="pagination">
+    {% if paginator.previous_page %}
+      <a href="{{ paginator.previous_page_path }}">&laquo; Prev</a>
+    {% else %}
+      <span>&laquo; Prev</span>
+    {% endif %}
+
+    <span> {{ paginator.page }}/{{ paginator.total_pages }}</span>
+
+    {% if paginator.next_page %}
+      <a href="{{ paginator.next_page_path }}">Next &raquo;</a>
+    {% else %}
+      <span>Next &raquo;</span>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/_includes/views/post-header.html b/_includes/views/post-header.html
new file mode 100644
index 0000000..82329bd
--- /dev/null
+++ b/_includes/views/post-header.html
@@ -0,0 +1,11 @@
+<header class="post-header">
+  <h1 class="post-title p-name" itemprop="name headline">{{ heading | default: page.title | escape }}</h1>
+  <h3>{{ subheading | default: page.subtitle | escape }}</h3>
+
+  <p class="post-meta">
+    <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+      {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
+      {{ page.date | date: date_format }}
+    </time>
+  </p>
+</header>
diff --git a/_includes/views/post-item.html b/_includes/views/post-item.html
new file mode 100644
index 0000000..0d6d129
--- /dev/null
+++ b/_includes/views/post-item.html
@@ -0,0 +1,13 @@
+{%- if include.item -%}
+  {%- assign item = include.item -%}
+{%- endif -%}
+
+{%- assign post = item -%}
+
+{% assign date_format = site.yat.date_format | default: "%b %-d, %Y" %}
+<span class="post-meta">{{ post.date | date: date_format }}</span>
+<span>
+  <a class="post-link" href="{{ post.url | relative_url }}">
+    {{ post.title | escape }}
+  </a>
+</span>
diff --git a/_includes/views/segments.html b/_includes/views/segments.html
new file mode 100644
index 0000000..2c92dc1
--- /dev/null
+++ b/_includes/views/segments.html
@@ -0,0 +1,21 @@
+{%- if include.keys -%}
+  {%- assign keys = include.keys -%}
+{%- endif -%}
+
+{%- if include.field -%}
+  {%- assign field = include.field -%}
+{%- endif -%}
+
+<div class="page-segments">
+  <ul class="page-segments-list">
+    {% for key in keys %}
+    <h2 id="{{ key }}" class="segment-name">{{ key }}</h2>
+      {% assign items = site.posts | where: field, key %}
+      {% for item in items %}
+        {% if item != nil %}
+        <li> {% include views/post-item.html %} </li>
+        {% endif %}
+      {% endfor %}
+    {% endfor %}
+  </ul>
+</div>
diff --git a/_includes/views/site-brand.html b/_includes/views/site-brand.html
new file mode 100644
index 0000000..5652aff
--- /dev/null
+++ b/_includes/views/site-brand.html
@@ -0,0 +1 @@
+<a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>