changes to deal with relative base URL

astro.config.mjs

@@ -7,5 +7,7 @@ import vue from '@astrojs/vue';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), vue()]
+  integrations: [tailwind(), vue()],
+  site: 'https://www.leventhalmap.org',
+  base: '/digital-exhibitions/becoming-boston'
 });

src/components/LocationsNav.astro

@@ -1,6 +1,11 @@
 ---
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
+import { Image } from 'astro:assets';
+
+import arrowRight from '../assets/arrow-right.svg'
+import arrowLeft from '../assets/arrow-left.svg'
+
 
 interface Props {
   current: CollectionEntry<'themes'>;
@@ -30,22 +35,22 @@ entries.forEach((entry, i) => {
 <div class="sticky top-0 inset-x-0 px-4 py-2 z-50 bg-midnight border-t-2 border-pewter text-white text-base tracking-tighter">
   <div class="w-full flex justify-between text-xs leading-none">
     {previousEntry && 
-      <a class="inline-flex items-center mr-auto" href={'/themes/' + previousEntry.slug}>
-        <img class="h-4 w-auto mr-1" src="/arrow-left.svg" alt="Left arrow" />
+      <a class="inline-flex items-center mr-auto" href={import.meta.env.BASE_URL + '/themes/' + previousEntry.slug}>
+        <Image class="h-4 w-auto mr-1" src={arrowLeft} alt="Left arrow" />
         Previous
       </a>
     }
     {nextEntry && 
-      <a class="inline-flex items-center ml-auto" href={'/themes/' + nextEntry.slug}>
+      <a class="inline-flex items-center ml-auto" href={import.meta.env.BASE_URL + '/themes/' + nextEntry.slug}>
         Next
-        <img class="h-4 w-auto ml-1" src="/arrow-right.svg" alt="Right arrow" />
+        <Image class="h-4 w-auto ml-1" src={arrowRight} alt="Right arrow" />
       </a>
     }
   </div>
   <nav class="flex flex-wrap justify-between xl:text-lg 2xl:text-xl">
     {entries.map((entry) => (
       ((previousEntry && previousEntry.id == entry.id) || (nextEntry && nextEntry.id == entry.id)) && (
-        <a class={`inline-block hover:underline ${(previousEntry && previousEntry.id == entry.id) ? 'mr-auto' : ''} ${(nextEntry && nextEntry.id == entry.id) ? 'ml-auto' : ''}`} href={'/themes/' + entry.slug}>{entry.data.title}</a>
+        <a class={`inline-block hover:underline ${(previousEntry && previousEntry.id == entry.id) ? 'mr-auto' : ''} ${(nextEntry && nextEntry.id == entry.id) ? 'ml-auto' : ''}`} href={import.meta.env.BASE_URL + '/themes/' + entry.slug}>{entry.data.title}</a>
       )
     ))}
   </nav>

src/components/ObjectRecord.vue

@@ -19,7 +19,7 @@ import OpenSeadragon from '@components/OpenSeadragon.vue';
                     :id="uuidv4()"
                     :options="{
                       tileSources: [objectInfo.image_source.src],
-                      prefixUrl: '/openseadragon/',
+                      prefixUrl: '/digital-exhibitions/becoming-boston/openseadragon/',
                       preserveViewport: true,
                       visibilityRatio: 1,
                       defaultZoomLevel: 0,

src/layouts/Layout.astro

@@ -1,6 +1,10 @@
 ---
 import { SEO } from "astro-seo";
 
+import { Image } from 'astro:assets';
+import brandLogo from '../assets/brand-logo.png';
+import lmecLogo from '../assets/lmec-logo.png';
+
 interface Props {
 	title?: string;
 	description?: string;
@@ -51,8 +55,8 @@ const metaImage = "https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:js95
 		{!hideHeader &&
 			<header class="bg-midnight text-pewter">
 				<div class="container mx-auto px-5 py-5">
-					<a class="inline-block" href="/">
-						<img class="block mt-2 h-10" src="/brand-logo.png" alt="Becoming Boston" />
+					<a class="inline-block" href={import.meta.env.BASE_URL}>
+						<Image class="block mt-2 h-10 w-auto" src={brandLogo} alt="Becoming Boston" />
 					</a>
 				</div>
 			</header>
@@ -64,14 +68,14 @@ const metaImage = "https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:js95
 			<div class="container mx-auto px-5 py-8 sm:py-14">
 				<div class="flex flex-wrap justify-start items-end space-x-8 pb-6 mb-4 sm:pb-10 sm:mb-6 xl:pb-14 xl:space-x-16">
 					<a href="https://www.leventhalmap.org/" target="_blank">
-						<img class="h-10 w-auto sm:h-10 xl:h-18" src="/lmec-logo.png" alt="Normal V. Leventhal Map & Education Center logo" />
+						<Image class="h-10 w-auto sm:h-10 xl:h-18" src={lmecLogo} alt="Normal V. Leventhal Map & Education Center logo" />
 					</a>
 					<a href="https://www.leventhalmap.org/visit" class="mb-2 font-sans bg-cobalt rounded py-1 px-2 font-extrabold">Visit the exhibition in person</a>
 					<a href="https://www.leventhalmap.org/donate" class="mb-2 font-sans bg-cobalt rounded py-1 px-2 font-extrabold">Support LMEC</a>
 				</div>
 				<div class="mb-4 font-serif">
 					<p class="mb-2"><span class="bg-gray-300 rounded px-1 py-1 mr-1 text-midnight inline-block font-sans text-sm font-extrabold">Permissions</span> All content in this digital exhibition, with the exception of object images from collections other than the Leventhal Map & Education Center, is licensed on a <a href="https://creativecommons.org/licenses/by-nd/4.0/">Creative Commons BY-ND 4.0 License</a>.</p>
-					<p class="mb-2"><span class="bg-gray-300 rounded px-1 py-1 mr-1 text-midnight inline-block font-sans text-sm font-extrabold">Citation</span> Garrett Dash Nelson et al., “{ title },” in <i>Becoming Boston: Eight Moments in the Geography of a Changing City</i> (Leventhal Map & Education Center at the Boston Public Library, 2022). https://www.leventhalmap.org/digital-exhibitions/becoming-boston{ Astro.url.pathname }</p>
+					<p class="mb-2"><span class="bg-gray-300 rounded px-1 py-1 mr-1 text-midnight inline-block font-sans text-sm font-extrabold">Citation</span> Garrett Dash Nelson et al., “{ title ? title : "Introduction" },” in <i>Becoming Boston: Eight Moments in the Geography of a Changing City</i> (Leventhal Map & Education Center at the Boston Public Library, 2022). https://www.leventhalmap.org{ Astro.url.pathname }</p>
 					<p class="mb-2"><span class="bg-gray-300 rounded px-1 py-1 mr-1 text-midnight inline-block font-sans text-sm font-extrabold">Credits</span> This exhibition was curated by Garrett Dash Nelson, together with the staff of the Leventhal Map & Education Center, including Ezra Acevedo, Emily Bowe, Lauren Chen, Michelle LeBlanc, Lynn Brown, Ian Spangler, Rachel Sharer, and Megan Nally. The physical exhibition was designed by Joelle Riffle.</p>
 				</div>
 			</div>

src/pages/index.astro

@@ -3,6 +3,9 @@ import { getCollection } from 'astro:content';
 
 import Layout from '@layouts/Layout.astro';
 import Button from '@components/Button.astro';
+import { Image } from 'astro:assets';
+
+import brandLogo from '../assets/brand-logo.png';
 
 const entries = await getCollection('themes');
 entries.sort((a, b) => a.data.order - b.data.order);
@@ -17,9 +20,9 @@ const description = 'Becoming Boston: Eight Moments in the Geography of a Changi
         id="splash-image"
         class="absolute z-50 inset-0 w-full h-full flex justify-center items-center transition-opacity duration-1000 ease-in-out cursor-pointer"
       >
-        <img
+        <Image
           class="block m-auto w-3/4 max-w-3xl h-auto sm:w-1/2"
-          src="/brand-logo.png"
+          src={brandLogo}
           alt="Becoming Boston"
         />
       </div>
@@ -62,7 +65,7 @@ const description = 'Becoming Boston: Eight Moments in the Geography of a Changi
           <ul class="text-2xl xl:text-5xl">
             {entries.map((entry) => (
               <li class="mb-2">
-                <a class="hover:underline" href={'/themes/' + entry.slug}>{entry.data.title}</a>
+                <a class="hover:underline" href={import.meta.env.BASE_URL + '/themes/' + entry.slug}>{entry.data.title}</a>
               </li>
             ))}
           </ul>