hexo-theme-stellar 1.18.5 → 1.20.0

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

@@ -13,8 +13,7 @@ set_text_black()
 
 set_dynamic_color($theme)
   --theme: $theme
-  --theme-bg1: hsl(hue($theme), 90, 90)
-  --theme-bg2: hsl(hue($theme), 80, 95)
+  --theme-block: hsl(hue($theme), 90, 92)
   --theme-border: hsl(hue($theme), 50, 80)
   --text-p0: hsl(hue($theme), 55, 16)
   --text-p1: hsl(hue($theme), 55, 20)
@@ -23,87 +22,79 @@ set_dynamic_color($theme)
 .tag-plugin
   --theme: var(--text-p1)
   --theme-border: var(--block-border)
-  --theme-bg1: hsl(hue($color-theme), 90, 90)
-  --theme-bg2: var(--block)
-  &.tag
-    --text-p2: hsl(hue($color-theme), 90, 24)
+  --theme-block: var(--block)
 
-.tag-plugin[color='red']
+.colorful[color='red']
   set_dynamic_color($c-red)
-.tag-plugin[color='orange']
+.colorful[color='orange']
   set_dynamic_color($c-orange)
-.tag-plugin[color='yellow']
+.colorful[color='yellow']
   set_dynamic_color($c-yellow)
-.tag-plugin[color='green']
+.colorful[color='green']
   set_dynamic_color($c-green)
-.tag-plugin[color='cyan']
+.colorful[color='cyan']
   set_dynamic_color($c-cyan)
-.tag-plugin[color='blue']
+.colorful[color='blue']
   set_dynamic_color($c-blue)
-.tag-plugin[color='purple']
+.colorful[color='purple']
   set_dynamic_color($c-purple)
 
-.tag-plugin[color='light']
-  --theme-bg1: hsl(0 0 88%)
-  --theme-bg2: white
+.colorful[color='light']
+  --theme-block: white
   set_text_black()
 
-.tag-plugin[color='dark']
-  --theme-bg1: hsl(0 0 12%)
-  --theme-bg2: #333
+.colorful[color='dark']
+  --theme-block: #333
   set_text_white()
 
-.tag-plugin[color='warning']
+.colorful[color='warning']
   --theme: $c-yellow
   --theme-border: #ffe659
-  --theme-bg2: #ffe659
+  --theme-block: #ffe659
   --theme-link: #ff453a
 
-.tag-plugin[color='error']
+.colorful[color='error']
   --theme: $c-yellow
   --theme-border: #ff453a
-  --theme-bg2: #ff453a
+  --theme-block: #ff453a
   --theme-link: #ffe659
   set_text_white()
 
 set_darkmode_tags()
   set_dynamic_color($theme)
     --theme: $theme
-    --theme-bg1: hsl(hue($theme), 50, 16)
-    --theme-bg2: hsl(hue($theme), 16, 16)
+    --theme-block: hsl(hue($theme), 16, 16)
     --theme-border: hsl(hue($theme), 50, 24)
     --text-p0: hsl(hue($theme), 100, 85)
     --text-p1: hsl(hue($theme), 50, 75)
     --text-p2: hsl(hue($theme), 80, 72)
   .tag-plugin.tag
     set_dynamic_color($color-theme)
-  .tag-plugin[color='red']
+  .colorful[color='red']
     set_dynamic_color($c-red)
-  .tag-plugin[color='orange']
+  .colorful[color='orange']
     set_dynamic_color($c-orange)
-  .tag-plugin[color='yellow']
+  .colorful[color='yellow']
     set_dynamic_color($c-yellow)
-  .tag-plugin[color='green']
+  .colorful[color='green']
     set_dynamic_color($c-green)
-  .tag-plugin[color='cyan']
+  .colorful[color='cyan']
     set_dynamic_color($c-cyan)
