hexo-theme-stellar 1.9.0 → 1.11.0

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

@@ -0,0 +1,80 @@
+.widget-wrap#github-user
+  .widget-header+.widget-body
+    margin: 0.75rem 0
+.widget-wrap#github-user .widget-body
+  text-align: center
+  background: var(--card)
+  border-radius: $border-card
+  padding: 1rem
+
+.widget-wrap#github-user .widget-body .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%
+
+.widget-wrap#github-user .widget-body .username
+  font-weight: 900
+  font-size: $fs-h2
+  color: var(--text-p0)
+  margin: 0.5rem 0
+
+.widget-wrap#github-user .widget-body .bio
+  font-size: $fs-13
+  margin: 0.5rem 0
+
+.widget-wrap#github-user .widget-body .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
+
+  
+
+.widget-wrap#github-user .widget-body .buttons
+  margin: 1rem 0
+  align-self: stretch
+  display: grid
+  grid-gap: 2px
+  grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)
+
+.widget-wrap#github-user .widget-body .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)
+
+
+.widget-wrap#github-user .widget-body .buttons .btn .title
+  font-size: 1rem
+  font-weight: 700
+
+
+.widget-wrap#github-user .widget-body .buttons .btn .desc
+  font-size: $fs-12
+  color: var(--text-p3)
+  font-weight: 500

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
@@ -75,7 +75,6 @@
     font-weight: 900
     color: inherit
     line-height: 1.2
-    font-family: $ff-logo
     display: block
     position: relative
     .main

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,26 @@
     >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
+            color: var(--text-p1)
   .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/folders.styl

@@ -0,0 +1,62 @@
+.tag-plugin.folders
+  display: block
+  margin: 1rem 0
+  border-radius: $border-block
+  font-size: $fs-14
+  border: 1px solid var(--theme-border)
+  overflow: hidden
+  .folder
+    display: block
+    font-size: $fs-14
+    background: var(--block)
+    &:last-child summary
+      border-bottom: none
+  summary
+    display: block
+    cursor: pointer
+    color: var(--text-p2)
+    font-weight: 500
+    position: relative
+    line-height: 1.2
+    outline: none
+    padding: 0.75rem 1rem
+    border-bottom: 1px solid var(--theme-border)
+    &:last-child
+      border-bottom: none
+    >
+      p,h1,h2,h3,h4,h5,h6
+        display: inline
+        border-bottom: none !important
+    &:hover
+      color: var(--text-p0)
+      background: var(--block-hover)
+      &:after
+        position: absolute
+        content: '+'
+        text-align: center
+        top: 50%
+        transform: translateY(-50%)
+        right: 1rem
+
+
+.tag-plugin.folders details[open]
+  background: none
+  &:last-child 
+    summary
+      border-bottom: 1px solid var(--theme-border)
+    .body
+      border-bottom: none
+  >summary
+    color: var(--text-p1)
+    background: var(--block-hover)
+    &:hover:after
+      content: '-'
+      
+  >div.body
+    padding: 1rem
+    border-bottom: 1px solid var(--theme-border)
+    font-size: $fs-15
+    >:first-child
+      margin-top: 0
+    >:last-child
+      margin-bottom: 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/poetry.styl

@@ -47,4 +47,4 @@
       top: 6px
       bottom: 6px
       border-radius: 4px
-      background: $color-highlight
+      background: $color-accent

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

@@ -41,13 +41,13 @@ article.md.content
   &:before
     top: 8px
     left: 0
-    border-top: 6px solid $color-highlight
-    border-left: 6px solid $color-highlight
+    border-top: 6px solid $color-accent
+    border-left: 6px solid $color-accent
   &:after
     right: 0
     bottom: 0
-    border-right: 6px solid $color-highlight
-    border-bottom: 6px solid $color-highlight
+    border-right: 6px solid $color-accent
+    border-bottom: 6px solid $color-accent
 article.md.content h1.quot[type=text]
   &:before,&:after
     width: 12px
@@ -59,9 +59,10 @@ article.md.content h1.quot[type=text]
   .icon
     height: 1.5em
     display: inline-block
-    color: $color-highlight
+    color: $color-accent
     border-radius: 0
     &.prefix
