hexo-theme-stellar 1.30.0 → 1.30.2

package/source/css/_components/tag-plugins/mdrender.styl

@@ -0,0 +1,15 @@
+.ds-mdrender
+  p strong
+    font-size: $fs-body
+    font-weight: 500
+    color: var(--text)
+
+.l_body[text-indent] article.content .ds-mdrender
+  p:not([class])
+    text-indent: 0
+
+
+.l_body[type=story] .md-text.content 
+  .ds-mdrender
+    ol,ul
+      margin-left: .5rem

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

@@ -29,7 +29,7 @@
   code
     background: none
 .md-text .tag-plugin.note:not([color])
-  .highlight
+  .highlight, pre
     background: var(--block-hover)
 .md-text .tag-plugin.note[child=codeblock]
   padding: 0
@@ -66,3 +66,6 @@
 
 .md-text .tag-plugin .tag-plugin.note
   --gap-p: 1rem
+
+.l_body[type=story] .tag-plugin.note .title p:not([class])
+  text-indent: 0

package/source/css/_components/tag-plugins/poetry.styl

@@ -2,6 +2,8 @@
   display: flex
   flex-direction: column
   align-items: center
+  text-align: left
+  --fsp: $fs-body
   .content
     >.title
       font-weight: 500

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

@@ -31,32 +31,32 @@
     font-size: calc(var(--fsp) + 2px)
     color: var(--text)
 
-// type=text
-.md-text .tag-plugin.quot
-  .content[type=text]
-    &:before,&:after
-      content: ""
-      position: absolute
-      width: 8px
-      height: 14px
-    &:before
-      top: -8px
-      left: 0
-      border-top: 6px solid $color-accent
-      border-left: 6px solid $color-accent
-    &:after
-      right: 0
-      bottom: -8px
-      border-right: 6px solid $color-accent
-      border-bottom: 6px solid $color-accent
-  h1.content[type=text]
-    &:before,&:after
-      width: 12px
-      height: 20px
-      border-width: 8px
+// // type=text
+// .md-text .tag-plugin.quot
+//   .content[type=text]
+//     &:before,&:after
+//       content: ""
+//       position: absolute
+//       width: 8px
+//       height: 14px
+//     &:before
+//       top: -8px
+//       left: 0
+//       border-top: 6px solid $color-accent
+//       border-left: 6px solid $color-accent
+//     &:after
+//       right: 0
+//       bottom: -8px
+//       border-right: 6px solid $color-accent
+//       border-bottom: 6px solid $color-accent
+//   h1.content[type=text]
+//     &:before,&:after
+//       width: 12px
+//       height: 20px
+//       border-width: 8px
 
 // type=icon
-.md-text .tag-plugin.quot .content[type=icon]
+.md-text .tag-plugin.quot
   img,svg
     height: 1.5em
     display: inline-block
@@ -68,4 +68,30 @@
     padding-top: 1px
   span.empty
     padding: 0 8px
-  
+
+.md-text .tag-plugin.quot.p
+  .content
+    trans1 all
+  .content .text
+    position: relative
+  .content .text:after
+    content: ""
+    position: absolute
+    --width: 90%
+    width: var(--width)
+    height: 4px
+    left: calc(50% - var(--width) / 2)
+    bottom: -8px
+    border-radius: 100%
+    background: var(--text)
+    opacity: 0.2
+    filter: blur(2px)
+    trans1 all
+  &:hover
+    .content
+      transform: translateY(-4px) scale(1.05)
+      .text:after
+        opacity: 0.3
+        filter: blur(8px)
+        transform: translateY(4px) scale(1.2, 1.5)
+

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

@@ -15,6 +15,7 @@
     aspect-ratio: 1.5
     width: 100%
     height: 100%
+    border-radius: $border-card-s
     box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
   .info
     margin-top: 0.5rem
@@ -48,20 +49,33 @@
       overflow: hidden
       -webkit-line-clamp: 1
 
-  .label
+  .labels
     position: absolute
