jekyll-theme-yat 1.5.4 → 1.6.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2884b2ab53b29fb48aa6bf0574b925c936fec06f4de9d20383360e50a37cb56e
-  data.tar.gz: c9fbc6547272f4ba8c1c4621d395b64809632f18bee235eca6a4ff2f239214e1
+  metadata.gz: 455c4ceab292869e983a85ced50d9537bf70c7d13b5fe334330f83df2e34720a
+  data.tar.gz: ffe0ae7cebfcbc65dc43b8d3bb7e484f158e310b398fb62c090433ea8e289eff
 SHA512:
-  metadata.gz: 5047f96da41a9ec89f78728f6bb9ccf4a36292568d27018345694aa772b732e6bd73f2497039dee478a8b52f9da875f494b6413c89c05bca12f58903b9dbaa70
-  data.tar.gz: 63c4497d597df2564ca33a0dbb590f15aa7f5662972a49e0546fb167378277271f14e6cf53ddae49bc7405b90ca6cd6915ab3d8e1add45c7266d6ba7fac353a8
+  metadata.gz: 294a7a2ce6f1ae93bd492d1dbe635837180103160fc185fb45a0af9eee1df9b3b14c81a86e433c489ab3cc7ddf22f14686294c3885bedd8d09807ca96b237e06
+  data.tar.gz: 5df389f70206297daf5b1d777a2936b078334825b3af5121c4ccf489a0cc91d2849626b1ee12df95ea2b9ed7acad6513ea7aad7ffde4cbf661b9153b425a717f

data/README.md

@@ -18,8 +18,17 @@ Hey, nice to meet you, you found this Jekyll theme. Here the yet another theme i
 
 </p>
 
+<h3 align="center">Night Mode</h3>
+
+<p align="center">
+
+  <img src="https://user-images.githubusercontent.com/9413601/94983351-760f6e00-0574-11eb-9494-5303ad6228dc.gif" alt="demo-screenshot" width="780px"/>
+
+</p>
+
 ## Features
 
+- Support beautiful __Night Mode__.
 - Full layouts `home`, `post`, `tags`, `archive` and `about`.
 - Uses font awesome 5 for icons.
 - Beautiful Syntax Highlight using [hilight.js][hilight-js].
@@ -37,6 +46,14 @@ Also, visit the [Live Demo][yat-live-demo] site for the theme.
 
 ## Installation
 
