Rework page relative href resolving

src/lib/components/image.svelte

@@ -1,46 +1,54 @@
 <script lang="ts">
-	import type { ImageMeta } from "$lib/service/markdown/types";
+	import { page } from "$app/stores";
+	import { pageSpecificMetadataStore } from "$lib/service/pageSpecificMetadataStore";
 
 
   export let href: string
   export let title: string | undefined = undefined
   export let text: string
-  export let meta: ImageMeta | undefined = undefined
   export let placeholder: string | undefined = undefined
 
-  const [containerStyle, imgStyle] = (() => {
+  $: [pageRelativeHref, meta] = ((routeId, s) => {
+    if (routeId == null) return [href, undefined]
+    const metadata = s[routeId]?.['image']?.[href]
+    if (metadata == null) return [href, undefined]
+    const { pageRelativeHref, meta } = metadata
+    return [pageRelativeHref, meta]
+  })($page.route.id, $pageSpecificMetadataStore)
+
+  $: [containerStyle, imgStyle] = ((meta) => {
     if (meta == undefined) return ["", ""]
     const aspectRatioInv = meta.height / meta.width
     const containerStyle = `width: 100%; position: relative; padding-bottom: calc(100% * ${aspectRatioInv});`
     const imgStyle = `position: absolute; top: 0; left: 0; width: 100%; height: 100%;`
     return [containerStyle, imgStyle]
-  })();
+  })(meta);
 
   const removePlaceholder = () => {
     placeholder = undefined
   }
 
