hexo-theme-solitude 1.1.0 → 1.2.1

package/source/js/extend/covercolor/local.js

@@ -1,107 +1,113 @@
 function coverColor() {
     var path = document.getElementById("post-cover")?.src;
     if (path !== undefined) {
-      var img = new Image();
-      img.crossOrigin = "Anonymous";
-      img.src = path;
-      img.onload = function () {
-        var canvas = document.createElement("canvas");
-        canvas.width = this.width;
-        canvas.height = this.height;
-        var ctx = canvas.getContext("2d");
-        ctx.drawImage(this, 0, 0);
-        var data = ctx.getImageData(0, 0, this.width, this.height).data;
-        var r = 0, g = 0, b = 0;
-        var step = 5;
-        for (var i = 0; i < data.length; i += 4 * step) {
-          r += data[i];
-          g += data[i + 1];
-          b += data[i + 2];
+        var img = new Image();
+        img.crossOrigin = "Anonymous";
+        img.src = path;
+        img.onload = function () {
+            var canvas = document.createElement("canvas");
+            canvas.width = this.width;
+            canvas.height = this.height;
+            var ctx = canvas.getContext("2d");
+            ctx.drawImage(this, 0, 0);
+            var data = ctx.getImageData(0, 0, this.width, this.height).data;
+            var colorCounts = {};
+            var dominantColor = '';
+            var maxCount = 0;
+            var step = 5;
+            for (var i = 0; i < data.length; i += 4 * step) {
+                var r = data[i];
+                var g = data[i + 1];
+                var b = data[i + 2];
+                var color = `${r},${g},${b}`;
+
+                colorCounts[color] = (colorCounts[color] || 0) + 1;
+
+                if (colorCounts[color] > maxCount) {
+                    maxCount = colorCounts[color];
+                    dominantColor = color;
+                }
+            }
+            var rgb = dominantColor.split(',').map(c => parseInt(c, 10));
+            var value = "#" + rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
+            if (getContrastYIQ(value) == "light") {
+                value = LightenDarkenColor(colorHex(value), -50)
+            }
+
+            document.documentElement.style.setProperty('--sco-main', value);
+            document.documentElement.style.setProperty('--sco-main-op', value + '23');
+            document.documentElement.style.setProperty('--sco-main-op-deep', value + 'dd');
+            document.documentElement.style.setProperty('--sco-main-none', value + '00');
+            initThemeColor()
+            document.getElementById("coverdiv").classList.add("loaded");
         }
-        r = Math.floor(r / (data.length / 4 / step));
-        g = Math.floor(g / (data.length / 4 / step));
-        b = Math.floor(b / (data.length / 4 / step));
-        var value = "#" + r.toString(16) + g.toString(16) + b.toString(16);
-        if (getContrastYIQ(value) == "light") {
-          value = LightenDarkenColor(colorHex(value), -50)
-        }
-
-        document.documentElement.style.setProperty('--sco-main', value);
-        document.documentElement.style.setProperty('--sco-main-op', value + '23');
-        document.documentElement.style.setProperty('--sco-main-op-deep', value + 'dd');
-        document.documentElement.style.setProperty('--sco-main-none', value + '00');
-        initThemeColor()
-        document.getElementById("coverdiv").classList.add("loaded");
-      }
     } else {
-      document.documentElement.style.setProperty('--sco-main', 'var(--sco-theme)');
-      document.documentElement.style.setProperty('--sco-main-op', 'var(--sco-theme-op)');
-      document.documentElement.style.setProperty('--sco-main-op-deep', 'var(--sco-theme-op-deep)');
-      document.documentElement.style.setProperty('--sco-main-none', 'var(--sco-theme-none)');
-      initThemeColor()
+        document.documentElement.style.setProperty('--sco-main', 'var(--sco-theme)');
+        document.documentElement.style.setProperty('--sco-main-op', 'var(--sco-theme-op)');
+        document.documentElement.style.setProperty('--sco-main-op-deep', 'var(--sco-theme-op-deep)');
+        document.documentElement.style.setProperty('--sco-main-none', 'var(--sco-theme-none)');
+        initThemeColor()
     }
-  }
-
+}
 
