@mvarble/mesearch-ui 0.0.0-stage → 0.1.0

package/dist/reading.svelte.js

@@ -0,0 +1,4 @@
+// How far through the current document the reader is, from 0 to 1, or null
+// on a page that is not a document. The document page sets it; the rail shows
+// it.
+export const reading = $state({ progress: null });

package/dist/server.d.ts

@@ -0,0 +1,26 @@
+import { type KatexMacros } from '@mvarble/mesearch-markdown/katex';
+import { type GraphTuning } from './graph-layout.js';
+import type { DocumentRef, GraphLink, GraphNode } from './types.js';
+export declare function inlineHtml(text: string, macros?: KatexMacros): string;
+export declare function layoutGraph(documents: Array<DocumentRef & {
+    sequenced?: boolean;
+}>, links: GraphLink[], tuning?: GraphTuning): GraphNode[];
+export interface ReferenceSource {
+    kind: string;
+    title: string;
+    year: string;
+    authors: Array<{
+        fullname: string;
+    }>;
+    journal?: string;
+    volume?: string;
+    number?: string;
+    pages?: string;
+    series?: string;
+    edition?: string;
+    publisher?: string;
+    institution?: string;
+    doi?: string;
+    url?: string;
+}
+export declare function referenceHtml(source: ReferenceSource, macros?: KatexMacros): string;

package/dist/server.js

@@ -0,0 +1,115 @@
+// For a site's server code: what is best done once, at build time, so that a
+// page ships finished HTML rather than the libraries that made it.
+import katex from 'katex';
+import { baseMacros } from '@mvarble/mesearch-markdown/katex';
+import { DEFAULT_TUNING, depths, estimateWidth, layout, NODE_HEIGHT, } from './graph-layout.js';
+const escapeHtml = (text) => text.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+// A short piece of text --- a title, a heading, a summary --- as HTML, with its
+// inline `$...$` math rendered. `macros` are layered over the base table.
+export function inlineHtml(text, macros = {}) {
+    const all = { ...baseMacros, ...macros };
+    return text
+        .split(/(\$[^$]+\$)/g)
+        .map((part) => part.length > 2 && part.startsWith('$') && part.endsWith('$')
+        ? katex.renderToString(part.slice(1, -1), {
+            macros: { ...all },
+            throwOnError: false,
+            output: 'html',
+        })
+        : escapeHtml(part))
+        .join('');
+}
+// The graph's nodes, laid out by running the force simulation to rest, for
+// `<Graph>` to draw as it is --- with or without JavaScript.
+export function layoutGraph(documents, links, tuning = DEFAULT_TUNING) {
+    const keys = documents.map((doc) => doc.key);
+    const depth = depths(keys, links);
+    const nodes = documents.map((doc) => ({
+        id: doc.key,
+        width: estimateWidth(doc.title),
+        height: NODE_HEIGHT,
+        depth: depth.get(doc.key) ?? 0,
+    }));
+    const known = new Set(keys);
+    const positions = layout(nodes, links
+        .filter((link) => known.has(link.from) && known.has(link.to))
+        .map((link) => ({ source: link.from, target: link.to, style: link.style })), tuning);
+    return documents.map((doc, i) => ({
+        key: doc.key,
+        kind: doc.kind,
+        url: doc.url,
+        title: doc.title,
+        titleHtml: doc.titleHtml,
+        x: positions.get(doc.key).x,
+        y: positions.get(doc.key).y,
+        width: nodes[i].width,
+        depth: nodes[i].depth,
+        sequenced: doc.sequenced ?? false,
+    }));
+}
+const BOOKISH = /^(book|thesis|phdthesis|mastersthesis|manual|booklet|proceedings)$/i;
+// A reference as one short paragraph of HTML: who, what, where, when, and a
+// link when there is one. Braces protecting capitals in BibTeX are dropped,
+// and inline math in a title is rendered.
+export function referenceHtml(source, macros = {}) {
+    // Without the braces that protect capitals, except within math.
+    const clean = (text) => (text ?? '')
+        .split(/(\$[^$]*\$)/g)
+        .map((part, i) => (i % 2 ? part : part.replace(/[{}]/g, '')))
+        .join('')
+        .trim();
+    const names = source.authors.map((author) => escapeHtml(clean(author.fullname)));
+    const who = names.length <= 2
+        ? names.join(' and ')
+        : `${names.slice(0, -1).join(', ')} and ${names.at(-1)}`;
+    const title = inlineHtml(clean(source.title), macros);
+    const journal = clean(source.journal);
+    const parts = [];
+    if (who)
+        parts.push(who);
+    if (journal) {
+        parts.push(title);
+        let venue = `<i>${escapeHtml(journal)}</i>`;
+        if (source.volume)
+            venue += ` ${escapeHtml(clean(source.volume))}`;
+        if (source.number)
+            venue += `(${escapeHtml(clean(source.number))})`;
+        if (source.pages)
+            venue += `, ${escapeHtml(clean(source.pages).replace(/-+/g, '–'))}`;
+        parts.push(venue);
+    }
+    else {
+        parts.push(BOOKISH.test(source.kind) || !source.kind ? `<i>${title}</i>` : title);
+        const series = clean(source.series);
+        if (series) {
+            const volume = clean(source.volume);
+            parts.push(escapeHtml(volume ? `${series} ${volume}` : series));
+        }
+        const edition = clean(source.edition);
+        if (edition)
+            parts.push(escapeHtml(/edition/i.test(edition) ? edition : `${ordinal(edition)} edition`));
+    }
+    const house = clean(source.publisher) || clean(source.institution);
+    const year = clean(source.year);
+    if (house || year)
+        parts.push(escapeHtml([house, year].filter(Boolean).join(', ')));
+    let html = parts.join('. ') + '.';
+    const doi = clean(source.doi);
+    const url = clean(source.url);
+    if (doi) {
+        const href = `https://doi.org/${encodeURI(doi)}`;
+        html += ` <a href="${escapeHtml(href)}">doi:${escapeHtml(doi)}</a>`;
+    }
+    else if (/^https?:\/\//.test(url)) {
+        html += ` <a href="${escapeHtml(url)}">${escapeHtml(new URL(url).host)}</a>`;
+    }
+    return html;
+}
+// `2` as `2nd`; anything already in words is left as it is.
+function ordinal(text) {
+    if (!/^\d+$/.test(text))
+        return text;
+    const n = Number(text);
+    const suffix = n % 100 >= 11 && n % 100 <= 13 ? 'th' : (['th', 'st', 'nd', 'rd'][n % 10] ?? 'th');
+    return `${n}${suffix}`;
+}

