hexo-theme-stellar 1.8.0 → 1.10.0

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

@@ -20,9 +20,12 @@
       padding: 0.5rem .5rem
       font-size: $fs-13
       justify-content: space-between
-      flex-direction: row-reverse
       svg
         width: 1em
         height: 1em
+        margin-left: 4px
+      div 
+        display: flex 
+        align-items: center
     a:hover
       background: var(--block-hover)

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

@@ -6,14 +6,14 @@
   padding: var(--gap-l)
   padding-top: "calc(2 * %s)" % var(--gap-l)
   height: "calc(100vh - 3 * %s)" % var(--gap-l)
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     padding-top: "calc(1 * %s)" % var(--gap-l)
     height: "calc(100% - 2 * %s)" % var(--gap-l)
 
 .l_left[layout=wiki]
   padding-bottom: 0
   height: "calc(100vh - 2 * %s)" % var(--gap-l)
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     height: "calc(100% - 1 * %s)" % var(--gap-l)
   .widgets >:last-child
     margin-bottom: 6rem
@@ -149,6 +149,7 @@ nav.menu
 .l_left .widgets
   overflow: scroll
   flex-grow: 1
+  scrollbar-width: none
   scrollbar(0, 0)
   z-index: 1
   .widget-wrap
@@ -188,8 +189,6 @@ nav.menu
         margin-top: .5em
         margin-bottom: .5em
         line-height: 1.5
-        >a:hover
-          text-decoration: underline
     .widget-header+.widget-body
       margin-top: 0
 

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

@@ -1,12 +1,12 @@
 .tag-plugin.about
   background: var(--block)
-  border-radius: $border-block
+  border-radius: $border-card
   padding: 2rem
   .about-header
     display flex
-    flex-direction: row-reverse
-    justify-content: space-between
+    justify-content: center
     flex-wrap: wrap
+    margin: 1.5rem 0 3rem
     img
       object-fit: contain
     >img
@@ -28,28 +28,25 @@
     >p
       line-height: 1.5
     .tag-plugin.navbar:last-child
+      text-align: center
       nav.cap
         margin-top: 1rem
+        background: var(--card)
+        box-shadow: $boxshadow-button
         a
-          margin: 0
-          color: $color-link
-          background: var(--block-hover)
-          &.active
-            background: none
+          color: var(--text-p2)
           &:hover
-            color: $color-hover
-            background: var(--block-border)
-        a+a
-          margin-left: .5rem
+            background: var(--block)
+          &.active 
+            background: var(--block)
+            box-shadow: none
   .about-header+.about-body
     margin-top: 1.5rem
 
 @media screen and (max-width: $device-mobile)
   .tag-plugin.about
-    padding: 1rem
+    padding: 1.5rem 1rem
     .about-header
-      flex-direction: column
-      .avatar
-        margin: 1rem auto
+      margin: 2.5rem 0 3rem
       p
         width 100%

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

@@ -81,7 +81,7 @@ if hexo-config('style.darkmode') == 'auto'
     .tag-plugin[color='light']
       --theme-border: white
       --theme-bg: #ddd
-      color: var(--site-bg) !important
+      color: var(--card) !important
 
     .tag-plugin[color='dark']
       --theme-border: black

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

@@ -42,6 +42,8 @@ details.folding[open]
       &:after
         content: '-'
   >div.body
+    display: flex;
+    flex-direction: column;
     padding: 1rem
     margin: 0 - 1rem
     margin-top: 0

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

@@ -15,12 +15,9 @@
     align-items: stretch
     &+.group-header
       margin-top: 2rem
-  .friendsjs-wrap
+  .stellar-friends-api
     display: block
-    .loading-wrap
-      min-height: 50px
-      margin: 2rem 0
-      text-align: center
+    
 
 .users-wrap .user-card
   flex-shrink: 1
@@ -33,7 +30,7 @@
     width: 16.66%
   @media screen and (max-width: 820px)
     width: 20%
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     width: 16.66%
   @media screen and (max-width: $device-mobile)
     width: 25%

package/source/css/_layout/tag-plugins/inline-labels.styl

@@ -3,6 +3,7 @@
     text-decoration: none
     border-bottom: 2px solid $color-hover
   emp
+    width: fit-content
     text-decoration: none
     border-bottom: 4px dotted $color-hover
   wavy

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

@@ -3,7 +3,7 @@
   margin: 1em auto
   display: flex
   justify-content: center
-  @media screen and (max-width: $device-mobile-375)
+  @media screen and (max-width: $device-mobile-425)
     width: 100%
 
 .md .link-card
@@ -32,6 +32,7 @@
   flex-direction: column
   align-items: stretch
   width: 400px
+  text-align: justify
 
 .md .link-card
   line-height: 1.2

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

@@ -44,5 +44,13 @@
     >.tabs
       margin-top: .5rem
 
+.md .tag-plugin.note[child=iframe]
+  overflow: hidden
+  padding: 0
+  >.body
+    margin: 0
+    iframe
+      margin: 0
+
 .md .tag-plugin .tag-plugin.note
   --gap-p: 1rem

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

