bookish-press 0.5.2 → 0.5.4

package/dist/components/page/Chapter.svelte

@@ -361,7 +361,7 @@ let editable = isBookEditable() ||
         {/if}
 
         {#if editable || isEditionPartiallyEditable()}
-            <PageHeader>Editors</PageHeader>
+            <PageHeader id="editors">Editors</PageHeader>
             <Instructions {editable}
                 >These authors can edit this chapter. Add an email here to
                 provide chapter-level edit permissions.</Instructions

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);
@@ -29,6 +31,8 @@ $: {
     // Set the theme, whatever it is, and change it when the edition changes
     setTheme(edition.getTheme() ?? BookishTheme);
 }
+// The CSS to set on the edition.
+let themeCSS;
 // Set the theme on mount.
 onMount(() => {
     setTheme(edition.getTheme() ?? BookishTheme);
@@ -36,74 +40,25 @@ onMount(() => {
 // Redirect old hash routes by simply replacing their hash before routing.
 if (typeof window !== 'undefined' && window.location.hash.startsWith('#/'))
     goto(location.hash.replace('#', ''));
-/** Given a theme, sets the appropriate CSS rules in the browser to apply the theme.*/
+/** Given a theme, sets the appropriate CSS rules in the browser to apply the theme. */
 function setTheme(theme) {
-    // Allow for prerendering; rely on mount callback to set the theme.
-    if (typeof document === 'undefined')
-        return;
-    // If the theme is being unset, make sure we've removed any overrding style declaration.
-    // This let's the default theme kick in.
-    let themeTagImports = document.getElementById('bookish-theme-imports');
-    let themeTagCSS = document.getElementById('bookish-theme');
-    // We only want to set it if it's actually different than what's currently set.
-    // Otherwise during editing we get lots of jittery changes on each edit, because the
-    // whole edition is rerendering. To check this, we set a data attribute on the style tag containing
-    // a stringify of the theme set. We do this separately for the imports, since they can have more
-    // major changes than the spacing and color sizes, changing fonts especially.
-    const themeTagCSSValue = themeTagCSS?.dataset.css;
-    const themeTagImportsValue = themeTagImports?.dataset.imports;
-    const newThemeTagCSSValue = JSON.stringify(theme);
-    const newThemeTagImportsValue = JSON.stringify(theme?.imports);
-    if (theme !== null) {
-        // If the imports changed, update theme.
-        if (themeTagImportsValue !== newThemeTagImportsValue) {
-            // If it's being set, create a new style tag.
-            const newThemeImportsTag = document.createElement('style');
-            // Give it an ID so we can remove it later.
-            newThemeImportsTag.setAttribute('id', 'bookish-theme-imports');
-            newThemeImportsTag.dataset.imports = newThemeTagImportsValue;
-            // Insert any import statements, then any rules.
-            const css = `${(theme.imports ?? [])
-                .map((url) => `@import url(${url});`)
-                .join('\n')}`;
-            newThemeImportsTag.appendChild(document.createTextNode(css));
-            document.head.appendChild(newThemeImportsTag);
-            // Remove the old tag
-            themeTagImports?.remove();
-        }
-        // If the rules changed, update them.
-        if (themeTagCSSValue !== newThemeTagCSSValue) {
-            // If it's being set, create a new style tag.
-            const newThemeCSSTag = document.createElement('style');
-            // Give it an ID so we can remove it later.
-            newThemeCSSTag.setAttribute('id', 'bookish-theme');
-            newThemeCSSTag.dataset.css = newThemeTagCSSValue;
-            // Insert any import statements, then any rules.
-            const css = `
-                    ${(theme.imports ?? [])
-                .map((url) => `@import url(${url});`)
-                .join('\n')}
-                    .bookish {
-                        ${theme.light ? toRules(theme.light) : ''}
-                        ${theme.fonts ? toRules(theme.fonts) : ''}
-                        ${theme.sizes ? toRules(theme.sizes) : ''}
-                        ${theme.weights ? toRules(theme.weights) : ''}
-                        ${theme.spacing ? toRules(theme.spacing) : ''}
-                    }
-                    .dark {
-                        ${theme.dark ? toRules(theme.dark) : ''}
-                    }`;
-            newThemeCSSTag.appendChild(document.createTextNode(css));
-            document.head.appendChild(newThemeCSSTag);
-            // Remove the old tag
-            themeTagCSS?.remove();
-        }
-    }
-    else {
-        // Remove the old tags, unsetting the theme.
-        themeTagImports?.remove();
-        themeTagCSS?.remove();
-    }
+    if (theme === null)
+        theme = BookishTheme;
+    themeCSS = `
+            ${(theme.imports ?? [])
+        .map((url) => `@import url(${url});`)
+        .join('\n')}
+            .bookish {
+                ${theme.light ? toRules(theme.light) : ''}
+                ${theme.fonts ? toRules(theme.fonts) : ''}
+                ${theme.sizes ? toRules(theme.sizes) : ''}
+                ${theme.weights ? toRules(theme.weights) : ''}
+                ${theme.spacing ? toRules(theme.spacing) : ''}
+            }
+            .dark {
+                ${theme.dark ? toRules(theme.dark) : ''}
+            }
+        `;
 }
 function toRules(set) {
     return Object.keys(set)
@@ -124,6 +79,24 @@ function toRules(set) {
 }
 </script>
 
+<!-- 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' : ''}">
     <slot />
 </main>

package/dist/components/page/EditionLoader.svelte

@@ -4,7 +4,7 @@ import Feedback from '../app/Feedback.svelte';
 import { getBook, getEdition, getUser, getChapterText, } from './Contexts';
 import { onDestroy } from 'svelte';
 import { page } from '$app/stores';
-import { listenToChapters, listenToEdition } from '../../models/CRUD';
+import { deleteChapterText, listenToChapters, listenToEdition, } from '../../models/CRUD';
 export let write;
 let auth = getUser();
 let book = getBook();
@@ -67,8 +67,17 @@ function listen() {
                 // Update the chapter text store.
                 chapterText.set(chapters);
                 // Update the chapter text in the current edition.
-                if ($edition)
-                    edition.set($edition.withChapterText(chapters));
+                if ($edition) {
+                    const newEdition = $edition.withChapterText(chapters);
+                    if (newEdition !== $edition)
+                        edition.set(newEdition);
+                    // Get all the chapters in the updated chapter list and
+                    // delete the ones not referenced by the edition.
+                    chapters
+                        .filter(([ref]) => $edition &&
+                        !$edition.hasChapterRefID(ref.id))
+                        .forEach(([ref]) => deleteChapterText(ref));
+                }
             });
         }
     }

package/dist/components/page/Editions.svelte

@@ -84,7 +84,7 @@ async function handleDraftEdition() {
                                 undefined,
                                 edition.summary
                             )}
-                        />{:else}&mdash{/if}</p
+                        />{:else}&mdash;{/if}</p
                 >
             </section>
         {/if}

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/Outline.svelte

@@ -129,7 +129,7 @@ let expandLabel = '\u2630';
             aria-label={expanded
                 ? 'Collapse navigation menu'
                 : 'Expand navigation menu'}
-            tabIndex="0"
+            tabindex="0"
             on:click={headers.length > 0 ? toggleExpanded : undefined}
             on:keydown={(event) => {
                 if (event.key === 'Enter' || event.key === ' ')

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

@@ -138,7 +138,7 @@ onMount(() => {
         </Instructions>
 
         <PageHeader id="chapters"
-            >Chapters {#if editable}<Button
+            >Chapters{#if editable}&nbsp;<Button
                     tooltip="add empty chapter"
                     disabled={waitingForChapter}
                     command={addChapter}>+ chapter</Button
@@ -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>
@@ -292,7 +289,7 @@ onMount(() => {
         {/if}
 
         {#if $book && (editable || isEditionPartiallyEditable())}
-            <PageHeader>Editors</PageHeader>
+            <PageHeader id="editors">Editors</PageHeader>
             <Instructions {editable}>
                 These authors can edit this edition and its chapters. To give
                 book-level permissions, edit the book editors on the <Link

package/dist/components/page/TableOfContentsRow.svelte

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