package/dist/settings.d.ts

@@ -0,0 +1,10 @@
+export interface Settings {
+    lang: string;
+    kinds: Record<string, string>;
+}
+export declare const settings: Settings;
+export declare function configure(given: Partial<Settings>): void;
+export declare function formatDate(date: Date): string;
+export declare const isoDate: (date: Date) => string;
+export declare const kindLabel: (kind: string) => string;
+export declare const plain: (text: string) => string;

package/dist/settings.js

@@ -0,0 +1,28 @@
+// What the components need to know about the site that is not data: the
+// language dates are written in, and what each kind of document is called.
+// A site sets these once, before rendering, with `configure`.
+export const settings = {
+    lang: 'en',
+    kinds: { concept: 'Concept', writeup: 'Writeup', sequence: 'Sequence', post: 'Post' },
+};
+export function configure(given) {
+    if (given.lang)
+        settings.lang = given.lang;
+    if (given.kinds)
+        settings.kinds = { ...settings.kinds, ...given.kinds };
+    formatter = undefined;
+}
+let formatter;
+export function formatDate(date) {
+    formatter ??= new Intl.DateTimeFormat(settings.lang, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        timeZone: 'UTC',
+    });
+    return formatter.format(date);
+}
+export const isoDate = (date) => date.toISOString().slice(0, 10);
+export const kindLabel = (kind) => settings.kinds[kind] ?? kind.slice(0, 1).toUpperCase() + kind.slice(1);
+// A title as plain text: inline math loses its dollar signs.
+export const plain = (text) => text.replace(/\$([^$]+)\$/g, '$1');

package/dist/styles/base.css

