bookish-press 0.4.45 → 0.4.47

package/src/routes/+layout.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+    import Footer from './Footer.svelte';
+    import Header from './Header.svelte';
+    import Auth from '$lib/components/Auth.svelte';
+    import { writable, type Writable } from 'svelte/store';
+    import { setContext } from 'svelte';
+    import {
+        CARET,
+        BOOK,
+        EDITION,
+        STATUS,
+        type EditionStore,
+        type StatusStore,
+        type ChapterText,
+        CHAPTERTEXT,
+    } from '$lib/components/page/Contexts';
+    import type Book from '$lib/models/book/Book';
+    import type Edition from '../lib/models/book/Edition';
+    import type CaretState from '../lib/components/editor/CaretState';
+    import BookSaveStatus from '../lib/models/book/BookSaveStatus';
+    import { updateBook, updateEdition } from '../lib/models/CRUD';
+    import { page } from '$app/stores';
+
+    // A global store context for the focused editor, used to display toolbar.
+    let caret = writable<CaretState | undefined>(undefined);
+    setContext(CARET, caret);
+
+    // A global store for the current book. It's at the root so the header can do breadcrumbs.
+    let book = writable<Book | undefined>(undefined);
+    setContext<Writable<Book | undefined>>(BOOK, book);
+
+    // A global store for the current edition. It's at the root so the header can do breadcrumbs.
+    let edition = writable<Edition>(undefined);
+    setContext<EditionStore>(EDITION, edition);
+
+    // A global store for the current chapter text. It's at the root so the header can do breadcrumbs.
+    let chapterText = writable<ChapterText | undefined>(undefined);
+    setContext<Writable<ChapterText | undefined>>(CHAPTERTEXT, chapterText);
+
+    // A global store for save feedback.
+    let status = writable<BookSaveStatus>(BookSaveStatus.Saved);
+    setContext<StatusStore>(STATUS, status);
+
+    let bookTimer: NodeJS.Timeout | undefined = undefined;
+    let editionTimer: NodeJS.Timeout | undefined = undefined;
+    function debounce(timer: NodeJS.Timeout | undefined, fun: Function) {
+        clearTimeout(timer);
+        return setTimeout(() => {
+            fun();
+        }, 250);
+    }
+
+    /** Save whatever edition is stored. */
+    let previousSavedEdition: Edition | undefined = undefined;
+    /**
+     * Note whether the update was due to us storing the revised edition from the
+     * database so that we don't get in an infinite loop of saving.
+     */
+    let reflection = false;
+    async function saveEdition() {
+        if (reflection) {
+            reflection = false;
+            return;
+        }
+
+        const previousDocID = previousSavedEdition?.getEditionRef()?.id;
+        const newDocID = $edition.getEditionRef()?.id;
+
+        if (
+            ($book && $edition && previousDocID === undefined) ||
+            (newDocID !== undefined &&
+                previousDocID !== undefined &&
+                newDocID === previousDocID)
+        ) {
+            status.set(BookSaveStatus.Saving);
+            try {
+                // Set the edition after we save it, since things like chapter refs can change for new chapters.
+                reflection = true;
+                // Get the chapter refs from the updated edition
+                const newChapterRefs = await updateEdition(
+                    previousSavedEdition,
+                    $edition
+                );
+
+                // If we succeeded, update all of the chapters with the new chapter references, if there are any.
+                let revisedEdition = $edition;
+                for (const [id, ref] of newChapterRefs) {
+                    const chap = revisedEdition.chapters.find(
+                        (chapter) => chapter.id === id
+                    );
+                    if (chap && chap.ref === undefined) {
+                        revisedEdition = revisedEdition.withRevisedChapter(
+                            chap,
+                            chap.withRef(ref)
+                        );
+                    }
+                }
+                // Update the current edition.
+                edition.set(revisedEdition);
+
+                status.set(BookSaveStatus.Saved);
+            } catch (error) {
+                console.error(error);
+                status.set(BookSaveStatus.Error);
+            } finally {
+                previousSavedEdition = $edition;
+            }
+        }
+    }
+
+    async function saveBook() {
+        if ($book) {
+            status.set(BookSaveStatus.Saving);
+            try {
+                updateBook($book);
+                status.set(BookSaveStatus.Saved);
+            } catch (error) {
+                console.log(error);
+                status.set(BookSaveStatus.Error);
+            }
+        }
+    }
+
+    function scheduleSave() {
+        // If this is the latest edition, update the book's metadata to reflect the changes.
+        if (
+            $book &&
+            $edition.isLatestEdition($book) &&
+            previousSavedEdition &&
+            previousSavedEdition.getEditionRef()?.id ===
+                $edition.getEditionRef()?.id &&
+            (previousSavedEdition.getTitle() !== $edition.getTitle() ||
+                previousSavedEdition.getImage('cover') !==
+                    $edition.getImage('cover') ||
+                previousSavedEdition.getAuthors().join() !==
+                    $edition.getAuthors().join() ||
+                previousSavedEdition.getDescription() !==
+                    $edition.getDescription())
+        ) {
+            book.set(
+                $book
+                    .withTitle($edition.getTitle())
+                    .withCover($edition.getImage('cover') ?? null)
+                    .withAuthors($edition.getAuthors())
+                    .withDescription($edition.getDescription())
+            );
+        }
+
+        if (!reflection) status.set(BookSaveStatus.Changed);
+        editionTimer = debounce(editionTimer, saveEdition);
+    }
+
+    // When the edition changes, update the book and debounce a save.
+    $: {
+        if ($edition) scheduleSave();
+    }
+
+    // When the book changes, debounce a save.
+    $: {
+        if ($book) {
+            status.set(BookSaveStatus.Changed);
+            bookTimer = debounce(bookTimer, saveBook);
+        }
+    }
+</script>
+
+<div class="bookish-app">
+    <Auth>
+        {#if $page.route.id !== null && !$page.route.id.startsWith('/[bookid]/[[editionid=edition]]')}
+            <Header />
+        {/if}
+        <slot />
+        <Footer />
+    </Auth>
+</div>
+
+<style>
+    /* Custom fonts for app */
+    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&display=swap');
+
+    :global(.bookish-app) {
+        /* Define some UI defaults not used in the Bookish theme. */
+        --app-font: 'Outfit', sans-serif;
+        --app-line-height: 1.7;
+        --app-font-size: 16pt;
+        --app-text-spacing: 2rem;
+
+        --app-interactive-color: #1b499c;
+        --app-background-color: white;
+        --app-font-color: black;
+        --app-border-color: #444444;
+        --app-font-color-inverted: #ffffff;
+        --app-muted-color: #aaaaaa;
+        --app-error-color: rgb(191, 15, 15);
+
+        --app-chrome-background: rgb(244, 244, 244);
+        --app-chrome-font-size: 12pt;
+        --app-chrome-padding: 0.5em;
+        --app-chrome-border-size: 3px;
+        --app-chrome-roundedness: 5px;
+    }
+
+    :global(.dark .bookish-app) {
+        --app-interactive-color: #1455ce;
+        --app-background-color: #050505;
+        --app-font-color: white;
+        --app-border-color: #353535;
+        --app-font-color-inverted: #000000;
+        --app-muted-color: #a9a9a9;
+        --app-error-color: rgb(80, 8, 8);
+        --app-chrome-background: rgb(46, 46, 46);
+    }
+
+    .bookish-app {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-weight: 300;
+        color: var(--app-font-color);
+        font-family: var(--app-font);
+        font-size: 14pt;
+        background-color: var(--app-background-color);
+    }
+
+    :global(.firebase-emulator-warning) {
+        opacity: 0.05;
+        pointer-events: none;
+    }
+
+    @keyframes -global-failure {
+        0% {
+            transform: translate(-2px, 0px);
+        }
+        50% {
+            transform: translate(0px, 0px);
+        }
+        100% {
+            transform: translate(2px, 0px);
+        }
+    }
+</style>

package/src/routes/+page.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import Section from '$lib/components/app/Section.svelte';
+    import Paragraph from '$lib/components/app/Paragraph.svelte';
+    import Lead from '$lib/components/app/Lead.svelte';
+    import Link from '$lib/components/app/Link.svelte';
+    import Large from '$lib/components/app/Large.svelte';
+    import Head from '$lib/components/app/Head.svelte';
+</script>
+
+<Section>
+    <Lead
+        ><Large>Bookish</Large> is a (beta) platform for writing simple, beautiful,
+        accessible online books.</Lead
+    >
+
+    <Head>Simple</Head>
+    <Paragraph>
+        Print is full gatekeeping and other digital platforms have complex
+        tools. Bookish strives to be a Google Docs for books: the workflow is as
+        simple as write and share.
+    </Paragraph>
+
+    <Head>Beautiful</Head>
+    <Paragraph>
+        Typography matters. Print books can be beautiful, but are complex to
+        make. E-books can be easier to make, but are often typographically
+        messy. Bookish strives for a happy medium, making digital content
+        typographicaaly beautiful.
+    </Paragraph>
+
+    <Head>Accessible</Head>
+    <Paragraph>
+        Most platforms produce books that are incompatible with screen readers,
+        excluding readers who are blind, low vision, dyslexic, or otherwise
+        prefer to have text spoken. Bookish strives to be readable in any web
+        browser, with sight or sound.
+    </Paragraph>
+
+    <Paragraph>
+        <Link to="/about">Learn more</Link>
+        about the platform.
+    </Paragraph>
+</Section>

package/src/routes/Header.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+    import Link from '$lib/components/app/Link.svelte';
+    import {
+        getUser,
+        getBook,
+        getEdition,
+    } from '$lib/components/page/Contexts';
+    import { getCaret } from '$lib/components/page/Contexts';
+    import Toolbar from '$lib/components/editor/Toolbar.svelte';
+    import Status from '$lib/components/page/Status.svelte';
+    import HomeIcon from '$lib/components/editor/icons/home.svg?raw';
+    import Icon from '$lib/components/editor/Icon.svelte';
+    import { page } from '$app/stores';
+
+    let auth = getUser();
+
+    let caret = getCaret();
+    $: edition = getEdition();
+    $: book = getBook();
+</script>
+
+<section class="header">
+    <nav class="navigation">
+        <Link to="/" title="Home"><Icon icon={HomeIcon} /></Link>
+        {#if $book && $edition}
+            <span class="elided"
+                ><Link
+                    to={`${
+                        $page.route.id?.startsWith('/write') ? '/write' : ''
+                    }/${$book.ref.id}`}>{$book.getTitle()}</Link
+                ></span
+            >
+            {#if $page.route.id?.includes('/[bookid]/editions')}
+                <span>&ndash; Editions</span>
+            {/if}
+            <span
+                >&ndash; <Link
+                    to={`${
+                        $page.route.id?.startsWith('/write') ? '/write' : ''
+                    }/${$book.ref.id}/editions`}
+                    >{$edition.getEditionLabel()} edition</Link
+                ></span
+            >
+            <span class="status">
+                {#if $auth?.user && $auth.user.email}
+                    <Link to="/email">{$auth.user.email}</Link>
+                {:else}
+                    <Link to="/login">Login</Link>
+                {/if}
+                <Status />
+            </span>
+        {:else}
+            <Link to="/read">Read</Link>
+            <Link to="/write">Write</Link>
+            <Link to="/about">About</Link>
+            <small>
+                {#if $auth?.user && $auth.user.email}
+                    <Link to="/email">{$auth.user.email}</Link>
+                {:else}
+                    <Link to="/login">Login</Link>
+                {/if}
+            </small>
+        {/if}
+    </nav>
+    {#if $caret}
+        <Toolbar caret={$caret} />
+    {/if}
+</section>
+
+<style>
+    .header {
+        width: 100%;
+        box-sizing: border-box;
+        text-align: center;
+        position: sticky;
+        top: 0;
+        z-index: 3;
+        padding: var(--app-chrome-padding);
+        background-color: var(--app-background-color);
+        border-bottom: var(--app-chrome-border-size) solid
+            var(--app-border-color);
+        display: flex;
+        flex-direction: column;
+        gap: var(--app-chrome-padding);
+    }
+
+    .navigation {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        gap: var(--app-chrome-padding);
+        text-overflow: ellipsis;
+        align-items: baseline;
+    }
+
+    .status {
+        /* This puts the saved status in the top right and pushes everything else left. */
+        margin-left: auto;
+        font-size: 90%;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        gap: var(--app-chrome-padding);
+        align-items: baseline;
+    }
+
+    .elided {
+        overflow-x: clip;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+</style>

package/src/routes/[bookid]/+layout.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import BookLoader from '$lib/components/page/BookLoader.svelte';
+</script>
+
+<BookLoader><slot /></BookLoader>

package/src/routes/[bookid]/[[editionid=edition]]/+error.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import Feeback from '$lib/components/app/Feedback.svelte';
+    import Link from '$lib/components/app/Link.svelte';
+    import Large from '$lib/components/app/Large.svelte';
+    import Lead from '$lib/components/app/Lead.svelte';
+</script>
+
+<Lead><Large>Oops</Large>...</Lead>
+
+<Feeback error>
+    This book doesn't exist. Want to go to your <Link to="/write"
+        >dashboard</Link
+    >?
+</Feeback>

package/src/routes/[bookid]/[[editionid=edition]]/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import EditionLoader from '$lib/components/page/EditionLoader.svelte';
+</script>
+
+<EditionLoader write={false}>
+    <slot />
+</EditionLoader>

package/src/routes/[bookid]/[[editionid=edition]]/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import TableOfContents from '$lib/components/page/TableOfContents.svelte';
+</script>
+
+<TableOfContents />

package/src/routes/[bookid]/[[editionid=edition]]/[chapterid]/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import PossibleChapter from '$lib/components/page/PossibleChapter.svelte';
+</script>
+
+<PossibleChapter />

package/src/routes/[bookid]/[[editionid=edition]]/glossary/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import Glossary from '$lib/components/page/Glossary.svelte';
+</script>
+
+<Glossary />

package/src/routes/[bookid]/[[editionid=edition]]/index/[[letter]]/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import Index from '$lib/components/page/Index.svelte';
+</script>
+
+<Index />

package/src/routes/[bookid]/[[editionid=edition]]/media/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import Media from '$lib/components/page/Media.svelte';
+</script>
+
+<Media />

package/src/routes/[bookid]/[[editionid=edition]]/print/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import Print from '$lib/components/page/Print.svelte';
+</script>
+
+<Print />

package/src/routes/[bookid]/[[editionid=edition]]/references/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import References from '$lib/components/page/References.svelte';
+</script>
+
+<References />

package/src/routes/[bookid]/[[editionid=edition]]/search/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import Search from '$lib/components/page/Search.svelte';
+</script>
+
+<Search />

package/src/routes/[bookid]/editions/+page.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import Editions from '$lib/components/page/Editions.svelte';
+    import { getBook } from '$lib/components/page/Contexts';
+    import Feedback from '$lib/components/app/Feedback.svelte';
+    import Section from '$lib/components/app/Section.svelte';
+    import Lead from '$lib/components/app/Lead.svelte';
+    import Large from '$lib/components/app/Large.svelte';
+
+    let book = getBook();
+</script>
+
+{#if $book}
+    <Section>
+        <Lead><Large>Editions</Large><br />{$book.title}</Lead>
+
+        <Editions />
+    </Section>
+{:else}
+    <Feedback error>This book couldn't be found.</Feedback>
+{/if}

package/src/routes/about/+page.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import Lead from '$lib/components/app/Lead.svelte';
+    import Large from '$lib/components/app/Large.svelte';
+    import Paragraph from '$lib/components/app/Paragraph.svelte';
+    import Link from '$lib/components/app/Link.svelte';
+    import Section from '$lib/components/app/Section.svelte';
+    import Head from '$lib/components/app/Head.svelte';
+</script>
+
+<Section>
+    <Lead><Large>About</Large> Bookish.</Lead>
+
+    <Paragraph>
+        Bookish is built and maintained by <Link to="http://amyjko.com"
+            >Amy J. Ko</Link
+        >, a Professor at the <Link to="https://www.washington.edu/"
+            >University of Washington</Link
+        >
+        <Link to="https://ischool.uw.edu">Information School</Link>. She
+        originally built Bookish to write web-based books to support her
+        teaching. She decided to build a platform to make editing and
+        maintaining books easier for both herself and others. She works on it as
+        a side project and continues to use it extensively in her classes.
+    </Paragraph>
+
+    <Head id="beta">Beta</Head>
+
+    <Paragraph
+        >Bookish is currently in <em>beta</em>. That means there are likely to
+        be defects, including those that result in loss of content. We'll remove
+        this label when we're confident that the platform can reliably serve
+        both readers and writers. See our <Link
+            to="https://github.com/amyjko/bookish/issues?q=is%3Aissue+is%3Aopen+label%3Adefect"
+            >list of defects</Link
+        > to check our progress (and help, if you are able).</Paragraph
+    >
+
+    <Head id="costs">Costs</Head>
+
+    <Paragraph>
+        Using Bookish to write books will always be free. However, hosting is
+        not free and particularly widely read books can incur costs that Amy
+        can't pay alone. She is considering models for covering bandwidth costs
+        from reading such per-book fees or donations. If you have ideas, <Link
+            to="https://github.com/amyjko/bookish/issues/251"
+            >join the discussion</Link
+        >.
+    </Paragraph>
+
+    <Head id="vision">Vision</Head>
+
+    <Paragraph>
+        As with any publisher, Bookish as an editorial policy and philosophy.
+        Much like university publishers (e.g., <Link
+            to="https://mitpress.mit.edu/about/">MIT Press</Link
+        >), Amy views the mission of Bookish as <em>scholarly</em>: books on the
+        platform should advance knowledge, educate the public, and be informed
+        by other scholarly work. However, Bookish is particularly interested in
+        works that advance progress toward a society that
+        <em
+            >radically embraces the beautiful diversity of humanity and nature
+            and seeks to dismantle systems and ideas that get in the way.</em
+        > While this definitely includes works broadly explicitly about social justice
+        toopics such as diversity, equality, equity, inclusion, justice, accessibility,
+        sustainability, indigienous sovereignty, it also includes works that discuss
+        more strictly technical ideas in sociotechnical ways.
+    </Paragraph>
+
+    <Head id="editing">Editing</Head>
+
+    <Paragraph
+        >For now, anyone can create an account and write books, but publishing
+        rights are <strong>invitation only</strong>. <Link
+            to="mailto:amy@amyjko.com">Write Amy</Link
+        > to arrange a time to discuss your your vision, to ensure it aligns with
+        our editioral mission. Amy retains the right to revoke publishing rights
+        and unpublish books that do not align with the vision above; publishing on
+        the platform is a privilege, not a right.</Paragraph
+    >
+
+    <Paragraph>
+        That said, if your vision does not align with ours, you can still use
+        Bookish to write your book and export a version for hosting elsewhere.
+        You could even use the Bookish source to host your own press with a
+        different editorial vision.
+    </Paragraph>
+
+    <Head id="feedback">Feedback</Head>
+
+    <Paragraph>
+        Do you have feedback or want to contribute to the plaform? The project
+        is free and open source <Link to="https://github.com/amyjko/bookish"
+            >on GitHub</Link
+        >. Write <Link to="mailto:ajko@uw.edu">Amy</Link> if you'd like to collaborate,
+        or <Link to="https://github.com/amyjko/bookish/issues"
+            >submit an issue</Link
+        > or <Link to="https://github.com/amyjko/bookish/pulls"
+            >pull request</Link
+        > directly. Note that this is not a full-time project for Amy, so it will
+        progress will be leisurely; defects take priority over new features.
+    </Paragraph>
+</Section>

package/src/routes/confirm/+page.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { isSignInWithEmailLink, signInWithEmailLink } from 'firebase/auth';
+    import { onMount } from 'svelte';
+    import { auth } from '$lib/models/Firebase';
+    import Link from '$lib/components/Link.svelte';
+    import { goto } from '$app/navigation';
+    import Feedback from '$lib/components/app/Feedback.svelte';
+    import Lead from '$lib/components/app/Lead.svelte';
+    import Large from '$lib/components/app/Large.svelte';
+
+    let error: string | undefined = undefined;
+
+    const messages: Record<string, string> = {
+        'auth/id-token-expired': 'This link expired.',
+        'auth/id-token-revoked': "This link isn't valid anymore.",
+        'auth/insufficient-permission':
+            "This email doesn't have permission to create an account.",
+        'auth/internal-error': "There's a problem at Google.",
+        'auth/invalid-argument': "This link isn't valid.",
+        'auth/invalid-email': "This wasn't a valid email.",
+    };
+
+    onMount(() => {
+        if (auth && isSignInWithEmailLink(auth, window.location.href)) {
+            // If this is on the same device and browser, then the email should be in local storage.
+            let email = window.localStorage.getItem('email');
+
+            // If not, ask the user to confirm it.
+            if (!email)
+                email = window.prompt(
+                    'It appears you opened your login link on a different device or browser. Can you confirm your email?'
+                );
+
+            // If there's an email, try signing in.
+            if (email)
+                signInWithEmailLink(auth, email, window.location.href)
+                    .then(() => {
+                        // Clear email from storage now that the user is logged in.
+                        window.localStorage.removeItem('email');
+
+                        // Navigate to the home page.
+                        goto('/write');
+                    })
+                    .catch((err: { code: string }) => {
+                        error =
+                            messages[err.code] ??
+                            'There was a problem logging you in.';
+                    });
+            // Otherwise, give some feedback.
+            else error = "Can't log in without an email address.";
+        }
+        // GIve some feedback if the email link isn't valid.
+        else error = "This isn't a valid login link.";
+    });
+</script>
+
+<Lead><Large>Logging</Large> in…</Lead>
+{#if error}
+    <Feedback error>{error} <Link to="/login">Try again?</Link></Feedback>
+{:else}
+    <Feedback>Redirecting...</Feedback>
+{/if}