hexo-theme-stellar 1.22.1 → 1.24.0

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

@@ -1,11 +1,7 @@
 .tag-plugin.grid
   display: grid
   grid-gap: 16px
-  grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
-  >.cell
-    p:first-child>strong:only-child
-      font-size: 1rem
-  >.cell>
+  &[bg]>.cell>
     p   
       line-height: 1.5
     :first-child
@@ -21,12 +17,9 @@
   &[bg]>.cell
     padding: 1rem
     border-radius: $border-card
-  &[bg='block']>.cell
+  &[bg='box']>.cell
     background: var(--block)
   &[bg='card']>.cell
     background: var(--card)
     box-shadow: $boxshadow-card
-    trans2 box-shadow transform
-    &:hover
-      transform: translateY(-1px)
-      box-shadow: $boxshadow-card-float
+    hover-float()

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

@@ -9,14 +9,11 @@
   justify-content: space-between
   align-items: center
   cursor: pointer
-  width: 320px
+  width: 340px
   max-width: 100%
   box-shadow: $boxshadow-card
   border-radius: $border-bar
-  trans2: box-shadow transform
-  &:hover
-    box-shadow: $boxshadow-card-float
-    transform: translateY(-1px)
+  hover-float()
 
 .md-text .link-card.plain
   flex-direction: row

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

@@ -40,6 +40,13 @@
     margin: 0
     border: none
     background: none
+    figcaption
+      span
+        background: var(--theme-block)
+  .highlight+.highlight
+    border-top: 1px dashed var(--theme-border)
+    border-top-left-radius: 0
+    border-top-right-radius: 0
 
 .md-text .tag-plugin.note[child=tabs]
   >.body

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

@@ -1,46 +1,19 @@
-.sites-wrap
-  .group-header
-    margin: 1rem 0
-    p
-      margin: 0
-      font-size: $fs-14
-      &:first-child
-        font-size: 1.25rem
-        font-weight: 500
-  .group-body
-    width: 100%
-    &+.group-header
-      margin-top: 2rem
-  .stellar-sites-api
-    display: block
-
-.sites-wrap .group-body
+.sites-wrap .grid-box
   display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
   grid-gap: 1rem 1rem
-  grid-template-columns: repeat(auto-fill, "calc((100% - 3 * %s) / 4)" % 1rem)
-  @media screen and (max-width: $device-laptop)
-    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-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)
+  .grid-cell
+    aspect-ratio: 1.5
 
-.sites-wrap .group-body .site-card .card-link
+.sites-wrap .site-card .card-link
   width: 100%
   display: flex
   flex-direction: column
   >img
-    width: 100%
-    height 100px
-    @media screen and (max-width: $device-laptop)
-      height: 120px
-    @media screen and (max-width: 900px)
-      height: 150px
-    @media screen and (max-width: $device-tablet)
-      height: 120px
     object-fit: cover
+    aspect-ratio: 1.5
+    width: 100%
+    height: 100%
     box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
   .info
     margin-top: 0.5rem
@@ -71,13 +44,12 @@
       display: -webkit-box
       -webkit-box-orient: vertical
       overflow: hidden
-      -webkit-line-clamp: 2
+      -webkit-line-clamp: 1
 
 // transform
 .sites-wrap .site-card .card-link
   >img
-    trans2: box-shadow transform
+    floatable-trans()
   &:hover
     >img
-      box-shadow: $boxshadow-float, $boxshadow-card-float
-      transform: translateY(-2px)
+      floatable-float()

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

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

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

@@ -6,14 +6,11 @@
     background: var(--card)
     border-radius: $border-block
     box-shadow: $boxshadow-card
-    trans2 box-shadow transform
+    hover-float()
     >div+div
       margin-top: 0.5rem
     span
       color: var(--text-p2)
-    &:hover
-      box-shadow: $boxshadow-card-float
-      transform: translateY(-1px)
     svg
       margin-right: 4px
     .flex-row

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

@@ -69,14 +69,28 @@
     color: $color-theme !important
     &:before
       visibility: visible
