bookish-press 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Amy J. Ko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# Bookish
+Bookish is a simple framework and platforem for publishing online books. I originally created it to make it easier to maintain the many online books on my website (amyjko.com), while adding more sophisticated features to support reading. I'm slowly evolving it to be a simple free online service for authoring and reading online books.
+
+## Project Status
+This is very much an alpha that I use for my own book publishing. I have aspirations to make it usable for others in the future. Expect slow progress while I sneak in programming time on evenings and weekends. You can see where I'm headed by reading the issues and Backend project, which are somewhat organized.

package/components/Auth.svelte

@@ -0,0 +1,52 @@
+<script>import { sendSignInLinkToEmail } from "firebase/auth";
+import { onMount, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { auth } from "../models/Firebase";
+import { AUTH } 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 + "/finishlogin",
+            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.
+onMount(() => {
+    if (auth) {
+        const unsubscribe = auth.onAuthStateChanged(user => {
+            loading = false;
+            updateAuth(user);
+        });
+        // On unmount, stop subscribing.
+        return unsubscribe;
+    }
+});
+// Expose the state and the login/logout functionality.
+setContext(AUTH, authentication);
+</script>
+
+<!-- Wrap whatever children are given in this context. -->
+{#if loading === false }
+    <slot></slot>
+{/if}

package/components/Auth.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AuthProps = typeof __propDef.props;
+export declare type AuthEvents = typeof __propDef.events;
+export declare type AuthSlots = typeof __propDef.slots;
+export default class Auth extends SvelteComponentTyped<AuthProps, AuthEvents, AuthSlots> {
+}
+export {};

package/components/Authentication.d.ts

@@ -0,0 +1,8 @@
+import type { User } from "firebase/auth";
+declare type Authentication = {
+    user: User | null;
+    loading: boolean;
+    login: Function;
+    logout: Function;
+};
+export default Authentication;

package/components/Authentication.js

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

package/components/BookPreview.svelte

@@ -0,0 +1,87 @@
+<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 "./Link.svelte";
+export let book;
+export let write;
+$: refID = book.getRefID();
+$: cover = book.getCover();
+$: authors = book.getAuthors();
+$: description = book.getDescription();
+$: subdomain = book.getSubdomain();
+$: title = book.getTitle() === "" ? "Untitled" : book.getTitle();
+$: embed = cover === null ? null : Parser.parseEmbed(undefined, cover);
+</script>
+
+<div class="bookish-app-book-preview">
+    <div class={`bookish-app-book-preview-cover ${cover === null ? "bookish-app-book-preview-nocover" : ""}`}>
+        {#if embed instanceof EmbedNode }
+            <Embed node={embed}/>
+        {:else if embed instanceof ErrorNode }
+            <ErrorMessage node={embed}/>
+        {/if}
+    </div>
+    <div class="bookish-app-book-preview-title">
+        {#if subdomain === undefined || write }
+            <Link to={refID === undefined ? "" : (write ? "/write/" : "/") + refID}>{title}</Link>
+        {:else}
+            <Link to={`/${subdomain}`}>{title}</Link>
+        {/if}
+    </div>
+    <div class="bookish-app-book-preview-authors">
+        {#each authors as author, index}
+            <span>{author}{#if index !== authors.length - 1},&nbsp;{/if}</span>
+        {:else}
+            <em>No authors</em>
+        {/each}
+    </div>
+    <div class="bookish-app-book-preview-description">
+        {#if description.length === 0}
+            <em>No description</em>
+        {:else}
+            <ChapterBody node={Parser.parseChapter(undefined, description)}/>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .bookish-app-book-preview {
+        display: flex;
+        width: 100%;
+        border: var(--bookish-app-chrome-border-width) solid var(--bookish-app-chrome-border-color);
+        padding: var(--bookish-app-chrome-padding);
+        border-radius: var(--bookish-app-chrome-roundedness);
+        text-align: left;
+    }
+
+    .bookish-app-book-preview-cover {
+        width: 5em;
+        height: auto;
+        margin-right: var(--bookish-app-chrome-padding);
+    }
+
+    .bookish-app-book-preview-cover.bookish-app-book-preview-nocover {
+        background-color: var(--bookish-app-chrome-muted);
+        height: 5em;
+    }
+
+    .bookish-app-book-preview-title {
+        flex: 1;
+        margin-right: var(--bookish-app-chrome-padding);
+    }
+
+    .bookish-app-book-preview-authors {
+        flex: 1;
+        margin-right: var(--bookish-app-chrome-padding);
+    }
+
+    .bookish-app-book-preview-description {
+        flex: 2;
+        overflow: hidden;
+        max-height: 10em;
+    }
+
+</style>

package/components/BookPreview.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type Book from "../models/book/Book";
+declare const __propDef: {
+    props: {
+        book: Book;
+        write: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BookPreviewProps = typeof __propDef.props;
+export declare type BookPreviewEvents = typeof __propDef.events;
+export declare type BookPreviewSlots = typeof __propDef.slots;
+export default class BookPreview extends SvelteComponentTyped<BookPreviewProps, BookPreviewEvents, BookPreviewSlots> {
+}
+export {};

package/components/External.svelte

@@ -0,0 +1,4 @@
+<script>export let to;
+</script>
+
+<a href={to} target="_blank" rel="noreferrer"><slot></slot></a>

package/components/External.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        to: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ExternalProps = typeof __propDef.props;
+export declare type ExternalEvents = typeof __propDef.events;
+export declare type ExternalSlots = typeof __propDef.slots;
+export default class External extends SvelteComponentTyped<ExternalProps, ExternalEvents, ExternalSlots> {
+}
+export {};

package/components/Link.svelte

@@ -0,0 +1,5 @@
+<script>export let to;
+export let before = undefined;
+</script>
+
+<a href={to} on:click={() => before ? before() : undefined }><slot></slot></a>

package/components/Link.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        to: string;
+        before?: Function | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LinkProps = typeof __propDef.props;
+export declare type LinkEvents = typeof __propDef.events;
+export declare type LinkSlots = typeof __propDef.slots;
+export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
+}
+export {};

package/components/chapter/Atom.svelte

@@ -0,0 +1,36 @@
+<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>
+
+<!-- Prevent the editor from receiving the click. -->
+<span class={`bookish-editor-atom ${selected ? "bookish-editor-atom-selected" : ""} ${$caret?.focused ? "bookish-editor-atom-selected-focused" : ""}`} on:mousedown|stopPropagation|preventDefault={handleMouseDown}><slot></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/components/chapter/Atom.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type AtomNode from '../../models/chapter/AtomNode';
+declare const __propDef: {
+    props: {
+        node: AtomNode<any>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AtomProps = typeof __propDef.props;
+export declare type AtomEvents = typeof __propDef.events;
+export declare type AtomSlots = typeof __propDef.slots;
+export default class Atom extends SvelteComponentTyped<AtomProps, AtomEvents, AtomSlots> {
+}
+export {};

package/components/chapter/Block.svelte

@@ -0,0 +1,32 @@
+<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";
+export let node;
+</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 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 class="bookish-error">Unknown node type</p>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type BlockNode from "../../models/chapter/BlockNode";
+declare const __propDef: {
+    props: {
+        node: BlockNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BlockProps = typeof __propDef.props;
+export declare type BlockEvents = typeof __propDef.events;
+export declare type BlockSlots = typeof __propDef.slots;
+export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
+}
+export {};

package/components/chapter/Callout.svelte

@@ -0,0 +1,10 @@
+<script>import Block from "./Block.svelte";
+import renderPosition from "./renderPosition";
+export let node;
+</script>
+
+<div class={"bookish-callout " + renderPosition(node.getPosition())} data-nodeid={node.nodeID}>
+    {#each node.getBlocks() as element }
+        <Block node={element} />
+    {/each}
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type CalloutNode from "../../models/chapter/CalloutNode";
+declare const __propDef: {
+    props: {
+        node: CalloutNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CalloutProps = typeof __propDef.props;
+export declare type CalloutEvents = typeof __propDef.events;
+export declare type CalloutSlots = typeof __propDef.slots;
+export default class Callout extends SvelteComponentTyped<CalloutProps, CalloutEvents, CalloutSlots> {
+}
+export {};

package/components/chapter/CaptionedCode.svelte

@@ -0,0 +1,34 @@
+<script>import Code from './Code.svelte';
+import Python from './Python.svelte';
+import Format from './Format.svelte';
+import Text from './Text.svelte';
+import renderPosition from './renderPosition';
+import { isEditable } from "../page/Contexts";
+export let node;
+$: caption = node.getCaption();
+$: language = node.getLanguage();
+let editable = isEditable();
+// const languages = [ "C", "C++", "CSS", "Go", "HTML", "Java", "JavaScript", "Markdown", "Plaintext", "Python", "TypeScript" ];
+</script>
+
+<div class={"bookish-figure " + renderPosition(node.getPosition())} data-nodeid={node.nodeID}>
+    {#if editable }
+        <code 
+            class={`bookish-code bookish-code-block language-${language}`}
+        >
+            <Text node={node.getCodeNode()}/>
+        </code>
+    {:else}
+        {#if node.getLanguage() === "python" && node.isExecutable() }
+            <Python node={node} startCode={node.getCode()}></Python>
+        {:else}
+            <div>
+                <Code editable={false} inline={false} language={node.getLanguage()} nodeID={node.getCodeNode().nodeID}>{node.getCode()}</Code>
+                {#if node.getLanguage() !== "plaintext"}<div class="bookish-code-language">{node.getLanguage()}</div>{/if}
+            </div>
+        {/if}
+    {/if}
+    {#if caption }
+        <div class="bookish-figure-caption"><Format node={caption} placeholder="caption"/></div>
+    {/if}
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type CodeNode from "../../models/chapter/CodeNode";
+declare const __propDef: {
+    props: {
+        node: CodeNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CaptionedCodeProps = typeof __propDef.props;
+export declare type CaptionedCodeEvents = typeof __propDef.events;
+export declare type CaptionedCodeSlots = typeof __propDef.slots;
+export default class CaptionedCode extends SvelteComponentTyped<CaptionedCodeProps, CaptionedCodeEvents, CaptionedCodeSlots> {
+}
+export {};

package/components/chapter/ChapterBody.svelte

@@ -0,0 +1,23 @@
+<script>import ParagraphNode from '../../models/chapter/ParagraphNode';
+import Block from "./Block.svelte";
+import Paragraph from './Paragraph.svelte';
+export let node;
+export let placeholder = "";
+$: errors = node.getErrors();
+$: blocks = node.getBlocks();
+</script>
+
+<div class="bookish-chapter-body" data-nodeid={node.nodeID}>
+    {#if errors.length > 0 }
+        <p>
+            <span class="bookish-error">{errors.length + " " + (errors.length > 1 ? "errors" : "error")} below</span>
+        </p>
+    {/if}
+    {#if blocks.length === 1 && blocks[0] instanceof ParagraphNode && blocks[0].getFormat().isEmptyText() }
+        <Paragraph node={blocks[0]} placeholder={placeholder} />
+    {:else}
+        {#each node.getBlocks() as block }
+            <Block node={block} />
+        {/each}
+    {/if}
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type ChapterNode from "../../models/chapter/ChapterNode";
+declare const __propDef: {
+    props: {
+        node: ChapterNode;
+        placeholder?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ChapterBodyProps = typeof __propDef.props;
+export declare type ChapterBodyEvents = typeof __propDef.events;
+export declare type ChapterBodySlots = typeof __propDef.slots;
+export default class ChapterBody extends SvelteComponentTyped<ChapterBodyProps, ChapterBodyEvents, ChapterBodySlots> {
+}
+export {};

package/components/chapter/Citations.svelte

@@ -0,0 +1,66 @@
+<script>import Marginal from './Marginal.svelte';
+import Parser from '../../models/chapter/Parser';
+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();
+$: chapterNode = $chapter?.chapter.getAST();
+// Sort citations numerically, however they're numbered.
+$: citations = node.getMeta().sort((a, b) => {
+    if (chapterNode === undefined)
+        return 0;
+    let aNumber = chapterNode.getCitationNumber(a);
+    let bNumber = chapterNode.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}>
+    {#if chapterNode }
+        <span class="bookish-citation"  data-nodeid={node.nodeID}>
+            <Marginal id={"citation-" + citations.join("-")}>
+                <svelte:fragment slot="interactor">
+                    {#each citations as citationID, index}
+                        {@const citationNumber = chapterNode?.getCitationNumber(citationID) }
+                        {#if citationNumber && citationID in $edition.getReferences()}
+                            <sup class="bookish-citation-symbol">{citationNumber}</sup>
+                        {:else}
+                            <span class="bookish-error">Unknown reference: <code>{citationID}</code></span>
+                        {/if}
+                        {#if citations.length > 1 && index < citations.length - 1 }<sup>,</sup>{/if}
+                    {:else}
+                        <sup class="bookish-citation-symbol">{"\u2014"}</sup>            
+                    {/each}
+                </svelte:fragment>
+                <span slot="content" class="bookish-references">
+                    {#each citations as citationID }
+                        {@const citationNumber = chapterNode?.getCitationNumber(citationID) }
+                        {@const ref = $edition.getReference(citationID) }
+                        {#if citationNumber && ref }
+                            <span class="bookish-reference">
+                                <sup class="bookish-citation-symbol">{citationNumber}</sup>
+                                <PossibleReference node={Parser.parseReference(citationID, ref, $edition, true)}/>
+                            </span>
+                        {/if}
+                    {/each}
+                </span>
+            </Marginal>
+        </span>
+    {/if}
+</Atom>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type CitationsNode from "../../models/chapter/CitationsNode";
+declare const __propDef: {
+    props: {
+        node: CitationsNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CitationsProps = typeof __propDef.props;
+export declare type CitationsEvents = typeof __propDef.events;
+export declare type CitationsSlots = typeof __propDef.slots;
+export default class Citations extends SvelteComponentTyped<CitationsProps, CitationsEvents, CitationsSlots> {
+}
+export {};

package/components/chapter/Code.svelte

@@ -0,0 +1,35 @@
+<script>import hljs from 'highlight.js';
+import { onMount } from 'svelte';
+// Suppress unescaped HTML warning, trusting the escaping of the parser.
+hljs.configure({ ignoreUnescapedHTML: true });
+export let editable;
+export let inline;
+export let nodeID;
+export let edited = undefined;
+export let language = undefined;
+let el = null;
+// Find any code tags inside and highlight them.
+function highlightCode() {
+    if (el)
+        hljs.highlightElement(el);
+}
+// When the component mounts or updates, highlight the code inside.
+onMount(() => {
+    highlightCode();
+});
+function handleChange() {
+    if (el && edited)
+        edited(el.innerText);
+}
+// There's no way to mute highlightjs warnings on missing languages, so we check here.
+$: lang = language ? (hljs.getLanguage(language) === undefined ? "text" : language) : "plaintext";
+</script>
+
+<code 
+    data-nodeid={nodeID}
+    contenteditable={editable}
+    class={`bookish-code ${inline ? "bookish-code-inline" : "bookish-code-block"} ${"language-" + lang}`} 
+    on:blur={handleChange}
+    bind:this={el}>
+        <slot></slot>
+</code>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        editable: boolean;
+        inline: boolean;
+        nodeID: number | undefined;
+        edited?: ((text: string) => void) | undefined;
+        language?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type CodeProps = typeof __propDef.props;
+export declare type CodeEvents = typeof __propDef.events;
+export declare type CodeSlots = typeof __propDef.slots;
+export default class Code extends SvelteComponentTyped<CodeProps, CodeEvents, CodeSlots> {
+}
+export {};