hexo-theme-linen 1.0.45 → 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);
@@ -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.45",
+  "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/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 {
@@ -1720,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]) {
@@ -2353,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);
@@ -2410,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/js/gitalk/gitalk.css

@@ -1250,9 +1250,10 @@
 /*# sourceMappingURL=gitalk.css.map*/
 /* Comment composer follows a heading, account row, and full-width editor. */
 #gitalk-container .gt-container {
+  --gt-avatar-size: 2.25rem;
   position: relative;
   display: grid;
-  grid-template-columns: 3.125em minmax(0, 1fr);
+  grid-template-columns: var(--gt-avatar-size) minmax(0, 1fr);
   column-gap: 0.75rem;
   row-gap: 0;
 }
@@ -1303,40 +1304,69 @@
   grid-column: 1;
   grid-row: 2;
   align-self: center;
-  width: 3.125em;
-  height: 3.125em;
+  display: block;
+  width: var(--gt-avatar-size);
+  height: var(--gt-avatar-size);
   margin: 0;
   border-radius: 50%;
 }
 
 #gitalk-container .gt-container .gt-header-avatar img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   border-radius: 50%;
 }
 
 #gitalk-container .gt-container .gt-avatar-github {
-  display: inline-block;
+  display: block;
   grid-column: 1;
   grid-row: 2;
   align-self: center;
-  width: 3.125em;
-  height: 3.125em;
+  width: var(--gt-avatar-size);
+  height: var(--gt-avatar-size);
   margin: 0;
 }
 
+#gitalk-container .gt-container .gt-avatar-github svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 #gitalk-container .gt-container .gt-header-comment {
+  position: relative;
   grid-column: 1 / -1;
   grid-row: 3;
   min-width: 0;
   margin: 0.75rem 0 0;
-  padding: 0.75rem;
+  padding: 0.75rem 1rem;
   border-radius: 2px;
   background: #f5f5f5;
+  cursor: text;
+  transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+#gitalk-container .gt-container .gt-header-textarea {
+  min-height: 1.5em;
+  max-height: 1.5em;
+  height: 1.5em;
+  line-height: 1.5;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  font: inherit;
+  resize: none;
+  overflow: hidden;
+  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+              min-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-#gitalk-container .gt-container .gt-header-textarea,
 #gitalk-container .gt-container .gt-header-preview {
   min-height: 7.5rem;
-  padding: 0.25rem;
+  padding: 0;
   border: 0;
   border-radius: 0;
   background: transparent;
@@ -1347,16 +1377,42 @@
   background: transparent;
 }
 
+/* Hide controls by default in single-line collapsed state; animate reveal on expansion. */
 #gitalk-container .gt-container .gt-header-controls {
   display: flex;
-  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  align-items: flex-end;
   justify-content: flex-end;
   gap: 0.75rem;
-  margin: 0.5rem 0 0;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden;
+  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+              margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+              visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* Prevent Gitalk's float-clearing pseudo elements from shifting flex actions. */
+#gitalk-container .gt-container .gt-header-controls::before,
+#gitalk-container .gt-container .gt-header-controls::after {
+  display: none;
+  content: none;
+}
+
+/* Pin the Markdown hint to the panel's lower-left inset. */
 #gitalk-container .gt-container .gt-header-controls-tip {
-  margin-right: auto;
+  position: absolute;
+  left: 0;
+  bottom: -0.25rem;
+  margin: 0;
+  line-height: 1.5;
   color: #777;
 }
 
@@ -1366,6 +1422,36 @@
   margin: 0;
 }
 
