hexo-theme-stellar 1.16.2 → 1.17.0

package/source/css/_layout/widgets/ghuser.styl

@@ -0,0 +1,95 @@
+.widget-wrapper.ghuser
+  .widget-header+.widget-body
+    margin: 0.75rem 0
+.widget-wrapper.ghuser .widget-body
+  text-align: center
+  background: var(--card)
+  border-radius: $border-card
+  padding: 1rem
+  box-shadow: $boxshadow-card
+
+.widget-wrapper.ghuser 
+  .avatar
+    display: block
+    border-radius: 100%
+    margin: 1rem auto 1.25rem auto
+    max-width: 75%
+    overflow: hidden
+    img 
+      display: block
+    @media screen and (max-width: $device-tablet)
+      max-width: 50%
+
+  .username
+    font-weight: 900
+    font-size: $fs-h2
+    color: var(--text-p0)
+    margin: 0.5rem 0
+
+  .bio
+    font-size: $fs-13
+    margin: 0.5rem 0
+
+  .follow 
+    font-weight: 500
+    border-radius: 64px
+    padding: 0.5rem 1rem
+    background: $color-theme
+    color: var(--card)
+    font-size: 1rem
+    align-self: stretch
+    text-align: center
+    line-height: 1.5
+    display: flex
+    align-items: center
+    justify-content: center
+    trans1: background
+    svg
+      margin-right: 6px
+    &:hover
+      background: $color-hover
+
+  .menu 
+    margin-bottom: 0
+    background: none
+    a:hover 
+      box-shadow: none 
+      background: var(--block)
+    a.active 
+      box-shadow: none
+      position: relative
+      &:after
+        content: ''
+        position: absolute
+        height: 3px
+        bottom: 0
+        width: 32px
+        left: 'calc(50% - 0.5 * %s)' % @width
+        border-radius: 4px
+        background: $color-theme
+
+  .buttons
+    margin: 1rem 0
+    align-self: stretch
+    display: grid
+    grid-gap: 2px
+    grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)
+
+  .btn
+    display: flex 
+    flex-direction: column
+    align-items: center
+    color: inherit
+    border: 1px solid transparent
+    border-radius: 4px
+    padding: 0.25rem 0
+    trans1: background
+    &:hover
+      background: var(--block)
+    .title
+      font-size: 1rem
+      font-weight: 700
+    .desc
+      font-size: $fs-12
+      color: var(--text-p3)
+      font-weight: 500

package/source/css/_layout/widgets/recent.styl

@@ -0,0 +1,15 @@
+.widget-wrapper.recent .widget-body
+  display: flex
+  flex-direction: column
+  align-items: flex-start
+  margin-top: 0.25rem
+  a
+    line-height: 1.2
+    font-size: $fs-13
+    margin: 0.25rem 0
+    .title  
+      font-size: $fs-13
+      color: var(--text-p2)
+    &:hover
+      color: $color-hover
+

package/source/css/_layout/widgets/related.styl

@@ -0,0 +1,8 @@
+.widget-wrapper.related .widget-body a
+  margin-top: 0.5rem
+  margin-bottom: 1rem
+  .title 
+    font-weight: 700
+    font-size: $fs-14
+  .excerpt
+    -webkit-line-clamp: 3

package/source/css/_layout/widgets/search.styl

@@ -0,0 +1,3 @@
+.widgets .widget-wrapper.search
+  margin-top: 0
+  margin-bottom: 0

package/source/css/_layout/widgets/tagcloud.styl

@@ -0,0 +1,8 @@
+.widget-wrapper.tagcloud .widget-body
+  margin-top: 0.25rem
+  a  
+    word-break: break-word
+    color: var(--text-p2)
+    line-height: 1.5
+    &:hover
+      color: $color-hover

package/source/css/_layout/widgets/timeline.styl

