Optimize link-grid & fix pandoc rendering error

scripts/tags/button.js

@@ -23,8 +23,8 @@ function postButton(args) {
   title = title.trim();
 
   return `<a class="btn" href="${url}"${title.length > 0 ? ` title="${title}"` : ''}>
-            ${icon.length > 0 ? `<i class="${icon}"></i>` : ''}${text}
-          </a>`;
+${icon.length > 0 ? `<i class="${icon}"></i>` : ''}${text}
+</a>`;
 }
 
 hexo.extend.tag.register('button', postButton, {ends: false});

scripts/tags/link-grid.js

@@ -1,16 +1,24 @@
+/**
+ * link-grid.js | https://theme-next.js.org/docs/tag-plugins/link-grid
+ */
+
 /* global hexo */
 
 'use strict';
 
 function linkGrid(args, content) {
+  const image     = args[0] || '/images/avatar.gif';
+  const delimiter = args[1] || '|';
+  const comment   = args[2] || '%';
+
   const links = content.split('\n').map(item => {
-    const args = item.split('|').map(arg => arg.trim());
-    if (args[0][0] === '%') return '';
-    return `<div>
-      <img src="${args[3] || '/images/avatar.gif'}" onerror="this.src='/images/avatar.gif';">
-      <p>${args[0]}</p><p>${args[2] || args[1]}</p>
-      <a href="${args[1]}"></a>
-    </div>`;
+    item = item.split(delimiter).map(arg => arg.trim());
+    if (item[0][0] === comment) return '';
+    return `<div class="link-grid-container">
+<div class="link-grid-image" style="background-image: url(${item[3] || image});"></div>
+<p>${item[0]}</p><p>${item[2] || item[1]}</p>
+<a href="${item[1]}"></a>
+</div>`;
   });
   return `<div class="link-grid">${links.join('')}</div>`;
 }

scripts/tags/mermaid.js

@@ -8,9 +8,9 @@
 
 function mermaid(args, content) {
   return `<pre class="mermaid" style="text-align: center;">
-            ${args.join(' ')}
-            ${content}
-          </pre>`;
+${args.join(' ')}
+${content}
+</pre>`;
 }
 
 hexo.extend.tag.register('mermaid', mermaid, {ends: true});

source/css/_common/scaffolding/tags/link-grid.styl

@@ -3,39 +3,39 @@
   grid-gap: 1.5rem 1.5rem;
   grid-template-columns: 1fr 1fr;
   padding: 1.5rem;
-  user-select: none;
 
   +mobile() {
     grid-template-columns: 1fr;
   }
 
-  div {
-    border: solid #ddd;
-    box-shadow: 1rem 1rem 0.5rem gray;
+  .link-grid-container {
+    border: solid $grey-lighter;
+    box-shadow: 1rem 1rem .5rem gray;
     height: 5rem;
-    transition: background 0.3s;
-    padding: 0.5rem;
+    padding: .5rem;
     position: relative;
+    transition: background .3s;
 
     &:hover {
-      animation: shake 0.5s;
-      background: rgba(230,244,250,.5);
+      animation: shake .5s;
+      background: rgba(230, 244, 250, .5);
     }
 
     &:active {
-      box-shadow: 0.5rem 0.5rem 0.25rem gray;
-      transform: translate(0.2rem, 0.2rem);
+      box-shadow: .5rem .5rem .25rem gray;
+      transform: translate(.2rem, .2rem);
     }
 
-    img {
-      border: 1px solid #ddd;
+    .link-grid-image {
+      background-clip: content-box;
+      background-origin: content-box;
+      background-size: cover;
+      border: 1px solid $grey-lighter;
       border-radius: 50%;
       box-sizing: border-box;
       height: 5rem;
-      left: 0.5rem;
       padding: 3px;
       position: absolute;
-      top: 0.5rem;
       width: 5rem;
     }
 
@@ -47,14 +47,14 @@
       }
 
       &:last-of-type {
-        font-size: 0.8em;
+        font-size: .8em;
         line-height: 1.3rem;
-        opacity: 0.7;
+        opacity: .7;
       }
     }
 
     a {
-      border: none;
+      border: 0;
       height: 100%;
       left: 0;
       position: absolute;