bookish-press 0.4.0 → 0.4.16

package/components/page/TableOfContents.svelte

@@ -1,47 +1,52 @@
-<script>import Instructions from "./Instructions.svelte";
-import Parser from "../../models/chapter/Parser";
-import TableOfContentsRow from "./TableOfContentsRow.svelte";
-import ChapterIDs from "../../models/book/ChapterID";
-import Page from "./Page.svelte";
-import Header from "./Header.svelte";
-import Outline from "./Outline.svelte";
-import Link from "../Link.svelte";
-import SubdomainEditor from "./SubdomainEditor.svelte";
-import Description from "./Description.svelte";
-import Acknowledgements from "./Acknowledgements.svelte";
-import License from "./License.svelte";
-import Revisions from "./Revisions.svelte";
-import Authors from "./Authors.svelte";
-import TextEditor from "../editor/TextEditor.svelte";
-import Toggle from "../editor/Toggle.svelte";
-import { getBase, getEdition, isEditable } from "./Contexts";
+<script>import Instructions from './Instructions.svelte';
+import Parser from '../../models/chapter/Parser';
+import TableOfContentsRow from './TableOfContentsRow.svelte';
+import ChapterIDs from '../../models/book/ChapterID';
+import Page from './Page.svelte';
+import Header from './Header.svelte';
+import Outline from './Outline.svelte';
+import Link from '../Link.svelte';
+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 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';
 let edition = getEdition();
 let base = getBase();
 let editable = isEditable();
 function getProgressDescription(progress) {
     if (progress === null)
-        return "";
+        return '';
     else if (progress === 0)
-        return "";
+        return '';
     else if (progress < 30)
-        return "; just started";
+        return '; just started';
     else if (progress < 70)
-        return "; halfway";
+        return '; halfway';
     else if (progress < 95)
-        return "; almost done";
+        return '; almost done';
     else
-        return "; done";
+        return '; done';
 }
 // Get the chapter progress
-let progressStorage = localStorage.getItem("chapterProgress");
-let progress = progressStorage === null ?
-    {} :
-    JSON.parse(progressStorage);
+let progressStorage = typeof localStorage !== 'undefined'
+    ? localStorage.getItem('chapterProgress')
+    : null;
+let progress = progressStorage === null ? {} : JSON.parse(progressStorage);
 // Is there a colon? Let's make a subtitle