@@ -0,0 +1,136 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    background: var(--paper);
+    -webkit-text-size-adjust: 100%;
+    scroll-padding-top: 1.5rem;
+}
+
+body {
+    margin: 0;
+    color: var(--ink);
+    background: var(--paper);
+    font: 400 var(--font-size-body) / var(--line-height-body) var(--font-body);
+    font-optical-sizing: auto;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+}
+
+::selection {
+    background: var(--selection);
+}
+
+a {
+    color: inherit;
+}
+
+:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    border-radius: 2px;
+}
+
+button {
+    font: inherit;
+    color: inherit;
+}
+
+img,
+svg,
+video {
+    max-width: 100%;
+}
+
+/* Controls that only work with JavaScript stay out of a page read without
+ * it; `app.html` adds `.js` before anything paints. */
+html:not(.js) .needs-js {
+    display: none !important;
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+}
+
+/* The small capitals that label sections and kinds throughout. */
+.eyebrow {
+    font: 600 var(--font-size-eyebrow) / 1.2 var(--font-ui);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--muted);
+}
+
+/* Every kind of document has a colour; one without its own takes the accent. */
+[class*='kind-'] {
+    --kind: var(--accent);
+    --kind-soft: var(--accent-soft);
+}
+
+.kind-concept {
+    --kind: var(--concept);
+    --kind-soft: var(--concept-soft);
+}
+
+.kind-writeup {
+    --kind: var(--writeup);
+    --kind-soft: var(--writeup-soft);
+}
+
+.kind-sequence {
+    --kind: var(--sequence);
+    --kind-soft: var(--sequence-soft);
+}
+
+/* A small labelled link to a document, used wherever documents are listed in
+ * passing. */
+.chip {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.4em;
+    padding: 0.18em 0.65em 0.22em;
+    border: 1px solid var(--rule);
+    border-radius: 999px;
+    background: var(--paper-raised);
+    font: 500 var(--font-size-ui) / 1.4 var(--font-ui);
+    color: var(--ink-soft);
+    text-decoration: none;
+    transition:
+        border-color 120ms,
+        background 120ms;
+}
+
+.chip::before {
+    content: '';
+    width: 0.5em;
+    height: 0.5em;
+    border-radius: 50%;
+    background: var(--kind, var(--accent));
+    flex: none;
+    transform: translateY(-0.05em);
+}
+
+.chip:hover {
+    border-color: var(--kind, var(--accent));
+    background: var(--kind-soft, var(--accent-soft));
+}
+
+button.chip {
+    cursor: pointer;
+}
+
+.chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}

package/dist/styles/index.css

@@ -0,0 +1,6 @@
+/* Everything a page needs to look like mesearch: the variables, the base
+ * styles, and the styles of rendered documents. Fonts and KaTeX's own
+ * stylesheet are imported separately, so a site can choose its own. */
+@import './tokens.css';
+@import './base.css';
+@import './prose.css';

package/dist/styles/prose.css

