hexo-theme-stellar 1.12.0 → 1.13.0

package/source/css/_layout/list.styl

@@ -105,19 +105,16 @@
       position: absolute
       line-height: 1.2
       width: 'calc(100% - %s * 2)' % 1rem
-      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
-      color: white
+      color: var(--text-p0)
       &[position=top]
         top: 0
-        background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.2),rgba(0,0,0,0))
       &[position=bottom]
         bottom: 0
-        background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.3))
       div+div
         margin-top: 4px
       .cap
-        color: white
         font-size: $fs-13
+        color: unset
       .title
         font-weight: 500
         font-size: $fs-h3

package/source/css/_layout/main.styl

@@ -5,7 +5,7 @@
     margin-left: "calc(2 * %s)" % var(--gap-l)
     margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left))
   @media screen and (min-width: $device-mobile-max)
-    padding-top: "calc(2 * %s)" % var(--gap-l)
+    padding-top: "calc(1 * %s)" % var(--gap-l)
   header
     margin: 4rem 1rem 2rem
     .logo-wrap

package/source/css/_layout/md.styl

@@ -68,9 +68,6 @@ article.md.content
   .tag-plugin,iframe
     margin-top: var(--gap-p)
     margin-bottom: var(--gap-p)
-  p,.tag-plugin
-    .highlight,table
-      --gap-p: 1rem
   iframe
     display: block
 

package/source/css/_layout/partial/navbar.styl

@@ -1,7 +1,7 @@
 .nav-wrap
   position: sticky
   position: -webkit-sticky
-  margin-top: 1.75rem
+  margin-top: .75rem
   top: -2px
   background: var(--site-bg)
   padding: 0 1rem

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

@@ -3,20 +3,21 @@
   flex-direction: column
   word-break: break-all
   text-align: justify
-  padding: var(--gap-l) 0
-  padding-top: "calc(2 * %s)" % var(--gap-l)
-  height: "calc(100vh - 3 * %s)" % var(--gap-l)
-  @media screen and (max-width: $device-mobile-max)
-    padding-top: "calc(1 * %s)" % var(--gap-l)
-    height: "calc(100% - 2 * %s)" % var(--gap-l)
+  height: "calc(100vh - 1 * %s)" % var(--gap-l)
   .header
-    margin: 0 var(--gap-l)
+    margin: var(--gap-l) var(--gap-l) 0
+  @media screen and (min-width: $device-mobile-max)
+    >.widgets:first-child>.widget-wrap:first-child
+      margin-top: "calc(2 * %s)" % var(--gap-l)
+  @media screen and (max-width: $device-mobile-max)
+    height: 100vh
+  
 
 .l_left[layout=wiki]
   padding-bottom: 0
-  height: "calc(100vh - 2 * %s)" % var(--gap-l)
+  height: 100vh
   @media screen and (max-width: $device-mobile-max)
-    height: "calc(100% - 1 * %s)" % var(--gap-l)
+    height: 100vh
   .widgets >:last-child
     margin-bottom: 6rem
 

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

@@ -100,5 +100,4 @@
           display: none
       &+.timenode
         margin-top: 0.75rem
-      .body
-        max-height: 40vh
+        

package/source/css/_layout/tag-plugins/split.styl

@@ -1,10 +1,10 @@
-.md .tag-plugin.split
-  margin: 0.5rem 0
 .tag-plugin.split
   display: grid
   grid-gap: 16px
   grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
-  >div>
+  >.cell
+    margin: 1rem 0
+  >.cell>
     p   
       line-height: 1.5
     :first-child
@@ -18,11 +18,15 @@
     
 
 .tag-plugin.split
-  &[bg]>div
+  @media screen and (max-width: $device-tablet)
+    display: block
+
+.tag-plugin.split
+  &[bg]>.cell
     padding: 1rem
     border-radius: $border-card
-  &[bg='block']>div
+  &[bg='block']>.cell
     background: var(--block)
-  &[bg='card']>div
+  &[bg='card']>.cell
     background: var(--card)
     box-shadow: $boxshadow-card

package/source/css/_layout/tag-plugins/timeline.styl

@@ -113,15 +113,32 @@
   .tag-plugin.copy
     width: 240px
 
+.tag-plugin.timeline[api]
+  &.stellar-fcircle-api .timenode:hover .header
+    .user-info
+      background: inherit
+      span
+        color: inherit
+  a.body
+    color: var(--text-p1)
+    trans2: transform box-shadow
+    line-height: 1.25
+    padding: 0.75rem 1rem
+    &:hover
+      transform: translateY(-1px)
+      box-shadow: $boxshadow-card-float
+
 
