bookish-press 0.4.1 → 0.4.3

package/components/page/Edition.svelte

@@ -1,107 +1,161 @@
 <script>import smoothscroll from 'smoothscroll-polyfill';
 import { goto } from '$app/navigation';
-import Status from "./Status.svelte";
 import { onMount, setContext } from 'svelte';
-import { writable } from "svelte/store";
-import { BASE, BOOK, DARK_MODE, EDITABLE, EDITION } from "./Contexts";
+import { writable } from 'svelte/store';
+import { BASE, DARK_MODE, } from './Contexts';
+import { BookishTheme } from '../../models/book/Theme';
 // Poly fill smooth scrolling for Safari.
-smoothscroll.polyfill();
-// True if the edition should be editable. Distributed as context.
-export let editable = false;
-// When editable changes, update the context.
-$: setContext(EDITABLE, editable);
+onMount(() => smoothscroll.polyfill());
+// The book edition to render.
+export let edition;
 // The base path allows links to adjust to different routing contexts in which a book is placed.
-// For example, when the book is hosted alone, all routes might start with the bare root "/", 
+// For example, when the book is hosted alone, all routes might start with the bare root "/",
 // 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 = "";
+export let base = '/';
 // When the base changes, update the context.
-$: setContext(BASE, base);
-// The book edition to render.
-export let edition;
-// Expose the edition to descendents in a store and update the context when the edition changes.
-let currentEdition = writable(edition);
-setContext(EDITION, currentEdition);
-// Expose the book to descendents in a store and update the context when the edition changes.
-$: setContext(BOOK, edition.getBook());
-// When edition changes, unsubscribe to the previous edition and subscribe to the new one.
-// We use a simple assignment to tell Svelte about the change.
-let editionChanged = () => currentEdition.set(edition);
-$: {
-    // Remove the listeners from the old edition
-    $currentEdition.removeListener(editionChanged);
-    $currentEdition.getBook()?.removeListener(editionChanged);
-    // Update the current edition.
-    currentEdition.set(edition);
-    // Listen to the new edition
-    $currentEdition.getBook()?.addListener(editionChanged);
-    $currentEdition.addListener(editionChanged);
-}
-// Create a timer that saves the current edition periodically and stops when unmounted.
-onMount(() => {
-    const saveListener = setInterval(() => {
-        $currentEdition.saveEdits();
-        $currentEdition.getBook()?.saveEdits();
-    }, 500);
-    // On unmount, stop listening.
-    return () => clearInterval(saveListener);
-});
+let baseStore = writable(base);
+$: setContext(BASE, baseStore);
+$: baseStore.set(base);
 // Default dark mode to whatever's stored in local storage, if anything.
 // respect user choice on the website despite the system theme