-    color: initial
-    font-weight: 600
-    top: 1px
-    right: 0
-    font-size: 10px
-    padding: 2px 4px
-    border-radius: 16px
+    top: 2px
+    right: 2px
+    display: flex
+    flex-wrap: wrap
+    justify-content: flex-end
+    pointer-events: none
+    user-select: none
+    opacity 1
+    trans1 all
+    .label
+      font-weight: 500
+      color: white
+      font-size: 12px
+      padding: 3px 6px 2px 6px
+      margin: 2px
+      line-height: 1
+      border-radius: 16px
 
 // transform
 .sites-wrap .site-card .card-link
   >img
     floatable-trans()
   &:hover
+    .labels
+      opacity 0
+      transform: translateY(-4px)
     >img
       floatable-float()

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

@@ -6,13 +6,15 @@
   flex-direction: column
   &[align=left]
     align-items: flex-start
-    .nav-tabs
+    .nav-tabs,.tab-content
       align-self: flex-start
   &[align=center]
     align-items: center
+    .nav-tabs,.tab-content
+      align-items: center
   &[align=right]
     align-items: flex-end
-    .nav-tabs
+    .nav-tabs,.tab-content
       align-self: flex-end
 
 .tag-plugin.tabs
@@ -75,18 +77,14 @@
     max-width: 100%
     text-align: justify
     margin-top: .5rem
+    display: flex
+    flex-direction: column
     .tab-pane
       display: block
+      overflow: hidden
       &:not(.active)
-        visibility: hidden
         height: 0
       &.active
-        visibility: visible
         height: auto
-  .tab-content:has(.grid-box)
+  .tab-content:has(.grid-box),.tab-pane:has(.grid-box)
     width: 100%
-
-.l_body[text-indent] .md-text .tag-plugin.tabs .tab-content .tab-pane>p:not([class])
-  text-indent: 'calc(%s * 2)' % var(--fsp)
-  a
-    text-indent: 0

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

@@ -15,6 +15,10 @@
     padding-left: 0
     &:before
       display: none
+.l_body[type=story] .md-text.content 
+  .tag-plugin.timeline
+    ol,ul
+      margin-left: 0
 
 .tag-plugin.timeline .timenode
   position: relative
@@ -82,7 +86,7 @@
 
 .tag-plugin.timeline .body
   background: var(--card)
-  border-radius: $border-card
+  border-radius: 16px
   border-top-left-radius: 2px
   padding: 0.5rem 1rem
   margin-top: 4px
@@ -113,32 +117,21 @@
     font-weight: 700
     margin: 0.5rem 0 0.75rem
     line-height: 1.25
+    border-bottom: 1px solid var(--block-border)
     &:only-child 
       margin-bottom: 0.5rem
       font-weight: 500
     a 
       color: inherit
       text-decoration: none
-      border-bottom: 2px solid $color-theme
+      padding-bottom: 0.75rem
+      display: inline-block
       trans1 all
-      background: none
       &:hover
-        background: none
-        border-radius: 0
-        border-bottom: 2px solid $color-hover
-  >p:first-child:not([class]) a:not([class])
-    padding: 0
-    margin: 0
-    color: inherit
-    text-decoration: none
-    border-bottom: 2px solid $color-theme
-    trans1 all
-    background: none
-    &:hover
-      background: none
-      border-radius: 0
-      border-bottom: 2px solid $color-hover
-    
+        color: $color-hover
+  >p:first-child:not([class])
+    font-size: 1rem
+    margin: .25rem 0 .5rem
   
   a
     &:has(img):after
@@ -159,7 +152,6 @@
   flex-wrap: wrap
   justify-content: space-between
   align-items: stretch
-  background: var(--card)
   span
     line-height: 1.8
   &:empty

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

@@ -4,7 +4,7 @@
 .widget-wrapper.user-card .widget-body
   text-align: center
   background: var(--card)
-  border-radius: $border-card
+  border-radius: $border-card-s
   padding: 1rem
   box-shadow: $boxshadow-card
 

package/source/css/_components/widgets/markdown.styl

@@ -1,9 +1,10 @@
 .widget-wrapper.markdown
   .widget-body
-    border-radius: $border-card
-    padding: 4px 16px
+    border-radius: $border-card-s
+    padding: .25rem 1rem
     background: var(--alpha50)
