bookish-press 0.4.47 → 0.4.48

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

@@ -1,189 +0,0 @@
-<script lang="ts">
-    import type Theme from '$lib/models/book/Theme';
-    import type EditionModel from '$lib/models/book/Edition';
-    import smoothscroll from 'smoothscroll-polyfill';
-    import { goto } from '$app/navigation';
-    import { onMount, setContext } from 'svelte';
-    import { writable } from 'svelte/store';
-    import {
-        BASE,
-        DARK_MODE,
-        type BaseStore,
-        type DarkModeStore,
-    } from './Contexts';
-    import { BookishTheme } from '$lib/models/book/Theme';
-
-    // Poly fill smooth scrolling for Safari.
-    onMount(() => smoothscroll.polyfill());
-
-    // The book edition to render.
-    export let edition: EditionModel;
-
-    // The base path allows links to adjust to different routing contexts in which a book is placed.
-    // For example, when the book is hosted alone, all routes might start with the bare root "/",
-    // but when the book is being viewed or edited in the Bookish app, it needs a prefix for the
-    // route in the app.
-    export let base: string = '';
-
-    // When the base changes, update the context.
-    let baseStore = writable<string>(base);
-    $: setContext<BaseStore>(BASE, baseStore);
-    $: baseStore.set(base);
-
-    // Default dark mode to whatever's stored in local storage, if anything.
-    // respect user choice on the website despite the system theme
-    let darkMode = writable<boolean>(
-        typeof localStorage !== 'undefined' &&
-            localStorage.getItem('dark') !== 'false' &&
-            (localStorage.getItem('dark') === 'true' || // A previous setting
-                window.matchMedia('(prefers-color-scheme: dark)').matches) // Operating system is set to dark
-    );
-
-    // Expose dark mode to descendants
-    setContext<DarkModeStore>(DARK_MODE, darkMode);
-
-    // When dark mode changes, update the body's class list.
-    $: {
-        if (typeof document !== 'undefined') {
-            if ($darkMode) document.body.classList.add('dark');
-            else document.body.classList.remove('dark');
-            if (typeof localStorage !== 'undefined')
-                localStorage.setItem('dark', $darkMode ? 'true' : 'false');
-
-            // Set the theme, whatever it is, and change it when the edition changes
-            setTheme(edition.getTheme() ?? BookishTheme);
-        }
-    }
-
-    // Set the theme on mount.
-    onMount(() => {
-        setTheme(edition.getTheme() ?? BookishTheme);
-    });
-
-    // Redirect old hash routes by simply replacing their hash before routing.
-    if (typeof window !== 'undefined' && window.location.hash.startsWith('#/'))
-        goto(location.hash.replace('#', ''));
-
-    /** Given a theme, sets the appropriate CSS rules in the browser to apply the theme.*/
-    function setTheme(theme: Theme | null) {
-        // If the theme is being unset, make sure we've removed any overrding style declaration.
-        // This let's the default theme kick in.
-        let themeTagImports = document.getElementById('bookish-theme-imports');
-        let themeTagCSS = document.getElementById('bookish-theme');
-
-        // We only want to set it if it's actually different than what's currently set.
-        // Otherwise during editing we get lots of jittery changes on each edit, because the
-        // whole edition is rerendering. To check this, we set a data attribute on the style tag containing
-        // a stringify of the theme set. We do this separately for the imports, since they can have more
-        // major changes than the spacing and color sizes, changing fonts especially.
-        const themeTagCSSValue = themeTagCSS?.dataset.css;
-        const themeTagImportsValue = themeTagImports?.dataset.imports;
-        const newThemeTagCSSValue = JSON.stringify(theme);
-        const newThemeTagImportsValue = JSON.stringify(theme?.imports);
-
-        if (theme !== null) {
-            // If the imports changed, update theme.
-            if (themeTagImportsValue !== newThemeTagImportsValue) {
-                // If it's being set, create a new style tag.
-                const newThemeImportsTag = document.createElement('style');
-
-                // Give it an ID so we can remove it later.
-                newThemeImportsTag.setAttribute('id', 'bookish-theme-imports');
-                newThemeImportsTag.dataset.imports = newThemeTagImportsValue;
-
-                // Insert any import statements, then any rules.
-                const css = `${(theme.imports ?? [])
-                    .map((url) => `@import url(${url});`)
-                    .join('\n')}`;
-                newThemeImportsTag.appendChild(document.createTextNode(css));
-                document.head.appendChild(newThemeImportsTag);
-
-                // Remove the old tag
-                themeTagImports?.remove();
-            }
-
-            // If the rules changed, update them.
-            if (themeTagCSSValue !== newThemeTagCSSValue) {
-                // If it's being set, create a new style tag.
-                const newThemeCSSTag = document.createElement('style');
-
-                // Give it an ID so we can remove it later.
-                newThemeCSSTag.setAttribute('id', 'bookish-theme');
-                newThemeCSSTag.dataset.css = newThemeTagCSSValue;
-
-                // Insert any import statements, then any rules.
-                const css = `
-                    ${(theme.imports ?? [])
-                        .map((url) => `@import url(${url});`)
-                        .join('\n')}
-                    .bookish {
-                        ${theme.light ? toRules(theme.light) : ''}
-                        ${theme.fonts ? toRules(theme.fonts) : ''}
-                        ${theme.sizes ? toRules(theme.sizes) : ''}
-                        ${theme.weights ? toRules(theme.weights) : ''}
-                        ${theme.spacing ? toRules(theme.spacing) : ''}
-                    }
-                    .dark {
-                        ${theme.dark ? toRules(theme.dark) : ''}
-                    }`;
-                newThemeCSSTag.appendChild(document.createTextNode(css));
-                document.head.appendChild(newThemeCSSTag);
-
-                // Remove the old tag
-                themeTagCSS?.remove();
-            }
-        } else {
-            // Remove the old tags, unsetting the theme.
-            themeTagImports?.remove();
-            themeTagCSS?.remove();
-        }
-    }
-
-    function toRules(set: Record<string, string>) {
-        return Object.keys(set)
-            .map((name) => {
-                const value = set[name];
-                if (value.length > 0) {
-                    const cssVariable =
-                        '--bookish-' +
-                        name
-                            .replace(/([a-z])([A-Z])/g, '$1 $2')
-                            .split(' ')
-                            .map((s) => s.toLowerCase())
-                            .join('-')
-                            .replace(/([0-9])/g, '-$1-');
-                    return `${cssVariable}: ${value};`;
-                }
-            })
-            .join('\n\t\t');
-    }
-</script>
-
-<main class="bookish {$darkMode ? ' dark' : ''}">
-    <slot />
-</main>
-
-<style>
-    * {
-        box-sizing: border-box;
-    }
-
-    /* WINDOW AND PAGES */
-    :global(body) {
-        margin: 0;
-        padding: 0;
-        background-color: var(--bookish-background-color);
-    }
-
-    /* The root container for a book */
-    .bookish {
-        font-weight: var(--bookish-paragraph-font-weight);
-        font-family: var(--bookish-paragraph-font-family);
-        font-size: var(--bookish-paragraph-font-size);
-        background-color: var(--bookish-background-color);
-        color: var(--bookish-paragraph-color);
-        width: 100%;
-        z-index: 0;
-        text-align: left;
-    }
-</style>

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

