bookish-press 0.4.45 → 0.4.47

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

@@ -0,0 +1,99 @@
+<script lang="ts">
+    import { updateEmail } from 'firebase/auth';
+    import { getUser } from '../../lib/components/page/Contexts';
+    import Feedback from '$lib/components/app/Feedback.svelte';
+    import Button from '../../lib/components/app/Button.svelte';
+    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 TextInput from '../../lib/components/app/TextInput.svelte';
+    import { goto } from '$app/navigation';
+
+    let email: string;
+    let auth = getUser();
+
+    let loading = false;
+    let feedback = '';
+    let error = '';
+    let changed = false;
+
+    const errors: Record<string, string> = {
+        'auth/invalid-mail': "This wasn't a valid email.",
+        'auth/email-already-in-use':
+            'This email is already associated with an account.',
+        'auto/requires-recent-login':
+            "You haven't logged in recently enough. Log out, log in again, then try again.",
+    };
+
+    async function handleSubmit() {
+        if ($auth === undefined) return;
+
+        // Enter loading state, try to login and wait for it to complete, and then leave loading state.
+        if ($auth.user !== null && email) {
+            // Give some feedback when loading.
+            loading = true;
+            const previousEmail = $auth.user.email;
+            feedback = `Sending email update confirmation to ${previousEmail}...`;
+            updateEmail($auth.user, email)
+                .then(() => {
+                    feedback = `Check your original email address, ${previousEmail}, for a confirmation link.`;
+                    changed = true;
+                })
+                .catch((error: any) => {
+                    if (typeof error.code === 'string')
+                        error =
+                            errors[error.code] ??
+                            "Couldn't update email for an unknown reason.";
+                })
+                .finally(() => {
+                    loading = false;
+                });
+        }
+    }
+
+    // Ask the auth context to logout, and provided an error if it fails.
+    function handleLogout() {
+        $auth?.logout();
+        goto('/login');
+    }
+</script>
+
+<Lead><Large>You</Large>.</Lead>
+
+<Paragraph>
+    To change your login email, type your new email address below.
+</Paragraph>
+
+<Paragraph>
+    <form on:submit|preventDefault={handleSubmit}>
+        <TextInput
+            autocomplete="username"
+            type="email"
+            placeholder="email"
+            bind:text={email}
+            disabled={loading}
+        />
+        <Button
+            tooltip="submit new email address"
+            command={handleSubmit}
+            type="submit"
+            disabled={loading ||
+                email == undefined ||
+                email.length === 0 ||
+                changed}>update email</Button
+        >
+    </form>
+</Paragraph>
+
+<Paragraph>
+    Or, <Button tooltip="logout of your account" command={handleLogout}
+        >logout</Button
+    >
+</Paragraph>
+
+{#if feedback}
+    <Feedback>{feedback}</Feedback>
+{/if}
+{#if error}
+    <Feedback error>{error}</Feedback>
+{/if}

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { getUser } from '$lib/components/page/Contexts';
+    import Feedback from '$lib/components/app/Feedback.svelte';
+    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 TextInput from '$lib/components/app/TextInput.svelte';
+    import Button from '$lib/components/app/Button.svelte';
+
+    let auth = getUser();
+
+    let email: string = '';
+    let loading = false;
+    let feedback = '';
+    let error = '';
+
+    async function handleSubmit() {
+        if ($auth === undefined) return;
+        // Enter loading state, try to login and wait for it to complete, and then leave loading state.
+        try {
+            // Give some feedback when loading.
+            feedback = 'Logging in...';
+            loading = true;
+            await $auth.login(email);
+            feedback = 'Check your email for a login link.';
+        } catch (err) {
+            feedback = '';
+            error = "Couldn't connect to the server.";
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<Lead><Large>Login</Large> to write.</Lead>
+
+<Paragraph>
+    We'll send you an email each time to login, no password required.
+</Paragraph>
+
+<form on:submit|preventDefault={handleSubmit}>
+    <TextInput
+        bind:text={email}
+        autocomplete="username"
+        type="email"
+        placeholder="email"
+        disabled={auth === undefined || loading}
+    />
+    <Button
+        tooltip="login into your account"
+        command={handleSubmit}
+        type="submit"
+        disabled={auth === undefined ||
+            loading ||
+            !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)}
+    >
+        login
+    </Button>
+</form>
+
+{#if feedback}
+    <Feedback>{feedback}</Feedback>
+{/if}
+{#if error}
+    <Feedback error>{error}</Feedback>
+{/if}

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { listenToPublishedBooks } from '$lib/models/CRUD';
+    import type Book from '$lib/models/book/Book';
+    import { onMount } from 'svelte';
+    import Feedback from '$lib/components/app/Feedback.svelte';
+    import Lead from '$lib/components/app/Lead.svelte';
+    import Paragraph from '$lib/components/app/Paragraph.svelte';
+    import Large from '$lib/components/app/Large.svelte';
+    import BookList from '$lib/components/app/BookList.svelte';
+
+    let books: Book[] | undefined = undefined;
+    let error: string | undefined = undefined;
+
+    function updateBooks(latestBooks: Book[]) {
+        books = latestBooks;
+    }
+
+    // Get the books when the component loads, stop listening on unmount.
+    onMount(() => {
+        try {
+            return listenToPublishedBooks(updateBooks);
+        } catch (err) {
+            error = '' + err;
+        }
+    });
+</script>
+
+<Lead><Large>Read</Large> something.</Lead>
+
+{#if error !== undefined}
+    <Feedback error>{error}</Feedback>
+{:else if books === undefined}
+    <Feedback>Loading books...</Feedback>
+{:else if books.length === 0}
+    <Paragraph>There are no published books.</Paragraph>
+{:else}
+    <BookList {books} write={false} />
+{/if}

package/src/routes/write/+error.svelte

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

package/src/routes/write/+layout.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { getUser } from '$lib/components/page/Contexts';
+
+    let auth = getUser();
+
+    // Redirect to the login page if not authenticated.
+    if ($auth === undefined || $auth.user === null) goto('/login');
+</script>
+
+<slot />

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

@@ -0,0 +1,114 @@
+<script lang="ts">
+    import {
+        createBook,
+        listenToEditableBooks,
+        listenToPartiallyEditableBooks,
+    } from '$lib/models/CRUD';
+    import type Book from '$lib/models/book/Book';
+    import { goto } from '$app/navigation';
+    import { onMount } from 'svelte';
+    import { getUser } from '$lib/components/page/Contexts';
+    import Feedback from '$lib/components/app/Feedback.svelte';
+    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 Button from '$lib/components/app/Button.svelte';
+    import BookList from '$lib/components/app/BookList.svelte';
+    import Section from '$lib/components/app/Section.svelte';
+    import Link from '$lib/components/app/Link.svelte';
+
+    let editableBooks: Book[] | undefined = undefined;
+    let partiallyEditableBooks: Book[] | undefined = undefined;
+    let error: string | undefined = undefined;
+    let auth = getUser();
+
+    // Merge and deduplicate the books
+    $: books =
+        editableBooks === undefined || partiallyEditableBooks === undefined
+            ? undefined
+            : [...editableBooks, ...partiallyEditableBooks].filter(
+                  (book1, index1, bookList) =>
+                      !bookList.some(
+                          (book2, index2) =>
+                              index2 > index1 && book1.ref.id === book2.ref.id
+                      )
+              );
+
+    // Get the books when the component loads.
+    onMount(() => {
+        if ($auth !== undefined && $auth.user !== null) {
+            try {
+                const editableUnsub = listenToEditableBooks(
+                    $auth.user.uid,
+                    (books) => (editableBooks = books)
+                );
+                const partiallyEditableUnsub = listenToPartiallyEditableBooks(
+                    $auth.user.uid,
+                    (books) => (partiallyEditableBooks = books)
+                );
+                return () => {
+                    editableUnsub();
+                    partiallyEditableUnsub();
+                };
+            } catch (err) {
+                error = '' + err;
+            }
+        } else error = "You're not logged in.";
+    });
+
+    let creating = false;
+    let timeSinceCreation = 0;
+    let creationFeedback = '';
+
+    function newBook() {
+        creating = true;
+        creationFeedback = 'Creating book...';
+        timeSinceCreation = Date.now();
+        const timerID = setInterval(() => {
+            const delta = Date.now() - timeSinceCreation;
+            creationFeedback =
+                delta < 3000
+                    ? 'Creating book...'
+                    : delta < 6000
+                    ? 'Still trying to create book...'
+                    : delta < 9000
+                    ? 'Internet is slow or offline, but will keep trying...'
+                    : 'Sorry this is taking so long! If the internet connection comes back, we will create the book.';
+        }, 1000);
+        // Make the book, then go to its page
+        if ($auth?.user)
+            createBook($auth.user.uid)
+                .then((bookID) => goto('/write/' + bookID))
+                .catch((err) => {
+                    creating = false;
+                    console.log(err);
+                    error = "Couldn't create a book: " + error;
+                })
+                .finally(() => clearInterval(timerID));
+    }
+</script>
+
+<Lead><Large>Write</Large> something.</Lead>
+
+<Paragraph
+    >Publishing is currently <Link to="about#editing">invitation only</Link
+    >.</Paragraph
+>
+
+<Paragraph>
+    <Button tooltip="create new book" command={newBook} disabled={creating}
+        >+ book</Button
+    >
+</Paragraph>
+
+{#if creating}
+    <Feedback>{creationFeedback}</Feedback>
+{:else if error}
+    <Feedback error>{error}</Feedback>
+{:else if books === undefined}
+    <Feedback>Loading books...</Feedback>
+{:else if books.length === 0}
+    <Paragraph>You don't have have any books.</Paragraph>
+{:else}
+    <BookList {books} write />
+{/if}

package/src/routes/write/[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/write/[bookid]/[[editionid=edition]]/+layout.svelte

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

package/src/routes/write/[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/write/[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/write/[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/write/[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/write/[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/write/[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/write/[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/write/[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/write/[bookid]/[[editionid=edition]]/theme/+page.svelte

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

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

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

package/src/routes/write/[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/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/storage.rules

@@ -0,0 +1,9 @@
+rules_version = '2';
+service firebase.storage {
+  match /b/{bucket}/o {
+    match /{allPaths=**} {
+      allow read: if true;
+      allow write: if request.auth != null;
+    }
+  }
+}

package/svelte.config.js

@@ -0,0 +1,19 @@
+import adapter from '@sveltejs/adapter-static';
+import preprocess from 'svelte-preprocess';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+    // Consult https://github.com/sveltejs/svelte-preprocess
+    // for more information about preprocessors
+    preprocess: preprocess(),
+
+    kit: {
+        adapter: adapter({
+            pages: 'dist',
+            assets: 'dist',
+            fallback: 'index.html',
+        }),
+    },
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "extends": "./.svelte-kit/tsconfig.json",
+    "compilerOptions": {
+        // "allowJs": true,
+        "checkJs": true,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "sourceMap": true,
+        "strict": true,
+        "types": ["vitest/globals"]
+    }
+    // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+    //
+    // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+    // from the referenced tsconfig.json - TypeScript does not merge them in
+}

package/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import type { UserConfig } from 'vite';
+
+const config: UserConfig = {
+    plugins: [sveltekit()],
+};
+
+export default config;

package/vite.reader.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    define: { 'process.env.NODE_ENV': '"production"' },
+    build: {
+        // We always run this build after the app build, so we don't want to destroy it.
+        emptyOutDir: false,
+        lib: {
+            entry: resolve(__dirname, 'reader/Reader.tsx'),
+            name: 'Bookish',
+            fileName: 'bookish',
+            // Make an immediately evaluated function suitable for script import by books.
+            formats: ['iife'],
+        },
+        rollupOptions: {
+            output: {
+                entryFileNames: (assetInfo) =>
+                    assetInfo.name === 'Reader'
+                        ? 'bookish.js'
+                        : assetInfo.name ?? '',
+                assetFileNames: (assetInfo) =>
+                    assetInfo.name === 'style.css'
+                        ? 'bookish.css'
+                        : assetInfo.name ?? '',
+            },
+        },
+    },
+});

package/components/Auth.svelte

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

package/components/Auth.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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.js

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

package/components/BookPreview.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type Book from '../models/book/Book';
-declare const __propDef: {
-    props: {
-        book: Book;
-        write?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    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 {};