bookish-press 0.4.46 → 0.4.47

package/{components → src/lib/components}/page/Index.svelte

@@ -1,44 +1,51 @@
-<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, 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() ?? {};
-let letters = {};
-// Figure out what letters have words
-$: {
-    for (const word of Object.keys(bookIndex).sort((a, b) => a.localeCompare(b)))
-        letters[word.charAt(0).toLocaleLowerCase()] = true;
-}
-let words = [];
-$: {
-    words = [];
-    let count = 0;
-    Object.keys(bookIndex)
-        .sort((a, b) => a.localeCompare(b))
-        .forEach((word) => {
-        const firstLetter = word.charAt(0).toLowerCase();
-        if (letter === firstLetter) {
-            count++;
-            if (count % 20 === 0)
-                words.push(true);
-            words.push(word);
-        }
-    });
-}
+<script lang="ts">
+    import Header from '$lib/components/page/Header.svelte';
+    import Outline from '$lib/components/page/Outline.svelte';
+    import Page from '$lib/components/page/Page.svelte';
+    import Instructions from '$lib/components/page/Instructions.svelte';
+    import ChapterIDs from '$lib/models/book/ChapterID';
+    import Link from '$lib/components/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() ?? {};
+
+    let letters: Record<string, boolean> = {};
+    // Figure out what letters have words
+    $: {
+        for (const word of Object.keys(bookIndex).sort((a, b) =>
+            a.localeCompare(b)
+        ))
+            letters[word.charAt(0).toLocaleLowerCase()] = true;
+    }
+
+    let words: (string | true)[] = [];
+    $: {
+        words = [];
+        let count = 0;
+        Object.keys(bookIndex)
+            .sort((a, b) => a.localeCompare(b))
+            .forEach((word) => {
+                const firstLetter = word.charAt(0).toLowerCase();
+                if (letter === firstLetter) {
+                    count++;
+                    if (count % 20 === 0) words.push(true);
+                    words.push(word);
+                }
+            });
+    }
 </script>
 
 {#if $edition}

package/{components → src/lib/components}/page/Instructions.svelte

@@ -1,4 +1,5 @@
-<script>export let editable;
+<script lang="ts">
+    export let editable: boolean;
 </script>
 
 {#if editable}

package/{components → src/lib/components}/page/License.svelte

@@ -1,12 +1,20 @@
-<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 { getUser, getEdition, getLeasee, isEditionEditable, lease, } from './Contexts';
-import PageHeader from './PageHeader.svelte';
-let auth = getUser();
-let edition = getEdition();
-let editable = isEditionEditable();
+<script lang="ts">
+    import Parser from '$lib/models/chapter/Parser';
+    import BookishEditor from '$lib/components/editor/BookishEditor.svelte';
+    import Instructions from '$lib/components/page/Instructions.svelte';
+    import Format from '$lib/components/chapter/Format.svelte';
+    import {
+        getUser,
+        getEdition,
+        getLeasee,
+        isEditionEditable,
+        lease,
+    } from './Contexts';
+    import PageHeader from './PageHeader.svelte';
+
+    let auth = getUser();
+    let edition = getEdition();
+    let editable = isEditionEditable();
 </script>
 
 <PageHeader id="license">License</PageHeader>

package/{components → src/lib/components}/page/Media.svelte

@@ -1,30 +1,47 @@
-<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 Format from '../chapter/Format.svelte';
-import MediaPreview from './MediaPreview.svelte';
-import { onMount } from 'svelte';
-import { getBase, getBook, getEdition, isBookEditable, isEditionEditable, } from './Contexts';
-import Button from '../app/Button.svelte';
-import PageHeader from './PageHeader.svelte';
-let book = getBook();
-let edition = getEdition();
-let editable = isBookEditable();
-let base = getBase();
-let images = [];
-$: embeds = $edition?.getEmbeds() ?? [];
-$: media = $book?.getMedia();
-function updateImages(newImages) {
-    images = newImages;
-}
-onMount(() => {
-    // Listen to image changes.
-    media?.notify(updateImages);
-    return () => media?.stopNotifying(updateImages);
-});
-$: unused = images?.filter((image) => embeds.find((embed) => embed.getURL() === image.url) === undefined);
+<script lang="ts">
+    import Header from '$lib/components/page/Header.svelte';
+    import Outline from '$lib/components/page/Outline.svelte';
+    import type { Image } from '$lib/models/book/BookMedia';
+    import Page from '$lib/components/page/Page.svelte';
+    import Instructions from '$lib/components/page/Instructions.svelte';
+    import ChapterIDs from '$lib/models/book/ChapterID';
+    import Format from '$lib/components/chapter/Format.svelte';
+    import MediaPreview from './MediaPreview.svelte';
+    import { onMount } from 'svelte';
+    import {
+        getBase,
+        getBook,
+        getEdition,
+        isBookEditable,
+        isEditionEditable,
+    } from './Contexts';
+    import Button from '../app/Button.svelte';
+    import PageHeader from './PageHeader.svelte';
+
+    let book = getBook();
+    let edition = getEdition();
+    let editable = isBookEditable();
+    let base = getBase();
+
+    let images: Image[] | undefined = [];
+
+    $: embeds = $edition?.getEmbeds() ?? [];
+    $: media = $book?.getMedia();
+
+    function updateImages(newImages: Image[] | undefined) {
+        images = newImages;
+    }
+
+    onMount(() => {
+        // Listen to image changes.
+        media?.notify(updateImages);
+        return () => media?.stopNotifying(updateImages);
+    });
+
+    $: unused = images?.filter(
+        (image) =>
+            embeds.find((embed) => embed.getURL() === image.url) === undefined
+    );
 </script>
 
 {#if $edition}

package/{components → src/lib/components}/page/MediaPreview.svelte

@@ -1,5 +1,6 @@
-<script>export let url;
-export let alt;
+<script lang="ts">
+    export let url: string;
+    export let alt: string;
 </script>
 
 <figure class={'media-preview'}>

package/{components → src/lib/components}/page/Outline.svelte

@@ -1,119 +1,149 @@
-<script>import { isMobile } from '../../util/isMobile';
-import { onMount } from 'svelte';
-import Link from '../Link.svelte';
-import { getBase, getDarkMode } from './Contexts';
-export let previous;
-export let next;
-export let collapse = false;
-export let listener = undefined;
-let headerString = null;
-let headerIndex = -1;
-let expanded = false;
-let dark = getDarkMode();
-let base = getBase();
-let outline = null;
-let headers = [];
-function toggleExpanded() {
-    // Don't toggle when in margin mode.
-    if (!isMobile())
-        return;
-    const newExpanded = !expanded;
-    // Toggle expanded state
-    expanded = newExpanded;
-    if (listener)
-        listener(newExpanded, layout);
-}
-function toggleReadingMode() {
-    dark.set(!$dark);
-}
-function layout() {
-    position();
-    highlight();
-    updateHeaders();
-}
-function updateHeaders() {
-    // When the outline updates (due to the page its on updating), generate a unique string for the current header outline.
-    // If it's different from the last rendered state, refresh.
-    headers = Array.from(document.getElementsByClassName('page-header'));
-    let newHeaderString = headers.reduce((sum, el) => sum + el.outerHTML, '');
-    // If the headers change, update the outline.
-    if (headerString !== newHeaderString)
-        headerString = newHeaderString;
-}
-function getHighlightThreshold() {
-    return window.innerHeight / 3;
-}
-function position() {
-    // Left align the floating outline with the left margin of the chapter
-    // and the top of the title, unless we're past it.
-    let title = document.getElementsByClassName('bookish-chapter-header-text')[0];
-    // If we found them both...
-    if (outline && title) {
-        // If so, remove the inline position so the footer CSS applies.
-        if (isMobile()) {
-            outline.style.removeProperty('margin-top');
-        }
-        // If not, set the position of the outline.
-        else {
-            let titleY = title.getBoundingClientRect().top + window.scrollY;
-            // If the title is off screen, anchor it to the top of the window. (CSS is set to do this).
-            if (titleY - 50 < window.scrollY) {
-                outline.classList.add('outline-fixed-left');
-                outline.classList.remove('outline-title-left');
+<script lang="ts">
+    import { isMobile } from '$lib/util/isMobile';
+    import { onMount } from 'svelte';
+    import Link from '$lib/components/Link.svelte';
+    import { getBase, getDarkMode } from './Contexts';
+
+    export let previous: string | null;
+    export let next: string | null;
+    export let collapse = false;
+    export let listener:
+        | ((expanded: boolean, layout: Function) => void)
+        | undefined = undefined;
+
+    let headerString: string | null = null;
+    let headerIndex = -1;
+    let expanded = false;
+    let dark = getDarkMode();
+    let base = getBase();
+    let outline: HTMLElement | null = null;
+    let headers: Element[] = [];
+
+    function toggleExpanded() {
+        // Don't toggle when in margin mode.
+        if (!isMobile()) return;
+
+        const newExpanded = !expanded;
+
+        // Toggle expanded state
+        expanded = newExpanded;
+
+        if (listener) listener(newExpanded, layout);
+    }
+
+    function toggleReadingMode() {
+        dark.set(!$dark);
+    }
+
+    function layout() {
+        position();
+        highlight();
+        updateHeaders();
+    }
+
+    function updateHeaders() {
+        // When the outline updates (due to the page its on updating), generate a unique string for the current header outline.
+        // If it's different from the last rendered state, refresh.
+        headers = Array.from(document.getElementsByClassName('page-header'));
+        let newHeaderString = headers.reduce(
+            (sum, el) => sum + el.outerHTML,
+            ''
+        );
+
+        // If the headers change, update the outline.
+        if (headerString !== newHeaderString) headerString = newHeaderString;
+    }
+
+    function getHighlightThreshold() {
+        return window.innerHeight / 3;
+    }
+
+    function position() {
+        // Left align the floating outline with the left margin of the chapter
+        // and the top of the title, unless we're past it.
+        let title = document.getElementsByClassName(
+            'bookish-chapter-header-text'
+        )[0];
+
+        // If we found them both...
+        if (outline && title) {
+            // If so, remove the inline position so the footer CSS applies.
+            if (isMobile()) {
+                outline.style.removeProperty('margin-top');
             }
-            // Otherwise, anchor it to the title position.
+            // If not, set the position of the outline.
             else {
-                outline.classList.remove('outline-fixed-left');
-                outline.classList.add('outline-title-left');
+                let titleY = title.getBoundingClientRect().top + window.scrollY;
+                // If the title is off screen, anchor it to the top of the window. (CSS is set to do this).
+                if (titleY - 50 < window.scrollY) {
+                    outline.classList.add('outline-fixed-left');
+                    outline.classList.remove('outline-title-left');
+                }
+                // Otherwise, anchor it to the title position.
+                else {
+                    outline.classList.remove('outline-fixed-left');
+                    outline.classList.add('outline-title-left');
+                }
+
+                // Tell any listeners about the repositioning.
+                if (listener) listener(false, layout);
             }
-            // Tell any listeners about the repositioning.
-            if (listener)
-                listener(false, layout);
         }
     }
-}
-function highlight() {
-    const top = window.scrollY;
-    const threshold = getHighlightThreshold();
-    // Find the header that we're past so we can update the outline.
-    let indexOfNearestHeaderAbove = -1; // -1 represents the title
-    Array.from(document.getElementsByClassName('page-header')).forEach((header, index) => {
-        // Is this a header we care about?
-        if (header.tagName === 'H1' ||
-            header.tagName === 'H2' ||
-            header.tagName === 'H3') {
-            let rect = header.getBoundingClientRect();
-            let headerTop = rect.y + top - rect.height;
-            // Are we past this header?
-            if (top > headerTop - threshold)
-                indexOfNearestHeaderAbove = index;
-        }
+
+    function highlight() {
+        const top = window.scrollY;
+        const threshold = getHighlightThreshold();
+
+        // Find the header that we're past so we can update the outline.
+        let indexOfNearestHeaderAbove = -1; // -1 represents the title
+        Array.from(document.getElementsByClassName('page-header')).forEach(
+            (header, index) => {
+                // Is this a header we care about?
+                if (
+                    header.tagName === 'H1' ||
+                    header.tagName === 'H2' ||
+                    header.tagName === 'H3'
+                ) {
+                    let rect = header.getBoundingClientRect();
+                    let headerTop = rect.y + top - rect.height;
+                    // Are we past this header?
+                    if (top > headerTop - threshold)
+                        indexOfNearestHeaderAbove = index;
+                }
+            }
+        );
+
+        // Update the outline and progress bar.
+        headerIndex = indexOfNearestHeaderAbove;
+    }
+
+    onMount(() => {
+        window.addEventListener('resize', layout);
+        window.addEventListener('scroll', layout);
+
+        // This is a bit hacky: we update the headers on every selection change so we
+        // can detect any header changes during editing. This isn't necessary during
+        // reading, and is only necessary when a header is created, updated, or removed,
+        // but we don't have a precise mechanism to listen to chapter changes, so we do this instead.
+        document.addEventListener('selectionchange', updateHeaders);
+
+        // Position outline after first render.
+        layout();
+
+        // Stop listening!
+        return () => {
+            window.removeEventListener('scroll', layout);
+            window.removeEventListener('resize', layout);
+            document.removeEventListener('selectionchange', updateHeaders);
+        };
     });
-    // Update the outline and progress bar.
-    headerIndex = indexOfNearestHeaderAbove;
-}
-onMount(() => {
-    window.addEventListener('resize', layout);
-    window.addEventListener('scroll', layout);
-    // This is a bit hacky: we update the headers on every selection change so we
-    // can detect any header changes during editing. This isn't necessary during
-    // reading, and is only necessary when a header is created, updated, or removed,
-    // but we don't have a precise mechanism to listen to chapter changes, so we do this instead.
-    document.addEventListener('selectionchange', updateHeaders);
-    // Position outline after first render.
-    layout();
-    // Stop listening!
-    return () => {
-        window.removeEventListener('scroll', layout);
-        window.removeEventListener('resize', layout);
-        document.removeEventListener('selectionchange', updateHeaders);
-    };
-});
-let previousLabel = '\u25C0\uFE0E';
-let nextLabel = '\u25B6\uFE0E';
-let expandLabel = '\u2630';
-let lightLabel = '\u263C';
-let darkLabel = '\u263E';
+
+    let previousLabel = '\u25C0\uFE0E';
+    let nextLabel = '\u25B6\uFE0E';
+    let expandLabel = '\u2630';
+    let lightLabel = '\u263C';
+    let darkLabel = '\u263E';
 </script>
 
 <nav

package/src/lib/components/page/Page.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import Loading from '$lib/components/page/Loading.svelte';
+
+    export let title: string;
+    export let afterLoaded: Function | undefined = undefined;
+
+    let loaded = false;
+    let lastHeight = 0;
+    let intervalID: NodeJS.Timer | null = null;
+    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
+        ) {
+            // Stop watching the images
+            stopWatching();
+            // Set to loaded to hide the overlay and notify callback if there is one.
+            loaded = true;
+            if (afterLoaded) afterLoaded();
+        }
+
+        // Remember the last height
+        lastHeight = bodyHeight;
+    }
+
+    function stopWatching() {
+        if (intervalID) clearInterval(intervalID);
+    }
+
+    onMount(() => {
+        // Watch the height of the document and wait until it's been stable for a while before scrolling
+        // to any targets. We use the data below to monitor the document height over time.
+        intervalID = setInterval(() => watchLoading(), 50);
+
+        return () => stopWatching();
+    });
+
+    function imagesAreLoaded() {
+        let done = true;
+        Array.from(document.getElementsByTagName('img')).forEach((el) => {
+            done = done && el.complete;
+        });
+        return done;
+    }
+</script>
+
+<svelte:head>
+    <title>{title}</title>
+    <meta name="description" content={title} />
+</svelte:head>
+
+<section class={'bookish-page' + (loaded ? ' loaded' : '')}>
+    <slot />
+</section>
+<!-- Overlay loading feedback if loading, but still render the page. -->
+{#if loaded === false}
+    <Loading />
+{/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 → src/lib/components}/page/PageHeader.svelte

@@ -1,4 +1,5 @@
-<script>export let id = null;
+<script lang="ts">
+    export let id: string | null = null;
 </script>
 
 <h2 class="page-header" {id}><slot /></h2>

package/src/lib/components/page/PossibleChapter.svelte

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

package/src/lib/components/page/PossibleReference.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import FormatNode from '$lib/models/chapter/FormatNode';
+    import type Ref from '$lib/models/book/Reference';
+    import Format from '../chapter/Format.svelte';
+    import Reference from './Reference.svelte';
+
+    export let node: FormatNode | Ref;
+</script>
+
+{#if node instanceof FormatNode}
+    <Format {node} />
+{:else}
+    <Reference reference={node} />
+{/if}

package/{components → src/lib/components}/page/Print.svelte

@@ -1,6 +1,8 @@
-<script>import Chapter from './Chapter.svelte';
-import { getEdition } from './Contexts';
-let edition = getEdition();
+<script lang="ts">
+    import Chapter from './Chapter.svelte';
+    import { getEdition } from './Contexts';
+
+    let edition = getEdition();
 </script>
 
 {#if $edition}