Merge remote-tracking branch 'upstream/master'

_includes/toc.html

@@ -3,7 +3,7 @@
 {% if enable_toc %}
   <div class="toc-border-cover z-3"></div>
   <section id="toc-wrapper" class="invisible position-sticky ps-0 pe-4 pb-4">
-    <h2 class="panel-heading ps-3 pb-2 mb-0">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+    <h2 class="panel-heading ps-3 pb-1 mb-0">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
   </section>
 {% endif %}

_javascript/modules/components/mermaid.js

@@ -11,8 +11,8 @@ function refreshTheme(event) {
     const mermaidList = document.getElementsByClassName(MERMAID);
 
     [...mermaidList].forEach((elem) => {
-      const svgCode = elem.previousSibling.children.item(0).innerHTML;
-      elem.innerHTML = svgCode;
+      const svgCode = elem.previousSibling.children.item(0).textContent;
+      elem.textContent = svgCode;
       elem.removeAttribute('data-processed');
     });
 

_sass/pages/_post.scss

@@ -220,14 +220,11 @@ header {
 @-webkit-keyframes fade-up {
   from {
     opacity: 0;
-    position: relative;
-    top: 2rem;
+    margin-top: 4rem;
   }
 
   to {
     opacity: 1;
-    position: relative;
-    top: 0;
   }
 }
 
@@ -247,6 +244,7 @@ header {
 %top-cover {
   content: '';
   display: block;
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   width: 100%;
@@ -258,16 +256,12 @@ header {
 #toc-wrapper {
   opacity: 0; /* Start hidden */
   top: 0;
-  transition: opacity 0.3s ease-in-out; /* Smooth opacity transition */
-  -webkit-animation: fade-up 0.3s;
-  animation: fade-up 0.3s;
+  transition: top 0.2s ease-in-out;
   overflow-y: auto;
   max-height: 100vh;
   scrollbar-width: none;
   margin-top: 2rem;
 
-
-  /* When hovering over the TOC, show it */
   &:hover {
     opacity: 1;
     transition: opacity 0.3s ease-in-out, visibility 0s linear 0s; /* Immediate visibility when hovered */
@@ -278,6 +272,11 @@ header {
     transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
   }
 
+  &:not(.invisible) {
+    -webkit-animation: fade-up 0.8s;
+    animation: fade-up 0.8s;
+  }
+
   ul {
     list-style: none;
     font-size: 0.85rem;
@@ -289,10 +288,6 @@ header {
         margin: 0.4rem 0;
       }
 
-      &:first-child {
-        margin-top: 0;
-      }
-
       a {
         padding: 0.2rem 0 0.2rem 1.25rem;
       }

docs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [7.2.3](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.2...v7.2.3) (2024-12-15)
+
+### Bug Fixes
+
+* refreshing mermaid theme may fail ([#2113](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2113)) ([2f00d41](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2f00d41861f1b06c2ff7fa4e67e14e647c3c34b0))
+* **ui:** gap between TOC entries is inconsistent ([#2119](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2119)) ([1b4e318](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1b4e318dc1cd57da812e11bf69ebb06083c213fc))
+* **ui:** slow script loading hides TOC fade-up effect in desktop ([#2120](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2120)) ([e0c3faf](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e0c3fafa470eb12bd04ffdf198018bc28b6de20d))
+
 ## [7.2.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.1...v7.2.2) (2024-12-06)
 
 ### Bug Fixes

jekyll-theme-chirpy.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-chirpy"
-  spec.version       = "7.2.2"
+  spec.version       = "7.2.3"
   spec.authors       = ["Cotes Chung"]
   spec.email         = ["cotes.chung@gmail.com"]
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "7.2.2",
+  "version": "7.2.3",
   "description": "A minimal, responsive, and feature-rich Jekyll theme for technical writing.",
   "repository": {
     "type": "git",