jekyll-theme-yat 1.8.0 → 1.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68d64a82d730e3929877098dc29bdc3d970d2288d7d0a6a822bb6ea665cbfc79
-  data.tar.gz: 43f608c27d246a32ccb0ff3d8b6f7cbc28f836d280357e60594b1253a98a8bf5
+  metadata.gz: ac1737e727da75e5ea98d69effa7a2a6cfb67983d629ad50d7c68d53ed8e8acf
+  data.tar.gz: a6a0d53cd3cd7f3f8ac132124212b13e11fbb9302601cfb741788294dadaac17
 SHA512:
-  metadata.gz: 2c66e47b39750dbf0a1399362a9c04b98c62df4ee0590c2973a4ea6ad80729289e8a311c064ad3458114b9c73b4205ab7f8aa6cea4a7b75441e7f2397e5de2b9
-  data.tar.gz: e752d272ca91ec205e97ac5ea77fab2bc2e007b3ea385612ac94d24546afc6ec3e51aad3571a1fd032b4205d752d0fa55dd206e95e6fed708d519c33f6cbdfd3
+  metadata.gz: d8c7650349f043503af65a144074e800dbb51b16973d23d56d432e3b777bd86919596f94cdd5e9c55de99f3de68edc302b729a860df322a21efc20fff4da9fb9
+  data.tar.gz: 065105e678deaf52fdef4b0f4dd89b878a84ff7e3b29ef6007d26099b5d00f079668e0fa30aaef0a2ce4258ec9823108123af80602c2b5e23088e047d52e3e0d

data/README.md

@@ -5,7 +5,7 @@
     <img alt="jekyll-theme-yat →~ jekyll" src="https://user-images.githubusercontent.com/9413601/106478481-346fdf00-64e4-11eb-9385-1ab5329c3234.png" width="600">
   </a>
 
-  <h1>🎨 JEKYLL YAT THEME 🎨</h1>
+  <h1>JEKYLL YAT THEME</h1>
 
 </div>
 
@@ -19,7 +19,7 @@
       alt="Github Pages" />
   </a>
 
-  <a href="http://badge.fury.io/rb/jekyll-theme-yat">
+  <a href="https://badge.fury.io/rb/jekyll-theme-yat">
     <img src="https://badge.fury.io/rb/jekyll-theme-yat.svg"
       alt="Gem Version" />
   </a>
@@ -30,7 +30,7 @@
   </a>
 
   <a href="https://liberapay.com/jeffreytse">
-    <img src="http://img.shields.io/liberapay/goal/jeffreytse.svg?logo=liberapay"
+    <img src="https://img.shields.io/liberapay/goal/jeffreytse.svg?logo=liberapay"
       alt="Donate (Liberapay)" />
   </a>
 
@@ -49,36 +49,42 @@
   <sub>Built with ❤︎ by
   <a href="https://jeffreytse.net">jeffreytse</a> and
   <a href="https://github.com/jeffreytse/jekyll-theme-yat/graphs/contributors">contributors </a>
+  </sub>
 </div>
 
 <br>
 
 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!**
+_YAT (Yet Another Theme)_ is a modern responsive theme. It's quite
+clear, clean and neat for writers and posts. **If you are an elegant
+writer and focus on content, don't miss it.**
 
+<p align="center">
+Like this elegant theme? You can give it a star or sponsor me!<br>
+I will respect your crucial support and say THANK YOU!
+</p>
 
 <p align="center">
 
-  <img src="https://user-images.githubusercontent.com/9413601/91842897-6a840b00-ec87-11ea-95ca-52abcc1ac063.png" alt="demo-screenshot" width="780px"/>
+  <img src="https://user-images.githubusercontent.com/9413601/91842897-6a840b00-ec87-11ea-95ca-52abcc1ac063.png" alt="demo-screenshot" width="100%"/>
 
 </p>
 
-<h3 align="center">🌌 Night Mode</h3>
+<h4 align="center">BANNER</h4>
 
 <p align="center">
 
-  <img src="https://user-images.githubusercontent.com/9413601/94983351-760f6e00-0574-11eb-9494-5303ad6228dc.gif" alt="demo-screenshot" width="780px"/>
+  <img src="https://user-images.githubusercontent.com/9413601/123897812-ae729a00-d996-11eb-96b8-b76ba926f555.gif" alt="demo-screenshot" width="100%"/>
 
 </p>
 
-## ✨ Features
+## Features
 
-- Support beautiful __Night Mode__.
+- Support beautiful **Night Mode**.
 - Modern responsive web design.
 - Full layouts `home`, `post`, `tags`, `archive` and `about`.
 - Uses font awesome 5 for icons.
