# Site components Shared pieces for the Pathwright site: query result cards and rows, bylines, and the date formatter. Each result component reads its own Source's metadata. The `$author` and `$edition` bindings follow the page being shown; they are exported by `plugins/pathwright.plugin.ts`. --- # Card grid Lays out query result cards in a responsive grid. ```html

``` --- # Article card A blog post or update with its artwork, series, title, summary and date. ```html

{{ series }} {{ title }} {{ description }} {{ date }} ``` --- # Edition card A Collider edition with its cover image and date. ```html

{{ date }} {{ title }} ``` --- # Change row A changelog entry in the timeline: date, title, summary, and a badge while it is a draft. ```html {{ date }} {{ title }}Draft {{ description }} ``` --- # Person chip An author's portrait and name, linking to their page. ```html

{{ title }} ``` --- # Person card A team member with their portrait and focus. ```html

{{ title }}{{ description }} ``` --- # Edition chip The Collider edition a link appeared in, read through the `edition` binding. ```html From Collider · {{ $edition.date }} ``` --- # Byline The author of the page being shown, read through the `author` binding. ```html

{{ $author.title }} ``` --- # Page meta The series, date and author above a post's title. ```html

``` --- # Change meta The date and draft status above a changelog entry. ```html

Changelog{{ source.date }}Draft

``` --- # Embed bar The title bar the Pathwright app shows above the changelog in its side panel. It appears only inside a frame (`html[data-pmx-embedded]`), where the site's header and footer are hidden. Close asks the app to close the panel with the `{ action: "close" }` message it listens for. Inside a frame, links that leave the changelog open in a new tab instead of replacing the panel. ```html

Changelog

``` ```js const embedded = () => document.documentElement.hasAttribute("data-pmx-embedded") const inChangelog = (url) => url.origin === location.origin && /^\/changelog(?:\/|$)/.test(url.pathname) on(".embed-bar-close", "click", () => window.parent.postMessage({ action: "close" }, "*")) on(window, "click", (event) => { if (!embedded() || event.defaultPrevented || event.button !== 0) return if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return const link = event.target instanceof Element ? event.target.closest("a[href]") : null if (!link || link.target || link.hasAttribute("download")) return const url = new URL(link.href, location.href) if (!/^https?:$/.test(url.protocol) || inChangelog(url)) return event.preventDefault() event.stopPropagation() window.open(url.href, "_blank", "noopener") }, { capture: true }) ``` --- # Site dates Formats every `time[datetime]` holding an ISO date as a readable date, such as "Jun 16, 2026", including content that arrives after navigation. ```html ``` ```js const format = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" }) function run() { for (const time of document.querySelectorAll("time[datetime]")) { const value = time.getAttribute("datetime") if (!/^\d{4}-\d{2}-\d{2}/.test(value ?? "") || time.dataset.formatted === value) continue const date = new Date(`${value.slice(0, 10)}T00:00:00Z`) if (Number.isNaN(date.getTime())) continue time.textContent = format.format(date) time.dataset.formatted = value } } run() const observer = new MutationObserver(run) observer.observe(document.body, { childList: true, subtree: true }) cleanup(() => observer.disconnect()) ``` --- # Person avatar The portrait at the top of a person's page. ```html

```