hexo-theme-stellar 1.19.0 → 1.21.0

package/scripts/tags/lib/navbar.js

@@ -1,11 +1,11 @@
 /**
- * navbar.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * navbar.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% navbar [markdown link] ... %}
+ * {% navbar [active:url] [markdown-link] ... %}
  *
  * example:
- * {% navbar active:1 [Home](/) [About](/about/) [Comments](#comments) %}
+ * {% navbar active:/about/ [Home](/) [About](/about/) [Comments](#comments) %}
  */
 
 'use strict'
@@ -18,40 +18,21 @@ module.exports = ctx => function(args) {
   if (args.links) {
     args.links = args.links.split(' ')
   }
-  var el = '<div class="tag-plugin navbar"><nav class="cap">'
-  function layoutItem(a, i) {
-    var text = ''
-    var href = ''
-    var el = '<a'
-    if ((i+1).toString() === args.active) {
-      el += ' class="active"'
-    }
-    if (a.includes('](')) {
-      // markdown
-      let tmp = a.split('](')
-      if (tmp.length > 1) {
-        text = tmp[0]
-        if (text.length > 1) {
-          text = text.substring(1, text.length)
-        }
-        href = tmp[1]
-        if (href.length > 1) {
-          href = href.substring(0, href.length-1)
-        }
-        el += ' href="' + href + '"'
+  var el = `<div class="tag-plugin navbar"><nav class="cap">`
+  for (let link of args.links) {
+    const matches = link.match(/\[(.*?)\]\((.*?)\)/i)
+    if (matches?.length > 2) {
+      let text = matches[1]
+      let href = matches[2]
+      if (href == args.active) {
+        el += `<a class="link blur active" href="${href}">${text}</a>`
+      } else {
+        el += `<a class="link" href="${href}">${text}</a>`
       }
     } else {
-      el += ' href="#' + a + '"'
-      text = a
+      el += `<a class="link" href="#${link}">${link}</a>`
     }
-    el += '>'
-    el += text
-    el += '</a>'
-    return el
   }
-  (args.links || []).forEach((item, i) => {
-    el += layoutItem(item, i)
-  })
-  el += '</nav></div>'
+  el += `</nav></div>`
   return el
 }

package/scripts/tags/lib/note.js

@@ -19,7 +19,7 @@ module.exports = ctx => function(args) {
   }
   var el = ''
   // header
-  el += '<div class="tag-plugin note"'
+  el += '<div class="tag-plugin colorful note"'
   el += ' ' + ctx.args.joinTags(args, ['color', 'child']).join(' ')
   el += '>'
   // title

package/scripts/tags/lib/okr.js

@@ -0,0 +1,140 @@
+/**
+ * okr.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 
+ * {% okr o1 percent:0.5 status:delay %}
+ * title (only one line)
+ * note
+ * <!-- okr kr1 percent:1 -->
+ * title (only one line)
+ * note
+ * {% endokr %}
+ * 
+ */
+
+'use strict'
+
+function splitContentAndNote(input) {
+  var arr = input.trim().split('\n').filter(item => item.trim().length > 0)
+  if (arr.length == 0) {
+    return {title:'', note:''}
+  }
+  const title = arr.shift()
+  const note = arr.join('\n')
+  return {title:title, note:note}
+}
+
+function generateKRList(ctx, contentArray) {
+  if (contentArray.length < 3) {
+    console.error('invalid okr tag:', contentArray);
+    return []
+  }
+  var result = []
+  var krTagIndexes = []
+  for (let index = 0; index < contentArray.length; index++) {
+    const element = contentArray[index];
+    if (element.startsWith('kr')) {
+      krTagIndexes.push(index)
+    }
+  }
+  for (let index of krTagIndexes) {
+    if (index >= contentArray.length) {
+      break
+    }
+    const tagStr = contentArray[index]
+    const contentStr = contentArray[index+1]
+    if (contentStr.startsWith('kr')) {
+      continue
+    }
+    result.push({
+      krMeta: ctx.args.map(tagStr.split(/\s+/), ['percent', 'status'], 'krIndex'),
+      krBody: splitContentAndNote(contentStr)
+    })
+  }
+  return result
+}
+
+function layoutItem(ctx, type, index, title, note, color, label, percent) {
+  const percentStr = (percent * 100).toString().replace(/\.\d*/, '')
+  return `
+  <div class="okr-item ${type}">
+    <div class="okr-left">
+      <span class="title">${index.toUpperCase()}</span>
+    </div>
+    <div class="okr-center">
+      <span class="title">${title}</span>
+      <div class="note">${ctx.render.renderSync({text: note, engine: 'markdown'}).split('\n').join('')}</div>
+    </div>
+    <div class="okr-right colorful" color="${color}">
+      <div class="labels">
+        <span class="status label">${label}</span>
+        <span class="status percent">${percentStr}%</span>
+      </div>
+      <div class="progress">
+        <div class="fill" style="width:${percentStr}%;"></div>
+      </div>
+    </div>
+  </div>
+  `
+}
+
+module.exports = ctx => function(args, content = '') {
+  args = ctx.args.map(args, ['percent', 'status', 'color'], 'oIndex')
+  var contentArray = content.split(/<!--\s*okr (.*?)\s*-->/g).filter(item => item.trim().length > 0)
+  if (contentArray.length < 3) {
+    console.error('invalid okr tag:', contentArray);
+    return ''
+  }
+  const statusList = ctx.theme.config.tag_plugins.okr.status
+  const oMeta = args
+  const oBody = splitContentAndNote(contentArray.shift())
+  const krList = generateKRList(ctx, contentArray)
+  
+  var el_krs = ''
+  var krPercentList = []
+  for (let kr of krList) {
+    const { krMeta, krBody } = kr
+    const krPercent = Number(krMeta.percent) || 0
+    if (krMeta == null || krBody == null) {
+      continue
+    }
+    var status = null
+    if (krMeta.status && statusList[krMeta.status]) {
+      status = statusList[krMeta.status] 
+    }
+    if (status == null) {
+      if (krPercent >= 1) {
+        status = statusList['finished']
+      } else {
+        status = statusList['in_track']
+      }
+    }
+    krPercentList.push(krPercent)
+    el_krs += layoutItem(ctx, 'kr', krMeta.krIndex, krBody.title, krBody.note, status.color, status.label, krPercent)
+  }
+  const krPercentSum = krPercentList.reduce(
+    (accumulator, currentValue) => accumulator + currentValue,
+    0,
+  );
+  
+  const oPercent = Number(oMeta.percent) || (krPercentSum / krPercentList.length).toFixed(2)
+  var status = null
+  if (args.status != null && args.status && statusList[args.status]) {
+    status = statusList[args.status] 
+  }
+  if (status == null) {
+    if (oPercent >= 1) {
+      status = statusList['finished']
+    } else {
+      status = statusList['in_track']
+    }
+  } 
+  
+  var el = ''
+  el += '<div class="tag-plugin colorful okr"'
+  el += ' ' + ctx.args.joinTags(args, ['color']).join(' ')
+  el += '>'
+  el += layoutItem(ctx, 'o', oMeta.oIndex, oBody.title, oBody.note, status.color, status.label, oPercent)
+  el += el_krs
+  el += '</div>'
+  return el
+}

package/scripts/tags/lib/swiper.js

@@ -22,7 +22,7 @@ module.exports = ctx => function(args, content) {
       })
     }
   }