-  .tag-plugin[color='blue']
+  .colorful[color='blue']
     set_dynamic_color($c-blue)
-  .tag-plugin[color='purple']
+  .colorful[color='purple']
     set_dynamic_color($c-purple)
-  .tag-plugin[color='light']
+  .colorful[color='light']
     --theme-border: white
-    --theme-bg1: hsl(0 0 88%)
-    --theme-bg2: #fff
+    --theme-block: #fff
     set_text_black()
 
-  .tag-plugin[color='dark']
+  .colorful[color='dark']
     --theme-border: black
-    --theme-bg1: hsl(0 0 12%)
-    --theme-bg2: #111
+    --theme-block: #111
     set_text_white()
 
-  .tag-plugin[color='warning'],.tag-plugin[color='light']
+  .colorful[color='warning'],.colorful[color='light']
     set_text_black()
 
 if hexo-config('style.darkmode') == 'auto'

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

@@ -3,7 +3,7 @@ details.folding
   padding: 1rem
   margin: 1rem 0
   border-radius: $border-block
-  background: var(--theme-bg2)
+  background: var(--theme-block)
   border: 1px solid var(--theme-border)
   summary
     cursor: pointer

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

@@ -0,0 +1,17 @@
+.md-text .tag-plugin.hashtag
+  padding: 0px 8px
+  border-radius: 100px
+  background: var(--theme-block)
+  color: var(--text-p2)
+  margin: 2px 0
+  display: inline-flex
+  align-items: center
+  font-size: $fs-13
+  font-weight: 500
+  trans2 background color
+  span  
+    margin: 0 2px
+  &:hover
+    background: var(--text-p2)
+    color: var(--theme-block)
+  

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

@@ -1,10 +1,7 @@
 .md-text .tag-plugin.link
-  max-width: 100%
   margin: 1em auto
   display: flex
   justify-content: center
-  @media screen and (max-width: $device-mobile-375)
-    width: 100%
 
 .md-text .link-card
   background: var(--card)
@@ -12,11 +9,8 @@
   justify-content: space-between
   align-items: center
   cursor: pointer
-  // min-width 280px
-  // max-width: 100%
   width: 320px
-  @media screen and (max-width: $device-mobile-375)
-    width: 100%
+  max-width: 100%
   box-shadow: $boxshadow-card
   border-radius: $border-bar
   trans2: box-shadow transform

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

@@ -1,8 +1,5 @@
 .md-text .tag-plugin.mark
-  padding: 0 1px
+  padding: 1px 2px
   border-radius: 2px
-  background: var(--theme-bg2)
-  border: 1px solid var(--theme-border)
+  background: var(--theme-block)
   color: var(--text-p0)
-  &[color=dark]
-    border-color: var(--theme-bg2)

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

@@ -2,7 +2,7 @@
   position: relative
   padding: 0.25rem 1rem
   border-radius: $border-block
-  background: var(--theme-bg2)
+  background: var(--theme-block)
   overflow: hidden
   if hexo-config('tag_plugins.note.border') == true
     border: 1px solid var(--theme-border)

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

