bookish-press 0.4.0 → 0.4.3

package/components/page/References.svelte

@@ -1,58 +1,55 @@
-<script>import Header from "./Header.svelte";
+<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";
+import BulkReferenceEditor from './BulkReferenceEditor.svelte';
+import PossibleReference from './PossibleReference.svelte';
+import { getUser, getEdition, isEditionEditable } from './Contexts';
+let auth = getUser();
 let edition = getEdition();
-let editable = isEditable();
-$: references = $edition.hasReferences() ? $edition.getReferences() : null;
+let editable = isEditionEditable();
+$: 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>
+{#if $edition}
+    <Page title={`${$edition.getTitle()} - References`}>
+        <Header
+            editable={isEditionEditable() ||
+                ($auth !== undefined &&
+                    $auth.user !== null &&
+                    $edition.isChapterEditor($auth.user.uid))}
+            label="References title"
+            id="references"
+            getImage={() => $edition?.getImage(ChapterIDs.ReferencesID) ?? null}
+            setImage={(embed) =>
+                $edition
+                    ? edition.set(
+                          $edition.withImage(ChapterIDs.ReferencesID, embed)
+                      )
+                    : undefined}
+            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>
+            {#each Object.keys(references).sort() as citationID (citationID)}
+                <PossibleReference node={references[citationID]} />
+            {/each}
+        {:else}
+            <p>This book has no references.</p>
+        {/if}
+    </Page>
+{/if}

package/components/page/References.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 ReferencesProps = typeof __propDef.props;
-export declare type ReferencesEvents = typeof __propDef.events;
-export declare type ReferencesSlots = typeof __propDef.slots;
+export type ReferencesProps = typeof __propDef.props;
+export type ReferencesEvents = typeof __propDef.events;
+export type ReferencesSlots = typeof __propDef.slots;
 export default class References extends SvelteComponentTyped<ReferencesProps, ReferencesEvents, ReferencesSlots> {
 }
 export {};

package/components/page/Rows.svelte

@@ -0,0 +1,54 @@
+<div class="table">
+    <table>
+        <tbody>
+            <slot />
+        </tbody>
+    </table>
+</div>
+
+<style>
+    .table {
+        width: 100%;
+        overflow-x: auto;
+        line-height: var(--bookish-paragraph-line-height-tight);
+        border-collapse: collapse;
+        clear: both;
+        border-radius: var(--bookish-roundedness);
+        border-spacing: 0;
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    table :global(tr:first-child th) {
+        font-weight: bold;
+        border: 0;
+        border-bottom: 1px solid var(--bookish-border-color);
+    }
+
+    table :global(tr:nth-child(even)) {
+        background-color: var(--bookish-block-background-color);
+    }
+
+    table :global(tr:last-child td:first-child) {
+        border-bottom-left-radius: var(--bookish-roundedness);
+    }
+
+    table :global(tr:last-child td:last-child) {
+        border-bottom-right-radius: var(--bookish-roundedness);
+    }
+
+    table :global(tr:first-child td:first-child) {
+        border-top-left-radius: var(--bookish-roundedness);
+    }
+    table :global(tr:first-child td:last-child) {
+        border-top-right-radius: var(--bookish-roundedness);
+    }
+
+    .table :global(td),
+    .table :global(th) {
+        padding: var(--bookish-block-padding);
+    }
+</style>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  RowsProps */
+/** @typedef {typeof __propDef.events}  RowsEvents */
+/** @typedef {typeof __propDef.slots}  RowsSlots */
+export default class Rows extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RowsProps = typeof __propDef.props;
+export type RowsEvents = typeof __propDef.events;
+export type RowsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/page/Search.svelte

@@ -1,33 +1,27 @@
-<script>import Header from "./Header.svelte";
+<script>import Header from './Header.svelte';
 import Outline from './Outline.svelte';
 import Page from './Page.svelte';
-import Link from "../Link.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";
+import { getBase, getEdition, isEditionEditable } from './Contexts';
+import TextInput from '../app/TextInput.svelte';
+import ChapterTitle from './ChapterTitle.svelte';
+import ChapterNumber from './ChapterNumber.svelte';
+import PageHeader from './PageHeader.svelte';
 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 query = '';
 let results = [];
 $: {
     // Reset the results
     results = [];
     const lowerQuery = query.toLowerCase();
+    query = query.trim();
     // Go through all the chapter indexes and find matches.
-    if (query.length > 2)
-        for (const chapter of $edition.getChapters()) {
-            let index = chapter.getIndex();
+    if ($edition && query.length > 2)
+        for (const chapter of $edition?.getChapters() ?? []) {
+            let index = chapter.getIndex($edition);
             // No index yet? Skip this chapter.
             if (index) {
                 // Build a DOM to render matches.
@@ -47,12 +41,15 @@ $: {
                     results.push(chapter);
                     chapterMatches.forEach((match, index) => {
                         // Only highlight the part of the word that matches.
-                        const start = match.match.toLowerCase().indexOf(lowerQuery);
+                        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),
+                            link: `${$base}${chapter.getID()}?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
+                            right: match.match.substring(start + query.length) + match.right,
                         });
                     });
                 }
@@ -61,48 +58,76 @@ $: {
 }
 </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>
+{#if $edition}
+    <Page title={`${$edition.getTitle()} - Search`}>
+        <Header
+            editable={isEditionEditable()}
+            label="Search title"
+            getImage={() => $edition?.getImage(ChapterIDs.SearchID) ?? null}
+            setImage={(embed) =>
+                $edition
+                    ? edition.set(
+                          $edition.withImage(ChapterIDs.SearchID, embed)
+                      )
+                    : undefined}
+            header="Search"
+            id="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>
+            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>
+        <p>
+            <TextInput
+                type="text"
+                placeholder={'search for a word'}
+                disabled={false}
+                bind:text={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 query.trim() !== ''}
+            {#if query.trim().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}
+                        <PageHeader id={'header-' + result.getID()}
+                            ><ChapterNumber
+                                >Chapter{#if $edition.getChapterNumber(result.getID()) !== undefined}&nbsp;{$edition.getChapterNumber(
+                                        result.getID()
+                                    )}{/if}</ChapterNumber
+                            > - <ChapterTitle>{result.getTitle()}</ChapterTitle
+                            ></PageHeader
+                        >
+                    {:else}
+                        <p
+                            ><Link to={result.link}
+                                >...{result.left}<span
+                                    class="bookish-content-highlight"
+                                    >{result.match}</span
+                                >{result.right}...</Link
+                            ></p
+                        >
+                    {/if}
+                {/each}
+            {/if}
         {/if}
-    {/if}
-</Page>
+    </Page>
+{/if}

package/components/page/Search.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 SearchProps = typeof __propDef.props;
-export declare type SearchEvents = typeof __propDef.events;
-export declare type SearchSlots = typeof __propDef.slots;
+export type SearchProps = typeof __propDef.props;
+export type SearchEvents = typeof __propDef.events;
+export type SearchSlots = typeof __propDef.slots;
 export default class Search extends SvelteComponentTyped<SearchProps, SearchEvents, SearchSlots> {
 }
 export {};

package/components/page/Status.svelte

@@ -1,49 +1,56 @@
-<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>import BookSaveStatus from '../../models/book/BookSaveStatus';
+import { getStatus } from './Contexts';
+let status = getStatus();
 </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>
+<span
+    class={`status ${
+        $status === BookSaveStatus.Saving
+            ? 'saving'
+            : $status === BookSaveStatus.Error
+            ? 'error'
+            : ''
+    }`}
+>
+    {$status === BookSaveStatus.Changed
+        ? '\u270E Editing'
+        : $status === BookSaveStatus.Saving
+        ? '\u2026 Saving'
+        : $status === BookSaveStatus.Saved
+        ? '\u2713 Saved'
+        : $status === BookSaveStatus.Error
+        ? '\u2715 Not saved'
+        : ''}
+</span>
 
 <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);
+    .status {
+        color: var(--app-font-color-inverted);
+        font-family: var(--app-font);
+        white-space: nowrap;
+        background-color: var(--app-interactive-color);
+        padding: calc(var(--app-chrome-padding) / 2);
+        border-radius: var(--app-chrome-roundedness);
     }
 
-    .bookish-editor-status-error {
-        color: var(--bookish-app-error-color);
+    .error {
+        background-color: var(--app-error-color);
         animation: failure 100ms infinite;
     }
 
-    .bookish-editor-status-saving {
-        animation: waiting 100ms infinite;
+    .saving {
+        animation: waiting 1s infinite;
+    }
+
+    @keyframes waiting {
+        0% {
+            transform: rotate(-3deg);
+        }
+        50% {
+            transform: rotate(3deg);
+        }
+        100% {
+            transform: rotate(-3deg);
+        }
     }
-</style>
+</style>

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

@@ -1,19 +1,14 @@
 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;
-    };
+    props: Record<string, never>;
     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 type StatusProps = typeof __propDef.props;
+export type StatusEvents = typeof __propDef.events;
+export type StatusSlots = typeof __propDef.slots;
 export default class Status extends SvelteComponentTyped<StatusProps, StatusEvents, StatusSlots> {
 }
 export {};

package/components/page/SubdomainEditor.svelte

@@ -1,30 +1,44 @@
-<script>import TextEditor from "../editor/TextEditor.svelte";
-import { subdomainIsAvailable } from "../../models/Firestore";
-import { getBook } from "./Contexts";
+<script>import TextEditor from '../editor/TextEditor.svelte';
+import { isSubdomainAvailable } from '../../models/CRUD';
+import { getBook } from './Contexts';
+import Muted from './Muted.svelte';
 let book = getBook();
-const invalidNames = ["email", "login", "confirm", "read", "write"];
+const invalidNames = [
+    'email',
+    'login',
+    'confirm',
+    'about',
+    '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>
+{#if $book}
+    <Muted>
+        <TextEditor
+            text={$book.getSubdomain() ?? ''}
+            label="Book domain editor"
+            save={// Save the new domain
+            async (domain) => {
+                if ($book) {
+                    const available = await isSubdomainAvailable(domain, $book);
+                    if (available) book.set($book.withSubdomain(domain));
+                    else throw Error("Domain isn't available");
+                }
+            }}
+            placeholder="book id"
+            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 IDs 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}
+        />
+    </Muted>
+{/if}

package/components/page/SubdomainEditor.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 SubdomainEditorProps = typeof __propDef.props;
-export declare type SubdomainEditorEvents = typeof __propDef.events;
-export declare type SubdomainEditorSlots = typeof __propDef.slots;
+export type SubdomainEditorProps = typeof __propDef.props;
+export type SubdomainEditorEvents = typeof __propDef.events;
+export type SubdomainEditorSlots = typeof __propDef.slots;
 export default class SubdomainEditor extends SvelteComponentTyped<SubdomainEditorProps, SubdomainEditorEvents, SubdomainEditorSlots> {
 }
 export {};