bookish-press 0.4.231 → 0.5.0

package/package/components/page/Publish.svelte

@@ -0,0 +1,135 @@
+<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}
+        />
+        <!-- Disabled until we can find a way to properly build the book in a cloud function. -->
+        <!-- <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/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 → package/components}/page/Reference.svelte

@@ -5,12 +5,12 @@ 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, isEditable } from './Contexts';
+import { getEdition, isEditionEditable } from './Contexts';
 import Link from '../Link.svelte';
 import Note from '../editor/Note.svelte';
-import Parser from '../../models/chapter/Parser';
 export let reference;
-let editable = isEditable();
+export let edit = false;
+let editable = isEditionEditable();
 let edition = getEdition();
 let editing = false;
 function startEditing() {
@@ -34,22 +34,6 @@ function move(field, direction) {
 }
 </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 reference.short}
     {@const authorList = reference.authors.split(',')}
@@ -70,22 +54,7 @@ function move(field, direction) {
         {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}
+{:else if editable && edit && editing}
     <!-- If editable, place in rows to make room for text editors to not have to wrap. -->
     <Table>
         <!-- CitationID -->
@@ -94,8 +63,8 @@ function move(field, direction) {
             <td>
                 <TextEditor
                     text={reference.citationID}
-                    label={'Citation ID'}
-                    placeholder="Citation ID"
+                    label={'reference ID'}
+                    placeholder="reference ID"
                     saveOnExit
                     valid={(text) => {
                         if (text.length === 0)
@@ -128,8 +97,8 @@ function move(field, direction) {
             <td>
                 <TextEditor
                     text={reference.authors}
-                    label={'Author list editor.'}
-                    placeholder="Authors"
+                    label={'author list editor'}
+                    placeholder="authors"
                     valid={(text) => {
                         if (text.length === 0) return "Authors can't be empty.";
                     }}
@@ -151,8 +120,8 @@ function move(field, direction) {
             <td>
                 <TextEditor
                     text={reference.year}
-                    label={'Year editor.'}
-                    placeholder="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))
@@ -176,8 +145,8 @@ function move(field, direction) {
             <td>
                 <TextEditor
                     text={reference.title}
-                    label={'Title editor.'}
-                    placeholder="Title"
+                    label={'title editor'}
+                    placeholder="title"
                     valid={(text) => {
                         if (text.length === 0) return "Title can't be empty.";
                     }}
@@ -200,8 +169,8 @@ function move(field, direction) {
                 <em>
                     <TextEditor
                         text={reference.source}
-                        label={'Source editor.'}
-                        placeholder="Source"
+                        label={'source editor'}
+                        placeholder="source"
                         valid={(text) => {
                             if (text.length === 0)
                                 return "Source can't be empty";
@@ -225,8 +194,8 @@ function move(field, direction) {
             <td>
                 <TextEditor
                     text={reference.url}
-                    label={'URL editor.'}
-                    placeholder="URL"
+                    label={'url editor'}
+                    placeholder="url"
                     valid={() => undefined}
                     save={(text) =>
                         $edition
@@ -245,8 +214,8 @@ function move(field, direction) {
             <td>
                 <TextEditor
                     text={reference.summary}
-                    label={'Summary editor.'}
-                    placeholder="Summary"
+                    label={'summary editor'}
+                    placeholder="summary"
                     valid={() => undefined}
                     save={(text) =>
                         $edition
@@ -261,13 +230,47 @@ function move(field, direction) {
             </td>
         </tr>
     </Table>
+{:else}
+    <!-- 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>
+{/if}
+{#if edit && editable && !reference.short}
+    <ConfirmButton
+        tooltip="delete reference {reference.title}"
+        confirm="delete reference..."
+        command={() =>
+            $edition
+                ? edition.set($edition.withoutReference(reference.citationID))
+                : undefined}>⨉</ConfirmButton
+    >
+    <Button
+        tooltip="stop editing reference"
+        command={() => (editing ? stopEditing() : startEditing())}
+        >{editing ? 'done' : 'edit'}</Button
+    >
 {/if}
 
 <style>
     .reference {
-        line-height: var(--bookish-paragraph-line-height);
+        line-height: var(--bookish-paragraph-line-height-tight);
+        margin-top: 0;
+    }
+
+    p {
         margin-top: 0;
-        margin-bottom: var(--bookish-header-spacing);
+        margin-bottom: 0;
     }
 
     .reference .summary {

package/{components → package/components}/page/Reference.svelte.d.ts

@@ -3,6 +3,7 @@ import Reference from '../../models/book/Reference';
 declare const __propDef: {
     props: {
         reference: Reference;
+        edit?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/{components → package/components}/page/References.svelte

@@ -1,13 +1,13 @@
 <script>import Header from './Header.svelte';
 import Outline from './Outline.svelte';
 import Page from './Page.svelte';
-import Parser from '../../models/chapter/Parser';
 import ChapterIDs from '../../models/book/ChapterID';
 import BulkReferenceEditor from './BulkReferenceEditor.svelte';
 import PossibleReference from './PossibleReference.svelte';
-import { getEdition, isEditable } from './Contexts';
+import { getUser, getEdition, isEditionEditable } from './Contexts';
+let auth = getUser();
 let edition = getEdition();
-let editable = isEditable();
+let editable = isEditionEditable();
 $: references = $edition?.hasReferences() ? $edition.getReferences() : null;
 // Otherwise, map references to a list with letter headers.
 if (references !== null) {
@@ -17,7 +17,12 @@ if (references !== null) {
 {#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
@@ -41,7 +46,7 @@ if (references !== null) {
             <p><em>Sorted by last name of first author.</em></p>
 
             {#each Object.keys(references).sort() as citationID (citationID)}
-                <PossibleReference node={references[citationID]} />
+                <PossibleReference node={references[citationID]} edit />
             {/each}
         {:else}
             <p>This book has no references.</p>

package/{components → package/components}/page/Search.svelte

@@ -4,7 +4,7 @@ import Page from './Page.svelte';
 import Link from '../Link.svelte';
 import Chapter from '../../models/book/Chapter';
 import ChapterIDs from '../../models/book/ChapterID';
-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';
@@ -45,7 +45,7 @@ $: {
                             .toLowerCase()
                             .indexOf(lowerQuery);
                         results.push({
-                            link: `${$base}${chapter.getID()}?word=${match.match.toLowerCase()}&number=${index}`,
+                            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),
@@ -61,6 +61,7 @@ $: {
 {#if $edition}
     <Page title={`${$edition.getTitle()} - Search`}>
         <Header
+            editable={isEditionEditable()}
             label="Search title"
             getImage={() => $edition?.getImage(ChapterIDs.SearchID) ?? null}
             setImage={(embed) =>
@@ -70,6 +71,7 @@ $: {
                       )
                     : undefined}
             header="Search"
+            id="search"
             tags={$edition.getTags()}
         >
             <Outline
@@ -84,14 +86,12 @@ $: {
             this book:
         </p>
 
-        <p>
-            <TextInput
-                type="text"
-                placeholder={'search for a word'}
-                disabled={false}
-                bind:text={query}
-            />
-        </p>
+        <input
+            class="query"
+            type="text"
+            placeholder="search for a word"
+            bind:value={query}
+        />
 
         {#if query.trim() !== ''}
             {#if query.trim().length < 3}
@@ -129,3 +129,20 @@ $: {
         {/if}
     </Page>
 {/if}
+
+<style>
+    .query {
+        font-family: var(--bookish-header-font-family);
+        font-size: var(--bookish-header-font-size);
+        border: none;
+        border-bottom: 3px solid var(--bookish-border-color-light);
+        padding: var(--bookish-inline-padding);
+        display: inline-block;
+        margin-top: 2em;
+    }
+
+    .query:focus {
+        outline: none;
+        border-color: var(--bookish-highlight-color);
+    }
+</style>

package/package/components/page/Status.svelte

@@ -0,0 +1,58 @@
+<script>import BookSaveStatus from '../../models/book/BookSaveStatus';
+import { getStatus } from './Contexts';
+let status = getStatus();
+</script>
+
+<small
+    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'
+        : ''}
+</small>
+
+<style>
+    .status {
+        color: var(--app-font-color-inverted);
+        font-family: var(--app-font);
+        white-space: nowrap;
+        background-color: var(--app-interactive-color);
+        padding-left: calc(var(--app-chrome-padding));
+        padding-right: calc(var(--app-chrome-padding));
+        padding-top: calc(var(--app-chrome-padding) / 3);
+        padding-bottom: calc(var(--app-chrome-padding) / 3);
+        border-radius: var(--app-chrome-roundedness);
+    }
+
+    .error {
+        background-color: var(--app-error-color);
+    }
+
+    .saving {
+        background-color: var(--app-muted-color);
+    }
+
+    @keyframes waiting {
+        0% {
+            transform: rotate(-3deg);
+        }
+        50% {
+            transform: rotate(3deg);
+        }
+        100% {
+            transform: rotate(-3deg);
+        }
+    }
+</style>

package/{components → package/components}/page/SubdomainEditor.svelte

@@ -1,5 +1,6 @@
 <script>import TextEditor from '../editor/TextEditor.svelte';
 import { isSubdomainAvailable } from '../../models/CRUD';
+import Note from '../editor/Note.svelte';
 import { getBook } from './Contexts';
 import Muted from './Muted.svelte';
 let book = getBook();
@@ -7,6 +8,7 @@ const invalidNames = [
     'email',
     'login',
     'confirm',
+    'about',
     'read',
     'write',
 ];
@@ -14,7 +16,7 @@ const invalidNames = [
 
 {#if $book}
     <Muted>
-        <TextEditor
+        <em>bookish.press/</em><TextEditor
             text={$book.getSubdomain() ?? ''}
             label="Book domain editor"
             save={// Save the new domain
@@ -25,7 +27,7 @@ const invalidNames = [
                     else throw Error("Domain isn't available");
                 }
             }}
-            placeholder="URL name"
+            placeholder="book name"
             valid={(newDomain) =>
                 // If not the empty string, must be a valid URL subdomain, and none of the existing routes.
                 invalidNames.includes(newDomain) ||
@@ -33,7 +35,7 @@ const invalidNames = [
                     !/^[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(
+                    ? `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}