hexo-theme-stellar 1.11.0 → 1.12.0

package/source/css/_layout/tag-plugins/link.styl

@@ -14,8 +14,8 @@
   cursor: pointer
   min-width 280px
   max-width: 100%
-  width: 320px
-  @media screen and (max-width: $device-mobile-375)
+  width: 350px
+  @media screen and (max-width: $device-mobile-425)
     width: 100%
   box-shadow: $boxshadow-card
   border-radius: $border-block
@@ -35,54 +35,68 @@
   text-align: justify
 
 .md .link-card
-  line-height: 1.2
-  > div
-    pointer-events: none
+  >.left
+    overflow: hidden
+    margin: 0.75rem 0 0.75rem 0.75rem
+    .title
+      font-size: $fs-14
+    span+span 
+      margin-top: 0.25rem
+  >.right
+    width: 2.75rem
+    height: 2.75rem
+    margin: 0.75rem
+    overflow: hidden
+    flex-shrink: 0
   >.top
     display: flex
-    margin: .75rem 1rem .25rem
+    margin: .75rem 0.75rem .25rem
     overflow: hidden
     max-width: 'calc(100% - %s * 2)' % 1rem
     align-items: center
     .img
       line-height: 0
       height: 16px
-      width: 20px
-      margin-right: 4px
+      width: 16px
+      border-radius: 16px
+      margin-right: 8px
       background-repeat: no-repeat
       background-size: contain
       background-position: left center
-    .desc
-      opacity: .75
-      line-height: 1.5
     span
       txt-ellipsis()
       max-width: 100%
   >.bottom
-    margin: 0 1rem .75rem 1rem
+    margin: 0 0.75rem 0.75rem 0.75rem
     .title
       font-size: $fs-15
       margin: 4px 0 8px 0
-  >.right
-    width: 2.5rem
-    height: 2.5rem
-    margin: .75rem
+
+.md .link-card
+  line-height: 1.2
+  .title
+    display: -webkit-box
+    -webkit-box-orient: vertical
     overflow: hidden
+    -webkit-line-clamp: 2
+  .cap
     flex-shrink: 0
-  >.left
+    color: var(--text-p3)
+  .link
+    line-height: 1.5
+    opacity: .75
+    txt-ellipsis()
+  .desc
+    display: -webkit-box
+    -webkit-box-orient: vertical
     overflow: hidden
-    margin: .5rem 0 .5rem 1rem
-    .title
-      font-size: $fs-14
-      margin: 1px 0 5px 0
-    .desc
-      flex-shrink: 0
-      txt-ellipsis()
+    -webkit-line-clamp: 3
+  .img
+    border-radius: 4px
+
   span
     margin: 0
     display: block
-  span.title
+  .title
     font-weight: 500
     color: var(--text-p1)
-  span.desc
-    color: var(--text-p3)

package/source/css/_layout/tag-plugins/navbar.styl

@@ -1,16 +1,22 @@
 .md .tag-plugin.navbar
+  text-align: center
   nav.cap
     margin: 0
     padding: 1px
-    background: var(--block)
+    background: var(--card)
+    box-shadow: $boxshadow-button
     border-radius: 6px
     display: inline-flex
     max-width: 100%
     a
       margin: 1px
       padding: 0.25em 0.75rem
+      color: var(--text-p2)
       &:after
         display: none
-      &:hover,&.active
-        background: var(--card)
-        color: var(--text-p1)
+      &:hover
+        background: var(--block)
+      &.active 
+        background: var(--block)
+        box-shadow: none
+        color: var(--text-p1)

package/source/css/_layout/tag-plugins/quot.styl

@@ -3,7 +3,7 @@
   position: relative
   align-items: center
 .md .tag-plugin.quot:not(span)
-  display: flex
+  display: inline-flex
   align-self: center
   border-bottom: none
   font-weight: 700

package/source/css/_layout/tag-plugins/split.styl

@@ -0,0 +1,28 @@
+.md .tag-plugin.split
+  margin: 0.5rem 0
+.tag-plugin.split
+  display: grid
+  grid-gap: 16px
+  grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
+  >div>
+    p   
+      line-height: 1.5
+    :first-child
+      margin-top: 0
+    :last-child
+      margin-bottom: 0
+    p:first-child
+      margin-top: -0.25em
+    p:last-child
+      margin-bottom: -0.25em
+    
+
+.tag-plugin.split
+  &[bg]>div
+    padding: 1rem
+    border-radius: $border-card
+  &[bg='block']>div
+    background: var(--block)
+  &[bg='card']>div
+    background: var(--card)
+    box-shadow: $boxshadow-card

