jekyll-theme-yat 1.1.0 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8e400b5095fe94ac655f5b7082ed7a1ed084d2f91df05628303d892261330214
-  data.tar.gz: b7a07628a1f055962edc70349575cf25b4ee5bdde8720b2f41b476fd22ec3eb8
+  metadata.gz: 98ac82995fa7fe0f023cfdbbb2aa005413c8839adfaf3db2cf1a44b6b28b952d
+  data.tar.gz: 2e955f528fe54844e7ffbf5605a2f93b3eaf0f5bfa9a9465a1b4dbd518cb80bd
 SHA512:
-  metadata.gz: eb2bc388b34096a5044585ba79e176ce17da6ee8f18c8609230e875bd5bc6e84d77effd1b548d010afeba8d364ddf3d8d3a4bc1d9476734f2d0f2b4f05fccffa
-  data.tar.gz: b4a421865b0ca37cefa41a3cebf68cd3c14b85e1665e1877df3e0e0adbbc33d87ef78c3c95fdfc2c1322ee49f33d17570b01902d747f9a802bef31e8f2a2e13e
+  metadata.gz: 4c860e189b2e200c9723262207f8d5d8e69840c710faa4375b84ef99ac542a11fd30dfb19a09dafbc7bdf95fd38c86b4ad54c26e36b1fd3f8fa0e7147457db56
+  data.tar.gz: 63e1b8843f8ae8be5234623a914f32cbc7411f9322c5b9b083cedafe2dee51255c41b93dddc378e8046cf0dae57b286b4a886a4d5118037e52d758c41885b672

data/README.md

@@ -1,11 +1,21 @@
 # jekyll-theme-yat
