bookish-press 0.4.1 → 0.4.16

package/components/page/Media.svelte

@@ -1,17 +1,20 @@
-<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 Format from '../chapter/Format.svelte';
-import MediaPreview from "./MediaPreview.svelte";
-import { onMount } from "svelte";
-import { getEdition, isEditable } from "./Contexts";
+import MediaPreview from './MediaPreview.svelte';
+import { onMount } from 'svelte';
+import { getBook, getEdition, isEditable } from './Contexts';
+import Button from '../app/Button.svelte';
+import PageHeader from './PageHeader.svelte';
+let book = getBook();
 let edition = getEdition();
 let editable = isEditable();
 let images = [];
-$: embeds = $edition.getEmbeds();
-$: media = $edition.getBook()?.getMedia();
+$: embeds = $edition?.getEmbeds() ?? [];
+$: media = $book?.getMedia();
 function updateImages(newImages) {
     images = newImages;
 }
@@ -20,57 +23,80 @@ onMount(() => {
     media?.notify(updateImages);
     return () => media?.stopNotifying(updateImages);
 });
-$: unused = images?.filter(image => embeds.find(embed => embed.getURL() === image.url) === undefined);
+$: unused = images?.filter((image) => embeds.find((embed) => embed.getURL() === image.url) === undefined);
 </script>
 