package/source/css/_layout/tag-plugins/timeline.styl

@@ -20,13 +20,15 @@
     &:before
       display: none
 
-.tag-plugin.timeline .timenode
+.md .tag-plugin.timeline .timenode
   position: relative
   display: flex
   flex-direction: column
   align-items: flex-start
-  max-width: 'calc(100% - %s)' % 1rem
+  box-sizing: border-box
+  max-width: 100%
   >.header, >.body
+    box-sizing: border-box
     max-width: @max-width
   &[highlight] .header:before
     background: $color-theme
@@ -50,6 +52,7 @@
   align-items: center
   position: relative
   margin: 0.25rem 0
+  font-size: $fs-12
   .user-info 
     display: flex
     align-items: center
@@ -70,13 +73,14 @@
       object-fit: contain
     &:hover
       background: $color-hover
-  p
-    margin: 0
-    font-size: $fs-12
+  &,p  
     font-weight: 500
     color: var(--text-p3)
     trans1 color
     line-height: 1
+  p
+    margin: 0 !important
+    font-size: $fs-12 !important
     a
       color: inherit
       font-weight: inherit
@@ -116,20 +120,25 @@
   p.title 
     font-size: 1rem
     font-weight: 700
-    margin: 0
-    padding: 0.5rem 0 0.75rem
+    margin: 0.5rem 0 0.75rem
     line-height: 1.25
-    border-bottom: 1px dashed var(--block-border)
     a 
       color: inherit
       &:hover
         color: $color-hover
+  a
+    &:has(img):after
+      display: none
+    img  
+      margin: 0 auto
+  img
+    margin: 0.5rem auto
   pre code 
     font-size: $fs-12
 
 .tag-plugin.timeline.stellar-timeline-api .body .footer
+  margin: 0 0 -0.5rem
   padding: 0.5rem 0 1rem
-  margin-bottom: -0.5rem
   user-select: none
   font-weight: 500
   display: flex

package/source/css/_plugins/comments/twikoo.styl

@@ -106,10 +106,16 @@
   .tk-comments-no
     color: var(--text-p1);
 
+set_darkmode_comments()
+  .cmt-body.twikoo
+    --twikoo-lighttext: #f2b94b;
+    --twikoo-secondtext: #a1a2b8;
+    --twikoo-emoji-background: darken($dark-block, 1);
+    --twikoo-theme: #409eff;
+
 if hexo-config('style.darkmode') == 'auto'
   @media (prefers-color-scheme: dark)
-    .cmt-body.twikoo
-      --twikoo-lighttext: #f2b94b;
-      --twikoo-secondtext: #a1a2b8;
-      --twikoo-emoji-background: darken($dark-block, 1);
-      --twikoo-theme: #409eff;
+    set_darkmode_comments()
+
+if hexo-config('style.darkmode') == 'always'
+  set_darkmode_comments()

package/source/css/_plugins/comments/valine.styl

@@ -49,12 +49,16 @@
             if hexo-config('style.darkmode') == 'auto'
               @media (prefers-color-scheme: dark)
                 box-shadow: none
+            if hexo-config('style.darkmode') == 'always'
+              box-shadow: none
           &:active
             background: linear-gradient(145deg, #eee, #fff)
             box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), -0px -0px 0px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 1), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
             if hexo-config('style.darkmode') == 'auto'
               @media (prefers-color-scheme: dark)
                 box-shadow: none
+            if hexo-config('style.darkmode') == 'always'
+              box-shadow: none
       .vedit
         .vctrl span
           padding: 0

package/source/css/_plugins/comments/waline.styl

@@ -6,7 +6,7 @@
   --waline-dark-grey: #666;
   /* 主题色 */
   --waline-theme-color: $color-theme;
-  --waline-active-color: #2ecc71;
+  --waline-active-color: $color-hover;
   /* 布局颜色 */
   --waline-color: #444;
   --waline-bgcolor: #fff;

package/source/js/main.js