-  function colorHex(colorString) {
+function colorHex(colorString) {
     const hexRegex = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
     let color = colorString;
 
     if (/^(rgb|RGB)/.test(color)) {
-      const colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
-      const hexArr = colorArr.map(c => {
-        const hex = Number(c).toString(16);
-        return hex.length === 1 ? "0" + hex : hex;
-      });
-      return "#" + hexArr.join("");
-    } else if (hexRegex.test(color)) {
-      const hexDigits = color.replace(/#/, "").split("");
-      if (hexDigits.length === 6) {
-        return color;
-      } else if (hexDigits.length === 3) {
-        const hexArr = hexDigits.map(c => c + c);
+        const colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
+        const hexArr = colorArr.map(c => {
+            const hex = Number(c).toString(16);
+            return hex.length === 1 ? "0" + hex : hex;
+        });
         return "#" + hexArr.join("");
-      }
+    } else if (hexRegex.test(color)) {
+        const hexDigits = color.replace(/#/, "").split("");
+        if (hexDigits.length === 6) {
+            return color;
+        } else if (hexDigits.length === 3) {
+            const hexArr = hexDigits.map(c => c + c);
+            return "#" + hexArr.join("");
+        }
     }
     return color;
-  }
-
+}
 
 
 function colorRgb(str) {
-  const HEX_SHORT_REGEX = /^#([0-9a-fA-f]{3})$/;
-  const HEX_LONG_REGEX = /^#([0-9a-fA-f]{6})$/;
-  const HEX_SHORT_LENGTH = 4;
-
-  if (!str || typeof str !== 'string') {
-    return str;
-  }
-
-  const sColor = str.toLowerCase();
-  let hexValue = "";
-
-  if (sColor && (HEX_SHORT_REGEX.test(sColor) || HEX_LONG_REGEX.test(sColor))) {
-    hexValue = sColor.length === HEX_SHORT_LENGTH ?
-        sColor.replace(/^#(.)/g, "#$1$1") :
-        sColor;
-
-    const rgbValue = hexValue.slice(1)
-        .match(/.{2}/g)
-        .map(val => parseInt(val, 16));
-
-    return `rgb(${rgbValue[0]}, ${rgbValue[1]}, ${rgbValue[2]})`;
-  } else {
-    return sColor;
-  }
+    const HEX_SHORT_REGEX = /^#([0-9a-fA-f]{3})$/;
+    const HEX_LONG_REGEX = /^#([0-9a-fA-f]{6})$/;
+    const HEX_SHORT_LENGTH = 4;
+
+    if (!str || typeof str !== 'string') {
+        return str;
+    }
+
+    const sColor = str.toLowerCase();
+    let hexValue = "";
+
+    if (sColor && (HEX_SHORT_REGEX.test(sColor) || HEX_LONG_REGEX.test(sColor))) {
+        hexValue = sColor.length === HEX_SHORT_LENGTH ?
+            sColor.replace(/^#(.)/g, "#$1$1") :
+            sColor;
+
+        const rgbValue = hexValue.slice(1)
+            .match(/.{2}/g)
+            .map(val => parseInt(val, 16));
+
+        return `rgb(${rgbValue[0]}, ${rgbValue[1]}, ${rgbValue[2]})`;
+    } else {
+        return sColor;
+    }
 }
 
 
-  function LightenDarkenColor(col, amt) {
+function LightenDarkenColor(col, amt) {
     let usePound = false;
 
     if (col[0] === "#") {
-      col = col.slice(1);
-      usePound = true;
+        col = col.slice(1);
+        usePound = true;
     }
 
     const num = parseInt(col, 16);
@@ -110,12 +116,15 @@ function colorRgb(str) {
     const g = Math.min(255, Math.max(0, (num & 0xff) + amt));
 
     return `${usePound ? "#" : ""}${(g | (b << 8) | (r << 16)).toString(16).padStart(6, "0")}`;
-  }
+}
 
 
-  function getContrastYIQ(hexcolor) {
+function getContrastYIQ(hexcolor) {
     var colorrgb = colorRgb(hexcolor);
     var colors = colorrgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    if (!colors) {
+        return "light";  // or "dark", depending on your preference
+    }
     var red = colors[1];
     var green = colors[2];
     var blue = colors[3];
@@ -123,28 +132,29 @@ function colorRgb(str) {
     brightness = (red * 299) + (green * 587) + (blue * 114);
     brightness = brightness / 255000;
     if (brightness >= 0.5) {
-      return "light";
+        return "light";
     } else {
-      return "dark";
+        return "dark";
     }
-  }
+}
+
 
-  function initThemeColor() {
+function initThemeColor() {
     const currentTop = window.scrollY || document.documentElement.scrollTop;
     let themeColor;
     if (currentTop > 0) {
-      themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-card-bg');
-    } else if (PAGECONFIG.is_post) {
-      themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-main');
+        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-card-bg');
+    } else if (PAGE_CONFIG.is_post) {
+        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-main');
     } else {
-      themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-background');
+        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-background');
     }
     changeThemeColor(themeColor);
-  }
+}
 
-  function changeThemeColor(color) {
+function changeThemeColor(color) {
     const meta = document.querySelector('meta[name="theme-color"]');
     if (meta) {
-      meta.setAttribute('content', color);
+        meta.setAttribute('content', color);
     }
-  }
+}

package/source/js/extend/search/algolia-search.js

@@ -1,10 +1,10 @@
-const $searchMask = document.getElementById('search-mask'),
-    $searchDialog = document.querySelector('#algolia-search .search-dialog')
-
-class search {
-    static openSearch() {
-        utils.fadeIn($searchMask, '0.5')
-        utils.fadeIn($searchDialog, '0.5')
+window.addEventListener('load', () => {
+    const openSearch = () => {
+        document.body.style.cssText = 'width: 100%;overflow: hidden'
+        document.querySelector('#algolia-search .search-dialog').style.display = 'block'
+        document.querySelector('#algolia-search .ais-SearchBox-input').focus()
+        utils.fadeIn(document.getElementById('search-mask'), 0.5)
+        // shortcut: ESC
         document.addEventListener('keydown', function f(event) {
             if (event.code === 'Escape') {
                 closeSearch()
@@ -13,135 +13,128 @@ class search {
         })
     }
 
-    static closeSearch() {
-        utils.fadeOut($searchDialog, '0.5')
-        utils.fadeOut($searchMask, '0.5')
+    const closeSearch = () => {
+        document.body.style.cssText = "width: '';overflow: ''"
+        const $searchDialog = document.querySelector('#algolia-search .search-dialog')
+        $searchDialog.style.animation = 'search_close .5s'
+        setTimeout(() => {
+            $searchDialog.style.cssText = "display: none; animation: ''"
+        }, 500)
+        utils.fadeOut(document.getElementById('search-mask'), 0.5)
     }
 
-    static cutContent(content) {
-        if (content === '') return ''
-
-        const firstOccur = content.indexOf('<mark>')
+    const searchClickFn = () => {
+        document.querySelector('#search-button > .search').addEventListener('click', openSearch)
+        document.getElementById('search-mask').addEventListener('click', closeSearch)
+        document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
+        document.getElementById('menu-search').addEventListener('click', function () {
+            rm.hideRightMenu();
+            openSearch();
+            let t = document.querySelector('.ais-search-box--input');
+            let evt = new Event('input', {bubbles: true, cancelable: true});
+            t.value = selectTextNow;
+            t.dispatchEvent(evt);
+        });
+    }
 
-        let start = firstOccur - 30
-        let end = firstOccur + 120
-        let pre = ''
-        let post = ''
+    searchClickFn()
 
-        if (start <= 0) {
-            start = 0
-            end = 140
-        } else {
-            pre = '...'
-        }
+    window.addEventListener('pjax:complete', function () {
+        getComputedStyle(document.querySelector('#algolia-search .search-dialog')).display === 'block' && closeSearch()
+        searchClickFn()
+    })
 
-        if (end > content.length) {
-            end = content.length
-        } else {
-            post = '...'
-        }
-
-        const matchContent = pre + content.substring(start, end) + post
-        return matchContent
+    const algolia = GLOBAL_CONFIG.algolia
+    const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
+    if (!isAlgoliaValid) {
+        return console.error('Algolia setting is invalid!')
     }
 
-    static search() {
-        const algolia = GLOBALCONFIG.algolia, that = this
-        const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
-        if (!isAlgoliaValid) {
-            return console.error('Algolia setting is invalid!')
-        }
+    const searchClient = algoliasearch(
+        algolia.appId,
+        algolia.apiKey
+    );
 
-        const init = instantsearch({
-            indexName: algolia.indexName,
-            searchClient: algoliasearch(algolia.appId, algolia.apiKey),
-            searchFunction(helper) {
-                helper.state.query && helper.search()
-            }
-        })
+    const search = instantsearch({
+        indexName: algolia.indexName,
+        searchClient,
+        searchParameters: {
+            hitsPerPage: algolia.hits.per_page || 10
+        }
+    })
 
-        const searchBox = instantsearch.widgets.searchBox({
-            container: '#search-input',
+    search.addWidget(
+        instantsearch.widgets.searchBox({
+            container: '#algolia-search-input',
             showReset: false,
+            placeholder: GLOBAL_CONFIG.lang.search.placeholder,
             showSubmit: false,
-            autofocus: true,
-            placeholder: GLOBALCONFIG.lang.search.placeholder,
-            showLoadingIndicator: false
+            showLoadingIndicator: true,
+            templates: {
+                loadingIndicator: '<i class="scoicon sco-loading-line search-icon"></i>'
+            },
+            onStateChange({uiState, setUiState}) {
+                const searchInput = document.querySelector('#algolia-search-input input')
+                if (searchInput.value) {
+                    setUiState(uiState);
+                }
+            }
         })
-
-        const hits = instantsearch.widgets.hits({
+    )
+    search.addWidget(
+        instantsearch.widgets.hits({
             container: '#algolia-hits',
             templates: {
-                item(data) {
-                    const link = '/posts/' + data.permalink.split('/')[4]
-                    const result = data._highlightResult
-                    const content = result.contentStripTruncate
-                        ? that.cutContent(result.contentStripTruncate.value)
-                        : result.contentStrip
-                            ? that.cutContent(result.contentStrip.value)
-                            : result.content
-                                ? that.cutContent(result.content.value)
-                                : ''
-                    return `
-                <a href="${link}" class="algolia-hit-item-link">
-                ${result.title.value}
-                </a>
-                <p class="algolia-hit-item-content">${content}</p>`
+                item(hit) {
+                    const link = hit.permalink ? hit.permalink : (GLOBAL_CONFIG.root + hit.path)
+                    return (
+                        `<a href="${link}" class="algolia-hit-item-link">${hit._highlightResult.title.value}</a>`
+                    )
                 },
-                empty: function (data) {
+                empty(data) {
                     return (
-                        `<div id="algolia-hits-empty">${GLOBALCONFIG.lang.search.empty}</div>`
+                        '<div id="algolia-hits-empty">' +
+                        GLOBAL_CONFIG.lang.search.empty.replace(/\$\{query}/, data.query) +
+                        '</div>'
                     )
                 }
+            },
+            cssClasses: {
+                item: 'algolia-hit-item'
             }
         })
+    )
 
-        const stats = instantsearch.widgets.stats({
-            container: '.algolia-stats',
+    search.addWidget(
+        instantsearch.widgets.stats({
+            container: '#algolia-stats',
             templates: {
-                text: function (data) {
-                    const stats = GLOBALCONFIG.lang.search.hit.replace('${query}', `<mark>${data.nbHits}</mark>`)
-                    return (
-                        stats
-                    )
+                text(data) {
+                    const stats = GLOBAL_CONFIG.lang.search.hit.replace(/\$\{hits}/, data.nbHits).replace(/\$\{time}/, data.processingTimeMS);
+                    return `${stats}`;
                 }
             }
         })
-
-        init.addWidgets([searchBox, hits, stats]) // add the widgets to the instantsearch instance
-        init.start()
-        init.on('render', () => {
-            pjax.refresh(document.getElementById('algolia-hits'))
+    )
+
+    search.addWidget(
+        instantsearch.widgets.pagination({
+            container: '#algolia-pagination',
+            scrollTo: false,
+            showFirst: false,
+            showPrevious: false,
+            showNext: false,
+            showLast: false,
+            cssClasses: {
+                list: 'pagination',
+                pageItem: 'pagination-item',
+                link: 'page-number',
+            },
         })
-    }
-}
+    )
+    search.start()
 
-const searchClickFn = () => {
-    document.querySelector('#search-button > .search').addEventListener('click', search.openSearch)
-    document.getElementById('menu-search').addEventListener('click', function() {
-        rm.hideRightMenu();
-        search.openSearch();
-        let t = document.getElementsByClassName('ais-search-box--input')[0];
-        let evt = new Event('input', {
-            bubbles: true,
-            cancelable: true
-        });
-        t.value = selectTextNow;
-        t.dispatchEvent(evt);
-    });
-}
-
-const searchClickFnOnce = () => {
-    document.querySelector('#algolia-search .search-close-button').addEventListener('click', search.closeSearch)
-    $searchMask.addEventListener('click', search.closeSearch)
-}
-
-window.addEventListener('load', () => {
-    searchClickFn()
-    searchClickFnOnce()
-    search.search()
+    window.pjax && search.on('render', () => {
+        window.pjax.refresh(document.getElementById('algolia-hits'))
+    })
 })
-
-window.addEventListener('pjax:complete', () => {
-    searchClickFn()
-})

package/source/js/extend/search/local-search.js

@@ -44,7 +44,7 @@ class search{
   }
 
   static search(){
-    if (!GLOBALCONFIG.localsearch.preload && dataObj === null) dataObj = this.fetchData(GLOBALCONFIG.localsearch.path)
+    if (!GLOBAL_CONFIG.localsearch.preload && dataObj === null) dataObj = this.fetchData(GLOBAL_CONFIG.localsearch.path)
     $input.addEventListener('input', function type() {
       const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
       if (keywords[0] !== '') $loadingStatus.innerHTML = '<i class="scoicon sco-loading-line"></i><span>加载中</span>'
@@ -61,7 +61,7 @@ class search{
           let isMatch = true
           let dataTitle = data.title ? data.title.trim().toLowerCase() : ''
           const dataContent = data.content ? data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() : ''
-          const dataUrl = data.url.startsWith('/') ? data.url : GLOBALCONFIG.root + data.url
+          const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url
           let indexTitle = -1
           let indexContent = -1
           let firstOccur = -1
@@ -128,9 +128,9 @@ class search{
           }
         })
         if (count === 0) {
-          str += `<div id="search__hits-empty">${GLOBALCONFIG.lang.search.empty}</div>`
+          str += `<div id="search__hits-empty">${GLOBAL_CONFIG.lang.search.empty}</div>`
         }else{
-          str += `<div class="search__hits-count">${GLOBALCONFIG.lang.search.hit.replace('${query}', '<span class="search-keyword">' + count + '</span>')}</div>`
+          str += `<div class="search__hits-count">${GLOBAL_CONFIG.lang.search.hit.replace('${query}', '<span class="search-keyword">' + count + '</span>')}</div>`
         }
         str += '</div>'
         $resultContent.innerHTML = str
@@ -141,8 +141,8 @@ class search{
 }
 
 const searchClickFn = () => {
-  document.querySelector('#search-button > .search').addEventListener('click', search.openSearch)
-  document.getElementById('menu-search').addEventListener('click', function() {
+  if (PAGE_CONFIG.page !== "404") document.querySelector('#search-button > .search').addEventListener('click', search.openSearch)
+  GLOBAL_CONFIG.rightmenu.enable && document.getElementById('menu-search').addEventListener('click', function() {
     rm.hideRightMenu();
     search.openSearch();
     let t = document.getElementsByClassName('search-box-input')[0];
@@ -158,7 +158,7 @@ const searchClickFn = () => {
 const searchClickFnOnce = () => {
   document.querySelector('#local-search .search-close-button').addEventListener('click', search.closeSearch)
   $searchMask.addEventListener('click', search.closeSearch)
-  if (GLOBALCONFIG.localsearch.preload) dataObj = search.fetchData(GLOBALCONFIG.localsearch.path)
+  if (GLOBAL_CONFIG.localsearch.preload) dataObj = search.fetchData(GLOBAL_CONFIG.localsearch.path)
 }
 
 window.addEventListener('load', () => {