bookish-press 0.4.231 → 0.5.0

package/{components → package/components}/Auth.svelte

@@ -1,8 +1,8 @@
 <script>import { sendSignInLinkToEmail } from 'firebase/auth';
-import { onMount, setContext } from 'svelte';
+import { onDestroy, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { auth } from '../models/Firebase';
-import { AUTH } from './page/Contexts';
+import { USER } from './page/Contexts';
 // Track the user and user loading status in state
 let loading = true;
 // The store that tracks the auth context.
@@ -37,18 +37,16 @@ function logout() {
     }
 }
 // On mount, subscribe to authentication changes.
-onMount(() => {
-    if (auth) {
-        const unsubscribe = auth.onAuthStateChanged((user) => {
-            loading = false;
-            updateAuth(user);
-        });
-        // On unmount, stop subscribing.
-        return unsubscribe;
-    }
-});
+if (auth) {
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+        loading = false;
+        updateAuth(user);
+    });
+    // On unmount, stop subscribing.
+    onDestroy(unsubscribe);
+}
 // Expose the state and the login/logout functionality.
-setContext(AUTH, authentication);
+setContext(USER, authentication);
 </script>
 
 <!-- Wrap whatever children are given in this context. -->

package/{components → package/components}/BookPreview.svelte

@@ -1,37 +1,33 @@
 <script>import EmbedNode from '../models/chapter/EmbedNode';
 import Parser from '../models/chapter/Parser';
-import ErrorNode from '../models/chapter/ErrorNode';
 import ChapterBody from './chapter/ChapterBody.svelte';
 import Embed from './chapter/Embed.svelte';
-import ErrorMessage from './chapter/ErrorMessage.svelte';
 import Link from './app/Link.svelte';
 export let book;
 export let write = false;
-$: refID = book.getRefID();
+$: refID = book.getID();
 $: cover = book.getCover();
 $: authors = book.getAuthors();
 $: description = book.getDescription();
 $: subdomain = book.getSubdomain();
-$: title = book.getTitle() === '' ? 'Untitled' : book.getTitle();
+$: title = book.getTitle();
 $: embed = cover === null ? null : Parser.parseEmbed(undefined, cover);