@@ -217,14 +217,20 @@ if (stellar.plugins.lazyload) {
 if (stellar.plugins.stellar) {
   for (let key of Object.keys(stellar.plugins.stellar)) {
     let js = stellar.plugins.stellar[key];
-    const els = document.getElementsByClassName('stellar-' + key + '-api');
-    if (els != undefined && els.length > 0) {
-      stellar.jQuery(() => {
-        stellar.loadScript(js, { defer: true });
-        if (key == 'timeline') {
-          stellar.loadScript(stellar.plugins.marked);
-        }
-      })
+    if (key == 'linkcard') {
+      stellar.loadScript(js, { defer: true }).then(function () {
+        setCardLink(document.querySelectorAll('a.link-card'));
+      });
+    } else {
+      const els = document.getElementsByClassName('stellar-' + key + '-api');
+      if (els != undefined && els.length > 0) {
+        stellar.jQuery(() => {
+          stellar.loadScript(js, { defer: true });
+          if (key == 'timeline') {
+            stellar.loadScript(stellar.plugins.marked);
+          }
+        })
+      }
     }
   }
 }

package/source/js/plugins/friends.js

@@ -44,7 +44,7 @@ const friendsjs = {
   },
   layout: (cfg) => {
     const el = $(cfg.el)[0];
-    $(el).append('<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>');
+    $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     friendsjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
       const arr = data.content || data;
@@ -60,7 +60,8 @@ const friendsjs = {
       });
     }, function() {
       $(el).find('.loading-wrap svg').remove();
-      $(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
+      $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
+      $(el).find('.loading-wrap').addClass('error');
     });
   },
 }

package/source/js/plugins/ghinfo.js

