@pathmx/core 0.5.0

package/plugins/source-preview/client.ts

@@ -0,0 +1,256 @@
+import type { SourcePreview } from "./model.ts"
+import "./preview.css"
+
+const selector = "a[data-pmx-source-preview]"
+const showDelay = 300
+const hideDelay = 120
+const edge = 12
+const gap = 4
+
+type PreviewElements = Readonly<{
+  root: HTMLAnchorElement
+  image: HTMLImageElement
+  source: HTMLElement
+  title: HTMLElement
+  description: HTMLElement
+}>
+
+let elements: PreviewElements | undefined
+let activeLink: HTMLAnchorElement | undefined
+let showTimer: number | undefined
+let hideTimer: number | undefined
+let requestVersion = 0
+const summaries = new Map<string, Promise<SourcePreview | undefined>>()
+
+function linkFrom(target: EventTarget | null) {
+  if (!(target instanceof Element)) return
+  const link = target.closest(selector)
+  return link instanceof HTMLAnchorElement ? link : undefined
+}
+
+function clearTimer(timer: number | undefined) {
+  if (timer !== undefined) window.clearTimeout(timer)
+}
+
+function ensurePreview() {
+  if (elements) return elements
+
+  const root = document.createElement("a")
+  root.id = "pmx-source-preview"
+  root.className = "pmx-source-preview"
+  root.popover = "manual"
+  root.tabIndex = -1
+
+  const card = document.createElement("span")
+  card.className = "pmx-source-preview-card"
+
+  const image = document.createElement("img")
+  image.className = "pmx-source-preview-image"
+  image.alt = ""
+  image.hidden = true
+
+  const body = document.createElement("span")
+  body.className = "pmx-source-preview-body"
+
+  const source = document.createElement("span")
+  source.className = "pmx-source-preview-source"
+
+  const title = document.createElement("strong")
+  title.className = "pmx-source-preview-title"
+
+  const description = document.createElement("span")
+  description.className = "pmx-source-preview-description"
+
+  body.append(source, title, description)
+  card.append(image, body)
+  root.append(card)
+  root.addEventListener("pointerenter", () => clearTimer(hideTimer))
+  root.addEventListener("pointerleave", (event) => {
+    const next = event.relatedTarget
+    if (next instanceof Node && activeLink?.contains(next)) return
+    scheduleHide()
+  })
+  root.addEventListener("click", hide)
+  document.body.append(root)
+  elements = { root, image, source, title, description }
+  return elements
+}
+
+function isOpen(element: HTMLElement) {
+  return element.hasAttribute("data-open")
+}
+
+function openPopover(element: HTMLElement) {
+  element.setAttribute("data-open", "")
+  try {
+    element.showPopover()
+  } catch {
+    // The data attribute supplies a non-Popover fallback.
+  }
+}
+
+function closePopover(element: HTMLElement) {
+  element.removeAttribute("data-open")
+  try {
+    element.hidePopover()
+  } catch {
+    // It may already be closed or the browser may not implement Popover.
+  }
+}
+
+function hide() {
+  requestVersion++
+  clearTimer(showTimer)
+  clearTimer(hideTimer)
+  showTimer = undefined
+  hideTimer = undefined
+  activeLink = undefined
+  if (elements) closePopover(elements.root)
+}
+
+function scheduleHide() {
+  clearTimer(showTimer)
+  clearTimer(hideTimer)
+  hideTimer = window.setTimeout(hide, hideDelay)
+}
+
+function fetchSummary(id: string) {
+  const cached = summaries.get(id)
+  if (cached) return cached
+  const pending = fetch(
+    `/api/source-preview/summary?id=${encodeURIComponent(id)}`,
+    { headers: { Accept: "application/json" } },
+  )
+    .then((response) => (response.ok ? response.json() : undefined))
+    .then((value) => value as SourcePreview | undefined)
+    .catch(() => undefined)
+  summaries.set(id, pending)
+  return pending
+}
+
+function renderSummary(summary: SourcePreview) {
+  const { root, image, source, title, description } = ensurePreview()
+  root.href = summary.href
+  root.setAttribute("aria-label", `Open ${summary.title}`)
+  source.textContent = summary.source?.title ?? ""
+  source.hidden = !summary.source
+  title.textContent = summary.title
+  description.textContent = summary.description ?? ""
+  description.hidden = !summary.description
+
+  image.hidden = !summary.image
+  image.removeAttribute("src")
+  if (summary.image) {
+    image.onerror = () => {
+      image.hidden = true
+      if (activeLink && isOpen(root)) positionPreview(activeLink, root)
+    }
+    image.src = summary.image
+  }
+  return root
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), Math.max(min, max))
+}
+
+function positionPreview(link: HTMLAnchorElement, element: HTMLElement) {
+  element.style.left = "0px"
+  element.style.top = "0px"
+  const linkRect = link.getBoundingClientRect()
+  const previewRect = element.getBoundingClientRect()
+  const above = linkRect.top - edge
+  const below = innerHeight - linkRect.bottom - edge
+  const placement =
+    below >= previewRect.height || below >= above ? "below" : "above"
+  const top =
+    placement === "below"
+      ? linkRect.bottom + gap
+      : linkRect.top - previewRect.height - gap
+  const left = clamp(
+    linkRect.left + linkRect.width / 2 - previewRect.width / 2,
+    edge,
+    innerWidth - previewRect.width - edge,
+  )
+  const arrow = clamp(
+    linkRect.left + linkRect.width / 2 - left,
+    18,
+    previewRect.width - 18,
+  )
+
+  element.dataset.placement = placement
+  element.style.left = `${left}px`
+  element.style.top = `${clamp(top, edge, innerHeight - previewRect.height - edge)}px`
+  element.style.setProperty("--pmx-source-preview-arrow-x", `${arrow}px`)
+}
+
+async function show(link: HTMLAnchorElement, version: number) {
+  const id = link.dataset.pmxSourcePreview
+  if (!id) return
+  const summary = await fetchSummary(id)
+  if (!summary || version !== requestVersion || activeLink !== link) return
+
+  const element = renderSummary(summary)
+  openPopover(element)
+  positionPreview(link, element)
+}
+
+function scheduleShow(link: HTMLAnchorElement, delay = showDelay) {
+  if (activeLink === link && elements && isOpen(elements.root)) {
+    clearTimer(hideTimer)
+    return
+  }
+  clearTimer(showTimer)
+  clearTimer(hideTimer)
+  activeLink = link
+  const version = ++requestVersion
+  showTimer = window.setTimeout(() => void show(link, version), delay)
+}
+
+const hover = matchMedia("(hover: hover) and (pointer: fine)")
+document.addEventListener("pointerover", (event) => {
+  if (!hover.matches || event.pointerType === "touch") return
+  const link = linkFrom(event.target)
+  if (!link) return
+  const previous = event.relatedTarget
+  if (previous instanceof Node && link.contains(previous)) return
+  scheduleShow(link)
+})
+
+document.addEventListener("pointerout", (event) => {
+  if (!hover.matches) return
+  const link = linkFrom(event.target)
+  if (!link || link !== activeLink) return
+  const next = event.relatedTarget
+  if (
+    next instanceof Node &&
+    (link.contains(next) || elements?.root.contains(next))
+  ) {
+    return
+  }
+  scheduleHide()
+})
+
+document.addEventListener("focusin", (event) => {
+  const link = linkFrom(event.target)
+  if (link) scheduleShow(link, 0)
+})
+
+document.addEventListener("focusout", (event) => {
+  const link = linkFrom(event.target)
+  if (!link || link !== activeLink) return
+  const next = event.relatedTarget
+  if (next instanceof Node && elements?.root.contains(next)) return
+  scheduleHide()
+})
+
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape" && elements && isOpen(elements.root)) hide()
+})
+
+document.addEventListener("pmx:render", () => {
+  summaries.clear()
+  hide()
+})
+addEventListener("resize", hide, { passive: true })
+addEventListener("scroll", hide, { passive: true })

