bookish-press 0.5.193 → 0.5.195

package/dist/components/Auth.svelte

@@ -0,0 +1,55 @@
+<script>import { sendSignInLinkToEmail } from 'firebase/auth';
+import { onDestroy, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { auth } from '../models/Firebase';
+import { USER } from './page/Contexts';
+// Track the user and user loading status in state
+let loading = true;
+// The store that tracks the auth context.
+const authentication = writable({
+    user: null,
+    loading: loading,
+    login,
+    logout,
+});
+// Login using Firebase's password-less email verification
+async function login(email) {
+    // If connected to firebase...
+    if (auth) {
+        const actionCodeSettings = {
+            url: location.origin + '/confirm',
+            handleCodeInApp: true,
+        };
+        // Ask Firebase to log in with the given email
+        await sendSignInLinkToEmail(auth, email, actionCodeSettings);
+        // Remember the email in local storage so we don't have to ask for it again
+        // after returning to the link above.
+        window.localStorage.setItem('email', email);
+    }
+}
+function updateAuth(user) {
+    authentication.set({ user, loading: loading, login, logout });
+}
+// Logout using Firebase's authentication framework.
+function logout() {
+    if (auth) {
+        return auth.signOut().then(() => updateAuth(null));
+    }
+}
+// On mount, subscribe to authentication changes.
+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(USER, authentication);
+</script>
+
+<!-- Wrap whatever children are given in this context. -->
+{#if loading === false}
+    <slot />
+{/if}

package/dist/components/Authentication.js

@@ -0,0 +1 @@
+export {};

package/dist/components/BookPreview.svelte

@@ -0,0 +1,101 @@
+<script>import EmbedNode from '../models/chapter/EmbedNode';
+import Parser from '../models/chapter/Parser';
+import ChapterBody from './chapter/ChapterBody.svelte';
+import Embed from './chapter/Embed.svelte';
+import Link from './app/Link.svelte';
+export let book;
+export let write = false;
+$: refID = book.getID();
+$: cover = book.getCover();
+$: authors = book.getAuthors();
+$: description = book.getDescription();
+$: subdomain = book.getSubdomain();
+$: 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 editable={false} />
+        {/if}
+    </div>
+    <div class="content">
+        <Link to={url}><h2 class="title">{title}</h2></Link>
+        <p class="authors">
+            {#each authors as author, index}
+                <span
+                    >{author}{#if index !== authors.length - 1},&nbsp;{/if}</span
+                >
+            {:else}
+                <em>No authors</em>
+            {/each}
+        </p>
+        <div class="description">
+            {#if description.length === 0}
+                <em>No description</em>
+            {:else}
+                <ChapterBody
+                    node={Parser.parseChapter(undefined, description)}
+                />
+            {/if}
+        </div>
+        <Link to={`${url}/editions`}>Editions</Link>
+    </div>
+</article>
+
+<style>
+    .book-preview {
+        display: flex;
+        flex-direction: row;
+        align-content: start;
+        margin: var(--app-chrome-padding);
+        padding: var(--app-chrome-padding);
+        text-align: left;
+        flex-wrap: wrap;
+        height: 12em;
+    }
+
+    .cover {
+        flex: 1;
+        width: 10em;
+        height: 100%;
+        margin-right: var(--app-chrome-padding);
+        padding: var(--app-chrome-padding);
+    }
+
+    .cover.empty {
+        background-color: var(--app-chrome-background);
+    }
+
+    .content {
+        flex: 4;
+        display: flex;
+        flex-direction: column;
+        gap: var(--app-chrome-padding);
+    }
+
+    .title {
+        font-size: 20pt;
+        margin-top: 0;
+        margin-bottom: var(--app-chrome-padding);
+    }
+
+    .authors {
+        margin-top: 0;
+        margin-bottom: var(--app-chrome-padding);
+        font-style: italic;
+    }
+
+    .description {
+        margin-top: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+</style>

package/dist/components/Link.svelte

@@ -0,0 +1,52 @@
+<script>import { page } from '$app/stores';
+export let to;
+export let linked = true;
+let link;
+function scroll(event) {
+    // 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 !linked || $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/dist/components/app/BookList.svelte

@@ -0,0 +1,19 @@
+<script>import BookPreview from '../BookPreview.svelte';
+export let books;
+export let write;
+</script>
+
+<section class="previews">
+    {#each books as book}
+        <BookPreview {book} {write} />
+    {/each}
+</section>
+
+<style>
+    .previews {
+        margin-top: var(--app-text-spacing);
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+</style>

package/dist/components/app/Button.svelte

@@ -0,0 +1,52 @@
+<script>export let type = null;
+export let tooltip;
+export let disabled = false;
+export let command;
+</script>
+
+<button
+    class={$$props.class}
+    title={tooltip}
+    aria-label={tooltip}
+    {type}
+    {disabled}
+    on:mousedown={command}
+    on:keypress={(event) =>
+        event.key === ' ' || event.key === 'Enter' ? command() : undefined}
+>
+    <slot />
+</button>
+
+<style>
+    button {
+        display: inline-block;
+        font-family: var(--app-font);
+        font-size: var(--app-chrome-font-size);
+        color: var(--app-font-color);
+        background-color: var(--app-chrome-background);
+        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;
+    }
+
+    button:hover:enabled {
+        cursor: pointer;
+        background-color: var(--app-interactive-color);
+        color: var(--app-font-color-inverted);
+    }
+
+    button:disabled {
+        opacity: 0.5;
+        cursor: auto;
+    }
+
+    button:focus {
+        position: relative;
+        z-index: 2;
+        outline: var(--app-chrome-border-size) solid
+            var(--app-interactive-color);
+    }
+</style>

package/dist/components/app/Feedback.svelte

@@ -0,0 +1,40 @@
+<script>import Large from './Large.svelte';
+export let error = false;
+</script>
+
+{#if error}
+    <p role="alert"><slot /></p>
+{:else}
+    <p role="status" aria-live="polite"><Large><slot /></Large></p>
+{/if}
+
+<style>
+    p {
+        font-family: var(--app-font);
+        margin-top: var(--app-text-spacing);
+        margin-bottom: var(--app-text-spacing);
+        padding: var(--app-chrome-padding);
+        --bounce-height: 1em;
+    }
+
+    p[role='alert'] {
+        color: var(--app-error-color);
+    }
+
+    p[role='status'] {
+        color: var(--app-font-color);
+        /* animation: waiting 1s 1; */
+    }
+
+    @keyframes waiting {
+        0% {
+            transform: rotate(1deg);
+        }
+        50% {
+            transform: rotate(-1deg);
+        }
+        100% {
+            transform: rotate(1deg);
+        }
+    }
+</style>

package/dist/components/app/Head.svelte

@@ -0,0 +1,15 @@
+<script>export let id = null;
+</script>
+
+<h2 {id}><slot /></h2>
+
+<style>
+    h2 {
+        font-size: 150%;
+        font-weight: bold;
+        font-family: var(--app-font);
+        margin-top: var(--app-text-spacing);
+        margin-bottom: 0;
+        margin-left: -1rem;
+    }
+</style>

package/dist/components/app/Large.svelte

@@ -0,0 +1,8 @@
+<span><slot /></span>
+
+<style>
+    span {
+        font-size: 175%;
+        font-weight: bold;
+    }
+</style>

package/dist/components/app/Lead.svelte

@@ -0,0 +1,12 @@
+<h1><slot /></h1>
+
+<style>
+    h1 {
+        font-family: var(--app-font);
+        font-weight: 300;
+        font-size: 24pt;
+        margin-top: 5rem;
+        margin-left: -1rem;
+        margin-bottom: var(--app-text-spacing);
+    }
+</style>

package/dist/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/dist/components/app/Options.svelte

@@ -0,0 +1,24 @@
+<script>export let options;
+export let changed;
+export let value;
+export let label;
+</script>
+
+<select bind:value on:change={() => changed(value)} aria-label={label}>
+    <option value="" selected={value === ''} />
+    {#each options as option}
+        <option value={option[1]} selected={value === option[1]}
+            >{option[0]}</option
+        >
+    {/each}
+</select>
+
+<style>
+    select {
+        border: none;
+        background-color: var(--app-chrome-background);
+        padding: var(--app-chrome-padding);
+        font-family: var(--app-font);
+        font-size: var(--app-chrome-font-size);
+    }
+</style>

package/dist/components/app/Paragraph.svelte

@@ -0,0 +1,20 @@
+<script>export let aside = false;
+</script>
+
+<p class={aside ? 'aside' : ''}><slot /></p>
+
+<style>
+    p {
+        font-family: var(--app-font);
+        font-size: var(--app-font-size);
+        font-weight: 300;
+        line-height: var(--app-line-height);
+        margin-top: 0;
+        margin-bottom: var(--app-text-spacing);
+    }
+
+    .aside {
+        font-style: italic;
+        font-size: 90%;
+    }
+</style>

package/dist/components/app/Section.svelte

@@ -0,0 +1,12 @@
+<section>
+    <slot />
+</section>
+
+<style>
+    section {
+        margin: auto;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        max-width: 40rem;
+    }
+</style>

package/dist/components/app/Table.svelte

@@ -0,0 +1,32 @@
+<section>
+    <table>
+        <slot />
+    </table>
+</section>
+
+<style>
+    section {
+        width: 100%;
+        overflow-x: auto;
+        margin-top: var(--app-text-spacing);
+        margin-bottom: var(--app-text-spacing);
+        border-top: var(--app-chrome-border-size) solid var(--app-border-color);
+        border-bottom: var(--app-chrome-border-size) solid
+            var(--app-border-color);
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        clear: both;
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+
+    table :global(td:not(:first-of-type)) {
+        padding: var(--app-chrome-padding);
+        vertical-align: top;
+        font-family: var(--app-font);
+        font-weight: 300;
+    }
+</style>

package/dist/components/app/TextInput.svelte

@@ -0,0 +1,39 @@
+<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>
+
+<input
+    {autocomplete}
+    {type}
+    {placeholder}
+    {disabled}
+    value={text}
+    bind:this={input}
+    on:input={() => (text = input.value)}
+/>
+
+<style>
+    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);
+        border: none;
+        border-bottom: var(--app-chrome-border-size) solid
+            var(--app-border-color);
+    }
+
+    input:focus {
+        border-bottom-color: var(--app-interactive-color);
+        outline: none;
+    }
+</style>

package/dist/components/chapter/Atom.svelte

@@ -0,0 +1,43 @@
+<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;
+</script>
+
+<!-- Prevent the editor from receiving the click. -->
+<span
+    class={`bookish-editor-atom ${
+        selected ? 'bookish-editor-atom-selected' : ''
+    } ${$caret?.focused ? 'bookish-editor-atom-selected-focused' : ''}`}
+    ><slot /></span
+>
+
+<style>
+    .bookish-editor-atom {
+        cursor: pointer;
+    }
+
+    .bookish-editor-atom-selected {
+        border-radius: 2px;
+        outline-style: solid;
+        outline-color: var(--bookish-paragraph-color);
+        outline-offset: 2px;
+    }
+
+    .bookish-editor-atom-selected-focused {
+        animation: 1s atom-selected infinite;
+    }
+
+    @keyframes atom-selected {
+        from,
+        to {
+            outline-width: 2px;
+        }
+        50% {
+            outline-width: 4px;
+        }
+    }
+</style>

package/dist/components/chapter/Block.svelte

@@ -0,0 +1,37 @@
+<svelte:options immutable={true} />
+
+<script>import CalloutNode from '../../models/chapter/CalloutNode';
+import CodeNode from '../../models/chapter/CodeNode';
+import EmbedNode from '../../models/chapter/EmbedNode';
+import ErrorNode from '../../models/chapter/ErrorNode';
+import ListNode from '../../models/chapter/ListNode';
+import ParagraphNode from '../../models/chapter/ParagraphNode';
+import QuoteNode from '../../models/chapter/QuoteNode';
+import RuleNode from '../../models/chapter/RuleNode';
+import TableNode from '../../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;
+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/dist/components/chapter/Callout.svelte

@@ -0,0 +1,41 @@
+<svelte:options immutable={true} />
+
+<script>import Block from './Block.svelte';
+import Positioned from './Positioned.svelte';
+export let node;
+</script>
+
+<Positioned position={node.getPosition()}>
+    <section class={'bookish-callout'} data-nodeid={node.nodeID}>
+        {#each node.getBlocks() as element (element.nodeID)}
+            <Block node={element} />
+        {/each}
+    </section>
+</Positioned>
+
+<style>
+    .bookish-callout {
+        border: none;
+        border-top: 2px solid var(--bookish-border-color-bold);
+        border-bottom: 2px solid var(--bookish-border-color-bold);
+        margin: var(--bookish-paragraph-spacing);
+        padding-left: 0;
+        padding-right: 0;
+        padding-top: var(--bookish-paragraph-spacing);
+        padding-bottom: var(--bookish-paragraph-spacing);
+        line-height: var(--bookish-paragraph-line-height-tight);
+        clear: both;
+        position: relative;
+    }
+
+    .bookish-callout :global(h2),
+    .bookish-callout :global(h3),
+    .bookish-callout :global(h4) {
+        margin-top: 0;
+    }
+
+    .bookish-callout :global(ol),
+    .bookish-callout :global(ul) {
+        padding-left: 1rem;
+    }
+</style>