hexo-theme-shokax 0.2.1 → 0.2.2

package/scripts/tags/links.js

@@ -1,85 +1,58 @@
-/* global hexo */
-'use strict'
-/*
-{% links %}
-- site: #main title
-  owner: #alternate title for image tooltip (nullable)
-  url: #link of site
-  desc: #description (nullable)
-  image: #icon image (nullable)
-  color: #block color (nullable)
-{% endlinks %}
-
-{% linksfile [path] %}
-*/
-
-const fs = require('fs')
-const path = require('path')
-const yaml = require('js-yaml')
-
-function linkGrid (args, content) {
-  const theme = hexo.theme.config
-
-  if (!args[0] && !content) {
-    return
-  }
-
-  if (args[0]) {
-    const filepath = path.join(hexo.source_dir, args[0])
-    if (fs.existsSync(filepath)) {
-      content = fs.readFileSync(filepath)
+'use strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import yaml from 'js-yaml';
+function linkGrid(args, content) {
+    const theme = hexo.theme.config;
+    if (!args[0] && !content) {
+        return;
     }
-  }
-
-  if (!content) {
-    return
-  }
-
-  const siteHost = new URL(hexo.config.url).hostname || hexo.config.url
-
-  const list = yaml.load(content)
-
-  let result = ''
-
-  list.forEach((item) => {
-    if (!item.url || !item.site) {
-      return
+    if (args[0]) {
+        const filepath = path.join(hexo.source_dir, args[0]);
+        if (fs.existsSync(filepath)) {
+            content = fs.readFileSync(filepath);
+        }
     }
-
-    let urlparam = {}
-
-    if (item.url) {
-      urlparam = new URL(item.url, hexo.config.url)
+    if (!content) {
+        return;
     }
-
-    let item_image = item.image || theme.assets + '/404.png'
-
-    if (!item_image.startsWith('//') && !item_image.startsWith('http')) {
-      item_image = theme.statics + item_image
-    }
-
-    item.color = item.color ? ` style="--block-color:${item.color};"` : ''
-
-    result += `<div class="item" title="${item.owner || item.site}"${item.color}>`
-
-    if (urlparam.protocol && urlparam.hostname !== siteHost) {
-      const durl = Buffer.from(item.url).toString('base64')
-      result += `<span class="exturl image" data-url="${durl}" data-background-image="${item_image}"></span>
+    const siteHost = new URL(hexo.config.url).hostname || hexo.config.url;
+    const list = yaml.load(content);
+    let result = '';
+    list.forEach((item) => {
+        if (!item.url || !item.site) {
+            return;
+        }
+        let urlparam = {
+            protocol: undefined,
+            hostname: undefined
+        };
+        if (item.url) {
+            urlparam = new URL(item.url, hexo.config.url);
+        }
+        let item_image = item.image || theme.assets + '/404.png';
+        if (!item_image.startsWith('//') && !item_image.startsWith('http')) {
+            item_image = theme.statics + item_image;
+        }
+        item.color = item.color ? ` style="--block-color:${item.color};"` : '';
+        result += `<div class="item" title="${item.owner || item.site}"${item.color}>`;
+        if (urlparam.protocol && urlparam.hostname !== siteHost) {
+            const durl = Buffer.from(item.url).toString('base64');
+            result += `<span class="exturl image" data-url="${durl}" data-background-image="${item_image}"></span>
           <div class="info">
           <span class="exturl title" data-url="${durl}">${item.site}</span>
           <p class="desc">${item.desc || item.url}</p>
-          </div></div>`
-    } else {
-      result += `<a href="${item.url}" class="image" data-background-image="${item_image}"></a>
+          </div></div>`;
+        }
+        else {
+            result += `<a href="${item.url}" class="image" data-background-image="${item_image}"></a>
           <div class="info">
           <a href="${item.url}" class="title">${item.site}</a>
           <p class="desc">${item.desc || item.url}</p>
-          </div></div>`
-    }
-  })
-
-  return `<div class="links">${result}</div>`
+          </div></div>`;
+        }
+    });
+    return `<div class="links">${result}</div>`;
 }
-
-hexo.extend.tag.register('links', linkGrid, { ends: true })
-hexo.extend.tag.register('linksfile', linkGrid, { ends: false, async: true })
+hexo.extend.tag.register('links', linkGrid, { ends: true });
+hexo.extend.tag.register('linksfile', linkGrid, { ends: false, async: true });

package/scripts/tags/media.js

@@ -1,19 +1,14 @@
-'use strict'
-/* global hexo */
-const yaml = require('js-yaml')
-
-function postMedia (args, content) {
-  if (!args[0] || !content) {
-    return
-  }
-  const list = yaml.load(content)
-  switch (args[0]) {
-    case 'video':
-    case 'audio':
-      return `<div class="media-container"><div class="player" data-type="${args[0]}" data-src='${JSON.stringify(list)}'></div></div>`
-  }
+'use strict';
+import yaml from 'js-yaml';
+function postMedia(args, content) {
+    if (!args[0] || !content) {
+        return;
+    }
+    const list = yaml.load(content);
+    switch (args[0]) {
+        case 'video':
+        case 'audio':
+            return `<div class="media-container"><div class="player" data-type="${args[0]}" data-src='${JSON.stringify(list)}'></div></div>`;
+    }
 }
-
-hexo.extend.tag.register('media', postMedia, { ends: true })
-
-//   return `<video src="${args}" preload="metadata" controls playsinline poster="">Sorry, your browser does not support the video tag.</video>`;
+hexo.extend.tag.register('media', postMedia, { ends: true });

package/source/css/_common/components/highlight/highlight.styl

@@ -246,6 +246,10 @@ code,
     .ic {
       margin-top: 1rem;
       @extend .up-down;
+
+      &.stop-animation {
+        animation-play-state: paused;
+      }
     }
 
     &.open {

package/source/css/_common/outline/header/image.styl

@@ -10,6 +10,10 @@
   background-color: #363636;
   content-visibility: auto;
   contain-intrinsic-size: 100vw 70vh;
+
+  li.stop-animation {
+    animation-play-state: paused;
+  }
   
   img {
     width: 100%;

package/source/css/_common/outline/header/waves.styl

@@ -18,6 +18,10 @@
   animation: wave 25s cubic-bezier(.55, .5, .45, .5) infinite;
 }
 
+use.stop-animation {
+  animation-play-state: paused;
+}
+
 .parallax>use:nth-child(1) {
   animation-delay: -2s;
   animation-duration: 7s;

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

@@ -4,6 +4,10 @@
   animation: rotate 6s linear infinite;
 }
 
+.rotate.stop-animation  {
+  animation-play-state: paused;
+}
+
 .beat {
   animation: beat 1.33s ease-in-out infinite;
 }

package/source/css/_mixins.styl

@@ -1,3 +1,5 @@
+$mobile-wdith = hexo-config('experiments.mobileWidth')
+
 the-transition(duration = .2s, function = ease-in-out, delay = 0s, property = all) {
   transition:property duration function delay;
 }
@@ -15,7 +17,7 @@ mobile-small() {
 }
 
 mobile() {
-  @media (max-width: 820px) {
+  @media (max-width: $mobile-wdith) {
     {block};
   }
 }
@@ -27,13 +29,13 @@ tablet-mobile() {
 }
 
 tablet-desktop() {
-  @media (min-width: 820px) {
+  @media (min-width: $mobile-wdith) {
     {block};
   }
 }
 
 tablet() {
-  @media (min-width: 820px) and (max-width: 1043px) {
+  @media (min-width: $mobile-wdith) and (max-width: 1043px) {
     {block};
   }
 }

package/source/js/_app/fireworks.js

@@ -120,8 +120,18 @@ const render = anime({
         ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
     }
 });
+const hasAncestor = function (node, name) {
+    name = name.toUpperCase();
+    do {
+        if (node === null || node === undefined)
+            break;
+        if (node.nodeName === name)
+            return true;
+    } while (node = node.parentNode);
+    return false;
+};
 document.addEventListener(tap, function (e) {
-    if (e.target.nodeName === 'A') {
+    if (hasAncestor(e.target, 'a')) {
         return;
     }
     render.play();

package/source/js/_app/global.js

@@ -184,8 +184,12 @@ const scrollHandle = function (event) {
     else { }
     scrollAction.y = window.scrollY;
     const scrollPercent = Math.round(Math.min(100 * window.scrollY / contentVisibilityHeight, 100)) + '%';
-    backToTop.child('span').innerText = scrollPercent;
-    $dom('.percent').changeOrGetWidth(scrollPercent);
+    if (backToTop.child('span').innerText !== scrollPercent) {
+        backToTop.child('span').innerText = scrollPercent;
+    }
+    if ($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) {
+        $dom('.percent').changeOrGetWidth(scrollPercent);
+    }
 };
 const pagePosition = function () {
     if (CONFIG.auto_scroll) {

package/source/js/_app/page.js

@@ -332,6 +332,31 @@ const postBeauty = function () {
             btns: []
         }).player.load(JSON.parse(element.attr('data-src'))).fetch();
     });
+    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) {
+                    angleDown.forEach(i => {
+                        i.classList.remove('stop-animation');
+                    });
+                }
+                else {
+                    angleDown.forEach(i => {
+                        i.classList.add('stop-animation');
+                    });
+                }
+            });
+        }, {
+            root: null,
+            threshold: 0.5
+        });
+        angleDown.forEach(i => {
+            io.observe(i);
+        });
+    }
 };
 const tabFormat = function () {
     let first_tab;
@@ -546,6 +571,47 @@ const domInit = function () {
             toolPlayer.player.mini();
         });
     }
+    const createIntersectionObserver = function () {
+        if (!window.IntersectionObserver)
+            return;
+        new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                document.querySelectorAll('.parallax>use').forEach(i => {
+                    i.classList.remove('stop-animation');
+                });
+                document.querySelectorAll('#imgs .item').forEach(i => {
+                    i.classList.remove('stop-animation');
+                });
+            }
+            else {
+                document.querySelectorAll('.parallax>use').forEach(i => {
+                    i.classList.add('stop-animation');
+                });
+                document.querySelectorAll('#imgs .item').forEach(i => {
+                    i.classList.add('stop-animation');
+                });
+            }
+        }, {
+            root: null,
+            threshold: 0.2
+        }).observe(document.getElementById('waves'));
+        new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                document.querySelectorAll('.with-love>i').forEach(i => {
+                    i.classList.remove('stop-animation');
+                });
+            }
+            else {
+                document.querySelectorAll('.with-love>i').forEach(i => {
+                    i.classList.add('stop-animation');
+                });
+            }
+        }, {
+            root: null,
+            threshold: 0.2
+        }).observe(document.querySelector('.with-love'));
+    };
+    createIntersectionObserver();
 };
 const pjaxReload = function () {
     pagePosition();