package/plugins/source-preview/index.ts

@@ -0,0 +1,132 @@
+import { withReadCache } from "../../host/response.ts"
+import { publicPath } from "../../server/router.ts"
+import {
+  route,
+  type AppContext,
+  type Plugin,
+  type ViewContext,
+} from "../types.ts"
+import type { SourcePreview } from "./model.ts"
+
+export type { SourcePreview } from "./model.ts"
+
+const clientEntry = new URL("./client.ts", import.meta.url)
+const previewAttribute = "data-pmx-source-preview"
+
+function sourceForHref(href: string, ctx: ViewContext, app: AppContext) {
+  const authoredHref = href.trim()
+  if (!authoredHref) return
+  let url: URL
+  try {
+    url = new URL(authoredHref, `http://pathmx.local${ctx.route || "/"}`)
+  } catch {
+    return
+  }
+  if (url.origin !== "http://pathmx.local") return
+  const target = app.sources.resolve(url.pathname)
+  const source = target ? ctx.view.readSource(target.id) : undefined
+  if (!target || !source) return
+
+  let fragment: string | undefined
+  if (url.hash.length > 1) {
+    try {
+      fragment = decodeURIComponent(url.hash.slice(1))
+    } catch {
+      return
+    }
+  }
+  const block = fragment
+    ? source.blocks.find((candidate) => candidate.id === fragment)
+    : undefined
+  if (fragment && !block && target.id === ctx.source.id) return
+  return `${target.id}${fragment ? `#${fragment}` : ""}`
+}
+
+function previewReference(value: string) {
+  const hash = value.indexOf("#")
+  return hash === -1
+    ? { id: value }
+    : { id: value.slice(0, hash), fragment: value.slice(hash + 1) }
+}
+
+function withFragment(href: string, fragment: string | undefined) {
+  return fragment ? `${href}#${encodeURIComponent(fragment)}` : href
+}
+
+function notFound() {
+  return new Response("Not Found", { status: 404 })
+}
+
+/** Add viewer-authorized Source summaries to internal links on demand. */
+export function SourcePreviewPlugin(): Plugin {
+  return {
+    id: "source-preview",
+
+    routes: [
+      route.get("summary", async (ctx) => {
+        const reference = ctx.url.searchParams.get("id")?.trim()
+        if (!reference) return notFound()
+        const resolved = previewReference(reference)
+        if (!resolved.id) return notFound()
+        const target = ctx.source(resolved.id)
+        if (!target) return notFound()
+        const href = publicPath(target)
+        if (ctx.resolve(href)?.id !== target.id) return notFound()
+
+        const source = (await ctx.view()).readSource(target.id)
+        if (!source) return notFound()
+        const block = resolved.fragment
+          ? source.blocks.find(
+              (candidate) => candidate.id === resolved.fragment,
+            )
+          : undefined
+
+        const access = await ctx.readAccess(target)
+        if (access === "denied") return notFound()
+        const title = block?.meta.title || source.meta.title
+        const description = block?.meta.description ?? source.meta.description
+        const image = block?.meta.image ?? source.meta.image
+
+        const preview: SourcePreview = {
+          id: reference,
+          href: withFragment(href, resolved.fragment),
+          title,
+          ...(description ? { description } : {}),
+          ...(image ? { image } : {}),
+          ...(block ? { source: { href, title: source.meta.title } } : {}),
+        }
+        const response = Response.json(preview, {
+          headers: { "Cache-Control": "no-cache" },
+        })
+        return withReadCache(response, access, await ctx.session())
+      }),
+    ],
+
+    streamSelectors(ctx, app) {
+      let proseDisabledDepth = 0
+      return {
+        '[data-pmx-prose="off"]': {
+          element(element) {
+            proseDisabledDepth++
+            element.onEndTag(() => {
+              proseDisabledDepth--
+            })
+          },
+        },
+        ".pmx-prose a[href]": {
+          element(element) {
+            if (proseDisabledDepth) return
+            if (element.getAttribute("download") != null) return
+            const href = element.getAttribute("href")
+            const target = href ? sourceForHref(href, ctx, app) : undefined
+            if (target) element.setAttribute(previewAttribute, target)
+          },
+        },
+      }
+    },
+
+    async documentAssets(ctx) {
+      await ctx.addBrowserBundle(clientEntry, "source-preview")
+    },
+  }
+}

