jekyll-theme-yat 1.3.1 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0954d4c51777697199a54a66a627b3cc90409d59848d14df4abb9764dda0d2e8'
-  data.tar.gz: ce60f95ab927cc5906660ab535d4b7cfdafa7184880fe0f1e51937e824626ee4
+  metadata.gz: 98ac82995fa7fe0f023cfdbbb2aa005413c8839adfaf3db2cf1a44b6b28b952d
+  data.tar.gz: 2e955f528fe54844e7ffbf5605a2f93b3eaf0f5bfa9a9465a1b4dbd518cb80bd
 SHA512:
-  metadata.gz: dd5cfab85c8b5bf0ad083288b9a5c59b49d99e51b3bb6927e2d8c24870721734290333d71a8f295bd780913ecf59516d005914b9567f64562b47456801694e1a
-  data.tar.gz: e990d15e9c98b43d10e4e274d5a26130a3e980cdd579a35b20406a8b5a4c21d6e8d9cf58bd0d52ccb63149f13083fb4a86ec12e486db5a7397d0dde16c26eabb
+  metadata.gz: 4c860e189b2e200c9723262207f8d5d8e69840c710faa4375b84ef99ac542a11fd30dfb19a09dafbc7bdf95fd38c86b4ad54c26e36b1fd3f8fa0e7147457db56
+  data.tar.gz: 63e1b8843f8ae8be5234623a914f32cbc7411f9322c5b9b083cedafe2dee51255c41b93dddc378e8046cf0dae57b286b4a886a4d5118037e52d758c41885b672

data/README.md

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

data/_data/translate_langs.yml

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

data/_includes/functions/get_reading_time.html

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

data/_includes/head.html

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

data/_includes/sidebar/article-menu.html

@@ -7,7 +7,7 @@
 </style>
 
 <div class="post-menu">
-  <div class="post-menu-title">Contents</div>
+  <div class="post-menu-title">TOC</div>
   <div class="post-menu-content"></div>
 </div>
 
@@ -49,7 +49,8 @@
         var headerHeight = headerTop + headerHeight + 20;
         if (headingRect.top <= headerHeight) {
           var id = 'h-' + h.getAttribute('id');
-          var curActive = menuContent.querySelector('a[href="#' + id  + '"]');
+          var a = menuContent.querySelector('a[href="#' + id  + '"]');
+          var curActive = a.parentNode;
           if (curActive) {
             curActive.classList.add('active');
           }

data/_includes/views/banner.html

@@ -19,20 +19,9 @@
 {% assign subheading = return %}
 
 {% if banner %}
-
-  {% assign auto_banner = true %}
-  {% assign array = banner | split: '/' %}
-  {% assign protocol = array[0]  %}
-
-  {% if array.size > 1 and (protocol == '' or protocol == 'http:' or protocol == 'https:') %}
-    {% assign auto_banner = false %}
-  {% endif %}
-
   <section class="page-banner">
     <div class="page-banner-img">
-      {%- if auto_banner == false -%}
-        <div style="background-image: url({{ banner }})"></div>
-      {%- endif  -%}
+      <div style="background-image: url({{ banner }})"></div>
     </div>
     <div class="wrapper">
       <div class="page-banner-inner">
@@ -48,36 +37,14 @@
             <h1 class="page-banner-heading">
               {{ heading | default: page.title | escape }}
             </h1>
-            <h3 class="page-banner-subheading">
+            <h2 class="page-banner-subheading">
               {{ subheading | default: page.subtitle | escape }}
-            </h3>
+            </h2>
           </div>
 
         {%- endif -%}
       </div>
     </div>
   </section>
-
-  {%- if auto_banner -%}
-
-    {%- assign selector = ".page-banner-img" -%}
-
-    {%- if banner == "default" -%}
-
-      {%- assign heading = page.heading | default: page.title | escape -%}
-      {%- assign subheading = page.subheading | default: page.subtitle | escape -%}
-      {%- assign seed = page.date | append: heading | append: subheading -%}
-
-    {%- else -%}
-
-      {%- assign seed = 'theme-' | append: banner -%}
-
-    {%- endif -%}
-
-    {%- assign zoom = 1.5 -%}
-    {%- include extensions/trianglify.html -%}
-
-  {%- endif -%}
-
 {%- endif -%}
 

data/_includes/views/header.html

@@ -7,7 +7,7 @@
 {%- 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 %}
+{% assign header_transparent = return | default: true %}
 
 {%- if banner and header_transparent -%}
   {%- assign header_transparent_class = "site-header-transparent" -%}
@@ -39,9 +39,7 @@
             {%- for path in page_paths -%}
               {%- assign my_page = site.pages | where: "path", path | first -%}
               {%- if my_page.title -%}
-              <a class="page-link" href="{{ my_page.url | relative_url }}">
-                {{ my_page.title | upcase | escape }}
-              </a>
+              <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | upcase | escape }}</a>
               {%- endif -%}
             {%- endfor -%}
 

