jekyll-theme-yat 1.7.0 → 1.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2e64474766ce139b9a917d18a8a2fe0ff867b0bcc7c343349ab6819bd8990fbd
-  data.tar.gz: 279eeb6dd5e6a47244ae9516824fbf157e77b92c97a6ecf19604a1e04706c3c9
+  metadata.gz: ac1737e727da75e5ea98d69effa7a2a6cfb67983d629ad50d7c68d53ed8e8acf
+  data.tar.gz: a6a0d53cd3cd7f3f8ac132124212b13e11fbb9302601cfb741788294dadaac17
 SHA512:
-  metadata.gz: 28b59c6996eb0c3a95b8a6906c3aeb1647f77a34518f44a645a985217ce9965be55a4a5190564bceb704b8761ca4456b71fc37aad7f613d0b047be1af4c61c27
-  data.tar.gz: c08b686b732a4f146ad9ca5ff039ad4d8ca16f95b1ffb52c6b67c3b85599690274379490cca405f8108ed4aeb399aecd519e5168868da1dc567c8e82abb51d8b
+  metadata.gz: d8c7650349f043503af65a144074e800dbb51b16973d23d56d432e3b777bd86919596f94cdd5e9c55de99f3de68edc302b729a860df322a21efc20fff4da9fb9
+  data.tar.gz: 065105e678deaf52fdef4b0f4dd89b878a84ff7e3b29ef6007d26099b5d00f079668e0fa30aaef0a2ce4258ec9823108123af80602c2b5e23088e047d52e3e0d

data/README.md