@@ -0,0 +1,106 @@
+.md-text .tag-plugin.okr
+  position: relative
+  border-radius: $border-block
+  background: var(--theme-block)
+  border: 1px solid var(--theme-border)
+  if hexo-config('tag_plugins.okr.border') == true
+    border: 1px solid var(--theme-border)
+  overflow: hidden
+  color: var(--text-p1)
+  line-height: 1.5
+  .o
+    .title
+      font-size: $fs-15
+    .note
+      font-size: $fs-14
+      p
+        font-size: $fs-14
+  .kr
+    .title
+      font-size: $fs-14
+    .note
+      font-size: $fs-14
+      p,li,.tag-plugin
+        font-size: $fs-14
+
+  .title
+    font-weight: 600
+    display: block
+  .note
+    font-weight: 400
+    display: block
+    margin-top: 0.5rem
+    >p,>ul
+      margin-top: 0.25rem
+      margin-bottom: 0.25rem
+    >.tag-plugin
+      margin-top: 0.25rem
+      margin-bottom: 0.25rem
+    >*:last-child
+      margin-bottom: 0
+  .status 
+    font-size: $fs-12
+    padding: 2px 4px
+    border-radius: 2px
+  .okr-item.o
+    border-bottom: 4px solid var(--theme-border)
+  .okr-item.kr+.okr-item.kr
+    border-top: 1px dashed var(--theme-border)
+  
+
+.tag-plugin.okr .okr-item
+  display: grid
+  grid-template-columns: 3.2rem auto 100px
+  grid-column-gap: 0.75rem
+  padding: 1rem
+  .okr-left .title
+    background: var(--card)
+    border-radius: 1rem
+    text-align: center
+    padding: 0 0.5rem
+  .labels
+    display: flex
+    justify-content: space-between
+    align-items: flex-start
+    position relative
+    .label
+      background: var(--theme-block)
+      color: var(--text-p1)
+
+  .progress
+    margin-top: 4px
+    height: 4px
+    border-radius: 2px
+    position: relative
+    background: var(--card)
+    .fill
+      position: absolute
+      background: var(--theme)
+      border-radius: 2px
+      top: 0
+      left: 0
+      bottom: 0
+      &:before
+        content: ''
+        position absolute
+        top: -4px
+        bottom: -4px
+        right: -4px
+        width: 8px
+        height: 12px
+        border-radius: 8px
+        background: white
+        box-shadow: $boxshadow-button
+      &:after
+        content: ''
+        position absolute
+        top: -2px
+        bottom: -2px
+        right: -2px
+        width: 4px
+        height: 8px
+        border-radius: 4px
+        background: var(--theme)
+        
+
+  

package/source/css/_plugins/copycode.styl

@@ -0,0 +1,27 @@
+.highlight
+  position: relative
+
+.highlight .code .copy-btn
+  position: absolute
+  top: 0
+  right: 0
+  padding: 4px 0.5rem
+  opacity: 0
+  font-weight: 700
+  color: var(--theme)
+  cursor: pointer
+
+.highlight:hover .copy-btn 
+  opacity 0.25
+
+.highlight .code .copy-btn:hover
+  color: var(--theme)
+  opacity: 0.75
+
+.highlight .code .copy-btn.success
+  color: $c-green
+  opacity: 0.75
+
+.highlight .code .copy-btn.warning
+  color: $c-orange
+  opacity: 0.75

package/source/css/_plugins/index.styl

@@ -9,6 +9,10 @@ if hexo-config('plugins.scrollreveal.enable')
   @import 'scrollreveal'
 if hexo-config('plugins.fancybox.enable')
   @import 'fancybox'
+if hexo-config('plugins.mermaid.enable')
+  @import 'mermaid'
+if hexo-config('plugins.copycode.enable')
+  @import 'copycode'
 
 
 // 评论

package/source/css/_plugins/mermaid.styl