+  
+// 始终折叠
+.widget-wrapper.toc[collapse='true']
+  .toc-item a.toc-link+ol
+    display: none
+  // 激活上级目录时显示子目录
+  .toc a.toc-link.active+ol
+    display: block
 
+// 自动折叠
+.widget-wrapper.toc[collapse='auto']
+  .toc-item a.toc-link+ol
+    display: none
+  // 激活上级目录时显示子目录
+  .toc a.toc-link.active+ol
+    display: block
+  // 鼠标放上去时显示子目录
+  &:hover a.toc-link+ol
+    display: block
 
-// 激活上级目录时显示子目录
-.toc-item a.toc-link+ol
-  display: none
-.toc a.toc-link.active+ol
-  display: block
-ol:has(> .toc-item a.active)
-  display: block
-.doc-tree:hover a.toc-link+ol
+// 子目录激活时显示
+.widget-wrapper.toc[collapse='true'] ol:has(> .toc-item a.active)
   display: block
+.widget-wrapper.toc[collapse='auto'] ol:has(> .toc-item a.active)
+  display: block

package/source/css/_plugins/copycode.styl

@@ -5,34 +5,36 @@
   position: absolute
   top: 0
   right: 0
-  padding: 4px 0.5rem
-  opacity: 0
+  padding: 0px 0.5rem
   font-weight: 700
-  color: var(--text-p2)
+  visibility: hidden
   border-bottom-left-radius: $border-bar
   border-bottom-right-radius: $border-bar
-  background: var(--block-hover)
+  background: var(--card)
   display: block
   cursor: pointer
-  margin-right: 0.5rem
+  margin-right: 4px
+  margin-top: 4px
+  border-radius: 'calc(%s - 4px)' % $border-block
 
 .highlight:hover
   .code:before
-    opacity: 0
+    visibility: hidden
   .copy-btn 
-    opacity: 0.75
-
-.highlight .code .copy-btn:hover
-  opacity: 1
+    visibility: visible
 
 .highlight .code .copy-btn.success
-  color: $c-green
-  opacity: 0.75
+  background: $c-green
+  color: white
+  visibility: visible
 
 .highlight .code .copy-btn.warning
-  color: $c-orange
-  opacity: 0.75
+  background: $c-orange
+  color: white
+  visibility: visible
 
-.md-text .tag-plugin[child=codeblock]
-  .highlight .code .copy-btn
+.md-text .folding[child=codeblock]
+  .code .copy-btn
+    z-index 1
+    margin-right: 1rem
     border-radius: $border-bar

package/source/css/_plugins/fancybox.styl

@@ -1,9 +1,6 @@
 img[fancybox='true']
   cursor: zoom-in
 
-.swiper-slide
-  cursor: zoom-in
-
-.tag-plugin.gallery
+.fancybox
   img 
     cursor: zoom-in

package/source/css/_plugins/index.styl

@@ -9,7 +9,7 @@ if hexo-config('plugins.scrollreveal.enable')
   @import 'scrollreveal'
 if hexo-config('plugins.fancybox.enable')
   @import 'fancybox'
-if hexo-config('plugins.mermaid.enable')
+if hexo-config('plugins.mermaid.style_optimization')
   @import 'mermaid'
 if hexo-config('plugins.copycode.enable')
   @import 'copycode'

package/source/css/_plugins/lazyload.styl

@@ -14,9 +14,9 @@ if hexo-config('plugins.lazyload.transition') == 'blur'
     &.loaded,&.error
       filter none
       -webkit-filter none
-  .group-body .site-card .card-link>img
+  .site-card .card-link>img
     trans-site filter
-  .group-body .user-card .card-link>img
+  .user-card .card-link>img
     trans-user filter
 else
   img.lazy
@@ -25,7 +25,7 @@ else
       opacity: 0
     &.loaded,&.error
       opacity: 1
-  .group-body .site-card .card-link>img
+  .site-card .card-link>img
     trans-site opacity
-  .group-body .user-card .card-link>img
+  .user-card .card-link>img
     trans-user opacity