-
+    >*:first-child
+      margin-top: .75rem
     a:not([class])
       trans1 all
       border-bottom: 1px solid var(--text)

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

@@ -7,7 +7,7 @@
     line-height: 1.2
     background: var(--alpha20)
     padding: 10px 16px
-    border-radius: $border-card
+    border-radius: $border-card-s
     display: block
     border-left: 0
     box-sizing: border-box

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

@@ -1,5 +1,5 @@
 .widget-wrapper.tagcloud .widget-body
-  border-radius: $border-card
+  border-radius: $border-card-s
   padding: 12px 16px
   background: var(--alpha50)
   a  

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

@@ -24,7 +24,7 @@
     .header:before
       left: calc(6px - var(--gap-padding))
     .body
-      border-radius: $border-card
+      border-radius: $border-card-s
       padding: 0.5rem 1rem
       p,li
         --fsp: $fsp3

package/source/css/_custom.styl

@@ -18,6 +18,9 @@ $ff-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sa
 $ff-code = $ff-codeblock
 $ff-logo = $ff-body
 
+$iQuoteLeft = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E"
+$iQuoteRight = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292m-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292'/%3E%3C/svg%3E"
+
 if hexo-config('style.font-family.body')
   $ff-body = convert(hexo-config('style.font-family.body'))
 
@@ -55,9 +58,10 @@ $fsp3 = 'calc(%s - 3px)' % $fs-body
 
 $border-card-l = convert(hexo-config('style.border-radius.card-l'))
 $border-card = convert(hexo-config('style.border-radius.card'))
+$border-card-s = convert(hexo-config('style.border-radius.card-s'))
 $border-bar = convert(hexo-config('style.border-radius.bar'))
 $border-image = convert(hexo-config('style.border-radius.image'))
-$border-button = 4px
+$border-button = 8px
 
 // 可以动态变化的属性
 :root
@@ -94,7 +98,7 @@ $border-button = 4px
   --gap-max: calc(var(--gap-margin) + var(--gap-padding))
 
 // 文章布局风格
-.l_body.story
+.l_body[type=story]
   --gap-p: 2rem
   div.tag-plugin,p>img
     margin-top: 2.4rem

package/source/css/_defines/const.styl

@@ -48,3 +48,6 @@ $c-green = #3DC550
 $c-cyan = #1BCDFC
 $c-blue = #2196f3
 $c-purple = #9c27b0
+
+$hue-yellow = 50
+$cDeepOrange = hsl(14 100% 57%)

package/source/css/_defines/func.styl

@@ -1,3 +1,13 @@
+svg-mask-icon($svg)
+  -webkit-mask-image: url($svg)
+  -webkit-mask-repeat: no-repeat
+  -webkit-mask-position: center
+  -webkit-mask-size: contain
+  mask-image: url($svg)
+  mask-repeat: no-repeat
+  mask-position: center
+  mask-size: contain
+
 
 // // 可替代 transition 使用
 // transition($op = all, $time = 0.28s, $ease = ease-out)

package/source/css/_defines/theme.styl

@@ -1,3 +1,7 @@
+// 通用 hsla 函数
+hsla-var(h = var(--hue), s = var(--sat), l = var(--light), a = 1)
+  return unquote('hsla(%s, %s, %s, %s)' % (h s l a))
+
 // Deprecated function. Keep for compatibility.
 theme($t)
   convert(hexo-config('style.prefers_theme')) == $t
@@ -43,6 +47,11 @@ _common_root()
     --theme-link: $color-link
     --theme-color: $color-theme
     --theme-color-opa: $color-theme-opa
+    // new
+    --hue: 50
+    --sat: 90%
+    --light: 80%
+    --dynamic-color: hsla-var()
 
 _light_root()
   --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)

package/source/js/services/artalk_latest_comment.js

