hexo-theme-shokax 0.2.6 → 0.2.8

package/CONTRIBUTING.md

@@ -14,14 +14,10 @@
 1. 您同意我们在未来进行授权许可更改时包含您所贡献的代码
 2. 您有对于 shokaX 所使用的相关技术和 github PR 及 actions 的基础了解
 
-对于代码修改的说明:
-1. `page js` 仅需要修改ts文件，`hexo script` 请修改js文件
-
 有关提交的说明:
 1. 您在提交时的`commit message`应描述其改动
 2. 如果您提交的代码中包括图片资源，建议使用`webp`或`avif`格式
-3. 由于 Copilot 所生成的代码可能存在版权问题，如果您使用了 Copilot，请在 PR 正文中说明
-4. 条件允许的情况下代码应当附有注释以便维护
+3. 条件允许的情况下代码应当附有注释以便维护
 
 有关审查（Review）的说明:
 1. 您在 PR 时应打开允许维护者修改 PR，以便我们进行修改

package/LICENSE-shoka

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 霜月琉璃
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/_config.yml

@@ -74,6 +74,13 @@ loader:
   start: true # 进入页面时显示加载动画
   switch: false # 切换页面时显示加载动画
 
+# 使用polyfill.io自动处理浏览器兼容问题
+polyfill:
+  enable: true
+  features:
+    - default
+    - fetch
+
 # 显示的动画(烟花)
 fireworks:
   enable: true
@@ -173,7 +180,7 @@ waline:
     - mail
   wordLimit: 0 # 字数限制,0为不限制
   pageSize: 10 # 每页评论条数
-  pageview: true # 是否开启浏览量统计
+  pageview: false # 是否开启浏览量统计,可独立开启
 
 # https://github.com/gitalk/gitalk/blob/master/readme-cn.md
 gitalk:

package/layout/_mixin/comment.pug

@@ -13,7 +13,7 @@ mixin CommentRender()
                     })
                 }, 1000)
         else if wl
-            div(class="warp" id="wcomments")
+            div(class="wrap" id="wcomments")
             - var locale = JSON.stringify(theme.waline.locale)
             - var emoji = JSON.stringify(theme.waline.emoji)
             - var meta = JSON.stringify(theme.waline.meta)
@@ -38,7 +38,7 @@ mixin CommentRender()
                     });
                 }, 1000)
         else if gt
-            div(class="warp" id="gtcomments")
+            div(class="wrap" id="gtcomments")
             script(type="text/javascript" data-pjax).
                 const gproxy = theme.gitalk.proxy || undefined
                 const gitalk = new Gitalk({
@@ -53,7 +53,7 @@ mixin CommentRender()
                 });
                 gitalk.render("gtcomments")
         else if gs
-            div(class="warp giscus" id="gscomments")
+            div(class="wrap giscus" id="gscomments")
             script( src="https://giscus.app/client.js"
                     data-repo="#{theme.giscus.repo}"
                     data-repo-id="#{theme.giscus.repoId}"

package/layout/_mixin/widgets.pug

@@ -10,6 +10,7 @@ mixin field(item)
 
 mixin WRender(item)
     - var tk = theme?.twikoo?.enable
+    - var waline = theme.waline.enable
     if theme.widgets.random_posts
         div(class="rpost pjax")
             h2
@@ -22,10 +23,10 @@ mixin WRender(item)
         div(class="rpost pjax")
             h2 最新评论
             ul(class="leancloud-recent-comment" id="new-comment")
-                if tk
+                if tk || waline
                     li(v-for="com in coms" class="item")
                         a(v-bind:href="com.href" data-pjax-state="data-pjax-state")
-                            span(class="breadcrumb") {{com.nick}}@{{com.time}}
+                            span(class="breadcrumb") {{com.nick}} @ {{com.time}}
                             span {{com.text}}
                                 br
 

package/layout/_partials/layout.pug

@@ -108,7 +108,9 @@ html(lang=page.language?page.language:config.language, style=theme.grayMode ? 'f
             ]
             };
 