-.tag-plugin.timeline.stellar-timeline-api .body
-  max-height: convert(hexo-config('tag_plugins.timeline.max-height'))
+.tag-plugin.timeline[api] .body
   overflow: scroll
-  p.title 
+  p.title
     font-size: 1rem
     font-weight: 700
     margin: 0.5rem 0 0.75rem
     line-height: 1.25
+    &:only-child 
+      margin-bottom: 0.5rem
+      font-weight: 500
     a 
       color: inherit
       &:hover
@@ -136,7 +153,7 @@
   pre code 
     font-size: $fs-12
 
-.tag-plugin.timeline.stellar-timeline-api .body .footer
+.tag-plugin.timeline[api] .body .footer
   margin: 0 0 -0.5rem
   padding: 0.5rem 0 1rem
   user-select: none
@@ -159,7 +176,7 @@
     font-size: $fs-12
     align-items: stretch
 
-.tag-plugin.timeline.stellar-timeline-api .body .footer
+.tag-plugin.timeline[api] .body .footer
   .item
     border-width: 1px
     border-style: solid

package/source/css/_plugins/comments/waline.styl

@@ -1,4 +1,8 @@
 .cmt-body.waline
+  .wl-panel
+    margin: 0.5em 0 !important
+  .wl-meta-head
+    padding: 0 !important
   --waline-font-size: 0.9375rem;
   /* 常规颜色 */
   --waline-white: #fff;

package/source/css/_plugins/index.styl

@@ -15,7 +15,5 @@ if hexo-config('comments.service') == 'twikoo'
   @import 'comments/twikoo'
 if hexo-config('comments.service') == 'utterances'
   @import 'comments/utterances'
-if hexo-config('comments.service') == 'valine'
-  @import 'comments/valine'
 if hexo-config('comments.service') == 'waline'
   @import 'comments/waline'

package/source/js/main.js