-  el += '<div class="tag-plugin gallery swiper" id="swiper-api"'
+  el += '<div class="tag-plugin swiper" id="swiper-api"'
   el += ' ' + ctx.args.joinTags(args, ['width', 'effect']).join(' ')
   el += '>'
   el += '<div class="swiper-wrapper">'

package/scripts/tags/lib/timeline.js

@@ -1,5 +1,5 @@
 /**
- * timeline.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * timeline.js v2.1 | https://github.com/xaoxuu/hexo-theme-stellar/
  *
  * {% timeline %}
  *
@@ -35,14 +35,14 @@ function layoutNodeContent(ctx, content) {
 }
 
 module.exports = ctx => function(args, content = '') {
-  args = ctx.args.map(args, ['api', 'user', 'type', 'limit', 'hide'])
+  args = ctx.args.map(args, ['api', 'user', 'type', 'limit', 'hide', 'avatar'])
   var el = ''
   if (!args.type) {
     args.type = 'timeline'
   }
   if (args.api && args.api.length > 0) {
     el += '<div class="tag-plugin timeline stellar-' + args.type + '-api"'
-    el += ' ' + ctx.args.joinTags(args, ['api', 'user', 'limit', 'hide']).join(' ')
+    el += ' ' + ctx.args.joinTags(args, ['api', 'user', 'limit', 'hide', 'avatar']).join(' ')
     el += '>'
   } else {
     el += '<div class="tag-plugin timeline">'

package/scripts/tags/lib/toc.js

@@ -43,7 +43,7 @@ module.exports = ctx => function(args) {
   el += '</summary>'
 
   if (args.wiki) {
-    const proj = ctx.theme.config.wiki.projects[args.wiki]
+    const proj = ctx.theme.config.wiki.tree[args.wiki]
     if (proj == undefined) {
       return ''
     }

package/source/css/_common/highlight.styl

@@ -78,6 +78,7 @@ p>code:not([class]),li>code:not([class])
   .gist-file 
     border: 1px solid var(--block-border)
     border-radius: $border-block
+    overflow: hidden
   .gist-data
     border-bottom: 1px solid var(--block-border)
   .highlight
@@ -171,6 +172,8 @@ table:not([class])
     content: "Go"
   &.typescript .code:before,&.ts .code:before
     content: "TS"
+  &.matlab .code:before
+    content: "MATLAB"
 
 
 

package/source/css/_custom.styl

@@ -44,8 +44,8 @@ $fs-14 = .875rem
 $fs-13 = .8125rem
 $fs-12 = .75rem
 
-$fs-h1   = 1.75rem   // 32px
-$fs-h2   = 1.5rem    // 24px
+$fs-h1   = 2rem   // 32px
+$fs-h2   = 1.75rem    // 28px
 $fs-h3   = 1.375rem  // 22px
 $fs-h4   = 1.125rem  // 18px
 $fs-h5   = $fs-15

package/source/css/_defines/theme.styl

@@ -39,7 +39,6 @@ set_text_light()
   --block-border: hsl($color-block-h, $color-block-s, 90)
   --block-hover: hsl($color-block-h, $color-block-s, 92)
   set_text_dark()
-  --theme-bg2: $color-theme
   --theme-link: $color-link
 
 set_darkmode()

package/source/css/_layout/list.styl

@@ -145,12 +145,11 @@
 
 .post-list .post-card.wiki article .preview
   display: flex
-  width: 200px
-  margin: 1rem .5rem
-  @media screen and (min-width: 950px)
-    margin: 1rem
+  margin: 1rem 3rem
   align-items: center
   img
+    width: 96px
+    max-height: 96px
     object-fit: contain
     &:not(.lazy)
       trans1: transform 0.75s
@@ -162,5 +161,14 @@
   flex: 1
   overflow: hidden
   word-wrap: break-word
+  .caps
+    line-height: 1
+    margin-bottom: 0.75rem
+  .cap
+    background: var(--theme-block)
+    padding: 2px 4px
+    border-radius: 2px
   p:last-child
     margin-bottom: 0
+  .cap+.cap
+    margin-left: 4px

package/source/css/_layout/md.styl

@@ -35,7 +35,7 @@ h1.article-title
   >:first-child:not(h1)
     margin-top: 0
   h1:not(:first-child)
-    margin-top: 2em
+    margin-top: 1em
   h2
     margin-bottom: 1rem
   h3,h4,h5,h6
@@ -47,6 +47,11 @@ h1.article-title
     &:hover
       a.headerlink:before
         opacity: 1
+  blockquote, .tag-plugin
+    h2,h3,h4,h5,h6
+      margin-top: 0.25em
+      margin-bottom: 0.25em
+      padding-top: 0
 
 .md-text.content:first-child
   padding-top: 0
@@ -82,7 +87,7 @@ h1.article-title
     opacity: 0
     content: '#'
     position: absolute
-    margin-left: -0.75em
+    margin-left: -0.6em
   h2
     margin-top: 2rem
     border-bottom: 1px solid var(--block-border)
@@ -139,7 +144,10 @@ h1.article-title
         left: 0
         right: 0
         height: 1px
-        opacity: 0.8
+        if hexo-config('style.link.underline') == true
+          opacity: 0.8
+        else
+          opacity: 0
         background: var(--theme-link)
         trans1: all
       &:hover
@@ -153,8 +161,3 @@ h1.article-title
           bottom: 0
           left: -2px
           right: -2px
-.md-text li:not([class]) a:not([class]):before, .md-text p:not([class]) a:not([class]):before
-    background unset !important
-
-.md-text li:not([class]) a:not([class]):hover:before, .md-text p:not([class]) a:not([class]):hover:before
-    background var(--theme-link) !important

package/source/css/_layout/partial/bread-nav.styl

@@ -3,6 +3,8 @@
   padding: 0.25rem 1rem 0
   color: var(--text-p3)
   font-weight: 500
+  display: flex
+  justify-content: space-between
   div#breadcrumb
     display: flex
     align-items: center
@@ -17,3 +19,33 @@
       color: $color-hover
   div#post-meta
     margin-top: 2px
+    span+span
+      margin-left: 8px
+      visibility: hidden
+  &:hover
+    div#post-meta
+      span+span
+        visibility: visible
+
+.bread-nav .ghrepo
+  font-size: $fs-13
+  display: flex
+  flex-direction: column
+  align-items: flex-start
+  border-left: 1px solid var(--text-meta)
+  padding-left: 8px
+  a  
+    display: flex
+    align-items: center
+    color: var(--text-p2)
+    svg
+      margin-right: 4px
+    &.bold 
+      font-weight: 600
+      color: var(--text-p1)
+    span 
+      margin-left: 4px
+    &:hover
+      color: var(--theme-link)
+  a+a   
+    margin-top: 8px

package/source/css/_layout/partial/cover.styl

@@ -63,6 +63,8 @@
     margin-bottom: 2rem
     img
       object-fit: contain
+      min-width: 96px
+      min-height: 96px
       max-height: 35vh
       max-width: 100%
       @media screen and (max-width: $device-mobile)

package/source/css/_layout/partial/paginator.styl

@@ -9,11 +9,16 @@
   border-radius: $border-card
   overflow: hidden
   box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.03)
+  color: var(--text-p3)
   .page-number
     padding: 4px 8px
     border-radius: 8px
-    background: var(--block)
     margin: 2px
+  a.page-number
+    color: var(--text-p3)
+    &:hover
+      color: var(--text-p1)
+      background: var(--block)
   .extend
     text-align: center
     background-size: contain
@@ -23,15 +28,14 @@
     background-clip: content-box
     &.next
       border-left: 1px dashed var(--block-border)
-      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/arrow/064b95430caf4.svg')
+      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/arrow/064b95430caf4.svg')
     &.prev
       border-right: 1px dashed var(--block-border)
-      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/arrow/f049bbd4e88ec.svg')
+      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/arrow/f049bbd4e88ec.svg')
   .current
     font-family: $ff-code
-    color: var(--text-p3)
+    background: var(--block)
   .extend
-    color: var(--text-p3)
     padding: 1rem
     line-height: 0
     filter: grayscale(100%)

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

@@ -0,0 +1,106 @@
+.tag-plugin.banner
+  border-radius: $border-card
+  position: relative
+  overflow: hidden
+  display: flex 
+  flex-direction: column
+  justify-content: flex-end
+  align-items: flex-start
+  color: white
+  height: 240px
+  @media screen and (max-width: $device-mobile-max)
+    height: 200px
+  .bg
+    z-index: 0
+  .content 
+    z-index: 1
+    width: 100%
+    height: 100%
+    display: flex
+    flex-direction: column
+    justify-content: space-between
+    .top
+      display: flex
+      justify-content: space-between
+      align-items: center
+      line-height: 1
+      margin: 1rem
+      .navbar
+        margin: 0
+        nav.cap
+          border-radius: 6px
+          background: rgba(black, 0.2)
+        .link
+          color: rgba(white, 0.8)
+          padding: 2px 6px
+          border-radius: 4px
+          background: none
+          line-height: 1.5
+          font-size: $fs-15
+          &:hover
+            color: white
+            background: rgba(black, 0.5)
+          &.active
+            color: white
+            background: rgba(white, 0.25)
+      .back
+        background: none
+        padding: 0
+        line-height: 0
+        visibility: hidden
+        @media screen and (max-width: $device-mobile-max)
+          visibility: visible
+        svg
+          width: 20px
+          height: 20px
+          fill: white
+  .banner-link
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    opacity: 0
+    z-index: 2
+  img
+    object-fit: cover
+    disable-select()
+    margin: 0
+    height: 100%
+    width: 100%
+  img.bg
+    position absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+  img.avatar
+    border-radius: 50%
+    width: 48px
+    height: 48px
+    border: 2px solid white
+  .bottom
+    display: flex
+    padding: 1rem
+    width: 100%
+    box-sizing: border-box
+    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
+    text-shadow: 0 0 1px rgba(0,0,0,0.12)
+    .title
+      font-size: 1.5rem
+      font-weight: 600
+    .avatar+.text-area
+      margin-left: 0.75rem
+    .text-area .text
+      line-height: 1.2
+      margin-top: 0.25rem
+      margin-bottom: 0.25rem
+    .avatar+.text-area .title
+      font-size: 1.2rem
+    .subtitle
+      font-size: $fs-14
+
+.tag-plugin.banner:hover
+  img.bg
+    transform: scale(1.01)
+    trans1(transform, 2s)