hexo-theme-stellar 1.19.0 → 1.20.0

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/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

@@ -171,6 +171,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/md.styl

@@ -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/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
@@ -29,9 +34,8 @@
       background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/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/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/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)
+        
+
+