bookish-press 0.4.0 → 0.4.3

package/components/page/Header.svelte

@@ -1,13 +1,16 @@
-<script>import EmbedNode from '../../models/chapter/EmbedNode';
-import Parser from "../../models/chapter/Parser";
+<script>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 { getUser, getEdition, getLeasee, lease } from './Contexts';
+import Button from '../app/Button.svelte';
+/** True if an author should be able to edit this header. */
+export let editable;
 export let label;
 export let header;
+export let id;
 export let subtitle = undefined;
 export let print = false;
 export let tags = undefined;
@@ -15,22 +18,24 @@ export let getImage;
 export let setImage;
 export let save = null;
 let title = null;
-let reminder = null;
+let showReminder = true;
+let auth = getUser();
 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,68 +43,150 @@ 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;
-$: {
-    let embed = getImage();
-    embedNode = embed ? Parser.parseEmbed($edition, embed) : undefined;
-}
+let embed;
+$: embed = getImage();
 </script>
 
-<div class="bookish-chapter-header">
-    {#if embedNode }
+<header class="bookish-chapter-header">
+    {#if embed}
         <div class="bookish-figure-full">
-            {#if edition && editable && embedNode instanceof EmbedNode}
-                <BookishEditor 
-                    ast={embedNode} 
-                    save={node => setImage ? setImage(node.toBookdown()) : undefined }
+            {#if $edition && editable}
+                <BookishEditor
+                    text={embed}
+                    parser={(text) => Parser.parseEmbed($edition, text)}
+                    save={(node) =>
+                        setImage ? setImage(node.toBookdown()) : undefined}
                     chapter={false}
                     component={Embed}
                     placeholder=""
+                    leasee={getLeasee(auth, edition, `embed-${id}`)}
+                    lease={(lock) => lease(auth, edition, `embed-${id}`, lock)}
                 />
-            {:else if embedNode instanceof EmbedNode }
-                <Embed node={embedNode}/>
             {:else}
-                <ErrorMessage node={embedNode} />
+                <Embed
+                    node={Parser.parseEmbed($edition, embed)}
+                    editable={false}
+                />
+            {/if}
+            {#if !print && showReminder}
+                <div class="bookish-scroll-reminder" />
             {/if}
-            {#if !print }<div bind:this={reminder} class="bookish-scroll-reminder"></div>{/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 embed === null}
+            <Button tooltip="add cover image" command={addCover}
+                >+ cover image</Button
+            >
         {:else}
-            <button on:click={removeCover}>x cover image</button>
+            <Button tooltip="remove cover image" 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 : "")}
-                    placeholder="Title"
-                    valid={text => text.length === 0 ? "Titles have to be at least one character long." : undefined }
-                    save={save}
+    <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}
                 />
             {: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

@@ -1,14 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        /** True if an author should be able to edit this header. */ editable: boolean;
         label: string;
         header: string;
+        id: string;
         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 +21,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 {};

package/components/page/Index.svelte

@@ -1,16 +1,22 @@
-<script>import Header from "./Header.svelte";
+<script>import Header from './Header.svelte';
 import Outline from './Outline.svelte';
 import Page from './Page.svelte';
 import Instructions from './Instructions.svelte';
 import ChapterIDs from '../../models/book/ChapterID';
-import Link from "../Link.svelte";
-import { getBase, getEdition } from "./Contexts";
-import { page } from "$app/stores";
+import Link from '../Link.svelte';
+import { getBase, getEdition, isEditionEditable } from './Contexts';
+import { page } from '$app/stores';
+import Muted from './Muted.svelte';
+import ChapterTitle from './ChapterTitle.svelte';
+import ChapterNumber from './ChapterNumber.svelte';
+import PageHeader from './PageHeader.svelte';
+import Rows from './Rows.svelte';
+let editable = isEditionEditable();
 let edition = getEdition();
 let base = getBase();
 // What letter are we matching?
 $: letter = $page.params.letter;
-$: bookIndex = $edition.getBookIndex();
+$: bookIndex = $edition?.getBookIndex() ?? {};
 let letters = {};
 // Figure out what letters have words
 $: {
@@ -21,7 +27,9 @@ let words = [];
 $: {
     words = [];
     let count = 0;
-    Object.keys(bookIndex).sort((a, b) => a.localeCompare(b)).forEach(word => {
+    Object.keys(bookIndex)
+        .sort((a, b) => a.localeCompare(b))
+        .forEach((word) => {
         const firstLetter = word.charAt(0).toLowerCase();
         if (letter === firstLetter) {
             count++;
@@ -33,85 +41,113 @@ $: {
 }
 </script>
 
-<Page title={`${$edition.getTitle()} - Index`}>
-    <Header 
-        label="Index title"
-        getImage={() => $edition.getImage(ChapterIDs.IndexID)}
-        setImage={(embed) => $edition.setImage(ChapterIDs.IndexID, embed)}
-        header="Index"
-        tags={$edition.getTags()}
-    >
-        <Outline
-            slot="outline"
-            previous={$edition.getPreviousChapterID(ChapterIDs.IndexID)}
-            next={$edition.getNextChapterID(ChapterIDs.IndexID)}
-        />
-    </Header>
+{#if $edition}
+    <Page title={`${$edition.getTitle()} - Index`}>
+        <Header
+            editable={isEditionEditable()}
+            label="Index title"
+            id="index"
+            getImage={() => $edition?.getImage(ChapterIDs.IndexID) ?? null}
+            setImage={(embed) =>
+                $edition
+                    ? edition.set($edition.withImage(ChapterIDs.IndexID, embed))
+                    : undefined}
+            header="Index"
+            tags={$edition.getTags()}
+        >
+            <Outline
+                slot="outline"
+                previous={$edition.getPreviousChapterID(ChapterIDs.IndexID)}
+                next={$edition.getNextChapterID(ChapterIDs.IndexID)}
+            />
+        </Header>
 
-    <Instructions>
-        This index is created automatically.
-        It's not perfect; we may add more control over it in the future.
-    </Instructions>
+        <Instructions {editable}>
+            This index is created automatically using the words in the chapters.
+        </Instructions>
 
-    <p><em>This index includes all words, excluding common English words, words with apostrophes, and words ending in -ly.</em></p>
+        <p
+            ><em
+                >This index includes all words, excluding common English words,
+                words with apostrophes, and words ending in -ly.</em
+            ></p
+        >
 
-    {#if Object.keys(letters).length === 0 }
-        <p>There are no words in this book, so there's no index.</p>
-    {:else}
-        <p>Pick a letter to browse:</p>
+        {#if Object.keys(letters).length === 0}
+            <p>There are no words in this book, so there's no index.</p>
+        {:else}
+            <p>Pick a letter to browse:</p>
 
-        <p>
-            {#each "abcdefghijklmnopqrstuvwxyz".split("") as symbol, index}
-                <span style="display: inline-block">
-                    {#if symbol in letters && letter !== symbol }
-                        <Link to={base + "/index/" + symbol}>{symbol}</Link>
+            <nav class="letters">
+                {#each 'abcdefghijklmnopqrstuvwxyz'.split('') as symbol, index}
+                    {#if symbol in letters && letter !== symbol}
+                        <Link to={$base + 'index/' + symbol}>{symbol}</Link>
+                    {:else if letter === symbol}
+                        <strong
+                            ><span style="font-size: 200%">{symbol}</span
+                            ></strong
+                        >
                     {:else}
-                        <span>
-                            {#if letter === symbol } 
-                                <strong><span style="font-size: 200%">{symbol}</span></strong>
-                            {:else}
-                                <span class={"bookish-muted"}>{symbol}</span>
-                            {/if}
-                        </span>
+                        <Muted>{symbol}</Muted>
                     {/if}
-                    {#if index < 26 - 1 } 
-                        <span>&sdot;</span>
+                {/each}
+            </nav>
+
+            <Rows>
+                {#each words as word, index}
+                    {#if word === true}
+                        <tr
+                            ><td colspan={2}
+                                ><PageHeader>{words[index + 1]}</PageHeader></td
+                            ></tr
+                        >
+                    {:else}
+                        <tr>
+                            <td>{word}</td>
+                            <td>
+                                <!-- Sort the chapters by chapter number -->
+                                {#each Array.from(bookIndex[word]).sort( (a, b) => {
+                                        let numberA = $edition?.getChapterNumber(a) ?? 0;
+                                        let numberB = $edition?.getChapterNumber(b) ?? 0;
+                                        if (numberA === undefined) return -1;
+                                        if (numberB === undefined) return 1;
+                                        return numberA - numberB;
+                                    } ) as chapterID}
+                                    <!-- Map them to links to the first occurrence in the chapter. -->
+                                    <p>
+                                        <ChapterNumber
+                                            >Chapter {#if $edition.getChapterNumber(chapterID) !== undefined}{$edition.getChapterNumber(
+                                                    chapterID
+                                                )}.
+                                            {/if}</ChapterNumber
+                                        >
+                                        <ChapterTitle
+                                            link={`${$base}${chapterID}?word=${word}`}
+                                            >{$edition.getChapterName(
+                                                chapterID
+                                            )}</ChapterTitle
+                                        >
+                                    </p>
+                                {/each}
+                            </td>
+                        </tr>
                     {/if}
-                </span>
-            {/each}
-        </p>
+                {/each}
+            </Rows>
+        {/if}
+    </Page>
+{/if}
+
+<style>
+    tr p {
+        margin-top: 0;
+    }
 
-        <div class="bookish-table">
-            <table>
-                <tbody>
-                    {#each words as word, index }
-                        {#if word === true}
-                            <tr><td colspan={2}><h2 class="bookish-header">{words[index + 1]}</h2></td></tr>
-                        {:else}
-                            <tr>
-                                <td>{word}</td>
-                                <td>
-                                    <!-- Sort the chapters by chapter number -->
-                                    {#each Array.from(bookIndex[word])
-                                        .sort((a, b) => {
-                                            let numberA = $edition.getChapterNumber(a);
-                                            let numberB = $edition.getChapterNumber(b);
-                                            if(numberA === undefined) return -1;
-                                            if(numberB === undefined) return 1;
-                                            return numberA - numberB;
-                                        }) as chapterID, index }
-                                        <!-- Map them to links to the first occurrence in the chapter. -->
-                                        <span>
-                                            Chapter {#if $edition.getChapterNumber(chapterID) !== undefined}<span> {$edition.getChapterNumber(chapterID)}. </span>{/if}<Link to={`${base}/${chapterID}?word=${word}`}>{$edition.getChapterName(chapterID)}</Link>
-                                            {#if index < bookIndex[word].size - 1 }<br/>{/if}
-                                        </span>
-                                    {/each}
-                                </td>
-                            </tr>
-                        {/if}
-                    {/each}
-                </tbody>
-            </table>
-        </div>
-    {/if}
-</Page>
+    .letters {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        gap: calc(2 * var(--bookish-inline-padding));
+        align-items: baseline;
+    }
+</style>

package/components/page/Index.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 IndexProps = typeof __propDef.props;
-export declare type IndexEvents = typeof __propDef.events;
-export declare type IndexSlots = typeof __propDef.slots;
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
 export default class Index extends SvelteComponentTyped<IndexProps, IndexEvents, IndexSlots> {
 }
 export {};

package/components/page/Instructions.svelte

@@ -1,30 +1,31 @@
-<script>import { isEditable } from "./Contexts";
-let editable = isEditable();
+<script>export let editable;
 </script>
 
-{#if editable }
-    <div class="bookish-instructions"><slot></slot></div>
+{#if editable}
+    <aside class="instructions"><slot /></aside>
 {/if}
 
 <style>
-    .bookish-instructions {
+    .instructions {
+        font-family: var(--app-font);
+        font-weight: 300;
         font-style: italic;
-        margin-top: var(--bookish-app-margin);
-        margin-bottom: var(--bookish-app-margin);
-        line-height: 1.2;
-        padding: var(--bookish-app-margin);
-        border: 2px solid var(--bookish-app-chrome-border-color);
-        border-radius: var(--bookish-roundedness);
+        margin-top: var(--app-text-spacing);
+        margin-bottom: var(--app-text-spacing);
+        line-height: var(--app-line-height);
+        padding-left: var(--app-chrome-padding);
+        border-left: var(--app-chrome-border-size) solid var(--app-border-color);
     }
 
-    .bookish-instructions :global(p), .bookish-instructions :global(li) {
-        font-family: var(--bookish-app-chrome-font-family);
-        font-size: var(--bookish-app-chrome-font-size);
-        line-height: var(--bookish-app-chrome-line-height);
+    .instructions :global(p),
+    .instructions :global(li) {
+        font-family: var(--app-font);
+        font-size: var(--app-chrome-font-size);
+        line-height: var(--app-line-height);
         margin-bottom: 0;
     }
 
-    .bookish-instructions :global(p) {
+    .instructions :global(p) {
         margin-top: 0;
     }
-</style>
+</style>

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

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        editable: boolean;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -8,9 +10,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type InstructionsProps = typeof __propDef.props;
-export declare type InstructionsEvents = typeof __propDef.events;
-export declare type InstructionsSlots = typeof __propDef.slots;
+export type InstructionsProps = typeof __propDef.props;
+export type InstructionsEvents = typeof __propDef.events;
+export type InstructionsSlots = typeof __propDef.slots;
 export default class Instructions extends SvelteComponentTyped<InstructionsProps, InstructionsEvents, InstructionsSlots> {
 }
 export {};