bookish-press 0.4.0 → 0.4.3

package/README.md

@@ -1,5 +1,7 @@
 # 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.
+
+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

@@ -1,29 +1,34 @@
-<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";
+<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, });
+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
+            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);
+        window.localStorage.setItem('email', email);
     }
 }
 function updateAuth(user) {
-    authentication.set({ user, loading: loading, login, logout, });
+    authentication.set({ user, loading: loading, login, logout });
 }
 // Logout using Firebase's authentication framework.
 function logout() {
@@ -32,21 +37,19 @@ function logout() {
     }
 }
 // On mount, subscribe to authentication changes.
-onMount(() => {
-    if (auth) {
-        const unsubscribe = auth.onAuthStateChanged(user => {
-            loading = false;
-            updateAuth(user);
-        });
-        // On unmount, stop subscribing.
-        return unsubscribe;
-    }
-});
+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(AUTH, authentication);
+setContext(USER, authentication);
 </script>
 
 <!-- Wrap whatever children are given in this context. -->
-{#if loading === false }
-    <slot></slot>
-{/if}
+{#if loading === false}
+    <slot />
+{/if}

package/components/Auth.svelte.d.ts

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

package/components/Authentication.d.ts

@@ -1,5 +1,5 @@
-import type { User } from "firebase/auth";
-declare type Authentication = {
+import type { User } from 'firebase/auth';
+type Authentication = {
     user: User | null;
     loading: boolean;
     login: Function;

package/components/BookPreview.svelte

@@ -1,87 +1,103 @@
-<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";
+<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 './app/Link.svelte';
 export let book;
-export let write;
+export let write = false;
 $: refID = book.getRefID();
 $: cover = book.getCover();
 $: authors = book.getAuthors();
 $: description = book.getDescription();
 $: subdomain = book.getSubdomain();
-$: title = book.getTitle() === "" ? "Untitled" : book.getTitle();
+$: title = book.getTitle();
 $: embed = cover === null ? null : Parser.parseEmbed(undefined, cover);
+$: url =
+    subdomain === undefined || write
+        ? refID === undefined
+            ? ''
+            : (write ? '/write/' : '/') + refID
+        : `/${subdomain}`;
 </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}/>
+<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="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 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>
-</div>
+</article>
 
 <style>
-    .bookish-app-book-preview {
+    .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);
+        flex-direction: row;
+        align-content: start;
+        margin: var(--app-chrome-padding);
+        padding: var(--app-chrome-padding);
         text-align: left;
+        flex-wrap: wrap;
+        height: 12em;
     }
 
-    .bookish-app-book-preview-cover {
-        width: 5em;
-        height: auto;
-        margin-right: var(--bookish-app-chrome-padding);
+    .cover {
+        flex: 1;
+        width: 10em;
+        height: 100%;
+        margin-right: var(--app-chrome-padding);
+        padding: var(--app-chrome-padding);
     }
 
-    .bookish-app-book-preview-cover.bookish-app-book-preview-nocover {
-        background-color: var(--bookish-app-chrome-muted);
-        height: 5em;
+    .cover.empty {
+        background-color: var(--app-chrome-background);
     }
 
-    .bookish-app-book-preview-title {
-        flex: 1;
-        margin-right: var(--bookish-app-chrome-padding);
+    .content {
+        flex: 4;
+        display: flex;
+        flex-direction: column;
+        gap: var(--app-chrome-padding);
     }
 
-    .bookish-app-book-preview-authors {
-        flex: 1;
-        margin-right: var(--bookish-app-chrome-padding);
+    .title {
+        font-size: 20pt;
+        margin-top: 0;
+        margin-bottom: var(--app-chrome-padding);
     }
 
-    .bookish-app-book-preview-description {
-        flex: 2;
-        overflow: hidden;
-        max-height: 10em;
+    .authors {
+        margin-top: 0;
+        margin-bottom: var(--app-chrome-padding);
+        font-style: italic;
     }
 
-</style>
+    .description {
+        margin-top: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+</style>

package/components/BookPreview.svelte.d.ts

@@ -1,18 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-import type Book from "../models/book/Book";
+import type Book from '../models/book/Book';
 declare const __propDef: {
     props: {
         book: Book;
-        write: boolean;
+        write?: boolean | undefined;
     };
     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 type BookPreviewProps = typeof __propDef.props;
+export type BookPreviewEvents = typeof __propDef.events;
+export type BookPreviewSlots = typeof __propDef.slots;
 export default class BookPreview extends SvelteComponentTyped<BookPreviewProps, BookPreviewEvents, BookPreviewSlots> {
 }
 export {};

package/components/External.svelte

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

package/components/External.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ExternalProps = typeof __propDef.props;
-export declare type ExternalEvents = typeof __propDef.events;
-export declare type ExternalSlots = typeof __propDef.slots;
+export type ExternalProps = typeof __propDef.props;
+export type ExternalEvents = typeof __propDef.events;
+export type ExternalSlots = typeof __propDef.slots;
 export default class External extends SvelteComponentTyped<ExternalProps, ExternalEvents, ExternalSlots> {
 }
 export {};

package/components/Link.svelte

@@ -1,5 +1,51 @@
-<script>export let to;
-export let before = undefined;
+<script>import { page } from '$app/stores';
+export let to;
+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>
 
-<a href={to} on:click={() => before ? before() : undefined }><slot></slot></a>
+{#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/Link.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         to: string;
-        before?: Function | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -11,9 +10,9 @@ declare const __propDef: {
         default: {};
     };
 };
-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/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/components/app/BookList.svelte.d.ts

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

package/components/app/Button.svelte

@@ -0,0 +1,49 @@
+<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: var(--app-chrome-padding);
+        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.3;
+        cursor: auto;
+    }
+
+    button:focus {
+        position: relative;
+        z-index: 2;
+        outline: var(--app-chrome-border-size) solid
+            var(--app-interactive-color);
+    }
+</style>

package/components/app/Button.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        type?: "submit" | "button" | null | undefined;
+        tooltip: string;
+        disabled?: boolean | undefined;
+        command: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/components/app/Feedback.svelte

@@ -0,0 +1,47 @@
+<script>import { onMount } from 'svelte';
+import Large from './Large.svelte';
+export let error = false;
+let visible = error;
+onMount(() => {
+    setTimeout(() => (visible = true), 1000);
+});
+</script>
+
+{#if visible}
+    {#if error}
+        <p role="alert"><slot /></p>
+    {:else}
+        <p role="status" aria-live="polite"><Large><slot /></Large></p>
+    {/if}
+{/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 infinite;
+    }
+
+    @keyframes waiting {
+        0% {
+            transform: rotate(2deg);
+        }
+        50% {
+            transform: rotate(-2deg);
+        }
+        100% {
+            transform: rotate(2deg);
+        }
+    }
+</style>

package/components/app/Feedback.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        error?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FeedbackProps = typeof __propDef.props;
+export type FeedbackEvents = typeof __propDef.events;
+export type FeedbackSlots = typeof __propDef.slots;
+export default class Feedback extends SvelteComponentTyped<FeedbackProps, FeedbackEvents, FeedbackSlots> {
+}
+export {};

package/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/components/app/Head.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HeadProps = typeof __propDef.props;
+export type HeadEvents = typeof __propDef.events;
+export type HeadSlots = typeof __propDef.slots;
+export default class Head extends SvelteComponentTyped<HeadProps, HeadEvents, HeadSlots> {
+}
+export {};

package/components/app/Large.svelte

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

package/components/app/Large.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  LargeProps */
+/** @typedef {typeof __propDef.events}  LargeEvents */
+/** @typedef {typeof __propDef.slots}  LargeSlots */
+export default class Large extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type LargeProps = typeof __propDef.props;
+export type LargeEvents = typeof __propDef.events;
+export type LargeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};