@@ -1,4 +1,4 @@
-console.log('hexo-theme-stellar:\n' + stellar.github);
+console.log('\n' + '%c Stellar v' + stellar.version + ' %c\n' + stellar.github + '\n', 'color:#e8fafe;background:#03c7fa;padding:8px;border-radius:4px', 'margin-top:8px');
 // utils
 const util = {
 

package/source/js/plugins/fcircle.js

@@ -0,0 +1,92 @@
+const FCircle = {
+  requestAPI: (url, callback, timeout) => {
+    let retryTimes = 5;
+    function request() {
+      return new Promise((resolve, reject) => {
+        let status = 0; // 0 等待 1 完成 2 超时
+        let timer = setTimeout(() => {
+          if (status === 0) {
+            status = 2;
+            timer = null;
+            reject('请求超时');
+            if (retryTimes == 0) {
+              timeout();
+            }
+          }
+        }, 5000);
+        fetch(url).then(function(response) {
+          if (status !== 2) {
+            clearTimeout(timer);
+            resolve(response);
+            timer = null;
+            status = 1;
+          }
+          if (response.ok) {
+            return response.json();
+          }
+          throw new Error('Network response was not ok.');
+        }).then(function(data) {
+          retryTimes = 0;
+          callback(data);
+        }).catch(function(error) {
+          if (retryTimes > 0) {
+            retryTimes -= 1;
+            setTimeout(() => {
+              request();
+            }, 5000);
+          } else {
+            timeout();
+          }
+        });
+      });
+    }
+    request();
+  },
+  layoutDiv: (cfg) => {
+    const el = $(cfg.el)[0];
+    $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
+    FCircle.requestAPI(cfg.api, function(data) {
+      $(el).find('.loading-wrap').remove();
+      const arr = data.article_data || [];
+      const limit = el.getAttribute('limit');
+      arr.forEach((item, i) => {
+        if (limit && i >= limit) {
+          return;
+        }
+        var cell = '<div class="timenode" index="' + i + '">';
+        cell += '<div class="header">';
+        cell += '<div class="user-info">';
+        cell += '<img src="' + (item.avatar || cfg.avatar) + '" onerror="javascript:this.src=\'' + cfg.avatar + '\';">';
+        cell += '<span>' + item.author + '</span>';
+        cell += '</div>';
+        cell += '<p>' + item.updated + '</p>';
+        cell += '</div>';
+        cell += '<a class="body" href="' + item.link + '" target="_blank" rel="external nofollow noopener noreferrer">';
+        cell += item.title;
+        cell += '</a>';
+        cell += '</div>';
+        $(el).append(cell);
+      });
+    }, function() {
+      $(el).find('.loading-wrap svg').remove();
+      $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
+      $(el).find('.loading-wrap').addClass('error');
+    });
+  },
+}
+
+$(function () {
+  const els = document.getElementsByClassName('stellar-fcircle-api');
+  for (var i = 0; i < els.length; i++) {
+    const el = els[i];
+    const api = el.getAttribute('api');
+    if (api == null) {
+      continue;
+    }
+    var cfg = new Object();
+    cfg.el = el;
+    cfg.api = api;
+    cfg.avatar = 'https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg';
+    FCircle.layoutDiv(cfg);
+  }
+});

package/source/js/plugins/timeline.js

@@ -57,12 +57,18 @@ const StellarTimeline = {
     $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     StellarTimeline.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
+      const query = new URL(cfg.api).search;
       const arr = data.content || data;
       var users = [];
       const filter = el.getAttribute('user');
       if (filter && filter.length > 0) {
         users = filter.split(",");
       }
+      var hide = [];
+      const hideStr = el.getAttribute('hide');
+      if (hideStr && hideStr.length > 0) {
+        hide = hideStr.split(",");
+      }
       arr.forEach((item, i) => {
         if (item.user && item.user.login && users.length > 0) {
           if (!users.includes(item.user.login)) {
@@ -81,46 +87,53 @@ const StellarTimeline = {
         cell += '<p>' + date.toString().replace(/\sGMT([^.]*)/i, "") + '</p>';
         cell += '</div>';
         cell += '<div class="body">';
-        cell += '<p class="title">';
-        cell += '<a href="' + item.html_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
-        cell += item.title || item.name || item.tag_name;
-        cell += '</a>';
-        cell += '</p>';
-        
-        cell += marked.parse(item.body);
-        cell += '<div class="footer">';
-        cell += '<div class="flex left">';
-        if (item.labels) {
-          item.labels.forEach((label, i) => {
-            cell += '<div class="item label ' + label.name + '" style="background:#' + label.color + '18;border-color:#' + label.color + '36">';
-            cell += '<span>' + label.name + '</span>';
-            cell += '</div>';
-          });
-        } else if (item.zipball_url) {
-          cell += '<a class="item download" href="' + item.zipball_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
-          cell += '<span>📦 ' + item.tag_name + '.zip</span>';
+        if (!hide.includes('title')) {
+          cell += '<p class="title">';
+          cell += '<a href="' + item.html_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
+          cell += item.title || item.name || item.tag_name;
           cell += '</a>';
+          cell += '</p>';
         }
-        cell += '</div>';
-        cell += '<div class="flex right">';
-        if (item.reactions && item.reactions.total_count > 0) {
-          for (let key of Object.keys(StellarTimeline.reactions)) {
-            let num = item.reactions[key];
-            if (num > 0) {
-              cell += '<div class="item reaction ' + key + '">';
-              cell += '<span>' + StellarTimeline.reactions[key] + ' ' + item.reactions[key] + '</span>';
-              cell += '</div>';
+        
+        cell += marked.parse(item.body);
+        if (!hide.includes('footer')) {
+          cell += '<div class="footer">';
+          cell += '<div class="flex left">';
+          if (item.labels) {
+            item.labels.forEach((label, i) => {
+              if (!query || !query.includes(encodeURI(label.name))) {
+                cell += '<div class="item label ' + label.name + '" style="background:#' + label.color + '18;border-color:#' + label.color + '36">';
+                cell += '<span>' + label.name + '</span>';
+                cell += '</div>';
+              }
+            });
+          } else if (item.zipball_url) {
+            cell += '<a class="item download" href="' + item.zipball_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
+            cell += '<span>📦 ' + item.tag_name + '.zip</span>';
+            cell += '</a>';
+          }
+          cell += '</div>';
+          cell += '<div class="flex right">';
+          if (item.reactions && item.reactions.total_count > 0) {
+            for (let key of Object.keys(StellarTimeline.reactions)) {
+              let num = item.reactions[key];
+              if (num > 0) {
+                cell += '<div class="item reaction ' + key + '">';
+                cell += '<span>' + StellarTimeline.reactions[key] + ' ' + item.reactions[key] + '</span>';
+                cell += '</div>';
+              }
             }
           }
-        }
-        if (item.comments != null) {
-          cell += '<a class="item comments last" href="' + item.html_url + '#issuecomment-new" target="_blank" rel="external nofollow noopener noreferrer">';
-          cell += '<span><svg t="1666270368054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2528" width="200" height="200"><path d="M952 64H72C32.3 64 0 96.3 0 136v508c0 39.7 32.3 72 72 72h261l128 128c14 14 32.5 21.1 50.9 21.1s36.9-7 50.9-21.1l128-128h261c39.7 0 72-32.3 72-72V136c0.2-39.7-32.1-72-71.8-72zM222 462c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m290-7.7c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72c0 39.7-32.2 72-72 72z m290 8c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72c0 39.7-32.2 72-72 72z" p-id="2529"></path></svg> ' + (item.comments || 0) + '</span>';
-          cell += '</a>';
+          if (item.comments != null) {
+            cell += '<a class="item comments last" href="' + item.html_url + '#issuecomment-new" target="_blank" rel="external nofollow noopener noreferrer">';
+            cell += '<span><svg t="1666270368054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2528" width="200" height="200"><path d="M952 64H72C32.3 64 0 96.3 0 136v508c0 39.7 32.3 72 72 72h261l128 128c14 14 32.5 21.1 50.9 21.1s36.9-7 50.9-21.1l128-128h261c39.7 0 72-32.3 72-72V136c0.2-39.7-32.1-72-71.8-72zM222 462c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m290-7.7c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72c0 39.7-32.2 72-72 72z m290 8c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72c0 39.7-32.2 72-72 72z" p-id="2529"></path></svg> ' + (item.comments || 0) + '</span>';
+            cell += '</a>';
+          }
+          
+          cell += '</div>';
+          cell += '</div>';
         }
         
-        cell += '</div>';
-        cell += '</div>';
         cell += '</div>';
         cell += '</div>';
         $(el).append(cell);

package/layout/_partial/plugins/comments/valine/layout.ejs

@@ -1,19 +0,0 @@
-<%
-function layoutDiv() {
-  var el = '';
-  el += '<div id="valine_container" class="valine_thread"';
-  let cfg = {};
-  if (page.comment_id) {
-    cfg['comment_id'] = page.comment_id;
-  }
-  for (let key of Object.keys(cfg)) {
-    if (cfg[key]) {
-      el += ' ' + key + '="' + cfg[key] + '"';
-    }
-  }
-  el += '><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg></div>';
-  return el;
-}
-%>
-
-<%- layoutDiv() %>

package/layout/_partial/plugins/comments/valine/script.ejs

@@ -1,48 +0,0 @@
-<script>
-  function getEmojiMaps() {
-    function emoji(path, idx, ext) {
-      return path + "/" + path + "-" + idx + "." + ext;
-    }
-    var emojiMaps = {};
-    for (var i = 1; i <= 54; i++) {
-      emojiMaps['tieba-' + i] = emoji('tieba', i, 'png');
-    }
-    for (var i = 1; i <= 101; i++) {
-      emojiMaps['qq-' + i] = emoji('qq', i, 'gif');
-    }
-    for (var i = 1; i <= 116; i++) {
-      emojiMaps['aru-' + i] = emoji('aru', i, 'gif');
-    }
-    for (var i = 1; i <= 125; i++) {
-      emojiMaps['twemoji-' + i] = emoji('twemoji', i, 'png');
-    }
-    for (var i = 1; i <= 4; i++) {
-      emojiMaps['weibo-' + i] = emoji('weibo', i, 'png');
-    }
-    return emojiMaps;
-  }
-  function load_comment(){
-    if(!document.getElementById("valine_container"))return;
-    stellar.loadScript('<%- theme.comments.valine.js %>', {defer:true}).then(function () {
-      const el = document.getElementById("valine_container");
-      var path = el.getAttribute('comment_id');
-      const placeholder = "<%= theme.comments.valine.placeholder %>";
-      if (!path) {
-        path = decodeURI(window.location.pathname);
-      }
-      var valine = new Valine();
-      valine.init(Object.assign(<%- JSON.stringify(theme.comments.valine) %>, {
-        el: '#valine_container',
-        path: path,
-        placeholder: placeholder,
-        emojiCDN: 'https://fastly.jsdelivr.net/gh/cdn-x/emoji/valine/',
-        emojiMaps: getEmojiMaps(),
-      }));
-    });
-  }
-  window.addEventListener('DOMContentLoaded', (event) => {
-    console.log('DOM fully loaded and parsed');
-    load_comment();
-  });
-
-</script>

package/scripts/tags/issues.js

@@ -1,30 +0,0 @@
-/**
- * issues.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
- * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
- *
- * {% issues [sites/timeline/friends] api:xxx [group:key=value1,value2,value3] %}
- *
- * example:
- * {% issues sites api:https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100 group:version=版本：^4.0,版本：^3.0,版本：^2.0 %}
- */
-
-'use strict';
-
-hexo.extend.tag.register('issues', function(args) {
-  args = hexo.args.map(args, ['api', 'group'], ['type']);
-  // 所有支持的参数
-  let type = args.type || '';
-  let api = args.api || '';
-  let group = args.group || '';
-  if (type.length == 0 || api.length == 0) {
-    return;
-  }
-  // 布局
-  var el = '<div class="tag-plugin issues-wrap ' + type + '" id="issues-api"';
-  el += 'api="' + api + '"';
-  if (group.length > 0) {
-    el += 'group="' + group + '"';
-  }
-  el += '></div>';
-  return el;
-});