@@ -9,7 +9,8 @@ utils.jq(() => {
         if (api == null) {
           continue;
         }
-        utils.request(el, api, function (data) {
+        utils.request(el, api, async resp => {
+          const data = await resp.json();
           data = data.data || [];
           data.forEach((item, i) => {
             var cell = '<div class="timenode" index="' + i + '">';

package/source/js/services/fcircle.js

@@ -9,7 +9,8 @@ utils.jq(() => {
       }
       const default_avatar = def.avatar;
       // layout
-      utils.request(el, api, function(data) {
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
         const arr = data.article_data || [];
         const limit = el.getAttribute('limit');
         arr.forEach((item, i) => {

package/source/js/services/friends.js

@@ -9,7 +9,8 @@ utils.jq(() => {
       }
       const default_avatar = def.avatar;
       // layout
-      utils.request(el, api, function(data) {
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
         for (let item of (data.content || data)) {
           var cell = `<div class="grid-cell user-card">`;
           cell += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.html_url || item.url}">`;;

package/source/js/services/friends_and_posts.js

@@ -0,0 +1,58 @@
+utils.jq(() => {
+  $(function () {
+    const els = document.getElementsByClassName('ds-friends_and_posts');
+    for (var i = 0; i < els.length; i++) {
+      const el = els[i];
+      const api = el.getAttribute('api');
+      if (api == null) {
+        continue;
+      }
+      const default_avatar = def.avatar;
+      // layout
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
+        for (let item of (data.content || data)) {
+          var cell = `<div class="grid-cell user-post-card">`;
+          cell += `<div class="avatar-box">`;
+          cell += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.html_url || item.url}">`;;
+          cell += `<img src="${item.avatar_url || item.avatar || item.icon || default_avatar}" onerror="javascript:this.removeAttribute(\'data-src\');this.src=\'${default_avatar}\';"/>`;
+          cell += `<span class="title">${item.title || item.login}</span>`;
+          cell += `</a>`;
+          cell += `<div class="labels">`;
+          for (let label of item.labels) {
+            if (label.lightness > 75) {
+              cell += `<div class="label" style="background:#${label.color};color:hsla(${label.hue}, ${label.saturation}%, 20%, 1);">${label.name}</div>`;
+            } else if (label.saturation > 90 && label.lightness > 40) {
+              cell += `<div class="label" style="background:#${label.color};color:hsla(${label.hue}, 50%, 20%, 1);">${label.name}</div>`;
+            } else {
+              cell += `<div class="label" style="background:#${label.color};color:white">${label.name}</div>`;
+            }
+          }
+          cell += `</div>`;
+          cell += `</div>`;
+          cell += `<div class="previews">`;
+          if (item.description) {
+            cell += `<div class="desc">${item.description || item.issue_number || ''}</div>`;
+          } else {
+            cell += `<div class="desc">#${item.issue_number}</div>`;
+          }
+          cell += `<div class="posts">`;
+          if (item.posts?.length > 0) {
+            for (let post of item.posts) {
+              cell += `<a class="post-link" target="_blank" rel="external nofollow noopener noreferrer" href="${post.link}">`;
+              cell += `<span class="title">${post.title}</span>`;
+              cell += `<span class="date">${post.published}</span>`;
+              cell += `</a>`;
+            }
+          } else {
+            cell += `<span class="no-post">${item.feed?.length > 0 ? 'RSS 解析失败' : '未设置 RSS 链接'}</span>`;
+          }
+          cell += `</div>`;
+          cell += `</div>`;
+          cell += `</div>`;
+          $(el).find('.grid-box').append(cell);
+        }
+      });
+    }
+  });
+});

package/source/js/services/ghinfo.js

@@ -8,7 +8,8 @@ utils.jq(() => {
         continue;
       }
       // layout
-      utils.request(null, api, function(data) {
+      utils.request(null, api, async resp => {
+        const data = await resp.json();
         function fill(data) {
           for (let key of Object.keys(data)) {
             $(el).find("[type=text]#" + key).text(data[key]);

package/source/js/services/giscus_latest_comment.js

@@ -9,7 +9,8 @@ utils.jq(() => {
         }
         const default_avatar = def.avatar;
         // layout
-        utils.request(el, api, function(data) {
+        utils.request(el, api, async resp => {
+          const data = await resp.json();
           const limit = el.getAttribute('limit');
           data.forEach((item, i) => {
             if (limit && i >= limit) {

package/source/js/services/mdrender.js

@@ -3,8 +3,11 @@ utils.jq(() => {
   for (var i = 0; i < els.length; i++) {
     const el = els[i];
     const src = `${el.getAttribute('src')}?t=${new Date().getTime()}`;
-    utils.request(el, src, function(data) {
-      el.innerHTML = marked.parse(resp.data);
+    console.log('src', src);
+    
+    utils.request(el, src, async resp => {
+      const data = await resp.text();
+      el.innerHTML = marked.parse(data);
     });
   }
 });

package/source/js/services/memos.js

@@ -9,7 +9,8 @@ utils.jq(() => {
     const limit = el.getAttribute('limit');
     const host = api.match(/https:\/\/(.*?)\/(.*)/i)[1];
 
-    utils.request(el, api, async data => {
+    utils.request(el, api, async resp => {
+      const data = await resp.json();
       let memos = versionHandlers.identify(data);
       if (memos.version === "feature" )return;
 

package/source/js/services/sites.js

@@ -10,18 +10,26 @@ utils.jq(() => {
       const default_avatar = def.avatar;
       const default_cover = def.cover;
       // layout
-      utils.request(el, api, function(data) {
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
         for (let item of data.content) {
           var cell = `<div class="grid-cell site-card">`;
           cell += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`;
-          cell += `<img src="${item.cover || item.screenshot}" onerror="javascript:this.removeAttribute(\'data-src\');this.src=\'${default_cover}\';"/>`;
+          cell += `<img src="${item.cover || item.snapshot || item.screenshot}" onerror="javascript:this.removeAttribute(\'data-src\');this.src=\'${default_cover}\';"/>`;
           cell += `<div class="info">`;
           cell += `<img src="${item.icon || item.avatar || default_avatar}" onerror="javascript:this.removeAttribute(\'data-src\');this.src=\'${default_avatar}\';"/>`;
           cell += `<span class="title">${item.title}</span>`;
           cell += `<span class="desc">${item.description || item.url}</span>`;
-          if (item.labels && item.labels.length > 0) {
-            let label = item.labels[0];
-            cell += `<span class="label" style="background:#${label.color};">${label.name}</span>`;
+          cell += `</div>`;
+          cell += `<div class="labels">`;
+          for (let label of item.labels) {
+            if (label.lightness > 75) {
+              cell += `<div class="label" style="background:#${label.color};color:hsla(${label.hue}, ${label.saturation}%, 20%, 1);">${label.name}</div>`;
+            } else if (label.saturation > 90 && label.lightness > 40) {
+              cell += `<div class="label" style="background:#${label.color};color:hsla(${label.hue}, 50%, 20%, 1);">${label.name}</div>`;
+            } else {
+              cell += `<div class="label" style="background:#${label.color};color:white">${label.name}</div>`;
+            }
           }
           cell += `</div>`;
           cell += `</a>`;

package/source/js/services/timeline.js

@@ -18,7 +18,8 @@ utils.jq(() => {
         continue;
       }
       // layout
-      utils.request(el, api, function(data) {
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
         const query = new URL(api).search;
         const arr = data.content || data;
         var users = [];

package/source/js/services/waline_latest_comment.js

@@ -10,7 +10,8 @@ utils.jq(() => {
         }
         const api = apiBase + '/comment?type=recent&count=' + limit;
         const default_avatar = def.avatar;
-        utils.request(el, api, function(data) {
+        utils.request(el, api, async resp => {
+          const data = await resp.json();
           data.forEach((item, i) => {
             var cell = '<div class="timenode" index="' + i + '">';
             cell += '<div class="header">';

package/source/js/services/weibo.js

@@ -9,7 +9,8 @@ utils.jq(() => {
       }
       const default_avatar = el.getAttribute('avatar') || def.avatar;
       // layout
-      utils.request(el, api, function(data) {
+      utils.request(el, api, async resp => {
+        const data = await resp.json();
         const arr = data.tweets || [];
         const limit = el.getAttribute('limit');
         arr.forEach((item, i) => {