hd-garden 0.14.10 → 0.14.11

package/app/components/ArticleTitle.tsx

@@ -1,20 +1,40 @@
+"use client";
+
+import { useLayoutEffect, useRef } from "react";
 import { splitTitle, titleLineScale } from "../../ui/garden/title.mjs";
+import { mountArticleTitle } from "../../ui/garden/article-title-fit.mjs";
+import fitRuntime from "../../ui/garden/feature-title-fit.mjs?raw";
+import articleRuntime from "../../ui/garden/article-title-fit.mjs?raw";
+
+// Preserve one authored runtime across SSR/browser builds; function.toString()
+// would be changed independently by server and client optimizers.
+const ARTICLE_TITLE_BOOT = `(()=>{${fitRuntime.replace(/^export /gm, "")}
+${articleRuntime.replace(/^import\s+[^;]+;\s*/u, "").replace(/^export /gm, "")}
+mountArticleTitle(document.currentScript.parentElement);})();`;
 
 export function ArticleTitle({ title, className = "" }: { title: string; className?: string }) {
+  const heading = useRef<HTMLHeadingElement>(null);
   const split = splitTitle(title);
+  useLayoutEffect(() => mountArticleTitle(heading.current?.parentElement), [title]);
   if (!split.split) {
     return <h1 className={`p-name${className ? ` ${className}` : ""}`}>{title}</h1>;
   }
   const scale = titleLineScale(split.lines);
   return (
-    <h1 className={`p-name h1-br${className ? ` ${className}` : ""}`} style={{ ["--l" as string]: scale }}>
-      <span className="h1-line">{split.lines[0]}</span>
-      <span className="vh">{split.separator}</span>
-      <span className="h1-line">{split.lines[1]}</span>
-    </h1>
+    <>
+      <h1
+        id="at"
+        ref={heading}
+        data-article-title=""
+        className={`p-name h1-br${className ? ` ${className}` : ""}`}
+        style={{ ["--l" as string]: scale }}
+      >
+        <span className="h1-line">{split.lines[0]}</span>
+        <span className="vh">{split.separator}</span>
+        <span className="h1-line">{split.lines[1]}</span>
+      </h1>
+      <style data-article-title-rules="">{""}</style>
+      <script data-article-title-boot="" dangerouslySetInnerHTML={{ __html: ARTICLE_TITLE_BOOT }} />
+    </>
   );
 }
-
-export function originalUrl(entry: { original?: unknown }) {
-  return typeof entry.original === "string" && /^https?:\/\//iu.test(entry.original) ? entry.original : "";
-}

package/app/components/PostReadingView.tsx

@@ -2,7 +2,8 @@ import Link from "next/link";
 import { CoverImage } from "./CoverImage";
 import { ArticleMeasure } from "./ArticleMeasure";
 import { ArticleReferences } from "./ArticleReferences";
-import { ArticleTitle, originalUrl } from "./ArticleTitle";
+import { ArticleTitle } from "./ArticleTitle";
+import { originalUrl } from "../../ui/garden/title.mjs";
 import { MarkdownArticle } from "./MarkdownArticle";
 import { TableOfContents } from "./TableOfContents";
 import { Comments } from "./Comments";

package/editors/dist/typora/manifest.json

@@ -5,7 +5,7 @@
   "author": "hedon",
   "authorUrl": "https://github.com/hedon954",
   "repo": "hedon954/garden",
-  "version": "0.14.10",
+  "version": "0.14.11",
   "minAppVersion": "1.5.0",
   "minCoreVersion": "2.10.52",
   "platforms": [

package/editors/dist/typora/style.css

@@ -2532,6 +2532,15 @@
     min-width: 0;
   }
 
+  /* Columnized centered rows stretch labels to 100% width, so align-items
+     can center arrows but not text. Center direct labels only; explicit
+     start/end and nested cards or prose stay as authored. */
+  .g-compose-row:not([data-wrap="nowrap"])[data-align="center"] > .g-compose-h:not([data-align="start"]):not([data-align="end"]),
+  .g-compose-row:not([data-wrap="nowrap"])[data-align="center"] > .g-compose-text:not([data-align="start"]):not([data-align="end"]),
+  .g-compose-row:not([data-wrap="nowrap"])[data-align="center"] > .g-compose-caption-inline:not([data-align="start"]):not([data-align="end"]) {
+    text-align: center;
+  }
+
   .g-compose-arrow[data-dir="right"] {
     transform: none;
   }