+- Beautiful page banner with image and video.
 - Beautiful Syntax Highlight using [highlight.js][highlight-js].
 - RSS support using [Jekyll Feed][jekyll-feed] gem.
 - Optimized for search engines using [Jekyll Seo Tag][jekyll-seo-tag] gem.
@@ -92,7 +98,7 @@ a star!**
 
 Also, visit the [Live Demo][yat-live-demo] site for the theme.
 
-## 🛠️  Installation
+## Installation
 
 There are three ways to install:
 
@@ -153,18 +159,17 @@ $ 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/themes](https://pages.github.com/versions/). **In other words, the third-party gems will not work normally**.
 
 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. 👍
 
-
-## 📚 Usage
+## Usage
 
 Add or update your available layouts, includes, sass and/or assets.
 
-## ✏️  Development
+## Development
 
 To set up your environment to develop this theme, run `bundle install`.
 
@@ -173,17 +178,18 @@ 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.
 
-## 🔫 Contributing
+## 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.
 
 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
+## License
 
 This theme is licensed under the [MIT license](https://opensource.org/licenses/mit-license.php) © JeffreyTse.
 
 <!-- External links -->
+
 [jekyll]: https://jekyllrb.com/
 [yat-git-repo]: https://github.com/jeffreytse/jekyll-theme-yat/
 [yat-live-demo]: https://jeffreytse.github.io/jekyll-theme-yat/

data/_data/translate_langs.yml

@@ -1,4 +1,4 @@
-# Translate languges
+# Translate languages
 # langs refer to https://cloud.google.com/translate/docs/languages
 
 - lang: en

data/_includes/custom-head.html

@@ -0,0 +1,6 @@
+{% comment %}
+  Placeholder to allow defining custom head, in principle, you can add anything here, e.g. favicons:
+
+  1. Head over to https://realfavicongenerator.net/ to add your own favicons.
+  2. Customize default _includes/custom-head.html in your source directory and insert the given code snippet.
+{% endcomment %}

data/_includes/extensions/click-to-top.html

@@ -0,0 +1,18 @@
+<div id="click-to-top" class="click-to-top">
+  <i class="fa fa-arrow-up"></i>
+</div>
+<script>
+  (function () {
+    const clickToTop = document.getElementById('click-to-top');
+    window.addEventListener('scroll', () => {
+      if (window.scrollY > 100) {
+        clickToTop.classList.add('show')
+      }else {
+        clickToTop.classList.remove('show')
+      }
+    });
+    clickToTop.addEventListener('click', () => {
+      window.smoothScrollTo(0);
+    });
+  })();
+</script>

data/_includes/extensions/comments/utterances.html

@@ -0,0 +1,51 @@
+{%- if site.utterances.follow_site_theme -%}
+<div id="utterances-placeholder"></div>
+<script>
+  const utterancesThemeFromDataTheme = () => {
+    const dataTheme = document.documentElement.getAttribute('data-theme');
+    return `github-${dataTheme}`;
+  };
+
+  const setUtterancesTheme = () => {
+    const iframe = document.querySelector('.utterances-frame');
+    if (iframe) {
+      const message = {
+        type: 'set-theme',
+        theme: utterancesThemeFromDataTheme()
+      };
+      iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+    }
+  }
+
+  // dynamic change
+  const observer = new MutationObserver((mutationsList, observer) => {
+    for (let mutation of mutationsList) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+        setUtterancesTheme();
+      }
+    }
+  });
+  observer.observe(document.documentElement, { attributes: true, childList: false, subtree: false });
+
+  let utterancesScript = document.createElement('script');
+  utterancesScript.async = true;
+  utterancesScript.src = 'https://utteranc.es/client.js';
+  utterancesScript.crossOrigin = 'anonymous';
+  utterancesScript.setAttribute('issue-term', '{{ site.utterances.issue_term }}');
+  utterancesScript.setAttribute('label', '{{ site.utterances.label }}');
+  utterancesScript.setAttribute('repo', '{{ site.utterances.repo }}');
+  utterancesScript.setAttribute('theme', utterancesThemeFromDataTheme());
+
+  const placeholder = document.getElementById('utterances-placeholder');
+  placeholder.parentNode.replaceChild(utterancesScript, placeholder);
+</script>
+{%- else -%}
+<script async
+        crossorigin="anonymous"
+        issue-term="{{ site.utterances.issue_term }}"
+        label="{{ site.utterances.label }}"
+        repo="{{ site.utterances.repo }}"
+        src="https://utteranc.es/client.js"
+        theme="{{ site.utterances.theme }}">
+ </script>
+{%- endif -%}

data/_includes/extensions/google-analytics.html

@@ -14,6 +14,6 @@
       ga('send', 'pageview');
     }
   }
-  initGoogleAnalytics();
+  window.addEventListener("load", initGoogleAnalytics);
 </script>
 