-        script(src="https://polyfill.alicdn.com/polyfill.min.js")
+        if theme.polyfill.enable
+            script(src=`https://polyfill.io/v3/polyfill.min.js?features=${theme.polyfill.features}`)
+
         if theme.advVendors.enable
             each i in _list_vendor_js()
                 != _adv_vendor_js(i)

package/layout/_partials/post/footer.pug

@@ -1,9 +1,10 @@
 div(class="meta")
     if date(post.date) != date(post.updated) || time(post.date) != time(post.updated)
-        span(class="icon")
-            i(class="ic i-eye")
-        span 此文章已被阅读次数:
-        span(id="twikoo_visitors" class="waline-pageview-count" data-path=post.path) 正在加载...
+        if theme.twikoo.enable || theme.waline.pageview
+            span(class="icon")
+                i(class="ic i-eye")
+            span 此文章已被阅读次数:
+            span(id="twikoo_visitors" class="waline-pageview-count" data-path=post.path) 正在加载...
         span(class="item")
             span(class="icon")
                 i(class="ic i-calendar-check")

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hexo-theme-shokax",
-    "version": "0.2.6",
+    "version": "0.2.8",
     "description": "a hexo theme based on shoka",
     "main": "index.js",
     "repository": "https://github.com/theme-shoka-x/hexo-theme-shokaX",
@@ -8,12 +8,10 @@
     "license": "GPL-3.0-or-later",
     "scripts": {
         "test": "tsc",
-        "build": "pnpm install && tsc",
-        "docs:dev": "vuepress dev docs",
-        "docs:build": "vuepress build docs"
+        "build": "pnpm install && tsc"
     },
     "devDependencies": {
-        "@algolia/client-search": "^4",
+
         "@types/fancybox": "^3.5.3",
         "@types/hexo": "^3.8.8",
         "@types/jquery": "^3.5.16",
@@ -22,9 +20,7 @@
         "@types/node": "^20.1.0",
         "@typescript-eslint/eslint-plugin": "^5.59.0",
         "@typescript-eslint/parser": "^5.59.0",
-        "@vuepress/client": "2.0.0-beta.61",
-        "@vuepress/plugin-docsearch": "2.0.0-beta.61",
-        "algoliasearch": "^4.17.0",
+
         "eslint": "^8.39.0",
         "eslint-config-standard": "^17.0.0",
         "eslint-plugin-import": "^2.27.5",
@@ -37,12 +33,9 @@
         "theme-shokax-anime": "^0.0.4",
         "theme-shokax-pjax": "^0.0.2",
         "typescript": "^5.0.4",
-        "vue": "^3.2.47",
-        "vuepress": "2.0.0-beta.61",
-        "vuepress-plugin-sitemap2": "2.0.0-beta.208"
+        "vue": "^3.3.4"
     },
     "dependencies": {
-        "js-yaml": "^4.1.0",
-        "sass": "^1.62.0"
+        "js-yaml": "^4.1.0"
     }
 }

package/scripts/generaters/script.js

