hexo-theme-linen 1.0.44 → 1.0.46

package/layout/post.ejs

@@ -6,7 +6,7 @@
     const coverImgStartTime = performance.now();
     setTimeout(() => {
       const postCoverImg = document.getElementById('postCoverImg');
-      if (postCoverImg && (!postCoverImg.classList.contains('loaded') || postCoverImg.classList.contains('cached'))) {
+      if (postCoverImg && !postCoverImg.classList.contains('loaded') && !postCoverImg.classList.contains('cached')) {
         postCoverImg.classList.add('loading')
       }
     }, 100);
@@ -201,10 +201,10 @@ const seriesInfo = getSeriesInfo(page?.series);
     }
     const link = document.createElement("link");
     link.rel = "stylesheet";
-    link.href = "<%=url_for('/linen-theme/js/gitalk/gitalk.css')%>";
+    link.href = "<%=url_for(`/linen-theme/js/gitalk/gitalk.css?v=${theme.version}-gitalk`)%>";
     document.head.appendChild(link);
     const script = document.createElement("script");
-    script.src = "<%=url_for('/linen-theme/js/gitalk/gitalk.min.js')%>";
+    script.src = "<%=url_for(`/linen-theme/js/gitalk/gitalk.min.js?v=${theme.version}-gitalk`)%>";
     const pageId = location.pathname.length > 40 ? hashPathname(location.pathname) : location.pathname;
     console.log(`GitTalk page ID: ${pageId}`);
     script.onload = function() {
@@ -223,6 +223,41 @@ const seriesInfo = getSeriesInfo(page?.series);
       });
 
       gitalk.render("gitalk-container");
+
+      var container = document.getElementById("gitalk-container");
+      if (container) {
+        var expandComment = function() {
+          var comment = container.querySelector(".gt-header-comment");
+          if (comment && !comment.classList.contains("is-expanded")) {
+            comment.classList.add("is-expanded");
+          }
+        };
+
+        // Focus the textarea and expand when clicking on the comment box wrapper
+        container.addEventListener("click", function(e) {
+          var comment = e.target.closest(".gt-header-comment");
+          if (comment) {
+            expandComment();
+            if (e.target === comment) {
+              var textarea = comment.querySelector(".gt-header-textarea");
+              if (textarea) textarea.focus();
+            }
+          }
+        });
+
+        // Expand once interacted with and keep expanded permanently
+        container.addEventListener("focusin", function(e) {
+          if (e.target && e.target.classList.contains("gt-header-textarea")) {
+            expandComment();
+          }
+        });
+
+        container.addEventListener("input", function(e) {
+          if (e.target && e.target.classList.contains("gt-header-textarea")) {
+            expandComment();
+          }
+        });
+      }
     };
     document.body.appendChild(script);
     $gitalkInitiated = true;

package/layout/series.ejs

