hexo-theme-shokax 0.2.7 → 0.2.9

package/.gitattribute

@@ -0,0 +1 @@
+* text=auto eol=lf

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/README.md

@@ -7,11 +7,11 @@
 ![version](https://shields.io/npm/v/hexo-theme-shokax)
 ![build](https://img.shields.io/github/actions/workflow/status/theme-shoka-x/hexo-theme-shokaX/build-theme.yml)
 
-语言(language): 简体中文 | [English](./README_en.md) \
+语言(language): 简体中文 | [English](./README_en.MD) \
 此项目是shoka的一个二次开发版(算精神续作),致力于提高性能和优化魔改体验 \
-诞生原因是目前shoka已经两年没有更新了,积压了大量BUG和功能请求。\
+诞生原因是目前shoka已经两年没有更新了,积压了大量BUG和功能请求。
 
-shokaX的社区资源导航和插件仓库为[awesome-shokaX](https://github.com/zkz098/awesome-shokaX)
+shokaX的社区资源导航和插件仓库为[awesome-shokaX](https://github.com/theme-shoka-x/awesome-shokaX)
 
 ## 💬 和shoka的区别
 原先shoka使用了javascript+Native+nunjucks的技术 \
@@ -75,7 +75,7 @@ GPL许可证主要目的是限制修改后的分发行为，避免未经许可
 | hexo-theme-shoka | amehime           | 本项目的父主题            |
 
 ## 开发者们
-[![](https://contributors-img.web.app/image?repo=zkz098/hexo-theme-shokaX)](https://github.com/zkz098/hexo-theme-shokaX/graphs/contributors)
+[![](https://contributors-img.web.app/image?repo=theme-shoka-x/hexo-theme-shokaX)](https://github.com/theme-shoka-x/hexo-theme-shokaX/graphs/contributors)
 
 ## 特别鸣谢
 [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" width="25%">](https://jb.gg/OpenSourceSupport)

package/README_en.MD

@@ -1,4 +1,4 @@
-If the repository address you are visiting is zkz098/hexo-theme-shokaX, please switch to the latest address: theme-shoka-x/hexo-theme-shokaX.
+If the repository address you are visiting is **zkz098/hexo-theme-shokaX**, please switch to the latest address: [theme-shoka-x/hexo-theme-shokaX](https://github.com/theme-shoka-x/hexo-theme-shokaX)
 
 # hexo-theme-shokaX
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fzkz098%2Fhexo-theme-shokaX.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fzkz098%2Fhexo-theme-shokaX?ref=badge_shield)
@@ -11,7 +11,7 @@ Language: [简体中文](./README.md) | English \
 This project is a secondary development version of shoka (spiritual sequel), dedicated to improving performance and optimizing modding experience.
 The reason for its birth is that shoka has not been updated for two years, with a large backlog of bugs and feature requests.
 
-The community resource navigation and plugin repository for shokaX is awesome-shokaX.
+The community resource navigation and plugin repository for shokaX is [awesome-shokaX](https://github.com/theme-shoka-x/awesome-shokaX)
 
 ## 💬 Differences with shoka
 The original shoka used javascript+Native+nunjucks technology, while shokaX uses typescript+Vue 3+Pug technology and has changed a lot of hard-to-access CDN links.
@@ -30,7 +30,7 @@ Remarks:
 - *: Requires implementation using Injection API.
 
 ## 🔧 How to Install?
-It is recommended to use [ShokaX-CLI](https://github.com/zkz098/shokaX-CLI) and execute the following command:
+It is recommended to use [ShokaX-CLI](https://github.com/theme-shoka-x/shokaX-CLI) and execute the following command:
 ```bash
 npm i shokax-cli --location=global
 # hexo init initializes the environment
@@ -50,7 +50,7 @@ license: GPL 3 or later
 
 ## Contributors
 
-[![](https://contributors-img.web.app/image?repo=zkz098/hexo-theme-shokaX)](https://github.com/zkz098/hexo-theme-shokaX/graphs/contributors)
+[![](https://contributors-img.web.app/image?repo=theme-shoka-x/hexo-theme-shokaX)](https://github.com/theme-shoka-x/hexo-theme-shokaX/graphs/contributors)
 
 ## Special thanks
 [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" width="25%">](https://jb.gg/OpenSourceSupport)

package/_config.yml

@@ -61,6 +61,7 @@ seo:
 visitor:
   clarity: false
   baiduAnalytics: false
+  googleAnalytics: false
 
 darkmode: false
 auto_dark: # 自动亮/暗模式
@@ -74,6 +75,13 @@ loader:
   start: true # 进入页面时显示加载动画
   switch: false # 切换页面时显示加载动画
 
+# 使用polyfill.io自动处理浏览器兼容问题
+polyfill:
+  enable: true
+  features:
+    - default
+    - fetch
+
 # 显示的动画(烟花)
 fireworks:
   enable: true
@@ -384,7 +392,6 @@ vendorsList:
   js:
     - pace
     - pjax
-#    - fetch  # polyfill已暂时禁用
     - anime
     - algolia
     - instantsearch

package/_images.yml

@@ -1,4 +1,4 @@
-# 此images已失效,见https://github.com/zkz098/hexo-theme-shokaX/issues/6
+# 此images已失效,见https://github.com/theme-shoka-x/hexo-theme-shokaX/issues/6
 - 6833939bly1giciryrr3rj20zk0m8nhk.jpg
 - 6833939bly1gicis081o9j20zk0m8dmr.jpg
 - 6833939bly1gicis3attqj20zk0m8k7l.jpg

package/layout/_partials/footer.pug

@@ -34,7 +34,7 @@ div(class="status")
             if beianN && RC
                 br
                 a(target="_blank" href=`https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${RC}`)
-                    img(src=theme.statics + theme.assets + '/' + theme.footer.icp.icon style="max-width: 2em;display:inline;")
+                    img(src=theme.statics + theme.assets + '/' + theme.footer.icp.icon style="max-width: 2em;display:inline;" width="20" height="20")
                     != beianN
     != shokax_inject('status')
 

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)
@@ -117,6 +119,7 @@ html(lang=page.language?page.language:config.language, style=theme.grayMode ? 'f
         != _js('app.js')
         != partial('_partials/third-party/baidu-analytics.pug', {}, {cache: true})
         != partial('_partials/third-party/clarity.pug', {}, {cache: true})
+        != partial('_partials/third-party/google-analytics.pug', {}, {cache: true})
         if theme.twikoo.enable
             != _new_comments('twikoo')
         else if theme.waline.enable

package/layout/_partials/post/nav.pug

@@ -1,7 +1,7 @@
 mixin navpost(item, type)
     - var postText = item.title || item.link || __('post.untitled')
     - var lastcat = item.categories.last()
-    - var itemlink=`<span class="type">${__('post.' + type)}</span><span class="category"><i class="ic i-flag"></i>${lastcat?.name}</span><h3>${ postText }</h3>`
+    - var itemlink = `<span class="type">${__('post.' + type)}</span>${lastcat && lastcat.name ? `<span class="category"><i class="ic i-flag"></i>${lastcat.name}</span>` : ''}<h3>${postText}</h3>`
     != _url(item.path, itemlink, {itemprop: 'url', rel: type, 'data-background-image': _cover(item), title: postText})
 
 div(class="post-nav")

package/layout/_partials/third-party/google-analytics.pug

@@ -0,0 +1,10 @@
+- var googleId = theme.visitor.googleAnalytics 
+if googleId
+    script(async, src=`https://www.googletagmanager.com/gtag/js?id=${ googleId }`)
+    script(data-pjax=true).
+        window.dataLayer = window.dataLayer || [];
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+        gtag('js', new Date());
+        gtag('config', '#{googleId}');

package/package.json

@@ -1,35 +1,33 @@
 {
     "name": "hexo-theme-shokax",
-    "version": "0.2.7",
+    "version": "0.2.9",
     "description": "a hexo theme based on shoka",
     "main": "index.js",
     "repository": "https://github.com/theme-shoka-x/hexo-theme-shokaX",
-    "author": "Chou kaitaku",
+    "author": "zkz098",
     "license": "GPL-3.0-or-later",
     "scripts": {
         "test": "tsc",
         "build": "pnpm install && tsc"
     },
     "devDependencies": {
-
         "@types/fancybox": "^3.5.3",
         "@types/hexo": "^3.8.8",
         "@types/jquery": "^3.5.16",
         "@types/js-yaml": "^4.0.5",
         "@types/lozad": "^1.16.1",
-        "@types/node": "^20.1.0",
-        "@typescript-eslint/eslint-plugin": "^5.59.0",
-        "@typescript-eslint/parser": "^5.59.0",
-
-        "eslint": "^8.39.0",
-        "eslint-config-standard": "^17.0.0",
+        "@types/node": "^20.2.3",
+        "@typescript-eslint/eslint-plugin": "^5.59.7",
+        "@typescript-eslint/parser": "^5.59.7",
+        "eslint": "^8.41.0",
+        "eslint-config-standard": "*",
         "eslint-plugin-import": "^2.27.5",
-        "eslint-plugin-n": "^15.7.0",
+        "eslint-plugin-n": "^16.0.0",
         "eslint-plugin-promise": "^6.1.1",
-        "eslint-plugin-vue": "^9.11.0",
+        "eslint-plugin-vue": "^9.14.0",
         "hexo-fs": "^4.1.1",
         "hexo-util": "^3.0.1",
-        "instantsearch.js": "^4.54.1",
+        "instantsearch.js": "^4.56.0",
         "theme-shokax-anime": "^0.0.4",
         "theme-shokax-pjax": "^0.0.2",
         "typescript": "^5.0.4",

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

@@ -91,7 +91,7 @@ hexo.extend.helper.register('_vendor_font', () => {
     const fontDisplay = '&display=swap';
     const fontSubset = '&subset=latin,latin-ext';
     const fontStyles = ':300,300italic,400,400italic,700,700italic';
-    const fontHost = '//fonts.geekzu.org';
+    const fontHost = 'https://fonts.googleapis.com';
     let fontFamilies = ['global', 'logo', 'title', 'headings', 'posts', 'codes'].map(item => {
         if (config[item] && config[item].family && config[item].external) {
             return config[item].family + fontStyles;

package/scripts/plugin/lib/injects.js

@@ -8,6 +8,8 @@ const node_path_1 = __importDefault(require("node:path"));
 const injects_point_1 = __importDefault(require("./injects-point"));
 const defaultExtname = '.pug';
 class StylusInject {
+    files;
+    base_dir;
     constructor(base_dir) {
         this.base_dir = base_dir;
         this.files = [];
@@ -17,6 +19,8 @@ class StylusInject {
     }
 }
 class ViewInject {
+    base_dir;
+    raws;
     constructor(base_dir) {
         this.base_dir = base_dir;
         this.raws = [];

package/source/css/_common/components/tags/tabs.styl

@@ -3,7 +3,6 @@
   position: relative;
 
   .nav {
-    overflow: hidden;
     border-bottom: .0625rem solid var(--grey-1-a7);
     height: 2.6875rem;
 

package/source/css/_common/scaffolding/base.styl

@@ -148,6 +148,7 @@ input, textarea {
 }
 @font-face {
   font-family: 'ic';
+  font-display: swap;
   src: url('//at.alicdn.com/t/font_' + $iconfont + '.eot');
   src: url('//at.alicdn.com/t/font_' + $iconfont + '.eot?#iefix') format('embedded-opentype'),
   url('//at.alicdn.com/t/font_' + $iconfont + '.woff2') format('woff2'),
@@ -157,9 +158,9 @@ input, textarea {
 }
 
 @font-face {
-    font-family: 'jetbrains-mono';
-    font-display: swap;
-    src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@2.242/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
+  font-family: 'jetbrains-mono';
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@2.242/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
 }
 
 .ic {

package/source/css/comment.styl

@@ -1,5 +1,3 @@
 @import "_variables.styl";
 
 @import "_mixins.styl";
-
-@import "_common/components/third-party/valine";

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/library.js

@@ -17,13 +17,8 @@ $dom.asyncify = async (selector, element = document) => {
     }
     return element.querySelector(selector);
 };
-$dom.asyncifyAll = async (selector, element = document) => {
-    return element.querySelectorAll(selector);
-};
 $dom.asyncifyEach = (selector, callback, element) => {
-    $dom.asyncifyAll(selector, element).then((tmp) => {
-        tmp.forEach(callback);
-    });
+    $dom.all(selector, element).forEach(callback);
 };
 Object.assign(HTMLElement.prototype, {
     createChild: function (tag, obj, positon) {

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;
-}