package/package.json

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

package/ui/compose/compose.css

@@ -1262,6 +1262,15 @@
     min-width: 0;
   }
 
+  /* Columnized centered rows stretch labels to 100% width, so align-items
+     can center arrows but not text. Center direct labels only; explicit
+     start/end and nested cards or prose stay as authored. */
+  .g-compose-row:not([data-wrap="nowrap"])[data-align="center"] > .g-compose-h:not([data-align="start"]):not([data-align="end"]),
+  .g-compose-row:not([data-wrap="nowrap"])[data-align="center"] > .g-compose-text:not([data-align="start"]):not([data-align="end"]),
+  .g-compose-row:not([data-wrap="nowrap"])[data-align="center"] > .g-compose-caption-inline:not([data-align="start"]):not([data-align="end"]) {
+    text-align: center;
+  }
+
   .g-compose-arrow[data-dir="right"] {
     transform: none;
   }

package/ui/garden/article-title-fit.mjs

@@ -0,0 +1,97 @@
+import { fitTitleSize } from "./feature-title-fit.mjs";
+
+/** Fit a split article H1 so the remaining title prefers one second line. */
+export function mountArticleTitle(root, chooseSize = fitTitleSize) {
+  if (!root) return;
+  const key = Symbol.for("garden.article-title-fit");
+  if (root[key]) { root[key].refresh(); return root[key].dispose; }
+  const heading = root.querySelector("h1.h1-br");
+  const lines = heading ? [...heading.querySelectorAll(".h1-line")] : [];
+  const sheet = root.querySelector("style[data-article-title-rules]")?.sheet;
+  if (!heading?.id || lines.length < 2 || !sheet || !window.ResizeObserver || !window.CSS?.escape) return;
+  const index = sheet.insertRule(`#${CSS.escape(heading.id)}.h1-br{}`, sheet.cssRules.length);
+  const rule = sheet.cssRules[index].style;
+  let frame = 0, disposed = false, signature = "", previous, readingFloor = 0;
+  const widest = (probe) => Math.max(...lines.map((line) => {
+    probe.textContent = line.textContent;
+    return probe.getBoundingClientRect().width;
+  }));
+  const fit = () => {
+    if (disposed || !heading.isConnected) return;
+    const priorSize = rule.fontSize, priorWrap = rule.whiteSpace;
+    rule.removeProperty("font-size");
+    rule.removeProperty("white-space");
+    const style = getComputedStyle(heading);
+    const parent = heading.parentElement || root;
+    const parentSize = parseFloat(getComputedStyle(parent).fontSize);
+    const rootSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    const article = heading.closest("article");
+    const bodyNode = article?.querySelector(".markdown-body") || article || document.documentElement;
+    const body = parseFloat(getComputedStyle(bodyNode).fontSize);
+    const dpr = window.devicePixelRatio, scale = window.visualViewport?.scale || 1;
+    const width = heading.getBoundingClientRect().width;
+    const text = lines.map((line) => line.textContent).join("\n");
+    const state = { text, parentSize, rootSize, body, dpr, scale };
+    if (previous?.text !== text) readingFloor = 0;
+    if (previous?.text === text) {
+      if (dpr < previous.dpr - .001 || scale < previous.scale - .001 || body < previous.body - .01 || rootSize < previous.rootSize - .01) readingFloor = 0;
+      if (dpr > previous.dpr + .001 || scale > previous.scale + .001 || body > previous.body + .01 || rootSize > previous.rootSize + .01) {
+        const rootGrowth = Math.max(1, rootSize / previous.rootSize);
+        readingFloor = Math.max(readingFloor, previous.size * rootGrowth / parentSize, previous.size / previous.parentSize);
+      }
+    }
+    const minimum = Math.max(body * 1.125, readingFloor * parentSize);
+    const maximum = Math.max(parseFloat(style.fontSize), minimum);
+    const nextSignature = JSON.stringify([text, width, body, parentSize, rootSize, minimum, maximum,
+      style.fontFamily, style.fontWeight, style.fontStyle, style.fontStretch, style.letterSpacing, style.fontFeatureSettings,
+      style.fontVariationSettings, style.fontSizeAdjust, style.fontKerning, style.wordSpacing, style.fontOpticalSizing, style.textTransform, dpr, scale]);
+    if (!(width > 0 && parentSize > 0 && body > 0) || nextSignature === signature) {
+      if (priorSize) rule.fontSize = priorSize;
+      if (priorWrap) rule.whiteSpace = priorWrap;
+      return;
+    }
+    const probe = document.createElement("span");
+    probe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;white-space:nowrap;width:max-content;max-width:none;inset:0 auto auto 0;";
+    for (const property of ["font", "fontKerning", "fontFeatureSettings", "fontVariationSettings", "fontStretch", "fontSizeAdjust", "fontOpticalSizing", "letterSpacing", "wordSpacing", "textTransform", "direction"]) probe.style[property] = style[property];
+    heading.append(probe);
+    let size;
+    try {
+      size = chooseSize({ width: Math.max(0, width - .5), minimum, maximum,
+        measure(value) { probe.style.fontSize = `${value}px`; return widest(probe); } });
+    } finally { probe.remove(); }
+    rule.fontSize = `${size / parentSize}em`;
+    const actual = parseFloat(getComputedStyle(heading).fontSize);
+    heading.append(probe);
+    try {
+      probe.style.fontSize = `${actual}px`;
+      if (widest(probe) <= Math.max(0, heading.getBoundingClientRect().width - .5)) rule.whiteSpace = "nowrap";
+    } finally { probe.remove(); }
+    signature = nextSignature;
+    previous = { ...state, size };
+  };
+  const refresh = () => { if (!disposed && !frame) frame = requestAnimationFrame(() => { frame = 0; fit(); }); };
+  fit();
+  const resize = new ResizeObserver(refresh);
+  resize.observe(heading);
+  if (heading.parentElement) resize.observe(heading.parentElement);
+  const mutations = new MutationObserver(refresh);
+  mutations.observe(heading, { childList: true, subtree: true, characterData: true });
+  for (const element of [document.documentElement, document.body]) mutations.observe(element, { attributes: true, attributeFilter: ["class", "style", "lang", "data-theme"] });
+  window.addEventListener("resize", refresh);
+  window.visualViewport?.addEventListener("resize", refresh);
+  const fontsChanged = () => { signature = ""; refresh(); };
+  document.fonts?.addEventListener("loadingdone", fontsChanged);
+  document.fonts?.ready.then(fontsChanged);
+  const dispose = () => {
+    disposed = true;
+    cancelAnimationFrame(frame);
+    resize.disconnect(); mutations.disconnect();
+    window.removeEventListener("resize", refresh);
+    window.visualViewport?.removeEventListener("resize", refresh);
+    document.fonts?.removeEventListener("loadingdone", fontsChanged);
+    if (sheet.cssRules[index]?.style === rule) sheet.deleteRule(index);
+    delete root[key];
+  };
+  root[key] = { refresh, dispose };
+  return dispose;
+}

