hd-garden 0.5.1 → 0.5.3

package/app/blog/[...path]/page.tsx

@@ -111,7 +111,7 @@ export default async function PostPage({
           <ArticleTags tags={post.tags} />
           {post.cover && (
             <figure className="article-hero article-cover cover-card cover-img">
-              <CoverImage className="u-photo" src={post.cover} image={post.coverImage} alt={`${post.title} 封面`} sizes="(max-width: 920px) calc(100vw - 40px), 880px" priority />
+              <CoverImage className="u-photo" src={post.cover} image={post.coverImage} alt={`${post.title} 封面`} sizes="(max-width: 852px) calc(100vw - 40px), 812px" priority />
             </figure>
           )}
         </header>

package/app/columns/[column]/[...path]/page.tsx

@@ -131,7 +131,7 @@ export default async function ColumnEntryPage({
           <ArticleTags tags={entry.tags} />
           {entry.cover && (
             <figure className="article-hero article-cover cover-img">
-              <CoverImage className="u-photo" src={entry.cover} image={entry.coverImage} alt={`${entry.title} 封面`} sizes="(max-width: 920px) calc(100vw - 40px), 880px" priority />
+              <CoverImage className="u-photo" src={entry.cover} image={entry.coverImage} alt={`${entry.title} 封面`} sizes="(max-width: 852px) calc(100vw - 40px), 812px" priority />
             </figure>
           )}
         </header>

package/app/components/ArticleMeasure.tsx

@@ -101,23 +101,32 @@ export function ArticleMeasure() {
       article.querySelectorAll<HTMLElement>(".fig").forEach((figure) => {
         const image = figure.querySelector("img");
         resetWide(figure);
+        // From here on the browser decides; the build-time breakout CSS steps aside.
+        figure.classList.remove("fig-wide");
         if (!image) return;
-        // Back to CSS sizing: natural size, capped at the column.
-        image.style.removeProperty("width");
-        if (!image.naturalWidth) return;
-        const attrWidth = Number(image.getAttribute("width")) || 0;
+        // Back to the unwidened size: the build-time width when the size is known
+        // (so an image that has not loaded keeps its box), else CSS sizing.
+        const baseWidth = Number(image.dataset.bw) || 0;
+        if (baseWidth) image.style.width = `${baseWidth}px`;
+        else image.style.removeProperty("width");
+        // Sizes read at build time let this run before the file arrives; otherwise wait for load.
+        const known = Number(image.dataset.nw) || 0;
+        const pixels = image.naturalWidth || known;
+        if (!pixels) return;
+        // width="" written by the build is the pixel size, not an author's choice.
+        const attrWidth = known ? Number(image.dataset.aw) || 0 : Number(image.getAttribute("width")) || 0;
         const breakout = figureBreakout({
           viewport,
           articleLeft: articleBox.left,
           articleRight: articleBox.right,
           figureClient: figure.clientWidth,
           imageClient: image.clientWidth,
-          naturalWidth: image.naturalWidth,
+          naturalWidth: pixels,
           attrWidth,
         });
         widen(figure, breakout);
         // Only a widened image, or one with a width attribute, gets an inline width.
-        const width = figureImageWidth({ naturalWidth: image.naturalWidth, attrWidth, widened: breakout.left > 0 });
+        const width = figureImageWidth({ naturalWidth: pixels, attrWidth, widened: breakout.left > 0 });
         if (width) image.style.width = `${width}px`;
       });
       placeToc();

package/app/components/MarkdownArticle.tsx

@@ -20,12 +20,17 @@ import { MarkdownImage } from "./MarkdownImage";
 import { CodeCopy } from "./garden/chrome";
 import { CodeDiff } from "./garden/chrome";
 import { GardenBlock } from "./garden/GardenBlock";
-import { linkAssets } from "@garden/generated-content";
-import { siteConfig } from "@garden/site-config";
+import { imageSizes, linkAssets } from "@garden/generated-content";
+import { imageDimensions, lookupImageSize } from "../../ui/garden/image-dims.mjs";
+import { siteConfig, siteLinks } from "@garden/site-config";
+import { articleLink, sameSiteMatcher } from "../../ui/garden/same-site.mjs";
 import { LinkCardRefresh } from "./LinkCardRefresh";
 import { linkHost } from "../../scripts/link-meta-core.mjs";
 import { cardDate } from "../../ui/garden/card-refresh.mjs";
 
+// Full URLs back to this site are internal links, written as root-relative paths.
+const sameSite = sameSiteMatcher(siteLinks?.address ?? "", siteLinks?.basePath ?? "");
+
 /** The site's favicon, downloaded at build time; nothing when there is none. */
 function Favicon({ href }: { href: string }) {
   const src = linkAssets?.favicons?.[linkHost(href)];
@@ -221,7 +226,7 @@ export function MarkdownArticle({ content }: { content: string }) {
   return (
     <div className="markdown-body prose">
       <ReactMarkdown
-        remarkPlugins={[...markdownPlugins, remarkLinkCard, remarkA2]}
+        remarkPlugins={[...markdownPlugins, [remarkLinkCard, { sameSite }], [remarkA2, { imageSize: (src: string) => lookupImageSize(imageSizes, src) }]]}
         rehypePlugins={[
           rehypeRaw,
           rehypeKatex,
@@ -237,11 +242,11 @@ export function MarkdownArticle({ content }: { content: string }) {
             const only = nodes.length === 1 && isValidElement<{ href?: string; children?: ReactNode }>(nodes[0]) ? nodes[0] : null;
             const href = only?.props.href;
             const text = only ? headingText(only.props.children).trim() : "";
-            if (href && text === href && /^https?:\/\//iu.test(href)) return <LinkCard href={href} />;
+            if (href && text === href && /^https?:\/\//iu.test(href) && !sameSite(href)) return <LinkCard href={href} />;
             return <p {...domProps}>{children}</p>;
           },
-          a: ({ href, children, ...props }) => {
-            const external = Boolean(href && /^(https?:)?\/\//iu.test(href));
+          a: ({ href: written, children, ...props }) => {
+            const { href, external } = articleLink(written, sameSite);
             const domProps = { ...props };
             Reflect.deleteProperty(domProps, "node");
             return (
@@ -256,7 +261,11 @@ export function MarkdownArticle({ content }: { content: string }) {
               </a>
             );
           },
-          img: MarkdownImage,
+          img: (props) => {
+            const size = lookupImageSize(imageSizes, typeof props.src === "string" ? props.src : undefined);
+            const dims = imageDimensions(props, size);
+            return <MarkdownImage {...props} {...dims} style={{ ...props.style, ...dims.style }} />;
+          },
           table: ({ children, ...props }) => (
             <div className="table-wrap" role="region" aria-label="表格，可横向滚动" tabIndex={0}>
               <table {...props}>{children}</table>

package/app/components/MarkdownImage.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState, type ComponentPropsWithoutRef } from "react";
 type MarkdownImageProps = ComponentPropsWithoutRef<"img"> & { node?: unknown };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function MarkdownImage({ alt = "", src, node, ...props }: MarkdownImageProps) {
+export function MarkdownImage({ alt = "", src, node, style, ...props }: MarkdownImageProps) {
   const [open, setOpen] = useState(false);
   const description = alt || "查看原图";
 
@@ -37,7 +37,7 @@ export function MarkdownImage({ alt = "", src, node, ...props }: MarkdownImagePr
       >
         {/* Native images preserve Typora-authored relative paths. */}
         {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img loading="lazy" alt={alt} src={src} {...props} />
+        <img loading="lazy" alt={alt} src={src} {...props} style={style} />
       </button>
 
       {open ? (
@@ -49,8 +49,9 @@ export function MarkdownImage({ alt = "", src, node, ...props }: MarkdownImagePr
           onClick={() => setOpen(false)}
         >
           <div className="markdown-image-lightbox-content" onClick={(event) => event.stopPropagation()}>
+            {/* The preview sizes itself; the article's inline width stays on the article image. */}
             {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={src} alt={alt} {...props} />
+            <img src={src} alt={alt} width={props.width} height={props.height} />
             <button
               type="button"
               className="markdown-image-lightbox-close"

package/app/components/SiteHeader.tsx

@@ -12,7 +12,7 @@ import {
 } from "react";
 import type Fuse from "fuse.js";
 import { MagnifyingGlass, X } from "@phosphor-icons/react";
-import { searchFull, searchIndexUrl } from "@garden/site-config";
+import { brand, searchFull, searchIndexUrl } from "@garden/site-config";
 import { createSearch } from "../../ui/garden/search-match.mjs";
 import { createIdbStore, loadFullIndex, saveDataOn, whenIdleAfterLoad } from "../../ui/garden/search-full.mjs";
 import { siteConfig } from "../site.config";
@@ -358,7 +358,11 @@ export function SiteHeader() {
     <>
       <header className="sh-header">
         <div className="sh-bar">
-          <Link href="/" className="sh-word">{siteConfig.name}</Link>
+          <Link href="/" className="sh-word">
+            {/* Build-time SVG from brand.logo, cleaned of scripts and handlers. */}
+            {brand.logo ? <span className="sh-mark" aria-hidden="true" dangerouslySetInnerHTML={{ __html: brand.logo }} /> : null}
+            {siteConfig.name}
+          </Link>
           <nav className="sh-nav" aria-label="站点导航">
             {nav.map((item) => (
               <Link key={item.href} href={item.href} aria-current={current(item.href) ? "page" : undefined}>
@@ -372,7 +376,7 @@ export function SiteHeader() {
                 <circle cx="9" cy="9" r="5.8" />
                 <path d="M13.3 13.3 17 17" />
               </svg>
-              <span className="lbl">搜索文章</span>
+              <span className="lbl">搜索</span>
               <kbd><span className="kbd-mod kbd-mac">⌘</span><span className="kbd-mod kbd-other">Ctrl</span>{" "}K</kbd>
             </button>
             <button className="sh-icon sh-search-m" type="button" onClick={openSearch} onPointerDown={prefetchSearch} aria-label="搜索文章">

package/app/garden-modules.d.ts

@@ -59,12 +59,18 @@ declare module "@garden/generated-content" {
   };
   export type LinkAssets = { favicons: Record<string, string>; cards: Record<string, LinkCardMeta> };
   export const linkAssets: LinkAssets;
+  /** Intrinsic sizes of body images by src, read at build time. */
+  export const imageSizes: Record<string, { width: number; height: number }>;
 }
 
 declare module "@garden/site-config" {
   export const searchIndexUrl: string;
   /** The full-text index file and the hash its contents are cached under. */
   export const searchFull: { url: string; hash: string };
+  /** The site address (site.config.yaml `url`, else SITE_URL) and base path, for spotting links back to the site. */
+  export const siteLinks: { address: string; basePath: string };
+  /** Header logo as inline SVG ("" when hidden) and icon URLs, from brand in site.config.yaml. */
+  export const brand: { logo: string; favicon: string; appleTouchIcon: string };
   export const siteConfig: {
     name: string;
     tagline: string;
@@ -74,6 +80,8 @@ declare module "@garden/site-config" {
     pages: Record<string, Record<string, unknown>>;
     footer: string;
     linkPreview?: { worker?: string };
+    url?: string;
+    brand?: { logo?: string | false; favicon?: string; appleTouchIcon?: string | false };
   };
   export const githubUrl: string;
 }

package/app/globals.css

@@ -126,15 +126,6 @@ button {
   width: max-content;
 }
 
-.brand-mark {
-  width: 43px;
-  height: 50px;
-  display: grid;
-  place-items: center;
-  color: var(--faint);
-  border-right: 1px solid var(--line-strong);
-}
-
 .brand strong {
   display: block;
   font-size: 20px;
@@ -2061,15 +2052,32 @@ button {
   text-decoration-thickness: 2px;
 }
 
-/* A per-line border stays continuous across inline code and descenders. */
-.markdown-body u {
+/* Highlighter for key claims, as in the A2 demo: a soft stroke under the lower part of the line. */
+.markdown-body u,
+.markdown-body mark,
+.markdown-body .hl {
+  color: var(--ink);
+  font-weight: 500;
   text-decoration: none;
-  border-bottom: 1px solid currentColor;
-  padding-bottom: 0.1em;
+  border-bottom: 0;
+  background: linear-gradient(to bottom, transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%);
+  padding: 0 0.08em;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
 }
 
+.markdown-body u strong,
+.markdown-body u u,
+.markdown-body mark strong,
+.markdown-body mark u,
+.markdown-body .hl strong,
+.markdown-body .hl u {
+  font-weight: 600;
+  text-decoration: none;
+  background: none;
+  padding: 0;
+}
+
 .markdown-body strong {
   color: var(--ink);
 }
@@ -4098,11 +4106,6 @@ html[data-theme="dark"] .article-references {
     display: none;
   }
 
-  .brand-mark {
-    width: 36px;
-    height: 44px;
-  }
-
   .brand strong {
     font-size: 17px;
   }

package/app/layout.tsx

@@ -11,6 +11,7 @@ import {
   webmentionEndpoint,
 } from "./lib/site";
 import { githubUrl, siteConfig } from "./site.config";
+import { brand } from "@garden/site-config";
 
 export async function generateMetadata(): Promise<Metadata> {
   const siteUrl = await getSiteUrl();
@@ -29,7 +30,8 @@ export async function generateMetadata(): Promise<Metadata> {
       },
     },
     icons: {
-      icon: "/favicon.svg",
+      icon: [{ url: brand.favicon, type: brand.favicon.endsWith(".svg") ? "image/svg+xml" : undefined }],
+      ...(brand.appleTouchIcon ? { apple: [{ url: brand.appleTouchIcon, sizes: "180x180" }] } : {}),
     },
     robots: {
       index: true,

package/app/lib/remark-a2.mjs

@@ -1,3 +1,4 @@
+import { figureLayout } from "../../ui/garden/enhance.mjs";
 import { toString } from "mdast-util-to-string";
 
 const ALERT_TITLE = {
@@ -18,10 +19,10 @@ const LEGACY_KIND = {
 
 const ALERT_ICON = {
   note: '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6.25"/><path d="M8 7.2v4"/><path d="M8 4.8v.1" stroke-width="2"/></svg>',
-  tip: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 12.5h4M6.5 14.5h3M8 1.75a4.5 4.5 0 0 0-2.6 8.2c.4.3.6.7.6 1.2v.35h4v-.35c0-.5.2-.9.6-1.2A4.5 4.5 0 0 0 8 1.75Z"/></svg>',
-  important: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.25 3.25a1 1 0 0 1 1-1h9.5a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7l-3 2.5v-2.5h-.75a1 1 0 0 1-1-1Z"/><path d="M8 4.75v3"/><path d="M8 9.4v.1" stroke-width="2"/></svg>',
-  warning: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2 1.75 13.25h12.5Z"/><path d="M8 6.5v3.25"/><path d="M8 11.6v.1" stroke-width="2"/></svg>',
-  caution: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5.3 1.75h5.4l3.55 3.55v5.4l-3.55 3.55H5.3l-3.55-3.55V5.3Z"/><path d="M8 4.75v3.75"/><path d="M8 10.9v.1" stroke-width="2"/></svg>',
+  tip: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.75a4.25 4.25 0 0 0-2.5 7.7c.4.3.6.7.6 1.2v.6h3.8v-.6c0-.5.2-.9.6-1.2A4.25 4.25 0 0 0 8 1.75z"/><path d="M6.2 13.6h3.6"/></svg>',
+  important: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.25 3.25a1.5 1.5 0 0 1 1.5-1.5h8.5a1.5 1.5 0 0 1 1.5 1.5v6.5a1.5 1.5 0 0 1-1.5 1.5H7.5l-3 2.75v-2.75h-.75a1.5 1.5 0 0 1-1.5-1.5z"/><path d="M8 4.5v3"/><path d="M8 9.4v.1" stroke-width="2"/></svg>',
+  warning: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M7.13 2.4a1 1 0 0 1 1.74 0l5.6 9.9a1 1 0 0 1-.87 1.5H2.4a1 1 0 0 1-.87-1.5z"/><path d="M8 6.3v3.1"/><path d="M8 11.4v.1" stroke-width="2"/></svg>',
+  caution: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5.3 1.75h5.4l3.55 3.55v5.4l-3.55 3.55H5.3L1.75 10.7V5.3z"/><path d="M8 4.8v3.6"/><path d="M8 10.6v.1" stroke-width="2"/></svg>',
 };
 
 function meaningfulChildren(node) {
@@ -168,7 +169,7 @@ function figureCaption(image) {
   return "";
 }
 
-function asFigure(node) {
+function asFigure(node, imageSize) {
   if (node?.type !== "paragraph" || node.data?.hName) return null;
   const children = meaningfulChildren(node);
   if (children.length !== 1 || children[0].type !== "image") return null;
@@ -186,23 +187,30 @@ function asFigure(node) {
       children: [{ type: "text", value: caption }],
     }]
     : [card];
+  // A known size decides the breakout now, so the figure does not jump when the image loads.
+  const size = imageSize(image.url);
+  const side = size ? figureLayout({ naturalWidth: size.width }).side : 0;
+  const hProperties = side > 0
+    ? { className: ["fig", "fig-wide"], style: `--wl:${side}px;--wr:${side}px` }
+    : { className: ["fig"] };
   return {
     type: "paragraph",
-    data: { hName: "figure", hProperties: { className: ["fig"] } },
+    data: { hName: "figure", hProperties },
     children: figureChildren,
   };
 }
 
-function walk(node) {
+function walk(node, imageSize) {
   if (!node || typeof node !== "object" || !Array.isArray(node.children)) return;
   if (node.type === "blockquote") rewriteAlert(node);
-  node.children = node.children.map((child) => asFigure(child) ?? child);
-  for (const child of node.children) walk(child);
+  node.children = node.children.map((child) => asFigure(child, imageSize) ?? child);
+  for (const child of node.children) walk(child, imageSize);
 }
 
 /** Demo alert cards and captioned figures. Article rendering only. */
-export function remarkA2() {
+export function remarkA2(options = {}) {
+  const imageSize = typeof options?.imageSize === "function" ? options.imageSize : () => null;
   return (tree) => {
-    walk(tree);
+    walk(tree, imageSize);
   };
 }

package/app/lib/remark-link-card.mjs

@@ -32,7 +32,7 @@ const meaningful = (children) =>
   children.filter((child) => !(child.type === "text" && !child.value.trim()) && child.type !== "break");
 
 /** Take the markers out of one parent's inline children; return the marked links. */
-function takeMarkers(parent, source) {
+function takeMarkers(parent, source, sameSite) {
   const marked = [];
   const children = parent.children ?? [];
   for (let index = 0; index < children.length - 1; index += 1) {
@@ -41,13 +41,14 @@ function takeMarkers(parent, source) {
     if (link.type !== "link" || next.type !== "text" || !next.value.startsWith(MARKER)) continue;
     if (!isHttp(link.url) || !writtenAsLink(link, source)) continue;
     next.value = next.value.slice(MARKER.length);
-    marked.push(link);
+    // A link back to this site is an ordinary internal link: the marker goes, no card.
+    if (!sameSite(link.url)) marked.push(link);
   }
   parent.children = children.filter((child) => !(child.type === "text" && child.value === ""));
   return marked;
 }
 
-function walk(parent, source) {
+function walk(parent, source, sameSite) {
   const children = parent.children ?? [];
   for (let index = 0; index < children.length; index += 1) {
     const node = children[index];
@@ -55,14 +56,14 @@ function walk(parent, source) {
     if (node.type !== "paragraph") {
       if (node.children) {
         // Headings, table cells and the like: drop the marker, no card.
-        if (node.type === "heading" || node.type === "tableCell") takeMarkers(node, source);
-        walk(node, source);
+        if (node.type === "heading" || node.type === "tableCell") takeMarkers(node, source, sameSite);
+        walk(node, source, sameSite);
       }
       continue;
     }
     // Links nested in emphasis count too.
-    const marked = takeMarkers(node, source);
-    for (const child of node.children) if (child.children && child.type !== "link") marked.push(...takeMarkers(child, source));
+    const marked = takeMarkers(node, source, sameSite);
+    for (const child of node.children) if (child.children && child.type !== "link") marked.push(...takeMarkers(child, source, sameSite));
     if (!marked.length) continue;
     const rest = meaningful(node.children);
     if (marked.length === 1 && rest.length === 1 && rest[0] === marked[0]) {
@@ -75,9 +76,10 @@ function walk(parent, source) {
   }
 }
 
-export function remarkLinkCard() {
+export function remarkLinkCard(options = {}) {
+  const sameSite = typeof options?.sameSite === "function" ? options.sameSite : () => null;
   return (tree, file) => {
     const source = typeof file?.value === "string" ? file.value : String(file?.value ?? "");
-    walk(tree, source);
+    walk(tree, source, sameSite);
   };
 }

package/app/styles/a2.css

@@ -27,7 +27,6 @@ body {
   color: var(--ink);
 }
 
-.brand-mark,
 .brand small {
   display: none;
 }
@@ -244,7 +243,8 @@ body {
 .cover-card.cover-img,
 .article-hero.article-cover {
   width: 100%;
-  max-width: 880px;
+  /* Column plus half a gutter each side: centred, and clear of the TOC rail. */
+  max-width: calc(var(--col) + 72px);
   margin: 48px auto 0;
   aspect-ratio: auto;
   background: none;
@@ -466,15 +466,15 @@ html[data-theme="dark"] .markdown-body img.fav {
 }
 
 .markdown-body.prose {
-  --al-note: #30302e;
-  --al-note-bg: #f0eee6;
-  --al-note-line: rgba(20, 20, 19, 0.18);
+  --al-note: #2c55b4;
+  --al-note-bg: #eef3fc;
+  --al-note-line: rgba(44, 85, 180, 0.22);
   --al-tip: #2d6a3e;
   --al-tip-bg: #edf5ef;
   --al-tip-line: rgba(45, 106, 62, 0.22);
-  --al-important: #30302e;
-  --al-important-bg: #f0eee6;
-  --al-important-line: rgba(20, 20, 19, 0.14);
+  --al-important: #6a3fb5;
+  --al-important-bg: #f3effa;
+  --al-important-line: rgba(106, 63, 181, 0.22);
   --al-warning: #8a5300;
   --al-warning-bg: #fbf3e5;
   --al-warning-line: rgba(176, 108, 0, 0.26);
@@ -487,15 +487,15 @@ html[data-theme="dark"] .markdown-body img.fav {
 :root[data-theme="dark"] .prose,
 html[data-theme="dark"] .markdown-body.prose,
 html[data-theme="dark"] .prose {
-  --al-note: #eeece7;
-  --al-note-bg: rgba(238, 236, 231, 0.06);
-  --al-note-line: rgba(238, 236, 231, 0.22);
+  --al-note: #93b2f4;
+  --al-note-bg: rgba(147, 178, 244, 0.09);
+  --al-note-line: rgba(147, 178, 244, 0.28);
   --al-tip: #8fcb9f;
   --al-tip-bg: rgba(143, 203, 159, 0.08);
   --al-tip-line: rgba(143, 203, 159, 0.26);
-  --al-important: #eeece7;
-  --al-important-bg: #30302e;
-  --al-important-line: rgba(238, 236, 231, 0.14);
+  --al-important: #bfa5f0;
+  --al-important-bg: rgba(191, 165, 240, 0.09);
+  --al-important-line: rgba(191, 165, 240, 0.28);
   --al-warning: #e6b566;
   --al-warning-bg: rgba(230, 181, 102, 0.08);
   --al-warning-line: rgba(230, 181, 102, 0.28);
@@ -535,17 +535,10 @@ html[data-theme="dark"] .prose {
   --al-line: var(--al-tip-line);
 }
 
-/* IMPORTANT reads in ink: a dark bar on the left and a bold title. */
 .markdown-body .markdown-alert-important {
   --al: var(--al-important);
   --al-bg: var(--al-important-bg);
   --al-line: var(--al-important-line);
-  border-left: 3px solid var(--al-important);
-  padding-left: 18px;
-}
-
-.markdown-body .markdown-alert-important .markdown-alert-title {
-  font-weight: 700;
 }
 
 .markdown-body .markdown-alert-warning {
@@ -737,6 +730,19 @@ html[data-theme="dark"] .markdown-body .markdown-alert code {
   }
 }
 
+/* A breakout decided at build time from the image's known size. It holds the
+   figure at its final width before the image loads and before the script
+   measures; the script then takes over (and removes .fig-wide). Only where the
+   article column is a full 740px with room on both sides. */
+@media (min-width: 1348px) {
+  .post-reading-page .markdown-body .fig-wide {
+    margin-left: calc(-1 * var(--wl, 0px));
+    margin-right: calc(-1 * var(--wr, 0px));
+    max-width: none;
+    width: auto;
+  }
+}
+
 .toc {
   font-size: var(--fs-small);
   line-height: 1.5;

package/app/styles/shell.css

@@ -37,21 +37,28 @@ img,svg{max-width:100%}
 .sh-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .2s ease}
 .sh-header.is-scrolled{border-bottom-color:var(--rule)}
 .sh-bar{max-width:var(--shell);margin:0 auto;height:var(--hdr);padding:0 32px;display:flex;align-items:center;gap:28px}
-.sh-word{font:600 var(--fs-lead)/1 var(--serif);color:var(--ink);text-decoration:none;white-space:nowrap;padding:8px 0}
+.sh-word{display:inline-flex;align-items:center;gap:10px;font:600 var(--fs-lead)/1 var(--serif);color:var(--ink);text-decoration:none;white-space:nowrap;padding:8px 0}
+.sh-mark{display:inline-flex;flex:none}
+.sh-mark svg{display:block;height:26px;width:auto}
 .sh-nav{display:flex;gap:4px;margin-left:auto}
 .sh-nav a{font-size:15px;color:var(--soft);text-decoration:none;padding:8px 12px;border-radius:var(--r);transition:color .15s ease,background-color .15s ease}
 .sh-nav a:hover{color:var(--ink);background:var(--tint)}
 .sh-nav a[aria-current="page"],.sh-nav a[aria-current="true"]{color:var(--blue);font-weight:600}
 .sh-tools{display:flex;align-items:center;gap:8px}
-.sh-search{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 8px 0 12px;border:1px solid var(--rule);background:var(--card);color:var(--muted);border-radius:var(--r);font:400 var(--fs-small)/1 var(--sans);cursor:pointer;appearance:none;transition:border-color .15s ease,color .15s ease}
-.sh-search:hover{border-color:var(--rule-strong);color:var(--soft)}
+.sh-search{display:inline-flex;align-items:center;gap:6px;height:38px;padding:8px 12px;border:0;background:transparent;color:var(--soft);border-radius:var(--r);font:400 15px/1 var(--sans);cursor:pointer;appearance:none;transition:color .15s ease,background-color .15s ease}
+.sh-search:hover{color:var(--ink);background:var(--tint)}
+.sh-search:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
 .sh-search svg,.sh-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
-.sh-search .lbl{min-width:84px;text-align:left}
+.sh-search svg{width:16px;height:16px}
+.sh-search .lbl{text-align:left}
+/* The shortcut hint only where there is a keyboard and a precise pointer. */
+.sh-search kbd{display:none;margin-left:4px;border:0;padding:0;background:none;font:400 12px/1 var(--sans);color:var(--muted);opacity:.7}
+@media (hover:hover) and (pointer:fine){.sh-search kbd{display:inline}}
 kbd{font:500 12px/1 var(--sans);color:var(--muted);border:1px solid var(--rule);border-bottom-width:2px;border-radius:6px;padding:3px 6px;background:var(--paper)}
-.sh-search .kbd-mod{display:inline-block;min-width:2.5em;text-align:end}
+.sh-search .kbd-mod{display:inline}
 .sh-search .kbd-other{display:none}
 html[data-mod="other"] .sh-search .kbd-mac{display:none}
-html[data-mod="other"] .sh-search .kbd-other{display:inline-block}
+html[data-mod="other"] .sh-search .kbd-other{display:inline}
 .sh-search-m{color:var(--soft);opacity:1}
 .sh-search-m svg{opacity:1}
 .sh-icon{display:inline-grid;place-items:center;width:40px;height:40px;border:0;background:transparent;color:var(--soft);border-radius:var(--r);cursor:pointer;transition:background-color .15s ease,color .15s ease}

package/app/styles/tokens.css

@@ -90,7 +90,7 @@ html[data-theme="dark"] {
   --accent: var(--blue);
   --accent-soft: var(--blue-tint);
   --selection: rgb(238 236 231 / 18%);
-  --hl: #6b5a2a;
+  --hl: #5e4e17;
   --red: #f29aab;
   --red-text: #f29aab;
   --red-tint: rgb(242 154 171 / 12%);

package/bin/garden.mjs

@@ -77,7 +77,7 @@ function ensureLink(from, to) {
 function ensurePublic() {
   const dest = path.join(siteRoot, "public");
   fs.mkdirSync(dest, { recursive: true });
-  for (const name of ["favicon.svg", "og.png"]) {
+  for (const name of ["favicon.svg", "apple-touch-icon.png", "og.png"]) {
     const from = path.join(gardenPackageRoot, "public", name);
     const to = path.join(dest, name);
     if (fs.existsSync(from) && !fs.existsSync(to)) fs.copyFileSync(from, to);
@@ -355,6 +355,7 @@ function help() {
   garden new              创建文章草稿
   garden embed            拉取外链摘要
   garden links            重新拉取外链图标（build 时会自动做）
+  garden images           读取新的远程图片尺寸，写入 image-sizes.json（build 时会自动做）
   garden init [目录]      创建只含稿和配置的新站点
   garden check <文章.md>  检查一篇博文的硬性结构
   garden ui <子命令>      Intelligent UI：scan、check、apply、prompt、schema、catalog
@@ -382,11 +383,18 @@ switch (command) {
   case "build":
     // Favicons are refetched on every build; failures fall back to link-assets.json.
     if (process.env.GARDEN_OFFLINE !== "1") runNode("scripts/link-assets.mjs");
+    // Remote image sizes: only new images are probed; the rest come from image-sizes.json.
+    if (process.env.GARDEN_OFFLINE !== "1") runNode("scripts/image-sizes.mjs");
     runVinext(["build", ...rest], { copyDist: true });
+    // Pages for old addresses listed under redirects in site.config.yaml (static export only).
+    if (process.env.STATIC_EXPORT === "1") runNode("scripts/redirects.mjs");
     break;
   case "links":
     runNode("scripts/link-assets.mjs");
     break;
+  case "images":
+    runNode("scripts/image-sizes.mjs");
+    break;
   case "start":
     runVinext(["start", ...rest]);
     break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",
@@ -27,6 +27,7 @@
     "bin",
     "build",
     "public/favicon.svg",
+    "public/apple-touch-icon.png",
     "public/og.png",
     "public/images",
     "scripts",
@@ -81,6 +82,7 @@
     "fuse.js": "^7.5.0",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
+    "image-size": "^2.0.4",
     "katex": "^0.16.47",
     "marked": "^16.4.2",
     "mdast-util-from-markdown": "^2.1.0",

package/public/favicon.svg

@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
-  <rect width="256" height="256" fill="#f8f8f6"/>
-  <path fill="#202124" d="M216,208H168V184h4a68.07,68.07,0,0,0,68-68,28,28,0,0,0-56,0,12,12,0,0,1-12,12h-4V56a40,40,0,0,0-80,0V88H84A12,12,0,0,1,72,76a28,28,0,0,0-56,0,68.07,68.07,0,0,0,68,68h4v64H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM96,128H84A52.06,52.06,0,0,1,32,76a12,12,0,0,1,24,0,28,28,0,0,0,28,28H96a8,8,0,0,0,8-8V56a24,24,0,0,1,48,0v80a8,8,0,0,0,8,8h12a28,28,0,0,0,28-28,12,12,0,0,1,24,0,52.06,52.06,0,0,1-52,52H160a8,8,0,0,0-8,8v32H104V136A8,8,0,0,0,96,128Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.5 1.25 28 28" fill="none" stroke="#1B1A18" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><style>@media (prefers-color-scheme: dark){svg{stroke:#EEECE7}}</style><path d="M10 27V10"/><path d="M10 10C10 5.5 13.5 3.5 18 3.5C18 7.5 15 10 10 10Z"/><path d="M10 19C10 15.5 12.5 13.5 15.5 13.5S21 15.5 21 19V27"/></svg>