bookish-press 0.5.24 → 0.5.26

package/dist/components/chapter/Callout.svelte

@@ -25,7 +25,6 @@ export let node;
         padding-bottom: var(--bookish-paragraph-spacing);
         line-height: var(--bookish-paragraph-line-height-tight);
         clear: both;
-        position: relative;
     }
 
     .bookish-callout :global(h2),

package/dist/components/chapter/Embed.svelte

@@ -1,11 +1,11 @@
 <svelte:options immutable={true} />
 
 <script>import { storage } from '../../models/Firebase';
-import { getCaret, getBook, getBase } from '../page/Contexts';
+import { getCaret, getBook, getBase, isEditionEditable, } from '../page/Contexts';
 import Figure from './Figure.svelte';
 import { getContext } from 'svelte';
 export let node;
-export let editable = false;
+export let editable = true;
 export let placeholder = '';
 export let imageOnly = false;
 $: url = node.getURL();
@@ -13,6 +13,7 @@ $: description = node.getDescription();
 let caret = getCaret();
 let book = getBook();
 let base = getBase();
+let editionEditable = isEditionEditable();
 // Bookish editor should have passed down a way to set the active editor.
 let claimCaret = getContext('claimeditor');
 let dragging = false;
@@ -94,7 +95,7 @@ function handleClick() {
         credit={imageOnly ? undefined : node.getCredit()}
     >
         {#if url.trim().length === 0}
-            {#if editable}
+            {#if editable && editionEditable}
                 <p
                     class={`bookish-figure-unspecified ${
                         dragging ? 'bookish-figure-dragging' : ''

package/dist/components/chapter/Figure.svelte

@@ -70,7 +70,6 @@ function focusFigure() {
 
     .caption {
         text-align: center;
-        position: relative;
         color: var(--bookish-muted-color);
         line-height: var(--bookish-paragraph-line-height-tight);
         font-size: var(--bookish-block-font-size);

package/dist/components/chapter/Footnote.svelte

@@ -67,6 +67,7 @@ afterUpdate(() => $chapter?.layoutMarginals());
         font-weight: 300;
         font-size: var(--bookish-small-font-size);
         /* line-height: 1.5em; */
+        text-align: left;
     }
 
     .bookish-footnote-symbol {

package/dist/components/chapter/Paragraph.svelte

@@ -19,10 +19,15 @@ $: classes =
             ($chapter && $chapter.highlightedID === id
                 ? ' bookish-content-highlight'
                 : '');
+$: firstParagraph = $root.getFirstParagraph();
+$: dropcap =
+    placeholder === undefined &&
+        node === firstParagraph &&
+        /^[a-zA-Z]/.test(firstParagraph.getFirstTextNode().getText());
 </script>
 
 {#if level === 0}
-    <p data-nodeid={node.nodeID} class:placeholder
+    <p data-nodeid={node.nodeID} class:placeholder class:dropcap
         ><Format node={node.getFormat()} placeholder={placeholder ?? '¶'} /></p
     >
 {:else}
@@ -54,7 +59,7 @@ $: classes =
     }
 
     /* This implements a drop cap in the first letter of the first text in the first format of the first paragraph of a chapter (but only chapters). */
-    :global(.chapter-content) p:first-of-type:not(.placeholder)::first-letter {
+    p.dropcap::first-letter {
         padding: 0 0.25rem;
         margin: 0 0.25rem 0 0;
         font-size: 4rem;

package/dist/components/chapter/Quote.svelte

@@ -37,12 +37,11 @@ $: credit = node.getCredit();
         font-family: var(--bookish-header-font-family);
         font-weight: 400;
         font-style: italic;
-        padding: 0;
-        margin-top: var(--bookish-paragraph-spacing);
-        margin-bottom: var(--bookish-paragraph-spacing);
-        margin-left: var(--bookish-indent);
-        margin-right: var(--bookish-indent);
-        position: relative;
+        margin: 0;
+        padding-top: 0;
+        padding-bottom: var(--bookish-paragraph-spacing);
+        padding-left: var(--bookish-indent);
+        padding-right: var(--bookish-indent);
     }
 
     .quote > :global(p) {
@@ -52,6 +51,7 @@ $: credit = node.getCredit();
 
     .caption {
         margin-top: 0.5em;
+        margin-right: var(--bookish-indent);
         text-align: right;
         font-family: var(--bookish-header-font-family);
         font-style: italic;

package/dist/components/editor/BookishEditor.svelte

@@ -16,9 +16,8 @@ import ErrorNode from '../../models/chapter/ErrorNode';
 import { caretRangeToIndexRange, indexRangeToCaretRange, } from '../../models/chapter/Caret';
 import commands from './Commands';
 import { afterUpdate, onMount, setContext } from 'svelte';
-import { getCaret, getRoot } from '../page/Contexts';
+import { getCaret } from '../page/Contexts';
 import CaretView from './CaretView.svelte';
-import { writable } from 'svelte/store';
 const IDLE_TIME = 500;
 export let text;
 export let parser;
@@ -159,25 +158,18 @@ afterUpdate(() => {
                     const lineHeight = lineHeightString.endsWith('px')
                         ? parseInt(lineHeightString.substring(0, lineHeightString.length - 2))
                         : undefined;
-                    // Is the caret in relatively positioned ancestors above the editor? Undo their offsets.
-                    let caretAncestor = startNode.parentElement;
+                    // Figure out the relative position of this editor.
+                    let editorAncestor = element;
                     let relativeX = 0;
                     let relativeY = 0;
-                    let fixedX = undefined;
-                    let fixedY = undefined;
-                    while (caretAncestor != null) {
-                        const style = window.getComputedStyle(caretAncestor);
+                    while (editorAncestor != null) {
+                        const style = window.getComputedStyle(editorAncestor);
                         if (style.position === 'relative') {
-                            relativeX += caretAncestor.offsetLeft;
-                            relativeY += caretAncestor.offsetTop;
+                            relativeX += editorAncestor.offsetLeft;
+                            relativeY += editorAncestor.offsetTop;
                         }
-                        else if (style.position === 'fixed') {
-                            fixedX = caretAncestor.offsetLeft;
-                            fixedY = caretAncestor.offsetTop;
-                        }
-                        caretAncestor = caretAncestor.parentElement;
+                        editorAncestor = editorAncestor.parentElement;
                     }
-                    // Is the caret in a fixed position marginal? Get it's position.
                     // If we're after a new line, calculate the correct position, since selections don't actually render to the next line.
                     const left = afterNewLine
                         ? textRect.left
@@ -185,6 +177,7 @@ afterUpdate(() => {
                     const top = afterNewLine && lineHeight
                         ? rangeRect.top + lineHeight
                         : rangeRect.top;
+                    // Compute the final position of the caret.
                     const position = {
                         x: left + window.scrollX - relativeX,
                         y: top + window.scrollY - relativeY,

package/dist/components/editor/ConfirmButton.svelte

@@ -9,7 +9,7 @@ let confirming = false;
     {#if !confirming}
         <Button {tooltip} command={() => (confirming = true)}><slot /></Button>
     {:else}
-        <Button tooltip="no" command={() => (confirming = false)}>no</Button
+        <Button tooltip="no" command={() => (confirming = false)}>cancel</Button
         >&nbsp;<Button tooltip="yes" {command}>{confirm}</Button>
     {/if}
 </div>

package/dist/components/editor/EmbedEditor.svelte

@@ -43,10 +43,10 @@ function handleImageChange(event) {
     });
 }
 function handleImageSelection(image) {
-    // Toggle the embed
     $caret?.edit(embed, embed.getURL() === image.url
-        ? embed.withURL('').withDescription('')
-        : embed.withURL(image.url));
+        ? // Toggle the embed if choosing the same image
+            embed.withURL('').withDescription('')
+        : embed.withURLs(image.url, image.thumb));
 }
 </script>
 

package/dist/components/editor/ImageChooser.svelte

@@ -1,8 +1,8 @@
 <script>import { onMount } from 'svelte';
-import { getBook, getCaret } from '../page/Contexts';
+import { getBook } from '../page/Contexts';
+import ImageThumbnail from './ImageThumbnail.svelte';
 export let select;
 export let selection;
-let editor = getCaret();
 let book = getBook();
 let images = undefined;
 let expanded = false;
@@ -37,18 +37,10 @@ onMount(() => {
             <!-- Sort the images by their URL. There's probably a more meaningful sort,
                     such as placing unused images at the front of the list. -->
             {#each images.sort((a, b) => a.url.localeCompare(b.url)) as image}
-                <img
-                    class={`bookish-image-chooser-image ${
-                        image.url === selection ? 'selected' : ''
-                    }`}
-                    src={image.url}
-                    alt={`Image named ${image.url}`}
-                    tabIndex="0"
-                    on:click|stopPropagation={() => select(image)}
-                    on:keydown={(event) =>
-                        event.key === 'Enter' || event.key === ' '
-                            ? select(image)
-                            : undefined}
+                <ImageThumbnail
+                    {image}
+                    selected={image.url === selection}
+                    {select}
                 />
             {:else}
                 No images uploaded
@@ -74,16 +66,4 @@ onMount(() => {
         height: auto;
         overflow-y: auto;
     }
-
-    .bookish-image-chooser-image {
-        display: inline-block;
-        height: 2em;
-        cursor: pointer;
-    }
-
-    .bookish-image-chooser-image.selected {
-        outline: var(--app-chrome-border-size) solid
-            var(--app-interactive-color);
-        outline-offset: calc(-1 * var(--app-chrome-border-size));
-    }
 </style>

package/dist/components/editor/ImageThumbnail.svelte

@@ -0,0 +1,61 @@
+<script>export let image;
+export let selected;
+export let select;
+let retries = 3;
+let error = false;
+let loading = true;
+function loadImage(url) {
+    retries--;
+    let img = new Image();
+    img.onerror = () => {
+        if (retries > 0) {
+            setTimeout(() => loadImage(url), 1000);
+        }
+        else {
+            loading = false;
+            error = true;
+        }
+    };
+    img.onload = () => {
+        loading = false;
+    };
+    img.src = url;
+}
+loadImage(image.thumb);
+</script>
+
+{#if loading}
+    <div class="thumbnail loading" />
+{:else}
+    <img
+        class="thumbnail"
+        class:selected
+        src={error ? image.url : image.thumb}
+        alt={`Image named ${image.url}`}
+        tabIndex="0"
+        on:click|stopPropagation={() => select(image)}
+        on:keydown={(event) =>
+            event.key === 'Enter' || event.key === ' '
+                ? select(image)
+                : undefined}
+    />
+{/if}
+
+<style>
+    .thumbnail {
+        display: inline-block;
+        height: 2em;
+        cursor: pointer;
+    }
+
+    .thumbnail.selected {
+        outline: var(--app-chrome-border-size) solid
+            var(--app-interactive-color);
+        outline-offset: calc(-1 * var(--app-chrome-border-size));
+    }
+
+    .loading {
+        width: 2.5em;
+        background: var(--app-chrome-background);
+    }
+</style>

package/dist/components/editor/ImageThumbnail.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Image } from '../../models/book/BookMedia';
+declare const __propDef: {
+    props: {
+        image: Image;
+        selected: boolean;
+        select: (image: Image) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImageThumbnailProps = typeof __propDef.props;
+export type ImageThumbnailEvents = typeof __propDef.events;
+export type ImageThumbnailSlots = typeof __propDef.slots;
+export default class ImageThumbnail extends SvelteComponentTyped<ImageThumbnailProps, ImageThumbnailEvents, ImageThumbnailSlots> {
+}
+export {};

package/dist/components/editor/TextEditor.svelte

@@ -24,7 +24,7 @@ $: {
         // them with non-breaking spaces.
         const sizedText = showPlaceholder()
             ? placeholder
-            : text.replace(/\s/g, '\u00a0');
+            : text.replace(/\s$/g, '\u00a0');
         // Clip the text to prevent this editor from getting too long when editing. If it goes past one line,
         // the measurements and layout are way off.
         const trimmedText = width !== undefined &&
@@ -111,7 +111,6 @@ function handleKeyPress(event) {
         bind:this={field}
         bind:value={text}
         required
-        role="textbox"
         aria-invalid={error !== undefined}
         aria-label={label}
         aria-placeholder={label}
@@ -136,6 +135,8 @@ function handleKeyPress(event) {
 <style>
     .text-editor {
         position: relative;
+        display: inline-block;
+        max-width: 100%;
     }
 
     input[type='text'] {
@@ -175,6 +176,8 @@ function handleKeyPress(event) {
 
     /* This ensures the error message always appears below empty text editors */
     .sizer {
+        display: inline-block;
+        max-width: 100%;
         min-height: 1em;
         opacity: 0;
         border: none;

package/dist/components/page/DefinitionView.svelte

@@ -5,13 +5,13 @@ import BookishEditor from '../editor/BookishEditor.svelte';
 import Format from '../chapter/Format.svelte';
 import Note from '../editor/Note.svelte';
 import { afterUpdate } from 'svelte';
-import { getUser, getEdition, getLeasee, isChapterEditable, lease, } from './Contexts';
+import { getUser, getEdition, getLeasee, isChapterEditable, lease, isEditionEditable, } from './Contexts';
 import Button from '../app/Button.svelte';
 export let id;
 export let definition;
 let auth = getUser();
 let edition = getEdition();
-let editable = isChapterEditable();
+let editable = isEditionEditable();
 // Focus after adding a new synonym.
 let newSynonym = false;
 let synonymsEditor = null;
@@ -36,6 +36,23 @@ function addSynonym() {
     }
     newSynonym = true;
 }
+function removeSynonym(index) {
+    if (definition.synonyms &&
+        index >= 0 &&
+        index < definition.synonyms.length)
+        updateSynonyms([
+            ...definition.synonyms.slice(0, index),
+            ...definition.synonyms.slice(index + 1),
+        ]);
+}
+function updateSynonyms(synonyms) {
+    if ($edition)
+        edition.set($edition.withEditedDefinition(id, {
+            phrase: definition.phrase,
+            definition: definition.definition,
+            synonyms: synonyms,
+        }));
+}
 $: syns = definition.synonyms || [];
 </script>
 
@@ -67,11 +84,11 @@ $: syns = definition.synonyms || [];
             {#if editable}
                 <ConfirmButton
                     tooltip="delete definition of {definition.phrase}"
-                    confirm="remove definition?"
+                    confirm="delete entry"
                     command={() =>
                         $edition
                             ? edition.set($edition.withoutDefinition(id))
-                            : undefined}>- definition</ConfirmButton
+                            : undefined}>⨉</ConfirmButton
                 >
             {/if}
         </dt>
@@ -111,40 +128,26 @@ $: syns = definition.synonyms || [];
             {/if}
             {#if edition && editable}
                 <span bind:this={synonymsEditor}>
-                    {#if syns.length === 0}
-                        <Note>no synonyms</Note>
-                    {:else}
-                        {#each syns as syn, index}
-                            <Note>
-                                <TextEditor
-                                    text={syn}
-                                    label={'Synonym editor.'}
-                                    placeholder="synonym"
-                                    valid={() => undefined}
-                                    save={(text) => {
-                                        const newSyns = [...syns];
-                                        // Remove the synonym if it's empty but wasn't before
-                                        if (syn.length > 0 && text.length === 0)
-                                            newSyns.splice(index, 1);
-                                        else newSyns[index] = text;
-                                        if ($edition)
-                                            edition.set(
-                                                $edition.withEditedDefinition(
-                                                    id,
-                                                    {
-                                                        phrase: definition.phrase,
-                                                        definition:
-                                                            definition.definition,
-                                                        synonyms: newSyns,
-                                                    }
-                                                )
-                                            );
-                                    }}
-                                />
-                            </Note>
-                            {#if syns.length > 1 && index < syns.length - 1},&nbsp;{/if}
-                        {/each}
-                    {/if}
+                    {#each syns as syn, index}
+                        <Note>
+                            <TextEditor
+                                text={syn}
+                                label={'Synonym editor.'}
+                                placeholder="synonym"
+                                valid={() => undefined}
+                                save={(text) => {
+                                    const newSyns = [...syns];
+                                    newSyns[index] = text;
+                                    updateSynonyms(newSyns);
+                                }}
+                            />
+                            <Button
+                                tooltip="delete synonym"
+                                command={() => removeSynonym(index)}>x</Button
+                            >
+                        </Note>
+                        {#if syns.length > 1 && index < syns.length - 1},&nbsp;{/if}
+                    {/each}
                 </span>&nbsp;<Button tooltip="add synonym" command={addSynonym}
                     >+ synonym</Button
                 >
@@ -162,6 +165,8 @@ $: syns = definition.synonyms || [];
     }
 
     dt {
+        font-family: var(--bookish-header-font-family);
         font-weight: bold;
+        vertical-align: baseline;
     }
 </style>

package/dist/components/page/Edition.svelte

@@ -2,9 +2,10 @@
 import { goto } from '$app/navigation';
 import { onMount, setContext, tick } from 'svelte';
 import { writable } from 'svelte/store';
-import { BASE, DARK_MODE, } from './Contexts';
+import { BASE, DARK_MODE, getBook, } from './Contexts';
 import { BookishTheme } from '../../models/book/Theme';
 import { isDark, setDark } from '../../util/dark';
+import { page } from '$app/stores';
 // Poly fill smooth scrolling for Safari.
 onMount(() => smoothscroll.polyfill());
 // The book edition to render.
@@ -14,6 +15,7 @@ export let edition;
 // but when the book is being viewed or edited in the Bookish app, it needs a prefix for the
 // route in the app.
 export let base = '';
+let book = getBook();
 // When the base changes, update the context.
 let baseStore = writable(base);
 $: setContext(BASE, baseStore);
@@ -80,9 +82,22 @@ function toRules(set) {
 <!-- Keep the imports up to date -->
 <svelte:head>
     {@html '<' + `style>${themeCSS}</style>`}
+
+    <meta property="og:title" content={edition.getTitle()} />
+    <meta property="og:image" content={edition.getImage('cover')} />
+    <meta property="og:description" content={edition.getDescription()} />
+    <meta property="og:type" content="book" />
+    <meta property="og:author" content={edition.getAuthorsText()} />
+    <meta
+        property="og:url"
+        content={edition.base ??
+            `https://bookish.press/${
+                $book && $book.domain ? $book.domain : $page.params.bookid
+            }`}
+    />
 </svelte:head>
 
-<main class="bookish {$darkMode ? ' dark' : ''}" style={themeCSS}>
+<main class="bookish {$darkMode ? ' dark' : ''}">
     <slot />
 </main>
 

package/dist/components/page/Header.svelte

@@ -54,80 +54,84 @@ let embed;
 $: embed = getImage();
 </script>
 
-<header class="bookish-chapter-header">
-    {#if embed}
-        <div class="bookish-figure-full">
-            {#if $edition && editable}
-                <BookishEditor
-                    text={embed}
-                    parser={(text) => Parser.parseEmbed($edition, text)}
-                    save={(node) =>
-                        setImage ? setImage(node.toBookdown()) : undefined}
-                    chapter={false}
-                    component={Embed}
-                    placeholder=""
-                    leasee={getLeasee(auth, edition, `embed-${id}`)}
-                    lease={(lock) => lease(auth, edition, `embed-${id}`, lock)}
-                />
-            {:else}
-                <Embed
-                    node={Parser.parseEmbed($edition, embed)}
-                    editable={false}
-                />
-            {/if}
-            {#if !print && showReminder}
-                <div class="bookish-scroll-reminder" />
-            {/if}
-        </div>
-    {:else}
-        <!-- Add a bit of space to account for the lack of an image. -->
-        <p>&nbsp;</p>
-    {/if}
-    {#if !print}
-        <slot name="outline" />
-    {/if}
-    {#if editable}
-        {#if embed === null}
-            <Button tooltip="add cover image" command={addCover}
-                >+ cover image</Button
-            >
+<!-- We key on the chapter ID to avoid laggy updates from image loading -->
+{#key id}
+    <header class="bookish-chapter-header">
+        {#if embed}
+            <div class="bookish-figure-full">
+                {#if $edition && editable}
+                    <BookishEditor
+                        text={embed}
+                        parser={(text) => Parser.parseEmbed($edition, text)}
+                        save={(node) =>
+                            setImage ? setImage(node.toBookdown()) : undefined}
+                        chapter={false}
+                        component={Embed}
+                        placeholder=""
+                        leasee={getLeasee(auth, edition, `embed-${id}`)}
+                        lease={(lock) =>
+                            lease(auth, edition, `embed-${id}`, lock)}
+                    />
+                {:else}
+                    <Embed
+                        node={Parser.parseEmbed($edition, embed)}
+                        editable={false}
+                    />
+                {/if}
+                {#if !print && showReminder}
+                    <div class="bookish-scroll-reminder" />
+                {/if}
+            </div>
         {:else}
-            <ConfirmButton
-                confirm="remove image?"
-                tooltip="remove cover image"
-                command={removeCover}>- cover image</ConfirmButton
-            >
+            <!-- Add a bit of space to account for the lack of an image. -->
+            <p>&nbsp;</p>
         {/if}
-    {/if}
-    <div bind:this={title} class="bookish-chapter-header-text">
-        <slot name="before" />
-        <Title>
-            {#if editable && save}
-                <TextEditor
-                    {label}
-                    text={header + (subtitle ? ': ' + subtitle : '')}
-                    placeholder="title"
-                    valid={(text) =>
-                        text.length === 0
-                            ? 'Titles have to be at least one character long.'
-                            : undefined}
-                    {save}
-                />
+        {#if !print}
+            <slot name="outline" />
+        {/if}
+        {#if editable}
+            {#if embed === null}
+                <Button tooltip="add cover image" command={addCover}
+                    >+ cover image</Button
+                >
             {:else}
-                {header}
-                {#if subtitle}<div class="bookish-subtitle">{subtitle}</div
-                    >{/if}
+                <ConfirmButton
+                    confirm="delete image"
+                    tooltip="delete cover image"
+                    command={removeCover}>- cover image</ConfirmButton
+                >
             {/if}
-        </Title>
-        <slot name="after" />
-        {#if tags}
-            <div
-                >{#each tags as tag}<span class="bookish-tag">{tag}</span
-                    >{/each}</div
-            >
         {/if}
-    </div>
-</header>
+        <div bind:this={title} class="bookish-chapter-header-text">
+            <slot name="before" />
+            <Title>
+                {#if editable && save}
+                    <TextEditor
+                        {label}
+                        text={header + (subtitle ? ': ' + subtitle : '')}
+                        placeholder="title"
+                        valid={(text) =>
+                            text.length === 0
+                                ? 'Titles have to be at least one character long.'
+                                : undefined}
+                        {save}
+                    />
+                {:else}
+                    {header}
+                    {#if subtitle}<div class="bookish-subtitle">{subtitle}</div
+                        >{/if}
+                {/if}
+            </Title>
+            <slot name="after" />
+            {#if tags}
+                <div
+                    >{#each tags as tag}<span class="bookish-tag">{tag}</span
+                        >{/each}</div
+                >
+            {/if}
+        </div>
+    </header>
+{/key}
 
 <style>
     .bookish-subtitle {

package/dist/components/page/Media.svelte

@@ -24,7 +24,7 @@ onMount(() => {
     media?.notify(updateImages);
     return () => media?.stopNotifying(updateImages);
 });
-$: unused = images?.filter((image) => embeds.find((embed) => embed.getURL() === image.url) === undefined);
+$: unused = images?.filter((image) => !embeds.some((embed) => image.url.includes(embed.embed.getURL())));
 </script>
 
 {#if $edition}
@@ -59,9 +59,10 @@ $: unused = images?.filter((image) => embeds.find((embed) => embed.getURL() ===
         {:else}
             <p>These are the images in the book:</p>
         {/if}
-        {#each embeds as embed}
+        {#each embeds as { embed, chapterID }}
             {#if !embed.isVideo()}
                 <MediaPreview
+                    {chapterID}
                     url={embed.isLocal()
                         ? `${$base}/${embed.getSmallURL()}`
                         : embed.getSmallURL()}
@@ -89,10 +90,10 @@ $: unused = images?.filter((image) => embeds.find((embed) => embed.getURL() ===
                 be used in other editions of this book.
             </Instructions>
             {#each unused as image}
-                <MediaPreview url={image.url} alt={''}>
+                <MediaPreview chapterID={undefined} url={image.url} alt={''}>
                     <ConfirmButton
                         tooltip="delete unused image"
-                        confirm="delete image?"
+                        confirm="delete image"
                         command={() =>
                             media
                                 ?.remove(image)

package/dist/components/page/MediaPreview.svelte

@@ -1,5 +1,9 @@
-<script>export let url;
+<script>import Link from '../Link.svelte';
+import { getBase } from './Contexts';
+export let url;
 export let alt;
+export let chapterID;
+let base = getBase();
 let loaded;
 let urlChecked;
 $: {
@@ -18,7 +22,9 @@ $: {
 
 <figure class={'media-preview'}>
     {#if loaded}
-        <img src={url.startsWith('http') ? url : `${url}`} {alt} />
+        <Link to={`${$base}/${chapterID}`} linked={chapterID !== undefined}
+            ><img src={url.startsWith('http') ? url : `${url}`} {alt} /></Link
+        >
     {:else if loaded === null}
         <div class="missing">missing image</div>
     {/if}

package/dist/components/page/MediaPreview.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         url: string;
         alt: string;
+        chapterID: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/Page.svelte

@@ -2,10 +2,12 @@
 import Loading from './Loading.svelte';
 export let title;
 export let afterLoaded = undefined;
-let loaded = false;
+let fontsLoaded = false;
+let imagesLoaded = false;
 let lastHeight = 0;
 let intervalID = null;
 let mountTime = Date.now();
+$: loaded = fontsLoaded && imagesLoaded;
 function watchLoading() {
     const bodyHeight = document.body.clientHeight;
     // If the height hasn't changed and images are loaded OR it's been 2 seconds, load.
@@ -14,7 +16,7 @@ function watchLoading() {
         // Stop watching the images
         stopWatching();
         // Set to loaded to hide the overlay and notify callback if there is one.
-        loaded = true;
+        imagesLoaded = true;
         if (afterLoaded)
             afterLoaded();
     }
@@ -29,6 +31,7 @@ onMount(() => {
     // Watch the height of the document and wait until it's been stable for a while before scrolling
     // to any targets. We use the data below to monitor the document height over time.
     intervalID = setInterval(() => watchLoading(), 50);
+    document.fonts.ready.then(() => (fontsLoaded = true));
     return () => stopWatching();
 });
 function imagesAreLoaded() {
@@ -45,7 +48,7 @@ function imagesAreLoaded() {
     <meta name="description" content={title} />
 </svelte:head>
 
-<section class={'bookish-page' + (loaded ? ' loaded' : '')}>
+<section class={'bookish-page' + (imagesLoaded ? ' loaded' : '')}>
     <slot />
 </section>
 <!-- Overlay loading feedback if loading, but still render the page. -->

package/dist/components/page/Reference.svelte

@@ -249,7 +249,7 @@ function move(field, direction) {
 {#if edit && editable && !reference.short}
     <ConfirmButton
         tooltip="delete reference {reference.title}"
-        confirm="delete reference..."
+        confirm="delete reference"
         command={() =>
             $edition
                 ? edition.set($edition.withoutReference(reference.citationID))

package/dist/components/page/Search.svelte

@@ -83,7 +83,7 @@ $: {
 
         <p>
             Type a word—just a single word—and we'll show its occurrences in
-            this book:
+            this book's chapters:
         </p>
 
         <input

package/dist/components/page/TableOfContents.svelte

@@ -273,10 +273,7 @@ onMount(() => {
 
         <!-- Book citation -->
         <PageParagraph>
-            {$edition
-                .getAuthors()
-                .map((author) => Parser.parseFormat($edition, author).toText())
-                .join(', ')} ({new Date().getFullYear()}).
+            {$edition.getAuthorsText()} ({new Date().getFullYear()}).
             <em>{$edition.getTitle()}</em>. {bookURL},
             <em>retrieved {new Date().toLocaleDateString('en-US')}</em>.
         </PageParagraph>

package/dist/components/page/TableOfContentsRow.svelte

@@ -76,7 +76,7 @@ $: chapterURL =
                 >
                 <ConfirmButton
                     tooltip="delete chapter {title}"
-                    confirm="delete?"
+                    confirm="delete chapter"
                     command={() =>
                         chapter && $edition
                             ? edition.set(

package/dist/components/page/ThemeEditor.svelte

@@ -87,7 +87,7 @@ function getEmptyGroup(group) {
         {:else}
             <ConfirmButton
                 tooltip="change theme to the default"
-                confirm="delete your theme?"
+                confirm="delete theme"
                 command={() =>
                     $edition
                         ? edition.set($edition.withTheme(null))

package/dist/models/book/BookMedia.d.ts

@@ -2,6 +2,7 @@ import type { StorageReference } from 'firebase/storage';
 import type Book from './Book';
 export type Image = {
     url: string;
+    thumb: string;
     ref: StorageReference;
 };
 export default class BookMedia {
@@ -17,6 +18,8 @@ export default class BookMedia {
     /** Get a listing of all of the images for the book. */
     cacheImages(): Promise<Image[]>;
     retrieveImages(): Promise<(Image | undefined)[]>;
+    stripTokenFromURL(url: string): string;
+    makeThumbnailURL(url: string): string;
     getThumbnailURL(url: string, thumbnailRef: StorageReference, error: (message: string) => void, finished: (url: string, thumbnailURL: string) => void, attempt?: number): void;
     upload(file: File, _: (progress: number) => void, errorHandler: (message: string) => void, finishedHandler: (url: string, thumbnailURL: string) => void): void;
     remove(image: Image): Promise<Image[] | undefined>;

package/dist/models/book/BookMedia.js

@@ -1,5 +1,4 @@
 import { deleteObject, getDownloadURL, listAll, ref, uploadBytes, } from 'firebase/storage';
-import { v4 as uuidv4 } from 'uuid';
 import { storage } from '../Firebase';
 export default class BookMedia {
     book;
@@ -43,7 +42,8 @@ export default class BookMedia {
         // Find all the prefixes and items.
         return listAll(listRef).then((res) => Promise.all(res.items.map((itemRef) => getDownloadURL(itemRef).then((url) => {
             const image = {
-                url: url,
+                url,
+                thumb: this.makeThumbnailURL(url),
                 description: '',
                 ref: itemRef,
             };
@@ -53,6 +53,22 @@ export default class BookMedia {
             return image;
         }))));
     }
+    stripTokenFromURL(url) {
+        const tokenIndex = url.indexOf('&token=');
+        return tokenIndex >= 0 ? (url = url.substring(0, tokenIndex)) : url;
+    }
+    // Construct a thumbnail URL from the base URL.
+    makeThumbnailURL(url) {
+        // The structure of the URL is
+        // https://[firebase-domain]/v0/b/[projectid].appspot.com/o/images%2F[bookID]%2F[imagename]?alt=media
+        // And we want
+        // https://[firebase-domain]/v0/b/[projectid].appspot.com/o/images%2F[bookID]%2Fthumbnails%2F[imagename]?alt=media
+        const bookID = this.book.getID();
+        const bookIDIndex = url.indexOf(bookID);
+        return bookIDIndex >= 0
+            ? `${url.substring(0, bookIDIndex)}${bookID}%2Fthumbnails${url.substring(bookIDIndex + bookID.length)}`
+            : url;
+    }
     getThumbnailURL(url, thumbnailRef, error, finished, attempt = 0) {
         getDownloadURL(thumbnailRef)
             .then((thumbnail) => finished(url, thumbnail))
@@ -64,9 +80,10 @@ export default class BookMedia {
     upload(file, _, errorHandler, finishedHandler) {
         if (storage === undefined)
             return;
+        // We use the file name given, but append a unique string to avoid collisions.
+        const imageName = file.name;
         // The canonical path format for Bookish images in the store is image/{bookid}/{imageid}
-        // where {bookid} is the Firestore ID of the book being edited and {imageid} is just a random id.
-        const imageName = `image-${uuidv4()}`;
+        // where {bookid} is the Firestore document ID of the book being edited and {imageid} is just a random id.
         const imageRef = ref(storage, `${this.getImagePath()}/${imageName}`);
         const thumbnailRef = ref(storage, `${this.getImagePath()}/thumbnails/${imageName}`);
         uploadBytes(imageRef, file)
@@ -74,7 +91,7 @@ export default class BookMedia {
             getDownloadURL(snapshot.ref)
                 // After we get the download URL for the uploaded image,
                 // try to get the thumbnail URL for the resized image on the server.
-                .then((url) => this.getThumbnailURL(url, thumbnailRef, errorHandler, finishedHandler))
+                .then((url) => finishedHandler(this.stripTokenFromURL(url), this.makeThumbnailURL(this.stripTokenFromURL(url))))
                 .catch(() => errorHandler('Unable to get image URL.'));
         })
             .then(() => this.cacheImages())

package/dist/models/book/Edition.d.ts

@@ -107,6 +107,7 @@ export default class Edition {
     withTheme(theme: Theme | null): Edition;
     withThemeValue(group: string, name: string, value: string): Edition;
     getAuthors(): string[];
+    getAuthorsText(): string;
     withAuthors(authors: string[]): Edition;
     withAuthor(name: string): Edition;
     withAuthorName(index: number, name: string): Edition;
@@ -130,7 +131,10 @@ export default class Edition {
     getBookIndex(): Record<string, Set<string>>;
     getNextChapterID(chapterID: string): string | null;
     getPreviousChapterID(chapterID: string): string | null;
-    getEmbeds(): EmbedNode[];
+    getEmbeds(): {
+        embed: EmbedNode;
+        chapterID: string | undefined;
+    }[];
     isLatestEdition(book: Book): boolean;
     isLatestPublishedEdition(book: Book): boolean;
     getEditionNumber(): number;

package/dist/models/book/Edition.js

@@ -59,7 +59,7 @@ export default class Edition {
     static fromJSON(editionRef, spec) {
         // Copy all of the specification metadata to fields.
         // Choose suitable defaults if the spec is lacking a field.
-        return new Edition(spec.bookRef, editionRef, spec.uids, spec.title, spec.authors, spec.number, spec.summary, spec.published, spec.images, spec.description, spec.chapters.map((chap) => Chapter.fromJSON(chap, '')), spec.license, spec.acknowledgements, spec.tags ?? [], spec.sources ?? {}, spec.references ?? {}, spec.symbols ?? {}, spec.glossary ?? {}, spec.theme, spec.base ?? '', spec.active);
+        return new Edition(spec.bookRef, editionRef, spec.uids, spec.title, spec.authors, spec.number, spec.summary, spec.published, spec.images, spec.description, spec.chapters.map((chap) => Chapter.fromJSON(chap, '')), spec.license, spec.acknowledgements, spec.tags ?? [], spec.sources ?? {}, spec.references ?? {}, spec.symbols ?? {}, spec.glossary ?? {}, spec.theme, spec.base, spec.active);
     }
     static parseReference(citationID, ref, edition, short = false) {
         if (typeof ref === 'string')
@@ -99,7 +99,7 @@ export default class Edition {
             symbols: Object.assign({}, this.symbols),
             glossary: Object.assign({}, this.glossary),
             theme: this.theme,
-            base: this.base,
+            base: this.base && this.base.length > 0 ? this.base : null,
             uids: this.uids.slice(),
             chapteruids: this.getChapterUIDS(),
             active: this.active,
@@ -340,6 +340,11 @@ export default class Edition {
     getAuthors() {
         return [...this.authors];
     }
+    getAuthorsText() {
+        return this.getAuthors()
+            .map((author) => Parser.parseFormat(this, author).toText())
+            .join(', ');
+    }
     withAuthors(authors) {
         return new Edition(this.bookRef, this.editionRef, this.uids, this.title, authors, this.number, this.summary, this.published, this.images, this.description, this.chapters, this.license, this.acknowledgements, this.tags, this.sources, this.references, this.symbols, this.glossary, this.theme, this.base, this.active);
     }
@@ -563,18 +568,18 @@ export default class Edition {
         if (cover) {
             let coverNode = Parser.parseEmbed(this, cover);
             if (coverNode instanceof EmbedNode)
-                embeds.push(coverNode);
+                embeds.push({ embed: coverNode, chapterID: undefined });
         }
         // Add the cover and images from each chapter.
         this.getChapters().forEach((c) => {
             const image = c.getImage();
             let cover = image === null ? undefined : Parser.parseEmbed(this, image);
             if (cover && cover instanceof EmbedNode)
-                embeds.push(cover);
+                embeds.push({ embed: cover, chapterID: c.id });
             // Get the chapter body's embeds
             let bodyEmbeds = c?.getAST(this)?.getEmbeds();
             if (bodyEmbeds)
-                bodyEmbeds.forEach((embed) => embeds.push(embed));
+                bodyEmbeds.forEach((embed) => embeds.push({ embed, chapterID: c.id }));
         });
         // Add the back matter covers
         let backmatter = ['references', 'glossary', 'index', 'search', 'media'];
@@ -583,7 +588,7 @@ export default class Edition {
             if (img) {
                 let image = Parser.parseEmbed(this, img);
                 if (image instanceof EmbedNode)
-                    embeds.push(image);
+                    embeds.push({ embed: image, chapterID: id });
             }
         });
         return embeds;

package/dist/models/book/Words.js

@@ -62,7 +62,6 @@ const CommonWords = [
     'other',
     'our',
     'out',
-    'people',
     'say',
     'see',
     'she',

package/dist/models/chapter/ChapterNode.d.ts

@@ -22,6 +22,7 @@ export default class ChapterNode extends BlocksNode {
     getEmbeds(): EmbedNode[];
     getComments(): CommentNode[];
     getLabels(): LabelNode[];
+    getFirstParagraph(): ParagraphNode | undefined;
     hasLabel(labelID: string): boolean;
     getCitationNumber(citationID: string): number | null;
     toText(): string;

package/dist/models/chapter/ChapterNode.js

@@ -45,6 +45,9 @@ export default class ChapterNode extends BlocksNode {
     getLabels() {
         return this.getNodes().filter((n) => n instanceof LabelNode);
     }
+    getFirstParagraph() {
+        return this.getBlocks().find((b) => b instanceof ParagraphNode);
+    }
     hasLabel(labelID) {
         return (this.getLabels().find((label) => label.getMeta() === labelID) !==
             undefined);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "bookish-press",
     "private": false,
-    "version": "0.5.24",
+    "version": "0.5.26",
     "type": "module",
     "description": "A platform for reading and writing readable, accessible, beautiful online books.",
     "license": "MIT",
@@ -22,12 +22,14 @@
         "//stage": "echo 'switch to the dev project, deploy, relying on Firebase's predeploy hook to run the build script above before release'",
         "stage": "firebase use dev && firebase deploy",
         "//release": "echo 'switch to the prod project, deploy, relying on Firebase's predeploy hook to run the build script above before release'",
-        "release": "firebase use prod && firebase deploy"
+        "release": "firebase use prod && firebase deploy",
+        "//merge": "merge dev into main, push to remote",
+        "merge": "git checkout main && git merge dev && git push origin main && git checkout dev"
     },
     "devDependencies": {
         "@sveltejs/adapter-static": "^2.0.1",
-        "@sveltejs/kit": "^1.7.2",
-        "@sveltejs/package": "^2.0.0",
+        "@sveltejs/kit": "^1.11",
+        "@sveltejs/package": "^2.0.2",
         "@types/prismjs": "^1.26.0",
         "@types/smoothscroll-polyfill": "^0.3.1",
         "@types/uuid": "^9.0.0",
@@ -39,7 +41,7 @@
         "tslib": "^2.5.0",
         "typescript": "^4.9.5",
         "vite": "^4.1.2",
-        "vitest": "^0.28.5"
+        "vitest": "^0.29.2"
     },
     "dependencies": {
         "ajv": "^8.12.0",