package/source/js/main.js

@@ -44,7 +44,7 @@ const util = {
       el.select();
       document.execCommand("Copy");
       if (msg && msg.length > 0) {
-        hud.toast(msg);
+        hud.toast(msg, 2500);
       }
     }
   },
@@ -59,17 +59,15 @@ const util = {
 
 const hud = {
   toast: (msg, duration) => {
-    duration = isNaN(duration) ? 2000 : duration;
+    const d = Number(isNaN(duration) ? 2000 : duration);
     var el = document.createElement('div');
     el.classList.add('toast');
+    el.classList.add('show');
     el.innerHTML = msg;
     document.body.appendChild(el);
-    setTimeout(function () {
-      var d = 0.5;
-      el.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
-      el.style.opacity = '0';
-      setTimeout(function () { document.body.removeChild(el) }, d * 1000);
-    }, duration);
+
+    setTimeout(function(){ document.body.removeChild(el) }, d);
+    
   },
 
 }
@@ -244,7 +242,7 @@ if (stellar.plugins.stellar) {
       const els = document.getElementsByClassName('stellar-' + key + '-api');
       if (els != undefined && els.length > 0) {
         stellar.jQuery(() => {
-          if (key == 'timeline' || 'memos') {
+          if (key == 'timeline' || 'memos' || 'marked') {
             stellar.loadScript(stellar.plugins.marked).then(function () {
               stellar.loadScript(js, { defer: true });
             });

package/source/js/plugins/copycode.js

@@ -13,7 +13,7 @@ codeElementArr.forEach(code => {
 
     codeCopyBtn.innerText = stellar.plugins.copycode.success_text
     codeCopyBtn.classList.add('success')
-
+    hud.toast(stellar.plugins.copycode.toast, 2500)
     setTimeout(() => {
       codeCopyBtn.innerText = stellar.plugins.copycode.default_text
       codeCopyBtn.classList.remove('success')

package/source/js/plugins/friends.js

@@ -47,17 +47,17 @@ const friendsjs = {
     $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" 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>');
     friendsjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
-      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.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);
-      });
+      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}">`;;
+        cell += `<img src="${item.avatar_url || item.avatar || item.icon || cfg.avatar}" onerror="javascript:this.removeAttribute(\'data-src\');this.src=\'${cfg.avatar}\';"/>`;
+        cell += `<div class="name image-meta">`;
+        cell += `<span class="image-caption">${item.title || item.login}</span>`;
+        cell += `</div>`;
+        cell += `</a>`;
+        cell += `</div>`;
+        $(el).find('.grid-box').append(cell);
+      }
     }, function() {
       $(el).find('.loading-wrap svg').remove();
       $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" 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>');

package/source/js/plugins/marked.js

@@ -0,0 +1,50 @@
+const loadMarkdown = (cfg) => {
+  if (!window.fetch) {
+    cfg.el.innerHTML =
+      '<div style="font-size: 24px"><p>Your browser outdated. Please use the latest version of Chrome or Firefox!</p><p>您的浏览器版本过低，请使用最新版的 Chrome 或 Firefox 浏览器！</p></div>';
+  } else {
+    cfg.el.innerHTML =
+      '<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" 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>';
+    fetch(cfg.src, { method: "GET" })
+      .then((resp) => {
+        return Promise.all([
+          resp.ok,
+          resp.status,
+          resp.text(),
+          resp.headers,
+        ]);
+      })
+      .then(([ok, status, data, headers]) => {
+        if (ok) {
+          return {
+            ok,
+            status,
+            data,
+            headers,
+          };
+        } else {
+          throw new Error(JSON.stringify(json.error));
+        }
+      })
+      .then((resp) => {
+        let data = marked.parse(resp.data);
+        cfg.el.innerHTML = data;
+      })
+      .catch((error) => {
+        console.error(error);
+        cfg.el.innerHTML =
+          '<div class="loading-wrap error"><svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" 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></div>';
+      });
+  };
+};
+
+$(function () {
+  const els = document.getElementsByClassName('stellar-marked-api');
+  for (var i = 0; i < els.length; i++) {
+    var cfg = new Object();
+    const el = els[i];
+    cfg.src = `${el.getAttribute('src')}?t=${new Date().getTime()}`;
+    cfg.el = el;
+    loadMarkdown(cfg);
+  }
+});

package/source/js/plugins/sites.js

@@ -47,20 +47,19 @@ const sitesjs = {
     $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" 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>');
     sitesjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
-      const arr = data.content;
-      arr.forEach((item, i) => {
-        var cell = '<div class="site-card">';
-        cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + item.url + '">';
-        cell += '<img src="' + (item.screenshot || ('https://api.vlts.cc/screenshot?url=' + item.url + '&width=1280&height=720')) + '" onerror="javascript:this.src=\'' + cfg.screenshot + '\';"/>';
-        cell += '<div class="info">';
-        cell += '<img src="' + (item.avatar || cfg.avatar) + '" onerror="javascript:this.src=\'' + cfg.avatar + '\';"/>';
-        cell += '<span class="title">' + item.title + '</span>';
-        cell += '<span class="desc">' + (item.description || item.url) + '</span>';
-        cell += '</div>';
-        cell += '</a>';
-        cell += '</div>';
-        $(el).find('.group-body').append(cell);
-      });
+      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=\'${cfg.screenshot}\';"/>`;
+        cell += `<div class="info">`;
+        cell += `<img src="${item.icon || item.avatar || cfg.avatar}" onerror="javascript:this.removeAttribute(\'data-src\');this.src=\'${cfg.avatar}\';"/>`;
+        cell += `<span class="title">${item.title}</span>`;
+        cell += `<span class="desc">${item.description || item.url}</span>`;
+        cell += `</div>`;
+        cell += `</a>`;
+        cell += `</div>`;
+        $(el).find('.grid-box').append(cell);
+      }
     }, function() {
       $(el).find('.loading-wrap svg').remove();
       $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" 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>');

package/_data/links.yml

@@ -1,7 +0,0 @@
-# 不要直接在这里写，要复制到 blog/source/_data/links.yml 位置
-'示例':
-  - title: XAOXUU
-    avatar: https://bu.dusays.com/2021/09/24/2f74810ceb3d3.png
-    url: https://xaoxuu.com
-    screenshot: https://bu.dusays.com/2022/10/23/63542895cfd29.png
-    description:

package/layout/mathjax.ejs

@@ -1,29 +0,0 @@
-<% if (theme.plugins.mathjax.enable){ %>
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Config({
-          tex2jax: {
-            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
-            processEscapes: true
-          }
-        });
-      </script>
-
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Config({
-            tex2jax: {
-              skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
-            }
-          });
-      </script>
-
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Queue(function() {
-              var all = MathJax.Hub.getAllJax(), i;
-              for(i=0; i < all.length; i += 1) {
-                  all[i].SourceElement().parentNode.className += ' has-jax';
-              }
-          });
-      </script>
-
-    <script type="text/javascript" src="<%- theme.plugins.mathjax.cdn %>"></script>
-<% } %>

package/layout/mermaid.ejs

@@ -1,32 +0,0 @@
-<% if (theme.plugins.mermaid.enable) { %>
-  <script type="text/javascript" src="<%- theme.plugins.mermaid.js %>"></script>
-
-  <script>
-    var mermaid_config = {
-      startOnLoad: true,
-      theme:
-        "<%- theme.style.darkmode %>" == "auto" &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "<%- theme.plugins.mermaid.theme %>",
-      logLevel: 3,
-      themeVariables: {
-        darkMode: true
-      },
-      flowchart: {
-        useMaxWidth: false,
-        htmlLabels: true,
-        curve: "linear"
-      },
-      gantt: {
-        axisFormat: "%Y/%m/%d"
-      },
-      sequence: {
-        actorMargin: 50
-      }
-    }
-    if (window.mermaid) {
-      mermaid.initialize(mermaid_config);
-    }
-  </script>
-<% } %>