hd-garden 0.5.1 → 0.5.2

package/app/components/MarkdownArticle.tsx

@@ -21,11 +21,15 @@ 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 { 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 +225,7 @@ export function MarkdownArticle({ content }: { content: string }) {
   return (
     <div className="markdown-body prose">
       <ReactMarkdown
-        remarkPlugins={[...markdownPlugins, remarkLinkCard, remarkA2]}
+        remarkPlugins={[...markdownPlugins, [remarkLinkCard, { sameSite }], remarkA2]}
         rehypePlugins={[
           rehypeRaw,
           rehypeKatex,
@@ -237,11 +241,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 (

package/app/garden-modules.d.ts

@@ -65,6 +65,8 @@ 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 };
   export const siteConfig: {
     name: string;
     tagline: string;
@@ -74,6 +76,7 @@ declare module "@garden/site-config" {
     pages: Record<string, Record<string, unknown>>;
     footer: string;
     linkPreview?: { worker?: string };
+    url?: string;
   };
   export const githubUrl: string;
 }

package/app/globals.css

@@ -2061,15 +2061,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);
 }

package/app/lib/remark-a2.mjs

@@ -18,10 +18,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) {

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

@@ -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 {

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/package.json

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

package/scripts/build-content.mjs

@@ -10,6 +10,7 @@ import { countDemoWords } from "../ui/garden/word-count.mjs";
 import { referenceDomain } from "../ui/garden/references.mjs";
 import { linkAssetsForRender } from "./link-assets.mjs";
 import { cardUrls } from "../ui/garden/markdown-links.mjs";
+import { configuredSiteAddress, sameSiteMatcher } from "../ui/garden/same-site.mjs";
 import { buildFullIndex, buildSearchIndex } from "../ui/garden/search-index.mjs";
 import { coverImageSet, loadSharp } from "./cover-images.mjs";
 
@@ -39,6 +40,9 @@ const siteUrl = (process.env.SITE_URL ?? process.env.NEXT_PUBLIC_SITE_URL ?? "ht
 const publicBaseUrl = basePath && !siteUrl.endsWith(basePath)
   ? `${siteUrl}${basePath}`
   : siteUrl;
+// Full URLs to this address are internal links: no new tab, no card.
+const siteAddress = configuredSiteAddress(siteConfig, process.env);
+const sameSite = sameSiteMatcher(siteAddress, basePath);
 const siteName = process.env.SITE_NAME ?? siteConfig.name;
 const siteDescription = process.env.SITE_DESCRIPTION ?? siteConfig.description;
 
@@ -630,6 +634,8 @@ export const githubUrl = ${JSON.stringify(`https://github.com/${siteConfig.autho
 export const searchIndexUrl = ${JSON.stringify(`${basePath}/search-index.json?v=${contentHash}`)};
 // Every body as plain text, fetched in the background after load; the name changes with the text.
 export const searchFull = ${JSON.stringify({ url: `${basePath}/${fullIndex.fileName}`, hash: fullIndex.hash })};
+// Full URLs to this address render as internal links.
+export const siteLinks = ${JSON.stringify({ address: siteAddress, basePath })};
 `,
 );
 fs.mkdirSync(path.join(root, "public"), { recursive: true });
@@ -701,7 +707,7 @@ const sitemapEntries = [
 // Card URLs in published entries: the only pages the link-card Worker may read.
 fs.writeFileSync(
   path.join(publicRoot, "link-allowlist.json"),
-  `${JSON.stringify({ urls: [...new Set([...posts, ...columns, ...thoughts].flatMap((entry) => cardUrls(entry.content)))].sort() }, null, 2)}\n`,
+  `${JSON.stringify({ urls: [...new Set([...posts, ...columns, ...thoughts].flatMap((entry) => cardUrls(entry.content)).filter((url) => !sameSite(url)))].sort() }, null, 2)}\n`,
 );
 fs.writeFileSync(path.join(publicRoot, "sitemap.xml"), `<?xml version="1.0" encoding="UTF-8" ?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${sitemapEntries.map((entry) => `

package/scripts/link-assets.mjs

@@ -17,7 +17,9 @@ import path from "node:path";
 import { pathToFileURL } from "node:url";
 import matter from "gray-matter";
 import { fetchFavicon, fetchImage, fetchPageMeta, isPublicUrl, linkHost } from "./link-meta-core.mjs";
+import { parse as parseYaml } from "yaml";
 import { markdownLinks } from "../ui/garden/markdown-links.mjs";
+import { configuredSiteAddress, sameSiteMatcher } from "../ui/garden/same-site.mjs";
 
 export const CACHE_FILE = "link-assets.json";
 export const ASSET_DIR = path.join("public", "link-assets");
@@ -49,15 +51,26 @@ function markdownFiles(directory) {
   });
 }
 
+function readSiteConfig(siteRoot) {
+  try {
+    return parseYaml(fs.readFileSync(path.join(siteRoot, "site.config.yaml"), "utf8")) ?? {};
+  } catch {
+    return {};
+  }
+}
+
 /** External links across every post: the sites (for favicons) and the URLs. */
-export function collectSiteLinks(siteRoot) {
+export function collectSiteLinks(siteRoot, env = process.env) {
+  const config = readSiteConfig(siteRoot);
+  // Links back to this site are internal: no favicon, no card.
+  const sameSite = sameSiteMatcher(configuredSiteAddress(config, env), env.NEXT_PUBLIC_BASE_PATH ?? "");
   const hosts = new Map();
   const cards = new Set();
   const urls = new Set();
   for (const file of markdownFiles(path.join(siteRoot, "content"))) {
     const { content } = matter(fs.readFileSync(file, "utf8"));
     for (const { url, card } of markdownLinks(content)) {
-      if (!isPublicUrl(url)) continue;
+      if (!isPublicUrl(url) || sameSite(url)) continue;
       urls.add(url);
       if (card) cards.add(url);
       const host = linkHost(url);

package/templates/site/site.config.yaml

@@ -2,6 +2,8 @@ name: Garden
 tagline: 写作 · 记录 · 保持好奇
 description: 文章、随想和专栏。
 locale: zh_CN
+# 站点的公开地址。文章里指向这个地址的完整网址会按站内链接显示。
+# url: https://blog.example.com
 
 author:
   name: Your Name

package/ui/garden/same-site.mjs

@@ -0,0 +1,63 @@
+/**
+ * Links to the site's own address. A post may write a full URL such as
+ * `https://example.com/blog/post/`; it is still an internal link.
+ *
+ * The site address comes from `url` in site.config.yaml, falling back to the
+ * SITE_URL the build already uses. Both http and https count, and so do the
+ * host with and without `www.`. Any other subdomain is a different site.
+ */
+
+/** The configured site address, or "" when none is set. */
+export function configuredSiteAddress(config = {}, env = {}) {
+  const value = config?.url ?? config?.siteUrl ?? env.SITE_URL ?? env.NEXT_PUBLIC_SITE_URL ?? "";
+  return String(value).trim();
+}
+
+const hostKey = (hostname) => hostname.toLowerCase().replace(/\.$/u, "").replace(/^www\./u, "");
+const normalizeBase = (basePath) => {
+  const trimmed = String(basePath ?? "").trim().replace(/\/+$/u, "");
+  return !trimmed ? "" : trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+};
+
+/**
+ * Returns `href => path | null`. The path is root-relative and keeps the base
+ * path, query and hash; null means the link points somewhere else.
+ */
+export function sameSiteMatcher(siteAddress, basePath = "") {
+  let site;
+  try {
+    site = siteAddress ? new URL(siteAddress) : null;
+  } catch {
+    site = null;
+  }
+  if (!site || !/^https?:$/u.test(site.protocol)) return () => null;
+  const key = hostKey(site.hostname);
+  const port = site.port;
+  // A base path written into the site address counts the same as NEXT_PUBLIC_BASE_PATH.
+  const base = normalizeBase(basePath) || normalizeBase(site.pathname);
+  return (href) => {
+    if (typeof href !== "string" || !/^(https?:)?\/\//iu.test(href.trim())) return null;
+    let url;
+    try {
+      url = new URL(href.trim(), `${site.protocol}//${site.host}/`);
+    } catch {
+      return null;
+    }
+    if (!/^https?:$/u.test(url.protocol) || url.username || url.password) return null;
+    if (hostKey(url.hostname) !== key || url.port !== port) return null;
+    const pathname = url.pathname || "/";
+    if (base && pathname !== base && !pathname.startsWith(`${base}/`)) return null;
+    return `${pathname}${url.search}${url.hash}`;
+  };
+}
+
+/**
+ * How an article link renders: a link back to the site becomes its
+ * root-relative path and opens in place; other full URLs are external.
+ */
+export function articleLink(href, sameSite) {
+  if (!href) return { href, external: false };
+  const local = sameSite(href);
+  if (local !== null) return { href: local, external: false };
+  return { href, external: /^(https?:)?\/\//iu.test(href) };
+}