@@ -34,7 +34,6 @@ hexo.extend.generator.register('script', function (locals) {
         },
         loader: theme.loader,
         search: null,
-        valine: theme.valine,
         outime: {
             enable: theme.outime.enable,
             days: theme.outime.days

package/scripts/helpers/asset.js

@@ -41,12 +41,33 @@ hexo.extend.helper.register('_new_comments', function (mode) {
     else if (mode === 'waline') {
         return `
     <script type="module" data-pjax>
+        let items = []
         import { RecentComments } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs'
         RecentComments({
-          el: '#new-comment',
           serverURL: '${hexo.theme.config.waline.serverURL.replace(/\/+$/, '')}',
           count: 10,
-        });
+        }).then(({ comments }) => {
+          comments.forEach(function (item) {
+              let cText = (item.orig.length > 50) ? item.orig.substring(0,50)+'...' : item.orig
+              item.url = item.url !== '/' ?  '/' + item.url : item.url;
+              const siteLink = item.url + "#" + item.objectId
+              items.push({
+                  href: siteLink,
+                  nick: item.nick,
+                  time: item.insertedAt.split('T').shift(),
+                  text: cText
+              })
+          })
+          Vue.createApp({
+            data() {
+                return {
+                    coms: items
+                }
+            }
+          }).mount('#new-comment')
+        }).catch(function (err) {
+          console.error(err)
+        })
     </script>
     `;
     }

package/source/js/_app/components.js

@@ -156,8 +156,6 @@ const sidebarTOC = function () {
         return sections.indexOf(entry.target);
     };
     const createIntersectionObserver = function () {
-        if (!window.IntersectionObserver)
-            return;
         const observer = new IntersectionObserver(function (entries, observe) {
             const index = findIndex(entries) + (diffY < 0 ? 1 : 0);
             if (activeLock === null) {

package/source/js/_app/page.js

@@ -325,8 +325,6 @@ const postBeauty = function () {
     });
     const angleDown = document.querySelectorAll('.show-btn .i-angle-down');
     if (angleDown.length) {
-        if (!window.IntersectionObserver)
-            return;
         const io = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
@@ -408,20 +406,15 @@ const loadComments = function () {
     else {
         goToComment.display('');
     }
-    if (!window.IntersectionObserver) {
+    const io = new IntersectionObserver(function (entries, observer) {
+        const entry = entries[0];
         vendorCss('valine');
-    }
-    else {
-        const io = new IntersectionObserver(function (entries, observer) {
-            const entry = entries[0];
-            vendorCss('valine');
-            if (entry.isIntersecting || entry.intersectionRatio > 0) {
-                transition($dom('#comments'), 'bounceUpIn');
-                observer.disconnect();
-            }
-        });
-        io.observe(element);
-    }
+        if (entry.isIntersecting || entry.intersectionRatio > 0) {
+            transition($dom('#comments'), 'bounceUpIn');
+            observer.disconnect();
+        }
+    });
+    io.observe(element);
 };
 const algoliaSearch = function (pjax) {
     if (CONFIG.search === null) {
@@ -563,8 +556,6 @@ const domInit = function () {
         });
     }
     const createIntersectionObserver = function () {
-        if (!window.IntersectionObserver)
-            return;
         new IntersectionObserver(([entry]) => {
             if (entry.isIntersecting) {
                 document.querySelectorAll('.parallax>use').forEach(i => {

package/source/css/_common/components/third-party/valine.styl

@@ -1,548 +0,0 @@
-.v {
-  &.wrap {
-    animation: none;
-    opacity: 0;
-  }
-
-  .lozaded {
-    animation: none;
-  }
-
-  input,
-  textarea {
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: $font-size-smallest;
-    transition: all .25s ease;
-  }
-
-  a {
-    color: var(--color-aqua);
-
-    &:hover {
-      color: var(--primary-color);
-    }
-  }
-
-  .text-center {
-    text-align: center;
-  }
-
-  .text-right {
-    text-align: right;
-  }
-
-  .float-right {
-    float: right !important;
-  }
-
-  .pd5 {
-    padding: 5px;
-  }
-
-  .pd10 {
-    padding: 10px;
-  }
-
-  .vemoji, .emoji, .tk-owo-emotion {
-    max-height: 1.5rem;
-    display: inline;
-    vertical-align: middle;
-  }
-
-  .submitting {
-    margin: 1em 0;
-  }
-
-  .form {
-    shadow-box();
-    margin-bottom: .625rem;
-    position: relative;
-    padding: .625rem;
-
-    >.inner {
-      .auth-section {
-        display: flex;
-        padding: .3em .6em;
-      }
-
-      +mobile-small() {
-        flex-wrap: wrap;
-      }
-
-      .input {
-        flex: 1 1 27%;
-        width: 27%;
-
-        +mobile-small() {
-          flex: 1 1 100%;
-          padding-right: 0;
-          width: 100%;
-        }
-
-        input {
-          padding: .625rem .3125rem;
-          width: 100%;
-          border-bottom: .0625rem dashed var(--grey-4);
-
-          &:focus {
-            border-bottom-color: var(--primary-color);
-          }
-        }
-      }
-
-      .textarea {
-        padding: .3em .6em;
-      }
-
-      .veditor {
-        width: 100%;
-        min-height: 8.75em;
-        font-size: $font-size-small;
-        line-height: 1.75;
-        resize: vertical;
-      }
-
-      .btn-group {
-        padding: .625rem 0;
-        display: flex;
-
-        .i-markdown {
-          font-size: $font-size-smallest;
-        }
-
-        .left {
-          width: 30%;
-        }
-
-        .right {
-          width: 70%;
-          text-align: right;
-        }
-      }
-
-      .vextra-area {
-        margin: .4em 0 .4em .5em;
-      }
-
-
-      .preview-box {
-        padding: .4375rem 1.25rem;
-        font-size: $font-size-smaller;
-        shadow-box();
-      }
-
-      .trigger-section {
-        display: none;
-      }
-    }
-
-    .smile-body {
-
-      img {
-        display: inline-block;
-        width: auto;
-        height: 3rem;
-        cursor: pointer;
-        padding: .5rem;
-        border-radius: .25rem;
-        transition: box-shadow .2s ease-out, background .2s ease-out;
-      }
-
-      li.active img, img:hover {
-        background: var(--grey-2);
-        box-shadow: 1px 1px 2px var(--grey-1), -1px -1px 2px var(--grey-4), inset 8px 8px 16px var(--grey-1), inset -8px -8px 16px var(--grey-3);
-      }
-
-      .smile-icons {
-        border-radius: .5rem;
-        margin: .3rem 0;
-        min-height: 10rem;
-        max-height: 10rem;
-        overflow: auto;
-        background: var(--grey-2);
-        padding: .5rem;
-      }
-
-      .smile-bar {
-        li {
-          display: inline-block;
-          margin-right: .25rem;
-        }
-
-        img {
-          width: 2.8rem;
-          height: 2.8rem;
-          background: var(--grey-2);
-          object-fit: contain;
-        }
-      }
-    }
-
-    .btn {
-      cursor: pointer;
-      display: inline-block;
-      margin: .5rem;
-      overflow: hidden;
-      vertical-align: middle;
-
-      &.actived .ic {
-        color: var(--primary-color);
-      }
-
-      .ic {
-        color: var(--grey-6);
-        transition: all .25s ease;
-
-        &:hover {
-          color: var(--color-blue);
-        }
-      }
-    }
-
-    .cancel-reply {
-      position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 1;
-    }
-
-    .vsubmit {
-      font-size: $font-size-small;
-    }
-  }
-
-  .msg {
-    position: absolute;
-    background: var(--grey-1-a5);
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-
-    .alert {
-      padding: 3em 0 0 0;
-
-      .text {
-        color: var(--grey-8);
-        padding: 15px;
-      }
-    }
-
-    +mobile() {
-      .alert {
-        padding: 8em 0;
-
-        .text {
-          padding: 10px;
-        }
-      }
-    }
-  }
-
-  .info {
-    padding: .3125rem;
-    font-weight: 600;
-    font-size: $font-size-larger;
-
-    .col {
-      display: inline-block;
-      padding: 0 20px;
-      position: relative;
-      background: transparent;
-      z-index: 2;
-
-      .count {
-        font-size: 1.375rem;
-        font-weight: inherit;
-      }
-    }
-  }
-
-
-
-  .next {
-    .more {
-      cursor: pointer;
-      margin: 1em 0;
-    }
-  }
-
-  .list {
-    width: 100%;
-  }
-  .item {
-    word-break: break-all;
-    padding-top: 1.25em;
-
-    .avatar {
-      width: 3.125em;
-      height: 3.125em;
-      float: left;
-      border-radius: 50%;
-      margin-right: .7525em;
-      border: .0625rem solid var(--grey-3);
-      padding: .125em
-    }
-
-    &:hover .avatar {
-      animation: .8s ease-out 0s 1 normal both running shake;
-    }
-
-    .main {
-      overflow: hidden;
-      padding-bottom: .5em;
-      border-bottom: .0625rem dashed var(--grey-3);
-    }
-
-    .head, .meta {
-      color: var(--grey-5);
-      line-height: 1.8;
-    }
-
-    .name {
-      margin-right: .875rem;
-    }
-
-    .tag, .system, .time {
-      display: inline-block;
-      font-size: $font-size-smallest;
-    }
-
-    +mobile-small() {
-      .system span {
-        display: none;
-      }
-    }
-    .tag {
-      border-radius: .125rem;
-      color: var(--grey-1);
-      padding: 0 .3125rem;
-      margin-right: .5rem;
-      background-color: var(--color-grey);
-
-      $tagcolor = hexo-config('valine.tagColor');
-
-      for type in $tagcolor {
-        &.{slice(type, 0, 1)} {
-          background-color: unquote(slice(type, 1));
-        }
-      }
-    }
-
-    .at {
-      color: var(--primary-color);
-
-      &:hover {
-        color: var(--color-aqua);
-      }
-    }
-
-    .meta {
-      line-height: 1;
-      .at {
-        float: right;
-      }
-    }
-
-    .content {
-      margin-bottom: .75em;
-      padding: .625em;
-
-      > .inner {
-        font-size: $font-size-small;
-        word-wrap: break-word;
-        word-break: break-all;
-        line-height: 2;
-        position: relative;
-
-        &.expand {
-          cursor: pointer;
-          max-height: 8em;
-
-          overflow: hidden;
-
-          &::before {
-            display: block;
-            content: "";
-            position: absolute;
-            width: 100%;
-            left: 0;
-            top: 0;
-            bottom: 3.15em;
-            background: linear-gradient(180deg, var(--grey-1-a0), var(--grey-1));
-            z-index: 999;
-          }
-
-          &::after {
-            display: block;
-            content: attr(data-expand);
-            text-align: center;
-            position: absolute;
-            width: 100%;
-            height: 3.15em;
-            line-height: 3.15em;
-            left: 0;
-            bottom: 0;
-            z-index: 999;
-            background: var(--grey-1);
-          }
-        }
-      }
-
-      .form {
-        margin-top: 1rem;
-      }
-    }
-
-    &:last-child .main {
-      border-bottom: none
-    }
-
-    .children {
-      padding-left: 1em;
-      border-left: .0625rem dashed var(--grey-3);
-
-      .avatar {
-        width: 2.225em;
-        height: 2.225em
-      }
-    }
-  }
-
-    .empty {
-      padding: 20px;
-      text-align: center;
-    }
-
-
-  /************ Loading ************/
-  .spinner {
-    margin: 10px auto;
-    width: 50px;
-    height: 30px;
-    text-align: center;
-    font-size: 10px;
-  }
-
-  .spinner>div {
-    background-color: var(--primary-color);
-    height: 100%;
-    width: 6px;
-    margin-right: 3px;
-    display: inline-block;
-    animation: sk-stretchdelay 1.2s infinite ease-in-out;
-  }
-
-  .spinner .r2 {
-    animation-delay: -1.1s;
-  }
-
-  .spinner .r3 {
-    animation-delay: -1s;
-  }
-
-  .spinner .r4 {
-    animation-delay: -0.9s;
-  }
-
-  .spinner .r5 {
-    animation-delay: -0.8s;
-  }
-
-  @keyframes sk-stretchdelay {
-
-    0%,
-    40%,
-    100% {
-      transform: scaleY(0.4);
-    }
-
-    20% {
-      transform: scaleY(1);
-    }
-  }
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: var(--grey-5);
-  font-style: italic;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst,
-.hljs-meta {
-  color: var(--grey-7);
-  font-weight: bold;
-}
-
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
-  color: var(--color-green);
-}
-
-.hljs-string,
-.hljs-doctag {
-  color: var(--color-red);
-}
-
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
-  color: var(--color-pink);
-  font-weight: bold;
-}
-
-.hljs-subst {
-  font-weight: normal;
-}
-
-.hljs-type,
-.hljs-class .hljs-title {
-  color: var(--color-grey);
-  font-weight: bold;
-}
-
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
-  color: var(--color-orange);
-  font-weight: normal;
-}
-
-.hljs-regexp,
-.hljs-link {
-  color: var(--color-green);
-}
-
-.hljs-symbol,
-.hljs-bullet {
-  color: var(--color-purple);
-}
-
-.hljs-built_in,
-.hljs-builtin-name {
-  color: var(--color-aqua);
-}
-
-.hljs-deletion {
-  background: #fdd;
-}
-
-.hljs-addition {
-  background: #dfd;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}