jekyll-theme-yat 1.6.0 → 1.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b89d81bb145293e81ec3ce978f1edd21f7fc3d6f415582cfa96162f9f56db586
-  data.tar.gz: 99a004e736ff24d67ea6e89f54b8cc166c6551517892d44660fdcaeec48152be
+  metadata.gz: 2e64474766ce139b9a917d18a8a2fe0ff867b0bcc7c343349ab6819bd8990fbd
+  data.tar.gz: 279eeb6dd5e6a47244ae9516824fbf157e77b92c97a6ecf19604a1e04706c3c9
 SHA512:
-  metadata.gz: c75c4559995c0fe4766848031f1bc8d02335674e474e54fe1ffacaa6c7dafca04db93c8d277eae42169d3bea9f8c9cf7fecd6f10d7c5c13d7a172e4b62c0c034
-  data.tar.gz: 82379c7e536507ac69df959573ff951cae42e36a023b7a9833a067736275500879bceb98507704f08f231cbd5d15c0690b28126e4dcc694a10364e86d89bb4c6
+  metadata.gz: 28b59c6996eb0c3a95b8a6906c3aeb1647f77a34518f44a645a985217ce9965be55a4a5190564bceb704b8761ca4456b71fc37aad7f613d0b047be1af4c61c27
+  data.tar.gz: c08b686b732a4f146ad9ca5ff039ad4d8ca16f95b1ffb52c6b67c3b85599690274379490cca405f8108ed4aeb399aecd519e5168868da1dc567c8e82abb51d8b

data/README.md

@@ -9,7 +9,10 @@
     alt="Donate (Ko-fi)" />
 </a>
 
-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.
+Hey, nice to meet you, you found this [Jekyll][jekyll] theme. Here the
+**Yet Another Theme** is a modern responsive theme, and it's quiet clear,
+clean and neat for writers and posts. **If you like the theme, give it
+a star!**
 
 
 <p align="center">
@@ -18,7 +21,7 @@ Hey, nice to meet you, you found this Jekyll theme. Here the yet another theme i
 
 </p>
 
-<h3 align="center">Night Mode</h3>
+<h3 align="center">🌌 Night Mode</h3>
 
 <p align="center">
 
@@ -29,6 +32,7 @@ Hey, nice to meet you, you found this Jekyll theme. Here the yet another theme i
 ## Features
 
 - Support beautiful __Night Mode__.
+- Modern responsive web design.
 - Full layouts `home`, `post`, `tags`, `archive` and `about`.
 - Uses font awesome 5 for icons.
 - Beautiful Syntax Highlight using [hilight.js][hilight-js].
@@ -46,6 +50,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
@@ -60,20 +72,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/code-highlight.html

@@ -0,0 +1,91 @@
+<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>
+
+{%- assign name = 'code_badge.enabled' -%}
+{%- include functions.html func='get_value' default='true' -%}
+{%- assign badge_enabled = return -%}
+
+{%- assign name = 'code_badge.color' -%}
+{%- include functions.html func='get_value' default='#fff' -%}
+{%- assign badge_color = return -%}
+
+{%- assign name = 'code_badge.background_color' -%}
+{%- include functions.html func='get_value' default='#ff4e00' -%}
+{%- assign badge_background_color = return -%}
+
+{%- assign name = 'code_badge.text_transform' -%}
+{%- include functions.html func='get_value' default='uppercase' -%}
+{%- assign badge_text_transform = return -%}
+
+<script>
+// Init highlight js
+document.addEventListener('DOMContentLoaded', function(event) {
+  var els = document.querySelectorAll('pre code')
+
+  function addLangData(block) {
+    var outer = block.parentElement.parentElement.parentElement;
+    var lang = block.getAttribute('data-lang');
+    for (var i = 0; i < outer.classList.length; i++) {
+      var cls = outer.classList[i];
+      if (cls.startsWith('language-')) {
+        lang = cls;
+        break;
+      }
+    }
+    if (!lang) {
+      cls = block.getAttribute('class');
+      lang = cls ? cls.replace('hljs ', '') : '';
+    }
+    if (lang.startsWith('language-')) {
+      lang = lang.substr(9);
+    }
+    block.setAttribute('class', 'hljs ' + lang);
+    block.parentNode.setAttribute('data-lang', lang);
+  }
+
+  function addBadge(block) {
+    var enabled = ('{{ badge_enabled }}' || 'true').toLowerCase();
+    if (enabled == 'true') {
+      var pre = block.parentElement;
+      pre.classList.add('badge');
+    }
+  }
+
+  function handle(block) {
+    addLangData(block);
+    addBadge(block)
+    hljs.highlightBlock(block);
+  }
+
+  for (var i = 0; i < els.length; i++) {
+    var el = els[i];
+    handle(el);
+  }
+});
+</script>
+
+<style>
+  /* code language badge */
+  pre.badge::before {
+    content: attr(data-lang);
+    color: {{badge_color}};
+    background-color: {{badge_background_color}};
+    padding: 0 .5em;
+    border-radius: 0 2px;
+    text-transform: {{badge_text_transform}};
+    text-align: center;
+    min-width: 32px;
+    display: inline-block;
+    position: absolute;
+    right: 0;
+  }
+
+  /* fix wrong badge display for firefox browser */
+  code > table pre::before {
+    display: none;
+  }
+</style>