data/_includes/extensions/google-translate.html

@@ -2,6 +2,10 @@
   {% assign translate_langs = include.translate_langs %}
 {% endif %}
 
+{% if include.lang %}
+  {% assign lang = include.lang %}
+{% endif %}
+
 <div id="google_translate_element" style="display: none;">
 </div>
 
@@ -24,11 +28,17 @@
 <script type="text/javascript">
 function googleTranslateElementInit() {
   new google.translate.TranslateElement({
-    pageLanguage: '',
+    pageLanguage: '{{ lang }}',
     autoDisplay: false,
     layout: google.translate.TranslateElement.InlineLayout.VERTICAL
   }, 'google_translate_element');
 
+  // Links to cross-origin destinations are unsafe
+  var gll = document.getElementsByClassName('goog-logo-link')[0];
+  if (gll) {
+    gll.setAttribute('rel', 'noopener');
+  }
+
   function restoreLang() {
     var iframe = document.getElementsByClassName('goog-te-banner-frame')[0];
     if (!iframe) return;

data/_includes/head.html

@@ -2,9 +2,9 @@
   <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>
+  <meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c">
   {%- seo -%}
-  <link rel="shortcut icon" href="{{ site.favicon }}">
+  <link rel="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="{{ "/assets/css/main.css" | relative_url }}">
@@ -14,4 +14,5 @@
   {%- include extensions/google-analytics.html -%}
   {%- endif -%}
   {%- include extensions/code-highlight.html -%}
+  {%- include custom-head.html -%}
 </head>

data/_includes/views/footer.html

@@ -3,9 +3,17 @@
 
   <div class="wrapper">
     <div class="site-footer-inner">
-      <div>{{ site.copyright }} {% if site.author %}@{{ site.author | escape }}{% endif %}</div>
+        {%- assign currentYear = 'now' | date: "%Y" -%}
+        {%- assign copyright = site.copyright
+            | replace: '{currentYear}', currentYear
+            | replace: '{author}', site.author
+            | replace: '(c)', '&copy;'
+            | replace: '(p)', '℗'
+            | replace: '(cleft)', '<span class="copyleft">&copy;</span>'
+        -%}
+      <div>{{ copyright }}</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
+      generator." href="https://jekyllrb.com/">Jekyll</a> &amp; <a title="Yat, yet
       another theme." href="https://github.com/jeffreytse/jekyll-theme-yat">Yat Theme</a>.</div>
       <div class="footer-col rss-subscribe">Subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></div>
     </div>

data/_includes/views/header.html

@@ -44,6 +44,9 @@
             {%- include functions.html func='get_value' -%}
             {%- assign translate_langs = return -%}
             {%- if translate_langs.size > 0 -%}
+              {%- assign name = 'lang' -%}
+              {%- include functions.html func='get_value' default='en' -%}
+              {%- assign lang = return -%}
               <span class="page-link">
                   {%- include extensions/google-translate.html -%}
               </span>
@@ -56,7 +59,7 @@
 </header>
 
 <script>
-  (function() {
+  function initHeader() {
     var lastScrollY = getScrollPos().y;
     var documentElement = document.documentElement;
 
@@ -87,5 +90,6 @@
     });
 
     storeScrollData();
-  })();
+  }
+  document.addEventListener('DOMContentLoaded', initHeader);
 </script>

data/_layouts/default.html

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

data/_layouts/post.html

@@ -69,6 +69,10 @@ sidebar:
       {%- include extensions/comments/gitment.html -%}
       {%- endif -%}
 
+      {%- if site.utterances.repo -%}
+      {%- include extensions/comments/utterances.html -%}
+      {%- endif -%}
+
       {%- endif -%}
     </div>
     {%- endif -%}

data/_sass/misc/article-menu.scss

@@ -23,7 +23,7 @@
       @for $i from 2 to 7 {
         .h-h#{$i} {
           padding-inline-start: $indent + ($i - 2) * $base-font-size * 1.3;
-          font-size: $base-font-size * 1.2;
+          font-size: $base-font-size * 1.1;
           line-height: 1.4;
         }
       }

data/_sass/misc/click-to-top.scss

@@ -0,0 +1,46 @@
+.click-to-top {
+  transition: 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  right: 60px;
+  bottom: 48px;
+  background: white;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateY(10px);
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
+  font-size: 24px;
+  user-select: none;
+
+  @include media-query(1024px) {
+    width: 48px;
+    height: 48px;
+    border-radius: 24px;
+    right: 35px;
+    font-size: 20px;
+  }
+
+  @include media-query($on-palm) {
+    width: 36px;
+    height: 36px;
+    border-radius: 18px;
+    right: 20px;
+    font-size: 16px;
+  }
+}
+
+.click-to-top.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+html[data-theme="dark"] {
+  .click-to-top {
+    background: #34323D;
+  }
+}