-$: title = $edition.getTitle();
+$: title = $edition?.getTitle() ?? '';
 let subtitle = undefined;
 $: {
-    let colon = title.indexOf(":");
+    let colon = title.indexOf(':');
     if (colon >= 0) {
         subtitle = title.substring(colon + 1).trim();
         title = title.substring(0, colon).trim();
@@ -49,186 +54,216 @@ $: {
 }
 let waitingForChapter = false;
 function addChapter() {
-    waitingForChapter = true;
-    $edition.addChapter().then(() => waitingForChapter = false);
+    if ($edition)
+        edition.set($edition.withNewChapter());
 }
 </script>
 
-<svelte:head>
-    <title>{$edition.getTitle()}</title>
-    <meta name="description" content={$edition.getTitle()}>
-</svelte:head>
-
-<Page title={$edition.getTitle()}>
-    <Header 
-        label="Book title"
-        getImage={() => $edition.getImage("cover")}
-        setImage={embed => $edition.setImage("cover", embed)}
-        header={title}
-        subtitle={subtitle}
-        tags={$edition.getTags()}
-        save={text => $edition.setTitle(text)}
-    >
-        <svelte:fragment slot="before">
-            {#if editable}
-                <SubdomainEditor slot="before"/>
-            {/if}
-        </svelte:fragment>
-        <Outline slot="outline"
-            previous={null}
-            next={$edition.getNextChapterID("")}
-        />
-        <Authors slot="after" 
-            authors={$edition.getAuthors()}
-            add={ () => $edition.addAuthor("")}
-            edit={(index, text) => $edition.setAuthor(index, text) } 
-            remove={index => $edition.removeAuthor(index)}
-        />
-    </Header>
-
-    <Instructions>
-        Above you can edit your book's authors, title, and cover image.
-    </Instructions>
-
-    <Description/>
-
-    <Instructions>
-        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>
-
-    <h2 class="bookish-header" id="chapters">Chapters {#if editable}<button disabled={waitingForChapter} on:click={addChapter}>+</button>{/if}</h2>
-
-    <Instructions>
-        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.
-    </Instructions>
-
-    <div class="bookish-table">
-        <table id="toc">
-            <tbody>
-                {#each $edition.getChapters() as chapter }
-                    {@const chapterID = chapter.getChapterID() }
-                    {@const readingTime = chapter.getReadingTime() }
-                    {@const readingEstimate =
-                            readingTime === undefined ? "Forthcoming" :
-                            readingTime < 5 ? "<5 min read" :
-                            readingTime < 60 ? "~" + Math.floor(readingTime / 5) * 5 + " min read" :
-                            "~" + Math.floor(readingTime / 60) + " hour read" }
-                    {@const section = chapter.getSection() }
-                    {@const etc = readingEstimate + (!chapter.isForthcoming() ? getProgressDescription(chapterID in progress ? progress[chapterID] : null) : "") }
-
-                    <TableOfContentsRow
-                        chapter={chapter}
-                        chapterID={chapterID}
-                        number={$edition.getChapterNumber(chapterID)}
-                        title={chapter.getTitle()}
-                        forthcoming={chapter.isForthcoming()}
-                    >
-                        <span slot="annotation">
-                            {#if editable }
-                                <TextEditor
-                                    label={"Chapter section editor"}
-                                    startText={section ? section : ""}
-                                    placeholder="Section"
-                                    valid={ () => undefined }
-                                    save={text => chapter.setSection(text) }
-                                />
-                            {:else}
-                                {#if section }{section}{/if}
-                            {/if}
-                        </span>
-                        <span slot="etc">
+{#if $edition}
+    <Page title={$edition.getTitle()}>
+        <Header
+            label="Book title"
+            getImage={() => $edition?.getImage('cover') ?? null}
+            setImage={(embed) =>
+                $edition
+                    ? edition.set($edition.withImage('cover', embed))
+                    : undefined}
+            header={title}
+            {subtitle}
+            tags={$edition.getTags()}
+            save={(text) =>
+                $edition ? edition.set($edition.withTitle(text)) : undefined}
+        >
+            <svelte:fragment slot="before">
+                {#if editable}
+                    <SubdomainEditor />
+                {/if}
+            </svelte:fragment>
+            <Outline
+                slot="outline"
+                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}
+            />
+        </Header>
+
+        <Instructions>
+            Above you can edit your book's authors, title, and cover image.
+        </Instructions>
+
+        <Description />
+
+        <Instructions>
+            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>
+            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.
+        </Instructions>
+
+        <PageHeader id="chapters"
+            >Chapters {#if editable}<Button
+                    tooltip="add empty chapter"
+                    disabled={waitingForChapter}
+                    command={addChapter}>+ chapter</Button
+                >{/if}</PageHeader
+        >
+
+        <Rows>
+            {#each $edition.getChapters() as chapter}
+                {@const chapterID = chapter.getID()}
+                {@const readingTime = chapter.getReadingTime($edition)}
+                {@const readingEstimate =
+                    readingTime === undefined
+                        ? 'Forthcoming'
+                        : readingTime < 5
+                        ? '<5 min read'
+                        : readingTime < 60
+                        ? '~' + Math.floor(readingTime / 5) * 5 + ' min read'
+                        : '~' + Math.floor(readingTime / 60) + ' hour read'}
+                {@const section = chapter.getSection()}
+                {@const etc =
+                    readingEstimate +
+                    (!chapter.isForthcoming()
+                        ? getProgressDescription(
+                              chapterID in progress ? progress[chapterID] : null
+                          )
+                        : '')}
+
+                <TableOfContentsRow
+                    {chapter}
+                    {chapterID}
+                    number={$edition.getChapterNumber(chapterID)}
+                    title={chapter.getTitle()}
+                    forthcoming={chapter.isForthcoming()}
+                >
+                    <span slot="annotation">
+                        {#if editable}
+                            <TextEditor
+                                label={'Chapter section editor'}
+                                text={section ? section : ''}
+                                placeholder="Section"
+                                valid={() => undefined}
+                                save={(text) =>
+                                    setChapter(
+                                        edition,
+                                        chapter,
+                                        chapter.withSection(text)
+                                    )}
+                            />
+                        {:else if section}{section}{/if}
+                    </span>
+                    <span slot="etc">
+                        <Muted>
                             {#if editable}
-                                <Toggle on={chapter.isForthcoming()} save={on => chapter.setForthcoming(on)}>
+                                <Toggle
+                                    on={chapter.isForthcoming()}
+                                    save={(on) =>
+                                        setChapter(
+                                            edition,
+                                            chapter,
+                                            chapter.asForthcoming(on)
+                                        )}
+                                >
                                     {etc}
                                 </Toggle>
                             {:else}
-                                { etc }
+                                {etc}
                             {/if}
-                        </span>
-                    </TableOfContentsRow>
-                {/each}
-                {#if $edition.hasReferences() || editable }
-                    <TableOfContentsRow
-                        chapterID={ChapterIDs.ReferencesID}
-                        title="References"
-                    >
-                        <span slot="annotation">Everything cited</span>
-                    </TableOfContentsRow>
-                {/if}
-                {#if $edition.getGlossary() && Object.keys($edition.getGlossary()).length > 0 || editable }
-                    <TableOfContentsRow
-                        chapterID={ChapterIDs.GlossaryID}
-                        title="Glossary"
-                    > 
-                        <span slot="annotation">Definitions</span>
-                    </TableOfContentsRow>
-                {/if}
+                        </Muted>
+                    </span>
+                </TableOfContentsRow>
+            {/each}
+            {#if $edition.hasReferences() || editable}
                 <TableOfContentsRow
-                    chapterID={ChapterIDs.IndexID}
-                    title="Index"
-                > 
-                    <span slot="annotation">Common words and where they are</span>
+                    chapterID={ChapterIDs.ReferencesID}
+                    title="References"
+                >
+                    <span slot="annotation">Everything cited</span>
                 </TableOfContentsRow>
+            {/if}
+            {#if ($edition.getGlossary() && Object.keys($edition.getGlossary()).length > 0) || editable}
                 <TableOfContentsRow
-                    chapterID={ChapterIDs.SearchID}
-                    title="Search"
-                > 
-                    <span slot="annotation">Find where words occur</span>
+                    chapterID={ChapterIDs.GlossaryID}
+                    title="Glossary"
+                >
+                    <span slot="annotation">Definitions</span>
                 </TableOfContentsRow>
+            {/if}
+            <TableOfContentsRow chapterID={ChapterIDs.IndexID} title="Index">
+                <span slot="annotation">Common words and where they are</span>
+            </TableOfContentsRow>
+            <TableOfContentsRow chapterID={ChapterIDs.SearchID} title="Search">
+                <span slot="annotation">Find where words occur</span>
+            </TableOfContentsRow>
 
-                <TableOfContentsRow
-                    chapterID={ChapterIDs.MediaID}
-                    title="Media"
-                > 
-                    <span slot="annotation">Images and video in the book</span>
+            <TableOfContentsRow chapterID={ChapterIDs.MediaID} title="Media">
+                <span slot="annotation">Images and video in the book</span>
+            </TableOfContentsRow>
+            {#if editable}
+                <TableOfContentsRow chapterID="theme" title="Theme">
+                    <span slot="annotation">Style the book</span>
                 </TableOfContentsRow>
-                {#if editable }
-                    <TableOfContentsRow
-                        chapterID="theme"
-                        title="Theme"
-                    > 
-                        <span slot="annotation">Style the book</span>
-                    </TableOfContentsRow>
-                    <TableOfContentsRow
-                        chapterID="unknown"
-                        title="Unknown"
-                    > 
-                        <span slot="annotation">Customize bad links</span>
-                    </TableOfContentsRow>
-                {/if}
-            </tbody>
-        </table>
-    </div>
+                <TableOfContentsRow chapterID="unknown" title="Unknown">
+                    <span slot="annotation">Customize bad links</span>
+                </TableOfContentsRow>
+            {/if}
+        </Rows>
 
-    <Acknowledgements />
-    <License />
+        <Acknowledgements />
+        <License />
 
-    <h2 class="bookish-header" id="print">Print</h2>
+        <PageHeader id="print">Print</PageHeader>
 
-    <Instructions>
-        This offers a way for readers to print the entire book as a single page.
-    </Instructions>
+        <Instructions>
+            This offers a way for readers to print the entire book as a single
+            page.
+        </Instructions>
 
-    <p>
-        Want to print this book or generate a PDF? 
-        See <Link to={base + "print"}>all chapters on a single page</Link> and then print or export.
-        Long books can take some time to render.
-    </p>
+        <PageParagraph>
+            Want to print this book or generate a PDF? See <Link
+                to={$base + 'print'}>all chapters on a single page</Link
+            > and then print or export. Long books can take some time to render.
+        </PageParagraph>
 
-    <h2 class="bookish-header" id="citation">Citation</h2>
+        <PageHeader id="citation">Citation</PageHeader>
 
-    <Instructions>
-        This citation is dynamically created from the current authors, title, and date.
-    </Instructions>
+        <Instructions>
+            This citation is dynamically created from the current authors,
+            title, and date.
+        </Instructions>
 
-    <!-- Book citation -->
-    <p>
-        { $edition.getAuthors().map(author => Parser.parseFormat($edition, author).toText()).join(", ") } ({(new Date()).getFullYear() }). <em>{$edition.getTitle()}</em>. { location.protocol+'//'+location.host+location.pathname }, <em>retrieved { (new Date()).toLocaleDateString("en-US")}</em>.
-    </p>
+        <!-- Book citation -->
+        <PageParagraph>
+            {$edition
+                .getAuthors()
+                .map((author) => Parser.parseFormat($edition, author).toText())
+                .join(', ')} ({new Date().getFullYear()}).
+            <em>{$edition.getTitle()}</em>. {location.protocol +
+                '//' +
+                location.host +
+                location.pathname},
+            <em>retrieved {new Date().toLocaleDateString('en-US')}</em>.
+        </PageParagraph>
 
-    <Revisions />
-    
-</Page>
+        <Revisions />
+    </Page>
+{/if}

package/components/page/TableOfContents.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 TableOfContentsProps = typeof __propDef.props;
-export declare type TableOfContentsEvents = typeof __propDef.events;
-export declare type TableOfContentsSlots = typeof __propDef.slots;
+export type TableOfContentsProps = typeof __propDef.props;
+export type TableOfContentsEvents = typeof __propDef.events;
+export type TableOfContentsSlots = typeof __propDef.slots;
 export default class TableOfContents extends SvelteComponentTyped<TableOfContentsProps, TableOfContentsEvents, TableOfContentsSlots> {
 }
 export {};

package/components/page/TableOfContentsImage.svelte

@@ -1,15 +1,15 @@
-<script>import EmbedNode from "../../models/chapter/EmbedNode";
-import Parser from "../../models/chapter/Parser";
-import { getEdition } from "./Contexts";
+<script>import EmbedNode from '../../models/chapter/EmbedNode';
+import Parser from '../../models/chapter/Parser';
+import { getEdition } from './Contexts';
 export let embed;
 let edition = getEdition();
 $: embedNode = embed === null ? null : Parser.parseEmbed($edition, embed);
 </script>
 
-{#if embedNode instanceof EmbedNode }
-    <img 
+{#if embedNode instanceof EmbedNode}
+    <img
         style="width: 5em"
-        src={embedNode.getSmallURL() }
-        alt={embedNode.getDescription() }
+        src={embedNode.getSmallURL()}
+        alt={embedNode.getDescription()}
     />
-{/if}
+{/if}

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

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type TableOfContentsImageProps = typeof __propDef.props;
-export declare type TableOfContentsImageEvents = typeof __propDef.events;
-export declare type TableOfContentsImageSlots = typeof __propDef.slots;
+export type TableOfContentsImageProps = typeof __propDef.props;
+export type TableOfContentsImageEvents = typeof __propDef.events;
+export type TableOfContentsImageSlots = typeof __propDef.slots;
 export default class TableOfContentsImage extends SvelteComponentTyped<TableOfContentsImageProps, TableOfContentsImageEvents, TableOfContentsImageSlots> {
 }
 export {};