package/ui/garden/title.mjs

@@ -32,3 +32,7 @@ export function titleLineScale(lines) {
   const width = Math.max(...lines.map((line) => titleWidthUnits(line)), 0.01);
   return Number(width.toFixed(2));
 }
+
+export function originalUrl(entry) {
+  return typeof entry?.original === "string" && /^https?:\/\//iu.test(entry.original) ? entry.original : "";
+}

package/ui/preview/dist/garden-ui.css

@@ -2532,6 +2532,15 @@
     min-width: 0;
   }
 
+  /* Columnized centered rows stretch labels to 100% width, so align-items
+     can center arrows but not text. Center direct labels only; explicit
+     start/end and nested cards or prose stay as authored. */
+  .g-compose-row:not([data-wrap="nowrap"])[data-align="center"] > .g-compose-h:not([data-align="start"]):not([data-align="end"]),
+  .g-compose-row:not([data-wrap="nowrap"])[data-align="center"] > .g-compose-text:not([data-align="start"]):not([data-align="end"]),
+  .g-compose-row:not([data-wrap="nowrap"])[data-align="center"] > .g-compose-caption-inline:not([data-align="start"]):not([data-align="end"]) {
+    text-align: center;
+  }
+
   .g-compose-arrow[data-dir="right"] {
     transform: none;
   }