@@ -11,12 +11,8 @@
     width: 100%
     &+.group-header
       margin-top: 2rem
-  .sitesjs-wrap
+  .stellar-sites-api
     display: block
-    .loading-wrap
-      min-height: 50px
-      margin: 2rem 0
-      text-align: center
 
 .sites-wrap .group-body
   display: grid
@@ -26,7 +22,7 @@
     grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
   @media screen and (max-width: 900px)
     grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
   @media screen and (max-width: $device-mobile)
     grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)

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

@@ -79,3 +79,8 @@
         display: none
       &.active
         display: block
+
+.md.indent .tag-plugin.tabs .tab-content p:not([class])
+  text-indent: 'calc(%s * 2)' % $fs-p
+  a
+    text-indent: 0

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

@@ -1,6 +1,9 @@
-.tag-plugin.timeline
+.md .tag-plugin.folding .body:has(.timeline)
+  background: var(--site-bg)
+  
+.md .tag-plugin.timeline
   position: relative
-  margin: 1rem 0
+  margin-top: 0
   padding-left: 16px
   &:before
     content: ''
@@ -12,6 +15,10 @@
     border-radius: 8px
     top: .5rem
     bottom: 0
+  &:has(.loading-wrap)
+    padding-left: 0
+    &:before
+      display: none
 
 .tag-plugin.timeline .timenode
   position: relative
@@ -45,6 +52,7 @@
     color: var(--text-p3)
     font-family: $ff-code
     trans1 color
+    opacity: 0.75
     a
       color: inherit
       font-weight: inherit
@@ -74,3 +82,78 @@
     margin: .5rem 0
   .tag-plugin.copy
     width: 240px
+
+
+.tag-plugin.timeline.stellar-timeline-api .body
+  max-height: convert(hexo-config('tag_plugins.timeline.max-height'))
+  overflow: scroll
+  p
+    font-size: $fs-14
+  p.title 
+    font-size: 1rem
+    font-weight: 500
+    margin: 0
+    padding: 0.5rem 0 0.75rem
+    line-height: 1.25
+    border-bottom: 1px dashed var(--block-border)
+  pre code 
+    font-size: $fs-12
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer
+  padding: 0.5rem 0 1rem
+  margin-bottom: -0.5rem
+  user-select: none
+  font-weight: 500
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: stretch
+  position: sticky
+  position: -webkit-sticky
+  bottom: -0.5rem
+  background: var(--card)
+  span
+    line-height: 1.8
+  &:empty
+    display: none
+  a.comments 
+    margin-right: 0
+  
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer .flex
+  display: flex
+  flex-wrap: wrap
+  font-size: $fs-12
+  align-items: stretch
+  .reaction 
+    border-color: var(--block)
+    border-style: dashed
+  .item
+    border-width: 1px
+    border-style: solid
+    margin: 2px
+    border-radius: 4px
+    padding: 0 0.5rem
+    display: flex 
+    align-items: center
+    &.comments
+      border-width: 0
+    &:first-child 
+      margin-left: 0
+    &:last-child 
+      margin-right: 0
+    .key
+      margin-right: 4px
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer a.comments 
+  border-radius: 4px
+  padding: 0 0.5rem
+  color: white
+  trans1: all
+  margin-left: 2px
+  background: $color-theme
+  .key
+    margin-right: 4px
+  &:hover
+    background: $color-hover
+

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

@@ -33,6 +33,6 @@ details.toc[open] >div.body
       margin-top: 0
 
 
-@media screen and (max-width: $device-tablet)
+@media screen and (max-width: $device-mobile-max)
   .tag-plugin.toc[display=mobile]
     display: block !important

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

@@ -1,3 +1,6 @@
 .cmt-body.utterances
   margin: 0 -4px
   width: 'calc(100% + %s)' % 8px
+
+.related-wrap#comments div.cmt-body svg.loading
+  top: 62px

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

