bookish-press 0.4.36 → 0.4.38

package/components/chapter/Embed.svelte

@@ -1,7 +1,7 @@
 <svelte:options immutable={true} />
 
 <script>import { storage } from '../../models/Firebase';
-import { getCaret, getBook } from '../page/Contexts';
+import { getCaret, getBook, getBase } from '../page/Contexts';
 import Figure from './Figure.svelte';
 import { getContext } from 'svelte';
 export let node;
@@ -12,6 +12,7 @@ $: url = node.getURL();
 $: description = node.getDescription();
 let caret = getCaret();
 let book = getBook();
+let base = getBase();
 // Bookish editor should have passed down a way to set the active editor.
 let claimCaret = getContext('claimeditor');
 let dragging = false;
@@ -130,7 +131,7 @@ function handleClick() {
         {:else}
             <img
                 class={'bookish-figure-image'}
-                src={url.startsWith('http') ? url : 'images/' + url}
+                src={url.startsWith('http') ? url : `${$base}/images/${url}`}
                 srcset={node.hasSmallURL()
                     ? `${node.getSmallURL()} 320w, ${url} 1024w`
                     : undefined}

package/components/chapter/Link.svelte

@@ -40,13 +40,13 @@ function isInvalidChapterLink() {
         <a href={'#' + url.split(':')[1]}><Text node={content} /></a>
     {:else}
         <!-- If it is specified, include the base relative chapter ID and the label -->
-        <a href={`${$base}${url.split(':')[0]}#${url.split(':')[1]}`}
+        <a href={`${$base}/${url.split(':')[0]}#${url.split(':')[1]}`}
             ><Text node={content} /></a
         >
     {/if}
 {:else}
     <!-- If this is internal link, make a route link to the chapter. -->
-    <a href={`${$base}${url}`}><Text node={content} /></a>
+    <a href={`${$base}/${url}`}><Text node={content} /></a>
 {/if}
 
 <style>

package/components/page/EditionLoader.svelte

@@ -91,8 +91,8 @@ onDestroy(() => {
     <Edition
         edition={$edition}
         base={write
-            ? `/write/${$book.getRefID()}/${$edition.getEditionNumber()}/`
-            : `/${$book.getSubdomain() ?? $book.getRefID()}/`}
+            ? `/write/${$book.getRefID()}/${$edition.getEditionNumber()}`
+            : `/${$book.getSubdomain() ?? $book.getRefID()}`}
     >
         <slot />
     </Edition>

package/components/page/Index.svelte

@@ -81,7 +81,7 @@ $: {
             <nav class="letters">
                 {#each 'abcdefghijklmnopqrstuvwxyz'.split('') as symbol, index}
                     {#if symbol in letters && letter !== symbol}
-                        <Link to={$base + 'index/' + symbol}>{symbol}</Link>
+                        <Link to="{$base}/index/{symbol}">{symbol}</Link>
                     {:else if letter === symbol}
                         <strong
                             ><span style="font-size: 200%">{symbol}</span
@@ -122,7 +122,7 @@ $: {
                                             {/if}</ChapterNumber
                                         >
                                         <ChapterTitle
-                                            link={`${$base}${chapterID}?word=${word}`}
+                                            link={`${$base}/${chapterID}?word=${word}`}
                                             >{$edition.getChapterName(
                                                 chapterID
                                             )}</ChapterTitle

package/components/page/MediaPreview.svelte

@@ -1,9 +1,14 @@
-<script>export let url;
+<script>import { getBase } from './Contexts';
+export let url;
 export let alt;
+let base = getBase();
 </script>
 
 <figure class={'media-preview'}>
-    <img src={url} {alt} />
+    <img
+        src={url.startsWith('http') ? url : `${$base}/images/small/${url}`}
+        {alt}
+    />
     <figcaption class="credit"><slot /></figcaption>
 </figure>
 

package/components/page/Outline.svelte

@@ -140,7 +140,7 @@ let darkLabel = '\u263E';
     <div class="outline-headers">
         <!-- Book navigation links -->
         <div class="outline-header-nav">
-            {#if previous !== null}<Link to={$base + previous}
+            {#if previous !== null}<Link to="{$base}/{previous}">
                     >{previousLabel}</Link
                 >{:else}<span class="outline-header-nav-disabled"
                     >{previousLabel}</span
@@ -148,7 +148,7 @@ let darkLabel = '\u263E';
             &nbsp;&middot;&nbsp;
             <Link to="{$base}/">Home</Link>
             &nbsp;&middot;&nbsp;
-            {#if next !== null}<Link to={$base + next}>{nextLabel}</Link
+            {#if next !== null}<Link to="{$base}/{next}">{nextLabel}</Link
                 >{:else}<span class="outline-header-nav-disabled"
                     >{nextLabel}</span
                 >{/if}

package/components/page/Search.svelte

@@ -45,7 +45,7 @@ $: {
                             .toLowerCase()
                             .indexOf(lowerQuery);
                         results.push({
-                            link: `${$base}${chapter.getID()}?word=${match.match.toLowerCase()}&number=${index}`,
+                            link: `${$base}/${chapter.getID()}?word=${match.match.toLowerCase()}&number=${index}`,
                             left: match.left +
                                 match.match.substring(0, start),
                             match: match.match.substring(start, start + query.length),

package/components/page/TableOfContents.svelte

@@ -119,9 +119,8 @@ function addChapter() {
         <Description />
 
         <Instructions {editable}>
-            This will appear on the <Link to={$base + 'read'}
-                >book browsing</Link
-            > page and in your table of contents. Write an informative description
+            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>
 
@@ -255,7 +254,7 @@ function addChapter() {
 
         <PageParagraph>
             Want to print this book or generate a PDF? See <Link
-                to={$base + 'print'}>all chapters on a single page</Link
+                to="{$base}/print">all chapters on a single page</Link
             > and then print or export. Long books can take some time to render.
         </PageParagraph>
 

package/components/page/TableOfContentsImage.svelte

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

package/components/page/TableOfContentsRow.svelte

@@ -53,8 +53,9 @@ function moveDown() {
             <ChapterNumber>{'Chapter ' + number}</ChapterNumber>
         {/if}
         <ChapterTitle
-            link={forthcoming && !editable ? undefined : `${$base}${chapterID}`}
-            >{title}</ChapterTitle
+            link={forthcoming && !editable
+                ? undefined
+                : `${$base}/${chapterID}`}>{title}</ChapterTitle
         >
         <p><Muted><em><slot name="annotation" /></em></Muted></p>
     </td>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bookish-press",
   "private": false,
-  "version": "0.4.36",
+  "version": "0.4.38",
   "type": "module",
   "description": "A platform for reading and writing readable, accessible, beautiful online books.",
   "license": "MIT",