@@ -0,0 +1,17 @@
+.widget-wrapper.timeline 
+  .widget-body
+    margin-top: 0.5rem
+  .tag-plugin.timeline .timenode
+    .header
+      margin-bottom: 0.5rem
+      txt-ellipsis()
+      .user-info
+        background: var(--block)
+        &:hover
+          background: $color-hover
+          color: var(--card)
+      &:before
+        display: none
+    &+.timenode
+      margin-top: 0.75rem
+      

package/source/css/_layout/{sidebar → widgets}/toc_blog.styl

@@ -1,3 +1,3 @@
-.widget-wrap.single#toc .doc-tree
+.widget-wrapper.toc.single .doc-tree
   &.active>.toc
     border-left: 2px solid var(--block-hover)

package/source/css/_layout/{sidebar → widgets}/toc_common.styl

@@ -1,10 +1,13 @@
-.widget-wrap.single#toc .widget-header
+.widget-wrapper.toc .widget-header
+  margin-top: 1rem
+
+.widget-wrapper.toc.single .widget-header
   font-weight: 500
   font-size: $fs-12
   >span
     margin: 0.5rem 0
 
-#toc .widget-body
+.widget-wrapper.toc .widget-body
   margin-top: 0
   ul ul, ul ol
     padding-left: 0
@@ -34,7 +37,7 @@
       padding-left: 2.9rem
 
 
-#toc .toc-item
+.widget-wrapper.toc .toc-item
   color: var(--text-p2)
   font-size: $fs-12
   padding: 0
@@ -44,7 +47,7 @@
     border-left-color: @color
   .toc-child .toc-item
     padding: 0
-#toc a.toc-link
+.widget-wrapper.toc a.toc-link
   color: inherit
   display: block
   line-height: 1.2

package/source/css/_layout/{sidebar → widgets}/toc_wiki.styl

@@ -1,14 +1,10 @@
-.widget-wrap#toc
-  .widget-header
-    margin-top: 1rem
-
-.widget-wrap.multi#toc .widget-header
+.widget-wrapper.toc.multi .widget-header
   color: var(--text-p1)
   font-size: $fs-14
 
 
 // 其它分页链接
-.widget-wrap.multi#toc .doc-tree
+.widget-wrapper.toc.multi .doc-tree
   border-radius: $border-block
   background: var(--block)
   overflow: hidden
@@ -34,7 +30,7 @@
 
 
 // 当前分页链接
-.widget-wrap.multi#toc .doc-tree.active
+.widget-wrapper.toc.multi .doc-tree.active
   a.doc-tree-link
     background: var(--block)
     font-weight: 700

package/source/css/_layout/widgets/widgets.styl

@@ -0,0 +1,60 @@
+.widgets 
+  .loading-wrap
+    margin: 0.5rem 0
+
+.widgets
+  overflow: scroll
+  flex-grow: 1
+  scrollbar-width: none
+  scrollbar(0, 0)
+  z-index: 1
+  line-height: 1.2
+  .widget-wrapper
+    .widget-header
+      padding-left: var(--gap-l)
+      padding-right: var(--gap-l)
+      display: flex
+      justify-content: space-between
+      align-items: center
+      font-weight: 500
+      position: sticky
+      top: -2px
+      background: var(--site-bg)
+      padding-top: 2px
+      z-index 1
+      .item 
+        display: block
+      >span 
+        margin: 0.25rem 0
+        text-align: left
+      &:empty
+        display: none
+      .cap-action
+        hover-block 4px 4px
+        line-height: 0
+        color: var(--text-meta)
+        trans2: color background
+        .icon
+          fill: var(--text-meta)
+        &:hover
+          color: $color-hover
+          .icon
+            fill: $color-hover
+
+    .widget-body
+      margin: 0.5rem var(--gap-l)
+      color: var(--text-p1)
+      p
+        margin-top: .5em
+        margin-bottom: .5em
+        line-height: 1.5
+    .widget-header+.widget-body
+      margin-top: 0
+  .widget-wrapper+.widget-wrapper .widget-header
+    margin-top: 3rem
+  .widget-wrapper+.widget-wrapper.toc .widget-header
+    margin-top: 1rem
+
+.widget-wrapper
+    display: block
+    margin: 2rem 0

