bookish-press 0.4.0 → 0.4.16

package/components/page/Contexts.js

@@ -2,20 +2,50 @@
 // to avoid key collisions and prevent typos. This is partly
 // future-proofing, but also because getContext<Type>() isn't type safe,
 // as the resulting value is coerced to Type even if it's not that value.
-import { getContext } from "svelte";
-export const AUTH = Symbol("auth");
-export function getAuth() { return getContext(AUTH); }
-export const EDITION = Symbol("edition");
-export function getEdition() { return getContext(EDITION); }
-export const CARET = Symbol("caret");
-export function getCaret() { return getContext(CARET); }
-export const DARK_MODE = Symbol("dark");
-export function getDarkMode() { return getContext(DARK_MODE); }
-export const CHAPTER = Symbol("chapter");
-export function getChapter() { return getContext(CHAPTER); }
-export const EDITABLE = Symbol("editable");
-export function isEditable() { return getContext(EDITABLE); }
-export const BASE = Symbol("base");
-export function getBase() { return getContext(BASE); }
-export const BOOK = Symbol("book");
-export function getBook() { return getContext(BOOK); }
+import { getContext } from 'svelte';
+import { get } from 'svelte/store';
+export const DARK_MODE = Symbol('dark');
+export function getDarkMode() {
+    return getContext(DARK_MODE);
+}
+export const AUTH = Symbol('auth');
+export function getAuth() {
+    return getContext(AUTH);
+}
+export const BOOK = Symbol('book');
+export function getBook() {
+    return getContext(BOOK);
+}
+export const EDITION = Symbol('edition');
+export function getEdition() {
+    return getContext(EDITION);
+}
+export const CHAPTER = Symbol('chapter');
+export function getChapter() {
+    return getContext(CHAPTER);
+}
+/**
+ * Update the edition that contains the chapter, then update the
+ * global edition store with the new edition, propogating the changes everywhere.
+ */
+export function setChapter(store, previous, chapter) {
+    const edition = get(store);
+    if (edition)
+        store.set(edition.withRevisedChapter(previous, chapter));
+}
+export const EDITABLE = Symbol('editable');
+export function isEditable() {
+    return getContext(EDITABLE);
+}
+export const BASE = Symbol('base');
+export function getBase() {
+    return getContext(BASE);
+}
+export const CARET = Symbol('caret');
+export function getCaret() {
+    return getContext(CARET);
+}
+export const STATUS = Symbol('status');
+export function getStatus() {
+    return getContext(STATUS);
+}

package/components/page/DefinitionView.svelte

@@ -6,6 +6,7 @@ import Format from '../chapter/Format.svelte';
 import Note from '../editor/Note.svelte';
 import { afterUpdate } from 'svelte';
 import { getEdition, isEditable } from './Contexts';
+import Button from '../app/Button.svelte';
 export let id;
 export let definition;
 let edition = getEdition();