data/_includes/extensions/theme-toggle.html

@@ -9,22 +9,30 @@
   </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 nightModeOption = ('{{ night_mode }}' || 'auto').toLowerCase();
+    var storage = nightModeOption === 'manual'
+        ? localStorage
+        : sessionStorage;
     var themeData = loadThemeData();
 
     function saveThemeData(data) {
-      localStorage.setItem('theme', JSON.stringify(data));
+      storage.setItem('theme', JSON.stringify(data));
     }
 
     function loadThemeData() {
-      var data = localStorage.getItem('theme');
+      var data = storage.getItem('theme');
       try {
         data = JSON.parse(data ? data : '');
       } catch(e) {
-        data = { nightShift: null, autoToggleAt: 0 };
+        data = { nightShift: undefined, autoToggleAt: 0 };
         saveThemeData(data);
       }
       return data;
@@ -72,19 +80,29 @@
       };
     }
 
-    var data = autoThemeToggle();
-
     // Listen the theme toggle event
     sw.addEventListener('change', function(event) {
       handleThemeToggle(event.target.checked);
     });
 
-    // Toggle theme by local setting
-    if (data.toggleAt > themeData.autoToggleAt) {
-      themeData.autoToggleAt = data.toggleAt;
-      handleThemeToggle(data.nightShift);
-    } else {
+    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 {
+      var nightShift = themeData.nightShift;
+      if (nightShift === undefined) {
+        nightShift = nightModeOption === 'on';
+      }
+      handleThemeToggle(nightShift);
     }
   })();
 </script>

data/_includes/functions/get_value.html

@@ -2,6 +2,9 @@
   {%- assign name = include.params.name -%}
 {%- endif -%}
 
+{%- assign keys = name | split:'.'- %}
+{%- assign name = keys.first -%}
+
 {%- if page[name] != nil -%}
   {%- assign return = page[name] -%}
 {%- elsif site[name] != nil -%}
@@ -17,3 +20,13 @@
 {%- else -%}
   {%- assign return = include.params.default -%}
 {%- endif -%}
+
+{%- assign keys = keys | shift -%}
+{%- for key in keys -%}
+  {%- assign return = return[key] -%}
+  {%- if return == nil -%}
+    {%- assign return = include.params.default -%}
+    {%- break -%}
+  {%- endif -%}
+{%- endfor -%}
+

data/_includes/head.html

@@ -7,16 +7,11 @@
   <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="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 -%}
   {%- endif -%}
+  {%- include extensions/code-highlight.html -%}
 </head>

data/_includes/views/footer.html

@@ -3,7 +3,7 @@
 
   <div class="wrapper">
     <div class="site-footer-inner">
-      <div>{{ site.copyright }} @{{ site.author | escape }}</div>
+      <div>{{ site.copyright }} {% if site.author %}@{{ site.author | escape }}{% endif %}</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>

data/_sass/misc/gitment.scss

@@ -0,0 +1,12 @@
+.gitment-container {
+  color: #787878 !important;
+}
+
+.gitment-comment-main, .gitment-editor-main {
+  background-color: #fff;
+  border-radius: 3px !important;
+}
+
+.gitment-heart-icon {
+  fill: #ff0808;
+}

data/_sass/misc/theme-toggle.scss