data/_sass/misc/google-translate.scss

@@ -96,7 +96,7 @@ div#google_translate_element {
 }
 
 /* HIDE the google translate toolbar */
-.goog-te-banner-frame.skiptranslate {
+.skiptranslate {
   display: none !important;
   border: none;
   box-shadow: 0 0;

data/_sass/yat/_base.scss

@@ -17,6 +17,7 @@ body {
   font-family: $base-font-family;
   font-weight: $base-font-weight;
   font-size: #{$base-font-size};
+  font-display: swap;
   line-height: #{$base-line-height};
   color: $text-color;
   background-color: $background-color;

data/_sass/yat/_dark.scss

@@ -142,9 +142,15 @@ html[data-theme="dark"]  {
     }
   }
 
-  .post .post-content {
-    img:not([raw]) {
-      background-color: #ffffff33;
+  .post {
+    .post-header {
+      border-bottom: 1px solid #555;
+    }
+
+    .post-content {
+      img:not(.emoji):not([raw]) {
+        background-color: #ffffff33;
+      }
     }
   }
 

data/_sass/yat/_layout.scss

@@ -210,6 +210,11 @@ html {
   }
 }
 
+.copyleft {
+  display: inline-block;
+  transform: rotate(180deg);
+}
+
 /**
  * Post header
  */
@@ -314,17 +319,21 @@ html {
 
   .post-excerpt {
     color: #777;
+    word-break: break-word;
+    overflow-wrap: break-word;
   }
 
   .post-tags .post-tag {
+    display: inline-block;
     text-decoration: none;
     border: 1px solid;
     padding: 2px 4px;
     border-radius: 2px;
     transition: color 0.2s;
+    margin-bottom: 8px;
 
-    &:not(:first-child) {
-      margin-left: 8px;
+    &:not(:last-child) {
+      margin-right: 8px;
     }
 
     &:hover {
@@ -425,6 +434,9 @@ html {
     img, svg, iframe {
       margin-left: auto;
       margin-right: auto;
+    }
+
+    img:not(.emoji), svg, iframe {
       display: block;
     }
 

data/_sass/yat.scss

@@ -34,7 +34,7 @@ $banner-text-color: lighten($white-color, 0%) !default;
 $banner-background: rgba(0,0,0,0.8) !default;
 
 // Width of the content area
-$content-width:    920px !default;
+// $content-width:    920px !default;
 
 $on-palm:          600px !default;
 $on-laptop:        800px !default;
@@ -65,5 +65,6 @@ $on-laptop:        800px !default;
   "misc/article-menu",
   "misc/common-list",
   "misc/google-translate",
-  "misc/gitment"
+  "misc/gitment",
+  "misc/click-to-top"
 ;

data/assets/css/main.scss

@@ -33,4 +33,6 @@ $brand-color: map-get($brand-colors, "orangered");
   $brand-color: {{ site.brand_color | default: '#ff5100' }};
 }
 
+$content-width: {{ site.content_width | default: '920px' }};
+
 @import "yat";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-yat
 version: !ruby/object:Gem::Version
-  version: 1.8.0
+  version: 1.9.0
 platform: ruby
 authors:
 - jeffreytse
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-06-28 00:00:00.000000000 Z
+date: 2023-02-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -140,9 +140,9 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '0.2'
-description:
+description: 
 email:
-- jeffreytse.mail@gmail.com
+- hello@jeffreytse.net
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -151,9 +151,12 @@ files:
 - README.md
 - _data/defaults.yml
 - _data/translate_langs.yml
+- _includes/custom-head.html
+- _includes/extensions/click-to-top.html
 - _includes/extensions/code-highlight.html
 - _includes/extensions/comments/disqus.html
 - _includes/extensions/comments/gitment.html
+- _includes/extensions/comments/utterances.html
 - _includes/extensions/geopattern.html
 - _includes/extensions/google-analytics.html
 - _includes/extensions/google-translate.html
@@ -199,6 +202,7 @@ files:
 - _layouts/post.html
 - _layouts/tags.html
 - _sass/misc/article-menu.scss
+- _sass/misc/click-to-top.scss
 - _sass/misc/common-list.scss
 - _sass/misc/gitment.scss
 - _sass/misc/google-translate.scss
@@ -215,7 +219,7 @@ licenses:
 - MIT
 metadata:
   plugin_type: theme
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -230,8 +234,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.19
-signing_key:
+rubygems_version: 3.0.3.1
+signing_key: 
 specification_version: 4
 summary: Yet another theme for elegant writers with modern flat style and beautiful
   night/dark mode.