@@ -0,0 +1,61 @@
+.cmt-body.waline
+  --waline-font-size: 0.9375rem;
+  /* 常规颜色 */
+  --waline-white: #fff;
+  --waline-light-grey: #999;
+  --waline-dark-grey: #666;
+  /* 主题色 */
+  --waline-theme-color: #3498db;
+  --waline-active-color: #2ecc71;
+  /* 布局颜色 */
+  --waline-color: #444;
+  --waline-bgcolor: #fff;
+  --waline-bgcolor-light: #f8f8f8;
+  --waline-bgcolor-hover: #f0f0f0;
+  --waline-border-color: #ddd;
+  --waline-disable-bgcolor: #f8f8f8;
+  --waline-disable-color: #bbb;
+  --waline-code-bgcolor: #282c34;
+  /* 特殊颜色 */
+  --waline-bq-color: #f0f0f0;
+  /* 头像 */
+  --waline-avatar-size: 3.25rem;
+  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
+  /* 徽章 */
+  --waline-badge-color: #3498db;
+  --waline-badge-font-size: 0.725em;
+  /* 信息 */
+  --waline-info-bgcolor: #f8f8f8;
+  --waline-info-color: #999;
+  --waline-info-font-size: 0.725em;
+  /* 渲染选择 */
+  --waline-border: 1px solid var(--waline-border-color);
+  --waline-avatar-radius: 50%;
+  --waline-box-shadow: none;
+  
+
+  @media (prefers-color-scheme: dark)
+    --waline-white: #000;
+    --waline-light-grey: #666;
+    --waline-dark-grey: #999;
+    /* 布局颜色 */
+
+    --waline-color: #fff;
+    --waline-bgcolor: var(--block);
+    --waline-bgcolor-light: #272727;
+    --waline-border-color: #333;
+    --waline-disable-bgcolor: #444;
+    --waline-disable-color: #272727;
+    /* 特殊颜色 */
+    --waline-bq-color: #272727;
+    /* 其他颜色 */
+    --waline-info-bgcolor: #272727;
+    --waline-info-color: #666;
+
+.wl-count
+  @media (prefers-color-scheme: dark)
+    padding: .375em;
+    font-weight: bold;
+    font-size: 1.25em;
+    color: #fff;
+

package/source/css/_plugins/index.styl

@@ -17,3 +17,5 @@ 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

@@ -213,21 +213,19 @@ if (stellar.plugins.lazyload) {
   });
 }
 
-// issuesjs
-if (stellar.plugins.sitesjs) {
-  const issues_api = document.getElementById('sites-api');
-  if (issues_api != undefined) {
-    stellar.jQuery(() => {
-      stellar.loadScript(stellar.plugins.sitesjs, { defer: true })
-    })
-  }
-}
-if (stellar.plugins.friendsjs) {
-  const issues_api = document.getElementById('friends-api');
-  if (issues_api != undefined) {
-    stellar.jQuery(() => {
-      stellar.loadScript(stellar.plugins.friendsjs, { defer: true })
-    })
+// stellar js
+if (stellar.plugins.stellar) {
+  for (let key of Object.keys(stellar.plugins.stellar)) {
+    let js = stellar.plugins.stellar[key];
+    const els = document.getElementsByClassName('stellar-' + key + '-api');
+    if (els != undefined && els.length > 0) {
+      stellar.jQuery(() => {
+        stellar.loadScript(js, { defer: true });
+        if (key == 'timeline') {
+          stellar.loadScript(stellar.plugins.marked);
+        }
+      })
+    }
   }
 }
 

package/source/js/plugins/friends.js

@@ -47,13 +47,13 @@ const friendsjs = {
     $(el).append('<div class="loading-wrap"><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><p></p></div>');
     friendsjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
-      const arr = data.content;
+      const arr = data.content || data;
       arr.forEach((item, i) => {
         var user = '<div class="user-card">';
         user += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer"';
-        user += ' href="' + item.url + '">';
-        user += '<img src="' + (item.avatar || cfg.avatar) + '" onerror="javascript:this.src=\'' + cfg.avatar + '\';">';
-        user += '<div class="name"><span>' + item.title + '</span></div>';
+        user += ' href="' + (item.html_url || item.url) + '">';
+        user += '<img src="' + (item.avatar_url || item.avatar || cfg.avatar) + '" onerror="javascript:this.src=\'' + cfg.avatar + '\';">';
+        user += '<div class="name"><span>' + (item.title || item.login) + '</span></div>';
         user += '</a>';
         user += '</div>';
         $(el).find('.group-body').append(user);
@@ -66,7 +66,7 @@ const friendsjs = {
 }
 
 $(function () {
-  const els = document.getElementsByClassName('friendsjs-wrap');
+  const els = document.getElementsByClassName('stellar-friends-api');
   for (var i = 0; i < els.length; i++) {
     const el = els[i];
     const api = el.getAttribute('api');

package/source/js/plugins/ghinfo.js

@@ -0,0 +1,73 @@
+const GitHubInfo = {
+  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();
+  },
+  layout: (cfg) => {
+    const el = $(cfg.el)[0];
+    GitHubInfo.requestAPI(cfg.api, function(data) {
+      const arr = data.content || data;
+      for (let key of Object.keys(data)) {
+        $(el).find("[type=text]#" + key).text(data[key]);
+        $(el).find("[type=link]#" + key).attr("href", data[key]);
+        $(el).find("[type=img]#" + key).attr("src", data[key]);
+      }
+    }, function() {
+    });
+  },
+}
+
+$(function () {
+  const els = document.getElementsByClassName('stellar-ghinfo-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.class = el.getAttribute('class');
+    GitHubInfo.layout(cfg);
+  }
+});

package/source/js/plugins/sites.js

@@ -69,7 +69,7 @@ const sitesjs = {
 }
 
 $(function () {
-  const els = document.getElementsByClassName('sitesjs-wrap');
+  const els = document.getElementsByClassName('stellar-sites-api');
   for (var i = 0; i < els.length; i++) {
     const el = els[i];
     const api = el.getAttribute('api');