fix: make TOC title and entries visible at the same time (cotes2020#1711)

cotes2020 · web-flow · commit e0950fc973d0 · 2024-04-29T03:36:16.000+08:00
When internet connection speeds are poor, there is a chance that the title of the TOC will appear earlier than its entries, causing a visual cutoff.
diff --git a/_includes/toc.html b/_includes/toc.html
@@ -6,8 +6,8 @@
 {% endif %}
 
 {% if enable_toc %}
-  <section id="toc-wrapper" class="ps-0 pe-4">
-    <h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+  <section id="toc-wrapper" class="d-none ps-0 pe-4">
+    <h2 class="panel-heading ps-3 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
   </section>
 {% endif %}
diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js
@@ -9,5 +9,7 @@ export function toc() {
       orderedList: false,
       scrollSmooth: false
     });
+
+    document.getElementById('toc-wrapper').classList.remove('d-none');
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -9,5 +9,7 @@ export function toc() {`
`9`	`9`	`orderedList: false,`
`10`	`10`	`scrollSmooth: false`
`11`	`11`	`});`
	`12`	`+`
	`13`	`+ document.getElementById('toc-wrapper').classList.remove('d-none');`
`12`	`14`	`}`
`13`	`15`	`}`