bookish-press 0.4.0

package/components/page/Reference.svelte

@@ -0,0 +1,145 @@
+<script>import { afterUpdate } from "svelte";
+import TextEditor from "../editor/TextEditor.svelte";
+import { getEdition, isEditable } from "./Contexts";
+export let node;
+let editable = isEditable();
+let edition = getEdition();
+let reference = null;
+let editing = false;
+let entered = false;
+afterUpdate(() => {
+    if (editing && entered && reference) {
+        entered = false;
+        reference.querySelector("input")?.focus();
+    }
+});
+function startEditing() {
+    editing = true;
+    entered = true;
+}
+function stopEditing() {
+    editing = false;
+}
+</script>
+
+<!-- If a short version was requested, try to abbreviate the authors. -->
+{#if node.short }
+    {@const authorList = node.authors.split(",") }
+    {@const authors =   authorList.length === 1 ?   authorList[0] :
+                        authorList.length === 2 ?   authorList[0].trim() + " & " + authorList[1].trim() :
+                                                    authorList[0].trim() + ", et al."}
+    <span data-nodeid={node.nodeID} class="bookish-reference-text">
+        {authors}
+        ({node.year}).
+        {#if node.url === null }
+            {node.title}
+        {:else}
+            <a href={node.url} target={"_blank"}>{node.title}</a>
+        {/if}
+        {node.title.charAt(node.title.length - 1) === "?" ? "" : "."}
+        <em>{node.source}</em>
+    </span>
+{:else}
+    <!-- If editable, place in rows to make room for text editors to not have to wrap. -->
+    <span 
+        data-nodeid={node.nodeID} 
+        class="bookish-reference-text"
+        tabIndex=0
+        on:click|stopPropagation={() => { if(editable && !editing) startEditing(); }}
+        on:keydown={event => { if(editable && !editing && (event.key === "Enter" || event.key === " ")) { startEditing(); event.stopPropagation(); }}}
+        bind:this={reference}
+    >
+        <!-- Authors -->
+        {#if editable && editing }
+            <em>
+                <TextEditor
+                    startText={node.authors} 
+                    label={'Author list editor.'}
+                    placeholder="Authors"
+                    valid={ text => {
+                        if(text.length === 0) return "Authors can't be empty.";
+                    }}
+                    save={text => $edition.editReference(node.withAuthors(text))}
+                    width={60}
+                />
+            </em>
+        {:else}
+            {#if node.authors }
+                {node.authors}
+            {:else}
+                <em>Authors</em>
+            {/if}
+        {/if}
+        <!-- Year -->
+        <br/>({#if editable && editing }
+                <TextEditor
+                    startText={node.year} 
+                    label={'Year editor.'} 
+                    placeholder="Year"
+                    valid={ text => {
+                        if(text.length === 0) return "Year can't be empty";
+                        if(!/1?[0-9)[0-9]{2}/.test(text)) return "Not a valid year"
+                    }}
+                    save={text => $edition.editReference(node.withYear(text))}
+                />
+            {:else}
+                {#if node.year }{node.year}{:else}<em>Year</em>{/if}
+            {/if}). 
+        <!-- Title -->
+        {#if editable && editing }
+            <br/><TextEditor
+                startText={node.title} 
+                label={'Title editor.'} 
+                placeholder="Title"
+                valid={ text => {
+                    if(text.length === 0) return "Title can't be empty.";
+                }}
+                save={text => $edition.editReference(node.withTitle(text))}
+                width={60}
+            />
+        {:else}
+            {#if node.url === null}
+                {#if node.title}{node.title}{:else}<em>Title</em>{/if}
+            {:else}
+                <a href={node.url} target={"_blank"}>{#if node.title}{node.title}{:else}<em>Title</em>{/if}</a>
+            {/if}
+        {/if}. 
+        <!-- Source -->
+        {#if editable && editing }
+            <br/><em>
+                <TextEditor
+                    startText={node.source}
+                    label={'Source editor.'} 
+                    placeholder="Source"
+                    valid={ text => {
+                        if(text.length === 0) return "Source can't be empty";
+                    }}
+                    save={text => $edition.editReference(node.withSource(text))}
+                    width={60}
+                />
+            </em>
+        {:else}
+            <em>{#if node.source}{node.source}{:else}Source{/if}</em>
+        {/if}. 
+        {#if editable && editing }
+            <br/><TextEditor
+                startText={node.summary} 
+                label={'Summary editor.'} 
+                placeholder="Summary"
+                valid={ () => undefined }
+                save={text => $edition.editReference(node.withSummary(text))}
+                width={60}
+            />
+        {:else}
+            {#if node.summary}
+                <span class="bookish-reference-summary">{node.summary}</span>
+            {/if}
+        {/if}
+        {#if editing }
+            <br/><button 
+                on:click|stopPropagation={() => stopEditing()}
+                on:keydown={event => { if(editing && (event.key === "Enter" || event.key === " ")) { stopEditing(); event.stopPropagation(); }}}
+                >done editing</button>
+        {/if}
+    </span>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type ReferenceNode from "../../models/chapter/ReferenceNode";
+declare const __propDef: {
+    props: {
+        node: ReferenceNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ReferenceProps = typeof __propDef.props;
+export declare type ReferenceEvents = typeof __propDef.events;
+export declare type ReferenceSlots = typeof __propDef.slots;
+export default class Reference extends SvelteComponentTyped<ReferenceProps, ReferenceEvents, ReferenceSlots> {
+}
+export {};

package/components/page/References.svelte

@@ -0,0 +1,58 @@
+<script>import Header from "./Header.svelte";
+import Outline from './Outline.svelte';
+import Page from './Page.svelte';
+import Parser from "../../models/chapter/Parser";
+import ConfirmButton from '../editor/ConfirmButton.svelte';
+import ChapterIDs from '../../models/book/ChapterID';
+import BulkReferenceEditor from "./BulkReferenceEditor.svelte";
+import PossibleReference from "./PossibleReference.svelte";
+import { getEdition, isEditable } from "./Contexts";
+let edition = getEdition();
+let editable = isEditable();
+$: references = $edition.hasReferences() ? $edition.getReferences() : null;
+// Otherwise, map references to a list with letter headers.
+if (references !== null) {
+}
+</script>
+
+<Page title={`${$edition.getTitle()} - References`}>
+    <Header 
+        label="References title"
+        getImage={() => $edition.getImage(ChapterIDs.ReferencesID)}
+        setImage={(embed) => $edition.setImage(ChapterIDs.ReferencesID, embed)}
+        header="References"
+        tags={$edition.getTags()}
+    >
+        <Outline
+            slot="outline"
+            previous={$edition.getPreviousChapterID(ChapterIDs.ReferencesID)}
+            next={$edition.getNextChapterID(ChapterIDs.ReferencesID)}
+        />
+    </Header>
+    {#if editable }<BulkReferenceEditor />{/if}
+    {#if references !== null }
+        <p><em>Sorted by last name of first author.</em></p>
+
+        {#each Object.keys(references).sort() as citationID }
+            {@const ref = Parser.parseReference(citationID, references === null ? "" : references[citationID], $edition) }
+            <!-- {#if letter === undefined || citationID.charAt(0) !== letter) {
+                letter = citationID.charAt(0);
+                renderedReferences.push(<h2 key={"letter-" + letter} className="bookish-header" id={"references-" + letter}>{letter.toUpperCase()}</h2>);
+            } -->
+
+            <p>
+                <PossibleReference node={ref} />
+                {#if editable}
+                    <ConfirmButton
+                        commandLabel="x"
+                        confirmLabel="Confirm"
+                        command={() => $edition.removeReference(citationID)}
+                    />
+                {/if}
+            </p>
+        {/each}
+
+    {:else}
+        <p>This book has no references.</p>
+    {/if}
+</Page>

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

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

package/components/page/Revisions.svelte

@@ -0,0 +1,124 @@
+<script>import Parser from "../../models/chapter/Parser";
+import { addDraftInFirestore, publishDraftInFirestore } from "../../models/Firestore";
+import Format from "../chapter/Format.svelte";
+import BookishEditor from "../editor/BookishEditor.svelte";
+import Switch from "../editor/Switch.svelte";
+import Instructions from "./Instructions.svelte";
+import Note from "../editor/Note.svelte";
+import { getEdition, isEditable } from "./Contexts";
+let edition = getEdition();
+let editable = isEditable();
+$: book = $edition.getBook();
+// Legacy revisions
+$: editionRevisions = $edition.getRevisions();
+// Book revisions
+$: bookRevisions = book?.getRevisions();
+// Copy the current draft to create a new draft.
+function handlePublish(index, published) {
+    if (book === undefined)
+        return;
+    publishDraftInFirestore(book, index, published);
+}
+function handleDraftEdition() {
+    if (book === undefined)
+        return;
+    addDraftInFirestore(book);
+}
+</script>
+
+{#if editionRevisions.length > 0 }
+    <h2 class="bookish-header" id="revisions">Revisions</h2>
+    <ul>
+        {#each editionRevisions as revision }
+            <li><em>{revision[0]}</em>. <Format node={Parser.parseFormat($edition, revision[1])} /></li>
+        {/each}
+    </ul>
+{/if}
+{#if book && bookRevisions}
+    <h2 class="bookish-header" id="revisions">Editions {#if editable}<button on:click={handleDraftEdition}>+</button>{/if}</h2>
+    <Instructions>
+        Each book has one or more editions, allowing you to track revisions and ensure previous versions remain available.
+        When you're ready to revise, make a new edition, then publish it when you're done.
+        The edition with a * is the default edition readers will see, unless they explicitly choose to view a previous edition.
+    </Instructions>
+    <table class="bookish-table">
+        <colgroup>
+            <col width="5%" />
+            <col width="5%" />
+            <col width="50%" />
+            <col width="35%" />
+        </colgroup>
+        <tbody>
+            {#each bookRevisions as revision, index}
+                {@const editionNumber = bookRevisions === undefined ? -1 : bookRevisions.length - index }
+                {@const viewing = revision.ref.id === $edition.getRef()?.id }
+
+                {#if editable || revision.published}
+                    <tr 
+                        class={`${!revision.published ? "bookish-edition-hidden" : ""} ${viewing ? "bookish-edition-editing": ""} `}
+                    >
+                        <td>
+                            <em>{ editionNumber + (editionNumber === 1 ? "st" : editionNumber === 2 ? "nd" : editionNumber === 3 ? "rd" : "th") }</em> <Note>{(new Date(revision.time).toLocaleDateString("en-us"))}</Note>
+                        </td>
+                        <td>
+                            {#if editable }
+                                {#if viewing }
+                                    Editing
+                                {:else}
+                                    <a href={`/write/${book.ref.id}/${bookRevisions.length - index}`}>Edit</a>
+                                {/if}
+                            {:else}
+                                {#if viewing }
+                                    Viewing
+                                {:else}
+                                    <a href={`/read/${book.ref.id}/${bookRevisions.length - index}`}>View</a>
+                                {/if}
+                            {/if}
+                        </td>
+                        <td>
+                            { #if editable }
+                                <BookishEditor 
+                                    ast={Parser.parseFormat(undefined, revision.summary).withTextIfEmpty()}
+                                    save={ newSummary => book ? book.setEditionChangeSummary(newSummary.toBookdown(), index) : undefined }
+                                    chapter={false}
+                                    component={Format}
+                                    placeholder="Summarize this edition's changes."
+                                /> 
+                            {:else}
+                                {#if revision.summary === ""}
+                                    <em>No summary of changes</em>
+                                {:else}
+                                    { revision.summary }
+                                {/if}
+                            {/if}
+                        </td>
+                        <td style="whitespace: nowrap">
+                            {#if editable}
+                                <Switch
+                                    position=">"
+                                    options={["hidden", "published"]} 
+                                    enabled={revision.published || revision.summary !== ""}
+                                    value={revision.published ? "published" : "hidden"} 
+                                    edit={ published => handlePublish(index, published === "published") }
+                                />
+                                {#if revision === bookRevisions.find(e => e.published)}*{/if}
+                            {/if}
+                        </td>
+                    </tr>
+                {/if}
+            {/each}
+        </tbody>
+    </table>
+{/if}
+
+<style>
+    .bookish-edition-hidden {
+        background: repeating-linear-gradient(
+            45deg,
+            var(--bookish-app-background),
+            var(--bookish-app-background) 10px,
+            var(--bookish-app-chrome-background) 10px,
+            var(--bookish-app-chrome-background) 20px
+        );
+    }
+</style>

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

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

package/components/page/Search.svelte

@@ -0,0 +1,108 @@
+<script>import Header from "./Header.svelte";
+import Outline from './Outline.svelte';
+import Page from './Page.svelte';
+import Link from "../Link.svelte";
+import Chapter from '../../models/book/Chapter';
+import ChapterIDs from '../../models/book/ChapterID';
+import { onMount } from "svelte";
+import { getBase, getEdition } from "./Contexts";
+let edition = getEdition();
+let base = getBase();
+let query = "";
+let input = null;
+// Focus the query box when loaded
+onMount(() => { if (input)
+    input.focus(); });
+// Don't allow spaces
+function handleKeyDown(event) {
+    if (event.key === " ") {
+        event.preventDefault();
+    }
+}
+let results = [];
+$: {
+    // Reset the results
+    results = [];
+    const lowerQuery = query.toLowerCase();
+    // Go through all the chapter indexes and find matches.
+    if (query.length > 2)
+        for (const chapter of $edition.getChapters()) {
+            let index = chapter.getIndex();
+            // No index yet? Skip this chapter.
+            if (index) {
+                // Build a DOM to render matches.
+                const chapterMatches = [];
+                // What are all of the words in the index that match the query?
+                for (const word of Object.keys(index)) {
+                    if (query.length > 0 && word.indexOf(lowerQuery) >= 0) {
+                        if (index) {
+                            let matches = index[word];
+                            matches.forEach((match) => {
+                                chapterMatches.push(match);
+                            });
+                        }
+                    }
+                }
+                if (chapterMatches.length > 0) {
+                    results.push(chapter);
+                    chapterMatches.forEach((match, index) => {
+                        // Only highlight the part of the word that matches.
+                        const start = match.match.toLowerCase().indexOf(lowerQuery);
+                        results.push({
+                            link: `${base}/${chapter.getChapterID()}?word=${match.match.toLowerCase()}&number=${index}`,
+                            left: match.left + match.match.substring(0, start),
+                            match: match.match.substring(start, start + query.length),
+                            right: match.match.substring(start + query.length) + match.right
+                        });
+                    });
+                }
+            }
+        }
+}
+</script>
+
+<Page title={`${$edition.getTitle()} - Search`}>
+    <Header 
+        label="Search title"
+        getImage={() => $edition.getImage(ChapterIDs.SearchID)}
+        setImage={(embed) => $edition.setImage(ChapterIDs.SearchID, embed)}
+        header="Search"
+        tags={$edition.getTags()}
+    >
+        <Outline
+            slot="outline"
+            previous={$edition.getPreviousChapterID(ChapterIDs.SearchID)}
+            next={$edition.getNextChapterID(ChapterIDs.SearchID)}
+        />    
+    </Header>
+
+    <p>Type a word—just a single word—and we'll show its occurrences in this book:</p>
+
+    <p>
+        <input 
+            type="text" 
+            name="query" 
+            placeholder={"search for a word"} 
+            on:keydown={handleKeyDown}
+            bind:this={input} 
+            bind:value={query}
+        />
+    </p>
+
+    {#if query !== "" }
+        {#if query.length < 3 }
+            <p>Keep typing...</p>
+        {:else if results.length === 0 }
+            <p>No occurrence of <em>{query}</em>.</p>
+        {:else}
+            <p>Found {results.filter(result => !(result instanceof Chapter)).length} occurrences of <em>{query}</em>...</p>
+            {#each results as result }
+                {#if result instanceof Chapter }
+                    <h2 class="bookish-header" id={"header-" + result.getChapterID()}>Chapter{#if $edition.getChapterNumber(result.getChapterID()) !== undefined}&nbsp;{$edition.getChapterNumber(result.getChapterID())}{/if} - {result.getTitle()}</h2>
+                {:else}
+                    <p><Link to={result.link}>...{result.left}<span class="bookish-content-highlight">{result.match}</span>{result.right}...</Link></p>
+                {/if}
+            {/each}
+        {/if}
+    {/if}
+</Page>

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

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

package/components/page/Status.svelte

@@ -0,0 +1,49 @@
+<script>import { BookSaveStatus } from "../../models/book/Edition";
+import { onMount } from "svelte";
+export let book;
+export let edition;
+let status = BookSaveStatus.Saved;
+function handleBookChange(newStatus) {
+    status = newStatus;
+}
+// Listen to book and chapter changes.
+onMount(() => {
+    book?.addListener(status => handleBookChange(status));
+    edition.addListener((status) => handleBookChange(status));
+    return () => {
+        book?.removeListener(handleBookChange);
+        edition.removeListener(handleBookChange);
+    };
+});
+</script>
+
+<div class={`bookish-editor-status ${status === BookSaveStatus.Saving ? "bookish-editor-status-saving" : status === BookSaveStatus.Error ? "bookish-editor-status-error" : ""}`}>
+    {
+        status === BookSaveStatus.Changed ? "\u270E Editing" :
+        status === BookSaveStatus.Saving ? "\u2026 Saving" :
+        status === BookSaveStatus.Saved ? "\u2713 Saved" :
+        status === BookSaveStatus.Error ? "\u2715 Couldn't save." :
+        ""
+    }
+</div>
+
+<style>
+    .bookish-editor-status {
+        position: fixed;
+        top: var(--bookish-app-chrome-spacing);
+        right: var(--bookish-app-chrome-spacing);
+        z-index: 3;
+        color: var(--bookish-muted-color);
+        font-family: var(--bookish-header-font-family);
+        font-size: var(--bookish-small-font-size);
+    }
+
+    .bookish-editor-status-error {
+        color: var(--bookish-app-error-color);
+        animation: failure 100ms infinite;
+    }
+
+    .bookish-editor-status-saving {
+        animation: waiting 100ms infinite;
+    }
+</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type Book from "../../models/book/Book";
+import type Edition from "../../models/book/Edition";
+declare const __propDef: {
+    props: {
+        book: Book | undefined;
+        edition: Edition;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type StatusProps = typeof __propDef.props;
+export declare type StatusEvents = typeof __propDef.events;
+export declare type StatusSlots = typeof __propDef.slots;
+export default class Status extends SvelteComponentTyped<StatusProps, StatusEvents, StatusSlots> {
+}
+export {};

package/components/page/SubdomainEditor.svelte

@@ -0,0 +1,30 @@
+<script>import TextEditor from "../editor/TextEditor.svelte";
+import { subdomainIsAvailable } from "../../models/Firestore";
+import { getBook } from "./Contexts";
+let book = getBook();
+const invalidNames = ["email", "login", "confirm", "read", "write"];
+</script>
+
+<span class="bookish-muted">
+    <TextEditor 
+        startText={book.getSubdomain() ?? ""} 
+        label="Book domain editor"
+        save={
+            // Save the new domain
+            async domain => {
+                const available = await subdomainIsAvailable(domain, book);
+                if(available)
+                    book.setSubdomain(domain);
+                else throw Error("Domain isn't available");
+            }
+        }
+        placeholder="URL name"
+        valid={newDomain =>
+            // If not the empty string, must be a valid URL subdomain, and none of the existing routes.
+            invalidNames.includes(newDomain) || (newDomain.length > 0 && !/^[A-Za-z0-9](?:[A-Za-z0-9\-]{0,61}[A-Za-z0-9])?$/.test(newDomain)) ? `Book domains must be fewer than 63 characters, made of symbols a-z, A-Z, and 0-9, and not one of ${invalidNames.join(", ")}.` :
+            undefined
+        }
+        saveOnExit={true}
+    />
+    <br/>
+</span>

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

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