jekyll-text-theme 2.2.1 → 2.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 74fbab02e8f576ce07b16b9de824b112f09844ac
-  data.tar.gz: 9b07af90dd375dc0b3258f7dd91ca320c7d22be3
+  metadata.gz: 8a289b47d206254efdcf0ec13b4742d243a955fa
+  data.tar.gz: 45a185a5d48104725984416c8dc933a1b396874a
 SHA512:
-  metadata.gz: 3278366fe5b00e316295aa716374cd7b56c706ccd97391d990f01b616a55bff96c62e95f612417ecad239294363e32be8993fc2f5e64a7dffb280d159a72be24
-  data.tar.gz: b7a1760da02654e1838fef2fb594e1086f9fa2ed44b8eed3147e5bc715804feb73830a99d31e0c75d1cb68beea385a8d9528188e3d49aa6b5495801cb8ea98a3
+  metadata.gz: 6e9f7f16c8755e9764a9fdc09bdcd61d584b6f72a69f3f2b56f2801f74c094d42dfe542cfb2d2b5e81ca95cd53a81bf46a4ee3bcc4841c18e141ef9ae461638f
+  data.tar.gz: 93fd25d5153d4d2e4321ccc0e43542943db65d4e68e9de7bbc7a5d870ed05cd59fab02af97f50108d5d3b44478e41e0abd44d10db2e89b7cf0e7aa0d52e254a5

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 2.2.2 (2018-11-21)
+
+### Enhancements
+
+- Add extensions for audios (SoundCloud, Netease Cloud Music), videos (YouTube, TED, bilibili) and slide(SlideShare)
+- Add sharing (AddToAny)
+
 ## 2.2.1 (2018-10-02)
 
 ### Enhancements
@@ -7,7 +14,7 @@
 - Update screenshots
 - landing Layout `data.sections` item's `image` add `full_width` setting
 - Remove `header.type` and add `header.background` setting
-- page Layout width sidebar use document scroll when viewport width < 1024px, this enhance the user experience on a phone or a pad
+- page layout sidebar use document scroll when viewport width < 1024px, this enhance the user experience on a phone or a pad
 - Telegram social icon (@WangQiru)
 - Search panel use dark background
 

data/README.md