data/_includes/views/pagination.html

@@ -11,16 +11,29 @@
     {%- for post in paginator.posts -%}
     <li>
       {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
-      <span class="post-meta">{{ post.date | date: date_format }}</span>
-      <h3>
+
+      {% assign article = post.content %}
+      {%- include functions.html func='get_reading_time' -%}
+      {% assign reading_time = return %}
+
+      <h2 class="post-title">
         {%- assign post_url = post.url | relative_url -%}
         <a class="post-link" href="{{ post_url }}">
           {{ post.title | escape }}
         </a>
-      </h3>
+      </h2>
+      <div class="post-meta">
+        <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>
+      <div class="post-tags">
+        {%- for tag in post.tags -%}
+        <a class="post-tag" href="/tags.html#{{tag}}">#{{tag}}</a>
+        {%- endfor -%}
+      </div>
     </li>
     {%- endfor -%}
   </ul>

data/_includes/views/paginator.html

@@ -3,19 +3,23 @@
 {% endif %}
 
 {% if paginator.posts.size > 0 %}
-  <div class="pagination">
+  <div class="paginator">
+    <span class="previous">
     {% if paginator.previous_page %}
-      <a href="{{ paginator.previous_page_path }}">&laquo; Prev</a>
+      <a href="{{ paginator.previous_page_path }}">Prev</a>
     {% else %}
-      <span>&laquo; Prev</span>
+      <span>Prev</span>
     {% endif %}
+    </span>
 
-    <span> {{ paginator.page }}/{{ paginator.total_pages }}</span>
+    <span class="indicator"> {{ paginator.page }}/{{ paginator.total_pages }}</span>
 
+    <span class="next">
     {% if paginator.next_page %}
-      <a href="{{ paginator.next_page_path }}">Next &raquo;</a>
+      <a href="{{ paginator.next_page_path }}">Next</a>
     {% else %}
-      <span>Next &raquo;</span>
+      <span>Next</span>
     {% endif %}
+    </span>
   </div>
 {% endif %}

data/_includes/views/post-header.html

@@ -1,11 +1,25 @@
 <header class="post-header">
   <h1 class="post-title p-name" itemprop="name headline">{{ heading | default: page.title | escape }}</h1>
-  <h3>{{ subheading | default: page.subtitle | escape }}</h3>
+  <h3 class="post-subtitle">{{ subheading | default: page.subtitle | escape }}</h3>
 
   <p class="post-meta">
     <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
       {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
-      {{ page.date | date: date_format }}
+      <i class="fa fa-calendar"></i> {{ page.date | date: date_format }}
     </time>
+
+    {% assign article = page.content %}
+    {%- 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>
   </p>
+
+  {%- if page.tags.size > 0 -%}
+  <div class="post-tags">
+    {%- for tag in page.tags -%}
+    <a class="post-tag" href="/tags.html#{{tag}}">#{{tag}}</a>
+    {%- endfor -%}
+  </div>
+  {%- endif -%}
+
 </header>

data/_layouts/post.html

@@ -1,6 +1,6 @@
 ---
 layout: framework
-banner: 'default'
+banner:
 banner_html: post-header.html
 sidebar:
   - article-menu
@@ -21,18 +21,29 @@ sidebar:
 
     <div class="post-nav">
       {%- if page.previous -%}
-      <a href="{{ page.previous.url }}" title="{{ page.previous.title | escape }}">&laquo; Prev</a>
+        <a class="previous" href="{{ page.previous.url }}" title="{{
+          page.previous.title | escape }}">{{ page.previous.title | escape | truncatewords: 6 }}</a>
       {%- else -%}
       <span></span>
       {%- endif -%}
 
       {%- if page.next -%}
-      <a href="{{ page.next.url }}" title="{{ page.next.title | escape }}">Next &raquo;</a>
+        <a class="next" href="{{ page.next.url }}" title="{{ page.next.title | escape }}">{{ page.next.title | escape | truncatewords: 6 }}</a>
       {%- else -%}
       <span></span>
       {%- endif -%}
     </div>
 
+    <div class="post-related">
+      <div>Related Articles</div>
+      <ul>
+        {% assign posts = site[page.collection] | sample:4 %}
+        {%- for post in posts -%}
+        <li><a class="post-link" href="{{post.url}}" title="{{ page.next.title | escape }}">{{ post.title | escape | truncatewords: 12 }}</a></li>
+        {%- endfor -%}
+      </ul>
+    </div>
+
     {%- if page.comments != false -%}
 
     {%- if site.disqus.shortname -%}
@@ -47,5 +58,3 @@ sidebar:
 
   </section>
 </div>
-
-

data/_sass/misc/article-menu.scss

@@ -7,40 +7,54 @@
   max-width: 250px;
 
   .post-menu-title {
-    font-size: $base-font-size * 1.35;
-    margin-bottom: 6px;
+    font-size: $base-font-size * 1.5;
+    margin-bottom: 14px;
     font-weight: 600;
-    color: #4e4e4e;
-
-    &:before {
-      content: '\f02e';
-      margin-right: 5px;
-      font-size: $base-font-size * 1.15;
-    }
+    color: #222;
   }
 
   .post-menu-content {
     ul {
+      border-left: 1px solid #e9ecef;
+      $indent: $base-font-size / 4;
+      $active-bgcolor: #ecebec;
+
       @for $i from 2 to 7 {
         .h-h#{$i} {
-          padding-left: ($i - 2) * $base-font-size * 0.9;
-          font-size: (7 - $i) + $base-font-size * 0.9;
+          padding-inline-start: $indent + ($i - 2) * $base-font-size * 1.3;
+          font-size: $base-font-size * 1.2;
+          line-height: 1.4;
         }
       }
 
       a {
         display: flex;
-        padding: 0px 8px;
+        padding: 2px 8px;
+        color: darken($text-color, 10%);
 
         * {
           pointer-events: none;
         }
+
+        &:hover {
+          text-decoration: none;
+          color: lighten($text-color, 20%)!important;
+        }
       }
 
       .active {
-        color: white;
-        background: mix(invert($theme-color), darkorange);
+        background-color: $active-bgcolor;
         transition: background 0.5s;
+        border-left: 2px solid #202020;
+        margin-left: -2px;
+
+        &:hover {
+          background-color: lighten($active-bgcolor, 2%);
+        }
+
+        a {
+          color: #121416;
+        }
       }
     }
   }

data/_sass/misc/common-list.scss

@@ -3,10 +3,6 @@
  */
 .common-list {
   @include relative-font-size(1.0);
-
-  background: #eaeaea;
-  box-shadow: 0px 0px 3px 0px #a9a9a9;
-  border-radius: 3px;
   min-width: 200px;
 
   ul {
@@ -15,7 +11,7 @@
   }
 
   li {
-    border-bottom: solid 1px #fff;
+    border-bottom: solid 1px #00000018;
 
     &:last-child {
       border-bottom: none;
@@ -26,8 +22,8 @@
       justify-content: space-between;
       padding: 8px 12px;
       text-decoration: none;
-      font-weight: 600;
-      color: mix($theme-color, #666);
+      font-weight: normal;
+      color: $text-color;
       transition: background 0.2s;
 
       &:hover {
@@ -40,7 +36,7 @@
       display: inline-block;
       border-radius: 10px;
       align-self: center;
-      background: darken(invert($theme-color), 20%);
+      background: #000000bd;
       padding: 0px 8px;
       margin-left: 20px;
       color: $white-color;