+[![Gem Version](https://badge.fury.io/rb/jekyll-theme-yat.svg)](http://badge.fury.io/rb/jekyll-theme-yat)
+[![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)
+[![Donate (Liberapay)](http://img.shields.io/liberapay/goal/jeffreytse.svg?logo=liberapay)](https://liberapay.com/jeffreytse)
+[![Donate (Patreon)](https://img.shields.io/badge/support-patreon-F96854.svg?style=flat-square)](https://patreon.com/jeffreytse)
+<a href="https://ko-fi.com/jeffreytse">
+  <img height="20" src="https://www.ko-fi.com/img/githubbutton_sm.svg"
+    alt="Donate (Ko-fi)" />
+</a>
 
-Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
+Hey, nice to meet you, you found this Jekyll theme. Here the yet another theme is a modern theme, and it's quiet clear, clean and neat for writers and posts.
 
-To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
 
-TODO: Delete this and the text above, and describe your gem
+<p align="center">
 
+  <img src="https://user-images.githubusercontent.com/9413601/87244819-c34ada80-c472-11ea-9c67-5827dd55d3c7.png" alt="demo-screenshot" width="720px" style="box-shadow: 0px 0px 18px 5px #f2f2f2" />
+
+</p>
 
 ## Installation
 
@@ -33,10 +43,6 @@ Or install it yourself as:
 
 TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
 
-## Contributing
-
-Bug reports and pull requests are welcome on GitHub at https://github.com/jeffreytse/jekyll-theme-yat. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
-
 ## Development
 
 To set up your environment to develop this theme, run `bundle install`.
@@ -46,7 +52,12 @@ Your theme is setup just like a normal Jekyll site! To test your theme, run `bun
 When your theme is released, only the files in `_data`, `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
 To add a custom directory to your theme-gem, please edit the regexp in `jekyll-theme-yat.gemspec` accordingly.
 
-## License
+## Contributing
+
+Issues and Pull Requests are greatly appreciated. If you've never contributed to an open source project before I'm more than happy to walk you through how to create a pull request.
 
-The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+You can start by [opening an issue](https://github.com/jeffreytse/jekyll-theme-yat/issues/new) describing the problem that you're looking to resolve and we'll go from there.
+
+## License
 
+This theme is licensed under the [MIT license](https://opensource.org/licenses/mit-license.php) © JeffreyTse.

data/_data/translate_langs.yml

@@ -13,10 +13,6 @@
   img: https://www.countryflags.io/cn/flat/64.png
   text: Chinese(Simple)
 
-- lang: zh-TW
-  img: https://www.countryflags.io/tw/flat/64.png
-  text: Chinese(Traditional)
-
 - lang: ja
   img: https://www.countryflags.io/jp/flat/64.png
   text: Japan

data/_includes/extensions/comments/gitment.html

@@ -1,6 +1,6 @@
   <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>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/default.css"/>
+  <script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/gitment.browser.js"></script>
   <script>
     var gitment = new Gitment({
       id: '{{ page.id }}',

data/_includes/extensions/hashlocate.html

@@ -7,30 +7,34 @@
       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 header = document.querySelector('header.site-header');
+    var headerRect = header.getBoundingClientRect();
+    var headerTop = Math.floor(headerRect.top);
+    var headerHeight = Math.floor(headerRect.height);
+    var scrollPos = getScrollPos();
+    var offsetY = element.offsetTop - (headerTop + headerHeight + 20);
 
-    var offsetY = element.offsetTop - headerHeight - 12;
-    if (y === offsetY) {
+    if (offsetY == scrollPos.y) {
       return;
     }
 
-    window.scrollTo(x, offsetY);
+    if (headerTop == 0  && offsetY > scrollPos.y) {
+      offsetY += headerHeight + 2;
+    } else if (headerTop < 0  && offsetY < scrollPos.y) {
+      offsetY -= headerHeight - 2;
+    }
+
+    smoothScrollTo(offsetY);
   }
 
   // The first event occurred
-  if (window.location.hash) {
-    hashLocate(window.location.hash);
-  }
+  window.addEventListener('load', function(event) {
+    if (window.location.hash) {
+      hashLocate(window.location.hash);
+    }
+  });
 
+  // The first event occurred
   window.addEventListener('click', function(event) {
     if (event.target.matches('a')) {
       hashLocate(event.target.getAttribute('href'));

data/_includes/extensions/trianglify.html

@@ -8,16 +8,19 @@
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
 <script>
-  function setRandomBgImage(selector, seed) {
+  function setRandomBgImage(selector, seed, zoom) {
     var element = document.querySelector(selector);
     if (!element) return;
     var pattern = Trianglify({
-      width: screen.width,
-      height: element.offsetHeight,
+      width: screen.width * zoom,
+      height: element.offsetHeight * zoom,
       seed: seed
     });
-    element.appendChild(pattern.canvas());
+
+    var image = document.createElement("div");
+    image.style.backgroundImage = "url(" + pattern.png() + ")";
+    element.appendChild(image);
   }
 
-  setRandomBgImage('{{ selector }}', '{{ seed }}');
+  setRandomBgImage('{{ selector }}', '{{ seed }}', {{ zoom | default: 1}});
 </script>

data/_includes/functions/get_reading_time.html

@@ -0,0 +1,41 @@
+{% if include.article %}
+  {% assign article = include.article %}
+{% endif %}
+
+{% if include.speed %}
+  {% assign speed = include.speed %}
+{% else %}
+  {% assign speed = 160 %}
+{% endif %}
+
+{% assign total_mins = article
+  | number_of_words
+  | divided_by: speed
+  | at_least: 1 %}
+
+{% assign hours = total_mins | divided_by: 60 %}
+{% assign mins = total_mins | modulo: 60 %}
+
+{% assign return = "About" %}
+
+{% if hours > 0 %}
+  {% assign unit = "hour" %}
+  {% if hours > 1 %}
+    {% assign unit = unit | append: "s" %}
+  {% endif %}
+  {% assign return = return
+    | append: " "
+    | append: hours
+    | append: " "
+    | append: unit %}
+{% endif %}
+
+{% assign unit = "min" %}
+{% if mins > 1 %}
+  {% assign unit = unit | append: "s" %}
+{% endif %}
+{% assign return = return
+  | append: " "
+  | append: mins
+  | append: " "
+  | append: unit %}

data/_includes/head.html

@@ -6,9 +6,17 @@
   {%- seo -%}
   <link rel="shortcut icon" href="{{ site.favicon }}">
   <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 }}">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-noto-sans@0.0.72/index.min.css">
+  <link rel="stylesheet"
+        href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
+  <!-- and it's easy to individually load additional languages -->
+  <script charset="UTF-8"
+          src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/go.min.js"></script>
+  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+  <script src="{{ "/assets/js/main.js" | relative_url }}"></script>
   {%- feed_meta -%}
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
-    {%- include extensions/google-analytics.html -%}
+  {%- include extensions/google-analytics.html -%}
   {%- endif -%}
 </head>

data/_includes/sidebar/article-menu.html

@@ -7,53 +7,64 @@
 </style>
 
 <div class="post-menu">
-  <div class="post-menu-title">Contents</div>
+  <div class="post-menu-title">TOC</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");
+  function generateContent() {
+    var menu = document.querySelector(".post-menu");
+    var menuContent =  menu.querySelector(".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>');
-  });
+    // Hide menu when no headings
+    if (headings.length === 0) {
+      return menu.style.display = "none";
+    }
 
-  menu.innerHTML = '<ul>' + menuHTML + '</ul>';
+    // Generate post menu
+    var menuHTML = '';
+    for (var i = 0; i < headings.length; i++) {
+      var h = headings[i];
+      menuHTML += (
+        '<li class="h-' + h.tagName.toLowerCase() + '">'
+        + '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
+    }
 
-  // The anchor offsetHeight
-  var headerHeight = 0;
-  var header = document.querySelector('header');
-  if (header) {
-    offsetHeight = header.offsetHeight + 12;
-  }
+    menuContent.innerHTML = '<ul>' + menuHTML + '</ul>';
 
-  // 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;
+    // The header element
+    var header = document.querySelector('header.site-header');
+
+    // Active the menu item
+    window.addEventListener('scroll', function (event) {
+      var lastActive = menuContent.querySelector('.active');
+      var changed = true;
+      for (var i = headings.length - 1; i >= 0; i--) {
+        var h = headings[i];
+        var headingRect = h.getBoundingClientRect();
+        var headerRect = header.getBoundingClientRect();
+        var headerTop = Math.floor(headerRect.top);
+        var headerHeight = Math.floor(headerRect.height);
+        var headerHeight = headerTop + headerHeight + 20;
+        if (headingRect.top <= headerHeight) {
+          var id = 'h-' + h.getAttribute('id');
+          var a = menuContent.querySelector('a[href="#' + id  + '"]');
+          var curActive = a.parentNode;
+          if (curActive) {
+            curActive.classList.add('active');
+          }
+          if (lastActive == curActive) {
+            changed = false;
+          }
+          break;
         }
-        break;
       }
-    }
-    if (lastActive && changed) {
-      lastActive.classList.remove('active');
-    }
-    event.preventDefault();
-  });
+      if (lastActive && changed) {
+        lastActive.classList.remove('active');
+      }
+      event.preventDefault();
+    });
+  }
+  generateContent();
 </script>

data/_includes/views/article.html

@@ -6,6 +6,4 @@
 
     </div>
 
-  <div>
-
 </article>

data/_includes/views/banner.html

@@ -19,20 +19,9 @@
 {% 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 style="background-image: url({{ banner }})"></div>
     </div>
     <div class="wrapper">
       <div class="page-banner-inner">
@@ -44,37 +33,18 @@
 
         {%- else -%}
 
-        <h1 class="page-banner-heading">
-          {{ heading | default: page.title | escape }}
-        </h1>
-        <h3 class="page-banner-subheading">
-          {{ subheading | default: page.subtitle | escape }}
-        </h3>
+          <div class="page-banner-default">
+            <h1 class="page-banner-heading">
+              {{ heading | default: page.title | escape }}
+            </h1>
+            <h2 class="page-banner-subheading">
+              {{ subheading | default: page.subtitle | escape }}
+            </h2>
+          </div>
 
         {%- endif -%}
       </div>
     </div>
   </section>
-
-  {%- if auto_banner -%}
-
-    {%- assign selector = ".page-banner-img" -%}
-
-    {%- if banner == "default" -%}
-
-      {%- assign heading = page.heading | default: page.title | escape -%}
-      {%- assign subheading = page.subheading | default: page.subtitle | escape -%}
-      {%- assign seed = page.date | append: heading | append: subheading -%}
-
-    {%- else -%}
-
-      {%- assign seed = 'theme-' | append: banner -%}
-
-    {%- endif -%}
-
-    {%- include extensions/trianglify.html -%}
-
-  {%- endif -%}
-
 {%- endif -%}
 

data/_includes/views/header.html

@@ -1,44 +1,94 @@
-<header class="site-header" role="banner">
+
+{%- 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 header_transparent value' -%}
+{% assign name = 'header_transparent' %}
+{%- include functions.html func='get_value' -%}
+{% assign header_transparent = return | default: true %}
+
+{%- if banner and header_transparent -%}
+  {%- assign header_transparent_class = "site-header-transparent" -%}
+{%- endif -%}
+
+<header class="site-header {{ header_transparent_class }}" 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 -%}
+    <div class="site-header-inner">
+      {%- 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>
-          {%- endif -%}
-        </div>
-      </nav>
-    {%- endif -%}
+          </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>
   </div>
 </header>
+
+<script>
+  (function() {
+    var lastScrollY = getScrollPos().y;
+    var documentElement = document.documentElement;
+
+    function storeScrollData() {
+      var y = getScrollPos().y;
+
+      {%- if banner and header_transparent -%}
+      documentElement.setAttribute("data-header-transparent", "");
+      {%- endif -%}
+
+      var scrollStatus = "";
+
+      if (y <= 0) {
+        scrollStatus = "top";
+      } else if ((window.innerHeight + y) >= document.body.offsetHeight) {
+        scrollStatus = "bottom";
+      } else {
+        var isScrollDown = (y - lastScrollY > 0) ? true : false;
+        scrollStatus = isScrollDown ? "down" : "up";
+      }
+
+      lastScrollY = y;
+      documentElement.setAttribute("data-scroll-status", scrollStatus);
+    }
+
+    window.addEventListener('scroll', function(e) {
+      storeScrollData();
+    });
+
+    storeScrollData();
+  })();
+</script>