bookish-press 0.4.1 → 0.4.21

package/components/chapter/Footnote.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type FootnoteNode from "../../models/chapter/FootnoteNode";
+import type FootnoteNode from '../../models/chapter/FootnoteNode';
 declare const __propDef: {
     props: {
         node: FootnoteNode;
@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FootnoteProps = typeof __propDef.props;
-export declare type FootnoteEvents = typeof __propDef.events;
-export declare type FootnoteSlots = typeof __propDef.slots;
+export type FootnoteProps = typeof __propDef.props;
+export type FootnoteEvents = typeof __propDef.events;
+export type FootnoteSlots = typeof __propDef.slots;
 export default class Footnote extends SvelteComponentTyped<FootnoteProps, FootnoteEvents, FootnoteSlots> {
 }
 export {};

package/components/chapter/Format.svelte

@@ -1,57 +1,80 @@
-<script>import FormatNode from "../../models/chapter/FormatNode";
-import CitationsNode from "../../models/chapter/CitationsNode";
-import CommentNode from "../../models/chapter/CommentNode";
-import DefinitionNode from "../../models/chapter/DefinitionNode";
-import FootnoteNode from "../../models/chapter/FootnoteNode";
-import InlineCodeNode from "../../models/chapter/InlineCodeNode";
-import LabelNode from "../../models/chapter/LabelNode";
-import LinkNode from "../../models/chapter/LinkNode";
-import TextNode from "../../models/chapter/TextNode";
-import Citations from "./Citations.svelte";
-import Definition from "./Definition.svelte";
-import Footnote from "./Footnote.svelte";
-import InlineCode from "./InlineCode.svelte";
-import Label from "./Label.svelte";
-import Link from "./Link.svelte";
-import Comment from "./Comment.svelte";
-import Text from "./Text.svelte";
-import Format from "./Format.svelte";
-import { isEditable } from "../page/Contexts";
+<svelte:options immutable={true} />
+
+<script>import FormatNode from '../../models/chapter/FormatNode';
+import CitationsNode from '../../models/chapter/CitationsNode';
+import CommentNode from '../../models/chapter/CommentNode';
+import DefinitionNode from '../../models/chapter/DefinitionNode';
+import FootnoteNode from '../../models/chapter/FootnoteNode';
+import InlineCodeNode from '../../models/chapter/InlineCodeNode';
+import LabelNode from '../../models/chapter/LabelNode';
+import LinkNode from '../../models/chapter/LinkNode';
+import TextNode from '../../models/chapter/TextNode';
+import Problem from './Problem.svelte';
+import Citations from './Citations.svelte';
+import Definition from './Definition.svelte';
+import Footnote from './Footnote.svelte';
+import InlineCode from './InlineCode.svelte';
+import Label from './Label.svelte';
+import Link from './Link.svelte';
+import Comment from './Comment.svelte';
+import Text from './Text.svelte';
+import Format from './Format.svelte';
+import { isEditable } from '../page/Contexts';
 export let node;
 export let placeholder = undefined;
 let editable = isEditable();
 $: format = node.getFormat();
 $: tag =
-    format === "*" ? "strong" :
-        format === "_" ? "em" :
-            format === "^" ? "sup" :
-                format === "v" ? "sub" :
-                    "span";
-$: showPlaceholder = node.isEmptyText() && placeholder !== undefined && editable;
+    format === '*'
+        ? 'strong'
+        : format === '_'
+            ? 'em'
+            : format === '^'
+                ? 'sup'
+                : format === 'v'
+                    ? 'sub'
+                    : 'span';
+$: showPlaceholder =
+    node.isEmptyText() && placeholder !== undefined && editable;
 </script>
 
-<svelte:element this={tag} data-nodeid={node.nodeID} class={showPlaceholder ? "bookish-editor-placeholder" : ""}>
-    {#each node.getSegments() as segment}
-        {#if segment instanceof TextNode}<Text node={segment} />
-        {:else if segment instanceof InlineCodeNode}<InlineCode node={segment} />
+<svelte:element
+    this={tag}
+    data-nodeid={node.nodeID}
+    class={`format ${showPlaceholder ? 'bookish-editor-placeholder' : ''}`}
+>
+    {#each node.getSegments() as segment (segment.nodeID)}
+        {#if segment instanceof TextNode}<Text
+                node={segment}
+                placeholder={node.getSegments().length === 1
+                    ? placeholder
+                    : undefined}
+            />
+        {:else if segment instanceof InlineCodeNode}<InlineCode
+                node={segment}
+            />
         {:else if segment instanceof LinkNode}<Link node={segment} />
         {:else if segment instanceof CitationsNode}<Citations node={segment} />
-        {:else if segment instanceof DefinitionNode}<Definition node={segment} />
+        {:else if segment instanceof DefinitionNode}<Definition
+                node={segment}
+            />
         {:else if segment instanceof FootnoteNode}<Footnote node={segment} />
         {:else if segment instanceof LabelNode}<Label node={segment} />
         {:else if segment instanceof CommentNode}<Comment node={segment} />
         {:else if segment instanceof FormatNode}<Format node={segment} />
-        {:else}<span class="bookish-error">Unknown segment type node={segment}</span>
+        {:else}<Problem>Unknown segment type node={segment}</Problem>
         {/if}
     {/each}
-    {#if showPlaceholder }
-        { placeholder }
-    {/if}
 </svelte:element>
 
 <style>
     .bookish-editor-placeholder {
-        color: var(--bookish-app-chrome-muted);
+        color: var(--app-muted-color);
         font-style: italic;
-    }    
-</style>
+    }
+
+    strong,
+    b {
+        font-weight: var(--bookish-bold-font-weight);
+    }
+</style>

package/components/chapter/Format.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import FormatNode from "../../models/chapter/FormatNode";
+import FormatNode from '../../models/chapter/FormatNode';
 declare const __propDef: {
     props: {
         node: FormatNode;
@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FormatProps = typeof __propDef.props;
-export declare type FormatEvents = typeof __propDef.events;
-export declare type FormatSlots = typeof __propDef.slots;
+export type FormatProps = typeof __propDef.props;
+export type FormatEvents = typeof __propDef.events;
+export type FormatSlots = typeof __propDef.slots;
 export default class Format extends SvelteComponentTyped<FormatProps, FormatEvents, FormatSlots> {
 }
 export {};

package/components/chapter/InlineCode.svelte

@@ -1,12 +1,22 @@
-<script>import { isEditable } from "../page/Contexts";
+<svelte:options immutable={true} />
+
+<script>import { isEditable } from '../page/Contexts';
 import Code from './Code.svelte';
 import Text from './Text.svelte';
 export let node;
 let editable = isEditable();
 </script>
 
-{#if editable }
-    <span class="bookish-code bookish-code-inline hljs" data-nodeid={node.nodeID}><Text node={node.getText()}/></span>
+{#if editable}
+    <span
+        class="bookish-code bookish-code-inline hljs"
+        data-nodeid={node.nodeID}><Text node={node.getText()} /></span
+    >
 {:else}
-    <Code editable={false} inline={true} language={node.getMeta()} nodeID={node.getText().nodeID}>{node.getText().getText()}</Code>
-{/if}
+    <Code
+        editable={false}
+        inline={true}
+        language={node.getMeta()}
+        nodeID={node.getText().nodeID}>{node.getText().getText()}</Code
+    >
+{/if}

package/components/chapter/InlineCode.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type InlineCodeNode from "../../models/chapter/InlineCodeNode";
+import type InlineCodeNode from '../../models/chapter/InlineCodeNode';
 declare const __propDef: {
     props: {
         node: InlineCodeNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InlineCodeProps = typeof __propDef.props;
-export declare type InlineCodeEvents = typeof __propDef.events;
-export declare type InlineCodeSlots = typeof __propDef.slots;
+export type InlineCodeProps = typeof __propDef.props;
+export type InlineCodeEvents = typeof __propDef.events;
+export type InlineCodeSlots = typeof __propDef.slots;
 export default class InlineCode extends SvelteComponentTyped<InlineCodeProps, InlineCodeEvents, InlineCodeSlots> {
 }
 export {};

package/components/chapter/Label.svelte

@@ -1,20 +1,49 @@
+<svelte:options immutable={true} />
+
 <script>import Atom from './Atom.svelte';
-import { getChapter, isEditable } from "../page/Contexts";
+import { getChapter, getEdition, isEditable } from '../page/Contexts';
+import Problem from './Problem.svelte';
 export let node;
 let editable = isEditable();
 let chapter = getChapter();
-$: ast = $chapter?.chapter.getAST();
-$: duplicate = ast === undefined ? false : ast.getLabels().filter(l => l.getMeta() === node.getMeta()).length > 1;
+let edition = getEdition();
+$: ast =
+    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
+$: duplicate =
+    ast === undefined
+        ? false
+        : ast.getLabels().filter((l) => l.getMeta() === node.getMeta())
+            .length > 1;
 </script>
 
-<Atom node={node}>
-    <span 
-        class={"bookish-label" + ($chapter?.highlightedID === node.getMeta() ? " bookish-content-highlight" : "")} 
+<Atom {node}>
+    <span
+        class={'bookish-label' +
+            ($chapter?.highlightedID === node.getMeta()
+                ? ' bookish-content-highlight'
+                : '')}
         id={node.getMeta()}
         data-nodeid={node.nodeID}
     >
         {#if editable}
-            <span class={`${duplicate ? "bookish-error" : ""}`}>•<code>{node.getMeta()}</code></span>
+            {#if duplicate}
+                <Problem>Duplicate label {node.getMeta()}</Problem>
+            {:else}
+                <span>•<code>{node.getMeta()}</code></span>
+            {/if}
         {/if}
     </span>
-</Atom>
+</Atom>
+
+<style>
+    /* A little circle at the point of the annotation */
+    .bookish-label.bookish-content-highlight {
+        display: inline-block;
+        width: 3em;
+        height: 3em;
+        border-radius: 3em;
+        position: absolute;
+        z-index: -1;
+        margin-left: -1em;
+    }
+</style>

package/components/chapter/Label.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type LabelNode from "../../models/chapter/LabelNode";
+import type LabelNode from '../../models/chapter/LabelNode';
 declare const __propDef: {
     props: {
         node: LabelNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LabelProps = typeof __propDef.props;
-export declare type LabelEvents = typeof __propDef.events;
-export declare type LabelSlots = typeof __propDef.slots;
+export type LabelProps = typeof __propDef.props;
+export type LabelEvents = typeof __propDef.events;
+export type LabelSlots = typeof __propDef.slots;
 export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
 }
 export {};

package/components/chapter/Link.svelte

@@ -1,5 +1,8 @@
-<script>import { getBase, getEdition, isEditable } from "../page/Contexts";
+<svelte:options immutable={true} />
+
+<script>import { getBase, getEdition, isEditable } from '../page/Contexts';
 import Text from './Text.svelte';
+import Problem from './Problem.svelte';
 export let node;
 let base = getBase();
 let editable = isEditable();
@@ -8,14 +11,14 @@ $: url = node.getMeta();
 $: content = node.getText();
 function isInvalidChapterLink() {
     // If it's internal, validate it.
-    if (!url.startsWith("http")) {
+    if (!url.startsWith('http')) {
         // Pull out any labels and just get the chapter name.
         let chapter = url;
-        if (url.indexOf(":") >= 0) {
-            let parts = chapter.split(":");
+        if (url.indexOf(':') >= 0) {
+            let parts = chapter.split(':');
             chapter = parts[0];
         }
-        if (chapter !== "" && !$edition.hasChapter(chapter))
+        if (chapter !== '' && !$edition?.hasChapter(chapter))
             return true;
     }
     return false;
@@ -24,23 +27,25 @@ function isInvalidChapterLink() {
 
 {#if editable}
     <span class="bookish-editor-link"><Text node={content} /></span>
-<!-- If this is an invalid chapter link, say so -->
+    <!-- If this is an invalid chapter link, say so -->
 {:else if isInvalidChapterLink()}
-    <span class="bookish-error">Unknown chapter name reference '{url}'</span>
-<!-- If this is external link, make an anchor that opens a new window. -->
-{:else if url.startsWith("http")}
+    <Problem>Unknown chapter name reference '{url}'</Problem>
+    <!-- If this is external link, make an anchor that opens a new window. -->
+{:else if url.startsWith('http')}
     <a href={url} target="_blank" rel="noreferrer"><Text node={content} /></a>
-<!-- If's a chapter link with a label -->
-{:else if url.indexOf(":") >= 0}
+    <!-- If's a chapter link with a label -->
+{:else if url.indexOf(':') >= 0}
     <!-- If the chapter isn't specified, set to the current chapter's id. -->
-    {#if url.split(":")[0] === ""}
-        <a href={"#" + url.split(":")[1]}><Text node={content} /></a>
+    {#if url.split(':')[0] === ''}
+        <a href={'#' + url.split(':')[1]}><Text node={content} /></a>
     {:else}
-        <a href={"/" + url.split(":")[0] + "#" + url.split(":")[1]}><Text node={content} /></a>
+        <a href={'/' + url.split(':')[0] + '#' + url.split(':')[1]}
+            ><Text node={content} /></a
+        >
     {/if}
-<!-- If this is internal link, make a route link to the chapter. -->
-{:else}       
-    <a href={base + "/" + url}><Text node={content} /></a>
+    <!-- If this is internal link, make a route link to the chapter. -->
+{:else}
+    <a href={$base + '/' + url}><Text node={content} /></a>
 {/if}
 
 <style>
@@ -48,4 +53,4 @@ function isInvalidChapterLink() {
         color: var(--bookish-link-color);
         font-weight: var(--bookish-link-font-weight);
     }
-</style>
+</style>

package/components/chapter/Link.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type LinkNode from "../../models/chapter/LinkNode";
+import type LinkNode from '../../models/chapter/LinkNode';
 declare const __propDef: {
     props: {
         node: LinkNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LinkProps = typeof __propDef.props;
-export declare type LinkEvents = typeof __propDef.events;
-export declare type LinkSlots = typeof __propDef.slots;
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
 export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
 }
 export {};

package/components/chapter/List.svelte

@@ -1,14 +1,81 @@
-<script>import ListNode from "../../models/chapter/ListNode";
-import Format from "./Format.svelte";
+<svelte:options immutable={true} />
+
+<script>import ListNode from '../../models/chapter/ListNode';
+import Format from './Format.svelte';
 export let node;
 </script>
 
-<svelte:element this={node.isNumbered() ? "ol" : "ul"} data-nodeid={node.nodeID}>
-    {#each node.getItems() as item }
-        {#if item instanceof ListNode }
-            <svelte:self node={item}/>
+<svelte:element
+    this={node.isNumbered() ? 'ol' : 'ul'}
+    data-nodeid={node.nodeID}
+>
+    {#each node.getItems() as item (item.nodeID)}
+        {#if item instanceof ListNode}
+            <svelte:self node={item} />
         {:else}
-            <li><Format node={item}/></li>
+            <li><Format node={item} /></li>
         {/if}
     {/each}
-</svelte:element>
+</svelte:element>
+
+<style>
+    ol {
+        list-style: none;
+        counter-reset: item;
+    }
+
+    ol > li {
+        counter-increment: item;
+    }
+
+    ol > li {
+        list-style-type: none;
+    }
+
+    ol > :global(ol > li) {
+        list-style-type: none;
+    }
+
+    ol > :global(ol > ol > li) {
+        list-style-type: none;
+    }
+
+    ol > :global(li::before),
+    ul > :global(ol > li::before),
+    ul > :global(ul > ol > li::before) {
+        content: counter(item) '. ';
+        color: var(--bookish-bullet-color);
+        display: inline-block;
+        width: 1em;
+        margin-left: -1.5rem;
+        margin-right: 0.5rem;
+        text-align: right;
+    }
+
+    ol > :global(ol > li::before),
+    ul > :global(ol > ol > li::before) {
+        content: counter(item, lower-alpha) '. ';
+    }
+
+    ol > :global(ol > ol > li:before) {
+        content: counter(item, upper-alpha) '. ';
+    }
+
+    li {
+        margin-bottom: calc(0.5 * var(--bookish-paragraph-spacing));
+    }
+
+    ul li {
+        list-style: none;
+    }
+
+    ul li::before {
+        content: '*';
+        color: var(--bookish-bullet-color);
+        display: inline-block;
+        width: 1rem;
+        margin-left: -1rem;
+        font-family: var(--bookish-bullet-font-family);
+        font-weight: var(--bookish-bullet-font-weight);
+    }
+</style>

package/components/chapter/List.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import ListNode from "../../models/chapter/ListNode";
+import ListNode from '../../models/chapter/ListNode';
 declare const __propDef: {
     props: {
         node: ListNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ListProps = typeof __propDef.props;
-export declare type ListEvents = typeof __propDef.events;
-export declare type ListSlots = typeof __propDef.slots;
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
 export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
 }
 export {};