@@ -15,7 +16,7 @@ let newSynonym = false;
 let synonymsEditor = null;
 afterUpdate(() => {
     if (newSynonym && synonymsEditor) {
-        const editors = synonymsEditor.querySelectorAll("input");
+        const editors = synonymsEditor.querySelectorAll('input');
         if (editors.length > 0) {
             const last = editors[editors.length - 1];
             if (last instanceof HTMLElement)
@@ -26,104 +27,132 @@ afterUpdate(() => {
 });
 $: format = Parser.parseFormat(undefined, definition.definition).withTextIfEmpty();
 function addSynonym() {
-    if ($edition && definition.synonyms) {
-        $edition.editDefinition(id, {
+    if ($edition) {
+        edition.set($edition.withEditedDefinition(id, {
             phrase: definition.phrase,
             definition: definition.definition,
-            synonyms: [...definition.synonyms, ""]
-        });
+            synonyms: [...(definition.synonyms ?? []), ''],
+        }));
     }
     newSynonym = true;
 }
 $: syns = definition.synonyms || [];
 </script>
 
-<tr>
-    <td>
-        {#if editable && edition }
-            <ConfirmButton
-                commandLabel="x"
-                confirmLabel="Confirm"
-                command={() => $edition.removeDefinition(id)}
-            />
-        {/if}
-        {#if editable && edition }
-            <strong>
+{#if $edition}
+    <section class="definition">
+        <dt>
+            {#if editable}
                 <TextEditor
-                    startText={definition.phrase} 
-                    label={'Glossary phrase editor.'} 
+                    text={definition.phrase}
+                    label={'Glossary phrase editor.'}
                     placeholder="Phrase"
-                    valid={ text => {
-                        if(text.length === 0) return "Phrase can't be empty";
+                    valid={(text) => {
+                        if (text.length === 0) return "phrase can't be empty";
                     }}
-                    save={text => $edition.editDefinition(id, { 
-                        phrase: text, 
-                        definition: definition.definition, 
-                        synonyms: definition.synonyms
-                    })}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedDefinition(id, {
+                                      phrase: text,
+                                      definition: definition.definition,
+                                      synonyms: definition.synonyms,
+                                  })
+                              )
+                            : undefined}
                 />
-            </strong>
-        {:else}
-            <strong>{#if definition.phrase }{definition.phrase}{:else}<em>Phrase</em>{/if}</strong>
-        {/if}
-    </td>
-    <td>
-        {#if editable && edition }
-            <BookishEditor
-                ast={format} 
-                save={node => $edition.editDefinition(id, { 
-                    phrase: definition.phrase, 
-                    definition: node.toBookdown(), 
-                    synonyms: definition.synonyms
-                })}
-                chapter={false}
-                component={Format}
-                placeholder="How would you define this?"
-            />
-        {:else}
-            {#if definition.definition === ""}
+            {:else if definition.phrase}{definition.phrase}{:else}<em
+                    >&mdash;</em
+                >{/if}
+            {#if editable}
+                <ConfirmButton
+                    tooltip="delete entry {definition.phrase}"
+                    commandLabel="- definition"
+                    confirmLabel="confirm"
+                    command={() =>
+                        $edition
+                            ? edition.set($edition.withoutDefinition(id))
+                            : undefined}
+                />
+            {/if}
+        </dt>
+
+        <dd class="term">
+            {#if editable && edition}
+                <BookishEditor
+                    ast={format}
+                    save={(node) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedDefinition(id, {
+                                      phrase: definition.phrase,
+                                      definition: node.toBookdown(),
+                                      synonyms: definition.synonyms,
+                                  })
+                              )
+                            : undefined}
+                    chapter={false}
+                    component={Format}
+                    placeholder="write a definition"
+                />
+            {:else if definition.definition === ''}
                 <em>Definition</em>
             {:else}
-                <Format node={format}/>
+                <Format node={format} />
             {/if}
-        {/if}
-        <br/>
-        {#if edition && editable }
-            <span bind:this={synonymsEditor}>
-                <button on:click={addSynonym}>+</button>&nbsp;
-                {#if syns.length === 0 }
-                    <em>No synonyms</em>
-                {:else}
-                    {#each syns as syn, index }
-                        <Note>
-                            <TextEditor
-                                startText={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;
-                                    return $edition.editDefinition(id, { 
-                                        phrase: definition.phrase, 
-                                        definition: definition.definition, 
-                                        synonyms: newSyns
-                                    });
-                                }}
-                            />
-                        </Note>
-                        {#if syns.length > 1 && index < syns.length - 1 },&nbsp;{/if}
-                    {/each}
-                {/if}
-            </span>
-        {:else}
-            {#if definition.synonyms !== undefined && definition.synonyms.length > 0 }
-                <Note>{definition.synonyms.join(", ")}</Note>
+            {#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}
+                </span>&nbsp;<Button tooltip="add synonym" command={addSynonym}
+                    >+ synonym</Button
+                >
+            {:else if definition.synonyms !== undefined && definition.synonyms.length > 0}
+                <Note>{definition.synonyms.join(', ')}</Note>
             {/if}
-        {/if}
-    </td>
-</tr>
+        </dd>
+    </section>
+{/if}
+
+<style>
+    dd {
+        margin: 0;
+        margin-top: var(--bookish-paragraph-spacing);
+    }
+
+    dt {
+        font-weight: bold;
+    }
+</style>

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

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type DefinitionViewProps = typeof __propDef.props;
-export declare type DefinitionViewEvents = typeof __propDef.events;
-export declare type DefinitionViewSlots = typeof __propDef.slots;
+export type DefinitionViewProps = typeof __propDef.props;
+export type DefinitionViewEvents = typeof __propDef.events;
+export type DefinitionViewSlots = typeof __propDef.slots;
 export default class DefinitionView extends SvelteComponentTyped<DefinitionViewProps, DefinitionViewEvents, DefinitionViewSlots> {
 }
 export {};

package/components/page/Description.svelte

@@ -1,22 +1,31 @@
-<script>import Parser from "../../models/chapter/Parser";
-import ChapterBody from "../chapter/ChapterBody.svelte";
-import BookishEditor from "../editor/BookishEditor.svelte";
-import { getEdition, isEditable } from "./Contexts";
+<script>import Parser from '../../models/chapter/Parser';
+import ChapterBody from '../chapter/ChapterBody.svelte';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import { getEdition, isEditable } from './Contexts';
 let editable = isEditable();
 let edition = getEdition();
-$: descriptionNode = Parser.parseChapter($edition, $edition.getDescription());
+$: descriptionNode = $edition
+    ? Parser.parseChapter($edition, $edition.getDescription())
+    : undefined;
 </script>
 
-<div class="bookish-description">
-    {#if editable}
-        <BookishEditor 
-            ast={descriptionNode} 
-            save={node => $edition.setDescription(node.toBookdown())}
-            chapter={false}
-            component={ChapterBody}
-            placeholder="What this book about?"
-        />
-    {:else}
-        <ChapterBody node={descriptionNode}/>
-    {/if}
-</div>
+{#if descriptionNode}
+    <section class="bookish-description">
+        {#if editable}
+            <BookishEditor
+                ast={descriptionNode}
+                save={(node) =>
+                    $edition
+                        ? edition.set(
+                              $edition?.setDescription(node.toBookdown())
+                          )
+                        : undefined}
+                chapter={false}
+                component={ChapterBody}
+                placeholder="What is this book about?"
+            />
+        {:else}
+            <ChapterBody node={descriptionNode} />
+        {/if}
+    </section>
+{/if}

package/components/page/Description.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 DescriptionProps = typeof __propDef.props;
-export declare type DescriptionEvents = typeof __propDef.events;
-export declare type DescriptionSlots = typeof __propDef.slots;
+export type DescriptionProps = typeof __propDef.props;
+export type DescriptionEvents = typeof __propDef.events;
+export type DescriptionSlots = typeof __propDef.slots;
 export default class Description extends SvelteComponentTyped<DescriptionProps, DescriptionEvents, DescriptionSlots> {
 }
 export {};

package/components/page/Edition.svelte

@@ -1,9 +1,9 @@
 <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 { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { BASE, DARK_MODE, EDITABLE, } 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.
@@ -11,96 +11,149 @@ export let editable = false;
 // When editable changes, update the context.
 $: setContext(EDITABLE, editable);
 // 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);
+let baseStore = writable(base);
+$: setContext(BASE, baseStore);
+$: baseStore.set(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);
-});
 // 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(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");
-        localStorage.setItem("bookish-dark", "true");
-    }
-    else {
-        document.body.classList.remove("bookish-dark");
-        localStorage.setItem("bookish-dark", "false");
-    }
+    if ($darkMode)
+        document.body.classList.add('dark');
+    else
+        document.body.classList.remove('dark');
+    if (typeof localStorage !== 'undefined')
+        localStorage.setItem('dark', $darkMode ? 'true' : 'false');
 }
 // 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());
+$: setTheme(edition.getTheme() ?? BookishTheme);
+/** 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,5 +1,5 @@
 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;
@@ -13,9 +13,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 {};