bookish-press 0.4.1 → 0.4.3

package/components/page/Outline.svelte

@@ -34,35 +34,37 @@ function layout() {
 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("bookish-header"));
-    let newHeaderString = headers.reduce((sum, el) => sum + el.outerHTML, "");
+    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 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];
+    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");
+            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("bookish-outline-fixed-left");
-                outline.classList.remove("bookish-outline-title-left");
+                outline.classList.add('outline-fixed-left');
+                outline.classList.remove('outline-title-left');
             }
             // Otherwise, anchor it to the title position.
             else {
-                outline.classList.remove("bookish-outline-fixed-left");
-                outline.classList.add("bookish-outline-title-left");
+                outline.classList.remove('outline-fixed-left');
+                outline.classList.add('outline-title-left');
             }
             // Tell any listeners about the repositioning.
             if (listener)
@@ -75,9 +77,11 @@ function highlight() {
     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("bookish-header")).forEach((header, index) => {
+    Array.from(document.getElementsByClassName('bookish-header')).forEach((header, index) => {
         // Is this a header we care about?
-        if (header.tagName === "H1" || header.tagName === "H2" || header.tagName === "H3") {
+        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?
@@ -91,83 +95,299 @@ function highlight() {
 onMount(() => {
     window.addEventListener('resize', layout);
     window.addEventListener('scroll', layout);
-    // This is a bit hacky: we update the headers on every selection change so we 
+    // 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);
+    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);
+        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>
 
-<div 
+<nav
     bind:this={outline}
-    class={"bookish-outline " + (!expanded || collapse ? "bookish-outline-collapsed": "bookish-outline-expanded")}
+    class={'outline ' +
+        (!expanded || collapse ? 'outline-collapsed' : 'outline-expanded')}
 >
-    <!-- Dark mode toggle -->
-    <div 
-        class="bookish-outline-reading-mode" 
-        role="button"
-        aria-label={$dark === true ? "Switch to light mode" : "Switch to dark mode"}
-        tabIndex=0
-        on:click={toggleReadingMode}
-        on:keydown={event => { 
-            if(event.key === "Enter" || event.key === " ") { 
-                toggleReadingMode(); 
-                event.stopPropagation();
-             }
-        }}
-    >
-        {$dark ? darkLabel : lightLabel}
-    </div>
     <!-- Visual cue of expandability, only visible in footer mode. -->
-    <div 
-        class={"bookish-outline-collapse-cue" + (headers.length === 0 ? " bookish-outline-collapse-cue-disabled" : "") }
-        role="button" 
-        aria-label={expanded ? "Collapse navigation menu" : "Expand navigation menu"}
-        tabIndex=0
-        on:click={headers.length > 0 ? toggleExpanded : undefined }
-        on:keydown={event => {
-            if(event.key === "Enter" || event.key === " ")
-                toggleExpanded()
+    <div
+        class={'outline-collapse-cue' +
+            (headers.length === 0 ? ' outline-collapse-cue-disabled' : '')}
+        role="button"
+        aria-label={expanded
+            ? 'Collapse navigation menu'
+            : 'Expand navigation menu'}
+        tabIndex="0"
+        on:click={headers.length > 0 ? toggleExpanded : undefined}
+        on:keydown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') toggleExpanded();
         }}
     >
-        { expandLabel }
+        {expandLabel}
     </div>
-    <div class="bookish-outline-headers">
-
+    <div class="outline-headers">
         <!-- Book navigation links -->
-        <div class="bookish-outline-header-nav">
-            {#if previous !== null}<Link to={base + "/" + previous}>{previousLabel}</Link>{:else}<span class="bookish-outline-header-nav-disabled">{previousLabel}</span>{/if}
+        <div class="outline-header-nav">
+            {#if previous !== null}<Link to={$base + previous}
+                    >{previousLabel}</Link
+                >{:else}<span class="outline-header-nav-disabled"
+                    >{previousLabel}</span
+                >{/if}
             &nbsp;&middot;&nbsp;
-            <Link to={base + "/"}>Home</Link>
+            <Link to={$base}>Home</Link>
             &nbsp;&middot;&nbsp;
-            {#if next !== null}<Link to={base + "/" + next}>{nextLabel}</Link>{:else}<span class="bookish-outline-header-nav-disabled">{nextLabel}</span>{/if}
+            {#if next !== null}<Link to={$base + next}>{nextLabel}</Link
+                >{:else}<span class="outline-header-nav-disabled"
+                    >{nextLabel}</span
+                >{/if}
         </div>
         <!--  Scan through the headers and add a properly formatted link for each. -->
-        {#each headers as header, index }
+        {#each headers as header, index}
             <!-- Assumes that all headers have an H1, H2, etc. tag. -->
-            {@const level = Number.parseInt(header.tagName.charAt(1)) }
+            {@const level = Number.parseInt(header.tagName.charAt(1))}
             <!-- Only h1, h2, and h3 headers... -->
-            {#if level <= 3 }
-                <Link to={"#" + header.id}>
-                    <div class={"bookish-outline-header bookish-outline-header-level-" + (level - 1) + (headerIndex === index ? " bookish-outline-header-active" : "")}>
+            {#if level <= 3}
+                <Link to={'#' + header.id}>
+                    <div
+                        class={'outline-header outline-header-level-' +
+                            (level - 1) +
+                            (headerIndex === index
+                                ? ' outline-header-active'
+                                : '')}
+                    >
                         {header.textContent}
                     </div>
                 </Link>
             {/if}
         {/each}
     </div>
-</div>
+    <!-- Dark mode toggle -->
+    <div
+        class="outline-reading-mode"
+        role="button"
+        aria-label={$dark === true
+            ? 'Switch to light mode'
+            : 'Switch to dark mode'}
+        tabIndex="0"
+        on:click={toggleReadingMode}
+        on:keydown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                toggleReadingMode();
+                event.stopPropagation();
+            }
+        }}
+    >
+        {$dark ? darkLabel : lightLabel}
+    </div>
+</nav>
+
+<style>
+    .outline {
+        font-family: var(--bookish-header-font-family);
+        font-weight: normal;
+        font-size: var(--bookish-paragraph-font-size);
+        color: var(--bookish-muted-color);
+        --outline-width: 12em;
+        --outline-padding: 1em;
+        --outline-offset: calc(
+            -1 * (var(--outline-width) + 3 * var(--outline-padding))
+        );
+    }
+
+    .outline-header-nav {
+        display: inline-block;
+        width: 100%;
+        padding-bottom: var(--outline-padding);
+    }
+
+    .outline-header {
+        display: block;
+        line-height: var(--bookish-paragraph-line-height-tight);
+        text-indent: 0;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .outline-header-level-0 {
+        font-size: 1rem;
+    }
+
+    .outline-header-level-1 {
+        font-size: 0.9rem;
+    }
+
+    .outline-header-level-2 {
+        font-size: 0.8rem;
+        font-style: italic;
+        margin-left: 1em;
+    }
+
+    :global(a .outline-header),
+    :global(.outline-header-nav a) {
+        color: var(--bookish-muted-color);
+    }
+
+    :global(a .outline-header-active),
+    :global(a:hover .outline-header) {
+        color: var(--bookish-paragraph-color);
+    }
+
+    .outline-header-nav-disabled {
+        opacity: 0.3;
+    }
+
+    :global(.outline a:hover) {
+        text-decoration: none;
+    }
+
+    /* Only apply this on devices with hover abilities. */
+    @media (hover: hover) {
+        :global(.outline a:hover) {
+            color: var(--bookish-paragraph-color);
+        }
+    }
+
+    :global(a .outline-header-active) {
+        color: var(--bookish-paragraph-color);
+    }
+
+    .outline-reading-mode {
+        transition: transform 0.2s ease-in;
+    }
+
+    .outline-reading-mode:hover {
+        cursor: pointer;
+        transform: scale(1.25, 1.25);
+        color: var(--bookish-paragraph-color);
+    }
+
+    /* Mobile */
+    @media screen and (max-width: 1200px) {
+        .outline {
+            position: fixed;
+            top: 100%; /* Put it all the way off screen on the bottom, then let JS translate */
+            left: 0;
+            right: 0;
+            width: 100%;
+            z-index: 2; /* Put it above content when it's a sheet in the footer */
+            border-top: 1px solid var(--bookish-border-color-light);
+            text-align: left;
+            transition: transform 0.2s ease-in;
+            background-color: var(--bookish-background-color);
+            box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.25);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            /* Cap height at window size. If the content is too tall, scroll it. */
+            max-height: 100%;
+            overflow-y: scroll;
+        }
+
+        /* Make a little centered box to store the outline to preserve its left aligned structure, while making it easier to click. */
+        .outline-headers {
+            width: 20em;
+            margin: auto;
+        }
+
+        .outline-header-nav {
+            text-align: center;
+            padding-top: 0.5em; /* Add some spacing when in the footer */
+            padding-bottom: 0.5em;
+            text-indent: 0 !important; /* Override header default */
+            font-size: 1.25rem !important;
+        }
+
+        .outline-reading-mode {
+            position: absolute;
+            top: 0.5em;
+            left: 0;
+            font-size: 1em;
+            display: inline-block;
+            padding-left: 1em;
+            padding-right: 1em;
+        }
+
+        .outline-collapse-cue {
+            position: absolute;
+            top: 0.5em;
+            right: 0;
+            font-size: 1em;
+            display: inline-block;
+            padding-left: 1em;
+            padding-right: 1em;
+            transition: transform 0.2s ease-in;
+        }
+
+        .outline-collapse-cue:hover {
+            cursor: pointer;
+            transform: scale(1.25, 1.25);
+            color: var(--bookish-paragraph-color);
+        }
+
+        .outline-collapse-cue-disabled {
+            display: none;
+        }
+
+        .outline-expanded .outline-collapse-cue {
+            transform: rotate(90deg);
+        }
+
+        .outline.outline-expanded {
+            transform: translateY(-100%);
+        }
+
+        .outline.outline-collapsed {
+            transform: translateY(-3rem);
+        }
+    }
+
+    /* Desktop */
+    @media screen and (min-width: 1200px) {
+        .outline {
+            width: var(--outline-width);
+            z-index: 0; /* Put it below everything when it's in the margin. */
+            border-right: 1px solid var(--bookish-border-color-light);
+            padding: var(--outline-padding);
+            background-color: var(--bookish-background-color);
+            margin-right: var(--outline-padding);
+        }
+
+        /* When the outline is fixed to the left, it's translated by it's width (with some padding). */
+        /* It's left position is set outline.js. This class is set by outline.js. */
+        .outline.outline-fixed-left {
+            position: fixed;
+            display: inline-block;
+            top: 50px;
+            transform: translateX(var(--outline-offset));
+        }
+
+        /* When the outline is fixed to title, it's positioned absolutely relative to the book container. */
+        /* We set a margin appropriate for it's width above. This class is set in Outline.tsx. */
+        .outline.outline-title-left {
+            position: absolute;
+            margin-left: var(--outline-offset);
+        }
+
+        .outline-collapse-cue {
+            display: none;
+        }
+
+        .outline-reading-mode {
+            position: absolute;
+            top: calc(var(--outline-padding));
+            right: calc(var(--outline-padding));
+        }
+    }
+</style>

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}