+      margin-left: -0.5rem
       margin-right: .5rem
     &.suffix
       margin-left: .5rem
@@ -70,7 +71,7 @@ article.md.content h1.quot[type=text]
 .md span.tag-plugin.quot
   font-weight: 500
   &:before,&:after
-    color: $color-highlight
+    color: $color-accent
     font-weight: 900
   &:before
     content: "「"

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
@@ -28,23 +35,48 @@
   &:hover .header
     p
       color: var(--text-p1)
+    .user-info
+      background: $color-theme
+      span
+        color: var(--card)
     &:before
       background: $color-theme
       height: 16px
       top: 'calc(50% - 0.5 * %s)' % @height
       transform: scale(1)
 
-.tag-plugin.timeline .header
+.tag-plugin.timeline .timenode .header
   display: flex
   align-items: center
   position: relative
+  margin: 0.25rem 0
+  .user-info 
+    display: flex
+    align-items: center
+    font-size: $fs-12
+    font-weight: 500
+    color: var(--text-p1)
+    margin-right: 4px
+    line-height: 1
+    border-radius: 16px
+    padding-right: 6px
+    trans2 color background
+    img 
+      background: white
+      height: 16px
+      border-radius: 16px
+      display: inline
+      margin: 0 4px 0 0
+      object-fit: contain
+    &:hover
+      background: $color-hover
   p
-    margin: .25rem 0
+    margin: 0
     font-size: $fs-12
-    font-weight: 700
+    font-weight: 500
     color: var(--text-p3)
-    font-family: $ff-code
     trans1 color
+    line-height: 1
     a
       color: inherit
       font-weight: inherit
@@ -68,9 +100,79 @@
   padding: 0.5rem 1rem
   margin-top: 4px
   box-shadow: $boxshadow-block
+  p
+    font-size: $fs-14
   &:empty
     display: none
   p,.highlight,ol,ul,.tag-plugin
     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.title 
+    font-size: 1rem
+    font-weight: 700
+    margin: 0
+    padding: 0.5rem 0 0.75rem
+    line-height: 1.25
+    border-bottom: 1px dashed var(--block-border)
+    a 
+      color: inherit
+      &:hover
+        color: $color-hover
+  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
+  .flex
+    display: flex
+    flex-wrap: wrap
+    font-size: $fs-12
+    align-items: stretch
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer
+  .item
+    border-width: 1px
+    border-style: solid
+    margin: 2px
+    border-radius: 4px
+    padding: 0 0.5rem
+    display: flex 
+    align-items: center
+    &:first-child 
+      margin-left: 0
+    &:last-child 
+      margin-right: 0
+  .reaction 
+    border-color: var(--block)
+
+.tag-plugin.timeline .body blockquote
+  padding: 0 0.5rem
+  box-shadow: none
+  border-left: 4px solid var(--block-border)
+  border-radius: 0
+  display: block
+  margin: 0.75rem 0
+  p
+    font-size: $fs-13
+    margin: 0.25rem

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/twikoo.styl

@@ -2,7 +2,7 @@
   --twikoo-lighttext: #ef794f;
   --twikoo-secondtext: #909094;
   --twikoo-emoji-background: #f8f8f8;
-  --twikoo-theme: #409eff;
+  --twikoo-theme: $color-theme;
   margin-top: 1.5rem
 
   .tk-content
@@ -112,4 +112,4 @@ if hexo-config('style.darkmode') == 'auto'
       --twikoo-lighttext: #f2b94b;
       --twikoo-secondtext: #a1a2b8;
       --twikoo-emoji-background: darken($dark-block, 1);
-      --twikoo-theme: #409eff;
+      --twikoo-theme: #409eff;

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

@@ -5,7 +5,7 @@
   --waline-light-grey: #999;
   --waline-dark-grey: #666;
   /* 主题色 */
-  --waline-theme-color: #3498db;
+  --waline-theme-color: $color-theme;
   --waline-active-color: #2ecc71;
   /* 布局颜色 */
   --waline-color: #444;

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

@@ -48,7 +48,6 @@ const friendsjs = {
     friendsjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
       const arr = data.content || data;
-      console.log(data);
       arr.forEach((item, i) => {
         var user = '<div class="user-card">';
         user += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer"';
@@ -67,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);
+  }
+});