+/* Expanded state: when focused, containing content, in preview mode, or explicitly toggled. */
+#gitalk-container .gt-container .gt-header-comment:focus-within,
+#gitalk-container .gt-container .gt-header-comment:has(.gt-header-textarea:not(:placeholder-shown)),
+#gitalk-container .gt-container .gt-header-comment:has(.gt-header-preview:not(.hide)),
+#gitalk-container .gt-container .gt-header-comment.is-expanded {
+  padding: 1rem;
+}
+
+#gitalk-container .gt-container .gt-header-comment:focus-within .gt-header-textarea,
+#gitalk-container .gt-container .gt-header-comment:has(.gt-header-textarea:not(:placeholder-shown)) .gt-header-textarea,
+#gitalk-container .gt-container .gt-header-comment:has(.gt-header-preview:not(.hide)) .gt-header-textarea,
+#gitalk-container .gt-container .gt-header-comment.is-expanded .gt-header-textarea {
+  height: 7.5rem;
+  min-height: 7.5rem;
+  max-height: none;
+  resize: none;
+  overflow: auto;
+}
+
+#gitalk-container .gt-container .gt-header-comment:focus-within .gt-header-controls,
+#gitalk-container .gt-container .gt-header-comment:has(.gt-header-textarea:not(:placeholder-shown)) .gt-header-controls,
+#gitalk-container .gt-container .gt-header-comment:has(.gt-header-preview:not(.hide)) .gt-header-controls,
+#gitalk-container .gt-container .gt-header-comment.is-expanded .gt-header-controls {
+  max-height: 6rem;
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+  margin-top: 0.75rem;
+}
+
 #gitalk-container .gt-container .gt-comments {
   grid-column: 1 / -1;
   grid-row: 4;
@@ -1373,23 +1459,40 @@
 
 @media (max-width: 479px) {
   #gitalk-container .gt-container {
-    grid-template-columns: 2.75em minmax(0, 1fr);
+    --gt-avatar-size: 2rem;
+    grid-template-columns: var(--gt-avatar-size) minmax(0, 1fr);
     column-gap: 0.875em;
   }
 
   #gitalk-container .gt-container .gt-header-avatar {
-    width: 2.75em;
-    height: 2.75em;
+    width: var(--gt-avatar-size);
+    height: var(--gt-avatar-size);
   }
 
   #gitalk-container .gt-container .gt-avatar-github {
-    width: 2.75em;
-    height: 2.75em;
+    width: var(--gt-avatar-size);
+    height: var(--gt-avatar-size);
+  }
+
+  #gitalk-container .gt-container .gt-header-comment {
+    padding: 0.75rem 0.875rem;
+  }
+
+  #gitalk-container .gt-container .gt-header-comment:focus-within,
+  #gitalk-container .gt-container .gt-header-comment:has(.gt-header-textarea:not(:placeholder-shown)),
+  #gitalk-container .gt-container .gt-header-comment:has(.gt-header-preview:not(.hide)),
+  #gitalk-container .gt-container .gt-header-comment.is-expanded {
+    padding: 0.875rem;
   }
 
   #gitalk-container .gt-container .gt-header-controls {
     flex-wrap: wrap;
   }
+
+  #gitalk-container .gt-container .gt-header-controls-tip {
+    left: 0;
+    bottom: -0.25rem;
+  }
 }
 
 
@@ -1400,38 +1503,16 @@
 
 #gitalk-container .gt-container .gt-popup {
   position: absolute;
-  top: calc(1rem + 2rem + 0.75rem + 3.125rem - 0.75rem);
+  top: calc(1rem + 2rem + 0.75rem + var(--gt-avatar-size) - 0.75rem);
   right: auto;
-  left: 3.875rem;
+  left: calc(var(--gt-avatar-size) + 0.75rem);
   z-index: 22;
 }
 