+There are three ways to install:
+
+- As a [gem-based theme](https://jekyllrb.com/docs/themes/#understanding-gem-based-themes).
+- As a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) (GitHub Pages compatible).
+- Forking/directly copying all of the theme files into your project.
+
+### Gem-based Theme Method
+
 Add this line to your Jekyll site's `Gemfile`:
 
 ```ruby
@@ -51,20 +68,53 @@ theme: jekyll-theme-yat
 
 And then execute:
 
-    $ bundle
+```bash
+$ bundle
+```
 
 Or install it yourself as:
 
-    $ gem install jekyll-theme-yat
+```bash
+$ gem install jekyll-theme-yat
+```
 
-## Usage
+### Remote Theme Method with GitHub Pages
 
-Add or update your available layouts, includes, sass and/or assets.
+Remote themes are similar to Gem-based themes, but do not require `Gemfile` changes or whitelisting making them ideal for sites hosted with GitHub Pages.
+
+To install:
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "github-pages", group: :jekyll_plugins
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+# theme: owner/name --> Don't forget to remove/comment the gem-based theme option
+remote_theme: "jeffreytse/jekyll-theme-yat"
+```
+
+And then execute:
+
+```bash
+$ bundle
+```
+
+## GitHub Pages without limitation
+
+GitHub Pages runs in `safe` mode and only allows [a set of whitelisted plugins/themes](https://pages.github.com/versions/). __In other words, the third-party gems will not work normally__.
 
-GitHub Pages runs in `safe` mode and only allows [a set of whitelisted plugins](https://pages.github.com/versions/).
 To use the third-party gem in GitHub Pages without limitation:
 
-* Here is a GitHub Action named [jekyll-deploy-action](https://github.com/jeffreytse/jekyll-deploy-action) for Jekyll site deployment conveniently. 👍
+Here is a GitHub Action named [jekyll-deploy-action](https://github.com/jeffreytse/jekyll-deploy-action) for Jekyll site deployment conveniently. 👍
+
+
+## Usage
+
+Add or update your available layouts, includes, sass and/or assets.
 
 ## Development
 

data/_includes/extensions/comments/disqus.html

@@ -8,8 +8,7 @@
     (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.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
 
       s.setAttribute('data-timestamp', +new Date());
       (d.head || d.body).appendChild(s);

data/_includes/extensions/hashlocate.html

@@ -36,7 +36,7 @@
 
   // The first event occurred
   window.addEventListener('click', function(event) {
-    if (event.target.matches('a')) {
+    if (event.target.tagName.toLowerCase() == 'a') {
       hashLocate(event.target.getAttribute('href'));
     }
   });

data/_includes/extensions/theme-toggle.html

@@ -0,0 +1,103 @@
+<div class="theme-toggle">
+  <input type="checkbox" id="theme-switch">
+  <label for="theme-switch">
+    <div class="toggle"></div>
+    <div class="names">
+      <p class="light">Light</p>
+      <p class="dark">Dark</p>
+    </div>
+  </label>
+</div>
+
+{%- assign name = 'night_mode' -%}
+{%- include functions.html func='get_value' default='auto' -%}
+{%- assign night_mode = return -%}
+
+<script>
+  (function() {
+    var sw = document.getElementById('theme-switch');
+    var html = document.getElementsByTagName('html')[0];
+    var themeData = loadThemeData();
+
+    function saveThemeData(data) {
+      localStorage.setItem('theme', JSON.stringify(data));
+    }
+
+    function loadThemeData() {
+      var data = localStorage.getItem('theme');
+      try {
+        data = JSON.parse(data ? data : '');
+      } catch(e) {
+        data = { nightShift: false, autoToggleAt: 0 };
+        saveThemeData(data);
+      }
+      return data;
+    }
+
+    function handleThemeToggle(nightShift) {
+      themeData.nightShift = nightShift;
+      saveThemeData(themeData);
+      html.dataset.theme = nightShift ? 'dark' : 'light';
+      setTimeout(function() {
+        sw.checked = nightShift ? true : false;
+      }, 50);
+    }
+
+    function autoThemeToggle() {
+      // Next time point of theme toggle
+      var now = new Date();
+      var toggleAt = new Date();
+      var hours = now.getHours();
+      var nightShift = hours >= 19 || hours <=7;
+
+      if (nightShift) {
+        if (hours > 7) {
+          toggleAt.setDate(toggleAt.getDate() + 1);
+        }
+        toggleAt.setHours(7);
+      } else {
+        toggleAt.setHours(19);
+      }
+
+      toggleAt.setMinutes(0);
+      toggleAt.setSeconds(0);
+      toggleAt.setMilliseconds(0)
+
+      var delay = toggleAt.getTime() - now.getTime();
+
+      // auto toggle theme mode
+      setTimeout(function() {
+        handleThemeToggle(!nightShift);
+      }, delay);
+
+      return {
+        nightShift: nightShift,
+        toggleAt: toggleAt.getTime()
+      };
+    }
+
+    // Listen the theme toggle event
+    sw.addEventListener('change', function(event) {
+      handleThemeToggle(event.target.checked);
+    });
+
+    var nightModeOption = '{{ night_mode }}' || 'auto';
+    nightModeOption = nightModeOption.toLowerCase();
+
+    if (nightModeOption == 'auto') {
+      var data = autoThemeToggle();
+
+      // Toggle theme by local setting
+      if (data.toggleAt > themeData.autoToggleAt) {
+        themeData.autoToggleAt = data.toggleAt;
+        handleThemeToggle(data.nightShift);
+      } else {
+        handleThemeToggle(themeData.nightShift);
+      }
+    } else if (nightModeOption == 'manual') {
+      handleThemeToggle(themeData.nightShift);
+    } else {
+      handleThemeToggle(nightModeOption == 'on');
+    }
+  })();
+</script>

data/_includes/functions.html

@@ -1,5 +1,6 @@
-{%- if include.func -%}
-  {%- assign func = include.func -%}
+{%- assign params = include -%}
+{%- if params.func -%}
+  {%- assign func = params.func -%}
 {%- endif -%}
 
 {%- assign include_path = func -%}
@@ -12,7 +13,7 @@
   {%- include functions/log.html level=include.level msg=include.msg -%}
 {%- else -%}
   {%- assign include_path = 'functions/' | append: include_path -%}
-  {%- include {{ include_path }} -%}
+  {%- include {{ include_path }} params=params-%}
 {%- endif -%}
 
 {%- if func != 'log' -%}

data/_includes/functions/get_datetimes.html

@@ -1,5 +1,5 @@
-{% if include.filter %}
-  {% assign filter = include.filter %}
+{% if include.params.filter %}
+  {% assign filter = include.params.filter %}
 {% endif %}
 
 {% assign split_mark = '<|>' %}

data/_includes/functions/get_reading_time.html

@@ -1,9 +1,9 @@
-{% if include.article %}
-  {% assign article = include.article %}
+{% if include.params.article %}
+  {% assign article = include.params.article %}
 {% endif %}
 
-{% if include.speed %}
-  {% assign speed = include.speed %}
+{% if include.params.speed %}
+  {% assign speed = include.params.speed %}
 {% else %}
   {% assign speed = 160 %}
 {% endif %}

data/_includes/functions/get_value.html

@@ -1,19 +1,19 @@
-{%- if include.name -%}
-  {%- assign name = include.name -%}
+{%- if include.params.name -%}
+  {%- assign name = include.params.name -%}
 {%- endif -%}
 
-{%- assign return = include.return -%}
-
-{%- if page[name] -%}
+{%- if page[name] != nil -%}
   {%- assign return = page[name] -%}
-{%- elsif site[name] -%}
+{%- elsif site[name] != nil -%}
   {%- assign return = site[name] -%}
-{%- elsif site.data[name] -%}
+{%- elsif site.data[name] != nil -%}
   {%- assign return = site.data[name] -%}
-{%- elsif site.defaults[page.layout][name] -%}
+{%- elsif site.defaults[page.layout][name] != nil -%}
   {%- assign return = site.defaults[page.layout][name] -%}
-{%- elsif site.data.defaults[page.layout][name] -%}
+{%- elsif site.data.defaults[page.layout][name] != nil -%}
   {%- assign return = site.data.defaults[page.layout][name] -%}
-{%- elsif layout[name] -%}
+{%- elsif layout[name] != nil -%}
   {%- assign return = layout[name] -%}
+{%- else -%}
+  {%- assign return = include.params.default -%}
 {%- endif -%}

data/_includes/functions/log.html

@@ -1,9 +1,9 @@
-{% if include.level %}
-  {% assign level = include.level %}
+{% if include.params.level %}
+  {% assign level = include.params.level %}
 {% endif %}
 
-{% if include.msg %}
-  {% assign msg = include.msg %}
+{% if include.params.msg %}
+  {% assign msg = include.params.msg %}
 {% endif %}
 
 {% if site.debug == true %}

data/_includes/sidebar/article-menu.html

@@ -36,9 +36,13 @@
     // The header element
     var header = document.querySelector('header.site-header');
 
-    function doMenuCollapse(index, over_items=20) {
+    function doMenuCollapse(index, over_items) {
       var items = menuContent.firstChild.children;
 
+      if (over_items == undefined) {
+        over_items = 20;
+      }
+
       if (items.length < over_items) {
         return;
       }

data/_includes/views/header.html

@@ -1,13 +1,13 @@
 
 {%- include functions.html func='log' level='debug' msg='Get banner value' -%}
-{% assign name = 'banner' %}
+{%- 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 %}
+{%- assign name = 'header_transparent' -%}
+{%- include functions.html func='get_value' default=true -%}
+{%- assign header_transparent = return -%}
 
 {%- if banner and header_transparent -%}
   {%- assign header_transparent_class = "site-header-transparent" -%}

data/_layouts/404.html

@@ -7,7 +7,6 @@ layout: default
     margin: 10px auto;
     max-width: 600px;
     text-align: center;
-    color: #3c3c3c;
   }
   h1 {
     margin: 30px 0;

data/_layouts/default.html

@@ -11,6 +11,8 @@
 
     {%- include extensions/hashlocate.html -%}
 
+    {%- include extensions/theme-toggle.html -%}
+
     <main class="page-content" aria-label="Content">
       <div class="wrapper">
         {{ content }}

data/_sass/misc/common-list.scss

@@ -27,7 +27,7 @@
       transition: background 0.2s;
 
       &:hover {
-        background: mix($theme-color, #eaeaea, 20%);
+        background-color: mix($theme-color, #eaeaea, 20%);
       }
     }
 

data/_sass/misc/google-translate.scss

@@ -113,7 +113,7 @@ body {
 // Main look
 
 .ct-language-selected {
-  background: darken($theme-color, 5%) !important;
+  background-color: darken($theme-color, 5%) !important;
 }
 
 .ct-language-dropdown {

data/_sass/misc/theme-toggle.scss

@@ -0,0 +1,79 @@
+.theme-toggle {
+  position: relative;
+  width: $base-font-size * 7.65;
+  margin-top: 10px;
+  margin-right: 60px;
+  margin-left: auto;
+  transition: 0.1s all ease-in-out;
+
+  label, .toggle {
+    border-radius: 100px;
+  }
+
+  label {
+    display: block;
+    background-color: rgba(120,120,120,.15);
+    cursor: pointer;
+  }
+
+  .toggle {
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    background-color: #fff;
+    box-shadow: 0 2px 15px rgba(0,0,0,.15);
+    transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  .names {
+    font-size: 1em;
+    font-weight: bolder;
+    width: 76%;
+    margin-left: 12%;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    user-select: none;
+  }
+
+  .dark {
+    opacity: .5;
+  }
+
+  p {
+    color: #acacac;
+    margin-bottom: 0;
+    line-height: 24px;
+  }
+
+  [type="checkbox"] {
+    display: none;
+  }
+
+  /* Toggle */
+  [type="checkbox"]:checked ~ label .toggle {
+    transform: translateX(100%);
+    background-color: #34323D;
+  }
+
+  [type="checkbox"]:checked ~ label .dark{
+    opacity: 1;
+  }
+
+  [type="checkbox"]:checked ~ label .light{
+    opacity: .5;
+  }
+
+  @include media-query(1024px) {
+    margin-right: 35px;
+  }
+
+  @include media-query($on-palm) {
+    width: $base-font-size * 6.65;
+    margin-right: 20px;
+
+    .names {
+      font-size: .85em;
+    }
+  }
+}

data/_sass/yat.scss

@@ -10,7 +10,7 @@ $base-line-height: 1.6 !default;
 
 $spacing-unit:     30px !default;
 
-$text-color:       #313b3f !default;
+$text-color:       #454545 !default;
 $background-color: #fff !default;
 $brand-color:      #ff5100 !default;
 
@@ -61,7 +61,8 @@ $on-laptop:        800px !default;
 @import
   "yat/base",
   "yat/layout",
-  // "yat/syntax-highlighting",
+  "yat/dark",
+  "misc/theme-toggle",
   "misc/article-menu",
   "misc/common-list",
   "misc/google-translate"

data/_sass/yat/_base.scss

@@ -148,10 +148,10 @@ code {
 }
 
 *:not(pre) > code {
-  padding: 1px 5px;
+  padding: 3px 6px;
   border-radius: 3px;
-  color: #fff;
-  background-color: #545454;
+  background-color: #eee;
+  margin: 0 5px;
 }
 
 pre {

data/_sass/yat/_dark.scss

@@ -0,0 +1,186 @@
+$dark-background-color:       #0e0e0e !default;
+$dark-text-color: #bbb !default;
+
+html[data-theme="dark"]  {
+
+  &[data-scroll-status='top'] {
+    .site-footer-inner {
+      border-top: solid 1px #2f2f2f !important;
+      transition: 0s;
+    }
+  }
+
+  body {
+    color: $dark-text-color;
+    background-color: $dark-background-color;
+  }
+
+  *:not(pre) > code {
+    color: $dark-text-color;
+    background-color: #454545;
+  }
+
+  table {
+    color: #9d9d9d;
+
+    th {
+      background-color: #050505;
+    }
+
+    tr:nth-child(even) {
+      background-color: #080808;
+    }
+  }
+
+  .site-header {
+    background-color: #090909;
+
+    .site-brand {
+      .site-brand-inner {
+        &, &:visited {
+          color: #f8f8f8;
+        }
+      }
+    }
+
+    .site-nav .page-link {
+      color: #f8f8f8;
+    }
+
+    .ct-language-dropdown {
+      color: #f8f8f8;
+      background-color: $dark-background-color;
+    }
+
+    .ct-language-selected, .ct-language-dropdown li:hover {
+      background-color: #222 !important;
+    }
+  }
+
+  .site-footer {
+    color: #fff;
+    background-color: #000;
+  }
+
+  .left-vsplit:before {
+    background-color: #9a9a9a;
+  }
+
+  .page-banner {
+    .page-banner-img {
+      & > *:first-child {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  .pagination {
+    .post-link {
+      color: $dark-text-color;
+    }
+
+    .post-title {
+      a:visited:after {
+        background-color: $dark-background-color;
+      }
+
+      a:after {
+        color: $dark-background-color;
+      }
+    }
+
+    .post-list {
+      & > li:not(:last-child) {
+        border-bottom: 1px solid #545454;
+      }
+    }
+
+    .post-tags .post-tag:hover {
+      color: #d7d7d7;
+    }
+  }
+
+  .page-segments {
+    li {
+      a {
+        color: #ddd;
+      }
+
+      a:visited:after {
+        background-color: $dark-background-color;
+      }
+
+      a:after {
+        color: $dark-background-color;
+      }
+    }
+  }
+
+  .post .post-content {
+    img:not([raw]) {
+      background-color: #ffffff33;
+    }
+  }
+
+  .post-related {
+    & > *:first-child {
+      color: #d7d7d7;
+    }
+
+    a:visited:after {
+      background-color: $dark-background-color;
+    }
+
+    a:after {
+      color: $dark-background-color;
+    }
+
+    a:hover {
+      color: #aaa;
+    }
+  }
+
+  .common-list {
+    li {
+      border-bottom: solid 1px #40404088;
+
+      a {
+        color: #aaa;
+      }
+
+      a:hover {
+        background-color: #272727;
+      }
+
+      span {
+        background-color: #333;
+      }
+    }
+  }
+
+  .post-menu {
+    .post-menu-title {
+      color: #ddd;
+    }
+
+    .post-menu-content {
+      ul {
+        border-left: 1px solid #787878;
+
+        .active {
+          background-color: #2d2d2d;
+          border-left: 2px solid #aaa;
+        }
+
+        a {
+          color: $dark-text-color;
+        }
+
+        a:hover {
+          color: #fff !important;
+        }
+      }
+    }
+  }
+}
+

data/_sass/yat/_layout.scss

@@ -11,7 +11,7 @@ html {
   &[data-scroll-status='top'] {
     header.site-header-transparent {
       height: 0;
-      margin-top: 20px;
+      margin-top: 12px;
       background-color: transparent;
       transition: 0.1s height,background-color,box-shadow;
 
@@ -244,6 +244,7 @@ html {
   @extend %flex-1; /* <-- Keep footer on the bottom */
   -ms-flex: none; /* <-- Fix IE footer issue */
   padding: $spacing-unit * 2 0;
+  padding-top: 72px;
 }
 
 .page-heading {
@@ -326,7 +327,7 @@ html {
     }
 
     &:hover {
-      color: #777;
+      color: #787878;
     }
   }
 
@@ -359,10 +360,6 @@ html {
       color: #b3b3b3;
     }
 
-    a:hover {
-      color: #000;
-    }
-
     .indicator {
       padding: 0 15px;
     }
@@ -392,9 +389,9 @@ html {
 
   .post-content {
     margin-bottom: $spacing-unit;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
+    overflow-wrap: normal;
+    word-wrap: normal;
+    word-break: normal;
 
     h2 {
       @include relative-font-size(2);
@@ -500,6 +497,7 @@ html {
     @include relative-font-size(1.125);
     line-height: 15px;
     color: #666;
+    max-width: 50%;
   }
 
   .previous:before {
@@ -560,7 +558,6 @@ html {
   height: $banner-height;
   background-color: $banner-background;
   transition: height 0.2s;
-  margin-bottom: 32px;
 
   .page-banner-img {
     position: absolute;
@@ -570,6 +567,7 @@ html {
 
     & > *:first-child {
       @include center-image;
+      transition: 0.1s all ease-in-out;
     }
   }
 

data/assets/js/main.js

@@ -58,10 +58,12 @@ function smoothScrollTo(y, time) {
 
 // Init highlight js
 document.addEventListener('DOMContentLoaded', function(event) {
-  document.querySelectorAll('pre code').forEach((block) => {
+  var els = document.querySelectorAll('pre code')
+  function handle(block) {
     var outer = block.parentElement.parentElement.parentElement;
     var lang = block.getAttribute('data-lang');
-    for (var cls of outer.classList) {
+    for (var i = 0; i < outer.classList.length; i++) {
+      var cls = outer.classList[i];
       if (cls.startsWith('language-')) {
         lang = cls;
         break;
@@ -77,5 +79,9 @@ document.addEventListener('DOMContentLoaded', function(event) {
     block.setAttribute('class', 'hljs ' + lang);
     block.parentNode.setAttribute('data-lang', lang);
     hljs.highlightBlock(block);
-  });
+  }
+  for (var i = 0; i < els.length; i++) {
+    var el = els[i];
+    handle(el);
+  }
 });

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-yat
 version: !ruby/object:Gem::Version
-  version: 1.5.4
+  version: 1.6.3
 platform: ruby
 authors:
 - jeffreytse
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-09-22 00:00:00.000000000 Z
+date: 2020-11-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -158,6 +158,7 @@ files:
 - _includes/extensions/google-translate.html
 - _includes/extensions/hashlocate.html
 - _includes/extensions/mathjax.html
+- _includes/extensions/theme-toggle.html
 - _includes/extensions/trianglify.html
 - _includes/functions.html
 - _includes/functions/get_categories.html
@@ -196,8 +197,10 @@ files:
 - _sass/misc/article-menu.scss
 - _sass/misc/common-list.scss
 - _sass/misc/google-translate.scss
+- _sass/misc/theme-toggle.scss
 - _sass/yat.scss
 - _sass/yat/_base.scss
+- _sass/yat/_dark.scss
 - _sass/yat/_layout.scss
 - assets/css/main.scss
 - assets/images/banners/home.jpeg
@@ -222,8 +225,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubygems_version: 3.0.8
 signing_key:
 specification_version: 4
-summary: Yet another theme for elegant writers with modern flat style.
+summary: Yet another theme for elegant writers with modern flat style and beautiful
+  night/dark mode.
 test_files: []