@@ -1,41 +1,91 @@
-# jekyll-theme-yat
-[![Github Pages](https://github.com/jeffreytse/jekyll-theme-yat/workflows/Github%20Pages/badge.svg)](https://jeffreytse.github.io/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">
+<div align="center">
+  <br>
+
+  <a href="https://github.com/jeffreytse/jekyll-theme-yat">
+    <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>
+
+</div>
+
+<h4 align="center">
+  <a href="https://jekyllrb.com/" target="_blank"><code>Jekyll</code></a> theme for elegant writers.
+</h4>
+
+<p align="center">
+  <a href="https://jeffreytse.github.io/jekyll-theme-yat">
+    <img src="https://github.com/jeffreytse/jekyll-theme-yat/workflows/Github%20Pages/badge.svg"
+      alt="Github Pages" />
+  </a>
+
+  <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>
+
+  <a href="https://opensource.org/licenses/MIT">
+    <img src="https://img.shields.io/badge/License-MIT-brightgreen.svg"
+      alt="License: MIT" />
+  </a>
+
+  <a href="https://liberapay.com/jeffreytse">
+    <img src="https://img.shields.io/liberapay/goal/jeffreytse.svg?logo=liberapay"
+      alt="Donate (Liberapay)" />
+  </a>
+
+  <a href="https://patreon.com/jeffreytse">
+    <img src="https://img.shields.io/badge/support-patreon-F96854.svg?style=flat-square"
+      alt="Donate (Patreon)" />
+  </a>
+
+  <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>
+  alt="Donate (Ko-fi)" />
+  </a>
+</p>
+
+<div align="center">
+  <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
 
-- 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 Syntax Highlight using [hilight.js][hilight-js].
+- 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.
 - Sitemap support using [Jekyll Sitemap][jekyll-sitemap] gem.
@@ -107,15 +157,14 @@ And then execute:
 $ bundle
 ```
 
-## GitHub Pages without limitation
+### 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
 
 Add or update your available layouts, includes, sass and/or assets.
@@ -140,6 +189,7 @@ You can start by [opening an issue](https://github.com/jeffreytse/jekyll-theme-y
 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/
@@ -147,4 +197,4 @@ This theme is licensed under the [MIT license](https://opensource.org/licenses/m
 [jekyll-seo-tag]: https://github.com/jekyll/jekyll-seo-tag
 [jekyll-sitemap]: https://github.com/jekyll/jekyll-sitemap
 [jekyll-feed]: https://github.com/jekyll/jekyll-feed
-[hilight-js]: https://github.com/highlightjs/highlight.js
+[highlight-js]: https://github.com/highlightjs/highlight.js

data/_data/translate_langs.yml

@@ -1,26 +1,26 @@
-# Translate languges
+# Translate languages
 # langs refer to https://cloud.google.com/translate/docs/languages
 
 - lang: en
-  img: https://www.countryflags.io/us/flat/64.png
+  img: https://cdn.countryflags.com/thumbs/united-states-of-america/flag-400.png
   text: English
 
 - lang: fr
-  img: https://www.countryflags.io/fr/flat/64.png
-  text: Franch
+  img: https://cdn.countryflags.com/thumbs/france/flag-400.png
+  text: French
 
 - lang: zh-CN
-  img: https://www.countryflags.io/cn/flat/64.png
+  img: https://cdn.countryflags.com/thumbs/china/flag-400.png
   text: Chinese(Simple)
 
 - lang: ja
-  img: https://www.countryflags.io/jp/flat/64.png
-  text: Japan
+  img: https://cdn.countryflags.com/thumbs/japan/flag-400.png
+  text: Japanese
 
 - lang: ko
-  img: https://www.countryflags.io/kr/flat/64.png
+  img: https://cdn.countryflags.com/thumbs/south-korea/flag-400.png
   text: Korean
 
 - lang: ru
-  img: https://www.countryflags.io/ru/flat/64.png
-  text: Russia
+  img: https://cdn.countryflags.com/thumbs/russia/flag-400.png
+  text: Russian

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/extensions/hashlocate.html

@@ -1,6 +1,7 @@
 <script>
   function hashLocate(hashValue) {
     hashValue = hashValue.replace(/^.*#h-/, '');
+    hashValue = decodeURIComponent(hashValue);
     var element = document.getElementById(hashValue);
 
     if (!element) {

data/_includes/functions/get_article_excerpt.html

@@ -0,0 +1,39 @@
+{% if include.params.article %}
+  {% assign article = include.params.article %}
+{% endif %}
+
+{% if include.params.lang %}
+  {% assign lang = include.params.lang %}
+{% else %}
+  {% assign lang = lang | default: site.lang | default: "en" %}
+{% endif %}
+
+{% if include.params.excerpt_size %}
+  {% assign excerpt_size = include.params.excerpt_size %}
+{% else %}
+  {% assign excerpt_size = excerpt_size
+    | default: site.excerpt_size
+    | default: 350 %}
+{% endif %}
+
+{%- include functions.html func='get_article_words' -%}
+{% assign words = return %}
+
+{% assign _article = article | strip_html %}
+{% assign _words = _article | size %}
+
+{% assign _size = excerpt_size %}
+
+{% if lang != "en" %}
+  {% assign _size = words
+    | times: 1.0
+    | divided_by: _words
+    | times: _size
+    | round %}
+{% endif %}
+
+{% if _size > excerpt_size %}
+  {% assign _size = excerpt_size %}
+{% endif %}
+
+{% assign return = _article | truncate: _size %}

data/_includes/functions/get_article_words.html

@@ -0,0 +1,26 @@
+{% if include.params.article %}
+  {% assign article = include.params.article %}
+{% endif %}
+
+{% if include.params.lang %}
+  {% assign lang = include.params.lang %}
+{% else %}
+  {% assign lang = lang | default: site.lang | default: "en" %}
+{% endif %}
+
+{% assign words = article | number_of_words %}
+
+{% if lang != "en" %}
+  {% assign words = words
+    | times: 0.6
+    | round %}
+  {% assign words = article
+    | strip_html
+    | strip_newlines
+    | size
+    | times: 0.4
+    | plus: words
+    | round %}
+{% endif %}
+
+{% assign return = words %}

data/_includes/functions/get_banner.html

@@ -0,0 +1,68 @@
+{%- include functions.html func='log' level='debug' msg='Get banner value' -%}
+{% assign name = 'banner' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner = return %}
+
+{%- if banner.first -%}
+  {%- include functions.html func='log' level='debug' msg='Get banner_image value' -%}
+  {% assign name = 'banner.image' %}
+  {%- include functions.html func='get_value' -%}
+  {% assign banner_image = return | relative_url %}
+{%- else -%}
+  {% assign banner_image = banner | relative_url %}
+{%- endif -%}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_background value' -%}
+{% assign name = 'banner.background' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_background = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_opacity value' -%}
+{% assign name = 'banner.opacity' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_opacity = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_height value' -%}
+{% assign name = 'banner.height' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_height = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_min_height value' -%}
+{% assign name = 'banner.min_height' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_min_height = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_heading_style value' -%}
+{% assign name = 'banner.heading_style' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_heading_style = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_subheading_style value' -%}
+{% assign name = 'banner.subheading_style' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_subheading_style = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_video value' -%}
+{% assign name = 'banner.video' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_video = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_loop value' -%}
+{% assign name = 'banner.loop' %}
+{%- include functions.html func='get_value' default=true -%}
+{% assign banner_loop = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_volume value' -%}
+{% assign name = 'banner.volume' %}
+{%- include functions.html func='get_value' default=0 -%}
+{% assign banner_volume = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_start_at value' -%}
+{% assign name = 'banner.start_at' %}
+{%- include functions.html func='get_value' default=0 -%}
+{% assign banner_start_at = return %}
+
+{% if banner_image or banner_video %}
+  {% assign has_banner = true %}
+{% endif %}
+

data/_includes/functions/get_reading_time.html

@@ -2,14 +2,22 @@
   {% assign article = include.params.article %}
 {% endif %}
 
+{% if include.params.lang %}
+  {% assign lang = include.params.lang %}
+{% else %}
+  {% assign lang = lang | default: site.lang | default: "en" %}
+{% endif %}
+
 {% if include.params.speed %}
   {% assign speed = include.params.speed %}
 {% else %}
   {% assign speed = 160 %}
 {% endif %}
 
-{% assign total_mins = article
-  | number_of_words
+{%- include functions.html func='get_article_words' -%}
+{% assign words = return %}
+
+{% assign total_mins = words
   | divided_by: speed
   | at_least: 1 %}
 

data/_includes/functions/get_value.html

@@ -2,31 +2,41 @@
   {%- assign name = include.params.name -%}
 {%- endif -%}
 
-{%- assign keys = name | split:'.'- %}
+{%- assign return = nil -%}
+
+{%- assign keys = name | split:'.' -%}
 {%- assign name = keys.first -%}
+{%- assign keys = keys | shift -%}
 
-{%- if page[name] != nil -%}
-  {%- assign return = page[name] -%}
-{%- elsif site[name] != nil -%}
-  {%- assign return = site[name] -%}
-{%- elsif site.data[name] != nil -%}
-  {%- assign return = site.data[name] -%}
-{%- elsif site.defaults[page.layout][name] != nil -%}
-  {%- assign return = site.defaults[page.layout][name] -%}
-{%- elsif site.data.defaults[page.layout][name] != nil -%}
-  {%- assign return = site.data.defaults[page.layout][name] -%}
-{%- elsif layout[name] != nil -%}
-  {%- assign return = layout[name] -%}
-{%- else -%}
-  {%- assign return = include.params.default -%}
-{%- endif -%}
+{%- for step in (1..7) -%}
 
-{%- assign keys = keys | shift -%}
-{%- for key in keys -%}
-  {%- assign return = return[key] -%}
-  {%- if return == nil -%}
-    {%- assign return = include.params.default -%}
+  {%- case step -%}
+    {%- when 1 -%}
+      {%- assign return = page[name] -%}
+    {%- when 2 -%}
+      {%- assign return = site[name] -%}
+    {%- when 3 -%}
+      {%- assign return = site.data[name] -%}
+    {%- when 4 -%}
+      {%- assign return = site.defaults[page.layout][name] -%}
+    {%- when 5 -%}
+      {%- assign return = site.data.defaults[page.layout][name] -%}
+    {%- when 6 -%}
+      {%- assign return = layout[name] -%}
+    {%- else -%}
+      {%- assign return = include.params.default -%}
+  {%- endcase -%}
+
+  {%- for key in keys -%}
+    {%- assign return = return[key] -%}
+    {%- if return == nil -%}
+      {%- break -%}
+    {%- endif -%}
+  {%- endfor -%}
+
+  {%- if return != nil -%}
     {%- break -%}
   {%- endif -%}
+
 {%- endfor -%}
 

data/_includes/functions.html

@@ -16,6 +16,10 @@
   {%- include {{ include_path }} params=params-%}
 {%- endif -%}
 
+{%- if return == nil -%}
+  {%- assign return = include.default -%}
+{%- endif -%}
+
 {%- if func != 'log' -%}
   {%- assign msg = '[function]['
     | append: {{func}}

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/banner.html

@@ -3,11 +3,6 @@
 {%- 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' -%}
@@ -18,10 +13,96 @@
 {%- include functions.html func='get_value' -%}
 {% assign subheading = return %}
 
-{% if banner %}
+{%- include functions.html func='get_banner' -%}
+
+{%- if has_banner -%}
+  {%- if banner_background -%}
+  <style>
+    html .page-banner {
+      background: {{ banner_background }};
+    }
+  </style>
+  {%- endif -%}
+  {%- if banner_height -%}
+  <style>
+    {%- assign num = banner_height | times: 1 -%}
+    {%- assign unit = banner_height | replace_first: num -%}
+    {%- assign banner_min_height = banner_min_height | default: banner_height -%}
+    html .page-banner {
+      height:  {{ banner_height | times: 0.368 | append: unit }};
+      min-height: {{ banner_min_height }};
+    }
+    html[data-scroll-status="top"] .page-banner {
+      height: {{ banner_height }};
+    }
+  </style>
+  {%- endif -%}
+
+  {%- if banner_opacity -%}
+  <style>
+    html .page-banner .page-banner-img > *:first-child {
+      opacity: {{ banner_opacity }};
+    }
+
+    html[data-theme="dark"] .page-banner .page-banner-img > *:first-child {
+      opacity: {{ banner_opacity | times: 0.718 }};
+    }
+  </style>
+  {%- endif -%}
+  {%- if banner_heading_style -%}
+  <style>
+    html .page-banner .page-banner-inner > *:first-child > *:nth-child(1) {
+      {{ banner_heading_style }}
+    }
+  </style>
+  {%- endif -%}
+  {%- if banner_subheading_style -%}
+  <style>
+    html .page-banner .page-banner-inner > *:first-child > *:nth-child(2) {
+      {{ banner_subheading_style }}
+    }
+  </style>
+  {%- endif -%}
   <section class="page-banner">
     <div class="page-banner-img">
-      <div style="background-image: url({{ banner | relative_url }})"></div>
+      {%- if banner_video -%}
+        <video
+          autoplay=""
+          poster="{{ banner_image }}"
+          playsinline
+        >
+          <source src="{{ banner_video }}">
+        </video>
+        <script>
+          (function() {
+            var video = document.querySelector('.page-banner .page-banner-img > video');
+            var videoPlay = function() {
+              video.play().catch (function() {
+                  video.muted = true;
+                  video.play();
+                });
+            }
+
+            video.onloadstart = function() {
+              video.currentTime = {{ banner_start_at }};
+              video.volume = {{ banner_volume }};
+              video.muted = (video.volume == 0);
+              videoPlay();
+            }
+
+            video.onended = function() {
+              video.currentTime = {{ banner_start_at }};
+              video.volume = 0;
+            {%- if banner_loop -%}
+              video.play();
+            {%- endif -%}
+            }
+          })();
+        </script>
+      {%- else -%}
+        <div style="background-image: url({{ banner_image }})"></div>
+        <img class="img-placeholder" src="{{ banner_image }}">
+      {%- endif -%}
     </div>
     <div class="wrapper">
       <div class="page-banner-inner">

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

@@ -1,15 +1,12 @@
 
-{%- 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='get_banner' -%}
 
 {%- include functions.html func='log' level='debug' msg='Get header_transparent value' -%}
 {%- assign name = 'header_transparent' -%}
 {%- include functions.html func='get_value' default=true -%}
 {%- assign header_transparent = return -%}
 
-{%- if banner and header_transparent -%}
+{%- if has_banner and header_transparent -%}
   {%- assign header_transparent_class = "site-header-transparent" -%}
 {%- endif -%}
 
@@ -47,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>
@@ -59,7 +59,7 @@
 </header>
 
 <script>
-  (function() {
+  function initHeader() {
     var lastScrollY = getScrollPos().y;
     var documentElement = document.documentElement;
 
@@ -90,5 +90,6 @@
     });
 
     storeScrollData();
-  })();
+  }
+  document.addEventListener('DOMContentLoaded', initHeader);
 </script>

data/_includes/views/pagination.html

@@ -13,11 +13,14 @@
       {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
 
       {% assign article = post.content %}
+      {% assign lang = post.lang %}
       {%- include functions.html func='get_reading_time' -%}
       {% assign reading_time = return %}
+      {%- include functions.html func='get_article_excerpt' -%}
+      {% assign excerpt = return %}
+      {%- assign post_url = post.url | relative_url -%}
 
       <h2 class="post-title">
-        {%- assign post_url = post.url | relative_url -%}
         <a class="post-link" href="{{ post_url }}">
           {{ post.title | escape }}
         </a>
@@ -26,12 +29,14 @@
         <span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span>
         <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
       </div>
-      <p class="post-excerpt">
-        {{ post.content | strip_html | truncatewords: 50 }}
-      </p>
+      <a class="post-excerpt" href="{{ post_url }}">
+        <p>
+        {{ excerpt }} <span class="read_more">Read More</span>
+        </p>
+      </a>
       <div class="post-tags">
         {%- for tag in post.tags -%}
-        <a class="post-tag" href="/tags.html#{{tag}}">#{{tag}}</a>
+        <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a>
         {%- endfor -%}
       </div>
     </li>

data/_includes/views/post-header.html

@@ -1,6 +1,6 @@
 <header class="post-header">
   <h1 class="post-title p-name" itemprop="name headline">{{ heading | default: page.title | escape }}</h1>
-  <h3 class="post-subtitle">{{ subheading | default: page.subtitle | escape }}</h3>
+  <h2 class="post-subtitle">{{ subheading | default: page.subtitle | escape }}</h2>
 
   <p class="post-meta">
     <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
@@ -9,6 +9,7 @@
     </time>
 
     {% assign article = page.content %}
+    {% assign lang = page.lang %}
     {%- include functions.html func='get_reading_time' -%}
     {% assign reading_time = return %}
     <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>

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/gitment.scss

@@ -2,6 +2,10 @@
   color: #787878 !important;
 }
 
+.gitment-editor-header {
+  background-color: #fefefe;
+}
+
 .gitment-comment-main, .gitment-editor-main {
   background-color: #fff;
   border-radius: 3px !important;

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

@@ -2,11 +2,22 @@ $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;
+    header.site-header-transparent {
+      &.site-header {
+        @include media-query($on-laptop) {
+          .page-link {
+            color: #f8f8f8;
+          }
+        }
+      }
+    }
+
+    footer.site-footer {
+      .site-footer-inner {
+        border-top: solid 1px #2f2f2f !important;
+        transition: 0s;
+      }
     }
   }
 
@@ -20,6 +31,10 @@ html[data-theme="dark"]  {
     background-color: #454545;
   }
 
+  blockquote {
+    border-left: 4px solid #484848;
+  }
+
   table {
     color: #9d9d9d;
 
@@ -80,7 +95,7 @@ html[data-theme="dark"]  {
   .page-banner {
     .page-banner-img {
       & > *:first-child {
-        opacity: 0.8;
+        opacity: 0.718;
       }
     }
   }
@@ -127,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

@@ -23,7 +23,7 @@ html {
 
         @include media-query($on-laptop) {
           .page-link {
-            color: unset;
+            color: $header-text-color;
           }
 
           .menu-icon {
@@ -36,6 +36,7 @@ html {
     }
 
     footer.site-footer {
+      color: unset;
       background-color: transparent;
 
       .site-footer-inner {
@@ -209,6 +210,11 @@ html {
   }
 }
 
+.copyleft {
+  display: inline-block;
+  transform: rotate(180deg);
+}
+
 /**
  * Post header
  */
@@ -274,7 +280,7 @@ html {
   }
 
   .post-title {
-    margin-bottom: 2px;
+    margin-bottom: $spacing-unit * 0.2;
     transition: 0.2s all;
 
     a {
@@ -306,24 +312,28 @@ html {
   }
 
   .post-link {
-    @include relative-font-size(1.5);
+    @include relative-font-size(1.65);
     font-weight: $base-font-weight * 1.5;
-    color: #15171a;
+    color: #333;
   }
 
   .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 {
@@ -379,7 +389,11 @@ html {
     border-bottom: 1px solid #ebebeb;
 
     .post-title {
-      margin-bottom: 2px;
+      margin-bottom: 6px;
+    }
+
+    .post-subtitle {
+      font-weight: lighter;
     }
 
     .post-meta {
@@ -420,6 +434,9 @@ html {
     img, svg, iframe {
       margin-left: auto;
       margin-right: auto;
+    }
+
+    img:not(.emoji), svg, iframe {
       display: block;
     }
 
@@ -569,6 +586,15 @@ html {
       @include center-image;
       transition: 0.1s all ease-in-out;
     }
+
+    & > video {
+      width: 100vw;
+      object-fit: cover;
+    }
+
+    & > img.img-placeholder {
+      display: none;
+    }
   }
 
   .wrapper {
@@ -588,18 +614,23 @@ html {
       > :nth-child(1) {
         @include relative-font-size(3.9);
         letter-spacing: -1px;
-        margin-bottom: 16px;
+        margin-bottom: 0.1em;
         font-weight: normal;
         transition: 0.2s all;
 
         @include media-query($on-palm) {
-          @include relative-font-size(2.425);
+          @include relative-font-size(1.975);
         }
       }
 
       > :nth-child(2) {
-        font-weight: normal;
-        margin-bottom: 0;
+        font-weight: lighter;
+        margin-bottom: 0.8em;
+        transition: 0.2s all;
+
+        @include media-query($on-palm) {
+          @include relative-font-size(1.175);
+        }
       }
 
       > :last-child {

data/_sass/yat.scss

@@ -2,7 +2,7 @@
 
 // Define defaults for each variable.
 
-$base-font-family: "Noto Sans Light", AppleSDGothicNeo-Regular, "Malgun Gothic", "Apple Color Emoji", Helvetica, Arial, Oswald, sans-serif, !default;
+$base-font-family: Helvetica, Arial, Oswald, sans-serif, !default;
 $base-font-size: 14px !default;
 $base-font-weight: 400 !default;
 $small-font-size:  $base-font-size * 0.875 !default;
@@ -12,7 +12,6 @@ $spacing-unit:     30px !default;
 
 $text-color:       #454545 !default;
 $background-color: #fff !default;
-$brand-color:      #ff5100 !default;
 
 $grey-color:       #828282 !default;
 $grey-color-light: lighten($grey-color, 40%) !default;
@@ -35,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;
@@ -66,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

@@ -4,13 +4,22 @@
 
 // Default theme colors
 $theme-colors: (
-  coolblack: #090a0b,
-  spacegrey: #353535,
-  snowwhite: #ffffff,
+  "coolblack": #090a0b,
+  "spacegrey": #353535,
+  "snowwhite": #ffffff,
+);
+
+// Default brand colors
+$brand-colors: (
+  "orangered": #ff5100,
+  "greatgold": #f2cb05,
+  "greenblue": #389092,
 );
 
 $theme-name: "{{ site.theme_color }}";
+$brand-name: "{{ site.brand_color }}";
 $theme-color: map-get($theme-colors, "snowwhite");
+$brand-color: map-get($brand-colors, "orangered");
 
 @if map-has-key($theme-colors, $theme-name) {
   $theme-color: map-get($theme-colors, $theme-name);
@@ -18,4 +27,12 @@ $theme-color: map-get($theme-colors, "snowwhite");
   $theme-color: {{ site.theme_color | default: '#ffffff' }};
 }
 
+@if map-has-key($brand-colors, $brand-name) {
+  $brand-color: map-get($brand-colors, $brand-name);
+} @else if str-index($brand-name, "#") == 1 {
+  $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.7.0
+  version: 1.9.0
 platform: ruby
 authors:
 - jeffreytse
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-01-08 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
@@ -162,6 +165,9 @@ files:
 - _includes/extensions/theme-toggle.html
 - _includes/extensions/trianglify.html
 - _includes/functions.html
+- _includes/functions/get_article_excerpt.html
+- _includes/functions/get_article_words.html
+- _includes/functions/get_banner.html
 - _includes/functions/get_categories.html
 - _includes/functions/get_datetimes.html
 - _includes/functions/get_reading_time.html
@@ -196,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
@@ -212,7 +219,7 @@ licenses:
 - MIT
 metadata:
   plugin_type: theme
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -227,8 +234,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.8
-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.