+$: url =
+    subdomain === null || write
+        ? refID === undefined
+            ? ''
+            : (write ? '/write/' : '/') + refID
+        : `/${subdomain}`;
 </script>
 
 <article class="book-preview">
     <div class="cover" class:empty={embed === null}>
         {#if embed instanceof EmbedNode}
-            <Embed node={embed} imageOnly />
-        {:else if embed instanceof ErrorNode}
-            <ErrorMessage node={embed} />
+            <Embed node={embed} imageOnly editable={false} />
         {/if}
     </div>
     <div class="content">
-        <Link
-            to={subdomain === undefined || write
-                ? refID === undefined
-                    ? ''
-                    : (write ? '/write/' : '/') + refID
-                : `/${subdomain}`}><h2 class="title">{title}</h2></Link
-        >
+        <Link to={url}><h2 class="title">{title}</h2></Link>
         <p class="authors">
             {#each authors as author, index}
                 <span
@@ -41,7 +37,7 @@ $: embed = cover === null ? null : Parser.parseEmbed(undefined, cover);
                 <em>No authors</em>
             {/each}
         </p>
-        <p class="description">
+        <div class="description">
             {#if description.length === 0}
                 <em>No description</em>
             {:else}
@@ -49,7 +45,8 @@ $: embed = cover === null ? null : Parser.parseEmbed(undefined, cover);
                     node={Parser.parseChapter(undefined, description)}
                 />
             {/if}
-        </p>
+        </div>
+        <Link to={`${url}/editions`}>Editions</Link>
     </div>
 </article>
 
@@ -100,6 +97,5 @@ $: embed = cover === null ? null : Parser.parseEmbed(undefined, cover);
         margin-top: 0;
         overflow: hidden;
         text-overflow: ellipsis;
-        height: 5em;
     }
 </style>

package/{components → package/components}/Link.svelte

@@ -1,5 +1,6 @@
 <script>import { page } from '$app/stores';
 export let to;
+export let linked = true;
 let link;
 function scroll(event) {
     // No element? Bail.
@@ -27,7 +28,7 @@ function scroll(event) {
 }
 </script>
 
-{#if $page.url.pathname === (to.charAt(to.length - 1) === '/' ? to.substring(0, to.length - 1) : to)}
+{#if !linked || $page.url.pathname === (to.charAt(to.length - 1) === '/' ? to.substring(0, to.length - 1) : to)}
     <slot />
 {:else}
     <a

package/{components → package/components}/Link.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         to: string;
+        linked?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/{components → package/components}/app/Button.svelte

@@ -24,7 +24,10 @@ export let command;
         font-size: var(--app-chrome-font-size);
         color: var(--app-font-color);
         background-color: var(--app-chrome-background);
-        padding: var(--app-chrome-padding);
+        padding-left: var(--app-chrome-padding);
+        padding-right: var(--app-chrome-padding);
+        padding-top: calc(var(--app-chrome-padding) / 2);
+        padding-bottom: calc(var(--app-chrome-padding) / 2);
         border-radius: var(--app-chrome-roundedness);
         border: none;
     }
@@ -36,7 +39,7 @@ export let command;
     }
 
     button:disabled {
-        opacity: 0.3;
+        opacity: 0.5;
         cursor: auto;
     }
 

package/{components → package/components}/app/Feedback.svelte

@@ -21,25 +21,20 @@ export let error = false;
         color: var(--app-error-color);
     }
 
-    p[role='alert']:before {
-        content: '! ';
-        font-size: 200%;
-    }
-
     p[role='status'] {
         color: var(--app-font-color);
-        animation: waiting 1s infinite;
+        /* animation: waiting 1s 1; */
     }
 
     @keyframes waiting {
         0% {
-            transform: rotate(2deg);
+            transform: rotate(1deg);
         }
         50% {
-            transform: rotate(-2deg);
+            transform: rotate(-1deg);
         }
         100% {
-            transform: rotate(2deg);
+            transform: rotate(1deg);
         }
     }
 </style>

package/{components → package/components}/app/Head.svelte

@@ -1,4 +1,7 @@
-<h2><slot /></h2>
+<script>export let id = null;
+</script>
+
+<h2 {id}><slot /></h2>
 
 <style>
     h2 {

package/{components → package/components}/app/Head.svelte.d.ts

@@ -1,21 +1,7 @@
-/** @typedef {typeof __propDef.props}  HeadProps */
-/** @typedef {typeof __propDef.events}  HeadEvents */
-/** @typedef {typeof __propDef.slots}  HeadSlots */
-export default class Head extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type HeadProps = typeof __propDef.props;
-export type HeadEvents = typeof __propDef.events;
-export type HeadSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        id?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +10,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type HeadProps = typeof __propDef.props;
+export type HeadEvents = typeof __propDef.events;
+export type HeadSlots = typeof __propDef.slots;
+export default class Head extends SvelteComponentTyped<HeadProps, HeadEvents, HeadSlots> {
+}
 export {};

package/package/components/app/Link.svelte

@@ -0,0 +1,36 @@
+<script>import { page } from '$app/stores';
+export let to;
+export let before = undefined;
+export let title = undefined;
+export let external = false;
+$: at = to === $page.url.pathname;
+</script>
+
+{#if at}
+    <span class="link"> <slot /></span>
+{:else}
+    <a
+        class="link"
+        href={to}
+        {title}
+        on:click={() => (before ? before() : undefined)}
+        target={to.startsWith('http') || external ? '_blank' : null}
+        rel={external ? 'noreferrer' : null}><slot /></a
+    >
+{/if}
+
+<style>
+    .link {
+        font-family: var(--app-font);
+        font-weight: 400;
+        text-decoration: none;
+    }
+
+    a {
+        color: var(--app-interactive-color);
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+</style>

package/{components → package/components}/app/Link.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         to: string;
         before?: Function | undefined;
         title?: string | undefined;
+        external?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/{components → package/components}/app/Paragraph.svelte

@@ -15,5 +15,6 @@
 
     .aside {
         font-style: italic;
+        font-size: 90%;
     }
 </style>

package/{components/app/Writing.svelte → package/components/app/Section.svelte}

@@ -7,7 +7,6 @@
         margin: auto;
         padding-left: 2rem;
         padding-right: 2rem;
-        min-width: 30rem;
         max-width: 40rem;
     }
 </style>

package/package/components/app/Section.svelte.d.ts

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

package/{components → package/components}/app/TextInput.svelte

@@ -14,6 +14,7 @@ export function value() {
     {type}
     {placeholder}
     {disabled}
+    value={text}
     bind:this={input}
     on:input={() => (text = input.value)}
 />
@@ -22,6 +23,7 @@ export function value() {
     input {
         font-family: var(--app-font);
         font-size: var(--app-chrome-font-size);
+        background: var(--app-background-color);
         color: var(--app-font-color);
         padding: var(--app-chrome-padding);
         font-size: var(--app-chrome-font-size);

package/{components → package/components}/chapter/Atom.svelte

@@ -5,13 +5,6 @@ export let node;
 let caret = getCaret();
 // Is the caret on this link?
 $: selected = $caret && $caret.range && $caret.range.start.node === node;
-function handleMouseDown() {
-    // Select this so that the view stays focused.
-    $caret?.setCaret({
-        start: { node: node, index: 0 },
-        end: { node: node, index: 0 },
-    });
-}
 </script>
 
 <!-- Prevent the editor from receiving the click. -->
@@ -19,7 +12,7 @@ function handleMouseDown() {
     class={`bookish-editor-atom ${
         selected ? 'bookish-editor-atom-selected' : ''
     } ${$caret?.focused ? 'bookish-editor-atom-selected-focused' : ''}`}
-    on:mousedown|stopPropagation|preventDefault={handleMouseDown}><slot /></span
+    ><slot /></span
 >
 
 <style>

package/{components → package/components}/chapter/Block.svelte

@@ -19,12 +19,14 @@ import Quote from './Quote.svelte';
 import Rule from './Rule.svelte';
 import Table from './Table.svelte';
 import Problem from './Problem.svelte';
+import { isChapterEditable } from '../page/Contexts';
 export let node;
+let editable = isChapterEditable();
 </script>
 
 {#if node instanceof ParagraphNode}<Paragraph {node} />
 {:else if node instanceof ListNode}<List {node} />
-{:else if node instanceof EmbedNode}<Embed {node} />
+{:else if node instanceof EmbedNode}<Embed {node} {editable} />
 {:else if node instanceof CalloutNode}<Callout {node} />
 {:else if node instanceof QuoteNode}<Quote {node} />
 {:else if node instanceof CodeNode}<CaptionedCode {node} />

package/{components → package/components}/chapter/CaptionedCode.svelte

@@ -3,12 +3,12 @@
 <script>import Code from './Code.svelte';
 import Python from './Python.svelte';
 import Text from './Text.svelte';
-import { isEditable } from '../page/Contexts';
+import { isChapterEditable } from '../page/Contexts';
 import Figure from './Figure.svelte';
 import { getCaret } from '../page/Contexts';
 export let node;
 $: language = node.getLanguage();
-let editable = isEditable();
+let editable = isChapterEditable();
 // const languages = [ "C", "C++", "CSS", "Go", "HTML", "Java", "JavaScript", "Markdown", "Plaintext", "Python", "TypeScript" ];
 let caret = getCaret();
 $: inside =

package/{components → package/components}/chapter/ChapterBody.svelte

@@ -1,17 +1,25 @@
 <svelte:options immutable />
 
 <script>import ParagraphNode from '../../models/chapter/ParagraphNode';
+import { writable } from 'svelte/store';
+import { setContext } from 'svelte';
+import { ROOT } from '../page/Contexts';
 import Block from './Block.svelte';
 import Paragraph from './Paragraph.svelte';
 import Problem from './Problem.svelte';
 export let node;
 export let placeholder = '';
+export let editable = false;
 $: errors = node.getErrors();
 $: blocks = node.getBlocks();
+// Make this chapter node available to all children in a reactive store.
+let root = writable(node);
+setContext(ROOT, root);
+$: root.set(node);
 </script>
 
 <section class="bookish-chapter-body" data-nodeid={node.nodeID}>
-    {#if errors.length > 0}
+    {#if editable && errors.length > 0}
         <p>
             <Problem
                 >{errors.length +
@@ -38,21 +46,6 @@ $: blocks = node.getBlocks();
         min-width: 100%;
     }
 
-    /* This implements a drop cap in the first letter of the first text in the first format of the first paragraph of a chapter (but only chapters). */
-    :global(
-            .chapter-content
-                .bookish-chapter-body
-                p:first-of-type:not(.placeholder)::first-letter
-        ) {
-        padding: 0 0.25rem;
-        margin: 0 0.25rem 0 0;
-        font-size: 4rem;
-        font-weight: 700;
-        float: left;
-        line-height: 1;
-        color: var(--bookish-paragraph-color);
-    }
-
     :global(.bookish-content-highlight) {
         position: relative;
     }

package/{components → package/components}/chapter/ChapterBody.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         node: ChapterNode;
         placeholder?: string | undefined;
+        editable?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/{components → package/components}/chapter/Citations.svelte

@@ -1,23 +1,21 @@
 <svelte:options immutable={true} />
 
 <script>import Marginal from './Marginal.svelte';
-import Parser from '../../models/chapter/Parser';
 import Problem from './Problem.svelte';
 import Atom from './Atom.svelte';
-import { getChapter, getEdition } from '../page/Contexts';
+import { getChapter, getEdition, getRoot } from '../page/Contexts';
 import PossibleReference from '../page/PossibleReference.svelte';
 import { afterUpdate } from 'svelte';
 export let node;
 let chapter = getChapter();
 let edition = getEdition();
-$: ast =
-    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
+let root = getRoot();
 // Sort citations numerically, however they're numbered.
 $: citations = node.getMeta().sort((a, b) => {
-    if (ast === undefined)
+    if ($root === undefined)
         return 0;
-    let aNumber = ast.getCitationNumber(a);
-    let bNumber = ast.getCitationNumber(b);
+    let aNumber = $root.getCitationNumber(a);
+    let bNumber = $root.getCitationNumber(b);
     if (aNumber === null) {
         if (bNumber === null)
             return 0;
@@ -36,7 +34,7 @@ afterUpdate(() => $chapter?.layoutMarginals());
 </script>
 
 <Atom {node}>
-    {#if ast}
+    {#if $root}
         <span class="bookish-citation" data-nodeid={node.nodeID}>
             <Marginal
                 {node}
@@ -46,7 +44,7 @@ afterUpdate(() => $chapter?.layoutMarginals());
                 <svelte:fragment slot="interactor">
                     {#each citations as citationID, index}
                         {@const citationNumber =
-                            ast?.getCitationNumber(citationID)}
+                            $root.getCitationNumber(citationID)}
                         {#if citationNumber && citationID in ($edition?.getReferences() ?? {})}
                             <sup class="bookish-citation-symbol"
                                 >{citationNumber}</sup
@@ -67,14 +65,14 @@ afterUpdate(() => $chapter?.layoutMarginals());
                 <span slot="content" class="bookish-references">
                     {#each citations as citationID}
                         {@const citationNumber =
-                            ast?.getCitationNumber(citationID)}
+                            $root.getCitationNumber(citationID)}
                         {@const ref = $edition?.getReference(citationID)}
                         {#if citationNumber && ref && $edition}
                             <span class="bookish-reference">
                                 <sup class="bookish-citation-symbol"
                                     >{citationNumber}</sup
                                 >
-                                <PossibleReference node={ref} />
+                                <PossibleReference node={ref} edit={false} />
                             </span>
                         {/if}
                     {/each}
@@ -85,6 +83,10 @@ afterUpdate(() => $chapter?.layoutMarginals());
 </Atom>
 
 <style>
+    sup {
+        line-height: 0;
+    }
+
     .bookish-reference {
         font-family: var(--bookish-paragraph-font-family);
         list-style-position: outside;

package/{components → package/components}/chapter/Code.svelte

@@ -61,6 +61,7 @@ function handleChange() {
         display: inline;
         padding: calc(1.5 * var(--bookish-inline-padding))
             var(--bookish-inline-padding);
+        white-space: pre-line !important;
     }
 
     :global(.bookish-code-inline) :global(code) {
@@ -77,10 +78,10 @@ function handleChange() {
     */
 
     :global(code[class*='language-']) {
-        color: black;
+        color: var(--bookish-paragraph-color);
         background: none;
         font-family: var(--bookish-code-font-family);
-        font-size: 1em;
+        font-size: var(--bookish-code-font-size);
         text-align: left;
         white-space: pre;
         word-spacing: normal;