bookish-press 0.4.0 → 0.4.16

package/components/page/Editions.svelte

@@ -0,0 +1,144 @@
+<script>import Parser from '../../models/chapter/Parser';
+import { createNewEdition, publishEdition } from '../../models/CRUD';
+import Format from '../chapter/Format.svelte';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import Switch from '../editor/Switch.svelte';
+import Instructions from './Instructions.svelte';
+import Note from '../editor/Note.svelte';
+import { getBook, getEdition, isEditable } from './Contexts';
+import Button from '../app/Button.svelte';
+import Link from '../Link.svelte';
+import PageHeader from './PageHeader.svelte';
+import Rows from './Rows.svelte';
+let edition = getEdition();
+let editable = isEditable();
+let book = getBook();
+// Book revisions
+$: bookRevisions = $book?.getRevisions();
+// Copy the current draft to create a new draft.
+function handlePublish(index, published) {
+    if ($book === undefined)
+        return;
+    book.set($book.asPublished(published, index));
+}
+async function handleDraftEdition() {
+    if ($book === undefined)
+        return;
+    book.set(await createNewEdition($book));
+}
+</script>
+
+{#if $edition}
+    {#if $book && bookRevisions}
+        <PageHeader id="revisions"
+            >Editions {#if editable}<Button
+                    tooltip="Create a new edition"
+                    command={handleDraftEdition}>+</Button
+                >{/if}</PageHeader
+        >
+        <Instructions>
+            Each book has one or more editions, allowing you to track revisions
+            and ensure previous versions remain available. When you're ready to
+            revise, make a new edition, then publish it when you're done. The
+            edition with a * is the default edition readers will see, unless
+            they explicitly choose to view a previous edition.
+        </Instructions>
+        <Rows>
+            {#each bookRevisions as revision, index (revision.ref)}
+                {@const editionNumber =
+                    bookRevisions === undefined
+                        ? -1
+                        : bookRevisions.length - index}
+                {@const editionLabel =
+                    editionNumber +
+                    (editionNumber === 1
+                        ? 'st'
+                        : editionNumber === 2
+                        ? 'nd'
+                        : editionNumber === 3
+                        ? 'rd'
+                        : 'th')}
+                {@const viewing = revision.ref.id === $edition.getRef()?.id}
+
+                {#if $book && (editable || revision.published)}
+                    <tr>
+                        <td>
+                            {#if viewing}
+                                <strong class="viewing">{editionLabel}</strong>
+                            {:else}
+                                <Link
+                                    to={`/write/${$book.ref.id}/${
+                                        bookRevisions.length - index
+                                    }`}>{editionLabel}</Link
+                                >
+                            {/if}
+                            <Note
+                                >{new Date(revision.time).toLocaleDateString(
+                                    'en-us'
+                                )}</Note
+                            >
+                        </td>
+                        <td>
+                            {#if editable}
+                                <BookishEditor
+                                    ast={Parser.parseFormat(
+                                        undefined,
+                                        revision.summary
+                                    ).withTextIfEmpty()}
+                                    save={(newSummary) =>
+                                        $book
+                                            ? book.set(
+                                                  $book.withEditionSummary(
+                                                      newSummary.toBookdown(),
+                                                      index
+                                                  )
+                                              )
+                                            : undefined}
+                                    chapter={false}
+                                    component={Format}
+                                    placeholder="Summarize this edition's changes."
+                                />
+                            {:else if revision.summary === ''}
+                                <em>No summary of changes</em>
+                            {:else}
+                                {revision.summary}
+                            {/if}
+                        </td>
+                        <td style="whitespace: nowrap">
+                            {#if editable}
+                                <Switch
+                                    options={['hidden', 'published']}
+                                    enabled={revision.published ||
+                                        revision.summary !== ''}
+                                    value={revision.published
+                                        ? 'published'
+                                        : 'hidden'}
+                                    edit={(published) =>
+                                        handlePublish(
+                                            index,
+                                            published === 'published'
+                                        )}
+                                />
+                            {/if}
+                        </td>
+                    </tr>
+                {/if}
+            {/each}
+        </Rows>
+    {/if}
+{/if}
+
+<style>
+    .viewing {
+        border-bottom: var(--app-chrome-border-size) solid
+            var(--app-border-color);
+    }
+
+    td:first-child {
+        width: 5%;
+    }
+
+    td:last-child {
+        width: 30%;
+    }
+</style>

package/components/page/Editions.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 EditionsProps = typeof __propDef.props;
+export type EditionsEvents = typeof __propDef.events;
+export type EditionsSlots = typeof __propDef.slots;
+export default class Editions extends SvelteComponentTyped<EditionsProps, EditionsEvents, EditionsSlots> {
+}
+export {};

package/components/page/Glossary.svelte

@@ -1,61 +1,70 @@
-<script>import Header from "./Header.svelte";
+<script>import Header from './Header.svelte';
 import Outline from './Outline.svelte';
 import Page from './Page.svelte';
 import ChapterIDs from '../../models/book/ChapterID';
-import DefinitionView from "./DefinitionView.svelte";
-import { getEdition, isEditable } from "./Contexts";
-import Instructions from "./Instructions.svelte";
+import DefinitionView from './DefinitionView.svelte';
+import { getEdition, isEditable } from './Contexts';
+import Instructions from './Instructions.svelte';
+import Button from '../app/Button.svelte';
+import Rows from './Rows.svelte';
 let edition = getEdition();
 let editable = isEditable();
-$: glossary = $edition.getGlossary();
+$: glossary = $edition?.getGlossary() ?? {};
 // Sort by canonical phrases
-$: keys = glossary === undefined || Object.keys(glossary).length === 0 ? null : Object.keys(glossary).sort((a, b) => glossary[a].phrase.localeCompare(glossary[b].phrase));
+$: keys =
+    $edition === undefined
+        ? []
+        : glossary === undefined || Object.keys(glossary).length === 0
+            ? null
+            : Object.keys(glossary).sort((a, b) => glossary[a].phrase.localeCompare(glossary[b].phrase));
 function addEmptyDefinition() {
+    if ($edition === undefined)
+        return;
     // Generate an ID.
-    const letters = "abcdefghijklmnopqrstuvwxyz".split("");
-    let id = "";
+    const letters = 'abcdefghijklmnopqrstuvwxyz'.split('');
+    let id = '';
     while (id.length < 4 || $edition.hasDefinition(id))
         id = id + letters[Math.round(Math.random() * 26)];
-    $edition.addDefinition(id, "", "", []);
+    edition.set($edition.withDefinition(id, '', '', []));
 }
 </script>
 
-<Page title={`${$edition.getTitle()} - Glossary`}>
-    <Header 
-        label="Glossary title"
-        getImage={() => $edition.getImage(ChapterIDs.GlossaryID)}
-        setImage={(embed) => $edition.setImage(ChapterIDs.GlossaryID, embed)}
-        header="Glossary"
-        tags={$edition.getTags()}
-    >
-        <Outline
-            slot="outline"
-            previous={$edition.getPreviousChapterID(ChapterIDs.GlossaryID)}
-            next={$edition.getNextChapterID(ChapterIDs.GlossaryID)}
-        />
-    </Header>
-    {#if editable }
-        <Instructions>
-            Add definitions and then link to them in a chapter's text.
-        </Instructions>
-        <p><button on:click={addEmptyDefinition}>+</button></p>
-    {/if}
-    {#if keys === null }
-        <p>This book has no glossary.</p>
-    {:else}
-        <div>
-            <br/>
-            <div class="bookish-table">
-                <table>
-                    <colgroup>
-                        <col style="width: 40%" />
-                        <col style="width: 60%" />
-                    </colgroup>
-                    <tbody>
-                        {#each keys as id }<DefinitionView id={id} definition={glossary[id]} />{/each}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    {/if}
-</Page>
+{#if $edition}
+    <Page title={`${$edition.getTitle()} - Glossary`}>
+        <Header
+            label="Glossary title"
+            getImage={() => $edition?.getImage(ChapterIDs.GlossaryID) ?? null}
+            setImage={(embed) =>
+                $edition
+                    ? edition.set(
+                          $edition.withImage(ChapterIDs.GlossaryID, embed)
+                      )
+                    : undefined}
+            header="Glossary"
+            tags={$edition.getTags()}
+        >
+            <Outline
+                slot="outline"
+                previous={$edition.getPreviousChapterID(ChapterIDs.GlossaryID)}
+                next={$edition.getNextChapterID(ChapterIDs.GlossaryID)}
+            />
+        </Header>
+        {#if editable}
+            <Instructions>
+                Add definitions and then link to them in a chapter's text.
+            </Instructions>
+            <Button tooltip="Add a glossary entry" command={addEmptyDefinition}
+                >+ definition</Button
+            >
+        {/if}
+        {#if keys === null}
+            <p>This book has no glossary.</p>
+        {:else}
+            <dl>
+                {#each keys as id (id)}
+                    <DefinitionView {id} definition={glossary[id]} />
+                {/each}
+            </dl>
+        {/if}
+    </Page>
+{/if}

package/components/page/Glossary.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 GlossaryProps = typeof __propDef.props;
-export declare type GlossaryEvents = typeof __propDef.events;
-export declare type GlossarySlots = typeof __propDef.slots;
+export type GlossaryProps = typeof __propDef.props;
+export type GlossaryEvents = typeof __propDef.events;
+export type GlossarySlots = typeof __propDef.slots;
 export default class Glossary extends SvelteComponentTyped<GlossaryProps, GlossaryEvents, GlossarySlots> {
 }
 export {};

package/components/page/Header.svelte

@@ -1,11 +1,13 @@
 <script>import EmbedNode from '../../models/chapter/EmbedNode';
-import Parser from "../../models/chapter/Parser";
+import Parser from '../../models/chapter/Parser';
 import Embed from '../chapter/Embed.svelte';
 import ErrorMessage from '../chapter/ErrorMessage.svelte';
 import BookishEditor from '../editor/BookishEditor.svelte';
+import Title from './Title.svelte';
 import { onMount } from 'svelte';
 import TextEditor from '../editor/TextEditor.svelte';
 import { getEdition, isEditable } from './Contexts';
+import Button from '../app/Button.svelte';
 export let label;
 export let header;
 export let subtitle = undefined;
@@ -15,22 +17,24 @@ export let getImage;
 export let setImage;
 export let save = null;
 let title = null;
-let reminder = null;
+let showReminder = true;
 let edition = getEdition();
 let editable = isEditable();
 function updateScrollReminder() {
-    if (title && reminder) {
-        // If the bottom of the window is below the top of the title, hide the reminder.
-        if (window.scrollY + window.innerHeight > title.getBoundingClientRect().top + window.scrollY)
-            reminder.classList.add("bookish-past-title");
-        else
-            reminder.classList.remove("bookish-past-title");
-    }
+    // If the bottom of the window is below the top of the title, hide the reminder.
+    if (title)
+        showReminder =
+            window.scrollY + window.innerHeight <=
+                title.getBoundingClientRect().top + window.scrollY;
+}
+function addCover() {
+    if (setImage)
+        setImage('|||||');
+}
+function removeCover() {
+    if (setImage)
+        setImage(null);
 }
-function addCover() { if (setImage)
-    setImage("|||||"); }
-function removeCover() { if (setImage)
-    setImage(null); }
 // When the title becomes visible or hidden, update the scroll reminder.
 onMount(() => {
     const intersectionObserver = new IntersectionObserver(() => updateScrollReminder());
@@ -38,8 +42,10 @@ onMount(() => {
         intersectionObserver.observe(title);
     updateScrollReminder();
     // Stop observing when unmounted.
-    return () => { if (title)
-        intersectionObserver.unobserve(title); };
+    return () => {
+        if (title)
+            intersectionObserver.unobserve(title);
+    };
 });
 // Get the embed, update when getImage function prop changes.
 let embedNode = undefined;
@@ -49,57 +55,136 @@ $: {
 }
 </script>
 
-<div class="bookish-chapter-header">
-    {#if embedNode }
+<header class="bookish-chapter-header">
+    {#if embedNode}
         <div class="bookish-figure-full">
             {#if edition && editable && embedNode instanceof EmbedNode}
-                <BookishEditor 
-                    ast={embedNode} 
-                    save={node => setImage ? setImage(node.toBookdown()) : undefined }
+                <BookishEditor
+                    ast={embedNode}
+                    save={(node) =>
+                        setImage ? setImage(node.toBookdown()) : undefined}
                     chapter={false}
                     component={Embed}
                     placeholder=""
                 />
-            {:else if embedNode instanceof EmbedNode }
-                <Embed node={embedNode}/>
+            {:else if embedNode instanceof EmbedNode}
+                <Embed node={embedNode} />
             {:else}
                 <ErrorMessage node={embedNode} />
             {/if}
-            {#if !print }<div bind:this={reminder} class="bookish-scroll-reminder"></div>{/if}
+            {#if !print && showReminder}
+                <div class="bookish-scroll-reminder" />
+            {/if}
         </div>
     {:else}
         <!-- Add a bit of space to account for the lack of an image. -->
         <p>&nbsp;</p>
     {/if}
     {#if !print}
-        <slot name="outline"></slot>
+        <slot name="outline" />
     {/if}
-    {#if editable }
-        {#if embedNode === undefined }
-            <button on:click={addCover}>+ cover image</button> 
+    {#if editable}
+        {#if embedNode === undefined}
+            <Button tooltip="add cover image to page" command={addCover}
+                >+ cover image</Button
+            >
         {:else}
-            <button on:click={removeCover}>x cover image</button>
+            <Button tooltip="remove cover image from page" command={removeCover}
+                >- cover image</Button
+            >
         {/if}
     {/if}
-    <div class="bookish-chapter-header-text">
-        <slot name="before"></slot>
-        <h1 bind:this={title} class="bookish-title">
-            {#if editable && save }
-                <TextEditor 
-                    label={label}
-                    startText={header + (subtitle ? ": " + subtitle : "")}
+    <div bind:this={title} class="bookish-chapter-header-text">
+        <slot name="before" />
+        <Title>
+            {#if editable && save}
+                <TextEditor
+                    {label}
+                    text={header + (subtitle ? ': ' + subtitle : '')}
                     placeholder="Title"
-                    valid={text => text.length === 0 ? "Titles have to be at least one character long." : undefined }
-                    save={save}
+                    valid={(text) =>
+                        text.length === 0
+                            ? 'Titles have to be at least one character long.'
+                            : undefined}
+                    {save}
                 />
             {:else}
-                { header }
-                {#if subtitle }<div class="bookish-subtitle">{subtitle}</div>{/if}
+                {header}
+                {#if subtitle}<div class="bookish-subtitle">{subtitle}</div
+                    >{/if}
             {/if}
-        </h1>
-        <slot name="after"></slot>
-        {#if tags }
-            <div>{#each tags as tag}<span class="bookish-tag">{tag}</span>{/each}</div>
+        </Title>
+        <slot name="after" />
+        {#if tags}
+            <div
+                >{#each tags as tag}<span class="bookish-tag">{tag}</span
+                    >{/each}</div
+            >
         {/if}
     </div>
-</div>
+</header>
+
+<style>
+    .bookish-subtitle {
+        font-size: var(--bookish-header-1-font-size);
+        font-weight: normal;
+        font-style: italic;
+        margin-top: 0; /* Shouldn't have any space below title */
+        margin-bottom: calc(var(--bookish-title-font-size) * 0.5);
+        line-height: var(--bookish-header-line-height);
+    }
+
+    .bookish-figure-full {
+        left: 50%;
+        margin-left: -50vw;
+        margin-right: -50vw;
+        margin-bottom: 3em;
+        max-width: 100vw;
+        position: relative;
+        right: 50%;
+        width: 100vw;
+    }
+
+    .bookish-figure-full :global(.bookish-figure) {
+        /* No margin above full figures, which tend to come first in a page. */
+        margin-top: 0;
+    }
+
+    .bookish-scroll-reminder {
+        position: fixed;
+        bottom: 4em;
+        left: 50%;
+        animation: bookish-bounce 3s infinite;
+        animation-timing-function: ease;
+        width: 0;
+        height: 0;
+        margin-left: -1rem;
+        border-left: 1rem solid transparent;
+        border-right: 1rem solid transparent;
+        border-top: 1rem solid white;
+        mix-blend-mode: difference;
+    }
+
+    @keyframes bookish-bounce {
+        0% {
+            bottom: 4em;
+        }
+        50% {
+            bottom: 5em;
+        }
+        100% {
+            bottom: 4em;
+        }
+    }
+
+    .bookish-tag {
+        font-size: var(--bookish-small-font-size);
+        display: inline-block;
+        padding: var(--bookish-inline-padding)
+            calc(2 * var(--bookish-inline-padding));
+        border-radius: var(--bookish-roundedness);
+        background-color: var(--bookish-border-color-light);
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+</style>

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

@@ -6,9 +6,9 @@ declare const __propDef: {
         subtitle?: string | undefined;
         print?: boolean | undefined;
         tags?: string[] | undefined;
-        getImage: (() => string | null);
-        setImage: (embed: string | null) => Promise<void> | undefined;
-        save?: ((text: string) => Promise<void> | undefined) | null | undefined;
+        getImage: () => string | null;
+        setImage: (embed: string | null) => Promise<void> | void;
+        save?: ((text: string) => Promise<void> | void) | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,9 +19,9 @@ declare const __propDef: {
         after: {};
     };
 };
-export declare type HeaderProps = typeof __propDef.props;
-export declare type HeaderEvents = typeof __propDef.events;
-export declare type HeaderSlots = typeof __propDef.slots;
+export type HeaderProps = typeof __propDef.props;
+export type HeaderEvents = typeof __propDef.events;
+export type HeaderSlots = typeof __propDef.slots;
 export default class Header extends SvelteComponentTyped<HeaderProps, HeaderEvents, HeaderSlots> {
 }
 export {};