bookish-press 0.4.0 → 0.4.16

package/components/page/Index.svelte

@@ -1,16 +1,21 @@
-<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 } 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 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 +26,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 +40,112 @@ $: {
 }
 </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
+            label="Index title"
+            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>
+            This index is created automatically. It's not perfect; we may add
+            more control over it in the future.
+        </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,32 @@
-<script>import { isEditable } from "./Contexts";
+<script>import { isEditable } from './Contexts';
 let editable = isEditable();
 </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,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -8,9 +8,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 {};

package/components/page/License.svelte

@@ -1,29 +1,37 @@
-<script>import Parser from "../../models/chapter/Parser";
-import BookishEditor from "../editor/BookishEditor.svelte";
-import Instructions from "./Instructions.svelte";
-import Format from "../chapter/Format.svelte";
-import { getEdition, isEditable } from "./Contexts";
+<script>import Parser from '../../models/chapter/Parser';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import Instructions from './Instructions.svelte';
+import Format from '../chapter/Format.svelte';
+import { getEdition, isEditable } from './Contexts';
+import PageHeader from './PageHeader.svelte';
 let edition = getEdition();
 let editable = isEditable();
-$: formatNode = Parser.parseFormat($edition, $edition.getLicense()).withTextIfEmpty();
+$: formatNode = $edition
+    ? Parser.parseFormat($edition, $edition.getLicense()).withTextIfEmpty()
+    : undefined;
 </script>
 
-<h2 class="bookish-header" id="license">License</h2>
+<PageHeader id="license">License</PageHeader>
 
 <Instructions>
-    By default of U.S. Copyright Law, your content copyrighted and owned by all authors. 
-    Edit this if you'd like to grant different rights.
+    By default of U.S. Copyright Law, your content copyrighted and owned by all
+    authors. Edit this if you'd like to grant different rights.
 </Instructions>
 
- <!-- If editable, show acknowledgements even if they're empty, otherwise hide -->
-{#if editable }
-    <BookishEditor
-        ast={formatNode} 
-        save={node => $edition.setLicense(node.toBookdown())}
-        chapter={false}
-        component={Format}
-        placeholder="In the U.S., all rights reserved by default. Want to offer different rights to readers?"
-    />
-{:else}
-    <Format node={formatNode} />
-{/if}
+{#if $edition && formatNode}
+    <!-- If editable, show acknowledgements even if they're empty, otherwise hide -->
+    {#if editable}
+        <BookishEditor
+            ast={formatNode}
+            save={(node) =>
+                $edition
+                    ? edition.set($edition.setLicense(node.toBookdown()))
+                    : undefined}
+            chapter={false}
+            component={Format}
+            placeholder="In the U.S., all rights reserved by default. Want to offer different rights to readers?"
+        />
+    {:else}
+        <Format node={formatNode} />
+    {/if}
+{/if}

package/components/page/License.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 LicenseProps = typeof __propDef.props;
-export declare type LicenseEvents = typeof __propDef.events;
-export declare type LicenseSlots = typeof __propDef.slots;
+export type LicenseProps = typeof __propDef.props;
+export type LicenseEvents = typeof __propDef.events;
+export type LicenseSlots = typeof __propDef.slots;
 export default class License extends SvelteComponentTyped<LicenseProps, LicenseEvents, LicenseSlots> {
 }
 export {};

package/components/page/Loading.svelte

@@ -1,13 +1,103 @@
-<div class={"bookish bookish-loading" + (localStorage.getItem("bookish-dark") === "true" ? " bookish-dark" : "")}>
-        <div class="bookish-loading-animation">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
+<div
+    aria-live="polite"
+    class={'bookish bookish-loading' +
+        (typeof localStorage !== 'undefined' &&
+        localStorage.getItem('dark') === 'true'
+            ? ' dark'
+            : '')}
+>
+    <div class="bookish-loading-animation">
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
     </div>
-</div>
+</div>
+
+<style>
+    .bookish-loading {
+        width: 100vw;
+        height: 100vh;
+    }
+
+    .bookish-loading-animation {
+        position: fixed;
+        width: 80px;
+        height: 80px;
+        left: 50%;
+        top: 50%;
+        margin-left: -40px;
+        margin-top: -40px;
+        z-index: 2;
+    }
+
+    .bookish-loading-animation div {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: var(--bookish-muted-color);
+        animation: bookish-loading 1.2s linear infinite;
+    }
+
+    .bookish-loading-animation div:nth-child(1) {
+        top: 8px;
+        left: 8px;
+        animation-delay: 0s;
+    }
+    .bookish-loading-animation div:nth-child(2) {
+        top: 8px;
+        left: 32px;
+        animation-delay: -0.4s;
+    }
+    .bookish-loading-animation div:nth-child(3) {
+        top: 8px;
+        left: 56px;
+        animation-delay: -0.8s;
+    }
+    .bookish-loading-animation div:nth-child(4) {
+        top: 32px;
+        left: 8px;
+        animation-delay: -0.4s;
+    }
+    .bookish-loading-animation div:nth-child(5) {
+        top: 32px;
+        left: 32px;
+        animation-delay: -0.8s;
+    }
+    .bookish-loading-animation div:nth-child(6) {
+        top: 32px;
+        left: 56px;
+        animation-delay: -1.2s;
+    }
+    .bookish-loading-animation div:nth-child(7) {
+        top: 56px;
+        left: 8px;
+        animation-delay: -0.8s;
+    }
+    .bookish-loading-animation div:nth-child(8) {
+        top: 56px;
+        left: 32px;
+        animation-delay: -1.2s;
+    }
+    .bookish-loading-animation div:nth-child(9) {
+        top: 56px;
+        left: 56px;
+        animation-delay: -1.6s;
+    }
+
+    @keyframes bookish-loading {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.5;
+        }
+    }
+</style>

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

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  LoadingProps */
 /** @typedef {typeof __propDef.events}  LoadingEvents */
 /** @typedef {typeof __propDef.slots}  LoadingSlots */
-export default class Loading extends SvelteComponentTyped<{}, {
+export default class Loading extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -10,7 +12,9 @@ export type LoadingEvents = typeof __propDef.events;
 export type LoadingSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };