lightnet 4.7.1 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # lightnet
 
+## 4.8.0
+
+### Minor Changes
+
+- [#473](https://github.com/LightNetDev/LightNet/pull/473) [`9e673cf`](https://github.com/LightNetDev/LightNet/commit/9e673cfdc58cab88f96d2f3a22d23b327be626a6) - Add an optional `schemaType` field to media types, supporting `CreativeWork`, `Book`, `Article`, `DigitalDocument`, `AudioObject`, `VideoObject`, and `ImageObject`. Explicit types determine the main JSON-LD type independently of the page layout, while audio, video, and document files retain their own types. Omitting the field preserves automatic inference. The field is also available in the admin interface.
+
+### Patch Changes
+
+- [#473](https://github.com/LightNetDev/LightNet/pull/473) [`9e673cf`](https://github.com/LightNetDev/LightNet/commit/9e673cfdc58cab88f96d2f3a22d23b327be626a6) - Add canonical information to pages.
+
+- [#473](https://github.com/LightNetDev/LightNet/pull/473) [`9e673cf`](https://github.com/LightNetDev/LightNet/commit/9e673cfdc58cab88f96d2f3a22d23b327be626a6) - Add a `head` slot to `Page` for custom head content and an optional `jsonLd` prop to `DetailsPage` for safely rendering structured data in the page head.
+  
+  Generate JSON-LD for audio, video, and default media detail pages, including descriptive item metadata, recognized file encodings, video player URLs, and individual audio tracks.
+
+- [#473](https://github.com/LightNetDev/LightNet/pull/473) [`9e673cf`](https://github.com/LightNetDev/LightNet/commit/9e673cfdc58cab88f96d2f3a22d23b327be626a6) - Fix carousel accessibility by removing group role from items.
+
+- [#473](https://github.com/LightNetDev/LightNet/pull/473) [`9e673cf`](https://github.com/LightNetDev/LightNet/commit/9e673cfdc58cab88f96d2f3a22d23b327be626a6) - Removed behaviour around adding Astro base path.
+
+- [#473](https://github.com/LightNetDev/LightNet/pull/473) [`9e673cf`](https://github.com/LightNetDev/LightNet/commit/9e673cfdc58cab88f96d2f3a22d23b327be626a6) - Update dependencies.
+
 ## 4.7.1
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "4.7.1",
+  "version": "4.8.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -54,19 +54,19 @@
   "dependencies": {
     "@astrojs/react": "^5.0.7",
     "@astrojs/sitemap": "^3.7.4",
-    "@iconify-json/lucide": "^1.2.145",
+    "@iconify-json/lucide": "^1.2.150",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
     "@tailwindcss/typography": "^0.5.20",
-    "@tanstack/react-virtual": "^3.14.21",
-    "autoprefixer": "^10.6.1",
+    "@tanstack/react-virtual": "^3.14.24",
+    "autoprefixer": "^10.6.2",
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.5.0",
-    "i18next": "^26.5.2",
-    "lucide-react": "^1.59.0",
-    "marked": "^18.1.1",
-    "postcss": "^8.5.30",
+    "i18next": "^26.6.0",
+    "lucide-react": "^1.66.0",
+    "marked": "^18.1.2",
+    "postcss": "^8.5.32",
     "postcss-load-config": "^6.0.1",
     "yaml": "^2.9.1"
   },

package/src/components/CategoriesSection.astro

@@ -84,7 +84,6 @@ function getImage({ image, id }: Category) {
     {categories.map((category) => (
       <li
         class="carousel-item--narrow"
-        role="group"
         aria-roledescription="slide"
         class:list={[
           /** Category cards without images should take the full height of other cards */

package/src/components/MediaGallerySection.astro

@@ -145,7 +145,6 @@ const gridLayouts = {
       return (
         <li
           class={`carousel-item--${resolvedItemWidth} h-full`}
-          role="group"
           aria-roledescription="slide"
         >
           <a

package/src/content/schema/media-type.ts

@@ -12,6 +12,22 @@ export const mediaTypeSchema = z.object({
    * Label translated for the default locale. Other configured site locales are optional.
    */
   label: translationMapSchema,
+  /**
+   * Schema.org type of the work described on media detail pages.
+   * Independent of the page layout and downloadable file formats.
+   * If omitted, structured data is inferred from the layout and content.
+   */
+  schemaType: z
+    .enum([
+      "CreativeWork",
+      "Book",
+      "Article",
+      "DigitalDocument",
+      "AudioObject",
+      "VideoObject",
+      "ImageObject",
+    ])
+    .optional(),
   /**
    * Defines how the cover image for a media item of this type is rendered.
    *

package/src/i18n/locals.ts

@@ -12,7 +12,6 @@ export const onRequest: MiddlewareHandler = async ({ locals, url }, next) => {
     const locales = config.locales
     const currentLocale = resolveCurrentLocaleFromPathname({
       pathname: url.pathname,
-      base: import.meta.env.BASE_URL,
       locales,
       defaultLocale,
     })

package/src/i18n/resolve-current-locale.ts

@@ -1,18 +1,13 @@
-import { pathWithoutBase } from "../utils/paths"
-
 export function resolveCurrentLocaleFromPathname({
   pathname,
-  base,
   locales,
   defaultLocale,
 }: {
   pathname: string
-  base?: string
   locales: string[]
   defaultLocale: string
 }) {
-  const pathnameWithoutBase = base ? pathWithoutBase(pathname, base) : pathname
-  const firstPathSegment = pathnameWithoutBase.split("/")[1]
+  const firstPathSegment = pathname.split("/")[1]
 
   return locales.includes(firstPathSegment) ? firstPathSegment : defaultLocale
 }

package/src/layouts/Page.astro

@@ -6,10 +6,10 @@ import CustomHead from "virtual:lightnet/components/CustomHead"
 import config from "virtual:lightnet/config"
 
 import { resolveLanguage } from "../i18n/resolve-language"
-import { pathWithBase } from "../utils/paths"
 import Footer from "./components/footer/Footer.astro"
 import Header from "./components/header/Header.astro"
 import Favicon from "./components/meta/Favicon.astro"
+import SearchEngineMetadata from "./components/meta/SearchEngineMetadata.astro"
 import ViewTransition from "./components/meta/ViewTransition.astro"
 
 export interface Props {
@@ -47,6 +47,17 @@ export interface Props {
    * default: false
    */
   disallowSearchIndexing?: boolean
+  /**
+   * Absolute URL of the preferred version of this page, used in the
+   * `<link rel="canonical">` tag to help search engines consolidate duplicate URLs.
+   *
+   * Defaults to the current pathname with a trailing slash, resolved against
+   * Astro's `site` URL, without query parameters or a fragment.
+   * Only included when search indexing is enabled.
+   *
+   * @example "https://example.com/about/"
+   */
+  canonicalUrl?: string | URL
 }
 
 const {
@@ -56,6 +67,7 @@ const {
   locale,
   disableShouldTrack,
   disallowSearchIndexing,
+  canonicalUrl,
 } = Astro.props
 const { currentLocale: pathCurrentLocale, tConfigField } = Astro.locals.i18n
 const currentLocale = locale ?? pathCurrentLocale
@@ -72,16 +84,20 @@ const { direction } = resolveLanguage(currentLocale)
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    {(disallowSearchIndexing ?? config.disallowSearchIndexing) && (
-      <meta name="robots" content="noindex" />
-    )}
-    {CustomHead && <CustomHead />}
     <title>{title ? `${title} | ${configTitle}` : configTitle}</title>
     {description && <meta name="description" content={description} />}
     {config.manifest && <link rel="manifest" href={config.manifest} />}
-    <link rel="prefetch" href={pathWithBase("/api/internal/search.json")} />
+    <link rel="prefetch" href="/api/internal/search.json" />
     <Favicon />
     <ViewTransition />
+    <SearchEngineMetadata
+      disallowSearchIndexing={disallowSearchIndexing}
+      canonicalUrl={
+        typeof canonicalUrl === "string" ? new URL(canonicalUrl) : canonicalUrl
+      }
+    />
+    {CustomHead && <CustomHead />}
+    <slot name="head" />
   </head>
   <body class="flex min-h-screen flex-col overflow-y-scroll bg-gray-50 text-gray-900">
     <Header />

package/src/layouts/components/footer/Credits.astro

@@ -9,6 +9,13 @@ const { t } = Astro.locals.i18n
   class="inline-flex items-center gap-2 whitespace-nowrap underline-offset-4 hover:underline"
   {...getLinkAttributes("https://lightnet.community")}
 >
-  <img src={LightNetLogo.src} alt="" class="h-5 w-auto" loading="lazy" />
+  <img
+    src={LightNetLogo.src}
+    width="141"
+    height="173"
+    alt=""
+    class="h-5 w-auto"
+    loading="lazy"
+  />
   <span>{t("ln.footer.powered-by-lightnet")}</span>
 </a>

package/src/layouts/components/get-language-selection-menu-items.ts

@@ -2,7 +2,7 @@ import config from "virtual:lightnet/config"
 
 import { resolveLanguage } from "../../i18n/resolve-language"
 import type { TranslateConfigFieldFn } from "../../i18n/translate-map"
-import { localizePath, pathWithoutBase } from "../../utils/paths"
+import { localizePath } from "../../utils/paths"
 
 export type LanguageLink = {
   active: boolean
@@ -20,7 +20,7 @@ export function getLanguageSelectionMenuItems({
   pathname: string
   tConfigField: TranslateConfigFieldFn
 }) {
-  const currentPath = pathWithoutBase(pathname)
+  const currentPath = pathname
   const hasLocale = Boolean(
     currentLocale &&
     (currentPath.startsWith(`/${currentLocale}/`) ||

package/src/layouts/components/meta/SearchEngineMetadata.astro

@@ -0,0 +1,28 @@
+---
+import config from "virtual:lightnet/config"
+
+import { ensureTrailingSlash } from "../../../utils/paths"
+
+type Props = {
+  disallowSearchIndexing?: boolean
+  canonicalUrl?: URL
+}
+
+const { disallowSearchIndexing, canonicalUrl: canonicalUrlProp } = Astro.props
+const searchIndexing = !(
+  disallowSearchIndexing ?? config.disallowSearchIndexing
+)
+
+const canonicalUrl =
+  canonicalUrlProp ??
+  new URL(ensureTrailingSlash(Astro.url.pathname), Astro.site)
+---
+
+{!searchIndexing && <meta name="robots" content="noindex" />}
+
+{searchIndexing && (
+  <>
+    <link rel="sitemap" href="/sitemap-index.xml" />
+    <link rel="canonical" href={canonicalUrl.href} />
+  </>
+)}

package/src/pages/details-page/AudioDetailsPage.astro

@@ -6,15 +6,25 @@ import DetailsPage from "./components/DetailsPage.astro"
 import MainDetailsSection from "./components/MainDetailsSection.astro"
 import MediaCollectionsSection from "./components/MediaCollectionsSection.astro"
 import MoreDetailsSection from "./components/MoreDetailsSection.astro"
+import { getDetailsPageJsonLd } from "./utils/get-details-page-json-ld"
 
 export type Props = {
   mediaId: string
 }
 
 const { mediaId } = Astro.props
+const { defaultLocale, tContentField } = Astro.locals.i18n
+
+const jsonLd = await getDetailsPageJsonLd({
+  mediaId,
+  layout: "audio",
+  site: Astro.site,
+  defaultLocale,
+  tContentField,
+})
 ---
 
-<DetailsPage mediaId={mediaId}>
+<DetailsPage mediaId={mediaId} jsonLd={jsonLd}>
   <MainDetailsSection imageSize="md" mediaId={mediaId} />
   <AudioPanel mediaId={mediaId} className="mt-10" />
   <DescriptionSection mediaId={mediaId} />

package/src/pages/details-page/DefaultDetailsPage.astro

@@ -6,14 +6,24 @@ import OpenButton from "./components/main-details/OpenButton.astro"
 import MainDetailsSection from "./components/MainDetailsSection.astro"
 import MediaCollectionsSection from "./components/MediaCollectionsSection.astro"
 import MoreDetailsSection from "./components/MoreDetailsSection.astro"
+import { getDetailsPageJsonLd } from "./utils/get-details-page-json-ld"
 
 export type Props = {
   mediaId: string
 }
 const { mediaId } = Astro.props
+const { defaultLocale, tContentField } = Astro.locals.i18n
+
+const jsonLd = await getDetailsPageJsonLd({
+  mediaId,
+  layout: "default",
+  site: Astro.site,
+  defaultLocale,
+  tContentField,
+})
 ---
 
-<DetailsPage mediaId={mediaId}>
+<DetailsPage mediaId={mediaId} jsonLd={jsonLd}>
   <MainDetailsSection mediaId={mediaId}>
     <OpenButton className="mt-8" mediaId={mediaId} />
   </MainDetailsSection>

package/src/pages/details-page/VideoDetailsPage.astro

@@ -5,15 +5,25 @@ import DetailsPage from "./components/DetailsPage.astro"
 import MediaCollectionsSection from "./components/MediaCollectionsSection.astro"
 import MoreDetailsSection from "./components/MoreDetailsSection.astro"
 import VideoDetailsSection from "./components/VideoDetailsSection.astro"
+import { getDetailsPageJsonLd } from "./utils/get-details-page-json-ld"
 
 export type Props = {
   mediaId: string
 }
 
 const { mediaId } = Astro.props
+const { defaultLocale, tContentField } = Astro.locals.i18n
+
+const jsonLd = await getDetailsPageJsonLd({
+  mediaId,
+  layout: "video",
+  site: Astro.site,
+  defaultLocale,
+  tContentField,
+})
 ---
 
-<DetailsPage mediaId={mediaId}>
+<DetailsPage mediaId={mediaId} jsonLd={jsonLd}>
   <VideoDetailsSection mediaId={mediaId} />
   <DescriptionSection mediaId={mediaId} />
   <ContentSection mediaId={mediaId} />

package/src/pages/details-page/components/DetailsPage.astro

@@ -2,17 +2,35 @@
 import { getMediaItem } from "../../../content/get-media-items"
 import Page from "../../../layouts/Page.astro"
 import { markdownToText } from "../../../utils/markdown"
+import { detailsPagePath } from "../../../utils/paths"
 
 type Props = {
   mediaId: string
+  /** Structured data to include in the page head as JSON-LD. */
+  jsonLd?: Record<string, unknown>
 }
 
-const mediaItem = (await getMediaItem(Astro.props.mediaId)).data
+const { mediaId: id, jsonLd } = Astro.props
+const mediaItem = (await getMediaItem(id)).data
 ---
 
 <Page
   title={mediaItem.title}
   description={markdownToText(mediaItem.description)}
+  canonicalUrl={
+    new URL(
+      detailsPagePath(Astro.locals.i18n.defaultLocale, { id }),
+      Astro.site,
+    )
+  }
 >
+  <Fragment slot="head">
+    {jsonLd && (
+      <script
+        type="application/ld+json"
+        set:html={JSON.stringify(jsonLd).replace(/</g, "\\u003c")}
+      />
+    )}
+  </Fragment>
   <slot />
 </Page>

package/src/pages/details-page/utils/create-media-item-json-ld.ts

@@ -0,0 +1,176 @@
+import type { MediaItemEntry } from "../../../content/schema/media-item"
+import type { MediaTypeEntry } from "../../../content/schema/media-type"
+import { markdownToText } from "../../../utils/markdown"
+import { createContentMetadata } from "./create-content-metadata"
+
+const FILE_FORMATS: Record<string, { type: string; mime: string }> = {
+  mp3: { type: "AudioObject", mime: "audio/mpeg" },
+  wav: { type: "AudioObject", mime: "audio/wav" },
+  aac: { type: "AudioObject", mime: "audio/aac" },
+  ogg: { type: "AudioObject", mime: "audio/ogg" },
+  mp4: { type: "VideoObject", mime: "video/mp4" },
+  webm: { type: "VideoObject", mime: "video/webm" },
+  ogv: { type: "VideoObject", mime: "video/ogg" },
+  jpg: { type: "ImageObject", mime: "image/jpeg" },
+  jpeg: { type: "ImageObject", mime: "image/jpeg" },
+  png: { type: "ImageObject", mime: "image/png" },
+  gif: { type: "ImageObject", mime: "image/gif" },
+  webp: { type: "ImageObject", mime: "image/webp" },
+  avif: { type: "ImageObject", mime: "image/avif" },
+  svg: { type: "ImageObject", mime: "image/svg+xml" },
+  pdf: { type: "MediaObject", mime: "application/pdf" },
+  epub: { type: "MediaObject", mime: "application/epub+zip" },
+  txt: { type: "MediaObject", mime: "text/plain" },
+}
+
+export type DetailsPageLayout = "default" | "audio" | "video"
+
+export function createMediaItemJsonLd({
+  item,
+  layout,
+  schemaType,
+  canonicalUrl,
+  imageUrl,
+  categoryNames = [],
+  contentLabels = [],
+}: {
+  item: MediaItemEntry["data"]
+  layout: DetailsPageLayout
+  schemaType?: MediaTypeEntry["data"]["schemaType"]
+  canonicalUrl: URL
+  imageUrl: string
+  categoryNames?: string[]
+  contentLabels?: (string | undefined)[]
+}): Record<string, unknown> {
+  const base = {
+    "@context": "https://schema.org",
+    "@type": schemaType ?? "CreativeWork",
+    "@id": `${canonicalUrl.href}#work`,
+    url: canonicalUrl.href,
+    name: item.title,
+    description: markdownToText(item.description) || undefined,
+    image: imageUrl,
+    inLanguage: item.language,
+    // Author names can refer to people or organizations; the model does not distinguish them.
+    author: item.authors?.length
+      ? item.authors.map((name) => ({ name }))
+      : undefined,
+    about: categoryNames.length
+      ? categoryNames.map((name) => ({ "@type": "Thing", name }))
+      : undefined,
+  }
+
+  const media = item.content.map(({ url }, index) => {
+    let resolvedUrl: URL
+    try {
+      resolvedUrl = new URL(url, canonicalUrl)
+    } catch {
+      return undefined
+    }
+    if (!["http:", "https:"].includes(resolvedUrl.protocol)) {
+      return undefined
+    }
+
+    const metadata = createContentMetadata({
+      url: resolvedUrl.href,
+      labelText: contentLabels[index],
+    })
+    const format = FILE_FORMATS[metadata.extension]
+    const embedUrl = getVideoEmbedUrl(resolvedUrl)
+    if (!format && !embedUrl) {
+      return undefined
+    }
+
+    return {
+      "@type": embedUrl ? "VideoObject" : format.type,
+      name: metadata.labelText,
+      inLanguage: item.language,
+      ...(embedUrl
+        ? { embedUrl }
+        : { contentUrl: resolvedUrl.href, encodingFormat: format.mime }),
+    }
+  })
+
+  const encodings = media.filter((entry) => entry !== undefined)
+  if (
+    schemaType === "AudioObject" ||
+    schemaType === "VideoObject" ||
+    schemaType === "ImageObject"
+  ) {
+    const matching = encodings.filter((entry) => entry["@type"] === schemaType)
+    if (schemaType === "AudioObject" && matching.length > 1) {
+      return {
+        ...base,
+        hasPart: matching,
+        encoding: encodings.filter((entry) => entry["@type"] !== schemaType),
+      }
+    }
+    const primary = media[0]?.["@type"] === schemaType ? media[0] : undefined
+    const alternatives = encodings.filter((entry) => entry !== primary)
+    return {
+      ...primary,
+      ...base,
+      ...(schemaType === "VideoObject" ? { thumbnailUrl: imageUrl } : {}),
+      encoding: alternatives.length ? alternatives : undefined,
+    }
+  }
+
+  if (
+    !schemaType &&
+    layout === "video" &&
+    media[0]?.["@type"] === "VideoObject"
+  ) {
+    return {
+      ...media[0],
+      ...base,
+      "@type": "VideoObject",
+      thumbnailUrl: imageUrl,
+    }
+  }
+
+  if (layout === "audio") {
+    const tracks = encodings.filter((entry) => entry["@type"] === "AudioObject")
+    if (!schemaType && tracks.length === 1 && item.content.length === 1) {
+      return { ...tracks[0], ...base, "@type": "AudioObject" }
+    }
+    if (tracks.length && item.content.length > 1) {
+      return {
+        ...base,
+        hasPart: tracks,
+        encoding: encodings.filter((entry) => entry["@type"] !== "AudioObject"),
+      }
+    }
+  }
+
+  return { ...base, encoding: encodings.length ? encodings : undefined }
+}
+
+function getVideoEmbedUrl(url: URL) {
+  if (url.hostname === "www.youtube.com" || url.hostname === "youtube.com") {
+    const id = url.pathname.startsWith("/embed/")
+      ? url.pathname.slice(7)
+      : url.pathname === "/watch"
+        ? url.searchParams.get("v")
+        : undefined
+    if (id) return `https://www.youtube-nocookie.com/embed/${id}`
+  }
+  if (url.hostname === "youtu.be" && url.pathname.slice(1)) {
+    return `https://www.youtube-nocookie.com/embed/${url.pathname.slice(1)}`
+  }
+  if (
+    url.hostname === "www.youtube-nocookie.com" &&
+    url.pathname.startsWith("/embed/") &&
+    url.pathname.slice(7)
+  ) {
+    return `https://www.youtube-nocookie.com${url.pathname}`
+  }
+  if (url.hostname === "vimeo.com" && /^\/\d+\/?$/.test(url.pathname)) {
+    return `https://player.vimeo.com/video/${url.pathname.split("/")[1]}`
+  }
+  if (
+    url.hostname === "player.vimeo.com" &&
+    /^\/video\/\d+\/?$/.test(url.pathname)
+  ) {
+    return url.href
+  }
+}

package/src/pages/details-page/utils/get-details-page-json-ld.ts

@@ -0,0 +1,48 @@
+import { getImage } from "astro:assets"
+
+import { getCategory } from "../../../content/get-categories"
+import { getMediaItem } from "../../../content/get-media-items"
+import { getMediaType } from "../../../content/get-media-types"
+import type { TranslateContentFieldFn } from "../../../i18n/translate-map"
+import { detailsPagePath } from "../../../utils/paths"
+import type { DetailsPageLayout } from "./create-media-item-json-ld"
+import { createMediaItemJsonLd } from "./create-media-item-json-ld"
+
+export async function getDetailsPageJsonLd({
+  mediaId,
+  layout,
+  site,
+  defaultLocale,
+  tContentField,
+}: {
+  mediaId: string
+  layout: DetailsPageLayout
+  site: URL | undefined
+  defaultLocale: string
+  tContentField: TranslateContentFieldFn
+}) {
+  const item = await getMediaItem(mediaId)
+  const mediaType = await getMediaType(item.data.type.id)
+  const canonicalUrl = new URL(
+    detailsPagePath(defaultLocale, { id: mediaId }),
+    site,
+  )
+  const image = await getImage({ src: item.data.image, format: "webp" })
+  const categories = await Promise.all(
+    (item.data.categories ?? []).map(({ id }) =>
+      getCategory(id, tContentField),
+    ),
+  )
+
+  return createMediaItemJsonLd({
+    item: item.data,
+    layout,
+    schemaType: mediaType.data.schemaType,
+    canonicalUrl,
+    imageUrl: new URL(image.src, site).href,
+    categoryNames: categories.map((category) => category.labelText),
+    contentLabels: item.data.content.map(({ label }) =>
+      label ? tContentField(label, item) : undefined,
+    ),
+  })
+}

package/src/pages/search-page/hooks/use-search.ts

@@ -1,7 +1,6 @@
 import Fuse from "fuse.js"
 import { useEffect, useMemo, useRef, useState } from "react"
 
-import { pathWithBase } from "../../../utils/paths"
 import type { SearchItem, SearchResponse } from "../api/search-response"
 import { observeSearchQuery, type SearchQuery } from "../utils/search-query"
 
@@ -17,7 +16,7 @@ type EnrichedSearchItem = SearchItem & {
   translatedLanguage: string
 }
 
-const SEARCH_API_PATH = pathWithBase("/api/internal/search.json")
+const SEARCH_API_PATH = "/api/internal/search.json"
 
 export function useSearch({ categories, mediaTypes, languages }: Context) {
   const fuse = useRef<Fuse<EnrichedSearchItem>>(undefined)

package/src/utils/paths.ts

@@ -1,40 +1,5 @@
 import { isAbsoluteUrl } from "./urls"
 
-/**
- * Prefix a site-internal path with Astro's configured base path.
- *
- * This helper trims any trailing slash from `BASE_URL`, ensures the input
- * path starts with a leading slash, and concatenates the two values.
- * Absolute URLs are out of scope for this helper.
- *
- * @param path internal path such as "/en/media", "/api/internal/search.json", or "/"
- * @returns base-aware internal path
- */
-export function pathWithBase(path: string) {
-  const normalizedBase = import.meta.env.BASE_URL.replace(/\/+$/, "")
-  const normalizedPath = path.startsWith("/") ? path : `/${path}`
-  return `${normalizedBase}${normalizedPath}`
-}
-
-/**
- * Remove Astro's configured base path from a pathname when present.
- *
- * @param pathname pathname such as "/docs/en/media" or "/en/media"
- * @param base Astro base path. Defaults to `import.meta.env.BASE_URL`.
- * @returns pathname without the base prefix
- */
-export function pathWithoutBase(
-  pathname: string,
-  base = import.meta.env.BASE_URL,
-) {
-  const normalizedBase = base !== "/" ? base.replace(/\/+$/, "") : ""
-
-  return normalizedBase &&
-    (pathname === normalizedBase || pathname.startsWith(`${normalizedBase}/`))
-    ? pathname.slice(normalizedBase.length) || "/"
-    : pathname
-}
-
 /**
  * Build path to media item page.
  *
@@ -46,7 +11,7 @@ export function detailsPagePath(
   locale: string | undefined,
   { id }: { id: string },
 ) {
-  return pathWithBase(`/${locale}/media/${id}`)
+  return `/${locale}/media/${id}/`
 }
 
 /**
@@ -79,7 +44,7 @@ export function searchPagePath(
     searchParams.append("type", filter.type)
   }
   const query = searchParams.size ? `?${searchParams.toString()}` : ""
-  return pathWithBase(`/${locale}/media${query}`)
+  return `/${locale}/media/${query}`
 }
 
 /**
@@ -96,8 +61,22 @@ export function localizePath(locale: string | undefined, path: string) {
   if (isAbsoluteUrl(path)) {
     return path
   }
+  const localizedPath = `${locale ? `/${locale}` : ""}/${path.replace(/^\//, "")}`
+  return ensureTrailingSlash(localizedPath)
+}
 
-  return pathWithBase(
-    `${locale ? `/${locale}` : ""}/${path.replace(/^\//, "")}`,
-  )
+/**
+ * Ensure an internal path's pathname ends with a slash, before any query or hash.
+ * Uses URL parsing to normalize the path and add a leading slash when missing.
+ * Empty input resolves to "/". Absolute URL origins are not included in the result.
+ *
+ * @param path internal path, optionally including a query string or fragment
+ * @returns normalized path with a trailing slash, query string, and fragment
+ * @example ensureTrailingSlash("about?ref=menu#team") // "/about/?ref=menu#team"
+ * @example ensureTrailingSlash("/about/") // "/about/"
+ */
+export function ensureTrailingSlash(path: string) {
+  const { pathname, search, hash } = new URL(path, "https://localhost:4321")
+  const pathWithSlash = pathname.endsWith("/") ? pathname : `${pathname}/`
+  return `${pathWithSlash}${search}${hash}`
 }