package/plugins/source-preview/model.ts

@@ -0,0 +1,11 @@
+export type SourcePreview = Readonly<{
+  id: string
+  href: string
+  title: string
+  description?: string
+  image?: string
+  source?: Readonly<{
+    href: string
+    title: string
+  }>
+}>

package/plugins/source-preview/preview.css

@@ -0,0 +1,107 @@
+.pmx-source-preview {
+  position: fixed;
+  inset: auto;
+  z-index: 1000;
+  box-sizing: border-box;
+  width: min(22rem, calc(100vw - 1.5rem));
+  max-height: calc(100vh - 1.5rem);
+  margin: 0;
+  padding-block: 0.45rem;
+  overflow: visible;
+  border: 0;
+  background: transparent;
+  color: var(--pmx-color-fg);
+  text-decoration: none;
+}
+
+.pmx-source-preview:not([data-open]) {
+  display: none;
+}
+
+.pmx-source-preview::before {
+  position: absolute;
+  left: var(--pmx-source-preview-arrow-x);
+  z-index: 1;
+  box-sizing: border-box;
+  width: 0.65rem;
+  height: 0.65rem;
+  background: var(--pmx-color-surface);
+  content: "";
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.pmx-source-preview[data-placement="below"]::before {
+  top: 0.15rem;
+  border-block-start: 1px solid var(--pmx-color-border);
+  border-inline-start: 1px solid var(--pmx-color-border);
+}
+
+.pmx-source-preview[data-placement="above"]::before {
+  bottom: 0.15rem;
+  border-block-end: 1px solid var(--pmx-color-border);
+  border-inline-end: 1px solid var(--pmx-color-border);
+}
+
+.pmx-source-preview-card,
+.pmx-source-preview-body,
+.pmx-source-preview-source,
+.pmx-source-preview-title,
+.pmx-source-preview-description {
+  display: block;
+}
+
+.pmx-source-preview-card {
+  max-height: calc(100vh - 2.4rem);
+  overflow: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--pmx-color-border);
+  border-radius: var(--pmx-radius-lg);
+  background: var(--pmx-color-surface);
+  box-shadow: var(--pmx-shadow-md);
+}
+
+.pmx-source-preview-image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 2 / 1;
+  object-fit: cover;
+  border-block-end: 1px solid var(--pmx-color-border);
+}
+
+.pmx-source-preview-image[hidden] {
+  display: none;
+}
+
+.pmx-source-preview-body {
+  padding: 0.9rem 1rem 1rem;
+}
+
+.pmx-source-preview-title {
+  font-family: var(--pmx-font-heading);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.pmx-source-preview-source {
+  margin-block-end: 0.35rem;
+  color: var(--pmx-color-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.pmx-source-preview-source[hidden] {
+  display: none;
+}
+
+.pmx-source-preview-description {
+  margin-block-start: 0.45rem;
+  color: var(--pmx-color-muted);
+  font-size: 0.925rem;
+  line-height: 1.45;
+}
+
+.pmx-source-preview-description[hidden] {
+  display: none;
+}

package/plugins/styles.ts

@@ -0,0 +1,145 @@
+import { cachedRouteTargets } from "../invalidation.ts"
+import { parseLinks, type Source, type SourceLink } from "../source/index.ts"
+import type {
+  DependencyContext,
+  DocumentAsset,
+  DocumentStylesheet,
+  Plugin,
+} from "./types.ts"
+import { directiveDefinition } from "./directive-definitions.ts"
+
+const MEDIA = new Set(["print", "screen"])
+const EXTERNAL = /^[a-z][a-z\d+.-]*:/i
+
+function resolveTarget(source: Source, target: string) {
+  return target.startsWith("/")
+    ? target
+    : new URL(target, `file://${source.path}`).pathname
+}
+
+function styleLinks(source: Source, links: readonly SourceLink[]) {
+  return links.filter((link) => link.directive?.name === "styles")
+}
+
+function resolveStylesheet(
+  source: Source,
+  link: SourceLink,
+): DocumentStylesheet | undefined {
+  if (link.directive?.name !== "styles") return
+  const raw = link.href.split("#")[0]?.split("?")[0] ?? ""
+  if (
+    !raw ||
+    EXTERNAL.test(raw) ||
+    raw.startsWith("//") ||
+    raw.startsWith("~/")
+  )
+    return
+  const href = resolveTarget(source, raw)
+  if (!href.endsWith(".css")) return
+  const media = link.directive.qualifiers.find((item) => MEDIA.has(item))
+  return { type: "stylesheet", href, ...(media ? { media } : {}) }
+}
+
+function stylesheetHref(asset: DocumentAsset | DocumentStylesheet) {
+  return asset.type === "stylesheet" && "href" in asset ? asset.href : undefined
+}
+
+function pushUnique(assets: DocumentAsset[], asset: DocumentStylesheet) {
+  const href = stylesheetHref(asset)
+  if (href && assets.some((item) => stylesheetHref(item) === href)) return
+  assets.push(asset)
+}
+
+function addStylesheetDependency(
+  dependencies: DependencyContext,
+  asset: DocumentStylesheet,
+) {
+  const href = stylesheetHref(asset)
+  if (href) dependencies.depend({ type: "source", path: href })
+}
+
+function sourceStyleLinks(source: Source) {
+  return source.blocks.length
+    ? source.blocks.flatMap((block) => block.links)
+    : source.links
+}
+
+function globalStylesheets(source: Source, links: readonly SourceLink[]) {
+  const assets: DocumentStylesheet[] = []
+  for (const link of styleLinks(source, links)) {
+    if (!link.directive?.qualifiers.includes("global")) continue
+    const asset = resolveStylesheet(source, link)
+    if (asset) pushUnique(assets, asset)
+  }
+  return assets
+}
+
+function stylesheetSignature(assets: readonly DocumentStylesheet[]) {
+  return assets
+    .map((asset) => `${stylesheetHref(asset) ?? ""}\0${asset.media ?? ""}`)
+    .join("\n")
+}
+
+function authoredGlobalSignature(source?: Source) {
+  return stylesheetSignature(
+    source ? globalStylesheets(source, parseLinks(source.body)) : [],
+  )
+}
+
+export function StylesPlugin(): Plugin {
+  const global = new Map<string, DocumentStylesheet[]>()
+
+  return {
+    id: "styles",
+    index(source) {
+      const assets = globalStylesheets(source, sourceStyleLinks(source))
+      // Only track contributing origins: page() walks this map for every
+      // page, so empty entries would add O(sources) work per page.
+      if (assets.length) global.set(source.path, assets)
+      else global.delete(source.path)
+    },
+
+    unindex(sourcePath) {
+      global.delete(sourcePath)
+    },
+
+    precompile(markdown, ctx) {
+      const styles = styleLinks(
+        ctx.source,
+        ctx.block?.links ?? ctx.source.links,
+      )
+      if (!styles.length) return markdown
+      let current = markdown
+      for (const link of styles)
+        current = current.replace(directiveDefinition("styles", link.href), "")
+      return current
+    },
+
+    invalidate({ before, after }, app) {
+      if (authoredGlobalSignature(before) === authoredGlobalSignature(after))
+        return
+      return { targets: cachedRouteTargets(app.sources.builtPages()) }
+    },
+
+    page(html, ctx) {
+      for (const assets of global.values()) {
+        for (const asset of assets) addStylesheetDependency(ctx, asset)
+      }
+      for (const link of styleLinks(ctx.source, ctx.source.links)) {
+        if (link.directive?.qualifiers.includes("global")) continue
+        const asset = resolveStylesheet(ctx.source, link)
+        if (asset) {
+          ctx.addAsset(asset)
+          addStylesheetDependency(ctx, asset)
+        }
+      }
+      return html
+    },
+
+    documentAssets(ctx) {
+      for (const origin of [...global.keys()].sort()) {
+        for (const asset of global.get(origin) ?? []) ctx.addAsset(asset)
+      }
+    },
+  }
+}

package/plugins/theme/components.ts

@@ -0,0 +1,10 @@
+import { moonIconSvg, sunIconSvg } from "../../icons/lucide.ts"
+import { defineViewComponent } from "../types.ts"
+
+export const SchemeToggleComponent = defineViewComponent<void>({
+  tag: "theme:scheme-toggle",
+  client: new URL("./scheme.js", import.meta.url),
+  render() {
+    return `<button class="pmx-scheme-toggle" type="button" aria-label="Toggle color scheme" title="Toggle color scheme"><span data-pmx-scheme-icon="light">${sunIconSvg}</span><span data-pmx-scheme-icon="dark">${moonIconSvg}</span></button>`
+  },
+})