bookish-press 0.4.0

package/components/page/DefinitionView.svelte

@@ -0,0 +1,129 @@
+<script>import Parser from '../../models/chapter/Parser';
+import ConfirmButton from '../editor/ConfirmButton.svelte';
+import TextEditor from '../editor/TextEditor.svelte';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import Format from '../chapter/Format.svelte';
+import Note from '../editor/Note.svelte';
+import { afterUpdate } from 'svelte';
+import { getEdition, isEditable } from './Contexts';
+export let id;
+export let definition;
+let edition = getEdition();
+let editable = isEditable();
+// Focus after adding a new synonym.
+let newSynonym = false;
+let synonymsEditor = null;
+afterUpdate(() => {
+    if (newSynonym && synonymsEditor) {
+        const editors = synonymsEditor.querySelectorAll("input");
+        if (editors.length > 0) {
+            const last = editors[editors.length - 1];
+            if (last instanceof HTMLElement)
+                last.focus();
+        }
+        newSynonym = false;
+    }
+});
+$: format = Parser.parseFormat(undefined, definition.definition).withTextIfEmpty();
+function addSynonym() {
+    if ($edition && definition.synonyms) {
+        $edition.editDefinition(id, {
+            phrase: definition.phrase,
+            definition: definition.definition,
+            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>
+                <TextEditor
+                    startText={definition.phrase} 
+                    label={'Glossary phrase editor.'} 
+                    placeholder="Phrase"
+                    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
+                    })}
+                />
+            </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 === ""}
+                <em>Definition</em>
+            {:else}
+                <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}
+        {/if}
+    </td>
+</tr>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type Definition from '../../models/book/Definition';
+declare const __propDef: {
+    props: {
+        id: string;
+        definition: Definition;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type DefinitionViewProps = typeof __propDef.props;
+export declare type DefinitionViewEvents = typeof __propDef.events;
+export declare type DefinitionViewSlots = typeof __propDef.slots;
+export default class DefinitionView extends SvelteComponentTyped<DefinitionViewProps, DefinitionViewEvents, DefinitionViewSlots> {
+}
+export {};

package/components/page/Description.svelte

@@ -0,0 +1,22 @@
+<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());
+</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>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    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 default class Description extends SvelteComponentTyped<DescriptionProps, DescriptionEvents, DescriptionSlots> {
+}
+export {};

package/components/page/Edition.svelte

@@ -0,0 +1,106 @@
+<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";
+// 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);
+// 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 "/", 
+// 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 = "";
+// 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);
+});
+// 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
+));
+// 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");
+    }
+}
+// Redirect old hash routes by simply replacing their hash before routing.
+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());
+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);
+}
+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");
+}
+</script>
+
+<div class={"bookish" + ($darkMode ? " bookish-dark" : "")}>
+    <slot></slot>
+    <Status book={edition.getBook()} edition={edition}/>
+</div>

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

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

package/components/page/Glossary.svelte

@@ -0,0 +1,61 @@
+<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";
+let edition = getEdition();
+let editable = isEditable();
+$: 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));
+function addEmptyDefinition() {
+    // Generate an 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, "", "", []);
+}
+</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>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    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 default class Glossary extends SvelteComponentTyped<GlossaryProps, GlossaryEvents, GlossarySlots> {
+}
+export {};

package/components/page/Header.svelte

