bookish-press 0.4.45 → 0.4.47

package/src/lib/components/Link.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+
+    export let to: string;
+
+    let link: HTMLAnchorElement;
+
+    function scroll(event: MouseEvent) {
+        // No element? Bail.
+        if (link === undefined) return;
+
+        // No hash? No scroll.
+        const hash = new URL(link.href).hash;
+        if (hash === '') return;
+
+        // Prevent the browser from scrolling.
+        event.preventDefault();
+
+        // Get the anchor
+        const anchorId = new URL(link.href).hash.replace('#', '');
+        const anchor = document.getElementById(anchorId);
+
+        // No anchor? Bail.
+        if (anchor === null) return;
+
+        // Scroll to the anchor.
+        window.scrollTo({
+            top: anchor.offsetTop,
+            behavior: 'smooth',
+        });
+
+        // Update the hash (without scrolling)
+        history.pushState({}, '', hash);
+    }
+</script>
+
+{#if $page.url.pathname === (to.charAt(to.length - 1) === '/' ? to.substring(0, to.length - 1) : to)}
+    <slot />
+{:else}
+    <a
+        href={to}
+        bind:this={link}
+        on:click={(event) => scroll(event)}
+        target={to.startsWith('http') ? '_blank' : null}><slot /></a
+    >
+{/if}
+
+<style>
+    a {
+        color: var(--bookish-link-color);
+        font-weight: var(--bookish-link-font-weight);
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+</style>

package/{components → src/lib/components}/app/BookList.svelte

@@ -1,6 +1,9 @@
-<script>import BookPreview from '../BookPreview.svelte';
-export let books;
-export let write;
+<script lang="ts">
+    import type Book from '../../models/book/Book';
+    import BookPreview from '../BookPreview.svelte';
+
+    export let books: Book[];
+    export let write: boolean;
 </script>
 
 <section class="previews">

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

@@ -1,7 +1,8 @@
-<script>export let type = null;
-export let tooltip;
-export let disabled = false;
-export let command;
+<script lang="ts">
+    export let type: 'submit' | 'button' | null = null;
+    export let tooltip: string;
+    export let disabled: boolean = false;
+    export let command: () => void;
 </script>
 
 <button

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

@@ -1,10 +1,14 @@
-<script>import { onMount } from 'svelte';
-import Large from './Large.svelte';
-export let error = false;
-let visible = error;
-onMount(() => {
-    setTimeout(() => (visible = true), 1000);
-});
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import Large from './Large.svelte';
+
+    export let error: boolean = false;
+
+    let visible = error;
+
+    onMount(() => {
+        setTimeout(() => (visible = true), 1000);
+    });
 </script>
 
 {#if visible}

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

@@ -1,4 +1,5 @@
-<script>export let id = null;
+<script lang="ts">
+    export let id: string | null = null;
 </script>
 
 <h2 {id}><slot /></h2>

package/{components → src/lib/components}/app/Link.svelte

@@ -1,6 +1,7 @@
-<script>export let to;
-export let before = undefined;
-export let title = undefined;
+<script lang="ts">
+    export let to: string;
+    export let before: Function | undefined = undefined;
+    export let title: string | undefined = undefined;
 </script>
 
 <a

package/{components → src/lib/components}/app/Options.svelte

@@ -1,7 +1,8 @@
-<script>export let options;
-export let changed;
-export let value;
-export let label;
+<script lang="ts">
+    export let options: [string, string][];
+    export let changed: (value: string) => void;
+    export let value: string;
+    export let label: string;
 </script>
 
 <select bind:value on:change={() => changed(value)} aria-label={label}>

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

@@ -1,4 +1,5 @@
-<script>export let aside = false;
+<script lang="ts">
+    export let aside: boolean = false;
 </script>
 
 <p class={aside ? 'aside' : ''}><slot /></p>

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

@@ -1,12 +1,15 @@
-<script>export let text = '';
-export let autocomplete = null;
-export let type;
-export let placeholder;
-export let disabled;
-let input;
-export function value() {
-    return text;
-}
+<script lang="ts">
+    export let text = '';
+    export let autocomplete: string | null = null;
+    export let type: string;
+    export let placeholder: string;
+    export let disabled: boolean;
+
+    let input: HTMLInputElement;
+
+    export function value() {
+        return text;
+    }
 </script>
 
 <input

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

@@ -1,17 +1,23 @@
 <svelte:options immutable={true} />
 
-<script>import { getCaret } from '../page/Contexts';
-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 lang="ts">
+    import type AtomNode from '$lib/models/chapter/AtomNode';
+    import { getCaret } from '$lib/components/page/Contexts';
+
+    export let node: AtomNode<any>;
+
+    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. -->

package/src/lib/components/chapter/Block.svelte

@@ -0,0 +1,42 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+    import type BlockNode from '$lib/models/chapter/BlockNode';
+    import CalloutNode from '$lib/models/chapter/CalloutNode';
+    import CodeNode from '$lib/models/chapter/CodeNode';
+    import EmbedNode from '$lib/models/chapter/EmbedNode';
+    import ErrorNode from '$lib/models/chapter/ErrorNode';
+    import ListNode from '$lib/models/chapter/ListNode';
+    import ParagraphNode from '$lib/models/chapter/ParagraphNode';
+    import QuoteNode from '$lib/models/chapter/QuoteNode';
+    import RuleNode from '$lib/models/chapter/RuleNode';
+    import TableNode from '$lib/models/chapter/TableNode';
+
+    import Callout from './Callout.svelte';
+    import CaptionedCode from './CaptionedCode.svelte';
+    import Embed from './Embed.svelte';
+    import ErrorMessage from './ErrorMessage.svelte';
+    import List from './List.svelte';
+    import Paragraph from './Paragraph.svelte';
+    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: BlockNode;
+
+    let editable = isChapterEditable();
+</script>
+
+{#if node instanceof ParagraphNode}<Paragraph {node} />
+{:else if node instanceof ListNode}<List {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} />
+{:else if node instanceof ErrorNode}<ErrorMessage {node} />
+{:else if node instanceof RuleNode}<Rule {node} />
+{:else if node instanceof TableNode}<Table {node} />
+{:else}<p><Problem>Unknown node type</Problem></p>
+{/if}

package/{components → src/lib/components}/chapter/Callout.svelte

@@ -1,8 +1,11 @@
 <svelte:options immutable={true} />
 
-<script>import Block from './Block.svelte';
-import Positioned from './Positioned.svelte';
-export let node;
+<script lang="ts">
+    import type CalloutNode from '$lib/models/chapter/CalloutNode';
+    import Block from './Block.svelte';
+    import Positioned from './Positioned.svelte';
+
+    export let node: CalloutNode;
 </script>
 
 <Positioned position={node.getPosition()}>

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

@@ -1,18 +1,26 @@
 <svelte:options immutable={true} />
 
-<script>import Code from './Code.svelte';
-import Python from './Python.svelte';
-import Text from './Text.svelte';
-import { isChapterEditable } from '../page/Contexts';
-import Figure from './Figure.svelte';
-import { getCaret } from '../page/Contexts';
-export let node;
-$: language = node.getLanguage();
-let editable = isChapterEditable();
-// const languages = [ "C", "C++", "CSS", "Go", "HTML", "Java", "JavaScript", "Markdown", "Plaintext", "Python", "TypeScript" ];
-let caret = getCaret();
-$: inside =
-    $caret?.range?.start.node === node.getCodeNode() ||
+<script lang="ts">
+    import type CodeNode from '$lib/models/chapter/CodeNode';
+    import Code from './Code.svelte';
+    import Python from './Python.svelte';
+    import Text from './Text.svelte';
+    import { isChapterEditable } from '../page/Contexts';
+    import Figure from './Figure.svelte';
+    import { getCaret } from '$lib/components/page/Contexts';
+
+    export let node: CodeNode;
+
+    $: language = node.getLanguage();
+
+    let editable = isChapterEditable();
+
+    // const languages = [ "C", "C++", "CSS", "Go", "HTML", "Java", "JavaScript", "Markdown", "Plaintext", "Python", "TypeScript" ];
+
+    let caret = getCaret();
+
+    $: inside =
+        $caret?.range?.start.node === node.getCodeNode() ||
         $caret?.range?.end.node === node.getCodeNode();
 </script>
 

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

@@ -1,14 +1,18 @@
 <svelte:options immutable />
 
-<script>import ParagraphNode from '../../models/chapter/ParagraphNode';
-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();
+<script lang="ts">
+    import type ChapterNode from '$lib/models/chapter/ChapterNode';
+    import ParagraphNode from '$lib/models/chapter/ParagraphNode';
+    import Block from './Block.svelte';
+    import Paragraph from './Paragraph.svelte';
+    import Problem from './Problem.svelte';
+
+    export let node: ChapterNode;
+    export let placeholder: string = '';
+    export let editable: boolean = false;
+
+    $: errors = node.getErrors();
+    $: blocks = node.getBlocks();
 </script>
 
 <section class="bookish-chapter-body" data-nodeid={node.nodeID}>

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

@@ -1,38 +1,39 @@
 <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 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;
-// Sort citations numerically, however they're numbered.
-$: citations = node.getMeta().sort((a, b) => {
-    if (ast === undefined)
-        return 0;
-    let aNumber = ast.getCitationNumber(a);
-    let bNumber = ast.getCitationNumber(b);
-    if (aNumber === null) {
-        if (bNumber === null)
-            return 0;
-        else
-            return 1;
-    }
-    else {
-        if (bNumber === null)
-            return -1;
-        else
-            return aNumber - bNumber;
-    }
-});
-// Position the marginals on every render.
-afterUpdate(() => $chapter?.layoutMarginals());
+<script lang="ts">
+    import Marginal from './Marginal.svelte';
+    import Parser from '$lib/models/chapter/Parser';
+    import type CitationsNode from '$lib/models/chapter/CitationsNode';
+    import Problem from './Problem.svelte';
+    import Atom from './Atom.svelte';
+    import { getChapter, getEdition } from '../page/Contexts';
+    import PossibleReference from '../page/PossibleReference.svelte';
+    import { afterUpdate } from 'svelte';
+
+    export let node: CitationsNode;
+
+    let chapter = getChapter();
+    let edition = getEdition();
+
+    $: ast =
+        $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
+
+    // Sort citations numerically, however they're numbered.
+    $: citations = node.getMeta().sort((a, b) => {
+        if (ast === undefined) return 0;
+        let aNumber = ast.getCitationNumber(a);
+        let bNumber = ast.getCitationNumber(b);
+        if (aNumber === null) {
+            if (bNumber === null) return 0;
+            else return 1;
+        } else {
+            if (bNumber === null) return -1;
+            else return aNumber - bNumber;
+        }
+    });
+
+    // Position the marginals on every render.
+    afterUpdate(() => $chapter?.layoutMarginals());
 </script>
 
 <Atom {node}>

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

@@ -1,23 +1,27 @@
 <svelte:options immutable={true} />
 
-<script>import { afterUpdate } from 'svelte';
-import Prism from './ExtendedPrism';
-export let editable;
-export let inline;
-export let nodeID;
-export let edited = undefined;
-export let language = undefined;
-let element = null;
-// When the component mounts or updates, highlight the code inside.
-afterUpdate(() => {
-    if (element) {
-        Prism.highlightElement(element);
-    }
-});
-function handleChange() {
-    if (element && edited)
-        edited(element.innerText);
-}
+<script lang="ts">
+    import { afterUpdate } from 'svelte';
+    import Prism from './ExtendedPrism';
+
+    export let editable: boolean;
+    export let inline: boolean;
+    export let nodeID: number | undefined;
+    export let edited: ((text: string) => void) | undefined = undefined;
+    export let language: string | undefined = undefined;
+
+    let element: HTMLElement | null = null;
+
+    // When the component mounts or updates, highlight the code inside.
+    afterUpdate(() => {
+        if (element) {
+            Prism.highlightElement(element);
+        }
+    });
+
+    function handleChange() {
+        if (element && edited) edited(element.innerText);
+    }
 </script>
 
 <code
@@ -33,7 +37,7 @@ function handleChange() {
 </code>
 
 <style global>
-    :global(.bookish-code) {
+    .bookish-code {
         font-family: var(--bookish-code-font-family);
         font-weight: var(--bookish-code-font-weight);
         font-size: var(--bookish-code-font-size);
@@ -44,26 +48,27 @@ function handleChange() {
         overflow-x: scroll;
     }
 
-    :global(code) {
+    code {
         font-family: var(--bookish-code-font-family);
         font-weight: var(--bookish-code-font-weight);
         font-size: var(--bookish-code-font-size);
     }
 
-    :global(.bookish-code-block) {
+    .bookish-code-block {
         display: block;
         padding: var(--bookish-block-padding);
         line-height: var(--bookish-paragraph-line-height-tight);
         border-radius: var(--bookish-roundedness);
     }
 
-    :global(.bookish-code-inline) {
+    .bookish-code-inline {
         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) {
+    .bookish-code-inline :global(code) {
         display: inline;
         padding: 0em;
     }
@@ -76,7 +81,7 @@ function handleChange() {
     * @author Lea Verou
     */
 
-    :global(code[class*='language-']) {
+    code[class*='language-'] {
         color: black;
         background: none;
         font-family: var(--bookish-code-font-family);
@@ -98,69 +103,69 @@ function handleChange() {
         hyphens: none;
     }
 
-    :global(.token.comment),
-    :global(.token.prolog),
-    :global(.token.doctype),
-    :global(.token.cdata) {
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
         color: var(--bookish-comment-color);
     }
 
-    :global(.token.punctuation) {
+    .token.punctuation {
         color: var(--bookish-muted-color);
     }
 
-    :global(.token.namespace) {
+    .token.namespace {
         opacity: 0.7;
     }
 
-    :global(.token.property),
-    :global(.token.tag),
-    :global(.token.boolean),
-    :global(.token.number),
-    :global(.token.constant),
-    :global(.token.symbol),
-    :global(.token.deleted) {
+    .token.property,
+    .token.tag,
+    .token.boolean,
+    .token.number,
+    .token.constant,
+    .token.symbol,
+    .token.deleted {
         color: var(--bookish-error-color);
     }
 
-    :global(.token.selector),
-    :global(.token.attr-name),
-    :global(.token.string),
-    :global(.token.char),
-    :global(.token.builtin),
-    :global(.token.inserted) {
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted {
         color: var(--bookish-pragraph-color);
     }
 
-    :global(.token.operator),
-    :global(.token.entity),
-    :global(.token.url) {
+    .token.operator,
+    .token.entity,
+    .token.url {
         color: var(--bookish-bullet-color);
     }
 
-    :global(.token.atrule),
-    :global(.token.attr-value),
-    :global(.token.keyword) {
+    .token.atrule,
+    .token.attr-value,
+    .token.keyword {
         color: var(--bookish-link-color);
     }
 
-    :global(.token.regex),
-    :global(.token.important),
-    :global(.token.variable),
-    :global(.token.function),
-    :global(.token.class-name) {
+    .token.regex,
+    .token.important,
+    .token.variable,
+    .token.function,
+    .token.class-name {
         color: var(--bookish-highlight-color);
     }
 
-    :global(.token.important),
-    :global(.token.bold) {
+    .token.important,
+    .token.bold {
         font-weight: bold;
     }
-    :global(.token.italic) {
+    .token.italic {
         font-style: italic;
     }
 
-    :global(.token.entity) {
+    .token.entity {
         cursor: help;
     }
 </style>