feat: convert relative paths to absolute

Author: blacha

src/components/assets.tsx

@@ -8,11 +8,14 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { LuDownload } from "react-icons/lu";
-import type { StacAsset } from "stac-ts";
+import type { StacAsset, StacItem } from "stac-ts";
+import { makeAbsoluteUrl } from "../http";
 
 export default function Assets({
+  item,
   assets,
 }: {
+  item: StacItem;
   assets: { [k: string]: StacAsset };
 }) {
   return (
@@ -34,7 +37,7 @@ export default function Assets({
           <Card.Footer>
             <ButtonGroup size={"xs"} variant={"subtle"}>
               <IconButton asChild>
-                <a href={asset.href} target="_blank">
+                <a href={makeAbsoluteUrl(item, asset.href)} target="_blank">
                   <LuDownload></LuDownload>
                 </a>
               </IconButton>

src/components/catalog.tsx

@@ -6,10 +6,14 @@ import { ChildCard } from "./children";
 import { CollectionSearch } from "./search/collection";
 import Section from "./section";
 import Value from "./value";
+import { makeAbsoluteUrl } from "../http";
 
 export function Catalog({ catalog }: { catalog: StacCatalog }) {
   const { catalogs, collections } = useStacMap();
-  const selfHref = catalog.links?.find((link) => link.rel === "self")?.href;
+  const selfHref = makeAbsoluteUrl(
+    catalog,
+    catalog.links?.find((link) => link.rel === "self")?.href,
+  );
   return (
     <Stack>
       <Value value={catalog}></Value>

src/components/children.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import { MarkdownHooks } from "react-markdown";
 import type { StacCatalog, StacCollection } from "stac-ts";
 import useStacMap from "../hooks/stac-map";
+import { makeAbsoluteUrl } from "../http";
 
 export function Children({
   heading,
@@ -27,7 +28,10 @@ export function ChildCard({
   footer?: ReactNode;
 }) {
   const { setHref } = useStacMap();
-  const selfHref = child.links.find((link) => link.rel === "self")?.href;
+  const selfHref = makeAbsoluteUrl(
+    child,
+    child.links.find((link) => link.rel === "self")?.href,
+  );
 
   return (
     <Card.Root size={"sm"}>

src/components/item.tsx

@@ -19,7 +19,7 @@ export default function Item({ item }: { item: StacItem }) {
           </HStack>
         }
       >
-        <Assets assets={item.assets}></Assets>
+        <Assets item={item} assets={item.assets}></Assets>
       </Section>
     </Stack>
   );

src/components/value.tsx

@@ -7,6 +7,7 @@ import type { StacValue } from "../types/stac";
 import Section from "./section";
 import Thumbnail from "./thumbnail";
 import { Prose } from "./ui/prose";
+import { makeAbsoluteUrl } from "../http";
 
 export default function Value({
   value,
@@ -21,7 +22,11 @@ export default function Value({
     "thumbnail" in value.assets
       ? (value.assets.thumbnail as StacAsset)
       : undefined;
-  const selfHref = value.links?.find((link) => link.rel == "self")?.href;
+
+  const selfHref = makeAbsoluteUrl(
+    value,
+    value.links?.find((link) => link.rel == "self")?.href,
+  );
 
   return (
     <Section

src/hooks/stac-children-and-items.ts

@@ -1,7 +1,7 @@
 import { useInfiniteQuery, useQueries } from "@tanstack/react-query";
 import { useEffect } from "react";
 import type { StacCatalog, StacCollection, StacItem } from "stac-ts";
-import { fetchStac, fetchStacLink } from "../http";
+import { fetchStac, fetchStacLink, makeAbsoluteUrl } from "../http";
 import type { StacCollections, StacValue } from "../types/stac";
 
 import { booleanValid } from "@turf/boolean-valid";
@@ -29,7 +29,10 @@ export default function useStacChildrenAndItems(
 }
 
 function useStacCollections(value: StacValue | undefined) {
-  const href = value?.links?.find((link) => link.rel == "data")?.href;
+  const href = makeAbsoluteUrl(
+    value,
+    value?.links?.find((link) => link.rel == "data")?.href,
+  );
   const { data, isFetching, hasNextPage, fetchNextPage } =
     useInfiniteQuery<StacCollections | null>({
       queryKey: ["collections", href],
@@ -67,7 +70,7 @@ function useStacLinks(value: StacValue | undefined, href: string | undefined) {
         .map((link) => {
           return {
             queryKey: ["link", link, href],
-            queryFn: () => fetchStacLink(link, href),
+            queryFn: () => fetchStacLink(link, makeAbsoluteUrl(value, href)),
           };
         }) || [],
   });

src/http.ts

@@ -1,6 +1,9 @@
 import type { StacLink } from "stac-ts";
 import type { StacValue } from "./types/stac";
 
+export const SourceKey = Symbol("source");
+type StacValueWithSource = StacValue & { [SourceKey]?: string };
+
 export async function fetchStac(
   href: string | URL,
   method: "GET" | "POST" = "GET",
@@ -34,6 +37,7 @@ export async function fetchStacLink(link: StacLink, href?: string | undefined) {
 
 // eslint-disable-next-line
 function maybeAddSelfLink(value: any, href: string) {
+  value[SourceKey] = href;
   if (!(value as StacValue)?.links?.find((link) => link.rel == "self")) {
     const link = { href, rel: "self" };
     if (Array.isArray(value.links)) {
@@ -44,3 +48,21 @@ function maybeAddSelfLink(value: any, href: string) {
   }
   return value;
 }
+
+/**
+ * Attempt to convert a possibly relative URL to an absolute URL
+ * if the STAC document has been fetched via {@link fetchStac} or {@link fetchStacLink}
+ *
+ * @param value Source stac item,
+ * @param href href to convert
+ * @returns absolute URL if able to be converted
+ */
+export function makeAbsoluteUrl(
+  value?: StacValue,
+  href?: string,
+): string | undefined {
+  if (href == null || value == null) return href;
+  const sourceUrl = (value as StacValueWithSource)[SourceKey];
+  if (sourceUrl == null) return href;
+  return new URL(href, sourceUrl).toString();
+}