chore: extract all API URLs into a global variable

webui/src/components/display/BlobPreview.svelte

@@ -5,6 +5,7 @@
   import ModelViewer from "./blobs/ModelViewer.svelte";
   import VideoViewer from "./blobs/VideoViewer.svelte";
   import HashBadge from "./HashBadge.svelte";
+  import { API_URL } from "../../lib/api";
 
   export let address: string;
 
@@ -36,7 +37,7 @@
 {#if handled}
   <div class="preview">
     {#if model}
-      <ModelViewer lookonly src="api/raw/{address}" />
+      <ModelViewer lookonly src="{API_URL}/raw/{address}" />
     {:else if web}
       {#if imageLoaded != address}
         <Spinner />
@@ -59,7 +60,7 @@
           </div>
         {/if}
         <img
-          src="api/thumb/{address}"
+          src="{API_URL}/thumb/{address}"
           alt="Thumbnail for {address}..."
           on:load={() => (imageLoaded = address)}
           on:error={() => (handled = false)}

webui/src/components/display/BlobViewer.svelte

@@ -8,6 +8,7 @@
   import TextViewer from "./blobs/TextViewer.svelte";
   import VideoViewer from "./blobs/VideoViewer.svelte";
   import UpLink from "./UpLink.svelte";
+  import { API_URL } from "../../lib/api";
 
   export let address: string;
   export let editable: boolean;
@@ -58,12 +59,12 @@
     {/if}
     {#if pdf}
       <iframe
-        src="api/raw/{address}?inline"
+        src="{API_URL}/raw/{address}?inline"
         title="PDF document of {address}"
       />
     {/if}
     {#if model}
-      <ModelViewer src="api/raw/{address}" />
+      <ModelViewer src="{API_URL}/raw/{address}" />
     {/if}
     {#if web}
       {#if imageLoaded != address}

webui/src/components/display/UpObject.svelte

@@ -5,7 +5,7 @@
   import Ellipsis from "../utils/Ellipsis.svelte";
   import UpLink from "./UpLink.svelte";
   import { useEntity } from "../../lib/entity";
-  import { nativeOpen as nativeOpenApi } from "../../lib/api";
+  import { API_URL, nativeOpen as nativeOpenApi } from "../../lib/api";
   import { readable } from "svelte/store";
   import { notify, UpNotification } from "../../notifications";
   import IconButton from "../utils/IconButton.svelte";
@@ -89,7 +89,7 @@
     <div class="separator" />
     <div class="label" class:resolving title={displayLabel}>
       {#if banner && isFile}
-        <a href="api/raw/{address}">
+        <a href="{API_URL}/raw/{address}">
           <Ellipsis value={displayLabel} />
         </a>
       {:else if link}

webui/src/components/display/blobs/AudioViewer.svelte

@@ -5,6 +5,7 @@
   import type WaveSurfer from "wavesurfer.js";
   import type { Region, RegionParams } from "wavesurfer.js/src/plugin/regions";
   import {
+    API_URL,
     deleteEntry,
     fetchEntity,
     putEntityAttribute,
@@ -201,7 +202,7 @@
       setTimeout(() => wavesurfer.setCurrentTime(region.start));
     });
 
-    wavesurfer.load(`api/raw/${address}`);
+    wavesurfer.load(`${API_URL}/raw/${address}`);
   });
 </script>
 

webui/src/components/display/blobs/FragmentViewer.svelte

@@ -4,6 +4,7 @@
   export let address: string;
   export let detail: boolean;
   import { xywh } from "../../../util/fragments/xywh";
+  import { API_URL } from "../../../lib/api";
 
   const { entity } = useEntity(address);
 
@@ -20,7 +21,7 @@
     <img
       class="preview-image"
       class:imageLoaded
-      src="api/{detail ? 'raw' : 'thumb'}/{objectAddress}#{$entity?.get(
+      src="{API_URL}/{detail ? 'raw' : 'thumb'}/{objectAddress}#{$entity?.get(
         'W3C_FRAGMENT_SELECTOR'
       )}"
       use:xywh

webui/src/components/display/blobs/ImageViewer.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import type { IEntry } from "upend/types";
 
-  import { deleteEntry, fetchEntity, putEntry } from "../../../lib/api";
+  import {
+    API_URL,
+    deleteEntry,
+    fetchEntity,
+    putEntry,
+  } from "../../../lib/api";
   import { useEntity } from "../../../lib/entity";
   import IconButton from "../../utils/IconButton.svelte";
   import Spinner from "../../utils/Spinner.svelte";
@@ -226,7 +231,7 @@
   >
     <img
       class="preview-image"
-      src="api/{detail ? 'raw' : 'thumb'}/{address}"
+      src="{API_URL}/{detail ? 'raw' : 'thumb'}/{address}"
       alt={address}
       on:load={loaded}
       bind:this={imageEl}

webui/src/components/display/blobs/VideoViewer.svelte

@@ -2,6 +2,7 @@
   import { throttle } from "lodash";
   import Spinner from "../../utils/Spinner.svelte";
   import Icon from "../../utils/Icon.svelte";
+  import { API_URL } from "../../../lib/api";
 
   export let address: string;
   export let detail: boolean;
@@ -68,7 +69,7 @@
       <!-- svelte-ignore a11y-mouse-events-have-key-events -->
       <img
         class="thumb"
-        src="api/thumb/{address}?mime=video"
+        src="{API_URL}/thumb/{address}?mime=video"
         alt="Preview for {address}"
         on:load={() => (state = State.PREVIEW)}
         on:mouseover={() => (state = State.PREVIEWING)}
@@ -78,8 +79,8 @@
       <!-- svelte-ignore a11y-media-has-caption -->
       <video
         preload={detail ? "auto" : "metadata"}
-        src="api/raw/{address}"
-        poster="api/thumb/{address}?mime=video"
+        src="{API_URL}/raw/{address}"
+        poster="{API_URL}/thumb/{address}?mime=video"
         on:mousemove={updatePreviewPosition}
         on:mouseleave={resetPreview}
         on:click|preventDefault={startPlaying}

webui/src/lib/api.ts

@@ -13,15 +13,17 @@ import type {
 } from "upend/types";
 import type { EntityListing } from "./entity";
 
+export const API_URL = "api";
+
 export async function fetchEntity(address: string): Promise<UpObject> {
-  const entityFetch = await fetch(`api/obj/${address}`);
+  const entityFetch = await fetch(`${API_URL}/obj/${address}`);
   const entityResult = (await entityFetch.json()) as EntityListing;
   const entityListing = new UpListing(entityResult.entries);
   return entityListing.getObject(address);
 }
 
 export async function fetchEntry(address: string) {
-  const response = await fetch(`api/raw/${address}`);
+  const response = await fetch(`${API_URL}/raw/${address}`);
   const data = await response.json();
   const listing = new UpListing({ address: data });
   return listing.entries[0];
@@ -36,7 +38,11 @@ export async function queryOnce(query: string): Promise<UpListing> {
     if (!inFlightRequests[query]) {
       console.debug(`Querying: ${query}`);
       inFlightRequests[query] = new Promise((resolve, reject) => {
-        fetch("api/query", { method: "POST", body: query, keepalive: true })
+        fetch(`${API_URL}/query`, {
+          method: "POST",
+          body: query,
+          keepalive: true,
+        })
           .then(async (response) => {
             resolve(new UpListing(await response.json()));
           })
@@ -53,7 +59,7 @@ export async function queryOnce(query: string): Promise<UpListing> {
 }
 
 export async function putEntry(entry: InEntry): Promise<PutResult> {
-  const response = await fetch(`api/obj`, {
+  const response = await fetch(`${API_URL}/obj`, {
     method: "PUT",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(entry),
@@ -67,7 +73,7 @@ export async function putEntityAttribute(
   attribute: string,
   value: IValue
 ): Promise<Address> {
-  const response = await fetch(`api/obj/${entity}/${attribute}`, {
+  const response = await fetch(`${API_URL}/obj/${entity}/${attribute}`, {
     method: "PUT",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(value),
@@ -80,7 +86,7 @@ export async function uploadFile(file: File): Promise<PutResult> {
   const formData = new FormData();
   formData.append("file", file);
 
-  const response = await fetch("api/obj", {
+  const response = await fetch(`${API_URL}/obj`, {
     method: "PUT",
     body: formData,
   });
@@ -93,42 +99,42 @@ export async function uploadFile(file: File): Promise<PutResult> {
 }
 
 export async function deleteEntry(address: Address): Promise<void> {
-  await fetch(`api/obj/${address}`, { method: "DELETE" });
+  await fetch(`${API_URL}/obj/${address}`, { method: "DELETE" });
 }
 
 export async function getRaw(address: Address, preview = false) {
-  return await fetch(`api/${preview ? "thumb" : "raw"}/${address}`);
+  return await fetch(`${API_URL}/${preview ? "thumb" : "raw"}/${address}`);
 }
 
 export async function refreshVault() {
-  return await fetch("api/refresh", { method: "POST" });
+  return await fetch(`${API_URL}/refresh`, { method: "POST" });
 }
 
 export async function nativeOpen(address: Address) {
-  return fetch(`api/raw/${address}?native=1`);
+  return fetch(`${API_URL}/raw/${address}?native=1`);
 }
 
 export async function fetchRoots(): Promise<ListingResult> {
-  const response = await fetch("api/hier_roots");
+  const response = await fetch(`${API_URL}/hier_roots`);
   return await response.json();
 }
 
 export async function fetchJobs(): Promise<IJob[]> {
-  const response = await fetch("api/jobs");
+  const response = await fetch(`${API_URL}/jobs`);
   return await response.json();
 }
 
 export async function fetchAllAttributes(): Promise<AttributeListingResult> {
-  const response = await fetch("api/all/attributes");
+  const response = await fetch(`${API_URL}/all/attributes`);
   return await response.json();
 }
 
 export async function fetchInfo(): Promise<VaultInfo> {
-  const response = await fetch("api/info");
+  const response = await fetch(`${API_URL}/info`);
   return await response.json();
 }
 
 export async function fetchStoreInfo(): Promise<StoreInfo> {
-  const response = await fetch("api/store");
+  const response = await fetch(`${API_URL}/store`);
   return await response.json();
 }

webui/src/lib/entity.ts

@@ -3,6 +3,7 @@ import { derived, type Readable } from "svelte/store";
 import { UpListing, UpObject } from "upend";
 import type { ListingResult } from "upend/types";
 import { useSWR } from "../util/fetch";
+import { API_URL } from "./api";
 
 export type EntityInfo =
   | {
@@ -20,7 +21,7 @@ export interface EntityListing {
 
 export function useEntity(address: string) {
   const { data, error, revalidate } = useSWR<EntityListing, unknown>(
-    `api/obj/${address}`
+    `${API_URL}/obj/${address}`
   );
 
   const entity: Readable<UpObject | undefined> = derived(data, ($listing) => {
@@ -50,7 +51,7 @@ export function useEntity(address: string) {
 export function query(query: string) {
   console.debug(`Querying: ${query}`);
   const { data, error, revalidate } = useSWR<ListingResult, unknown>(
-    "api/query",
+    `${API_URL}/query`,
     { method: "POST", body: query }
   );