@@ -44,13 +44,25 @@ const GitHubInfo = {
   },
   layout: (cfg) => {
     const el = $(cfg.el)[0];
-    GitHubInfo.requestAPI(cfg.api, function(data) {
-      const arr = data.content || data;
+    function fill(data) {
       for (let key of Object.keys(data)) {
         $(el).find("[type=text]#" + key).text(data[key]);
         $(el).find("[type=link]#" + key).attr("href", data[key]);
         $(el).find("[type=img]#" + key).attr("src", data[key]);
       }
+    }
+    GitHubInfo.requestAPI(cfg.api, function(data) {
+      const idx = el.getAttribute('index');
+      if (idx != undefined) {
+        const arr = data.content || data;
+        if (arr && arr.length > idx) {
+          let obj = arr[idx];
+          obj['latest-tag-name'] = obj['name'];
+          fill(arr[idx]);
+        }
+      } else {
+        fill(data);
+      }
     }, function() {
     });
   },

package/source/js/plugins/linkcard.js

@@ -0,0 +1,124 @@
+// 本插件由CardLink定制而成，原项目源码: https://github.com/Lete114/CardLink
+
+var cardLink = {};
+cardLink.caches = {};
+cardLink.server = 'https://api.allorigins.win/raw?url=';
+
+/**
+ * Remove '/' and '/index.html'
+ * @param {String} params
+ * @returns { String }
+ */
+function indexHandler(params) {
+  let path = params.replace(/(\/index\.html|\/)*$/gi, '')
+  if (path.length === 0) path += '/'
+  return path
+}
+
+/**
+ * Determine if it is a ['https://', 'http://', '//'] protocol
+ * @param {String} url Website url
+ * @returns {Boolean}
+ */
+function isHttp(url) {
+  return /^(https?:)?\/\//g.test(url)
+}
+
+function renderer(el, obj) {
+  if (obj.title && obj.title.length > 0) {
+    el.querySelector('.title').innerHTML = obj.title;
+  }
+  if (obj.icon && obj.icon.length > 0) {
+    el.querySelector('.img').style = 'background-image: url("' + obj.icon + '");';
+  }
+  let desc = el.querySelector('.desc');
+  if (desc && obj.desc && obj.desc.length > 0) {
+    desc.innerHTML = obj.desc;
+  }
+}
+
+/**
+ * Get info
+ * @param {Element} el Element
+ * @param {String} html String type html
+ * @param {String} link Website address
+ */
+// eslint-disable-next-line max-statements
+function getInfo(el, html, link) {
+  try {
+    let title, icon, desc
+    const doc = new DOMParser().parseFromString(html, 'text/html')
+    // If there is no title, no card link is generated
+    title = doc.querySelector('title')
+    if (title) {
+      title = title.textContent
+
+      // Get the src of the first img tag in the body tag
+      let tmp = doc.querySelector('head link[rel="apple-touch-icon"]')
+      if (!tmp) {
+        tmp = doc.querySelector('head link[rel="icon"]')
+      }
+      icon = tmp && tmp.getAttribute('href')
+
+      if (/^data:image/.test(icon)) icon = ''
+
+      // If there is no src then get the site icon
+      if (!icon) {
+        const links = [].slice.call(doc.querySelectorAll('link[rel][href]'))
+        icon = links.find((_el) => _el.rel.includes('icon'))
+        icon = icon && icon.getAttribute('href')
+      }
+      
+      desc = doc.querySelector('head meta[name="description"]')
+
+      if (desc) {
+        desc = desc.content;
+      }
+      // If `icon` is not the ['https://', 'http://', '//'] protocol, splice on the `origin` of the a tag
+      if (icon && !isHttp(icon)) icon = new URL(link).origin + icon
+      cardLink.caches[link] = { title, link, icon, desc }
+      
+      renderer(el, cardLink.caches[link])
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn('CardLink Error: Failed to parse', error)
+  }
+}
+
+function fetchPage(link, callback) {
+  fetch(link)
+    .then((result) => result.text())
+    .then(callback)
+    .catch((error) => {
+      const server = cardLink.server
+      // eslint-disable-next-line no-console
+      if (link.includes(server) || !server) return console.error('CardLink Error:', error)
+      fetchPage(server + link, callback)
+    })
+}
+
+/**
+ * Create card links
+ * @param {NodeList} nodes A collection of nodes or a collection of arrays,
+ * if it is an array then the array must always contain node element
+ */
+function setCardLink(nodes) {
+  // If the `nodes` do not contain a `forEach` method, then the default `a[cardlink]` is used
+  nodes = 'forEach' in (nodes || {}) ? nodes : document.querySelectorAll('a[cardlink]')
+  nodes.forEach((el) => {
+    // If it is not a tag element then it is not processed
+    if (el.nodeType !== 1) return
+    el.removeAttribute('cardlink')
+    const link = el.href
+
+    const cache = cardLink.caches[link]
+    if (cache) return renderer(el, cache)
+
+    if (isHttp(link)) {
+      fetchPage(link, (html) => {
+        getInfo(el, html, link)
+      })
+    }
+  })
+}

package/source/js/plugins/sites.js

@@ -44,14 +44,14 @@ const sitesjs = {
   },
   layout: (cfg) => {
     const el = $(cfg.el)[0];
-    $(el).append('<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>');
+    $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     sitesjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
       const arr = data.content;
       arr.forEach((item, i) => {
         var cell = '<div class="site-card">';
         cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + item.url + '">';
-        cell += '<img src="' + (item.screenshot || ('https://image.thum.io/get/width/1024/crop/768/' + item.url)) + '" onerror="javascript:this.src=\'' + cfg.screenshot + '\';"/>';
+        cell += '<img src="' + (item.screenshot || ('https://screenshot-api.xaoxuu.com/api?url=' + item.url + '&width=1280&height=720')) + '" onerror="javascript:this.src=\'' + cfg.screenshot + '\';"/>';
         cell += '<div class="info">';
         cell += '<img src="' + (item.avatar || cfg.avatar) + '" onerror="javascript:this.src=\'' + cfg.avatar + '\';"/>';
         cell += '<span class="title">' + item.title + '</span>';
@@ -63,7 +63,8 @@ const sitesjs = {
       });
     }, function() {
       $(el).find('.loading-wrap svg').remove();
-      $(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
+      $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
+      $(el).find('.loading-wrap').addClass('error');
     });
   },
 }

package/source/js/plugins/timeline.js

@@ -54,20 +54,24 @@ const StellarTimeline = {
   },
   layoutDiv: (cfg) => {
     const el = $(cfg.el)[0];
-    $(el).append('<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>');
+    $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     StellarTimeline.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
-      const user = el.getAttribute('user');
       const arr = data.content || data;
+      var users = [];
+      const filter = el.getAttribute('user');
+      if (filter && filter.length > 0) {
+        users = filter.split(",");
+      }
       arr.forEach((item, i) => {
-        if (item.user && item.user.login && user && user.length > 0) {
-          if (!user.includes(item.user.login)) {
+        if (item.user && item.user.login && users.length > 0) {
+          if (!users.includes(item.user.login)) {
             return;
           }
         }
         var cell = '<div class="timenode" index="' + i + '">';
         cell += '<div class="header">';
-        if (!user && item.user) {
+        if (!users.length && item.user) {
           cell += '<a class="user-info" href="' + item.user.html_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
           cell += '<img src="' + item.user.avatar_url + '">';
           cell += '<span>' + item.user.login + '</span>';
@@ -123,7 +127,8 @@ const StellarTimeline = {
       });
     }, function() {
       $(el).find('.loading-wrap svg').remove();
-      $(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
+      $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
+      $(el).find('.loading-wrap').addClass('error');
     });
   },
 }