hd-garden 0.5.5 → 0.5.6

package/app/components/TableOfContents.tsx

@@ -404,6 +404,13 @@ export function TableOfContents({
         <List size={17} weight="bold" aria-hidden="true" />
         <span>目录</span>
       </button>
+      {/* Without JavaScript the button above does nothing. This link opens the
+          drawer through :target instead; CSS shows it only when scripting is
+          off, so with JavaScript nothing here is visible. */}
+      <a className="toc-nojs-trigger" id={`${panelId}-open`} href={`#${panelId}`} aria-label={`打开${label}`}>
+        <List size={17} weight="bold" aria-hidden="true" />
+        <span>目录</span>
+      </a>
       <button
         className="toc-mobile-backdrop"
         type="button"
@@ -429,6 +436,9 @@ export function TableOfContents({
           >
             <X size={18} aria-hidden="true" />
           </button>
+          <a className="toc-nojs-close" href={`#${panelId}-open`} aria-label={`关闭${label}`}>
+            <X size={18} aria-hidden="true" />
+          </a>
         </div>
         <ol id={listId} ref={listRef} className="toc-list">
           {tree.map((node, index) => renderNode(node, [index]))}

package/app/globals.css

@@ -1987,7 +1987,9 @@ button {
 
 .toc-mobile-trigger,
 .toc-mobile-backdrop,
-.toc-mobile-close {
+.toc-mobile-close,
+.toc-nojs-trigger,
+.toc-nojs-close {
   display: none;
 }
 
@@ -3731,7 +3733,8 @@ html[data-theme="dark"] .article-references {
     overflow: visible;
   }
 
-  .toc-mobile-trigger {
+  .toc-mobile-trigger,
+  .toc-nojs-trigger {
     position: fixed;
     right: calc(16px + env(safe-area-inset-right));
     bottom: calc(16px + env(safe-area-inset-bottom));
@@ -3754,19 +3757,25 @@ html[data-theme="dark"] .article-references {
   }
 
   :root[data-theme="dark"] .toc-mobile-trigger,
-  html[data-theme="dark"] .toc-mobile-trigger {
+  html[data-theme="dark"] .toc-mobile-trigger,
+  :root[data-theme="dark"] .toc-nojs-trigger,
+  html[data-theme="dark"] .toc-nojs-trigger {
     background: rgb(30 29 26 / 94%);
     border-color: var(--rule-strong);
     color: var(--ink);
   }
 
   .toc-mobile-trigger:hover,
-  .toc-mobile-trigger:focus-visible {
+  .toc-mobile-trigger:focus-visible,
+  .toc-nojs-trigger:hover,
+  .toc-nojs-trigger:focus-visible {
     transform: translateY(-2px);
   }
 
   .toc-mobile-trigger:focus-visible,
-  .toc-mobile-close:focus-visible {
+  .toc-mobile-close:focus-visible,
+  .toc-nojs-trigger:focus-visible,
+  .toc-nojs-close:focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 3px;
   }
@@ -3812,7 +3821,7 @@ html[data-theme="dark"] .article-references {
     max-height: min(72vh, 560px);
     max-height: min(72dvh, 560px);
     margin: 0;
-    padding: 0 24px calc(18px + env(safe-area-inset-bottom));
+    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
     display: flex;
     border: 0;
     border-top: 1px solid var(--line);
@@ -3849,7 +3858,8 @@ html[data-theme="dark"] .article-references {
     letter-spacing: 0.04em;
   }
 
-  .toc-mobile-close {
+  .toc-mobile-close,
+  .toc-nojs-close {
     width: 34px;
     height: 34px;
     padding: 0;
@@ -3862,14 +3872,31 @@ html[data-theme="dark"] .article-references {
     touch-action: manipulation;
   }
 
-  .toc-mobile-close:hover {
+  .toc-mobile-close:hover,
+  .toc-nojs-close:hover {
     color: var(--ink);
   }
 
+  /* The no-JS links share the button styles above but stay hidden unless
+     scripting is off (see the scripting: none block below). */
+  .toc-nojs-trigger,
+  .toc-nojs-close {
+    display: none;
+  }
+
   .toc .toc-list {
     padding: 7px 4px 4px 0;
   }
 
+  /* Keep the drawer's title and rows off the screen edge, in line with the
+     body text. The inset lives on the header and the list rather than the
+     panel, because the post layout's desktop rule overrides the panel's
+     padding on post pages but not on column pages. */
+  .toc .toc-header,
+  .toc .toc-list {
+    padding-inline: 20px;
+  }
+
   .toc li {
     margin: 10px 0;
     font-size: 13px;
@@ -5468,3 +5495,52 @@ html[data-theme="dark"] .article-references {
     justify-content: flex-start;
   }
 }
+
+/* No JavaScript: the drawer button cannot open anything, so swap in plain
+   links that open the drawer through :target. A TOC link moves the target to
+   the heading, which closes the drawer and jumps there natively. */
+@media (max-width: 900px) and (scripting: none) {
+  .toc-mobile-trigger,
+  .toc-mobile-close {
+    display: none;
+  }
+
+  .toc-nojs-trigger {
+    display: inline-flex;
+    color: var(--ink);
+    text-decoration: none;
+  }
+
+  .toc-nojs-close {
+    display: grid;
+    text-decoration: none;
+  }
+
+  /* Sub-lists are all open without JS, so the collapse toggles have no job. */
+  .toc-section-toggle {
+    display: none;
+  }
+
+  /* Same dim as the JS drawer; taps pass through to the page behind. */
+  body:has(.toc:target) .toc-mobile-backdrop {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 180ms ease, visibility 0s;
+  }
+
+  body:has(.toc:target) .toc-nojs-trigger {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .reading-page > .toc:target,
+  .post-reading-page .article-reading-layout .toc:target,
+  .column-reading-page > .toc:target,
+  .garden-page-toc .toc:target {
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+    transition: transform 220ms ease, visibility 0s;
+  }
+}

package/app/lib/remark-a2.mjs

@@ -145,10 +145,13 @@ function rewriteAlert(node) {
   let label = gfm ? gfm.label : "";
   let rest = gfm?.body ? [gfm.body, ...children.slice(1)] : children.slice(1);
   if (!label) {
-    const custom = strongOnlyText(rest.find((child) => !isBlankParagraph(child)));
-    if (custom) {
+    // A leading bold-only line is the title only when body text follows it.
+    // On its own it stays the body, under the default label.
+    const index = rest.findIndex((child) => !isBlankParagraph(child));
+    const custom = strongOnlyText(rest[index]);
+    const hasBody = rest.slice(index + 1).some((child) => !isBlankParagraph(child));
+    if (custom && hasBody) {
       label = custom;
-      const index = rest.findIndex((child) => !isBlankParagraph(child));
       rest = rest.filter((_, childIndex) => childIndex !== index);
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",

package/ui/garden/compare-line.mjs

@@ -1,7 +1,7 @@
 // A compare cell written as one line, 「X：Y」 or "X: Y". X is the title and Y
 // the text. The split is at the first full-width colon, or a colon followed by
 // a space, that is not inside inline code, link text or a link URL. The
-// separator and any space after it are returned as written, so
+// separator, with the spaces on either side of it, is returned as written, so
 // title + separator + text always equals the original line.
 
 // End of a backtick code span starting at `start`, or -1 when it never closes.
@@ -72,11 +72,15 @@ export function splitCompareLine(line) {
       if (end > 0 && /^<[a-z][a-z0-9+.-]*:[^\s<>]*>$/iu.test(line.slice(at, end + 1))) { at = end; continue; }
     }
     const isSeparator = char === "：" || (char === ":" && line[at + 1] === " ");
-    if (!isSeparator || at === 0) continue;
+    if (!isSeparator) continue;
+    // Spaces on either side of the colon belong to the separator.
+    let start = at;
+    while (start > 0 && /\s/u.test(line[start - 1])) start -= 1;
+    if (start === 0) continue;
     let end = at + 1;
     while (end < line.length && /\s/u.test(line[end])) end += 1;
     if (end >= line.length) return null;
-    return { title: line.slice(0, at), separator: line.slice(at, end), text: line.slice(end) };
+    return { title: line.slice(0, start), separator: line.slice(start, end), text: line.slice(end) };
   }
   return null;
 }