@@ -51,7 +51,7 @@ const travelPlacesJson = encodeURIComponent(JSON.stringify(travelPlaces));
       const coverImgStartTime = Date.now();
       setTimeout(() => {
         const seriesCoverImg = document.getElementById('seriesCoverImg');
-        if (seriesCoverImg && (!seriesCoverImg.classList.contains('loaded') || seriesCoverImg.classList.contains('cached'))) {
+        if (seriesCoverImg && !seriesCoverImg.classList.contains('loaded') && !seriesCoverImg.classList.contains('cached')) {
           seriesCoverImg.classList.add('loading')
         }
       }, 100);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-linen",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "A clean Hexo theme",
   "main": "index.js",
   "homepage": "https://github.com/lynanbreeze/hexo-theme-linen",

package/scripts/lazyload/client.js

@@ -224,9 +224,12 @@
       var showTransition =
         !window.$lazyload || window.$lazyload.showTransition !== false;
       var clearPlaceholder = function clearPlaceholder() {
+        // Keep the placeholder underneath by default to prevent blank frames or flashes
+        // caused by asynchronous GPU decoding and rasterization delays.
         var keepPlaceholder =
           element.getAttribute("data-hdr-active") === "true" ||
-          (window.$lazyload && window.$lazyload.keepPlaceholder === true);
+          !window.$lazyload ||
+          window.$lazyload.keepPlaceholder !== false;
         if (!keepPlaceholder) {
           element.children[0].classList.add("loaded");
         }
@@ -247,6 +250,18 @@
             return;
           }
           revealedSource = source;
+
+          // If the resource finishes loading while off-screen, skip the opacity
+          // transition to prevent deferred animations and visual flashes when
+          // the element scrolls into the viewport.
+          var rect = element.getBoundingClientRect();
+          var inViewport =
+            rect.bottom > 0 &&
+            rect.top < (window.innerHeight || document.documentElement.clientHeight);
+          if (!inViewport) {
+            resourceElement.style.transition = "none";
+          }
+
           // The inline opacity is already 0 and the inline transition is set
           // before insertion, so the next frame can reveal without forcing a
           // synchronous layout for every image.

package/scripts/lazyload/config.js

@@ -6,5 +6,6 @@ module.exports.defaultConfig = {
     placeholderRatio: 3 / 2,
     showTransition: true,
     showAltText: true,
-    preloadCount: 5
+    preloadCount: 5,
+    keepPlaceholder: true
 }

package/scripts/lazyload/inject.js

@@ -14,6 +14,7 @@ module.exports = function (hexo) {
       placeholderRatio,
       showTransition,
       preloadCount,
+      keepPlaceholder: configKeepPlaceholder,
     } = {
       ...defaultConfig,
       ...(hexo?.config?.theme_config?.lazyload || {}),
@@ -154,7 +155,7 @@ module.exports = function (hexo) {
     preloadCount: ${preloadCount},
     showTransition: ${showTransition},
     keepPlaceholder: ${
-      page?.lazyload?.keepPlaceholder ?? false
+      page?.lazyload?.keepPlaceholder ?? configKeepPlaceholder ?? true
     }}</script>`;
 
     const injectExtraScript = function (filePath) {

package/source/linen-theme/css/font-version.scss

@@ -1 +1 @@
-$font-version: "14701164";
+$font-version: "a80a526b";

package/source/linen-theme/css/linen.scss

@@ -1547,6 +1547,10 @@ body {
       }
     }
     #gitalk-container {
+      --gt-avatar-size: 2.25rem;
+      @media (max-width: 479px) {
+        --gt-avatar-size: 2rem;
+      }
       margin-top: $postWidgetGap;
       padding: 0 $commonPadding;
       background-color: #fff;
@@ -1567,11 +1571,11 @@ body {
       .gt-comments {
         padding-top: $commonPadding;
         .gt-comment {
-          --comment-content-indent: calc(3.125em + 1em);
+          --comment-content-indent: calc(var(--gt-avatar-size) + 1rem);
           display: grid;
-          grid-template-columns: 3.125em minmax(0, 1fr);
+          grid-template-columns: var(--gt-avatar-size) minmax(0, 1fr);
           grid-template-rows: auto auto auto auto;
-          column-gap: 1em;
+          column-gap: 1rem;
           align-items: start;
           padding: 1.5em 0;
           border-bottom: solid 1px rgb(242, 242, 242);
@@ -1585,9 +1589,15 @@ body {
           grid-column: 1;
           grid-row: 1 / span 2;
           align-self: center;
+          width: var(--gt-avatar-size);
+          height: var(--gt-avatar-size);
           border-radius: 50%;
 
           img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
             border-radius: 50%;
           }
         }
@@ -1606,7 +1616,7 @@ body {
           grid-row: 1;
           line-height: 1.5;
           position: relative;
-          top: 2px;
+          top: 0;
         }
         .gt-comment-text {
           display: none;
@@ -1615,7 +1625,7 @@ body {
           grid-column: 2;
           grid-row: 2;
           position: relative;
-          top: 2px;
+          top: 0;
           margin: 0.2em 0 0;
         }
         .gt-comment-body {
@@ -1637,7 +1647,7 @@ body {
           height: 1.5em;
           line-height: 1;
           margin-top: 1.1em;
-          transform: translateX(calc(-1 * var(--comment-content-indent) - 0.5em));
+          transform: translateX(calc(-1 * var(--comment-content-indent)));
         }
         .gt-comment-edit,
         .gt-comment-reply {
@@ -1653,6 +1663,9 @@ body {
           margin: 1.1em 0 0 2em;
           transform: translateX(calc(-1 * var(--comment-content-indent)));
         }
+        .gt-comment-reply {
+          margin-left: 3em;
+        }
         .gt-comment-like .gt-ico-heart {
           display: inline-flex;
           align-items: center;
@@ -1668,8 +1681,12 @@ body {
             }
           }
 
+          &.is-reacted .gt-svg {
+            background-image: url("../img/icons/medium-clap-reacted.svg");
+          }
+
           .gt-ico-text {
-            margin-left: 0.5em;
+            margin-left: 0.25em;
             color: #6b6b6b;
           }
         }
@@ -1713,13 +1730,13 @@ body {
         }
         @media (max-width: 479px) {
           .gt-comment {
-            --comment-content-indent: calc(2.75em + 0.875em);
-            grid-template-columns: 2.75em minmax(0, 1fr);
-            column-gap: 0.875em;
+            --comment-content-indent: calc(var(--gt-avatar-size) + 0.875rem);
+            grid-template-columns: var(--gt-avatar-size) minmax(0, 1fr);
+            column-gap: 0.875rem;
           }
           .gt-comment-avatar {
-            width: 2.75em;
-            height: 2.75em;
+            width: var(--gt-avatar-size);
+            height: var(--gt-avatar-size);
           }
         }
         a:not([class]) {
@@ -1778,14 +1795,23 @@ body {
       .gt-header-avatar,
       .gt-comment-avatar {
         background-color: #f5f5f5;
+        border-radius: 50%;
+
+        img {
+          border-radius: 50%;
+        }
       }
       .user-mention {
         color: $darkText;
-        text-decoration: underline;
+        text-decoration: none;
         @include defaultFont;
         text-underline-offset: 0.2rem;
         font-weight: 500;
         font-size: 14px;
+
+        &:hover {
+          text-decoration: underline;
+        }
       }
       .gt-comments-controls {
         margin-top: 0.625em;
@@ -1812,6 +1838,9 @@ body {
           }
         }
       }
+      .gt-header-comment {
+        border-radius: 2px;
+      }
       .gt-header-textarea {
         border: none;
         border-radius: 2px;
@@ -2334,7 +2363,7 @@ body {
             .copyright-popover-content {
               position: absolute;
               bottom: 100%;
-              right: -15px;
+              right: -30px;
               margin-bottom: 10px;
               width: 280px;
               max-width: calc(100vw - 32px);
@@ -2391,7 +2420,7 @@ body {
               .copyright-popover-arrow {
                 position: absolute;
                 bottom: -5px;
-                right: 20px;
+                right: 35px;
                 transform: rotate(45deg);
                 width: 8px;
                 height: 8px;

package/source/linen-theme/img/icons/medium-clap-reacted.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-label="clap"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.3694 0.827581L12 3.2822L12.6306 0.827581H11.3694Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.4213 1.84055L14.2362 1.45158L13.8985 3.95255L15.4213 1.84055Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.75726 1.45158L8.57299 1.84055L10.0957 3.95255L9.75726 1.45158Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.2527 11.8403L17.7509 7.43751C17.5134 7.08496 17.1807 6.85406 16.8215 6.79531C16.6901 6.77166 16.5551 6.77571 16.4253 6.8072C16.2955 6.8387 16.1736 6.89694 16.0676 6.9782C15.8218 7.16937 15.6753 7.40441 15.6248 7.67338C15.6389 7.69158 15.6546 7.70648 15.6687 7.72551L18.0215 11.8643C19.6353 14.8138 19.1206 17.635 16.4963 20.2593C16.351 20.4041 16.1994 20.5424 16.042 20.6739C17.0392 20.5448 17.9686 20.064 18.8152 19.2174C21.5197 16.5128 21.3319 13.632 20.2527 11.8403Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0662 9.00993C11.9371 8.32303 12.1457 7.71144 12.6389 7.23724L10.5766 5.17406C10.1628 4.75696 9.43615 4.75696 9.02152 5.17406C8.87421 5.32303 8.79559 5.5051 8.74925 5.69544L12.0662 9.00993Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14.741 8.30896C14.5606 8.04165 14.2949 7.85379 14.0127 7.80745C13.92 7.79004 13.8246 7.79232 13.7328 7.81414C13.641 7.83595 13.5548 7.87681 13.4797 7.93407C13.3341 8.04745 12.8897 8.39172 13.2811 9.23007L14.4646 11.7335C14.5106 11.7795 14.546 11.8349 14.5684 11.896C14.5907 11.9571 14.5994 12.0224 14.5939 12.0872C14.5884 12.152 14.5687 12.2148 14.5363 12.2712C14.504 12.3276 14.4596 12.3763 14.4065 12.4138C14.3533 12.4513 14.2926 12.4767 14.2286 12.4882C14.1646 12.4998 14.0988 12.4972 14.0359 12.4806C13.973 12.464 13.9145 12.4339 13.8644 12.3924C13.8144 12.3508 13.774 12.2988 13.7462 12.24L7.61381 6.10593C7.53801 6.03012 7.44801 5.96999 7.34897 5.92897C7.24993 5.88794 7.14377 5.86683 7.03657 5.86683C6.92936 5.86683 6.82321 5.88794 6.72417 5.92897C6.62512 5.96999 6.53513 6.03012 6.45933 6.10593C6.38352 6.18173 6.32339 6.27173 6.28237 6.37077C6.24134 6.46981 6.22023 6.57597 6.22023 6.68317C6.22023 6.79037 6.24134 6.89653 6.28237 6.99557C6.32339 7.09461 6.38352 7.18461 6.45933 7.26041L10.1015 10.9043C10.1429 10.9457 10.1758 10.9948 10.1982 11.0489C10.2206 11.103 10.2321 11.161 10.2321 11.2196C10.2321 11.2781 10.2206 11.3361 10.1982 11.3902C10.1758 11.4443 10.1429 11.4935 10.1015 11.5349C10.0601 11.5763 10.011 11.6091 9.95687 11.6316C9.90277 11.654 9.84478 11.6655 9.78622 11.6655C9.72766 11.6655 9.66968 11.654 9.61558 11.6316C9.56148 11.6091 9.51232 11.5763 9.47091 11.5349L5.83119 7.89517L4.80167 6.86482C4.64816 6.7122 4.44049 6.62653 4.22402 6.62653C4.00755 6.62653 3.79987 6.7122 3.64636 6.86482C3.57014 6.94031 3.50964 7.03016 3.46835 7.12916C3.42706 7.22817 3.4058 7.33438 3.4058 7.44165C3.4058 7.54892 3.42706 7.65513 3.46835 7.75414C3.50964 7.85315 3.57014 7.94299 3.64636 8.01848L4.6734 9.04551L8.31643 12.6894C8.35789 12.7307 8.39079 12.7797 8.41324 12.8338C8.43569 12.8878 8.44725 12.9458 8.44725 13.0043C8.44725 13.0628 8.43569 13.1207 8.41324 13.1748C8.39079 13.2288 8.35789 13.2779 8.31643 13.3192C8.27524 13.361 8.22615 13.3941 8.17202 13.4168C8.11789 13.4394 8.0598 13.4511 8.00112 13.4511C7.94244 13.4511 7.88435 13.4394 7.83022 13.4168C7.77609 13.3941 7.727 13.3508 7.68581 13.3192L3.79367 12.9964C3.71811 12.9202 3.6282 12.8597 3.52912 12.8184C3.43005 12.7771 3.32377 12.7558 3.21643 12.7558C3.10909 12.7558 3.00281 12.7771 2.90374 12.8184C2.80466 12.8597 2.71475 12.9202 2.63919 12.9964C2.48662 13.1498 2.40097 13.3573 2.40097 13.5737C2.40097 13.79 2.48662 13.9975 2.63919 14.1509L7.04195 18.5537C9.83174 21.3443 12.5371 22.6725 15.7233 19.4855C17.9917 17.2138 18.4312 14.8965 17.0648 12.3989L14.7402 8.30896H14.741Z"></path></svg>