@@ -0,0 +1,203 @@
+/* A document's rendered content. Its headings arrive one level down --- a `#`
+ * is an <h2> --- since the page's <h1> is its title. Body text is justified, with hyphenation to
+ * keep the gaps even, and inline math never breaks across a line (see the
+ * shared KaTeX stylesheet). */
+
+.prose {
+    text-align: justify;
+    hyphens: auto;
+    -webkit-hyphens: auto;
+    hanging-punctuation: first;
+    overflow-wrap: break-word;
+}
+
+.prose > :first-child {
+    margin-top: 0;
+}
+
+.prose p,
+.prose ul,
+.prose ol,
+.prose dl {
+    margin: 0 0 1em;
+}
+
+.prose li {
+    margin-bottom: 0.35em;
+}
+
+.prose li > p {
+    margin-bottom: 0.4em;
+}
+
+.prose :is(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--font-heading);
+    color: var(--ink);
+    text-align: left;
+    hyphens: manual;
+    line-height: 1.25;
+    margin: 2.1em 0 0.6em;
+    scroll-margin-top: 1.5rem;
+    text-wrap: balance;
+}
+
+.prose h2 {
+    font-size: var(--font-size-h1);
+    font-weight: 600;
+    letter-spacing: -0.01em;
+}
+
+.prose h3 {
+    font-size: var(--font-size-h2);
+    font-weight: 600;
+}
+
+.prose h4 {
+    font-size: var(--font-size-h3);
+    font-weight: 600;
+}
+
+.prose :is(h5, h6) {
+    font-size: 1em;
+    font-weight: 700;
+}
+
+.prose a {
+    color: var(--accent);
+    text-decoration-line: underline;
+    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.18em;
+    transition: text-decoration-color 120ms;
+}
+
+.prose a:hover {
+    text-decoration-color: var(--accent);
+}
+
+/* A citation is a quiet aside in the sentence, not a link to follow away: no
+ * underline until it is pointed at, and its reference is in the tooltip. */
+.prose a.citation {
+    text-decoration-color: transparent;
+    font-variant-numeric: lining-nums;
+}
+
+.prose a.citation:hover {
+    text-decoration-color: currentColor;
+}
+
+.prose strong {
+    font-weight: 650;
+}
+
+.prose blockquote {
+    margin: 1.6em 0;
+    padding: 0.1em 0 0.1em 1.25em;
+    border-left: 2px solid var(--rule-strong);
+    color: var(--ink-soft);
+    font-style: italic;
+}
+
+.prose hr {
+    border: none;
+    height: 1px;
+    background: var(--rule);
+    margin: 2.8em auto;
+    width: 40%;
+}
+
+.prose img,
+.prose video {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 1.8em auto;
+    border-radius: var(--radius);
+}
+
+.prose figure {
+    margin: 2em 0;
+}
+
+.prose figcaption {
+    font: var(--font-size-small) / 1.5 var(--font-ui);
+    color: var(--muted);
+    text-align: center;
+    margin-top: 0.6em;
+}
+
+.prose table {
+    display: block;
+    overflow-x: auto;
+    border-collapse: collapse;
+    margin: 1.8em 0;
+    font-size: var(--font-size-small);
+    text-align: left;
+    hyphens: manual;
+}
+
+.prose th,
+.prose td {
+    padding: 0.5em 0.9em;
+    border-bottom: 1px solid var(--rule);
+}
+
+.prose th {
+    font: 600 var(--font-size-ui) / 1.4 var(--font-ui);
+    color: var(--muted);
+    border-bottom-color: var(--rule-strong);
+}
+
+.prose code {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-mono);
+    background: var(--code-background);
+    border-radius: 4px;
+    padding: 0.08em 0.32em;
+    hyphens: none;
+}
+
+.prose pre.shiki {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    line-height: 1.65;
+    text-align: left;
+    hyphens: none;
+    margin: 1.6em 0;
+    padding: 1em 1.2em;
+    overflow-x: auto;
+    border: 1px solid var(--rule);
+    border-radius: var(--radius);
+    background: var(--code-background) !important;
+}
+
+.prose pre.shiki code {
+    background: none;
+    padding: 0;
+    font-size: inherit;
+}
+
+/* Shiki emits both themes at once, as `--shiki-dark` custom properties on
+ * every token; the dark theme switches to them. */
+:root[data-theme='dark'] .prose .shiki,
+:root[data-theme='dark'] .prose .shiki span {
+    color: var(--shiki-dark) !important;
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+.prose .math-scroll-container {
+    margin: 0.4em 0;
+}
+
+.prose .katex-display {
+    text-align: center;
+}
+
+/* Footnotes, as mdsvex renders them. */
+.prose .footnotes {
+    margin-top: 3em;
+    font-size: var(--font-size-small);
+    color: var(--ink-soft);
+}

package/dist/styles/tokens.css

@@ -0,0 +1,111 @@
+/* Every site-wide decision is a variable here, so that a project's
+ * `mesearch.css` --- loaded after this --- can change any of them. The light
+ * theme is the default, and the one a page read without JavaScript gets; the
+ * dark theme applies when `<html data-theme="dark">`. */
+
+:root {
+    color-scheme: light;
+
+    /* Type. Body text is a serif built for long reading; the interface around
+     * it is a quiet sans. */
+    --font-serif: 'Source Serif 4 Variable', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
+    --font-sans:
+        'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
+        sans-serif;
+    --font-mono: 'Fira Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
+    --font-body: var(--font-serif);
+    --font-heading: var(--font-serif);
+    --font-ui: var(--font-sans);
+
+    --font-size-body: 1.0625rem;
+    --line-height-body: 1.72;
+    --font-size-small: 0.9rem;
+    --font-size-ui: 0.875rem;
+    --font-size-eyebrow: 0.72rem;
+    --font-size-title: clamp(2rem, 1.4rem + 2.4vw, 2.85rem);
+    --font-size-h1: 1.75rem;
+    --font-size-h2: 1.4rem;
+    --font-size-h3: 1.15rem;
+    --font-size-mono: 0.86em;
+    --katex-font-size: 1.04em;
+    --katex-font-size-hidpi: 1.04em;
+
+    /* Paper and ink. */
+    --paper: #f9f8f3;
+    --paper-raised: #fefdf9;
+    --paper-sunken: #f0efe6;
+    --ink: #1a1d1c;
+    --ink-soft: #343a38;
+    --muted: #626a63;
+    --faint: #9aa096;
+    --rule: #e2e2d6;
+    --rule-strong: #cbcdbd;
+    --selection: rgba(61, 58, 140, 0.16);
+
+    /* One accent, and a colour for each kind of document. */
+    --accent: #3d3a8c;
+    --accent-ink: #f8f7ff;
+    --accent-soft: rgba(61, 58, 140, 0.09);
+    --concept: #24668f;
+    --concept-soft: rgba(36, 102, 143, 0.1);
+    --writeup: #9a3a63;
+    --writeup-soft: rgba(154, 58, 99, 0.1);
+    --sequence: #3d7046;
+    --sequence-soft: rgba(61, 112, 70, 0.12);
+
+    /* The graph. */
+    --graph-background: var(--paper-raised);
+    --graph-grid: rgba(90, 104, 90, 0.07);
+    --graph-edge: #b0b4a4;
+    --graph-edge-strong: #626a63;
+    --graph-node: var(--paper-raised);
+    --graph-label: var(--ink);
+
+    --code-background: #f1f0e7;
+
+    /* Shape and space. */
+    --radius: 6px;
+    --radius-large: 14px;
+    --shadow: 0 1px 2px rgba(20, 28, 30, 0.06), 0 8px 24px rgba(20, 28, 30, 0.08);
+    --shadow-strong: 0 2px 6px rgba(20, 28, 30, 0.08), 0 24px 60px rgba(20, 28, 30, 0.18);
+    --measure: 54rem;
+    --rail-width: 4rem;
+    --gutter: clamp(1.1rem, 4vw, 2.5rem);
+    --sidebar-left: 15rem;
+    --sidebar-right: 14rem;
+}
+
+:root[data-theme='dark'] {
+    color-scheme: dark;
+
+    --paper: #12141c;
+    --paper-raised: #181b25;
+    --paper-sunken: #0d0f15;
+    --ink: #e7e6df;
+    --ink-soft: #c9c9c0;
+    --muted: #969a95;
+    --faint: #666a6b;
+    --rule: #262a38;
+    --rule-strong: #383e54;
+    --selection: rgba(169, 168, 240, 0.25);
+
+    --accent: #a9a8f0;
+    --accent-ink: #14132b;
+    --accent-soft: rgba(169, 168, 240, 0.12);
+    --concept: #86bfe6;
+    --concept-soft: rgba(134, 191, 230, 0.13);
+    --writeup: #eb9bb8;
+    --writeup-soft: rgba(235, 155, 184, 0.13);
+    --sequence: #98cc9a;
+    --sequence-soft: rgba(152, 204, 154, 0.13);
+
+    --graph-background: #151822;
+    --graph-grid: rgba(200, 210, 230, 0.05);
+    --graph-edge: #4a5168;
+    --graph-edge-strong: #a3a69f;
+
+    --code-background: #1a1e2a;
+
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
+    --shadow-strong: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
+}

package/dist/theme.svelte.d.ts

@@ -0,0 +1,12 @@
+export type ThemeChoice = 'system' | 'light' | 'dark';
+export declare const THEME_SCRIPT = "(function () {\n    var root = document.documentElement;\n    var theme;\n    root.classList.add('js');\n    try {\n        theme = localStorage.getItem('mesearch:theme');\n    } catch (e) {}\n    if (theme !== 'light' && theme !== 'dark') {\n        theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    root.dataset.theme = theme;\n})();";
+declare class Theme {
+    #private;
+    choice: ThemeChoice;
+    systemDark: boolean;
+    resolved: "light" | "dark";
+    start(): void;
+    toggle(): void;
+}
+export declare const theme: Theme;
+export {};