-/* Use one consistent inset around the editor content and action row. */
-#gitalk-container .gt-container .gt-header-comment {
-  padding: 1rem;
-}
-
-#gitalk-container .gt-container .gt-header-textarea,
-#gitalk-container .gt-container .gt-header-preview {
-  padding: 0;
-}
-
-#gitalk-container .gt-container .gt-header-controls {
-  margin: 0;
-}
-
-#gitalk-container .gt-container .gt-header-controls .gt-btn {
-  margin: 0;
-}
-
 @media (max-width: 479px) {
   #gitalk-container .gt-container .gt-popup {
-    top: calc(1rem + 2rem + 0.75rem + 2.75rem - 0.75rem);
-    left: 3.625rem;
-  }
-
-  #gitalk-container .gt-container .gt-header-comment {
-    padding: 0.875rem;
+    top: calc(1rem + 2rem + 0.75rem + var(--gt-avatar-size) - 0.75rem);
+    left: calc(var(--gt-avatar-size) + 0.875rem);
   }
 }
 
@@ -1452,58 +1533,11 @@
   margin: 0.625em 0 0;
 }
 
-/* Prevent Gitalk's float-clearing pseudo elements from shifting flex actions. */
-#gitalk-container .gt-container .gt-header-controls::before,
-#gitalk-container .gt-container .gt-header-controls::after {
-  display: none;
-  content: none;
-}
-
-#gitalk-container .gt-container .gt-header-controls {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 0;
-}
-
-#gitalk-container .gt-container .gt-header-controls {
-  align-items: flex-end;
-}
-
-/* Pin the Markdown hint to the panel's lower-left inset. */
-#gitalk-container .gt-container .gt-header-comment {
-  position: relative;
-}
-
-#gitalk-container .gt-container .gt-header-controls-tip {
-  position: absolute;
-  left: 0;
-  bottom: -0.25rem;
-  margin: 0;
-  line-height: 1.5;
-}
-
-@media (max-width: 479px) {
-  #gitalk-container .gt-container .gt-header-controls-tip {
-    left: 0;
-    bottom: -0.25rem;
-  }
-}
-
 #gitalk-container .gt-container .gt-popup,
 #gitalk-container .gt-container .gt-popup * {
   font-weight: 400;
 }
 
-#gitalk-container .gt-container .gt-popup {
-  top: calc(1rem + 2rem + 0.75rem + 3.125rem - 0.75rem);
-}
-
-@media (max-width: 479px) {
-  #gitalk-container .gt-container .gt-popup {
-    top: calc(1rem + 2rem + 0.75rem + 2.75rem - 0.75rem);
-  }
-}
-
 @media (min-width: 480px) {
   #gitalk-container .gt-container .gt-comment-body img {
     max-width: 50% !important;
@@ -1529,11 +1563,11 @@
 }
 
 #gitalk-container .gt-container .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: 1px solid #f2f2f2;
@@ -1548,10 +1582,17 @@
   grid-column: 1;
   grid-row: 1 / span 2;
   align-self: center;
+  display: block;
+  width: var(--gt-avatar-size);
+  height: var(--gt-avatar-size);
   border-radius: 50%;
 }
 
 #gitalk-container .gt-container .gt-comment-avatar img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   border-radius: 50%;
 }
 
@@ -1568,7 +1609,7 @@
 
 #gitalk-container .gt-container .gt-comment-username {
   position: relative;
-  top: 2px;
+  top: 0;
   grid-column: 2;
   grid-row: 1;
   line-height: 1.5;
@@ -1576,7 +1617,7 @@
 
 #gitalk-container .gt-container .gt-comment-date {
   position: relative;
-  top: 2px;
+  top: 0;
   grid-column: 2;
   grid-row: 2;
   margin: 0.2em 0 0;
@@ -1606,7 +1647,7 @@
 }
 
 #gitalk-container .gt-container .gt-comment-like {
-  transform: translateX(calc(-1 * var(--comment-content-indent) + 1em));
+  transform: translateX(calc(-1 * var(--comment-content-indent)));
 }
 
 #gitalk-container .gt-container .gt-comment-reply,
@@ -1620,9 +1661,9 @@
 
 @media (max-width: 479px) {
   #gitalk-container .gt-container .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;
   }
 }