-let darkMode = writable(typeof localStorage !== "undefined" &&
-    localStorage.getItem("bookish-dark") !== "false" && (localStorage.getItem("bookish-dark") === "true" || // A previous setting
-    window.matchMedia("(prefers-color-scheme: dark)").matches // Operating system is set to dark
-));
+let darkMode = writable(typeof localStorage !== 'undefined' &&
+    localStorage.getItem('dark') !== 'false' &&
+    (localStorage.getItem('dark') === 'true' || // A previous setting
+        window.matchMedia('(prefers-color-scheme: dark)').matches) // Operating system is set to dark
+);
 // Expose dark mode to descendants
 setContext(DARK_MODE, darkMode);
 // When dark mode changes, update the body's class list.
 $: {
-    if ($darkMode) {
-        document.body.classList.add("bookish-dark");
-    }
-    else {
-        document.body.classList.remove("bookish-dark");
-        if (typeof localStorage !== "undefined")
-            localStorage.setItem("bookish-dark", $darkMode ? "true" : "false");
+    if (typeof document !== 'undefined') {
+        if ($darkMode)
+            document.body.classList.add('dark');
+        else
+            document.body.classList.remove('dark');
+        if (typeof localStorage !== 'undefined')
+            localStorage.setItem('dark', $darkMode ? 'true' : 'false');
+        // Set the theme, whatever it is, and change it when the edition changes
+        setTheme(edition.getTheme() ?? BookishTheme);
     }
 }
+// Set the theme on mount.
+onMount(() => {
+    setTheme(edition.getTheme() ?? BookishTheme);
+});
 // Redirect old hash routes by simply replacing their hash before routing.
-if (typeof window !== "undefined" && window.location.hash.startsWith('#/'))
+if (typeof window !== 'undefined' && window.location.hash.startsWith('#/'))
     goto(location.hash.replace('#', ''));
-// Set the theme, whatever it is, and change it when the edition changes.
-$: setTheme(edition.getTheme());
+/** Given a theme, sets the appropriate CSS rules in the browser to apply the theme.*/
 function setTheme(theme) {
-    // Remove any existing theme.
-    document.getElementById("bookish-theme")?.remove();
     // If the theme is being unset, make sure we've removed any overrding style declaration.
     // This let's the default theme kick in.
-    if (theme === null)
-        return;
-    // If it's being set, create a new style tag.
-    const themeTag = document.createElement("style");
-    themeTag.setAttribute("id", "bookish-theme");
-    const css = `:root {
-                ${toRules(theme.light)}
-                ${toRules(theme.fonts)}
-                ${toRules(theme.sizes)}
-                ${toRules(theme.weights)}
-                ${toRules(theme.spacing)}
-            }
-            .bookish-dark {
-                ${toRules(theme.dark)}
-            }`;
-    themeTag.appendChild(document.createTextNode(css));
-    document.head.appendChild(themeTag);
+    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();
+    }
 }
 function toRules(set) {
-    return Object.keys(set).map(name => {
-        const cssVariable = "--bookish-" + name.replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map(s => s.toLowerCase()).join("-");
-        return `${cssVariable}: ${set[name]};`;
-    }).join("\n\t\t");
+    return Object.keys(set)
+        .map((name) => {
+        const value = set[name];
+        if (value.length > 0) {
+            const cssVariable = '--bookish-' +
+                name
+                    .replace(/([a-z])([A-Z])/g, '$1 $2')
+                    .split(' ')
+                    .map((s) => s.toLowerCase())
+                    .join('-')
+                    .replace(/([0-9])/g, '-$1-');
+            return `${cssVariable}: ${value};`;
+        }
+    })
+        .join('\n\t\t');
 }
 </script>
 
-<div class={"bookish" + ($darkMode ? " bookish-dark" : "")}>
-    <slot></slot>
-    <Status book={edition.getBook()} edition={edition}/>
-</div>
+<main class="bookish {$darkMode ? ' dark' : ''}">
+    <slot />
+</main>
+
+<style>
+    * {
+        box-sizing: border-box;
+    }
+
+    /* WINDOW AND PAGES */
+    :global(body) {
+        margin: 0;
+        padding: 0;
+        background-color: var(--bookish-background-color);
+    }
+
+    /* The root container for a book */
+    .bookish {
+        font-weight: var(--bookish-paragraph-font-weight);
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-paragraph-font-size);
+        background-color: var(--bookish-background-color);
+        color: var(--bookish-paragraph-color);
+        width: 100%;
+        z-index: 0;
+        text-align: left;
+    }
+</style>

package/components/page/Edition.svelte.d.ts

