From 5911095fcc465920283fcb517d1afaa30ac4bd8c Mon Sep 17 00:00:00 2001 From: Pieter Fiers Date: Sun, 3 Dec 2023 00:01:37 +0100 Subject: [PATCH] Rework page relative href resolving --- src/lib/components/image.svelte | 30 ++++++++++++------- .../{markdown => imageMeta}/imageMeta.ts | 18 ++--------- .../imageMetaOnServer.ts | 2 +- .../service/{markdown => imageMeta}/types.ts | 8 ----- src/lib/service/markdown/page.ts | 11 ++----- src/lib/service/pageSpecificMetadataStore.ts | 2 +- src/lib/service/srcSet.ts | 2 +- src/routes/api/image-meta/[href]/+server.ts | 7 ++--- .../technologies/[technology]/+page.svelte | 16 ++++++---- src/routes/technologies/[technology]/+page.ts | 4 +-- 10 files changed, 42 insertions(+), 58 deletions(-) rename src/lib/service/{markdown => imageMeta}/imageMeta.ts (84%) rename src/lib/service/{markdown => imageMeta}/imageMetaOnServer.ts (98%) rename src/lib/service/{markdown => imageMeta}/types.ts (64%) diff --git a/src/lib/components/image.svelte b/src/lib/components/image.svelte index 0640343..195827f 100644 --- a/src/lib/components/image.svelte +++ b/src/lib/components/image.svelte @@ -1,46 +1,54 @@
diff --git a/src/lib/service/markdown/imageMeta.ts b/src/lib/service/imageMeta/imageMeta.ts similarity index 84% rename from src/lib/service/markdown/imageMeta.ts rename to src/lib/service/imageMeta/imageMeta.ts index 88f3ef7..04533d4 100644 --- a/src/lib/service/markdown/imageMeta.ts +++ b/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 { 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 { - if (browser) { - return await getImageHrefMetaFromApi(fetchFn, href) - } - return await getImageHrefMetaOnServer(href) -} - export async function getImageHrefMetaOnServer( href: string, ): Promise { diff --git a/src/lib/service/markdown/imageMetaOnServer.ts b/src/lib/service/imageMeta/imageMetaOnServer.ts similarity index 98% rename from src/lib/service/markdown/imageMetaOnServer.ts rename to src/lib/service/imageMeta/imageMetaOnServer.ts index a3beece..05cf96f 100644 --- a/src/lib/service/markdown/imageMetaOnServer.ts +++ b/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) diff --git a/src/lib/service/markdown/types.ts b/src/lib/service/imageMeta/types.ts similarity index 64% rename from src/lib/service/markdown/types.ts rename to src/lib/service/imageMeta/types.ts index e48fafe..56c0a76 100644 --- a/src/lib/service/markdown/types.ts +++ b/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 -} diff --git a/src/lib/service/markdown/page.ts b/src/lib/service/markdown/page.ts index 0cb4d05..cfb5122 100644 --- a/src/lib/service/markdown/page.ts +++ b/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 } }, diff --git a/src/lib/service/pageSpecificMetadataStore.ts b/src/lib/service/pageSpecificMetadataStore.ts index 2427abe..0eb0e7b 100644 --- a/src/lib/service/pageSpecificMetadataStore.ts +++ b/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 } diff --git a/src/lib/service/srcSet.ts b/src/lib/service/srcSet.ts index 235d717..34a542c 100644 --- a/src/lib/service/srcSet.ts +++ b/src/lib/service/srcSet.ts @@ -4,7 +4,7 @@ export interface SrcsetItemSize { } export interface SrcsetItem extends SrcsetItemSize { - url: string + href: string } diff --git a/src/routes/api/image-meta/[href]/+server.ts b/src/routes/api/image-meta/[href]/+server.ts index 128ad0f..ee60dfe 100644 --- a/src/routes/api/image-meta/[href]/+server.ts +++ b/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, { diff --git a/src/routes/technologies/[technology]/+page.svelte b/src/routes/technologies/[technology]/+page.svelte index 7e00776..0e1a7e3 100644 --- a/src/routes/technologies/[technology]/+page.svelte +++ b/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" @@ -36,7 +40,7 @@

{technology.name}

{#if technology.url != null} - Read more on {simplifyHost(technology.url?.host)} + Read more on {urlToSimpleHost(technology.url)} {/if} {#if technology.longDescription != null} diff --git a/src/routes/technologies/[technology]/+page.ts b/src/routes/technologies/[technology]/+page.ts index 6ab379f..04688be 100644 --- a/src/routes/technologies/[technology]/+page.ts +++ b/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 )