package/source/css/_plugins/index.styl

@@ -8,6 +8,10 @@ if hexo-config('plugins.scrollreveal.enable')
 if hexo-config('plugins.fancybox.enable')
   @import 'fancybox'
 
+// 搜索
+if hexo-config('search.service') == 'local_search'
+  @import 'search/local-search'
+
 // 评论
 if hexo-config('comments.service') == 'beaudar'
   @import 'comments/beaudar'

package/source/css/_plugins/search/local-search.styl

@@ -0,0 +1,89 @@
+.search-wrapper
+  width: 100%
+  >.search-form
+    position: sticky
+    top: 1rem
+  .search-input
+    width: 100%
+    padding: 0.75rem 1rem
+    line-height: 1
+    box-sizing: border-box
+    border-radius: $border-block
+    background-color: var(--card)
+    color: var(--text-p0)
+    box-shadow: $boxshadow-button
+    trans1 box-shadow
+    &:hover
+      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.16), 0 0 8px 0px rgba(0, 0, 0, 0.08)
+  
+  &.noresult 
+    .search-input
+      &:hover
+        box-shadow: 0 0 2px 0px alpha($c-red, 0.2), 0 0 8px 0px alpha($c-red, 0.2)
+      &:focus
+        box-shadow: 0 0 2px 0px alpha($c-red, 0.5), 0 0 8px 0px alpha($c-red, 0.4)
+
+  .search-no-result
+    display: none
+    margin: 1em auto
+    color: var(--text-p1)
+    text-align: center
+    font-size: $fs-14
+    padding: 2rem
+    background: var(--block)
+    border-radius: $border-block
+
+  #search-result
+    ul.search-result-list
+      padding: 0
+      margin: 0
+      list-style-type: none
+    li
+      margin: 1em auto
+      &:hover
+        .search-result-title
+          color: $color-hover
+    .search-result-title
+      background-image: none
+      color: var(--text-p1)
+      text-transform: capitalize
+      font-weight: bold
+      line-height: 1.2
+
+    .search-result-content
+      overflow: hidden
+      color: var(--text-p3)
+      margin: .4em auto
+      max-height: 13em
+      text-align: justify
+      font-size: $fs-12
+      line-height: 1.2
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 3
+
+    .search-keyword
+      border-bottom: 1px dashed $color-hover
+      color: $color-hover
+      font-weight: bold
+
+
+
+.search-wrapper.noresult
+  .search-no-result
+    display: block
+
+.widget-wrapper
+  .search-form
+    top: 0
+    background: var(--site-bg)
+  .search-input
+    margin-top: 1rem
+    margin-bottom: -1rem
+  #search-result,.search-no-result
+    margin-top: 2rem
+
+.widget-wrapper:not(:first-child)
+  .search-wrapper
+    margin-top: -1rem

package/source/js/main.js