@@ -1,10 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type EditionModel from "../../models/book/Edition";
+import type EditionModel from '../../models/book/Edition';
 declare const __propDef: {
     props: {
-        editable?: boolean | undefined;
-        base?: string | undefined;
         edition: EditionModel;
+        base?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -13,9 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type EditionProps = typeof __propDef.props;
-export declare type EditionEvents = typeof __propDef.events;
-export declare type EditionSlots = typeof __propDef.slots;
+export type EditionProps = typeof __propDef.props;
+export type EditionEvents = typeof __propDef.events;
+export type EditionSlots = typeof __propDef.slots;
 export default class Edition extends SvelteComponentTyped<EditionProps, EditionEvents, EditionSlots> {
 }
 export {};

package/components/page/EditionLoader.svelte

@@ -0,0 +1,99 @@
+<script>import Loading from './Loading.svelte';
+import Edition from './Edition.svelte';
+import Feedback from '../app/Feedback.svelte';
+import { getBook, getEdition, getUser, CHAPTERTEXT, getChapterText, } from './Contexts';
+import { onDestroy } from 'svelte';
+import { page } from '$app/stores';
+import { listenToChapters, listenToEdition } from '../../models/CRUD';
+export let write;
+let auth = getUser();
+let book = getBook();
+let edition = getEdition();
+let chapterText = getChapterText();
+let editionUnsub = undefined;
+let chaptersUnsub = undefined;
+let error = undefined;
+function unsub() {
+    // Unsubscribe to the old edition document if we were listening to one.
+    if (editionUnsub)
+        editionUnsub();
+    if (chaptersUnsub)
+        chaptersUnsub();
+}
+function listen() {
+    unsub();
+    error = undefined;
+    // If we no longer have a book, we can't get an edition.
+    if ($book === undefined) {
+        edition.set(undefined);
+        error = 'Unknown book.';
+        return;
+    }
+    else {
+        const editionNumber = $page.params.editionid;
+        const latestPublished = !write;
+        // Figure out which edition to load.
+        let editionID;
+        if (editionNumber === undefined) {
+            if (latestPublished) {
+                editionID = $book.getLatestPublishedEditionID();
+                if (editionID === undefined)
+                    error = 'There is no published edition of this book.';
+            }
+            else {
+                editionID = $book.getLatestEditionID();
+            }
+        }
+        else {
+            editionID = $book.getEditionNumberID(parseFloat(editionNumber));
+            if (editionID === undefined)
+                error = `There is no ${editionNumber} edition of this book`;
+        }
+        // Listen to the doc for changes and listen to all of its chapters.
+        if (editionID !== undefined) {
+            editionUnsub = listenToEdition($book.ref.id, editionID, (ed) => {
+                if (ed) {
+                    // Before setting the new edition, augmented it with the chapter text.
+                    edition.set($chapterText
+                        ? ed.withChapterText($chapterText)
+                        : ed);
+                }
+                else {
+                    edition.set(undefined);
+                    error = 'Unable to load edition';
+                }
+            });
+            chaptersUnsub = listenToChapters($book.ref.id, editionID, (chapters) => {
+                // Update the chapter text store.
+                chapterText.set(chapters);
+                // Update the chapter text in the current edition.
+                if ($edition)
+                    edition.set($edition.withChapterText(chapters));
+            });
+        }
+    }
+}
+// Whenever the book or page changes, change the listener.
+$: if ($page && $auth && $auth.user !== null)
+    listen();
+// When unmounted, unset the stores — no longer viewing a book.
+onDestroy(() => {
+    edition.set(undefined);
+    unsub();
+});
+</script>
+
+{#if $book === undefined || error}
+    <Feedback error>Unable to load edition.</Feedback>
+{:else if $edition === undefined}
+    <Loading />
+{:else}
+    <Edition
+        edition={$edition}
+        base={write
+            ? `/write/${$book.getRefID()}/${$edition.getEditionNumber()}/`
+            : `/${$book.getSubdomain() ?? $book.getRefID()}/`}
+    >
+        <slot />
+    </Edition>
+{/if}

package/components/page/EditionLoader.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        write: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type EditionLoaderProps = typeof __propDef.props;
+export type EditionLoaderEvents = typeof __propDef.events;
+export type EditionLoaderSlots = typeof __propDef.slots;
+export default class EditionLoader extends SvelteComponentTyped<EditionLoaderProps, EditionLoaderEvents, EditionLoaderSlots> {
+}
+export {};

package/components/page/Editions.svelte

@@ -0,0 +1,106 @@
+<script>import { createNewEdition } from '../../models/CRUD';
+import Instructions from './Instructions.svelte';
+import Note from '../editor/Note.svelte';
+import { getUser, getBook, isBookEditable } from './Contexts';
+import Button from '../app/Button.svelte';
+import Link from '../app/Link.svelte';
+import Format from '../chapter/Format.svelte';
+import Parser from '../../models/chapter/Parser';
+import Permissions from '../editor/Permissions.svelte';
+let book = getBook();
+let editable = isBookEditable();
+$: editions = $book?.getEditions();
+$: latestPublishedID = $book?.getLatestPublishedEditionID();
+async function handleDraftEdition() {
+    if ($book === undefined)
+        return;
+    book.set(await createNewEdition($book));
+}
+</script>
+
+{#if $book && editions}
+    {#if editable}
+        <p>
+            <Button tooltip="create new edition" command={handleDraftEdition}
+                >+ edition</Button
+            >
+        </p>
+    {/if}
+    <Instructions {editable}>
+        Each book has one or more editions, allowing you to track revisions and
+        ensure previous versions remain available. When you're ready to revise,
+        add a new edition here; it will copy the latest edition, which you can
+        then edit. When you're ready to publish an edition, write a summary here
+        and then publish. By default, readers will see the latest published
+        edition, but they can access older editions here.
+    </Instructions>
+    {#each editions as bookEdition, index (bookEdition.ref)}
+        {@const editionNumber =
+            editions === undefined ? -1 : editions.length - index}
+        {@const editionLabel =
+            editionNumber +
+            (editionNumber === 1
+                ? 'st'
+                : editionNumber === 2
+                ? 'nd'
+                : editionNumber === 3
+                ? 'rd'
+                : 'th')}
+
+        {#if $book && (editable || bookEdition.published)}
+            <section class="edition">
+                <h3
+                    >{editionLabel}
+                    <Note
+                        >{#if bookEdition.published}{new Date(
+                                bookEdition.published
+                            ).toLocaleDateString(
+                                'en-us'
+                            )}{:else}unpublished{/if}
+                        &nbsp;
+                        <Link
+                            to={latestPublishedID === bookEdition.ref.id &&
+                            $book.getSubdomain() !== undefined
+                                ? `/${$book.getSubdomain()}`
+                                : `/${$book.ref.id}/${editions.length - index}`}
+                            >read</Link
+                        >
+                        {#if editable}
+                            &nbsp;
+                            <Link
+                                to={`/write/${$book.ref.id}/${
+                                    editions.length - index
+                                }`}>edit</Link
+                            >
+                        {/if}
+                    </Note>
+                </h3>
+                <p
+                    >{#if bookEdition.summary !== ''}<Format
+                            node={Parser.parseFormat(
+                                undefined,
+                                bookEdition.summary
+                            )}
+                        />{:else}&mdash{/if}</p
+                >
+            </section>
+        {/if}
+    {/each}
+
+    {#if editable}
+        <h2>Editors</h2>
+        <Instructions {editable}>
+            These authors can edit any aspect of the book and any of its
+            editions.
+        </Instructions>
+
+        <Permissions
+            uids={$book.uids}
+            inheriteduids={[]}
+            atleastone={true}
+            writable={editable}
+            change={(uids) =>
+                $book ? book.set($book.withEditors(uids)) : undefined}
+        />
+    {/if}
+{/if}

package/components/page/Editions.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditionsProps = typeof __propDef.props;
+export type EditionsEvents = typeof __propDef.events;
+export type EditionsSlots = typeof __propDef.slots;
+export default class Editions extends SvelteComponentTyped<EditionsProps, EditionsEvents, EditionsSlots> {
+}
+export {};

package/components/page/Glossary.svelte

@@ -1,61 +1,77 @@
-<script>import Header from "./Header.svelte";
+<script>import Header from './Header.svelte';
 import Outline from './Outline.svelte';
 import Page from './Page.svelte';
 import ChapterIDs from '../../models/book/ChapterID';
-import DefinitionView from "./DefinitionView.svelte";
-import { getEdition, isEditable } from "./Contexts";
-import Instructions from "./Instructions.svelte";
+import DefinitionView from './DefinitionView.svelte';
+import { getUser, getEdition, isEditionEditable } from './Contexts';
+import Instructions from './Instructions.svelte';
+import Button from '../app/Button.svelte';
+let auth = getUser();
 let edition = getEdition();
-let editable = isEditable();
-$: glossary = $edition.getGlossary();
+let editable = isEditionEditable();
+$: glossary = $edition?.getGlossary() ?? {};
 // Sort by canonical phrases
-$: keys = glossary === undefined || Object.keys(glossary).length === 0 ? null : Object.keys(glossary).sort((a, b) => glossary[a].phrase.localeCompare(glossary[b].phrase));
+$: keys =
+    $edition === undefined
+        ? []
+        : glossary === undefined || Object.keys(glossary).length === 0
+            ? null
+            : Object.keys(glossary).sort((a, b) => glossary[a].phrase.localeCompare(glossary[b].phrase));
 function addEmptyDefinition() {
+    if ($edition === undefined)
+        return;
     // Generate an ID.
-    const letters = "abcdefghijklmnopqrstuvwxyz".split("");
-    let id = "";
+    const letters = 'abcdefghijklmnopqrstuvwxyz'.split('');
+    let id = '';
     while (id.length < 4 || $edition.hasDefinition(id))
         id = id + letters[Math.round(Math.random() * 26)];
-    $edition.addDefinition(id, "", "", []);
+    edition.set($edition.withDefinition(id, '', '', []));
 }
 </script>
 
-<Page title={`${$edition.getTitle()} - Glossary`}>
-    <Header 
-        label="Glossary title"
-        getImage={() => $edition.getImage(ChapterIDs.GlossaryID)}
-        setImage={(embed) => $edition.setImage(ChapterIDs.GlossaryID, embed)}
-        header="Glossary"
-        tags={$edition.getTags()}
-    >
-        <Outline
-            slot="outline"
-            previous={$edition.getPreviousChapterID(ChapterIDs.GlossaryID)}
-            next={$edition.getNextChapterID(ChapterIDs.GlossaryID)}
-        />
-    </Header>
-    {#if editable }
-        <Instructions>
-            Add definitions and then link to them in a chapter's text.
-        </Instructions>
-        <p><button on:click={addEmptyDefinition}>+</button></p>
-    {/if}
-    {#if keys === null }
-        <p>This book has no glossary.</p>
-    {:else}
-        <div>
-            <br/>
-            <div class="bookish-table">
-                <table>
-                    <colgroup>
-                        <col style="width: 40%" />
-                        <col style="width: 60%" />
-                    </colgroup>
-                    <tbody>
-                        {#each keys as id }<DefinitionView id={id} definition={glossary[id]} />{/each}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    {/if}
-</Page>
+{#if $edition}
+    <Page title={`${$edition.getTitle()} - Glossary`}>
+        <Header
+            editable={isEditionEditable() ||
+                ($auth !== undefined &&
+                    $auth.user !== null &&
+                    $edition.isChapterEditor($auth.user.uid))}
+            label="Glossary title"
+            id="glossary"
+            getImage={() => $edition?.getImage(ChapterIDs.GlossaryID) ?? null}
+            setImage={(embed) =>
+                $edition
+                    ? edition.set(
+                          $edition.withImage(ChapterIDs.GlossaryID, embed)
+                      )
+                    : undefined}
+            header="Glossary"
+            tags={$edition.getTags()}
+        >
+            <Outline
+                slot="outline"
+                previous={$edition.getPreviousChapterID(ChapterIDs.GlossaryID)}
+                next={$edition.getNextChapterID(ChapterIDs.GlossaryID)}
+            />
+        </Header>
+        {#if editable}
+            <Instructions {editable}>
+                Build a glossary here, adding terms, phrases, definitions, and
+                synonyms. Then, in a chapter, you can select any text and link
+                it to a definition.
+            </Instructions>
+            <Button tooltip="add glossary entry" command={addEmptyDefinition}
+                >+ definition</Button
+            >
+        {/if}
+        {#if keys === null}
+            <p>This book has no glossary.</p>
+        {:else}
+            <dl>
+                {#each keys as id (id)}
+                    <DefinitionView {id} definition={glossary[id]} />
+                {/each}
+            </dl>
+        {/if}
+    </Page>
+{/if}

package/components/page/Glossary.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type GlossaryProps = typeof __propDef.props;
-export declare type GlossaryEvents = typeof __propDef.events;
-export declare type GlossarySlots = typeof __propDef.slots;
+export type GlossaryProps = typeof __propDef.props;
+export type GlossaryEvents = typeof __propDef.events;
+export type GlossarySlots = typeof __propDef.slots;
 export default class Glossary extends SvelteComponentTyped<GlossaryProps, GlossaryEvents, GlossarySlots> {
 }
 export {};