@@ -28,6 +28,7 @@ TeXt is a super customizable Jekyll theme for personal site, team site, blog, pr
 - Flowchart, Sequence diagram, Gantt diagram ([mermaid](https://mermaidjs.github.io/))
 - Line Chart, Bar Chart, Radar Chart, Pie Chart ([chartjs](http://www.chartjs.org/))
 - Page views ([LeanCloud](https://leancloud.cn/))
+- Share ([AddToAny](https://www.addtoany.com/))
 - Comments ([Disqus](https://disqus.com/))
 - Google Analytics
 
@@ -69,8 +70,9 @@ TeXt use [Tomorrow](https://github.com/chriskempson/tomorrow-theme) as the highl
 ### Content
 
 - [Writing Posts](https://tianqi.name/jekyll-TeXt-theme/docs/en/writing-posts)
-- [Markdown Enhancements](https://tianqi.name/jekyll-TeXt-theme/docs/en/markdown-enhancements)
 - [Additional styles](https://tianqi.name/jekyll-TeXt-theme/docs/en/additional-styles)
+- [Extensions](https://tianqi.name/jekyll-TeXt-theme/docs/en/extensions)
+- [Markdown Enhancements](https://tianqi.name/jekyll-TeXt-theme/docs/en/markdown-enhancements)
 
 ## Demo Pages
 

data/_data/variables.yml

@@ -32,6 +32,7 @@ default:
     show_tags: true
     show_author_profile: false
     full_width: false
+    sharing: false
     comment: true
     license: false
     pageview: false

data/_includes/extensions/bilibili.html

@@ -0,0 +1,5 @@
+<div class="extensions extensions--video">
+  <iframe src="//player.bilibili.com/player.html?aid={{ include.id }}&page=1"
+    frameborder="no" scrolling="no" allowfullscreen="true">
+  </iframe>
+</div>

data/_includes/extensions/netease-cloud-music.html

@@ -0,0 +1,4 @@
+<iframe class="extensions extensions--audio" width="330" height="86"
+  src="//music.163.com/outchain/player?type=2&id={{ include.id }}&auto=1&height=66"
+  frameborder="no" border="0" marginwidth="0" marginheight="0">
+</iframe>

data/_includes/extensions/slideshare.html

@@ -0,0 +1,6 @@
+<div class="extensions extensions--slide">
+  <iframe src="//www.slideshare.net/slideshow/embed_code/key/{{ include.id }}"
+    width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"
+    style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen>
+  </iframe>
+</div>

data/_includes/extensions/soundcloud.html

@@ -0,0 +1,4 @@
+<iframe class="extensions extensions--audio" width="100%" height="166"
+  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/{{ include.id }}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
+  scrolling="no" frameborder="no" allow="autoplay">
+</iframe>

data/_includes/extensions/ted.html

@@ -0,0 +1,5 @@
+<div class="extensions extensions--video">
+  <iframe src="https://embed.ted.com/talks/{{ include.id }}"
+    frameborder="0" scrolling="no" allowfullscreen>
+  </iframe>
+</div>

data/_includes/extensions/youtube.html

@@ -0,0 +1,4 @@
+<div class="extensions extensions--video">
+  <iframe src="https://www.youtube.com/embed/{{ include.id }}?showinfo=0"
+    frameborder="0" scrolling="no" allowfullscreen></iframe>
+</div>

data/_includes/scripts/variables.html

@@ -7,7 +7,7 @@
 <script>
   (function() {
     var TEXT_VARIABLES = {
-      version: '2.2.1',
+      version: '2.2.2',
       sources: {
         font_awesome: '{{ _sources.font_awesome }}',
         jquery: '{{ _sources.jquery }}',

data/_includes/sharing-providers/addtoany.html

@@ -0,0 +1,10 @@
+<!-- AddToAny BEGIN -->
+<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
+<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
+<a class="a2a_button_facebook"></a>
+<a class="a2a_button_twitter"></a>
+<a class="a2a_button_google_plus"></a>
+<a class="a2a_button_linkedin"></a>
+</div>
+<script async src="https://static.addtoany.com/menu/page.js"></script>
+<!-- AddToAny END -->

data/_includes/sharing.html

@@ -0,0 +1,3 @@
+{%- if site.sharing.provider == 'addtoany' -%}
+  {%- include sharing-providers/addtoany.html -%}
+{%- endif -%}

data/_layouts/404.html

@@ -4,8 +4,9 @@ title: 404
 show_title: false
 ---
 <div class="layout--404">
-  <div class="main">
+  <div class="sign">
     <h1>404</h1>
+    <p>Page not found :(</p>
   </div>
 </div>
 

data/_layouts/article.html

@@ -3,11 +3,19 @@ layout: page
 type: article
 ---
 
-{%- include snippets/assign.html target=site.data.variables.default.page.show_author_profile
+{%- include snippets/assign.html
+  target = site.data.variables.default.page.sharing
+  source0=layout.sharing source1=page.sharing -%}
+{%- assign _sharing = __return -%}
+
+
+{%- include snippets/assign.html
+  target=site.data.variables.default.page.show_author_profile
   source0=layout.show_author_profile source1=page.show_author_profile -%}
 {%- assign _show_author_profile = __return -%}
 
-{%- include snippets/assign.html target=site.data.variables.default.page.license
+{%- include snippets/assign.html
+  target=site.data.variables.default.page.license
   source0=layout.license source1=page.license -%}
 {%- assign _license = __return -%}
 
@@ -15,6 +23,10 @@ type: article
 
   <div class="article__content" itemprop="articleBody">{{ content }}</div>
 
+  {%- if _sharing != false -%}
+    <section class="article__sharing">{%- include sharing.html -%}</section>
+  {%- endif -%}
+
   <footer class="article__footer">
     {%- if page.modify_date -%}
       {%- include snippets/locale-to-string.html locale=site.data.locale.ARTICLE_DATE_FORMAT -%}

data/_layouts/page.html

@@ -24,18 +24,19 @@ layout: base
 
 {%- if page.sidebar -%}
 <div class="layout--page layout--page--sidebar clearfix js-page-root">
-  <div class="page__actions">
-    <div class="button button--circle button--lg box-shadow-2 sidebar-button js-sidebar-show">
-      <i class="fas fa-bars icon--show"></i>
-    </div>
-  </div>
   <div class="page__mask js-page-mask js-sidebar-hide"></div>
+  <div class="page__viewport">
+    <div class="page__actions">
+      <div class="button button--circle button--lg box-shadow-2 sidebar-button js-sidebar-show">
+        <i class="fas fa-bars icon--show"></i>
+      </div>
+    </div>
 
-  <div class="grid page__grid page__viewport">
+    <div class="grid page__grid">
 
-    <div class="page__sidebar">
-      {%- include sidebar/toc.html -%}
-    </div>
+      <div class="page__sidebar">
+        {%- include sidebar/toc.html -%}
+      </div>
 
 {%- else -%}
 <div class="layout--page js-page-root">
@@ -45,9 +46,9 @@ layout: base
     {%- if _page_mode == 'immersive' -%}
       {%- assign _page_main_class = _page_main_class | append: ' page__main--immersive' -%}
     {%- endif -%}
-    {%- if page.sidebar != true -%}
+    {%- unless page.sidebar -%}
       {%- assign _page_main_class = _page_main_class | append: ' page__viewport' -%}
-    {%- endif -%}
+    {%- endunless -%}
     {%- if page.aside -%}
       {%- assign _page_main_class = _page_main_class | append: ' has-aside' -%}
     {%- elsif _full_width -%}
@@ -198,7 +199,7 @@ layout: base
                 {%- endif -%}
 
                     <div class="js-article-content">{{ content }}</div>
-                    {%- if jekyll.environment != "development" and _comment != false -%}
+                    {%- if _comment != false -%}
                       <section class="page__comments">{%- include comments.html -%}</section>
                     {%- endif -%}
                 </article>
@@ -214,7 +215,8 @@ layout: base
       </div>
     </div> {%- comment -%} end page__main {%- endcomment -%}
 {%- if page.sidebar -%}
-  </div> {%- comment -%} end grid {%- endcomment -%}
+    </div> {%- comment -%} end grid {%- endcomment -%}
+  </div> {%- comment -%} end page__viewport {%- endcomment -%}
 {%- endif -%}
 {%- if _header != false -%}
   <div class="page__search-panel">{%- include search.html -%}</div>

data/_sass/common/_variables.scss

@@ -101,7 +101,8 @@ $responsive: (
 );
 
 $animation: (
-  duration:               .6s,
+  duration:               .4s,
+  duration-sm:            .2s,
   timing-function:        ease-in-out
 );
 

data/_sass/common/classes/_clickable.scss

@@ -1,4 +1,4 @@
-@mixin clickable($clr, $bg-clr, $hover-clr: default, $hover-bg-clr: default, $active-clr: default, $active-bg-clr: default, $focus-clr: default, $focus-bg-clr: default, $theme: default) {
+@mixin clickable($clr, $bg-clr, $hover-clr: default, $hover-bg-clr: default, $active-clr: default, $active-bg-clr: default, $focus-clr: default, $focus-bg-clr: default, $theme: default, $ignore-path: default) {
 
   @if $theme == default {
     @if $bg-clr == null and $hover-bg-clr == null {
@@ -16,6 +16,12 @@
     }
   }
 
+  @if $ignore-path == default {
+    $ignore-path: false;
+  } @else {
+    $ignore-path: true;
+  }
+
   // hover
   @if $hover-clr == default {
     @if $hover-bg-clr == null {
@@ -80,8 +86,10 @@
     @if $bg-clr {
       background-color: $bg-clr;
     }
-    svg path {
-      fill: $clr;
+    @if $ignore-path == false {
+      svg path {
+        fill: $clr;
+      }
     }
   }
   @include hover() {
@@ -89,8 +97,10 @@
     @if $hover-bg-clr {
       background-color: $hover-bg-clr;
     }
-    svg path {
-      fill: $hover-clr;
+    @if $ignore-path == false {
+      svg path {
+        fill: $hover-clr;
+      }
     }
   }
   @include active() {
@@ -98,8 +108,10 @@
     @if $active-bg-clr {
       background-color: $active-bg-clr;
     }
-    svg path {
-      fill: $active-clr;
+    @if $ignore-path == false {
+      svg path {
+        fill: $active-clr;
+      }
     }
   }
   @include focus() {
@@ -108,8 +120,10 @@
       background-color: $focus-bg-clr;
       box-shadow: 0 0 0 2px rgba($focus-bg-clr, .4);
     }
-    svg path {
-      fill: $focus-clr;
+    @if $ignore-path == false {
+      svg path {
+        fill: $focus-clr;
+      }
     }
   }
 }

data/_sass/common/classes/_link.scss

@@ -1,3 +1,3 @@
-@mixin link-colors($clr, $hover-clr: default, $active-clr: default, $focus-clr: null, $theme: default) {
-  @include clickable($clr, null, $hover-clr, null, $active-clr, null, $focus-clr, null, $theme: default);
+@mixin link-colors($clr, $hover-clr: default, $active-clr: default, $focus-clr: null, $theme: default, $ignore-path: false) {
+  @include clickable($clr, null, $hover-clr, null, $active-clr, null, $focus-clr, null, $theme, $ignore-path);
 }

data/_sass/common/classes/_media.scss

@@ -2,7 +2,7 @@
   @if $breakpoints == default {
     $breakpoints: $responsive;
   }
-  @media screen and (max-width: map-get($breakpoints, $name)) {
+  @media screen and (max-width: map-get($breakpoints, $name) - 1) {
     @content;
   }
 }

data/_sass/common/components/_hero.scss

@@ -50,7 +50,7 @@
 .hero__content {
   margin: map-get($spacers, 5);
   @include media-breakpoint-down(lg) {
-    margin: map-get($spacers, 5) map-get($spacers, 3);
+    margin: map-get($spacers, 5) map-get($spacers, 4);
   }
   @include media-breakpoint-down(md) {
     margin: map-get($spacers, 4) map-get($spacers, 3);

data/_sass/common/components/_item.scss

@@ -11,19 +11,17 @@
 
 .item__image {
   margin-right: map-get($spacers, 3);
-  @include media-breakpoint-down(md) {
-    margin-right: 0;
-  }
-  @include media-breakpoint-up(md) {
-    & + .item__content {
+  & + .item__content {
+    & > :first-child {
+      margin-top: 0;
       & > :first-child {
         margin-top: 0;
-        & > :first-child {
-          margin-top: 0;
-        }
       }
     }
   }
+  @include media-breakpoint-down(md) {
+    margin-right: 0;
+  }
 }
 
 .item__content {
@@ -76,7 +74,10 @@ a.item__header, .item__header > a {
       font-size: map-get($base, font-size-h6-xs);
     }
     img {
-      max-height: 12rem;
+      max-height: 32rem;
+      @include media-breakpoint-down(md) {
+        max-height: 14rem;
+      }
     }
   }
 }

data/_sass/components/_extensions.scss

@@ -0,0 +1,29 @@
+.extensions {
+  margin: map-get($base, vertical-space-lg) 0;
+}
+
+.extensions--video, .extensions--slide {
+  position: relative;
+  width: 100%;
+  padding: 0;
+  & > iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.extensions--video {
+  padding-top: percentage(315 / 560);
+}
+
+.extensions--slide {
+  padding-top: percentage(487 / 599);
+}
+
+.extensions--audio {
+  display: block;
+  max-width: 100% !important;
+}

data/_sass/components/_search.scss

@@ -97,6 +97,7 @@
   list-style-type: none;
   a {
     padding: .4rem 1rem;
+    @include transition(none);
     @include clickable($text-color, transparent, $text-color-3, $main-color-3);
     .search--light & {
       @include clickable($text-color-theme-light, transparent, $text-color-3, $main-color-3);
@@ -107,8 +108,13 @@
   }
   &.active {
     a {
-      color: $text-color-3 !important;
-      background-color: $main-color-3 !important;
+      @include plain() {
+        color: $text-color-3;
+        background-color: $main-color-3;
+      }
+      @include active() {
+        @include transition(map-get($link, transition));
+      }
     }
   }
 }

data/_sass/layout/_404.scss

@@ -1,7 +1,14 @@
 .layout--404 {
-  @include flexbox;
-  @include align-items(center);
-  & > .main > h1 {
-    font-size: 7rem;
+  .sign {
+    display: table;
+    margin: map-get($base, vertical-space-lg) auto;
+    margin-top: map-get($base, vertical-space-lg) * 2;
+    h1 {
+      font-size: map-get($base, font-size-xl) * 4;
+      line-height: 1;
+    }
+    p {
+      font-size: map-get($base, font-size-xl) * 1.2;
+    }
   }
 }

data/_sass/layout/_article.scss

@@ -1,5 +1,7 @@
 .layout--article {
-
+  .article__sharing {
+    margin: map-get($base, vertical-space-lg) 0;
+  }
   .article__footer {
     margin: map-get($base, vertical-space-lg) 0;
     font-size: map-get($base, font-size-sm);

data/_sass/layout/_page.scss

@@ -1,6 +1,10 @@
 .layout--page {
   height: 100%;
 
+  .page__viewport {
+    height: 100%;
+  }
+
   .page__grid {
     height: 100%;
   }
@@ -25,7 +29,7 @@
     height: 100%;
     background-color: $background-color;
     @include split-line(right);
-    @include transition(transform .4s);
+    @include transition(transform map-get($animation, duration));
     @include overflow(auto);
     .sidebar-toc {
       padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 4) map-get($spacers, 4);

data/assets/css/main.scss

@@ -38,17 +38,19 @@
     "animate/fade-in-down",
     "animate/fade-in-up",
 
+    "components/main",
+    "components/header",
+    "components/footer",
     "components/article-info",
     "components/article-header",
     "components/article-content",
     "components/article-list",
     "components/author-links",
     "components/author-profile",
-    "components/header",
-    "components/footer",
-    "components/main",
     "components/tags",
     "components/search",
+    "components/extensions",
+
 
     "additional/alert",
     "additional/tag",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-text-theme
 version: !ruby/object:Gem::Version
-  version: 2.2.1
+  version: 2.2.2
 platform: ruby
 authors:
 - Tian Qi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-10-02 00:00:00.000000000 Z
+date: 2018-10-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -139,6 +139,12 @@ files:
 - _includes/comments-providers/disqus.html
 - _includes/comments-providers/gitalk.html
 - _includes/comments.html
+- _includes/extensions/bilibili.html
+- _includes/extensions/netease-cloud-music.html
+- _includes/extensions/slideshare.html
+- _includes/extensions/soundcloud.html
+- _includes/extensions/ted.html
+- _includes/extensions/youtube.html
 - _includes/footer.html
 - _includes/head.html
 - _includes/header.html
@@ -172,6 +178,8 @@ files:
 - _includes/scripts/utils.js
 - _includes/scripts/variables.html
 - _includes/search.html
+- _includes/sharing-providers/addtoany.html
+- _includes/sharing.html
 - _includes/sidebar/toc.html
 - _includes/snippets/assign.html
 - _includes/snippets/get-article-title.html
@@ -251,6 +259,7 @@ files:
 - _sass/components/_article-list.scss
 - _sass/components/_author-links.scss
 - _sass/components/_author-profile.scss
+- _sass/components/_extensions.scss
 - _sass/components/_footer.scss
 - _sass/components/_header.scss
 - _sass/components/_main.scss