jekyll-text-theme 2.0.2 → 2.1.0

data/_includes/scripts/utils.js

@@ -16,7 +16,7 @@
   };
 
   window.isOverallScroller = function(node) {
-    return node === document.documentElement || node === document.body;
+    return node === document.documentElement || node === document.body || node === window;
   };
 
   window.pageLoad = (function () {

data/_includes/scripts/variables.html

@@ -1,6 +1,9 @@
 {%- include snippets/get-sources.html -%}
 {%- assign _sources = __return -%}
 
+{%- include snippets/get-nav-url.html path="/assets/search.js" -%}
+{%- assign _paths_search_js = __return -%}
+
 <script>
   (function() {
     var TEXT_VARIABLES = {
@@ -20,6 +23,9 @@
         toc: {
           selectors: '{{ site.toc.selectors | default: site.data.variables.default.toc.selectors }}'
         }
+      },
+      paths: {
+        search_js: '{{ _paths_search_js }}'
       }
     };
     window.TEXT_VARIABLES = TEXT_VARIABLES;

data/_includes/search.html

@@ -0,0 +1,24 @@
+{%- include snippets/locale-to-string.html locale=site.data.locale.CANCEL -%}
+{%- assign _locale_cancel = __return -%}
+{%- include snippets/locale-to-string.html locale=site.data.locale.SEARCH -%}
+{%- assign _locale_search = __return -%}
+
+<div class="search">
+  <div class="main">
+    <div class="search__header">{{ _locale_search }}</div>
+    <div class="search-bar">
+      <div class="search-box js-search-box">
+        <div class="search-box__icon-search"><i class="fas fa-search"></i></div>
+        <input type="text" />
+        <div class="search-box__icon-clear js-icon-clear">
+          <a><i class="fas fa-times"></i></a>
+        </div>
+      </div>
+      <button class="button button--secondary button--pill search__cancel js-search-toggle">
+        {{ _locale_cancel }}</button>
+    </div>
+    <div class="search-result js-search-result"></div>
+  </div>
+</div>
+
+<script>{%- include scripts/search.js -%}</script>

data/_includes/snippets/is_collection.html

@@ -0,0 +1,6 @@
+{%- assign _page_path_first_char = include.page.path | slice: 0, 1 -%}
+{%- if _page_path_first_char == '_' -%}
+  {%- assign __return = true -%}
+{%- else -%}
+  {%- assign __return = false -%}
+{%- endif -%}

data/_includes/snippets/prepend-baseurl.html

@@ -1 +1,4 @@
-{%- assign __return = include.path | replace:'index.html','' | prepend: site.baseurl | replace:'//','/' -%}
+{%- assign _include_path_replace_index = include.path | replace: 'index.html', '' -%}
+{%- include snippets/prepend-path.html
+  path=_include_path_replace_index
+  prepend_path=site.baseurl -%}

data/_includes/snippets/prepend-path.html

@@ -0,0 +1 @@
+{%- assign __return = include.path | prepend: '/' | prepend: include.prepend_path | replace:'//','/' -%}

data/_includes/svg/icon/social/npm.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" version="1.1" width="24px" height="24px">
+<g id="surface1">
+<path style=" fill:#D50000;" d="M 0 15 L 48 15 L 48 32 L 24 32 L 24 35 L 13 35 L 13 32 L 0 32 Z "/>
+<path style=" fill:#FFFFFF;" d="M 3 29 L 8 29 L 8 21 L 11 21 L 11 29 L 13 29 L 13 18 L 3 18 Z "/>
+<path style=" fill:#FFFFFF;" d="M 16 18 L 16 32 L 21 32 L 21 29 L 26 29 L 26 18 Z M 24 26 L 21 26 L 21 21 L 24 21 Z "/>
+<path style=" fill:#FFFFFF;" d="M 29 18 L 29 29 L 34 29 L 34 21 L 37 21 L 37 29 L 40 29 L 40 21 L 43 21 L 43 29 L 45 29 L 45 18 Z "/>
+</g>
+</svg>

data/_includes/tags.html

@@ -18,7 +18,7 @@
 <div class="site-tags js-tags">
   <ul class="menu">
     <li>
-      <button type="button" class="button button--secondary button--pill tag-button js-article-tag js-tag-show-all" data-encode="">
+      <button type="button" class="button button--secondary button--pill tag-button tag-button--all" data-encode="">
         Show All<div class="tag-button__count">{{ site.posts | size }}</div>
       </button>
     </li>
@@ -43,7 +43,7 @@
       {%- else -%}
         {%- assign _c_index = 4 -%}
       {%- endif -%}
-      <li><button type="button" class="button button--pill tag-button tag-button-{{ _c_index }} js-article-tag" data-encode="{{ _tag[0] | strip | url_encode }}">
+      <li><button type="button" class="button button--pill tag-button tag-button-{{ _c_index }}" data-encode="{{ _tag[0] | strip | url_encode }}">
           <span>{{ _tag[0] | strip }}</span><div class="tag-button__count">{{ _tag[1].size }}</div>
         </button>
       </li>

data/_layouts/archive.html

@@ -5,19 +5,13 @@ titles:
   zh: 归档
   zh-Hans: 归档
   zh-Hant: 歸檔
-show_title: false
 ---
 
 <div class="layout--archive js-all">
-  <div class="search-box js-search-box">
-    <div class="search-box__icon-search"><i class="fas fa-search"></i></div>
-    <input type="text" />
-    <div class="search-box__icon-clear js-icon-clear">
-      <div class="button button--secondary button--circle button--sm"><i class="fas fa-times"></i></div>
-    </div>
-  </div>
   {%- include tags.html -%}
-  <div class="js-result layout--archive__result"></div>
+  <div class="js-result layout--archive__result d-none">
+    {%- include article-list.html articles=site.posts type='brief' reverse=true group_by='year' -%}
+  </div>
 </div>
 
 <script>

data/_layouts/base.html

@@ -5,6 +5,7 @@ layout: none
 {%- include snippets/get-lang.html -%}
 <html lang="{{ __return }}">
   <head>
+    {%- include analytics.html -%}
     {%- include head.html -%}
     <script>
       {%- include scripts/utils.js -%}

data/_layouts/home.html

@@ -8,36 +8,9 @@ titles:
 show_title: false
 ---
 <div class="layout--home">
-
-  <div class="post-list">
-    {%- for post in paginator.posts -%}
-      <article itemscope itemtype="http://schema.org/BlogPosting">
-
-        {%- include snippets/prepend-baseurl.html path=post.url -%}
-        {%- assign _href = __return -%}
-
-        {%- include snippets/locale-to-string.html locale=site.data.locale.READMORE -%}
-        {%- assign _locale_readmore = __return -%}
-
-        <header class="article__header"><h2 itemprop="headline"><a href="{{ _href }}">{{ post.title }}</a></h2></header>
-        <div class="article__content" itemprop="description articleBody">
-          {%- assign _excerpt_type = site.excerpt_type | default: site.data.variables.default.excerpt_type  -%}
-          {%- if _excerpt_type == 'html' -%}
-            {{ post.excerpt }}
-          {%- else -%}
-            {{ post.excerpt | strip_html | truncate: 350 }}
-          {%- endif -%}
-        </div>
-
-        <p class="post-list__readmore"><a href="{{ _href }}">{{ _locale_readmore }}</a></p>
-        {%- include article-info.html -%}
-      </article>
-    {%- endfor -%}
-  </div>
-
+  {%- include article-list.html articles=paginator.posts type='common' show_excerpt=true excerpt_type=site.excerpt_type -%}
   {%- include paginator.html -%}
 </div>
-
 <script>
   {%- include scripts/home.js -%}
 </script>

data/_layouts/landing.html

@@ -16,7 +16,7 @@ full_width: true
 {%- elsif page.data.theme == 'dark' -%}
   <section class="section section--dark overlay" style="background-image: url({{ _url }});">
 {%- else -%}
-  <section class="section overlay" style="background-image: url({{ page.data.background_image.src }});">
+  <section class="section overlay" style="background-image: url({{ _url }});">
 {%- endif -%}
     <div class="section__content">
       <h1>{{ _title }}</h1>
@@ -37,12 +37,19 @@ full_width: true
   </section>
 
   {%- for _section in page.data.sections -%}
+    {%- include snippets/get-nav-url.html path=_section.background_image.src -%}
+    {%- assign _url = __return -%}
     {%- if _section.theme == 'light' -%}
-      <section class="section section--light feature" id="section-{{ forloop.index }}">
+      <section class="section section--light feature" id="section-{{ forloop.index }}"
     {%- elsif _section.theme == 'dark' -%}
-      <section class="section section--dark feature" id="section-{{ forloop.index }}">
+      <section class="section section--dark feature" id="section-{{ forloop.index }}"
     {%- else -%}
-      <section class="section feature" id="section-{{ forloop.index }}">
+      <section class="section feature" id="section-{{ forloop.index }}"
+    {%- endif -%}
+    {%- if _section.background_color -%}
+        style="background-image: url({{ _url }}); background-color: {{ _section.background_color }};">
+    {%- else -%}
+        style="background-image: url({{ _url }});">
     {%- endif -%}
 
         <div class="section__content">

data/_layouts/page.html

@@ -39,7 +39,7 @@ layout: base
   <div class="page__mask js-sidebar-hide"></div>
 
 {%- else -%}
-<div class="layout--page clearfix">
+<div class="layout--page clearfix js-page-root">
 {%- endif -%}
 
   {%- if _full_width -%}
@@ -55,7 +55,6 @@ layout: base
     {%- if _show_header -%}
       <div class="page__header">{%- include header.html -%}</div>
     {%- endif -%}
-
       <div class="page__content">
       {%- if _full_width == false -%}
         <div class ="main">
@@ -87,11 +86,21 @@ layout: base
                   {%- endif-%}
                   {%- if _show_edit_on_github -%}
                     {%- if site.repository and site.repository_tree -%}
+                      {%- include snippets/is_collection.html page=page -%}
+                      {%- assign _is_page_collection = __return -%}
                       {%- include snippets/locale-to-string.html locale=site.data.locale.POST_ON_GITHUB -%}
+                      {%- assign _locale_post_on_github = __return -%}
+                      {%- if _is_page_collection -%}
+                        {%- include snippets/prepend-path.html path=page.path prepend_path=site.collections_dir -%}
+                        {%- assign _page_path = __return -%}
+                      {%- else -%}
+                        {%- assign _page_path = page.path -%}
+                      {%- endif -%}
+                      {%- assign _github_path = site.repository | append: '/tree/' | append: site.repository_tree | append: '/' | append: _page_path | replace:'//','/' -%}
                       <span class="split-space">&nbsp;</span>
                       <a class="edit-on-github"
-                        title="{{ __return }}"
-                        href="https://github.com/{{ site.repository }}/tree/{{ site.repository_tree }}/{{ page.path }}">
+                        title="{{ _locale_post_on_github }}"
+                        href="https://github.com/{{ _github_path }}">
                         <i class="far fa-edit"></i></a>
                     {%- endif -%}
                   {%- endif -%}
@@ -99,7 +108,7 @@ layout: base
                 </div>
               {%- endif -%}
 
-              {%- include article-info.html -%}
+              {%- include article-info.html article=page -%}
 
               <div class="js-article-content">{{ content }}</div>
 
@@ -116,9 +125,11 @@ layout: base
       </div>
 
       <div class="page__footer">{%- include footer.html -%}</div>
-
     </div>
   </div>
+  {%- if _show_header -%}
+    <div class="page__search-panel">{%- include search.html -%}</div>
+  {%- endif -%}
 </div>
 
 
@@ -147,5 +158,4 @@ layout: base
 
 
 {%- include markdown-enhancements.html -%}
-{%- include pageview.html -%}
-{%- include analytics.html -%}
+{%- include pageview.html -%}

data/_sass/common/_classes.scss

@@ -4,6 +4,7 @@
   "common/classes/animation",
   "common/classes/clearfix",
   "common/classes/clickable",
+  "common/classes/display",
   "common/classes/flex",
   "common/classes/horizontal-rules",
   "common/classes/pseudo",

data/_sass/common/_function.scss

@@ -1,7 +1,7 @@
 @function get-color-theme($color) {
   @if lightness($color) < 15% {
-    @return 'dark';
+    @return "dark";
   } @else {
-    @return 'light';
+    @return "light";
   }
 }

data/_sass/common/_reset.scss

@@ -29,13 +29,13 @@ html {
 }
 
 body {
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 
 @include block-elements() {
-  margin: map-get($base, vertical-space) 0;
   padding: 0;
+  margin: map-get($base, vertical-space) 0;
 }
 
 body {
@@ -148,13 +148,13 @@ figcaption {
 }
 
 button {
+  padding: 0;
+  margin: 0;
   font-size: 1rem;
   cursor: pointer;
-  outline: none;
   background-color: transparent;
-  padding: 0;
-  margin: 0;
   border-width: 0;
+  outline: none;
 }
 
 input {

data/_sass/common/_variables.scss

@@ -66,6 +66,13 @@ $spacers: (
   5:                      map-get($base, spacer) * 3
 );
 
+$z-index: (
+  actions: 996,
+  mask: 997,
+  sidebar: 998,
+  search: 999
+);
+
 $layout: (
   header-height:          5rem,
   header-height-sm:       3rem,
@@ -81,7 +88,7 @@ $layout: (
 // 0       500      1024      -
 
 $responsive: (
-  sm:                      0px,
+  sm:                      0,
   md:                      500px,
   lg:                      1024px
 );
@@ -95,23 +102,24 @@ $link: (
   transition:             all .2s ease-in-out
 );
 
-$button: (
-  padding-y-lg:           .3rem,
-  padding-x-lg:           1.2rem,
-
-  padding-y:              .1rem,
-  padding-x:              .55rem,
+$button-height-lg:        2.3rem;
+$button-height:           1.9rem;
+$button-height-sm:        1.5rem;
 
-  padding-y-sm:           .06rem,
-  padding-x-sm:           .35rem,
-
-  font-weight:            map-get($base, font-weight-bold),
+$button: (
+  padding-y-lg:           ($button-height-lg - map-get($base, font-size-lg)) / 2,
+  padding-x-lg:           $button-height-lg / 3,
+  padding-y:              ($button-height - map-get($base, font-size)) / 2,
+  padding-x:              $button-height / 3,
+  padding-y-sm:           ($button-height-sm - map-get($base, font-size-sm)) / 2,
+  padding-x-sm:           $button-height-sm / 3,
 
   pill-radius:            4rem,
 
-  circle-diameter-lg:     2.8rem,
-  circle-diameter:        2rem,
-  circle-diameter-sm:     1.5rem,
+  circle-diameter-lg:     $button-height-lg,
+  circle-diameter:        $button-height,
+  circle-diameter-sm:     $button-height-sm,
+  font-weight:            map-get($base, font-weight-bold),
 
   transition:             all .2s ease-in-out
 );

data/_sass/common/classes/_animation.scss

@@ -1,6 +1,6 @@
 @mixin animation($value) {
   -webkit-animation: $value;
-          animation: $value;
+  animation: $value;
 }
 
 @mixin keyframes($name) {

data/_sass/common/classes/_clearfix.scss

@@ -1,11 +1,15 @@
-.clearfix {
-  &:after {
-    content: "";
+@mixin clearfix() {
+  &::after {
     display: table;
     clear: both;
+    content: "";
   }
 }
 
+.clearfix {
+  @include clearfix();
+}
+
 .left {
   float: left;
 }

data/_sass/common/classes/_clickable.scss

@@ -19,22 +19,22 @@
   // hover
   @if $hover-clr == default {
     @if $hover-bg-clr == null {
-      @if $theme == 'light' {
+      @if $theme == "light" {
         $hover-clr: darken($clr, 14%);
       }
-      @if $theme == 'dark' {
+      @if $theme == "dark" {
         $hover-clr: lighten($clr, 18%);
       }
     } @else if $hover-bg-clr == default {
-      $hover-clr: $clr
+      $hover-clr: $clr;
     }
   }
 
   @if $hover-bg-clr == default {
-    @if $theme == 'light' {
+    @if $theme == "light" {
       $hover-bg-clr: darken($bg-clr, 14%);
     }
-    @if $theme == 'dark' {
+    @if $theme == "dark" {
       $hover-bg-clr: lighten($bg-clr, 18%);
     }
   }
@@ -42,10 +42,10 @@
   // active
   @if $active-clr == default {
     @if $active-bg-clr == null {
-      @if $theme == 'light' {
+      @if $theme == "light" {
         $active-clr: darken($hover-clr, 15%);
       }
-      @if $theme == 'dark' {
+      @if $theme == "dark" {
         $active-clr: lighten($hover-clr, 16%);
       }
     } @else if $active-bg-clr == default {
@@ -54,10 +54,10 @@
   }
 
   @if $active-bg-clr == default {
-    @if $theme == 'light' {
+    @if $theme == "light" {
       $active-bg-clr: darken($hover-bg-clr, 15%);
     }
-    @if $theme == 'dark' {
+    @if $theme == "dark" {
       $active-bg-clr: lighten($hover-bg-clr, 16%);
     }
   }
@@ -75,7 +75,7 @@
     $focus-bg-clr: $hover-bg-clr;
   }
 
-  @include plain {
+  @include plain() {
     color: $clr;
     @if $bg-clr {
       background-color: $bg-clr;
@@ -84,7 +84,7 @@
       fill: $clr;
     }
   }
-  @include hover {
+  @include hover() {
     color: $hover-clr;
     @if $hover-bg-clr {
       background-color: $hover-bg-clr;
@@ -93,7 +93,7 @@
       fill: $hover-clr;
     }
   }
-  @include active {
+  @include active() {
     color: $active-clr;
     @if $active-bg-clr {
       background-color: $active-bg-clr;
@@ -102,7 +102,7 @@
       fill: $active-clr;
     }
   }
-  @include focus {
+  @include focus() {
     color: $focus-clr;
     @if $focus-bg-clr{
       background-color: $focus-bg-clr;