-  const commonImgAttributes = {
+  $: commonImgAttributes = {
     title: title,
     alt: text,
     style: imgStyle,
   }
 
-  const srcsetAttributes = meta?.srcset == undefined ? {} : {
-    srcset: meta.srcset.map(({ url, size }) => `${url} ${size}w`).join(", "),
+  $: srcsetAttributes = meta?.srcset == undefined ? {} : {
+    srcset: meta.srcset.map(({ href: url, size }) => `${url} ${size}w`).join(", "),
     sizes: meta.srcset.map(({ size, mediaQuery }) => {
       return mediaQuery == undefined ? `${size}px` : `(${mediaQuery}) ${size}px`
     }).join(", "),
   }
 
-  const fullimgAttributes = {
+  $: fullimgAttributes = {
     ...commonImgAttributes,
     ...srcsetAttributes,
   }
 
-  const imagesrc = meta?.srcset != undefined && meta.srcset.length > 0
-    ? meta.srcset[meta.srcset.length - 1].url
-    : href
+  $: imagesrc = meta?.srcset != undefined && meta.srcset.length > 0
+    ? meta.srcset[meta.srcset.length - 1].href
+    : pageRelativeHref
 </script>
 
 <figure>

src/lib/service/markdown/imageMeta.ts → src/lib/service/imageMeta/imageMeta.ts

@@ -1,9 +1,8 @@
 import type { getImageMetaOnServer } from "./imageMetaOnServer"
-import { browser } from "$app/environment"
-import { OUTSIDE_STATIC_DIR, type ImageMeta } from "./types"
 import type { FetchFn } from "../fetchFn"
 import { Exception } from "../exception"
 import { intOrThrow, isObject, optionalStringOrThrow, stringOrThrow } from "../parseUtil"
+import { OUTSIDE_STATIC_DIR, type ImageMeta } from "./types"
 
 
 let getImageMetaOnServerFn: typeof getImageMetaOnServer | undefined = undefined
@@ -21,10 +20,10 @@ function imageMetaFromJson(json: string): ImageMeta {
       if (!Array.isArray(metaS.srcset)) throw new Exception(`Expected array, got ${metaS.srcset}`)
       return metaS.srcset.map((item: unknown) => {
         if (!isObject(item)) throw new Exception(`SrcsetItem: Expected object, got ${item}`)
-        const url = stringOrThrow(item.url, "srcsetItem.url")
+        const href = stringOrThrow(item.href, "srcsetItem.href")
         const mediaQuery = optionalStringOrThrow(item.mediaQuery, "srcsetItem.mediaQuery")
         const size = intOrThrow(item.size, "srcsetItem.size")
-        return { url, mediaQuery, size }
+        return { href, mediaQuery, size }
       })
     })()
   return { width, height, format, placeholder, srcset }
@@ -36,23 +35,12 @@ export async function getImageHrefMetaFromApi(
 ): Promise<ImageMeta> {
   const encodedHref = encodeURIComponent(href)
   const url = `/api/image-meta/${encodedHref}`
-  console.log(`Fetching image meta from API: ${url}`)
   const contentRes = await fetchFn(url)
   if (!contentRes.ok) throw new Exception(`Failed to load image meta from API: ${contentRes.status} ${contentRes.statusText}`)
   const contentJson = await contentRes.text()
   return imageMetaFromJson(contentJson)
 }
 
-export async function getImageHrefMeta(
-  fetchFn: FetchFn,
-  href: string,
-): Promise<ImageMeta> {
-  if (browser) {
-    return await getImageHrefMetaFromApi(fetchFn, href)
-  }
-  return await getImageHrefMetaOnServer(href)
-}
-
 export async function getImageHrefMetaOnServer(
   href: string,
 ): Promise<ImageMeta> {

src/lib/service/markdown/imageMetaOnServer.ts → src/lib/service/imageMeta/imageMetaOnServer.ts

@@ -62,7 +62,7 @@ export async function createSrcSetForImage(
     const outPath = path.join(srcsetOutDirFsAbsolute, outFilename)
     const outExists = await fs.access(outPath).then(() => true).catch(() => false)
     const srcsetItem: SrcsetItem = {
-      mediaQuery, size: width, url: `${srcsetSiteRelativeDir}/${outFilename}`
+      mediaQuery, size: width, href: `${srcsetSiteRelativeDir}/${outFilename}`
     }
     if (outExists) return srcsetItem
     await image.resize(width).webp({ quality: 80 }).toFile(outPath)

src/lib/service/markdown/types.ts → src/lib/service/imageMeta/types.ts

@@ -9,11 +9,3 @@ export interface ImageMeta {
   placeholder: string
   srcset?: SrcsetItem[]
 }
-
-export interface ImageWithMetaToken {
-  type: 'imageWithMeta'
-  raw: string
-  href: string
-  title: string
-  meta: ImageMeta
-}

src/lib/service/markdown/page.ts

@@ -2,8 +2,8 @@ import type { marked } from "marked";
 import type { FetchFn } from "../fetchFn";
 import { processTokens, type TokenProcessors } from "./tokenProcessing";
 import { resolveHrefForRoute } from "../url";
-import type { ImageMeta } from "./types";
-import { getImageHrefMeta } from "./imageMeta";
+import { getImageHrefMetaFromApi } from "../imageMeta/imageMeta";
+import type { ImageMeta } from "../imageMeta/types";
 
 
 export interface LinkPageSpecificData {
@@ -39,16 +39,11 @@ export async function generatePageSpecificTokenData(
   tokens: marked.TokensList,
 ) {
   const tokenData: PageSpecificTokenData = { }
-  if (routeId === "/") {
-    console.log("routeId is /")
-    console.log("tokens:", tokens.slice(-1)[0].tokens)
-  }
   const processors: TokenProcessors = {
     image: async token => {
-      if (routeId === "/") console.log("image token:", token)
       const rootRelativeHref = token.href
       const pageRelativeHref = resolveHrefForRoute(routeId, rootRelativeHref)
-      const meta = await getImageHrefMeta(fetchFn, rootRelativeHref)
+      const meta = await getImageHrefMetaFromApi(fetchFn, rootRelativeHref)
       tokenData.image = tokenData.image || { }
       tokenData.image[rootRelativeHref] = { pageRelativeHref, meta }
     },

src/lib/service/pageSpecificMetadataStore.ts

@@ -5,7 +5,7 @@ import type { marked } from 'marked';
 import merge from "lodash.merge"
 
 
-type PagesSpecificTokenData = {
+export type PagesSpecificTokenData = {
   [routeId: string]: PageSpecificTokenData
 }
 

src/lib/service/srcSet.ts

@@ -4,7 +4,7 @@ export interface SrcsetItemSize {
 }
 
 export interface SrcsetItem extends SrcsetItemSize {
-    url: string
+    href: string
 }
 
 

src/routes/api/image-meta/[href]/+server.ts

@@ -1,11 +1,8 @@
 import type { RequestHandler } from './$types'
-import { getImageHrefMetaOnServer } from '$lib/service/markdown/imageMeta';
+import { getImageHrefMetaOnServer } from '$lib/service/imageMeta/imageMeta';
 
 
-export const GET: RequestHandler = async ({ params }) => {
-  console.log('params', params)
-  const encodedHref = params.href
-  const href = decodeURIComponent(encodedHref)
+export const GET: RequestHandler = async ({ params: { href } }) => {
   const meta = await getImageHrefMetaOnServer(href)
   const metaJson = JSON.stringify(meta)
   return new Response(metaJson, {

src/routes/technologies/[technology]/+page.svelte

@@ -9,15 +9,19 @@
   export let data: PageData
   $: ({ technology, contentError } = data)
 
-  function simplifyHost(host?: string): string | undefined {
-    if (host == null) return undefined
-    if (host.startsWith("www."))
+  function simplifyHost(host: string): string {
+    if (host.startsWith("www.")) {
       return simplifyHost(host.substring(4))
-    if (/^(?:[a-z]{2})?\.wikipedia\.org/.test(host))
-      return "Wikipedia"
+    }
+    if (/^(?:[a-z]{2})?\.wikipedia\.org/.test(host)) return "Wikipedia"
     return host
   }
 
+  function urlToSimpleHost(url: URL | string): string {
+    url = url instanceof URL ? url : new URL(url)
+    return simplifyHost(url.host)
+  }
+
   const badgeSize = "7rem"
 </script>
 
@@ -36,7 +40,7 @@
     </div>
     <h1>{technology.name}</h1>
     {#if technology.url != null}
-      <a href={technology.url.toString()}>Read more on {simplifyHost(technology.url?.host)}</a>
+      <a href={technology.url.toString()}>Read more on {urlToSimpleHost(technology.url)}</a>
     {/if}
     {#if technology.longDescription != null}
       <Markdown tokens={technology.longDescription.tokens} />

src/routes/technologies/[technology]/+page.ts

@@ -6,8 +6,8 @@ import { populateTechnologyPageSpecificMetadata } from '$lib/service/content/pag
 
 
 export const load: PageLoad = async ({ params, fetch }) => {
-  const { contentStore, contentError: error } = await getContentOrError(fetch)
-  if (contentStore == null) return { error }
+  const { contentStore, contentError } = await getContentOrError(fetch)
+  if (contentStore == null) return { contentError }
   const technology = get(contentStore).technologies.find(
     technology => technology.uriSafeName === params.technology
   )