@@ -1,10 +1,10 @@
 .theme-toggle {
   position: relative;
-  width: 102px;
+  width: $base-font-size * 7.65;
   margin-top: 10px;
   margin-right: 60px;
   margin-left: auto;
-  transition: 0.1s all ease-in-out;
+  transition: .3s cubic-bezier(.4,.03,0,1);
 
   label, .toggle {
     border-radius: 100px;
@@ -69,7 +69,7 @@
   }
 
   @include media-query($on-palm) {
-    width: 94px;
+    width: $base-font-size * 6.65;
     margin-right: 20px;
 
     .names {

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;
 
@@ -65,5 +65,6 @@ $on-laptop:        800px !default;
   "misc/theme-toggle",
   "misc/article-menu",
   "misc/common-list",
-  "misc/google-translate"
+  "misc/google-translate",
+  "misc/gitment"
 ;

data/_sass/yat/_base.scss

@@ -148,10 +148,9 @@ code {
 }
 
 *:not(pre) > code {
-  padding: 1px 5px;
+  padding: 3px 6px;
   border-radius: 3px;
-  color: #fff;
-  background-color: #787878;
+  background-color: #eee;
   margin: 0 5px;
 }
 
@@ -160,21 +159,6 @@ pre {
   position: relative;
   background-color: #f0f0f0;
 
-  // code language badge
-  &:before {
-    content: attr(data-lang);
-    color: #fff;
-    background-color: #ff4e00;
-    padding: 0 .5em;
-    border-radius: 0 2px;
-    text-transform: uppercase;
-    text-align: center;
-    min-width: 32px;
-    display: inline-block;
-    position: absolute;
-    right: 0;
-  }
-
   > code {
     display: inline-block;
     padding: 20px!important;
@@ -221,11 +205,13 @@ pre {
  * Tables
  */
 table {
+  display: block;
   margin-bottom: $spacing-unit;
   width: 100%;
   text-align: $table-text-align;
   color: lighten($text-color, 5%);
   border-collapse: collapse;
+  overflow: auto;
 
   tr {
     &:nth-child(even) {

data/_sass/yat/_dark.scss

@@ -1,4 +1,5 @@
 $dark-background-color:       #0e0e0e !default;
+$dark-text-color: #bbb !default;
 
 html[data-theme="dark"]  {
 
@@ -10,23 +11,24 @@ html[data-theme="dark"]  {
   }
 
   body {
-    color: #bbb;
+    color: $dark-text-color;
     background-color: $dark-background-color;
   }
 
   *:not(pre) > code {
-    background-color: #545454;
+    color: $dark-text-color;
+    background-color: #454545;
   }
 
   table {
     color: #9d9d9d;
 
     th {
-      background-color: #000;
+      background-color: #050505;
     }
 
     tr:nth-child(even) {
-      background-color: #111;
+      background-color: #080808;
     }
   }
 
@@ -48,11 +50,22 @@ html[data-theme="dark"]  {
     .ct-language-dropdown {
       color: #f8f8f8;
       background-color: $dark-background-color;
+      box-shadow: 0 0 3px 1px #0000005b;
     }
 
     .ct-language-selected, .ct-language-dropdown li:hover {
       background-color: #222 !important;
     }
+
+    @include media-query($on-laptop) {
+      .menu-icon > svg {
+          fill: rgba($dark-text-color, 80%);
+      }
+
+      .site-nav input:checked ~ .trigger {
+        background-color: #090909;
+      }
+    }
   }
 
   .site-footer {
@@ -74,7 +87,7 @@ html[data-theme="dark"]  {
 
   .pagination {
     .post-link {
-      color: #bbb;
+      color: $dark-text-color;
     }
 
     .post-title {
@@ -171,7 +184,7 @@ html[data-theme="dark"]  {
         }
 
         a {
-          color: #bbb;
+          color: $dark-text-color;
         }
 
         a:hover {

data/_sass/yat/_layout.scss

@@ -228,10 +228,10 @@ html {
   }
 
   .post-tags {
-    display: inline-block;
     padding-right: 150px;
 
     .post-tag {
+      display: inline-block;
       margin: 0 12px 0 0;
     }
   }
@@ -497,6 +497,7 @@ html {
     @include relative-font-size(1.125);
     line-height: 15px;
     color: #666;
+    max-width: 50%;
   }
 
   .previous:before {

data/assets/js/main.js

@@ -56,32 +56,3 @@ function smoothScrollTo(y, time) {
   }
 }
 
-// Init highlight js
-document.addEventListener('DOMContentLoaded', function(event) {
-  var els = document.querySelectorAll('pre code')
-  function handle(block) {
-    var outer = block.parentElement.parentElement.parentElement;
-    var lang = block.getAttribute('data-lang');
-    for (var i = 0; i < outer.classList.length; i++) {
-      var cls = outer.classList[i];
-      if (cls.startsWith('language-')) {
-        lang = cls;
-        break;
-      }
-    }
-    if (!lang) {
-      cls = block.getAttribute('class');
-      lang = cls ? cls.replace('hljs ', '') : '';
-    }
-    if (lang.startsWith('language-')) {
-      lang = lang.substr(9);
-    }
-    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.6.0
+  version: 1.7.0
 platform: ruby
 authors:
 - jeffreytse
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-10-03 00:00:00.000000000 Z
+date: 2021-01-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -151,6 +151,7 @@ files:
 - README.md
 - _data/defaults.yml
 - _data/translate_langs.yml
+- _includes/extensions/code-highlight.html
 - _includes/extensions/comments/disqus.html
 - _includes/extensions/comments/gitment.html
 - _includes/extensions/geopattern.html
@@ -196,6 +197,7 @@ files:
 - _layouts/tags.html
 - _sass/misc/article-menu.scss
 - _sass/misc/common-list.scss
+- _sass/misc/gitment.scss
 - _sass/misc/google-translate.scss
 - _sass/misc/theme-toggle.scss
 - _sass/yat.scss
@@ -225,8 +227,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: []