bookish-press 0.4.1 → 0.4.21

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

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

package/components/page/Unknown.svelte

@@ -1,29 +1,33 @@
-<script>import Header from "./Header.svelte";
+<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";
+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>
+{#if $edition}
+    <Page title={`${$edition.getTitle()} - Unknown Page`}>
+        <Header
+            label="Unknown page title"
+            getImage={() => $edition?.getImage(ChapterIDs.UnknownID) ?? null}
+            setImage={(embed) =>
+                $edition
+                    ? edition.set(
+                          $edition.withImage(ChapterIDs.UnknownID, embed)
+                      )
+                    : undefined}
+            header="Oops."
+        >
+            <Outline slot="outline" previous={null} next={null} />
+        </Header>
 
-    <slot></slot>
-</Page>
+        <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 />
+    </Page>
+{/if}

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

package/components/page/margins.js

@@ -2,18 +2,18 @@
 // This operates on the DOM directly, as scroll position isn't easily managed in React.
 export function hideOutlineIfObscured() {
     // Get the outline's bounds.
-    let outline = document.getElementsByClassName("bookish-outline")[0];
+    let outline = document.getElementsByClassName('outline')[0];
     // If there's no outline, don't bother.
     if (!outline)
         return;
     // Set a threshold for hiding
     let threshold = 100;
     // If the outline isn't affixed to the footer
-    if (window.getComputedStyle(outline).getPropertyValue("left") !== "0px") {
+    if (window.getComputedStyle(outline).getPropertyValue('left') !== '0px') {
         let outlineRect = outline.getBoundingClientRect();
         let overlapRect = undefined;
         // Find the bottom-most left inset marginal within threshold of the outline.
-        Array.from(document.getElementsByClassName("bookish-marginal-left-inset")).forEach(el => {
+        Array.from(document.getElementsByClassName('inset-left')).forEach((el) => {
             let insetRect = el.getBoundingClientRect();
             if (!(outlineRect.bottom < insetRect.top - threshold ||
                 outlineRect.top > insetRect.bottom + threshold))
@@ -22,24 +22,28 @@ export function hideOutlineIfObscured() {
         // If it overlaps, reduce opacity by the proportion of the vertical distance between two rectangles and the height of the marginal.
         if (overlapRect) {
             let overlap = overlapRect;
-            let distance = outlineRect.bottom < overlap.top ? threshold :
-                outlineRect.bottom < overlap.top + threshold ? threshold - (outlineRect.bottom - overlap.top) :
-                    outlineRect.top > overlap.bottom - threshold ? threshold - (overlap.bottom - outlineRect.top) :
-                        outlineRect.top > overlap.bottom ? threshold :
-                            0;
+            let distance = outlineRect.bottom < overlap.top
+                ? threshold
+                : outlineRect.bottom < overlap.top + threshold
+                    ? threshold - (outlineRect.bottom - overlap.top)
+                    : outlineRect.top > overlap.bottom - threshold
+                        ? threshold - (overlap.bottom - outlineRect.top)
+                        : outlineRect.top > overlap.bottom
+                            ? threshold
+                            : 0;
             let proportion = distance / threshold;
-            outline.style.opacity = "" + (proportion * proportion);
+            outline.style.opacity = '' + proportion * proportion;
         }
         // Otherwise, remove the dimming.
         else
-            outline.style.removeProperty("opacity");
+            outline.style.removeProperty('opacity');
     }
     // If it is, it's always visible.
     else
-        outline.style.removeProperty("opacity");
+        outline.style.removeProperty('opacity');
 }
 // After each render of the chapter, we need to adjust the layout of marginals, which by default are floating from
-// their little spans within the body of the text. 
+// their little spans within the body of the text.
 //
 // We have to do two things:
 //
@@ -50,53 +54,60 @@ export function hideOutlineIfObscured() {
 // fixed in a fixed position.
 export function layoutMarginals() {
     // Get the chapter DOM node, so we can calculate margins.
-    let chapter = document.getElementsByClassName("bookish-chapter-body")[0];
+    let chapter = document.getElementsByClassName('bookish-chapter-body')[0];
     // If there's no chapter rendered yet, stop.
     if (chapter === undefined)
         return;
-    let book = document.getElementsByClassName("bookish")[0];
+    let book = document.getElementsByClassName('bookish')[0];
     // This is the grid line we'll aline all marginals too horizontally.
     let margin = chapter.getBoundingClientRect().width;
     // This will track the current leading bottom edge for laying out marginals.
     let currentBottom = null;
     // Are there any marginal right inset images that might overlap?
-    let rightInsets = document.getElementsByClassName("bookish-marginal-right-inset");
-    const marginals = document.getElementsByClassName("bookish-marginal");
+    let rightInsets = document.getElementsByClassName('inset-right');
+    const marginals = document.getElementsByClassName('bookish-marginal');
     // Layout all of the marginals vertically to prevent overlaps.
     Array.from(marginals).forEach((element) => {
         const el = element;
         if (el === null)
             return;
-        if (window.getComputedStyle(el).getPropertyValue("position") !== "fixed") {
+        if (window.getComputedStyle(el).getPropertyValue('position') !== 'fixed') {
             if (el.parentElement) {
-                let containingMarginal = el.parentElement.closest(".bookish-marginal");
+                let containingMarginal = el.parentElement.closest('.bookish-marginal');
                 // Get the bounds of this marginal so we know it's size.
                 let elementBounds = el.getBoundingClientRect();
                 // Get the bounds of this marginal's parent so we know it's vertical position.
                 let parentBounds = el.parentElement.getBoundingClientRect();
-                let parentTop = parentBounds.top + window.scrollY - (book.getBoundingClientRect().top + window.scrollY);
+                let parentTop = parentBounds.top +
+                    window.scrollY -
+                    (book.getBoundingClientRect().top + window.scrollY);
                 // If it's inside a marginal, position it below the marginal.
                 if (containingMarginal !== null && currentBottom) {
-                    el.style.left = "0";
-                    el.style.top = "" + (currentBottom - (containingMarginal.getBoundingClientRect().top + window.scrollY)) + "px";
+                    el.style.left = '0';
+                    el.style.top =
+                        '' +
+                            (currentBottom -
+                                (containingMarginal.getBoundingClientRect().top +
+                                    window.scrollY)) +
+                            'px';
                     currentBottom = currentBottom + elementBounds.height;
                 }
                 else {
                     // If we don't have a bottom yet, or the current above is above the parent's top,
                     // then set the current bottom to the bottom of the parent.
                     if (currentBottom === null || currentBottom < parentTop) {
-                        el.style.top = parentTop + "px";
+                        el.style.top = parentTop + 'px';
                         currentBottom = parentTop + elementBounds.height;
                     }
                     // Otherwise, put the marginal below the last marginal's bottom.
                     else {
-                        el.style.top = currentBottom + "px";
+                        el.style.top = currentBottom + 'px';
                         currentBottom = currentBottom + elementBounds.height;
                     }
                     // If there are any right insets, do any intersect with this marginal?
                     // If so, move the marginal below them.
                     if (rightInsets.length > 0) {
-                        Array.from(rightInsets).forEach(inset => {
+                        Array.from(rightInsets).forEach((inset) => {
                             // Compute the global positions of the marginal and the potential inset.
                             let insetBounds = inset.getBoundingClientRect();
                             let insetTop = insetBounds.top + window.scrollY;
@@ -105,28 +116,34 @@ export function layoutMarginals() {
                             let elementBottom = elementTop + elementBounds.height;
                             // If they overlap...
                             if (currentBottom !== null) {
-                                if ((elementTop <= insetTop && elementBottom >= insetTop) ||
-                                    (elementTop <= insetBottom && elementBottom >= insetBottom) ||
-                                    (elementTop >= insetTop && elementBottom <= insetBottom)) {
+                                if ((elementTop <= insetTop &&
+                                    elementBottom >= insetTop) ||
+                                    (elementTop <= insetBottom &&
+                                        elementBottom >= insetBottom) ||
+                                    (elementTop >= insetTop &&
+                                        elementBottom <= insetBottom)) {
                                     // Calculate the new position based on the preferred position, minus the element's height (which was added above), plus the overlap between the inset and the marginal.
-                                    let newTop = currentBottom - elementBounds.height + (insetBottom - elementTop);
+                                    let newTop = currentBottom -
+                                        elementBounds.height +
+                                        (insetBottom - elementTop);
                                     // Reposition the marginal.
-                                    el.style.top = newTop + "px";
+                                    el.style.top = newTop + 'px';
                                     // Update the new bottom.
-                                    currentBottom = newTop + elementBounds.height;
+                                    currentBottom =
+                                        newTop + elementBounds.height;
                                 }
                             }
                         });
                     }
                     // Reposition the marginal horizontally.
-                    el.style.left = "calc(2rem + " + margin + "px)";
+                    el.style.left = 'calc(2rem + ' + margin + 'px)';
                 }
             }
         }
         // If it's fixed, remove any explicitly set inline values.
         else {
-            el.style.removeProperty("top");
-            el.style.removeProperty("left");
+            el.style.removeProperty('top');
+            el.style.removeProperty('left');
         }
     });
 }

package/index.d.ts

@@ -0,0 +1,14 @@
+export { default as TableOfContents } from "./components/page/TableOfContents.svelte";
+export { default as Search } from "./components/page/Search.svelte";
+export { default as Index } from "./components/page/Index.svelte";
+export { default as References } from "./components/page/References.svelte";
+export { default as PossibleChapter } from "./components/page/PossibleChapter.svelte";
+export { default as Media } from "./components/page/Media.svelte";
+export { default as Print } from "./components/page/Print.svelte";
+export { default as Glossary } from "./components/page/Glossary.svelte";
+export { default as Edition } from "./components/page/Edition.svelte";
+export { default as Feedback } from "./components/app/Feedback.svelte";
+export { default as Loading } from "./components/page/Loading.svelte";
+export { default as EditionModel } from "./models/book/Edition";
+export { EDITION } from "./components/page/Contexts";
+export { Schema } from "./models/book/Schema";

package/index.js

@@ -0,0 +1,14 @@
+export { default as TableOfContents } from './components/page/TableOfContents.svelte';
+export { default as Search } from './components/page/Search.svelte';
+export { default as Index } from './components/page/Index.svelte';
+export { default as References } from './components/page/References.svelte';
+export { default as PossibleChapter } from './components/page/PossibleChapter.svelte';
+export { default as Media } from './components/page/Media.svelte';
+export { default as Print } from './components/page/Print.svelte';
+export { default as Glossary } from './components/page/Glossary.svelte';
+export { default as Edition } from './components/page/Edition.svelte';
+export { default as Feedback } from './components/app/Feedback.svelte';
+export { default as Loading } from './components/page/Loading.svelte';
+export { default as EditionModel } from './models/book/Edition';
+export { EDITION } from './components/page/Contexts';
+export { Schema } from './models/book/Schema';

package/models/CRUD.d.ts

@@ -0,0 +1,17 @@
+import { DocumentReference } from 'firebase/firestore';
+import Edition from './book/Edition';
+import Book from './book/Book';
+import type { ChapterContent } from './book/Chapter';
+export declare function getPublishedBooks(): Promise<Book[]>;
+export declare function getUserBooks(userID: string): Promise<Book[] | null>;
+export declare function getBookFromIDOrName(bookIDOrName: string): Promise<Book | null>;
+export declare function readBook(bookID: string): Promise<Book | null>;
+export declare function readEdition(editionID: string): Promise<Edition>;
+export declare const createBook: (userID: string) => Promise<string>;
+export declare function createNewEdition(book: Book): Promise<Book>;
+export declare const updateEdition: (previousEdition: Edition | undefined, newEdition: Edition) => Promise<Edition>;
+export declare function updateBook(book: Book): Promise<void>;
+export declare function readChapterText(chapterRef: DocumentReference): Promise<ChapterContent>;
+export declare function isSubdomainAvailable(subdomain: string, book: Book): Promise<boolean>;
+export declare function getBookIDFromName(subdomain: string): Promise<string | null>;
+export declare function publish(book: Book, index: number): Promise<string | undefined>;

package/models/CRUD.js

@@ -0,0 +1,207 @@
+import { db, functions } from './Firebase';
+import { collection, getDocs, getDoc, setDoc, doc, addDoc, query, where, deleteDoc, DocumentReference, } from 'firebase/firestore';
+import { getFunctions, httpsCallable } from 'firebase/functions';
+import Edition from './book/Edition';
+import Book from './book/Book';
+export async function getPublishedBooks() {
+    if (!db)
+        throw Error("Can't retrieve books, not connected to the database.");
+    try {
+        const data = await getDocs(collection(db, 'books'));
+        return data.docs
+            .map((doc) => Book.fromJSON(doc.ref, doc.data()))
+            .filter((book) => book.hasPublishedEdition());
+    }
+    catch {
+        throw Error("Couldn't load books, problem reading from the database.");
+    }
+}
+export async function getUserBooks(userID) {
+    if (!db)
+        throw Error("Can't retrieve user's books, not connected to Firebase.");
+    try {
+        const books = await getDocs(query(collection(db, 'books'), where('uids', 'array-contains', userID)));
+        return books.docs.map((doc) => Book.fromJSON(doc.ref, doc.data()));
+    }
+    catch (err) {
+        console.error(err);
+        return null;
+    }
+}
+export async function getBookFromIDOrName(bookIDOrName) {
+    const book = await readBook(bookIDOrName);
+    if (book)
+        return book;
+    const bookID = await getBookIDFromName(bookIDOrName);
+    return bookID !== null ? readBook(bookID) : null;
+}
+export async function readBook(bookID) {
+    if (!db)
+        return null;
+    const bookRef = doc(db, 'books', bookID);
+    const book = await getDoc(bookRef);
+    return !book.exists()
+        ? null
+        : Book.fromJSON(bookRef, book.data());
+}
+export async function readEdition(editionID) {
+    if (!db)
+        throw Error("Can't retrieve edition, not connected to Firebase.");
+    const editionDoc = await getDoc(doc(db, 'editions', editionID));
+    if (!editionDoc.exists())
+        throw Error('' + editionID + " doesn't exist");
+    // TODO We should really be doing some validation here.
+    let edition = editionDoc.data();
+    // Go through each of the edition's chapters and get its text.
+    for (const chapter of edition.chapters) {
+        if (chapter.ref) {
+            const { text } = await readChapterText(chapter.ref);
+            chapter.text = text;
+        }
+    }
+    return Edition.fromJSON(editionDoc.ref, edition);
+}
+export const createBook = async (userID) => {
+    if (!db)
+        throw Error("Can't create book, not connected to Firebase.");
+    // Make a new default edition with a single chapter with this user id.
+    let newEdition = new Edition(undefined, undefined, [userID], 'Untitled', [], {}, '', [], 'All rights reserved.', '', [], {}, {}, {}, {}, null).withNewChapter();
+    // Add the edition to the editions collection in the database so we can get an edition ref.
+    const editionRef = await addDoc(collection(db, 'editions'), newEdition.toObject());
+    // Remember the ref.
+    newEdition = newEdition.withRef(editionRef);
+    // Note that we don't create a sub-collection of chapters here.
+    // Firestore creates sub-collections automatically when documents are added.
+    // Create a new book with the draft first edition and the user ID.
+    const newBook = {
+        title: '',
+        authors: [],
+        description: '',
+        cover: null,
+        editions: [
+            {
+                ref: editionRef,
+                time: Date.now(),
+                summary: '',
+                published: false,
+            },
+        ],
+        uids: [userID],
+    };
+    // Create the book
+    const bookRef = await addDoc(collection(db, 'books'), newBook);
+    // Update all of the changes to the edition in Firestore, persisting the refs and chapter text.
+    await updateEdition(undefined, newEdition);
+    // Return the book id
+    return bookRef.id;
+};
+export async function createNewEdition(book) {
+    if (!db)
+        throw Error("Can't publish draft, no Firebase connection.");
+    // Get the latest draft.
+    const latestDraft = await book.getDraftEdition();
+    if (latestDraft === undefined)
+        return book;
+    // Make a copy without chapter and edition refs, because we want to create new ones.
+    const newEdition = latestDraft.withoutRefs();
+    // Create a copy of the existing draft as a new edition, but without any chapter refs.
+    const newEditionRef = await addDoc(collection(db, 'editions'), newEdition.toObject());
+    // Update the edition, creating chapter text as necessary.
+    updateEdition(undefined, newEdition.withRef(newEditionRef));
+    // Put the new edition in the book.
+    const revisions = book.getEditions();
+    revisions.unshift({
+        ref: newEditionRef,
+        time: Date.now(),
+        summary: '',
+        published: false,
+    });
+    book = book.withRevisions(revisions);
+    // Return the revised Book's revision.'
+    updateBook(book);
+    return book;
+}
+export const updateEdition = async (previousEdition, newEdition) => {
+    if (!db)
+        throw Error("Can't update edition, not connected to Firebase.");
+    // Get the reference to the edition, fail if we don't have one.
+    const editionRef = newEdition.getRef();
+    if (!editionRef)
+        throw Error('Book given has no ID');
+    // Create any new chapters that aren't in the current edition, and update text if it changed.
+    for (const newChapter of newEdition.chapters) {
+        if (newChapter.ref === undefined) {
+            // Make the new chapter's text.
+            const newChapterRef = await addDoc(collection(db, `editions/${editionRef.id}/chapters`), { text: newChapter.text });
+            // Add the ref of the new chapter to the revised chapter.
+            newEdition = newEdition.withRevisedChapter(newChapter, newChapter.withRef(newChapterRef));
+        }
+        // If we have a previous version, did the text change? If so, update it.
+        else if (previousEdition) {
+            const previousChapter = previousEdition.getChapterByRef(newChapter.ref);
+            if (previousChapter && newChapter.text !== previousChapter.text) {
+                await setDoc(doc(db, `editions/${editionRef.id}/chapters`, newChapter.ref.id), { text: newChapter.text });
+            }
+        }
+    }
+    // Remove any chapters from Firebase that are removed.
+    if (previousEdition) {
+        for (const previousChapter of previousEdition.chapters) {
+            if (previousChapter.ref &&
+                newEdition.getChapterByRef(previousChapter.ref) === undefined) {
+                await deleteDoc(previousChapter.ref);
+            }
+        }
+    }
+    // Finally, update the edition's document.
+    await setDoc(doc(db, 'editions', editionRef.id), newEdition.toObject());
+    return newEdition;
+};
+export async function updateBook(book) {
+    if (!db)
+        throw Error("Can't update book, not connected to Firebase.");
+    await setDoc(doc(db, 'books', book.getRefID()), book.toJSON());
+}
+export async function readChapterText(chapterRef) {
+    if (!db)
+        throw Error('Not connected to Firebase.');
+    const text = await getDoc(chapterRef);
+    if (!text.exists())
+        throw Error('Chapter text does not exist.');
+    return text.data();
+}
+export async function isSubdomainAvailable(subdomain, book) {
+    if (!db)
+        throw Error('Not connected to Firebase.');
+    const matches = await getDocs(query(collection(db, 'books'), where('domain', '==', subdomain)));
+    return matches.empty || matches.docs[0].id === book.getRefID();
+}
+export async function getBookIDFromName(subdomain) {
+    if (!db)
+        throw Error("Can't find book ID from URL, not connected to Firebase.");
+    const matches = await getDocs(query(collection(db, 'books'), where('domain', '==', subdomain)));
+    if (!matches.empty)
+        return matches.docs[0].id;
+    else
+        return null;
+}
+export async function publish(book, index) {
+    if (!db)
+        throw Error("Can't publish, no Firebase connection.");
+    if (!functions)
+        throw Error("Can't publish, no connection to Firebase functions.");
+    const edition = await book.getEditionNumber(index + 1);
+    if (edition === undefined)
+        return `Couldn't find edition ${index} number to publish`;
+    const editionRef = edition.getRef();
+    if (editionRef === undefined)
+        return `Couldn't find edition to publish`;
+    const publishEdition = httpsCallable(functions, 'publishEdition');
+    const result = await publishEdition({
+        book: book.getRef().id,
+        edition: editionRef.id,
+    });
+    return result.data;
+    // Update the edition's published status in the book.
+    // await updateBook(book.withEditionAsPublished(true, index));
+}

package/models/Firebase.d.ts

@@ -2,3 +2,4 @@ export declare const app: import("@firebase/app").FirebaseApp | undefined;
 export declare const auth: import("@firebase/auth").Auth | undefined;
 export declare const db: import("@firebase/firestore").Firestore | undefined;
 export declare const storage: import("@firebase/storage").FirebaseStorage | undefined;
+export declare const functions: import("@firebase/functions").Functions | undefined;

package/models/Firebase.js

@@ -1,26 +1,32 @@
-import { initializeApp } from "firebase/app";
-import { connectAuthEmulator, getAuth } from "firebase/auth";
-import { connectFirestoreEmulator, getFirestore } from "firebase/firestore";
-import { connectStorageEmulator, getStorage } from "firebase/storage";
-const isReader = import.meta.env.VITE_READER === "true";
+import { initializeApp } from 'firebase/app';
+import { connectAuthEmulator, getAuth } from 'firebase/auth';
+import { connectFirestoreEmulator, getFirestore } from 'firebase/firestore';
+import { connectFunctionsEmulator, getFunctions } from 'firebase/functions';
+import { connectStorageEmulator, getStorage } from 'firebase/storage';
+const isReader = import.meta.env.VITE_READER === 'true';
 // Initialize Firebase using the environment variables provided at build time.
 // Only do this if we have environment variables defined. (We won't in the standalone Reader).
-export const app = isReader ? undefined : initializeApp({
-    apiKey: import.meta.env.VITE_BOOKISH_FIREBASE_API_KEY,
-    authDomain: import.meta.env.VITE_BOOKISH_AUTH_DOMAIN,
-    projectId: import.meta.env.VITE_BOOKISH_PROJECT_ID,
-    storageBucket: import.meta.env.VITE_BOOKISH_STORAGE_BUCKET,
-    messagingSenderId: import.meta.env.VITE_BOOKISH_MESSAGING_SENDER_ID,
-    appId: import.meta.env.VITE_BOOKISH_APP_ID
-});
+export const app = isReader
+    ? undefined
+    : initializeApp({
+        apiKey: import.meta.env.VITE_BOOKISH_FIREBASE_API_KEY,
+        authDomain: import.meta.env.VITE_BOOKISH_AUTH_DOMAIN,
+        projectId: import.meta.env.VITE_BOOKISH_PROJECT_ID,
+        storageBucket: import.meta.env.VITE_BOOKISH_STORAGE_BUCKET,
+        messagingSenderId: import.meta.env.VITE_BOOKISH_MESSAGING_SENDER_ID,
+        appId: import.meta.env.VITE_BOOKISH_APP_ID,
+    });
 export const auth = isReader ? undefined : getAuth();
 export const db = isReader ? undefined : getFirestore();
 export const storage = isReader ? undefined : getStorage();
+export const functions = isReader ? undefined : getFunctions();
 if (!isReader && import.meta.env.DEV) {
     if (db)
         connectFirestoreEmulator(db, 'localhost', 8080);
     if (auth)
-        connectAuthEmulator(auth, "http://localhost:9099");
+        connectAuthEmulator(auth, 'http://localhost:9099');
     if (storage)
-        connectStorageEmulator(storage, "localhost", 9199);
+        connectStorageEmulator(storage, 'localhost', 9199);
+    if (functions)
+        connectFunctionsEmulator(functions, 'localhost', 5001);
 }