How OpenChronology was built

#99 · Share timelines and their elements: links, previews, embeds and SEO

2026-10-12T03:37:10Z CE

• timeline-app
• pull request
• sharing

Closes #60, closes #61, closes #95, closes #97. Makes timelines, and the moments, durations, searches and views in them, shareable: links into a timeline, a share dialog, link previews that look native on social sites, embeds for other websites (plus oEmbed), and what search engines need. Guide: `docs/sharing.md`. ## Links (#61) - Following the issue, a fragment names what to look at on a timeline's page: - `#moment/ ` - `#duration/ ` - `#search/ ` - `#view/ .. ` (exact coordinates) The grammar lives in `src/links.ts` and is unit-tested. - The editor opens what a link names: it centres the moment and opens its details, fits the duration, or runs the search. - A new `moment` query kind looks a moment up by ID alone, using the `(timeline_id, id)` primary key. - The `duration` lookup now also returns the duration's band. - The page's address follows what is open, so it can always be copied. - The frame tells the page what is open; the page updates its address with `replaceState`. - Closing the moment or duration removes the fragment. - Social sites and crawlers ignore fragments, so moments and durations also get pages of their own: `/timelines/ /moments/ ` and `/durations/ `. These pages open the timeline at the entity, and they are what Share offers. - Guests can now open durations by link. Before, a guest had no workspace to load a duration from. ## Share dialog and social previews (#97) - **Share** buttons: - in the timeline's navigation; - in moment and duration details; - under search results; - **Share this view** in the context menu. - The dialog offers: - Copy link, and the device's native share sheet where available; - Facebook, X, LinkedIn, Reddit, Bluesky and email, as plain share-page links with no third-party scripts; - the embed code. - Social sites and embedding are offered for public timelines only. For a private timeline the dialog explains that only members can follow the link, and points the owner to the settings. - Timeline, moment and duration pages carry: - a title and description; - a canonical link; - Open Graph tags (`og:title`, `og:description`, `og:url`, `og:site_name`, `og:image` at 1200×630); - a `summary_large_image` Twitter card. On Facebook and others this renders as a large-image card. - Preview images (`opengraph-image` routes, built with `next/og`) show the title, the facts or time, the notes, and a strip of the timeline's moments with the shared moment or duration marked. - Previews are built as a guest sees the timeline. A private timeline only ever gets the site's own card, and its pages are `noindex`, so nothing private leaks through a link preview. ## Embeds (#95) - `/embed/ ` serves the editor in embed mode: - read-only, with only the title, search, zoom and Fit all; - an **Open on OpenChronology** link that follows what is open. - Embeds are anonymous: requests use `credentials: 'omit'` and no session is loaded. Even a signed-in owner sees exactly what a guest sees, so an embed can't be used to act as the visitor. - Private timelines are not embedded (404). - The embed's policy is `frame-ancestors *` by default. Operators can restrict it with `EMBED_FRAME_ANCESTORS`. Every other page keeps `frame-ancestors 'none'`, or `'self'` for the editor frame. - `/api/oembed` answers rich JSON embeds for timeline, moment and duration addresses and link fragments: - it respects `maxwidth` and `maxheight`; - it returns the preview image as the thumbnail. Pages announce it with ` `. ## SEO (#60) - Each page has a title, description and canonical link; profiles get metadata too. `metadataBase` comes from `APP_ORIGIN`. - `/robots.txt` allows pages and `/api/oembed`, and disallows the API, account pages, the bare editor and embeds. It names the sitemap. - `/sitemap.xml` lists up to 45,000 public timelines, newest changes first, and up to 4,000 owners' profiles. - The editor is an interactive iframe, so each timeline page also renders a text summary for screen readers and crawlers. It includes the title, d…

Open #99 · Share timelines and their elements: links, previews, embeds and SEO in the timeline