@@ -0,0 +1,105 @@
+<script>import EmbedNode from '../../models/chapter/EmbedNode';
+import Parser from "../../models/chapter/Parser";
+import Embed from '../chapter/Embed.svelte';
+import ErrorMessage from '../chapter/ErrorMessage.svelte';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import { onMount } from 'svelte';
+import TextEditor from '../editor/TextEditor.svelte';
+import { getEdition, isEditable } from './Contexts';
+export let label;
+export let header;
+export let subtitle = undefined;
+export let print = false;
+export let tags = undefined;
+export let getImage;
+export let setImage;
+export let save = null;
+let title = null;
+let reminder = null;
+let edition = getEdition();
+let editable = isEditable();
+function updateScrollReminder() {
+    if (title && reminder) {
+        // If the bottom of the window is below the top of the title, hide the reminder.
+        if (window.scrollY + window.innerHeight > title.getBoundingClientRect().top + window.scrollY)
+            reminder.classList.add("bookish-past-title");
+        else
+            reminder.classList.remove("bookish-past-title");
+    }
+}
+function addCover() { if (setImage)
+    setImage("|||||"); }
+function removeCover() { if (setImage)
+    setImage(null); }
+// When the title becomes visible or hidden, update the scroll reminder.
+onMount(() => {
+    const intersectionObserver = new IntersectionObserver(() => updateScrollReminder());
+    if (title)
+        intersectionObserver.observe(title);
+    updateScrollReminder();
+    // Stop observing when unmounted.
+    return () => { if (title)
+        intersectionObserver.unobserve(title); };
+});
+// Get the embed, update when getImage function prop changes.
+let embedNode = undefined;
+$: {
+    let embed = getImage();
+    embedNode = embed ? Parser.parseEmbed($edition, embed) : undefined;
+}
+</script>
+
+<div class="bookish-chapter-header">
+    {#if embedNode }
+        <div class="bookish-figure-full">
+            {#if edition && editable && embedNode instanceof EmbedNode}
+                <BookishEditor 
+                    ast={embedNode} 
+                    save={node => setImage ? setImage(node.toBookdown()) : undefined }
+                    chapter={false}
+                    component={Embed}
+                    placeholder=""
+                />
+            {:else if embedNode instanceof EmbedNode }
+                <Embed node={embedNode}/>
+            {:else}
+                <ErrorMessage node={embedNode} />
+            {/if}
+            {#if !print }<div bind:this={reminder} class="bookish-scroll-reminder"></div>{/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"></slot>
+    {/if}
+    {#if editable }
+        {#if embedNode === undefined }
+            <button on:click={addCover}>+ cover image</button> 
+        {:else}
+            <button on:click={removeCover}>x cover image</button>
+        {/if}
+    {/if}
+    <div class="bookish-chapter-header-text">
+        <slot name="before"></slot>
+        <h1 bind:this={title} class="bookish-title">
+            {#if editable && save }
+                <TextEditor 
+                    label={label}
+                    startText={header + (subtitle ? ": " + subtitle : "")}
+                    placeholder="Title"
+                    valid={text => text.length === 0 ? "Titles have to be at least one character long." : undefined }
+                    save={save}
+                />
+            {:else}
+                { header }
+                {#if subtitle }<div class="bookish-subtitle">{subtitle}</div>{/if}
+            {/if}
+        </h1>
+        <slot name="after"></slot>
+        {#if tags }
+            <div>{#each tags as tag}<span class="bookish-tag">{tag}</span>{/each}</div>
+        {/if}
+    </div>
+</div>

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

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label: string;
+        header: string;
+        subtitle?: string | undefined;
+        print?: boolean | undefined;
+        tags?: string[] | undefined;
+        getImage: (() => string | null);
+        setImage: (embed: string | null) => Promise<void> | undefined;
+        save?: ((text: string) => Promise<void> | undefined) | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        outline: {};
+        before: {};
+        after: {};
+    };
+};
+export declare type HeaderProps = typeof __propDef.props;
+export declare type HeaderEvents = typeof __propDef.events;
+export declare type HeaderSlots = typeof __propDef.slots;
+export default class Header extends SvelteComponentTyped<HeaderProps, HeaderEvents, HeaderSlots> {
+}
+export {};

package/components/page/Index.svelte

@@ -0,0 +1,117 @@
+<script>import Header from "./Header.svelte";
+import Outline from './Outline.svelte';
+import Page from './Page.svelte';
+import Instructions from './Instructions.svelte';
+import ChapterIDs from '../../models/book/ChapterID';
+import Link from "../Link.svelte";
+import { getBase, getEdition } from "./Contexts";
+import { page } from "$app/stores";
+let edition = getEdition();
+let base = getBase();
+// What letter are we matching?
+$: letter = $page.params.letter;
+$: bookIndex = $edition.getBookIndex();
+let letters = {};
+// Figure out what letters have words
+$: {
+    for (const word of Object.keys(bookIndex).sort((a, b) => a.localeCompare(b)))
+        letters[word.charAt(0).toLocaleLowerCase()] = true;
+}
+let words = [];
+$: {
+    words = [];
+    let count = 0;
+    Object.keys(bookIndex).sort((a, b) => a.localeCompare(b)).forEach(word => {
+        const firstLetter = word.charAt(0).toLowerCase();
+        if (letter === firstLetter) {
+            count++;
+            if (count % 20 === 0)
+                words.push(true);
+            words.push(word);
+        }
+    });
+}
+</script>
+
+<Page title={`${$edition.getTitle()} - Index`}>
+    <Header 
+        label="Index title"
+        getImage={() => $edition.getImage(ChapterIDs.IndexID)}
+        setImage={(embed) => $edition.setImage(ChapterIDs.IndexID, embed)}
+        header="Index"
+        tags={$edition.getTags()}
+    >
+        <Outline
+            slot="outline"
+            previous={$edition.getPreviousChapterID(ChapterIDs.IndexID)}
+            next={$edition.getNextChapterID(ChapterIDs.IndexID)}
+        />
+    </Header>
+
+    <Instructions>
+        This index is created automatically.
+        It's not perfect; we may add more control over it in the future.
+    </Instructions>
+
+    <p><em>This index includes all words, excluding common English words, words with apostrophes, and words ending in -ly.</em></p>
+
+    {#if Object.keys(letters).length === 0 }
+        <p>There are no words in this book, so there's no index.</p>
+    {:else}
+        <p>Pick a letter to browse:</p>
+
+        <p>
+            {#each "abcdefghijklmnopqrstuvwxyz".split("") as symbol, index}
+                <span style="display: inline-block">
+                    {#if symbol in letters && letter !== symbol }
+                        <Link to={base + "/index/" + symbol}>{symbol}</Link>
+                    {:else}
+                        <span>
+                            {#if letter === symbol } 
+                                <strong><span style="font-size: 200%">{symbol}</span></strong>
+                            {:else}
+                                <span class={"bookish-muted"}>{symbol}</span>
+                            {/if}
+                        </span>
+                    {/if}
+                    {#if index < 26 - 1 } 
+                        <span>&sdot;</span>
+                    {/if}
+                </span>
+            {/each}
+        </p>
+
+        <div class="bookish-table">
+            <table>
+                <tbody>
+                    {#each words as word, index }
+                        {#if word === true}
+                            <tr><td colspan={2}><h2 class="bookish-header">{words[index + 1]}</h2></td></tr>
+                        {:else}
+                            <tr>
+                                <td>{word}</td>
+                                <td>
+                                    <!-- Sort the chapters by chapter number -->
+                                    {#each Array.from(bookIndex[word])
+                                        .sort((a, b) => {
+                                            let numberA = $edition.getChapterNumber(a);
+                                            let numberB = $edition.getChapterNumber(b);
+                                            if(numberA === undefined) return -1;
+                                            if(numberB === undefined) return 1;
+                                            return numberA - numberB;
+                                        }) as chapterID, index }
+                                        <!-- Map them to links to the first occurrence in the chapter. -->
+                                        <span>
+                                            Chapter {#if $edition.getChapterNumber(chapterID) !== undefined}<span> {$edition.getChapterNumber(chapterID)}. </span>{/if}<Link to={`${base}/${chapterID}?word=${word}`}>{$edition.getChapterName(chapterID)}</Link>
+                                            {#if index < bookIndex[word].size - 1 }<br/>{/if}
+                                        </span>
+                                    {/each}
+                                </td>
+                            </tr>
+                        {/if}
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+    {/if}
+</Page>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type IndexProps = typeof __propDef.props;
+export declare type IndexEvents = typeof __propDef.events;
+export declare type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponentTyped<IndexProps, IndexEvents, IndexSlots> {
+}
+export {};