bookish-press 0.4.1 → 0.4.3

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

@@ -1,19 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-import ErrorNode from "../../models/chapter/ErrorNode";
-import FormatNode from "../../models/chapter/FormatNode";
-import type ReferenceNode from "../../models/chapter/ReferenceNode";
+import FormatNode from '../../models/chapter/FormatNode';
+import type Ref from '../../models/book/Reference';
 declare const __propDef: {
     props: {
-        node: FormatNode | ErrorNode | ReferenceNode;
+        node: FormatNode | Ref;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type PossibleReferenceProps = typeof __propDef.props;
-export declare type PossibleReferenceEvents = typeof __propDef.events;
-export declare type PossibleReferenceSlots = typeof __propDef.slots;
+export type PossibleReferenceProps = typeof __propDef.props;
+export type PossibleReferenceEvents = typeof __propDef.events;
+export type PossibleReferenceSlots = typeof __propDef.slots;
 export default class PossibleReference extends SvelteComponentTyped<PossibleReferenceProps, PossibleReferenceEvents, PossibleReferenceSlots> {
 }
 export {};

package/components/page/Print.svelte

@@ -3,6 +3,30 @@ import { getEdition } from './Contexts';
 let edition = getEdition();
 </script>
 
-{#each $edition.getChapters().filter(chapter => !chapter.isForthcoming()) as chapter }
-    <Chapter chapter={chapter} print />
-{/each}
+{#if $edition}
+    {#each $edition
+        .getChapters()
+        .filter((chapter) => !chapter.isForthcoming()) as chapter}
+        <Chapter {chapter} print />
+    {/each}
+{/if}
+
+<style>
+    @media print {
+        :global(.bookish-chapter-header) {
+            break-before: page;
+        }
+
+        :global(body) {
+            font-size: 16pt;
+        }
+
+        @page {
+            margin: 1in;
+        }
+
+        :global(h1, h2, h3, h4, h5, h6) {
+            break-after: avoid !important;
+        }
+    }
+</style>

package/components/page/Print.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 PrintProps = typeof __propDef.props;
-export declare type PrintEvents = typeof __propDef.events;
-export declare type PrintSlots = typeof __propDef.slots;
+export type PrintProps = typeof __propDef.props;
+export type PrintEvents = typeof __propDef.events;
+export type PrintSlots = typeof __propDef.slots;
 export default class Print extends SvelteComponentTyped<PrintProps, PrintEvents, PrintSlots> {
 }
 export {};

package/components/page/Publish.svelte

@@ -0,0 +1,134 @@
+<script>import Parser from '../../models/chapter/Parser';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import Switch from '../editor/Switch.svelte';
+import { getUser, getEdition, getLeasee, isEditionEditable, lease, } from './Contexts';
+import Format from '../chapter/Format.svelte';
+import Note from '../editor/Note.svelte';
+import Instructions from './Instructions.svelte';
+import Link from '../Link.svelte';
+import { PUBLIC_CONTEXT } from '$env/static/public';
+import Button from '../app/Button.svelte';
+import { publish } from '../../models/CRUD';
+import Feedback from '../app/Feedback.svelte';
+let auth = getUser();
+let edition = getEdition();
+let editable = isEditionEditable();
+let publishing = false;
+let feedback = undefined;
+let error = undefined;
+let url = undefined;
+async function requestPublish() {
+    if ($edition) {
+        publishing = true;
+        error = undefined;
+        feedback = 'Binding the book, this could take a minute...';
+        try {
+            const result = await publish($edition);
+            if (typeof result === 'string') {
+                error = result;
+                feedback = undefined;
+            }
+            else {
+                url = result.url;
+            }
+        }
+        catch (err) {
+            console.log(err);
+            feedback = undefined;
+            error = 'Unable to bundle the book for download :(';
+        }
+        finally {
+            publishing = false;
+        }
+    }
+}
+let publisher = undefined;
+$: {
+    if ($auth && $auth.user)
+        updateUserClaims();
+}
+async function updateUserClaims() {
+    if ($auth === undefined || $auth.user === null)
+        return;
+    const token = await $auth.user.getIdTokenResult();
+    publisher =
+        'publisher' in token.claims && token.claims.publisher === true;
+}
+</script>
+
+{#if $edition && (publisher === true || PUBLIC_CONTEXT === 'local')}
+    <Instructions {editable}>
+        Ready to publish this edition? Write a summary then hit the switch.
+    </Instructions>
+
+    <div class="publisher">
+        <div class="summary">
+            <BookishEditor
+                text={$edition.summary}
+                parser={(text) =>
+                    Parser.parseFormat(undefined, text).withTextIfEmpty()}
+                save={(newSummary) =>
+                    $edition
+                        ? edition.set(
+                              $edition.withSummary(newSummary.toBookdown())
+                          )
+                        : undefined}
+                chapter={false}
+                component={Format}
+                placeholder="Summarize this edition's changes to publish."
+                leasee={getLeasee(auth, edition, 'summary')}
+                lease={(lock) => lease(auth, edition, 'summary', lock)}
+            />
+        </div>
+        <Switch
+            options={['hidden', 'published']}
+            enabled={$edition.published !== null || $edition.summary.length > 0}
+            value={$edition.published !== null ? 'published' : 'hidden'}
+            edit={(published) =>
+                $edition
+                    ? edition.set(
+                          $edition.asPublished(published === 'published')
+                      )
+                    : undefined}
+        />
+        <Button
+            tooltip="Publish the book online"
+            disabled={publishing}
+            command={() => requestPublish()}>↓ download</Button
+        >
+    </div>
+    {#if error}
+        <Feedback error>{error}</Feedback>
+    {:else if url}
+        <p>Your book is <Link to={url}>ready for download</Link>.</p>
+    {:else if feedback}
+        <Feedback>{feedback}</Feedback>
+    {/if}
+    <div>
+        <Note
+            >{#if $edition.published}Last published {new Date(
+                    $edition.published
+                ).toLocaleDateString('en-us')}{/if}</Note
+        >
+    </div>
+{:else}
+    <Instructions {editable}>
+        You don't yet have publishing privileges. <Link
+            to="mailto:amy@amyjko.com">Write Amy</Link
+        > to schedule a chat about your book and ask for publishing privileges.
+    </Instructions>
+{/if}
+
+<style>
+    .publisher {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        width: 100%;
+        align-items: baseline;
+    }
+
+    .summary {
+        flex: 1;
+    }
+</style>

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

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

package/components/page/Reference.svelte

@@ -1,145 +1,287 @@
-<script>import { afterUpdate } from "svelte";
-import TextEditor from "../editor/TextEditor.svelte";
-import { getEdition, isEditable } from "./Contexts";
-export let node;
-let editable = isEditable();
+<svelte:options immutable={true} />
+
+<script>import Reference from '../../models/book/Reference';
+import Button from '../app/Button.svelte';
+import Table from '../app/Table.svelte';
+import ConfirmButton from '../editor/ConfirmButton.svelte';
+import TextEditor from '../editor/TextEditor.svelte';
+import { getEdition, isEditionEditable } from './Contexts';
+import Link from '../Link.svelte';
+import Note from '../editor/Note.svelte';
+export let reference;
+let editable = isEditionEditable();
 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;
 }
+function move(field, direction) {
+    let fields = Array.from(document.querySelectorAll('input[type="text"]'));
+    let index = fields.indexOf(field);
+    if (index >= 0) {
+        const newInput = direction < 0 && index > 0
+            ? fields[index - 1]
+            : direction > 0 && index < fields.length - 1
+                ? fields[index + 1]
+                : undefined;
+        if (newInput)
+            newInput.focus();
+    }
+}
 </script>
 
+{#if editable && !reference.short}
+    <ConfirmButton
+        tooltip="delete reference {reference.title}"
+        commandLabel="- reference"
+        confirmLabel="Confirm"
+        command={() =>
+            $edition
+                ? edition.set($edition.withoutReference(reference.citationID))
+                : undefined}
+    />
+    <Button
+        tooltip="stop editing reference"
+        command={() => (editing ? stopEditing() : startEditing())}
+        >{editing ? 'done' : 'edit'}</Button
+    >
+{/if}
 <!-- 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">
+{#if reference.short}
+    {@const authorList = reference.authors.split(',')}
+    {@const authors =
+        authorList.length === 1
+            ? authorList[0]
+            : authorList.length === 2
+            ? authorList[0].trim() + ' & ' + authorList[1].trim()
+            : authorList[0].trim() + ', et al.'}
+    <p class="reference">
         {authors}
-        ({node.year}).
-        {#if node.url === null }
-            {node.title}
+        ({reference.year}).
+        {#if reference.url === null}
+            {reference.title}
         {:else}
-            <a href={node.url} target={"_blank"}>{node.title}</a>
+            <Link to={reference.url}>{reference.title}</Link>
         {/if}
-        {node.title.charAt(node.title.length - 1) === "?" ? "" : "."}
-        <em>{node.source}</em>
-    </span>
+        {reference.title.charAt(reference.title.length - 1) === '?' ? '' : '.'}
+        <em>{reference.source}</em>
+    </p>
+{:else if !editable || !editing}
+    <!-- If not editable, just render the reference. -->
+    <p class="reference">
+        {#if reference.authors}{reference.authors}{:else}<em>Authors</em>{/if}
+        {#if reference.year}({reference.year}){:else}<em>Year</em>{/if}. {#if reference.url === null || reference.url.length === 0}{#if reference.title}{reference.title}{:else}<em
+                    >Title</em
+                >{/if}{:else}<Link to={reference.url}
+                >{#if reference.title}{reference.title}{:else}<em>Title</em
+                    >{/if}</Link
+            >{/if}.<em
+            >&nbsp;{#if reference.source}{reference.source}{:else}Source{/if}</em
+        >.
+        {#if reference.summary}<aside class="summary">{reference.summary}</aside
+            >{/if}
+    </p>
 {: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}
-    >
+    <Table>
+        <!-- CitationID -->
+        <tr>
+            <td width="25%">id</td>
+            <td>
+                <TextEditor
+                    text={reference.citationID}
+                    label={'reference ID'}
+                    placeholder="reference ID"
+                    saveOnExit
+                    valid={(text) => {
+                        if (text.length === 0)
+                            return "reference ID can't be empty.";
+                        if ($edition && text in $edition.references) {
+                            const existing = $edition.references[text];
+                            if (
+                                existing instanceof Reference &&
+                                !reference.equals(existing)
+                            )
+                                return 'ID already taken';
+                        }
+                    }}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReferenceID(
+                                      text,
+                                      reference
+                                  )
+                              )
+                            : undefined}
+                    {move}
+                /><Note>determines order, a-z</Note>
+            </td>
+        </tr>
         <!-- Authors -->
-        {#if editable && editing }
-            <em>
+        <tr>
+            <td width="25%">authors</td>
+            <td>
                 <TextEditor
-                    startText={node.authors} 
-                    label={'Author list editor.'}
-                    placeholder="Authors"
-                    valid={ text => {
-                        if(text.length === 0) return "Authors can't be empty.";
+                    text={reference.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}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReference(
+                                      reference.withAuthors(text)
+                                  )
+                              )
+                            : undefined}
+                    {move}
                 />
-            </em>
-        {:else}
-            {#if node.authors }
-                {node.authors}
-            {:else}
-                <em>Authors</em>
-            {/if}
-        {/if}
+            </td>
+        </tr>
         <!-- Year -->
-        <br/>({#if editable && editing }
+        <tr>
+            <td>year</td>
+            <td>
                 <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"
+                    text={reference.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))}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReference(
+                                      reference.withYear(text)
+                                  )
+                              )
+                            : undefined}
+                    {move}
                 />
-            {:else}
-                {#if node.year }{node.year}{:else}<em>Year</em>{/if}
-            {/if}). 
+            </td>
+        </tr>
         <!-- 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>
+        <tr>
+            <td>title</td>
+            <td>
                 <TextEditor
-                    startText={node.source}
-                    label={'Source editor.'} 
-                    placeholder="Source"
-                    valid={ text => {
-                        if(text.length === 0) return "Source can't be empty";
+                    text={reference.title}
+                    label={'title editor'}
+                    placeholder="title"
+                    valid={(text) => {
+                        if (text.length === 0) return "Title can't be empty.";
                     }}
-                    save={text => $edition.editReference(node.withSource(text))}
-                    width={60}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReference(
+                                      reference.withTitle(text)
+                                  )
+                              )
+                            : undefined}
+                    {move}
                 />
-            </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}
+            </td>
+        </tr>
+        <!-- Source -->
+        <tr>
+            <td>source</td>
+            <td>
+                <em>
+                    <TextEditor
+                        text={reference.source}
+                        label={'source editor'}
+                        placeholder="source"
+                        valid={(text) => {
+                            if (text.length === 0)
+                                return "Source can't be empty";
+                        }}
+                        save={(text) =>
+                            $edition
+                                ? edition.set(
+                                      $edition.withEditedReference(
+                                          reference.withSource(text)
+                                      )
+                                  )
+                                : undefined}
+                        {move}
+                    />
+                </em>
+            </td>
+        </tr>
+        <!-- URL -->
+        <tr>
+            <td>url</td>
+            <td>
+                <TextEditor
+                    text={reference.url}
+                    label={'url editor'}
+                    placeholder="url"
+                    valid={() => undefined}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReference(
+                                      reference.withURL(text)
+                                  )
+                              )
+                            : undefined}
+                    {move}
+                />
+            </td>
+        </tr>
+        <tr>
+            <td>summary</td>
+            <td>
+                <TextEditor
+                    text={reference.summary}
+                    label={'summary editor'}
+                    placeholder="summary"
+                    valid={() => undefined}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReference(
+                                      reference.withSummary(text)
+                                  )
+                              )
+                            : undefined}
+                    {move}
+                />
+            </td>
+        </tr>
+    </Table>
+{/if}
+
+<style>
+    .reference {
+        line-height: var(--bookish-paragraph-line-height);
+        margin-top: 0;
+        margin-bottom: var(--bookish-header-spacing);
+    }
+
+    .reference .summary {
+        font-size: var(--bookish-small-font-size);
+        padding-left: var(--bookish-block-padding);
+        border-left: 1px solid var(--bookish-border-color-light);
+        margin-top: var(--bookish-block-padding);
+        font-style: italic;
+    }
+
+    td:first-child {
+        font-style: italic;
+    }
+
+    td {
+        line-height: 1;
+    }
+</style>

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

@@ -1,17 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
-import type ReferenceNode from "../../models/chapter/ReferenceNode";
+import Reference from '../../models/book/Reference';
 declare const __propDef: {
     props: {
-        node: ReferenceNode;
+        reference: Reference;
     };
     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 type ReferenceProps = typeof __propDef.props;
+export type ReferenceEvents = typeof __propDef.events;
+export type ReferenceSlots = typeof __propDef.slots;
 export default class Reference extends SvelteComponentTyped<ReferenceProps, ReferenceEvents, ReferenceSlots> {
 }
 export {};