feat(toc): add close button to TOC dialog and improve close functionality

assets/js/theme.js

@@ -1121,6 +1121,8 @@ class FixIt {
     const dialog = document.querySelector("#toc-dialog");
     const openButton = document.querySelector("#toc-drawer-button");
     if (!dialog || !openButton) return;
+    const closeButton = dialog.querySelector(".toc-close-btn");
+    closeButton?.addEventListener("click", () => dialog.close());
     openButton.addEventListener("click", () => {
       dialog.showModal();
       openButton.setAttribute('aria-expanded', 'true');
@@ -1130,8 +1132,8 @@ class FixIt {
       this.scrollActiveTocLinkIntoView($dialogTocRoot, this.activeTocId, $dialogTocRoot);
       document.activeElement?.blur();
     });
-    dialog.addEventListener("click", () => {
-      dialog.close();
+    forEach(document.querySelectorAll('#toc-content-drawer a[href^="#"]'), ($link) => {
+      $link.addEventListener("click", () => dialog.close());
     });
     dialog.addEventListener("close", () => {
       openButton.setAttribute('aria-expanded', 'false');
@@ -1665,16 +1667,16 @@ class FixIt {
     if (!dialog.dataset.init) {
       dialog.dataset.init = 'true';
 
-      $confirm?.addEventListener('click', () => {
+      $confirm.addEventListener('click', () => {
         if (dialog._target) {
           window.open(dialog._target, '_blank', 'noopener,noreferrer');
         }
         _closeDialog();
       });
 
-      $cancel?.addEventListener('click', _closeDialog);
+      $cancel.addEventListener('click', _closeDialog);
 
-      $copy?.addEventListener('click', () => {
+      $copy.addEventListener('click', () => {
         const textToCopy = dialog._target || '';
         if (!textToCopy) return;
         copyText(textToCopy).then(() => {
@@ -1684,10 +1686,6 @@ class FixIt {
           }, 2000);
         });
       });
-
-      dialog.addEventListener('click', (e) => {
-        if (e.target === dialog) _closeDialog();
-      });
     }
 
     forEach(target.querySelectorAll('a[target="_blank"][data-guard="modal"]:not([data-init])'), ($link) => {

assets/scss/pages/single/_base.scss

@@ -167,7 +167,6 @@
       line-height: 1.25;
       margin-top: 1.5rem;
       margin-bottom: 1rem;
-      font-weight: light-dark(bold, bolder);
 
       &:hover,
       &:target {

assets/scss/pages/single/_toc.scss

@@ -237,6 +237,21 @@
     translate 0.2s,
     opacity 0.2s 0.4s;
 
+  .toc-close-btn {
+    position: absolute;
+    top: 1.25rem;
+    right: 1rem;
+    padding: 0.25rem;
+    color: fi-var(global-font-secondary-color);
+    transition: color 0.2s ease;
+    @include border-radius;
+
+    &:hover,
+    &:focus-visible {
+      color: fi-var(global-font-color);
+    }
+  }
+
   .toc {
     max-width: 100%;
     margin-inline: 1rem;

layouts/_partials/layouts/widgets.html

@@ -71,7 +71,7 @@
     {{- $linkGuard = (cond (reflect.IsMap .) . (dict "enable" .)) | merge $linkGuard -}}
   {{- end -}}
   {{- if $linkGuard.enable | and (eq $linkGuard.mode "modal") -}}
-    <dialog id="link-guard-dialog" aria-labelledby="link-guard-dialog-title" role="dialog">
+    <dialog id="link-guard-dialog" aria-labelledby="link-guard-dialog-title" role="dialog" closedby="any">
       <div class="guard-content">
         <h2 class="title">{{ T "linkRedirection.title" }}</h2>
         <p class="message">{{ dict "Title" .Site.Title | T "linkRedirection.message" }}</p>

layouts/posts/single.html

@@ -238,9 +238,11 @@
   </aside>
 
   {{- /* TOC Dialog */ -}}
-  {{- /* [todo] move to widgets.html */ -}}
   {{- if $showToc -}}
-    <dialog id="toc-dialog" aria-labelledby="toc-dialog-title" role="dialog">
+    <dialog id="toc-dialog" aria-labelledby="toc-dialog-title" role="dialog" closedby="any">
+      <button type="button" class="toc-close-btn" aria-label="Close Table of Contents">
+        {{- dict "Class" "fa-solid fa-xmark fa-lg" | partial "plugin/icon.html" -}}
+      </button>
       <div class="toc">
         <h2 class="toc-title" id="toc-dialog-title">{{ T "single.contents" }}</h2>
         <div class="toc-content" id="toc-content-drawer">