@@ -92,7 +92,7 @@ const init = {
     stellar.jQuery(() => {
       const scrollOffset = 32;
       var segs = [];
-      $("article.md :header").each(function (idx, node) {
+      $("article.md-text :header").each(function (idx, node) {
         segs.push(node)
       });
       // 滚动
@@ -111,12 +111,12 @@ const init = {
           }
         }
         if (topSeg) {
-          $("#toc a.toc-link").removeClass("active")
+          $(".toc#toc a.toc-link").removeClass("active")
           var link = "#" + topSeg.attr("id")
           if (link != '#undefined') {
-            $('#toc a.toc-link[href="' + encodeURI(link) + '"]').addClass("active")
+            $('.toc#toc a.toc-link[href="' + encodeURI(link) + '"]').addClass("active")
           } else {
-            $('#toc a.toc-link:first').addClass("active")
+            $('.toc#toc a.toc-link:first').addClass("active")
           }
         }
       })
@@ -124,7 +124,7 @@ const init = {
   },
   sidebar: () => {
     stellar.jQuery(() => {
-      $("#toc a.toc-link").click(function (e) {
+      $(".toc#toc a.toc-link").click(function (e) {
         l_body.classList.remove("sidebar");
       });
     })
@@ -301,6 +301,42 @@ if (stellar.plugins.fancybox) {
   }
 }
 
+
+if (stellar.search.service) {
+  if (stellar.search.service == 'local_search') {
+    stellar.jQuery(() => {
+      stellar.loadScript('/js/search/local-search.js', { defer: true }).then(function () {
+        var $inputArea = $("input#search-input");
+        var $resultArea = document.querySelector("div#search-result");
+        $inputArea.focus(function() {
+          var path = stellar.search[stellar.search.service]?.path || '/search.xml';
+          if (!path.startsWith('/')) {
+            path = '/' + path;
+          }
+          const filter = $inputArea.attr('data-filter') || '';
+          searchFunc(path, filter, 'search-input', 'search-result');
+        });
+        $inputArea.keydown(function(e) {
+          if (e.which == 13) {
+            e.preventDefault();
+          }
+        });
+        var observer = new MutationObserver(function(mutationsList, observer) {
+          if (mutationsList.length == 1) {
+            if (mutationsList[0].addedNodes.length) {
+              $('.search-wrapper').removeClass('noresult');
+            } else if (mutationsList[0].removedNodes.length) {
+              $('.search-wrapper').addClass('noresult');
+            }
+          }
+        });
+        observer.observe($resultArea, { childList: true });
+      });
+    })
+  }
+}
+
+
 // heti
 if (stellar.plugins.heti) {
   stellar.loadCSS(stellar.plugins.heti.css);

package/source/js/search/local-search.js

@@ -0,0 +1,161 @@
+// A local search script with the help of
+// [hexo-generator-search](https://github.com/PaicHyperionDev/hexo-generator-search)
+// Copyright (C) 2015
+// Joseph Pan <http://github.com/wzpan>
+// Shuhao Mao <http://github.com/maoshuhao>
+// This library is free software; you can redistribute it and/or modify
+// it under the terms of the GNU Lesser General Public License as
+// published by the Free Software Foundation; either version 2.1 of the
+// License, or (at your option) any later version.
+//
+// This library is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+// Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public
+// License along with this library; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
+// 02110-1301 USA
+//
+// Modified by:
+// Pieter Robberechts <http://github.com/probberechts>
+
+/*exported searchFunc*/
+var searchFunc = function(path, filter, searchId, contentId) {
+
+  function stripHtml(html) {
+    html = html.replace(/<style([\s\S]*?)<\/style>/gi, "");
+    html = html.replace(/<script([\s\S]*?)<\/script>/gi, "");
+    html = html.replace(/<figure([\s\S]*?)<\/figure>/gi, "");
+    html = html.replace(/<\/div>/ig, "\n");
+    html = html.replace(/<\/li>/ig, "\n");
+    html = html.replace(/<li>/ig, "  *  ");
+    html = html.replace(/<\/ul>/ig, "\n");
+    html = html.replace(/<\/p>/ig, "\n");
+    html = html.replace(/<br\s*[\/]?>/gi, "\n");
+    html = html.replace(/<[^>]+>/ig, "");
+    return html;
+  }
+
+  function getAllCombinations(keywords) {
+    var i, j, result = [];
+
+    for (i = 0; i < keywords.length; i++) {
+        for (j = i + 1; j < keywords.length + 1; j++) {
+            result.push(keywords.slice(i, j).join(" "));
+        }
+    }
+    return result;
+  }
+
+  $.ajax({
+    url: path,
+    dataType: "xml",
+    success: function(xmlResponse) {
+      // get the contents from search data
+      var datas = $("entry", xmlResponse).map(function() {
+        return {
+          title: $("title", this).text(),
+          content: $("content", this).text(),
+          url: $("link", this).attr("href")
+        };
+      }).get();
+
+      var $input = document.getElementById(searchId);
+      if (!$input) { return; }
+      var $resultContent = document.getElementById(contentId);
+
+      $input.addEventListener("input", function(){
+        var resultList = [];
+        var keywords = getAllCombinations(this.value.trim().toLowerCase().split(" "))
+          .sort(function(a,b) { return b.split(" ").length - a.split(" ").length; });
+        $resultContent.innerHTML = "";
+        if (this.value.trim().length <= 0) {
+          return;
+        }
+        // perform local searching
+        datas.forEach(function(data) {
+          var matches = 0;
+          if (!data.title || data.title.trim() === "") {
+            return;
+          }
+          if (filter && !data.url.includes(filter)) {
+            return;
+          }
+          var dataTitle = data.title.trim().toLowerCase();
+          var dataTitleLowerCase = dataTitle.toLowerCase();
+          var dataContent = stripHtml(data.content.trim());
+          var dataContentLowerCase = dataContent.toLowerCase();
+          var dataUrl = data.url;
+          var indexTitle = -1;
+          var indexContent = -1;
+          var firstOccur = -1;
+          // only match artiles with not empty contents
+          if (dataContent !== "") {
+            keywords.forEach(function(keyword) {
+              indexTitle = dataTitleLowerCase.indexOf(keyword);
+              indexContent = dataContentLowerCase.indexOf(keyword);
+
+              if( indexTitle >= 0 || indexContent >= 0 ){
+                matches += 1;
+                if (indexContent < 0) {
+                  indexContent = 0;
+                }
+                if (firstOccur < 0) {
+                  firstOccur = indexContent;
+                }
+              }
+            });
+          }
+          // show search results
+          if (matches > 0) {
+            var searchResult = {};
+            searchResult.rank = matches;
+            searchResult.str = "<li><a href='"+ dataUrl +"'><span class='search-result-title'>"+ dataTitle +"</span>";
+            if (firstOccur >= 0) {
+              // cut out 100 characters
+              var start = firstOccur - 20;
+              var end = firstOccur + 80;
+
+              if(start < 0){
+                start = 0;
+              }
+
+              if(start == 0){
+                end = 100;
+              }
+
+              if(end > dataContent.length){
+                end = dataContent.length;
+              }
+
+              var matchContent = dataContent.substring(start, end);
+
+              // highlight all keywords
+              var regS = new RegExp(keywords.join("|"), "gi");
+              matchContent = matchContent.replace(regS, function(keyword) {
+                return "<span class=\"search-keyword\">"+keyword+"</span>";
+              });
+
+              searchResult.str += "<p class=\"search-result-content\">" + matchContent +"...</p>";
+            }
+            searchResult.str += "</a></li>";
+            resultList.push(searchResult);
+          }
+        });
+        if (resultList.length) {
+          resultList.sort(function(a, b) {
+              return b.rank - a.rank;
+          });
+          var result ="<ul class=\"search-result-list\">";
+          for (var i = 0; i < resultList.length; i++) {
+            result += resultList[i].str;
+          }
+          result += "</ul>";
+          $resultContent.innerHTML = result;
+        }
+      });
+    }
+  });
+};

package/source/css/_layout/sidebar/ghrepo.styl

@@ -1,36 +0,0 @@
-.widget-wrap#repo-info
-  .widget-body
-    a.repo
-      display: block
-      padding: 0.75rem 0.5rem
-      color: var(--text-p2)
-      background: var(--card)
-      border-radius: $border-block
-      box-shadow: $boxshadow-card
-      trans2 box-shadow transform
-      >div+div
-        margin-top: 0.5rem
-      span
-        color: var(--text-p2)
-      &:hover
-        box-shadow: $boxshadow-card-float
-        transform: translateY(-1px)
-    a.repo
-      svg
-        margin-right: 4px
-      .flex-row
-        display: flex 
-        align-items: center
-      .repo-name
-        font-size: $fs-14
-        font-weight: 700
-        color: var(--text-p1)
-      .repo-desc
-        font-size: $fs-13
-        margin-left: 2px
-        margin-right: 2px
-      .grid
-        font-size: $fs-13
-        display: grid
-        grid-gap: 2px
-        grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)