bookish-press 0.4.0 → 0.4.16

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

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type OutlineProps = typeof __propDef.props;
-export declare type OutlineEvents = typeof __propDef.events;
-export declare type OutlineSlots = typeof __propDef.slots;
+export type OutlineProps = typeof __propDef.props;
+export type OutlineEvents = typeof __propDef.events;
+export type OutlineSlots = typeof __propDef.slots;
 export default class Outline extends SvelteComponentTyped<OutlineProps, OutlineEvents, OutlineSlots> {
 }
 export {};

package/components/page/Page.svelte

@@ -9,7 +9,8 @@ let mountTime = Date.now();
 function watchLoading() {
     const bodyHeight = document.body.clientHeight;
     // If the height hasn't changed and images are loaded OR it's been 2 seconds, load.
-    if ((lastHeight === bodyHeight && imagesAreLoaded()) || (Date.now() - mountTime) > 2000) {
+    if ((lastHeight === bodyHeight && imagesAreLoaded()) ||
+        Date.now() - mountTime > 2000) {
         // Stop watching the images
         stopWatching();
         // Set to loaded to hide the overlay and notify callback if there is one.
@@ -32,7 +33,7 @@ onMount(() => {
 });
 function imagesAreLoaded() {
     let done = true;
-    Array.from(document.getElementsByTagName("img")).forEach(el => {
+    Array.from(document.getElementsByTagName('img')).forEach((el) => {
         done = done && el.complete;
     });
     return done;
@@ -41,13 +42,43 @@ function imagesAreLoaded() {
 
 <svelte:head>
     <title>{title}</title>
-    <meta name="description" content={title}>
+    <meta name="description" content={title} />
 </svelte:head>
 
-{#if loaded === false }
-    <Loading/>
+{#if loaded === false}
+    <Loading />
 {:else}
-    <div class={"bookish-page" + (loaded ? " bookish-page-loaded": "")}>
-        <slot></slot>
-    </div>
-{/if}
+    <section class={'bookish-page' + (loaded ? ' loaded' : '')}>
+        <slot />
+    </section>
+{/if}
+
+<style>
+    /* A page, such as table of contents, chapter, or references */
+    .bookish-page {
+        max-width: 720px;
+
+        /* This helps marginals relative to the page */
+        position: relative;
+
+        /* To make room for navigation footer. Without this, the page is too short to show it. */
+        padding-left: var(--bookish-block-padding);
+        padding-right: var(--bookish-block-padding);
+        padding-bottom: 5em;
+
+        /* Center the application in the viewport */
+        margin-top: 0;
+        margin-left: auto;
+        margin-right: auto;
+
+        /* Hidden by default until tagged as loaded */
+        opacity: 0;
+        transition: opacity 0.25s ease-in;
+
+        z-index: 1;
+    }
+
+    .loaded {
+        opacity: 1;
+    }
+</style>

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

@@ -11,9 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type PageProps = typeof __propDef.props;
-export declare type PageEvents = typeof __propDef.events;
-export declare type PageSlots = typeof __propDef.slots;
+export type PageProps = typeof __propDef.props;
+export type PageEvents = typeof __propDef.events;
+export type PageSlots = typeof __propDef.slots;
 export default class Page extends SvelteComponentTyped<PageProps, PageEvents, PageSlots> {
 }
 export {};

package/components/page/PageHeader.svelte

@@ -0,0 +1,14 @@
+<script>export let id = null;
+</script>
+
+<h2 class="page-header" {id}><slot /></h2>
+
+<style>
+    h2 {
+        margin-top: var(--bookish-header-spacing);
+        font-family: var(--bookish-header-font-family);
+        font-weight: var(--bookish-header-font-weight);
+        line-height: var(--bookish-header-line-height);
+        font-size: var(--bookish-header-1-font-size);
+    }
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PageHeaderProps = typeof __propDef.props;
+export type PageHeaderEvents = typeof __propDef.events;
+export type PageHeaderSlots = typeof __propDef.slots;
+export default class PageHeader extends SvelteComponentTyped<PageHeaderProps, PageHeaderEvents, PageHeaderSlots> {
+}
+export {};

package/components/page/PageParagraph.svelte

@@ -0,0 +1,18 @@
+<p><slot /></p>
+
+<style>
+    p {
+        margin-top: var(--bookish-header-spacing);
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-paragraph-font-size);
+        color: var(--bookish-paragraph-color);
+
+        margin-top: var(--bookish-paragraph-spacing);
+        margin-bottom: var(--bookish-paragraph-spacing);
+
+        line-height: var(--bookish-paragraph-line-height);
+
+        /* Allow paragraphs to break on words to support small screens. */
+        word-break: break-word;
+    }
+</style>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  PageParagraphProps */
+/** @typedef {typeof __propDef.events}  PageParagraphEvents */
+/** @typedef {typeof __propDef.slots}  PageParagraphSlots */
+export default class PageParagraph extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PageParagraphProps = typeof __propDef.props;
+export type PageParagraphEvents = typeof __propDef.events;
+export type PageParagraphSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/page/PossibleChapter.svelte

@@ -1,14 +1,14 @@
-<script>import Chapter from "./Chapter.svelte";
-import { page } from "$app/stores";
-import { getEdition } from "./Contexts";
-import Unknown from "./Unknown.svelte";
+<script>import Chapter from './Chapter.svelte';
+import { page } from '$app/stores';
+import { getEdition } from './Contexts';
+import Unknown from './Unknown.svelte';
 $: edition = getEdition();
 $: chapterID = $page.params.chapterid;
-$: chapter = $edition.getChapter(chapterID);
+$: chapter = $edition?.getChapter(chapterID);
 </script>
 
 {#if chapter}
-    <Chapter chapter={chapter}/>
+    <Chapter {chapter} />
 {:else}
     <Unknown>This chapter doesn't exist...</Unknown>
-{/if}
+{/if}

package/components/page/PossibleChapter.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 PossibleChapterProps = typeof __propDef.props;
-export declare type PossibleChapterEvents = typeof __propDef.events;
-export declare type PossibleChapterSlots = typeof __propDef.slots;
+export type PossibleChapterProps = typeof __propDef.props;
+export type PossibleChapterEvents = typeof __propDef.events;
+export type PossibleChapterSlots = typeof __propDef.slots;
 export default class PossibleChapter extends SvelteComponentTyped<PossibleChapterProps, PossibleChapterEvents, PossibleChapterSlots> {
 }
 export {};

package/components/page/PossibleReference.svelte

@@ -1,16 +1,11 @@
-<script>import ErrorNode from "../../models/chapter/ErrorNode";
-import FormatNode from "../../models/chapter/FormatNode";
-import ErrorMessage from "../chapter/ErrorMessage.svelte";
-import Format from "../chapter/Format.svelte";
-import Reference from "./Reference.svelte";
+<script>import FormatNode from '../../models/chapter/FormatNode';
+import Format from '../chapter/Format.svelte';
+import Reference from './Reference.svelte';
 export let node;
 </script>
 
-
 {#if node instanceof FormatNode}
-    <Format node={node}/>
-{:else if node instanceof ErrorNode}
-    <ErrorMessage node={node}/>
+    <Format {node} />
 {:else}
-    <Reference node={node} />
-{/if}
+    <Reference reference={node} />
+{/if}

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

@@ -1,19 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-import ErrorNode from "../../models/chapter/ErrorNode";
-import FormatNode from "../../models/chapter/FormatNode";
-import type ReferenceNode from "../../models/chapter/ReferenceNode";
+import FormatNode from '../../models/chapter/FormatNode';
+import type Ref from '../../models/book/Reference';
 declare const __propDef: {
     props: {
-        node: FormatNode | ErrorNode | ReferenceNode;
+        node: FormatNode | Ref;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type PossibleReferenceProps = typeof __propDef.props;
-export declare type PossibleReferenceEvents = typeof __propDef.events;
-export declare type PossibleReferenceSlots = typeof __propDef.slots;
+export type PossibleReferenceProps = typeof __propDef.props;
+export type PossibleReferenceEvents = typeof __propDef.events;
+export type PossibleReferenceSlots = typeof __propDef.slots;
 export default class PossibleReference extends SvelteComponentTyped<PossibleReferenceProps, PossibleReferenceEvents, PossibleReferenceSlots> {
 }
 export {};

package/components/page/Print.svelte

@@ -3,6 +3,30 @@ import { getEdition } from './Contexts';
 let edition = getEdition();
 </script>
 
-{#each $edition.getChapters().filter(chapter => !chapter.isForthcoming()) as chapter }
-    <Chapter chapter={chapter} print />
-{/each}
+{#if $edition}
+    {#each $edition
+        .getChapters()
+        .filter((chapter) => !chapter.isForthcoming()) as chapter}
+        <Chapter {chapter} print />
+    {/each}
+{/if}
+
+<style>
+    @media print {
+        :global(.bookish-chapter-header) {
+            break-before: page;
+        }
+
+        :global(body) {
+            font-size: 16pt;
+        }
+
+        @page {
+            margin: 1in;
+        }
+
+        :global(h1, h2, h3, h4, h5, h6) {
+            break-after: avoid !important;
+        }
+    }
+</style>

package/components/page/Print.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 PrintProps = typeof __propDef.props;
-export declare type PrintEvents = typeof __propDef.events;
-export declare type PrintSlots = typeof __propDef.slots;
+export type PrintProps = typeof __propDef.props;
+export type PrintEvents = typeof __propDef.events;
+export type PrintSlots = typeof __propDef.slots;
 export default class Print extends SvelteComponentTyped<PrintProps, PrintEvents, PrintSlots> {
 }
 export {};