@@ -0,0 +1,125 @@
+pre.mermaid
+  display: inline-block
+  width: 100%
+  text-align: center
+  font-family: $ff-body
+
+.mermaid svg 
+  width: 100%
+  display: inline-block
+
+
+.mermaid svg
+  width: 100%
+  display: inline-block
+
+.mermaid span,text
+  font-family: $ff-body
+
+.mermaid .edgeLabel
+  padding: 4px
+  background-color: var(--site-bg) !important
+
+.mermaid rect.basic.label-container
+  stroke: var(--block-border) !important
+  fill: var(--block) !important
+  
+set_mermaid_darkmode()
+  .mermaid 
+    fill: #ccc !important
+  
+
+  .mermaid .error-icon 
+    fill: #a44141 !important
+  
+
+  .mermaid .error-text 
+    fill: #ddd !important
+    stroke: #ddd !important
+  
+
+  .mermaid .marker 
+    fill: lightgrey !important
+    stroke: lightgrey !important
+  
+
+  .mermaid .marker.cross 
+    stroke: lightgrey !important
+  
+
+  .mermaid .label 
+    color: #ccc !important
+  
+
+  .mermaid .cluster-label text 
+    fill: #F9FFFE !important
+  
+
+  .mermaid .cluster-label span 
+    color: #F9FFFE !important
+  
+
+  .mermaid .label text,
+  .mermaid span 
+    fill: #ccc !important
+    color: #ccc !important
+  
+
+  .mermaid .node rect,
+  .mermaid .node circle,
+  .mermaid .node ellipse,
+  .mermaid .node polygon,
+  .mermaid .node path 
+    fill: #1f2020 !important
+    stroke: #81B1DB !important
+  
+
+  .mermaid .arrowheadPath 
+    fill: lightgrey !important
+  
+
+  .mermaid .edgePath .path 
+    stroke: lightgrey !important
+  
+
+  .mermaid .flowchart-link 
+    stroke: lightgrey !important
+  
+
+  .mermaid .edgeLabel 
+    background-color: hsl(0, 0%, 34.4117647059%) !important
+  
+
+  .mermaid .edgeLabel rect 
+    background-color: hsl(0, 0%, 34.4117647059%) !important
+    fill: hsl(0, 0%, 34.4117647059%) !important
+  
+
+  .mermaid .cluster rect 
+    fill: hsl(180, 1.5873015873%, 28.3529411765%) !important
+    stroke: rgba(255, 255, 255, 0.25) !important
+  
+
+  .mermaid .cluster text 
+    fill: #F9FFFE !important
+  
+
+  .mermaid .cluster span 
+    color: #F9FFFE !important
+  
+
+  .mermaid div.mermaidTooltip 
+    background: hsl(20, 1.5873015873%, 12.3529411765%) !important
+    border: 1px solid rgba(255, 255, 255, 0.25) !important
+  
+
+  .mermaid .flowchartTitleText 
+    fill: #ccc
+  
+
+if hexo-config('style.darkmode') == 'auto'
+  @media (prefers-color-scheme: dark)
+    set_mermaid_darkmode()
+
+if hexo-config('style.darkmode') == 'always'
+  set_mermaid_darkmode()

package/source/js/main.js

@@ -126,7 +126,7 @@ const init = {
               highlightItem.addClass("active")
               const e0 = document.querySelector('.widgets')
               const e1 = document.querySelector('#data-toc a.toc-link[href="' + encodeURI(link) + '"]')
-              const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 100
+              const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 200
               const offsetTop = e1.getBoundingClientRect().top - e0.getBoundingClientRect().top - 64
               if (offsetTop < 0) {
                 e0.scrollBy(0, offsetTop)
@@ -334,9 +334,10 @@ if (stellar.search.service) {
         var $resultArea = document.querySelector("div#search-result");
         $inputArea.focus(function() {
           var path = stellar.search[stellar.search.service]?.path || '/search.json';
-          if (!path.startsWith('/')) {
-            path = '/' + path;
+          if (path.startsWith('/')) {
+            path = path.substring(1);
           }
+          path = stellar.config.root + path;
           const filter = $inputArea.attr('data-filter') || '';
           searchFunc(path, filter, 'search-input', 'search-result');
         });
@@ -384,3 +385,7 @@ if (stellar.plugins.heti) {
     stellar.plugins.heti.enable = false;
   });
 }
+
+if (stellar.plugins.copycode) {
+  stellar.loadScript(stellar.plugins.copycode.js, { defer: true })
+}

package/source/js/plugins/copycode.js

@@ -0,0 +1,49 @@
+const codeElementArr = document.querySelectorAll('.code')
+codeElementArr.forEach(code => {
+  const codeBeforeWidth = window.getComputedStyle(code, '::before').width.split('px')[0]
+  const codeBeforePadding = window.getComputedStyle(code, '::before').padding.split(' ').pop().split('px')[0]
+
+  // copy btn 
+  const codeCopyBtn = document.createElement('div')
+  codeCopyBtn.classList.add('copy-btn')
+  codeCopyBtn.style.right = Number(codeBeforeWidth) + Number(codeBeforePadding) * 2 + 'px'
+  codeCopyBtn.innerText = stellar.plugins.copycode.default_text
+
+  code.appendChild(codeCopyBtn)
+
+  codeCopyBtn.addEventListener('click', async () => {
+    const currentCodeElement = code.children[0]?.innerText
+    await copyCode(currentCodeElement)
+
+    codeCopyBtn.innerText = stellar.plugins.copycode.success_text
+    codeCopyBtn.classList.add('success')
+
+    setTimeout(() => {
+      codeCopyBtn.innerText = stellar.plugins.copycode.default_text
+      codeCopyBtn.classList.remove('success')
+    },3000)
+  })
+})
+
+async function copyCode(currentCode) {
+  if (navigator.clipboard) {
+    try {
+      await navigator.clipboard.writeText(currentCode)
+    } catch (error) {
+      // 未获得用户许可
+      codeCopyBtn.innerText = '未获得用户许可'
+      codeCopyBtn.classList.add('warning')
+      setTimeout(() => {
+        codeCopyBtn.innerText = stellar.plugins.copycode.default_text
+        codeCopyBtn.classList.remove('warning')
+      },3000)
+    }
+  } else {
+    codeCopyBtn.innerText = '当前浏览器不支持此api'
+    codeCopyBtn.classList.add('warning')
+    setTimeout(() => {
+      codeCopyBtn.innerText = stellar.plugins.copycode.default_text
+      codeCopyBtn.classList.remove('warning')
+    },3000)
+  }
+}

package/source/js/plugins/linkcard.js

@@ -42,7 +42,7 @@ function setCardLink(nodes) {
     }).then(function(data) {
       renderer(el, data);
     }).catch(function(error) {
-      console.log(error);
+      console.error(error);
     });
   })
 }

package/source/js/plugins/sites.js

@@ -51,7 +51,7 @@ const sitesjs = {
       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://screenshot-api.xaoxuu.com/api?url=' + item.url + '&width=1280&height=720')) + '" onerror="javascript:this.src=\'' + cfg.screenshot + '\';"/>';
+        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>';

package/scripts/tags/lib/tag.js

@@ -1,35 +0,0 @@
-/**
- * tag.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
- * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
- *
- * {% tag text href [color:color] %}
- *
- */
-
-'use strict'
-
-const tag_colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple']
-var tag_index = 0
-
-module.exports = ctx => function(args) {
-  args = ctx.args.map(args, ['color'], ['text', 'href'])
-  if (args.color == null) {
-    const default_color = ctx.theme.config.tag_plugins.tag?.default_color
-    if (default_color) {
-      args.color = default_color
-    } else {
-      args.color = tag_colors[tag_index]
-      tag_index += 1
-      if (tag_index >= tag_colors.length) {
-        tag_index = 0
-      }
-    }
-  }
-  var el = ''
-  el += '<a class="tag-plugin tag"'
-  el += ' ' + ctx.args.joinTags(args, ['color', 'href']).join(' ')
-  el += '>'
-  el += args.text
-  el += '</a>'
-  return el
-}

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

@@ -1,13 +0,0 @@
-.md-text .tag-plugin.tag
-  padding: 0px 4px
-  border-radius: 2px
-  background: var(--theme-bg1)
-  color: var(--text-p2)
-  margin: 2px 0
-  display: inline-block
-  font-size: $fs-14
-  trans2 background color
-  &:hover
-    background: var(--text-p2)
-    color: var(--theme-bg1)
-