bookish-press 0.4.23 → 0.4.24

package/components/page/Publish.svelte

@@ -0,0 +1,120 @@
+<script>import Parser from '../../models/chapter/Parser';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import Switch from '../editor/Switch.svelte';
+import { getAuth, 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 = getAuth();
+let edition = getEdition();
+let editable = isEditionEditable();
+let publishing = false;
+let feedback = undefined;
+async function requestPublish() {
+    if ($edition) {
+        publishing = true;
+        feedback = 'Assembling book...';
+        try {
+            feedback = await publish($edition);
+        }
+        catch (err) {
+            console.log(err);
+            feedback = 'Unable to publish the book :(';
+        }
+        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()}
+            >{publishing ? 'publishing...' : 'publish'}</Button
+        >
+    </div>
+    {#if feedback}
+        <Feedback error>{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

@@ -5,12 +5,11 @@ 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();
+let editable = isEditionEditable();
 let edition = getEdition();
 let editing = false;
 function startEditing() {
@@ -94,8 +93,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 +127,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 +150,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 +175,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 +199,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 +224,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 +244,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

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 { getAuth, getEdition, isEditionEditable } from './Contexts';
+let auth = getAuth();
 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

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';
@@ -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

package/components/page/Status.svelte

@@ -4,11 +4,11 @@ let status = getStatus();
 </script>
 
 <span
-    class={`bookish-editor-status ${
+    class={`status ${
         $status === BookSaveStatus.Saving
-            ? 'bookish-editor-status-saving'
+            ? 'saving'
             : $status === BookSaveStatus.Error
-            ? 'bookish-editor-status-error'
+            ? 'error'
             : ''
     }`}
 >
@@ -19,39 +19,38 @@ let status = getStatus();
         : $status === BookSaveStatus.Saved
         ? '\u2713 Saved'
         : $status === BookSaveStatus.Error
-        ? "\u2715 Couldn't save."
+        ? '\u2715 Not saved'
         : ''}
 </span>
 
 <style>
-    .bookish-editor-status {
-        color: var(--app-muted-color);
+    .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(--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 {
-        from,
-        to {
-            transform: scale(1, 1);
-        }
-        25% {
-            transform: scale(1, 1.2);
+        0% {
+            transform: rotate(-3deg);
         }
         50% {
-            transform: scale(1, 1);
+            transform: rotate(3deg);
         }
-        75% {
-            transform: scale(1, 1.1);
+        100% {
+            transform: rotate(-3deg);
         }
     }
 </style>

package/components/page/SubdomainEditor.svelte

@@ -7,6 +7,7 @@ const invalidNames = [
     'email',
     'login',
     'confirm',
+    'about',
     'read',
     'write',
 ];
@@ -25,7 +26,7 @@ const invalidNames = [
                     else throw Error("Domain isn't available");
                 }
             }}
-            placeholder="URL name"
+            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) ||
@@ -33,7 +34,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}

package/components/page/TableOfContents.svelte

@@ -10,19 +10,23 @@ import SubdomainEditor from './SubdomainEditor.svelte';
 import Description from './Description.svelte';
 import Acknowledgements from './Acknowledgements.svelte';
 import License from './License.svelte';
-import Revisions from './Editions.svelte';
 import Authors from './Authors.svelte';
 import TextEditor from '../editor/TextEditor.svelte';
 import Toggle from '../editor/Toggle.svelte';
-import { getBase, getEdition, isEditable, setChapter } from './Contexts';
+import { getAuth, getBase, getBook, getEdition, isBookEditable, isEditionEditable, isEditionPartiallyEditable, setChapter, } from './Contexts';
 import Muted from './Muted.svelte';
 import Button from '../app/Button.svelte';
 import PageHeader from './PageHeader.svelte';
 import Rows from './Rows.svelte';
 import PageParagraph from './PageParagraph.svelte';
+import Note from '../editor/Note.svelte';
+import Permissions from '../editor/Permissions.svelte';
+import Publish from './Publish.svelte';
+let auth = getAuth();
+let book = getBook();
 let edition = getEdition();
 let base = getBase();
-let editable = isEditable();
+let editable = isEditionEditable();
 function getProgressDescription(progress) {
     if (progress === null)
         return '';
@@ -59,9 +63,10 @@ function addChapter() {
 }
 </script>
 
-{#if $edition}
+{#if $edition && $book}
     <Page title={$edition.getTitle()}>
         <Header
+            editable={isEditionEditable()}
             label="Book title"
             getImage={() => $edition?.getImage('cover') ?? null}
             setImage={(embed) =>
@@ -69,6 +74,7 @@ function addChapter() {
                     ? edition.set($edition.withImage('cover', embed))
                     : undefined}
             header={title}
+            id="toc"
             {subtitle}
             tags={$edition.getTags()}
             save={(text) =>
@@ -84,36 +90,44 @@ function addChapter() {
                 previous={null}
                 next={$edition.getNextChapterID('')}
             />
-            <Authors
-                slot="after"
-                authors={$edition.getAuthors()}
-                add={() =>
-                    $edition ? edition.set($edition.withAuthor('')) : undefined}
-                edit={(index, text) =>
-                    $edition
-                        ? edition.set($edition.withAuthorName(index, text))
-                        : undefined}
-                remove={(index) =>
-                    $edition
-                        ? edition.set($edition.withoutAuthor(index))
-                        : undefined}
-            />
+            <div slot="after">
+                <Authors
+                    editable={isBookEditable()}
+                    authors={$edition.getAuthors()}
+                    add={() =>
+                        $edition
+                            ? edition.set($edition.withAuthor(''))
+                            : undefined}
+                    edit={(index, text) =>
+                        $edition
+                            ? edition.set($edition.withAuthorName(index, text))
+                            : undefined}
+                    remove={(index) =>
+                        $edition
+                            ? edition.set($edition.withoutAuthor(index))
+                            : undefined}
+                />
+                {#if $book.getPublishedEditionCount() > 1}
+                    <Note>{$edition.getEditionLabel()} edition</Note>
+                {/if}
+            </div>
         </Header>
 
-        <Instructions>
-            Above you can edit your book's authors, title, and cover image.
+        <Instructions {editable}>
+            Edit this book's cover image, ID, title, and authors above. The book
+            ID appears in the book's URL (e.g., bookish.press/<em>bookid</em>).
         </Instructions>
 
         <Description />
 
-        <Instructions>
+        <Instructions {editable}>
             This will appear on the <Link to={$base + 'read'}
                 >book browsing</Link
             > page and in your table of contents. Write an informative description
             of what your book is about.
         </Instructions>
 
-        <Instructions>
+        <Instructions {editable}>
             Add, remove, and reorder chapters here. You can add optional book
             sections to each chapter, toggle chapters as numbered/unnumbered or
             published/forthcoming. Click the title to edit the chapter.
@@ -160,7 +174,7 @@ function addChapter() {
                             <TextEditor
                                 label={'Chapter section editor'}
                                 text={section ? section : ''}
-                                placeholder="Section"
+                                placeholder="section"
                                 valid={() => undefined}
                                 save={(text) =>
                                     setChapter(
@@ -170,6 +184,9 @@ function addChapter() {
                                     )}
                             />
                         {:else if section}{section}{/if}
+                        {#if !editable && $auth !== undefined && $auth.user !== null && chapter.uids.includes($auth.user.uid)}
+                            You can edit this chapter.
+                        {/if}
                     </span>
                     <span slot="etc">
                         <Muted>
@@ -233,9 +250,9 @@ function addChapter() {
 
         <PageHeader id="print">Print</PageHeader>
 
-        <Instructions>
-            This offers a way for readers to print the entire book as a single
-            page.
+        <Instructions {editable}>
+            This link will generate the entire book on a single page, suitable
+            for printing.
         </Instructions>
 
         <PageParagraph>
@@ -246,9 +263,8 @@ function addChapter() {
 
         <PageHeader id="citation">Citation</PageHeader>
 
-        <Instructions>
-            This citation is dynamically created from the current authors,
-            title, and date.
+        <Instructions {editable}>
+            This citation is created from the current authors, title, and date.
         </Instructions>
 
         <!-- Book citation -->
@@ -264,6 +280,30 @@ function addChapter() {
             <em>retrieved {new Date().toLocaleDateString('en-US')}</em>.
         </PageParagraph>
 
-        <Revisions />
+        {#if editable}
+            <PageHeader id="publish">Publish</PageHeader>
+            <Publish />
+        {/if}
+
+        {#if editable || isEditionPartiallyEditable()}
+            <PageHeader>Editors</PageHeader>
+            <Instructions {editable}>
+                These authors can edit this edition and its chapters. To give
+                book-level permissions, edit the book editors on the <Link
+                    to="/write/{$book.ref.id}/editions">editions</Link
+                >
+                page. To give chapter-level permissions, navigate to the chapter.
+            </Instructions>
+            <Permissions
+                uids={$edition.uids}
+                inheriteduids={$book.uids}
+                atleastone={false}
+                writable={editable}
+                change={(uids) =>
+                    $edition
+                        ? edition.set($edition.withEditors(uids))
+                        : undefined}
+            />
+        {/if}
     </Page>
 {/if}

package/components/page/TableOfContentsRow.svelte

@@ -1,7 +1,7 @@
 <script>import TableOfContentsImage from './TableOfContentsImage.svelte';
 import Toggle from '../editor/Toggle.svelte';
 import ConfirmButton from '../editor/ConfirmButton.svelte';
-import { getBase, getEdition, isEditable, setChapter } from './Contexts';
+import { getBase, getEdition, isEditionEditable, setChapter, } from './Contexts';
 import Muted from './Muted.svelte';
 import ChapterNumber from './ChapterNumber.svelte';
 import Button from '../app/Button.svelte';
@@ -13,7 +13,7 @@ export let number = undefined;
 export let forthcoming = false;
 let edition = getEdition();
 let base = getBase();
-let editable = isEditable();
+let editable = isEditionEditable();
 function moveUp() {
     if ($edition && chapter)
         edition.set($edition.withMovedChapter(chapter.getID(), -1));
@@ -63,13 +63,13 @@ function moveDown() {
         <td class="controls">
             {#if chapter}
                 <Button
-                    tooltip="move chapter up"
+                    tooltip="move chapter {title} up"
                     disabled={$edition.getChapterPosition(chapter.getID()) ===
                         0}
                     command={moveUp}>{'↑'}</Button
                 >
                 <Button
-                    tooltip="move chapter down"
+                    tooltip="move chapter {title} down"
                     disabled={$edition.getChapterPosition(chapter.getID()) ===
                         $edition.getChapterCount() - 1}
                     command={moveDown}>{'↓'}</Button

package/components/page/ThemeEditor.svelte

@@ -6,7 +6,7 @@ import ConfirmButton from '../editor/ConfirmButton.svelte';
 import Instructions from './Instructions.svelte';
 import ThemeSetEditor from './ThemeSetEditor.svelte';
 import ThemeEditorPreview from './ThemeEditorPreview.svelte';
-import { getEdition } from './Contexts';
+import { getEdition, isEditionEditable } from './Contexts';
 import TextEditor from '../editor/TextEditor.svelte';
 import Button from '../app/Button.svelte';
 import Switch from '../editor/Switch.svelte';
@@ -20,6 +20,7 @@ const themes = {
     Sketchy: SketchyTheme,
     Critical: CriticalTheme,
 };
+let editable = isEditionEditable();
 let edition = getEdition();
 $: theme = $edition ? $edition.getTheme() : null;
 $: isDefault =
@@ -35,7 +36,9 @@ function getEmptyGroup(group) {
 {#if theme && $edition}
     <Page title={`${$edition?.getTitle()} - Theme`}>
         <Header
+            editable={isEditionEditable()}
             label="Theme"
+            id="theme"
             getImage={() => null}
             setImage={() => undefined}
             header="Theme"
@@ -43,7 +46,7 @@ function getEmptyGroup(group) {
             <Outline slot="outline" previous={null} next={null} />
         </Header>
 
-        <Instructions>
+        <Instructions {editable}>
             This is the theme editor. You can use it to choose from existing
             themes or create a custom theme for your book's appearance. To use
             it, you'll need to know a bit about how to format CSS <Link
@@ -83,7 +86,7 @@ function getEmptyGroup(group) {
             >
         {:else}
             <ConfirmButton
-                tooltip="Change the theme to the default Bookish theme."
+                tooltip="change theme to the default"
                 commandLabel="- theme"
                 confirmLabel="delete your theme?"
                 command={() =>
@@ -139,7 +142,7 @@ function getEmptyGroup(group) {
                     </td>
                     <td style="text-align:right;">
                         <Button
-                            tooltip="Add a CSS import"
+                            tooltip="add CSS URL import"
                             command={() => {
                                 if (theme === null) return;
                                 if (theme.imports === undefined)
@@ -171,7 +174,7 @@ function getEmptyGroup(group) {
                         </td>
                         <td style="text-align: right">
                             <Button
-                                tooltip="Remove this CSS import"
+                                tooltip="Remove CSS URL import"
                                 command={() => {
                                     theme?.imports?.splice(index, 1);
                                     if ($edition)