-<Page  title={`${$edition.getTitle()} - Media`}>
-    <Header 
-        label="Media title"
-        getImage={() => $edition.getImage(ChapterIDs.MediaID)}
-        setImage={(embed) => $edition.setImage(ChapterIDs.MediaID, embed)}
-        header="Media"
-        tags={$edition.getTags()}
-    >
-        <Outline
-            slot="outline"
-            previous={$edition.getPreviousChapterID(ChapterIDs.MediaID)}
-            next={$edition.getNextChapterID(ChapterIDs.MediaID)}
-        />
-    </Header>
-    <Instructions>
-        This page shows readers an index of the media in the book.
-        Writers can use this page to manage any images that are linked or uploaded for this book.
-        Note: images are shared between all editions, so if you delete one not used in this edition,
-        it might be used in others.
-    </Instructions>
-
-    {#if embeds.length === 0}
-        <p>No images or videos appear in the book.</p>
-    {:else}
-        <p>These are the images and videos in the book:</p>
-    {/if}
-    {#each embeds as embed }
-        <MediaPreview 
-            url={embed.getSmallURL()} 
-            alt={embed.getDescription()}
+{#if $edition}
+    <Page title={`${$edition.getTitle()} - Media`}>
+        <Header
+            label="Media title"
+            getImage={() => $edition?.getImage(ChapterIDs.MediaID) ?? null}
+            setImage={(embed) =>
+                $edition
+                    ? edition.set($edition.withImage(ChapterIDs.MediaID, embed))
+                    : undefined}
+            header="Media"
+            tags={$edition.getTags()}
         >
-            <span>{editable ? (images && images.find(i => i.url === embed.getURL()) === undefined) ? "linked" : "uploaded" : null }{embed.getCredit().isEmptyText() ? null : " • "}<Format node={embed.getCredit()}/></span>
-        </MediaPreview>
-    {/each}
-    {#if editable !== undefined && unused !== undefined && unused.length > 0 }
-        <h2>Unused</h2>
+            <Outline
+                slot="outline"
+                previous={$edition.getPreviousChapterID(ChapterIDs.MediaID)}
+                next={$edition.getNextChapterID(ChapterIDs.MediaID)}
+            />
+        </Header>
         <Instructions>
-            These images are uploaded to this book, but not used.
-            Delete them if you don't need them.
-            Note, however, that these images may be used in other editions of this book.
+            This page shows readers an index of the media in the book. Writers
+            can use this page to manage any images that are linked or uploaded
+            for this book. Note: images are shared between all editions, so if
+            you delete one not used in this edition, it might be used in others.
         </Instructions>
-        {#each unused as image }
+
+        {#if embeds.length === 0}
+            <p>No images or videos appear in the book.</p>
+        {:else}
+            <p>These are the images and videos in the book:</p>
+        {/if}
+        {#each embeds as embed}
             <MediaPreview
-                url={image.url}
-                alt={""}
+                url={embed.getSmallURL()}
+                alt={embed.getDescription() === ''
+                    ? 'no description, image not used'
+                    : embed.getDescription()}
             >
-                <span>uploaded <button on:click={() => media?.remove(image).then(images => updateImages(images))}>x</button></span>
+                <span
+                    >{#if editable}{images &&
+                        images.find((i) => i.url === embed.getURL()) ===
+                            undefined
+                            ? 'linked'
+                            : 'uploaded'}{embed.getCredit().isEmptyText()
+                            ? ''
+                            : ' • '}{/if}<Format
+                        node={embed.getCredit()}
+                    /></span
+                >
             </MediaPreview>
         {/each}
-    {/if}
-</Page>
+        {#if editable && unused !== undefined && unused.length > 0}
+            <PageHeader id="unused">Unused</PageHeader>
+            <Instructions>
+                These images are uploaded to this book, but not used. Delete
+                them if you don't need them. Note, however, that these images
+                may be used in other editions of this book.
+            </Instructions>
+            {#each unused as image}
+                <MediaPreview url={image.url} alt={''}>
+                    <span
+                        >uploaded <Button
+                            tooltip="delete this unused image"
+                            command={() =>
+                                media
+                                    ?.remove(image)
+                                    .then((images) => updateImages(images))}
+                            >- image</Button
+                        ></span
+                    >
+                </MediaPreview>
+            {/each}
+        {/if}
+    </Page>
+{/if}

package/components/page/Media.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 MediaProps = typeof __propDef.props;
-export declare type MediaEvents = typeof __propDef.events;
-export declare type MediaSlots = typeof __propDef.slots;
+export type MediaProps = typeof __propDef.props;
+export type MediaEvents = typeof __propDef.events;
+export type MediaSlots = typeof __propDef.slots;
 export default class Media extends SvelteComponentTyped<MediaProps, MediaEvents, MediaSlots> {
 }
 export {};

package/components/page/MediaPreview.svelte

@@ -1,11 +1,29 @@
 <script>export let url;
 export let alt;
 </script>
-    
-<span class={"bookish-figure-preview"}>
-    <img 
-        src={url} 
-        alt={alt}
-    />
-    <div class="bookish-figure-credit"><slot></slot></div>
-</span>
+
+<figure class={'media-preview'}>
+    <img src={url} {alt} />
+    <figcaption class="credit"><slot /></figcaption>
+</figure>
+
+<style>
+    .media-preview {
+        display: inline-block;
+        width: 10rem;
+        margin: 1em;
+        vertical-align: bottom;
+    }
+
+    .media-preview img {
+        width: 100%;
+        height: auto;
+    }
+
+    .credit {
+        display: block;
+        text-align: right;
+        font-style: italic;
+        font-size: var(--bookish-small-font-size);
+    }
+</style>

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

@@ -11,9 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type MediaPreviewProps = typeof __propDef.props;
-export declare type MediaPreviewEvents = typeof __propDef.events;
-export declare type MediaPreviewSlots = typeof __propDef.slots;
+export type MediaPreviewProps = typeof __propDef.props;
+export type MediaPreviewEvents = typeof __propDef.events;
+export type MediaPreviewSlots = typeof __propDef.slots;
 export default class MediaPreview extends SvelteComponentTyped<MediaPreviewProps, MediaPreviewEvents, MediaPreviewSlots> {
 }
 export {};

package/components/page/Muted.svelte

@@ -0,0 +1,10 @@
+<span class="muted"><slot /></span>
+
+<style>
+    /* TYPOGRAPHY */
+    .muted {
+        color: var(--bookish-muted-color);
+        font-weight: normal;
+        font-size: var(--bookish-block-font-size);
+    }
+</style>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  MutedProps */
+/** @typedef {typeof __propDef.events}  MutedEvents */
+/** @typedef {typeof __propDef.slots}  MutedSlots */
+export default class Muted extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MutedProps = typeof __propDef.props;
+export type MutedEvents = typeof __propDef.events;
+export type MutedSlots = 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/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>