bookish-press 0.4.0

package/components/page/TableOfContents.svelte

@@ -0,0 +1,234 @@
+<script>import Instructions from "./Instructions.svelte";
+import Parser from "../../models/chapter/Parser";
+import TableOfContentsRow from "./TableOfContentsRow.svelte";
+import ChapterIDs from "../../models/book/ChapterID";
+import Page from "./Page.svelte";
+import Header from "./Header.svelte";
+import Outline from "./Outline.svelte";
+import Link from "../Link.svelte";
+import SubdomainEditor from "./SubdomainEditor.svelte";
+import Description from "./Description.svelte";
+import Acknowledgements from "./Acknowledgements.svelte";
+import License from "./License.svelte";
+import Revisions from "./Revisions.svelte";
+import Authors from "./Authors.svelte";
+import TextEditor from "../editor/TextEditor.svelte";
+import Toggle from "../editor/Toggle.svelte";
+import { getBase, getEdition, isEditable } from "./Contexts";
+let edition = getEdition();
+let base = getBase();
+let editable = isEditable();
+function getProgressDescription(progress) {
+    if (progress === null)
+        return "";
+    else if (progress === 0)
+        return "";
+    else if (progress < 30)
+        return "; just started";
+    else if (progress < 70)
+        return "; halfway";
+    else if (progress < 95)
+        return "; almost done";
+    else
+        return "; done";
+}
+// Get the chapter progress
+let progressStorage = localStorage.getItem("chapterProgress");
+let progress = progressStorage === null ?
+    {} :
+    JSON.parse(progressStorage);
+// Is there a colon? Let's make a subtitle
+$: title = $edition.getTitle();
+let subtitle = undefined;
+$: {
+    let colon = title.indexOf(":");
+    if (colon >= 0) {
+        subtitle = title.substring(colon + 1).trim();
+        title = title.substring(0, colon).trim();
+    }
+}
+let waitingForChapter = false;
+function addChapter() {
+    waitingForChapter = true;
+    $edition.addChapter().then(() => waitingForChapter = false);
+}
+</script>
+
+<svelte:head>
+    <title>{$edition.getTitle()}</title>
+    <meta name="description" content={$edition.getTitle()}>
+</svelte:head>
+
+<Page title={$edition.getTitle()}>
+    <Header 
+        label="Book title"
+        getImage={() => $edition.getImage("cover")}
+        setImage={embed => $edition.setImage("cover", embed)}
+        header={title}
+        subtitle={subtitle}
+        tags={$edition.getTags()}
+        save={text => $edition.setTitle(text)}
+    >
+        <svelte:fragment slot="before">
+            {#if editable}
+                <SubdomainEditor slot="before"/>
+            {/if}
+        </svelte:fragment>
+        <Outline slot="outline"
+            previous={null}
+            next={$edition.getNextChapterID("")}
+        />
+        <Authors slot="after" 
+            authors={$edition.getAuthors()}
+            add={ () => $edition.addAuthor("")}
+            edit={(index, text) => $edition.setAuthor(index, text) } 
+            remove={index => $edition.removeAuthor(index)}
+        />
+    </Header>
+
+    <Instructions>
+        Above you can edit your book's authors, title, and cover image.
+    </Instructions>
+
+    <Description/>
+
+    <Instructions>
+        This will appear on the <Link to={base + "/read"}>book browsing</Link> page and in your table of contents.
+        Write an informative description of what your book is about.
+    </Instructions>
+
+    <h2 class="bookish-header" id="chapters">Chapters {#if editable}<button disabled={waitingForChapter} on:click={addChapter}>+</button>{/if}</h2>
+
+    <Instructions>
+        Add, remove, and reorder chapters here.
+        You can add optional book sections to each chapter, toggle chapters as numbered/unnumbered or published/forthcoming.
+        Click the title to edit the chapter.
+    </Instructions>
+
+    <div class="bookish-table">
+        <table id="toc">
+            <tbody>
+                {#each $edition.getChapters() as chapter }
+                    {@const chapterID = chapter.getChapterID() }
+                    {@const readingTime = chapter.getReadingTime() }
+                    {@const readingEstimate =
+                            readingTime === undefined ? "Forthcoming" :
+                            readingTime < 5 ? "<5 min read" :
+                            readingTime < 60 ? "~" + Math.floor(readingTime / 5) * 5 + " min read" :
+                            "~" + Math.floor(readingTime / 60) + " hour read" }
+                    {@const section = chapter.getSection() }
+                    {@const etc = readingEstimate + (!chapter.isForthcoming() ? getProgressDescription(chapterID in progress ? progress[chapterID] : null) : "") }
+
+                    <TableOfContentsRow
+                        chapter={chapter}
+                        chapterID={chapterID}
+                        number={$edition.getChapterNumber(chapterID)}
+                        title={chapter.getTitle()}
+                        forthcoming={chapter.isForthcoming()}
+                    >
+                        <span slot="annotation">
+                            {#if editable }
+                                <TextEditor
+                                    label={"Chapter section editor"}
+                                    startText={section ? section : ""}
+                                    placeholder="Section"
+                                    valid={ () => undefined }
+                                    save={text => chapter.setSection(text) }
+                                />
+                            {:else}
+                                {#if section }{section}{/if}
+                            {/if}
+                        </span>
+                        <span slot="etc">
+                            {#if editable}
+                                <Toggle on={chapter.isForthcoming()} save={on => chapter.setForthcoming(on)}>
+                                    {etc}
+                                </Toggle>
+                            {:else}
+                                { etc }
+                            {/if}
+                        </span>
+                    </TableOfContentsRow>
+                {/each}
+                {#if $edition.hasReferences() || editable }
+                    <TableOfContentsRow
+                        chapterID={ChapterIDs.ReferencesID}
+                        title="References"
+                    >
+                        <span slot="annotation">Everything cited</span>
+                    </TableOfContentsRow>
+                {/if}
+                {#if $edition.getGlossary() && Object.keys($edition.getGlossary()).length > 0 || editable }
+                    <TableOfContentsRow
+                        chapterID={ChapterIDs.GlossaryID}
+                        title="Glossary"
+                    > 
+                        <span slot="annotation">Definitions</span>
+                    </TableOfContentsRow>
+                {/if}
+                <TableOfContentsRow
+                    chapterID={ChapterIDs.IndexID}
+                    title="Index"
+                > 
+                    <span slot="annotation">Common words and where they are</span>
+                </TableOfContentsRow>
+                <TableOfContentsRow
+                    chapterID={ChapterIDs.SearchID}
+                    title="Search"
+                > 
+                    <span slot="annotation">Find where words occur</span>
+                </TableOfContentsRow>
+
+                <TableOfContentsRow
+                    chapterID={ChapterIDs.MediaID}
+                    title="Media"
+                > 
+                    <span slot="annotation">Images and video in the book</span>
+                </TableOfContentsRow>
+                {#if editable }
+                    <TableOfContentsRow
+                        chapterID="theme"
+                        title="Theme"
+                    > 
+                        <span slot="annotation">Style the book</span>
+                    </TableOfContentsRow>
+                    <TableOfContentsRow
+                        chapterID="unknown"
+                        title="Unknown"
+                    > 
+                        <span slot="annotation">Customize bad links</span>
+                    </TableOfContentsRow>
+                {/if}
+            </tbody>
+        </table>
+    </div>
+
+    <Acknowledgements />
+    <License />
+
+    <h2 class="bookish-header" id="print">Print</h2>
+
+    <Instructions>
+        This offers a way for readers to print the entire book as a single page.
+    </Instructions>
+
+    <p>
+        Want to print this book or generate a PDF? 
+        See <Link to={base + "print"}>all chapters on a single page</Link> and then print or export.
+        Long books can take some time to render.
+    </p>
+
+    <h2 class="bookish-header" id="citation">Citation</h2>
+
+    <Instructions>
+        This citation is dynamically created from the current authors, title, and date.
+    </Instructions>
+
+    <!-- Book citation -->
+    <p>
+        { $edition.getAuthors().map(author => Parser.parseFormat($edition, author).toText()).join(", ") } ({(new Date()).getFullYear() }). <em>{$edition.getTitle()}</em>. { location.protocol+'//'+location.host+location.pathname }, <em>retrieved { (new Date()).toLocaleDateString("en-US")}</em>.
+    </p>
+
+    <Revisions />
+    
+</Page>

package/components/page/TableOfContents.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TableOfContentsProps = typeof __propDef.props;
+export declare type TableOfContentsEvents = typeof __propDef.events;
+export declare type TableOfContentsSlots = typeof __propDef.slots;
+export default class TableOfContents extends SvelteComponentTyped<TableOfContentsProps, TableOfContentsEvents, TableOfContentsSlots> {
+}
+export {};

package/components/page/TableOfContentsImage.svelte

@@ -0,0 +1,15 @@
+<script>import EmbedNode from "../../models/chapter/EmbedNode";
+import Parser from "../../models/chapter/Parser";
+import { getEdition } from "./Contexts";
+export let embed;
+let edition = getEdition();
+$: embedNode = embed === null ? null : Parser.parseEmbed($edition, embed);
+</script>
+
+{#if embedNode instanceof EmbedNode }
+    <img 
+        style="width: 5em"
+        src={embedNode.getSmallURL() }
+        alt={embedNode.getDescription() }
+    />
+{/if}

package/components/page/TableOfContentsImage.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        embed: string | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TableOfContentsImageProps = typeof __propDef.props;
+export declare type TableOfContentsImageEvents = typeof __propDef.events;
+export declare type TableOfContentsImageSlots = typeof __propDef.slots;
+export default class TableOfContentsImage extends SvelteComponentTyped<TableOfContentsImageProps, TableOfContentsImageEvents, TableOfContentsImageSlots> {
+}
+export {};

package/components/page/TableOfContentsRow.svelte

@@ -0,0 +1,57 @@
+<script>import Link from "../Link.svelte";
+import TableOfContentsImage from "./TableOfContentsImage.svelte";
+import Toggle from "../editor/Toggle.svelte";
+import ConfirmButton from "../editor/ConfirmButton.svelte";
+import { getBase, getEdition, isEditable } from "./Contexts";
+export let chapterID;
+export let chapter = undefined;
+export let title;
+export let number = undefined;
+export let forthcoming = false;
+let edition = getEdition();
+let base = getBase();
+let editable = isEditable();
+function moveUp() { chapter?.move(-1); }
+function moveDown() { chapter?.move(1); }
+</script>
+
+<tr class={forthcoming ? "bookish-forthcoming" : ""}>
+    <td><TableOfContentsImage embed={$edition.getImage(chapterID)} /></td>
+    <td>
+        {#if editable && chapter}
+            <Toggle on={number !== undefined} save={ on => chapter && chapter.setNumbered(on) }>
+                <div class="bookish-chapter-number">
+                    {#if number !== undefined}
+                        Chapter {number}
+                    {:else}
+                        <span class="bookish-muted">Unnumbered</span>
+                    {/if}
+                </div>
+            </Toggle>
+        {:else if number !== undefined }
+            <div class="bookish-chapter-number">{"Chapter " + number}</div>
+        {/if}
+        {#if forthcoming && !editable}
+            <span>{title}</span>
+        {:else}
+            <Link to={`${base}/${chapterID}`}>{title}</Link>
+        {/if}
+        <small class="bookish-muted"><br/><em><slot name="annotation"></slot></em></small>
+    </td>
+    <td><slot name="etc"></slot></td>
+    {#if editable }
+        <td>
+            {#if chapter }
+                <button disabled={chapter.getPosition() === 0} on:click={moveUp}>{"↑"}</button>
+                &nbsp;
+                <button disabled={chapter.getPosition() === chapter.getBook().getChapterCount() - 1} on:click={moveDown}>{"↓"}</button>
+                &nbsp;
+                <ConfirmButton
+                    commandLabel="x"
+                    confirmLabel="Confirm"
+                    command={() => chapter && chapter.delete()}
+                />
+            {/if}
+        </td>
+    {/if}
+</tr>

package/components/page/TableOfContentsRow.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type Chapter from "../../models/book/Chapter";
+declare const __propDef: {
+    props: {
+        chapterID: string;
+        chapter?: Chapter | undefined;
+        title: string;
+        number?: number | undefined;
+        forthcoming?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        annotation: {};
+        etc: {};
+    };
+};
+export declare type TableOfContentsRowProps = typeof __propDef.props;
+export declare type TableOfContentsRowEvents = typeof __propDef.events;
+export declare type TableOfContentsRowSlots = typeof __propDef.slots;
+export default class TableOfContentsRow extends SvelteComponentTyped<TableOfContentsRowProps, TableOfContentsRowEvents, TableOfContentsRowSlots> {
+}
+export {};

package/components/page/ThemeEditor.svelte

@@ -0,0 +1,52 @@
+<script>import Header from "./Header.svelte";
+import Outline from './Outline.svelte';
+import Page from './Page.svelte';
+import { defaultTheme } from '../../models/book/Theme';
+import ConfirmButton from '../editor/ConfirmButton.svelte';
+import Instructions from './Instructions.svelte';
+import ThemeSetEditor from './ThemeSetEditor.svelte';
+import ThemeEditorPreview from './ThemeEditorPreview.svelte';
+import External from "../External.svelte";
+import { getEdition } from "./Contexts";
+let edition = getEdition();
+$: theme = $edition.getTheme();
+</script>
+
+<Page title={`${$edition.getTitle()} - Theme`}>
+    <Header 
+        label="Theme"
+        getImage={() => null}
+        setImage={ () => undefined}
+        header="Theme"
+    >
+        <Outline
+            slot="outline"
+            previous={null}
+            next={null}
+        />
+    </Header>
+
+    <Instructions>
+        This is the theme editor. 
+        You can use it to choose from existing themes or create a custom theme for your book's appearance.
+        To use it, you'll need to know a bit about how to format CSS <External to="https://developer.mozilla.org/en-US/docs/Web/CSS/color">colors</External>, <External to="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">fonts</External>, and <External to="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">sizes</External>.
+    </Instructions>
+
+    {#if theme === null }
+        <button on:click={() => $edition.setTheme(defaultTheme)}>Customize</button>
+    {:else}
+        <ConfirmButton
+            commandLabel="Revert to default"
+            confirmLabel="Delete your theme?"
+            command={() => $edition.setTheme(null)}
+        />
+        <ThemeEditorPreview theme={theme}/>
+        <ThemeSetEditor header={"Light mode colors"} group="light" theme={theme} />
+        <ThemeSetEditor header={"Dark mode colors"} group="dark" theme={theme} />
+        <ThemeSetEditor header={"Fonts"} group="fonts" theme={theme} />
+        <ThemeSetEditor header={"Font sizes"} group="sizes" theme={theme} />
+        <ThemeSetEditor header={"Font weights"} group="weights" theme={theme} />
+        <ThemeSetEditor header={"Spacing"} group="spacing" theme={theme} />
+    {/if}
+
+</Page>

package/components/page/ThemeEditor.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ThemeEditorProps = typeof __propDef.props;
+export declare type ThemeEditorEvents = typeof __propDef.events;
+export declare type ThemeEditorSlots = typeof __propDef.slots;
+export default class ThemeEditor extends SvelteComponentTyped<ThemeEditorProps, ThemeEditorEvents, ThemeEditorSlots> {
+}
+export {};

package/components/page/ThemeEditorPreview.svelte

@@ -0,0 +1,37 @@
+<script>import ChapterBody from "../chapter/ChapterBody.svelte";
+import Parser from "../../models/chapter/Parser";
+import { getDarkMode } from "./Contexts";
+export let theme;
+let darkMode = getDarkMode();
+$: preview = Parser.parseChapter(undefined, `
+		# Header 1
+		## Header 2
+		### Header 3
+		
+		This is how a sentence with _various_ *formatting* ^will^ look.
+
+		* How does it look?
+		* Would you change anything?	
+	`);
+</script>
+
+<div class="bookish-theme-preview" style={`background-color: ${$darkMode ? theme.dark.backgroundColor : theme.light.backgroundColor };`}>
+    <ChapterBody node={preview}/>
+</div>
+
+<style>
+	.bookish-theme-preview {
+		padding: 1em;
+		border: var(--bookish-app-chrome-border-width) solid black;
+		transform: translate(-25%, -25%) scale(0.5);
+		position: sticky;
+		margin-top: 2em;
+		top: 2em;
+		z-index: 3;
+	}
+
+	:global(.bookish-dark .bookish-theme-preview) {
+		border-color: white;
+	}
+
+</style>

package/components/page/ThemeEditorPreview.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type Theme from "../../models/book/Theme";
+declare const __propDef: {
+    props: {
+        theme: Theme;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ThemeEditorPreviewProps = typeof __propDef.props;
+export declare type ThemeEditorPreviewEvents = typeof __propDef.events;
+export declare type ThemeEditorPreviewSlots = typeof __propDef.slots;
+export default class ThemeEditorPreview extends SvelteComponentTyped<ThemeEditorPreviewProps, ThemeEditorPreviewEvents, ThemeEditorPreviewSlots> {
+}
+export {};

package/components/page/ThemeSetEditor.svelte

@@ -0,0 +1,17 @@
+<script>import ThemeVariableEditor from "./ThemeVariableEditor.svelte";
+export let header;
+export let group;
+export let theme;
+$: set = theme[group];
+</script>
+
+<h2>{header}</h2>
+<div class="bookish-table">
+    <table>
+        <tbody>
+        {#each Object.keys(set).sort() as name }
+            <ThemeVariableEditor group={group} name={name} value={set[name]} />
+        {/each}
+        </tbody>
+    </table>
+</div>

package/components/page/ThemeSetEditor.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        header: string;
+        group: string;
+        theme: Record<string, Record<string, string>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ThemeSetEditorProps = typeof __propDef.props;
+export declare type ThemeSetEditorEvents = typeof __propDef.events;
+export declare type ThemeSetEditorSlots = typeof __propDef.slots;
+export default class ThemeSetEditor extends SvelteComponentTyped<ThemeSetEditorProps, ThemeSetEditorEvents, ThemeSetEditorSlots> {
+}
+export {};

package/components/page/ThemeVariableEditor.svelte

@@ -0,0 +1,28 @@
+<script>import TextEditor from "../editor/TextEditor.svelte";
+import { getEdition } from "./Contexts";
+const placeholders = {
+    light: "CSS color",
+    dark: "CSS color",
+    fonts: "CSS font name",
+    sizes: "CSS font size",
+    weights: "CSS font weights",
+    spacing: "CSS length"
+};
+export let group;
+export let name;
+export let value;
+let edition = getEdition();
+</script>
+
+<tr>
+    <td>{name.replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map(s => s.charAt(0).toUpperCase() + s.substring(1)).join(" ")}</td>
+    <td style="text-align: right">
+        <TextEditor 
+            startText={value} 
+            label={`${name} editor`}
+            placeholder={group in placeholders ? placeholders[group] : "value"}
+            valid={ () => undefined }
+            save={text => $edition.setThemeValue(group, name, text)}
+        />
+    </td>
+</tr>

package/components/page/ThemeVariableEditor.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        group: string;
+        name: string;
+        value: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ThemeVariableEditorProps = typeof __propDef.props;
+export declare type ThemeVariableEditorEvents = typeof __propDef.events;
+export declare type ThemeVariableEditorSlots = typeof __propDef.slots;
+export default class ThemeVariableEditor extends SvelteComponentTyped<ThemeVariableEditorProps, ThemeVariableEditorEvents, ThemeVariableEditorSlots> {
+}
+export {};

package/components/page/Unknown.svelte

@@ -0,0 +1,29 @@
+<script>import Header from "./Header.svelte";
+import Outline from './Outline.svelte';
+import Page from './Page.svelte';
+import Instructions from './Instructions.svelte';
+import ChapterIDs from '../../models/book/ChapterID';
+import { getEdition } from "./Contexts";
+let edition = getEdition();
+</script>
+<Page title={`${$edition.getTitle()} - Unknown Page`}>
+    <Header 
+        label="Unknown page title"
+        getImage={() => $edition.getImage(ChapterIDs.UnknownID)}
+        setImage={embed => $edition.setImage(ChapterIDs.UnknownID, embed)}
+        header="Oops."
+    >    
+        <Outline
+            slot="outline"
+            previous={null}
+            next={null}
+        />
+    </Header>
+
+    <Instructions>
+        This page will be shown if the reader somehow ends up on a page that doesn't exist.
+        You can customize the image shown.
+    </Instructions>
+
+    <slot></slot>
+</Page>

package/components/page/Unknown.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 UnknownProps = typeof __propDef.props;
+export declare type UnknownEvents = typeof __propDef.events;
+export declare type UnknownSlots = typeof __propDef.slots;
+export default class Unknown extends SvelteComponentTyped<UnknownProps, UnknownEvents, UnknownSlots> {
+}
+export {};

package/components/page/margins.d.ts

@@ -0,0 +1,2 @@
+export declare function hideOutlineIfObscured(): void;
+export declare function layoutMarginals(): void;