@@ -1,123 +0,0 @@
-<script lang="ts">
-    import Loading from '$lib/components/page/Loading.svelte';
-    import Edition from '$lib/components/page/Edition.svelte';
-    import Feedback from '$lib/components/app/Feedback.svelte';
-    import {
-        getBook,
-        getEdition,
-        getUser,
-        CHAPTERTEXT,
-        getChapterText,
-    } from '$lib/components/page/Contexts';
-    import { onDestroy } from 'svelte';
-    import { page } from '$app/stores';
-    import type { Unsubscribe } from 'firebase/auth';
-    import { listenToChapters, listenToEdition } from '../../models/CRUD';
-
-    export let write: boolean;
-
-    let auth = getUser();
-    let book = getBook();
-    let edition = getEdition();
-    let chapterText = getChapterText();
-
-    let editionUnsub: Unsubscribe | undefined = undefined;
-    let chaptersUnsub: Unsubscribe | undefined = undefined;
-
-    let error: string | undefined = undefined;
-
-    function unsub() {
-        // Unsubscribe to the old edition document if we were listening to one.
-        if (editionUnsub) editionUnsub();
-        if (chaptersUnsub) chaptersUnsub();
-    }
-
-    function listen() {
-        unsub();
-
-        error = undefined;
-
-        // If we no longer have a book, we can't get an edition.
-        if ($book === undefined) {
-            edition.set(undefined);
-            error = 'Unknown book.';
-            return;
-        } else {
-            const editionNumber = $page.params.editionid;
-            const latestPublished = !write;
-
-            // Figure out which edition to load.
-            let editionID;
-            if (editionNumber === undefined) {
-                if (latestPublished) {
-                    editionID = $book.getLatestPublishedEditionID();
-                    if (editionID === undefined)
-                        error = 'There is no published edition of this book.';
-                } else {
-                    editionID = $book.getLatestEditionID();
-                }
-            } else {
-                editionID = $book.getEditionNumberID(parseFloat(editionNumber));
-                if (editionID === undefined)
-                    error = `There is no ${editionNumber} edition of this book`;
-            }
-
-            // Listen to the doc for changes and listen to all of its chapters.
-            if (editionID !== undefined) {
-                editionUnsub = listenToEdition(
-                    $book.ref.id,
-                    editionID,
-                    (ed) => {
-                        if (ed) {
-                            // Before setting the new edition, augmented it with the chapter text.
-                            edition.set(
-                                $chapterText
-                                    ? ed.withChapterText($chapterText)
-                                    : ed
-                            );
-                        } else {
-                            edition.set(undefined);
-                            error = 'Unable to load edition';
-                        }
-                    }
-                );
-
-                chaptersUnsub = listenToChapters(
-                    $book.ref.id,
-                    editionID,
-                    (chapters) => {
-                        // Update the chapter text store.
-                        chapterText.set(chapters);
-                        // Update the chapter text in the current edition.
-                        if ($edition)
-                            edition.set($edition.withChapterText(chapters));
-                    }
-                );
-            }
-        }
-    }
-
-    // Whenever the book or page changes, change the listener.
-    $: if ($page && $auth && $auth.user !== null) listen();
-
-    // When unmounted, unset the stores — no longer viewing a book.
-    onDestroy(() => {
-        edition.set(undefined);
-        unsub();
-    });
-</script>
-
-{#if $book === undefined || error}
-    <Feedback error>Unable to load edition.</Feedback>
-{:else if $edition === undefined}
-    <Loading />
-{:else}
-    <Edition
-        edition={$edition}
-        base={write
-            ? `/write/${$book.getRefID()}/${$edition.getEditionNumber()}`
-            : `/${$book.getSubdomain() ?? $book.getRefID()}`}
-    >
-        <slot />
-    </Edition>
-{/if}

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

@@ -1,94 +0,0 @@
-<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/src/lib/components/page/PossibleChapter.svelte

@@ -1,16 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-<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/src/lib/components/page/Search.svelte

@@ -1,153 +0,0 @@
-<script lang="ts">
-    import Header from './Header.svelte';
-    import Outline from './Outline.svelte';
-    import Page from './Page.svelte';
-    import Link from '../Link.svelte';
-    import Chapter from '$lib/models/book/Chapter';
-    import type { Match } from '$lib/models/book/Chapter';
-    import ChapterIDs from '$lib/models/book/ChapterID';
-    import { getBase, getEdition, isEditionEditable } from './Contexts';
-    import TextInput from '../app/TextInput.svelte';
-    import ChapterTitle from './ChapterTitle.svelte';
-    import ChapterNumber from './ChapterNumber.svelte';
-    import PageHeader from './PageHeader.svelte';
-
-    let edition = getEdition();
-    let base = getBase();
-
-    let query = '';
-
-    let results: (
-        | Chapter
-        | { link: string; left: string; match: string; right: string }
-    )[] = [];
-    $: {
-        // Reset the results
-        results = [];
-
-        const lowerQuery = query.toLowerCase();
-
-        query = query.trim();
-
-        // Go through all the chapter indexes and find matches.
-        if ($edition && query.length > 2)
-            for (const chapter of $edition?.getChapters() ?? []) {
-                let index = chapter.getIndex($edition);
-                // No index yet? Skip this chapter.
-                if (index) {
-                    // Build a DOM to render matches.
-                    const chapterMatches: Match[] = [];
-
-                    // What are all of the words in the index that match the query?
-                    for (const word of Object.keys(index)) {
-                        if (query.length > 0 && word.indexOf(lowerQuery) >= 0) {
-                            if (index) {
-                                let matches = index[word];
-                                matches.forEach((match: Match) => {
-                                    chapterMatches.push(match);
-                                });
-                            }
-                        }
-                    }
-
-                    if (chapterMatches.length > 0) {
-                        results.push(chapter);
-                        chapterMatches.forEach((match, index) => {
-                            // Only highlight the part of the word that matches.
-                            const start = match.match
-                                .toLowerCase()
-                                .indexOf(lowerQuery);
-                            results.push({
-                                link: `${$base}/${chapter.getID()}?word=${match.match.toLowerCase()}&number=${index}`,
-                                left:
-                                    match.left +
-                                    match.match.substring(0, start),
-                                match: match.match.substring(
-                                    start,
-                                    start + query.length
-                                ),
-                                right:
-                                    match.match.substring(
-                                        start + query.length
-                                    ) + match.right,
-                            });
-                        });
-                    }
-                }
-            }
-    }
-</script>
-
-{#if $edition}
-    <Page title={`${$edition.getTitle()} - Search`}>
-        <Header
-            editable={isEditionEditable()}
-            label="Search title"
-            getImage={() => $edition?.getImage(ChapterIDs.SearchID) ?? null}
-            setImage={(embed) =>
-                $edition
-                    ? edition.set(
-                          $edition.withImage(ChapterIDs.SearchID, embed)
-                      )
-                    : undefined}
-            header="Search"
-            id="search"
-            tags={$edition.getTags()}
-        >
-            <Outline
-                slot="outline"
-                previous={$edition.getPreviousChapterID(ChapterIDs.SearchID)}
-                next={$edition.getNextChapterID(ChapterIDs.SearchID)}
-            />
-        </Header>
-
-        <p>
-            Type a word—just a single word—and we'll show its occurrences in
-            this book:
-        </p>
-
-        <p>
-            <TextInput
-                type="text"
-                placeholder={'search for a word'}
-                disabled={false}
-                bind:text={query}
-            />
-        </p>
-
-        {#if query.trim() !== ''}
-            {#if query.trim().length < 3}
-                <p>Keep typing...</p>
-            {:else if results.length === 0}
-                <p>No occurrence of <em>{query}</em>.</p>
-            {:else}
-                <p
-                    >Found {results.filter(
-                        (result) => !(result instanceof Chapter)
-                    ).length} occurrences of <em>{query}</em>...</p
-                >
-                {#each results as result}
-                    {#if result instanceof Chapter}
-                        <PageHeader id={'header-' + result.getID()}
-                            ><ChapterNumber
-                                >Chapter{#if $edition.getChapterNumber(result.getID()) !== undefined}&nbsp;{$edition.getChapterNumber(
-                                        result.getID()
-                                    )}{/if}</ChapterNumber
-                            > - <ChapterTitle>{result.getTitle()}</ChapterTitle
-                            ></PageHeader
-                        >
-                    {:else}
-                        <p
-                            ><Link to={result.link}
-                                >...{result.left}<span
-                                    class="bookish-content-highlight"
-                                    >{result.match}</span
-                                >{result.right}...</Link
-                            ></p
-                        >
-                    {/if}
-                {/each}
-            {/if}
-        {/if}
-    </Page>
-{/if}

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

@@ -1,22 +0,0 @@
-<script lang="ts">
-    import EmbedNode from '$lib/models/chapter/EmbedNode';
-    import Parser from '$lib/models/chapter/Parser';
-    import { getBase, getEdition } from './Contexts';
-
-    export let embed: string | null;
-
-    let edition = getEdition();
-    let base = getBase();
-
-    $: embedNode = embed === null ? null : Parser.parseEmbed($edition, embed);
-</script>
-
-{#if embedNode instanceof EmbedNode}
-    <img
-        style="width: 5em"
-        src={embedNode.isLocal()
-            ? `${$base}/${embedNode.getSmallURL()}`
-            : embedNode.getSmallURL()}
-        alt={embedNode.getDescription()}
-    />
-{/if}

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

@@ -1,21 +0,0 @@
-<script lang="ts">
-    import PageHeader from './PageHeader.svelte';
-    import Rows from './Rows.svelte';
-    import ThemeVariableEditor from './ThemeVariableEditor.svelte';
-
-    export let header: string;
-    export let group: string;
-    export let properties: Record<string, string>;
-</script>
-
-<PageHeader>{header}</PageHeader>
-
-<Rows>
-    {#each Object.keys(properties).sort() as property}
-        <ThemeVariableEditor
-            {group}
-            name={property}
-            value={properties[property]}
-        />
-    {/each}
-</Rows>