bookmarks: resolve relative urls (#3914)

fix relative url's

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [x] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

apps/dotcom-bookmark-extractor/lib/unfurl.ts

@@ -25,12 +25,19 @@ export async function unfurl(url: string) {
 		twitter['twitter:description'] ??
 		$('meta[name="description"]').attr('content') ??
 		undefined
-	const image = og['og:image:secure_url'] ?? og['og:image'] ?? twitter['twitter:image'] ?? undefined
+	let image = og['og:image:secure_url'] ?? og['og:image'] ?? twitter['twitter:image'] ?? undefined
-	const favicon =
+	let favicon =
 		$('link[rel="apple-touch-icon"]').attr('href') ??
 		$('link[rel="icon"]').attr('href') ??
 		undefined
 
+	if (image?.startsWith('/')) {
+		image = new URL(image, url).href
+	}
+	if (favicon?.startsWith('/')) {
+		favicon = new URL(favicon, url).href
+	}
+
 	return {
 		title,
 		description,

apps/dotcom/src/utils/createAssetFromUrl.ts

@@ -59,10 +59,11 @@ export async function createAssetFromUrl({ url }: { type: 'url'; url: string }):
 				description:
 					doc.head.querySelector('meta[property="og:description"]')?.getAttribute('content') ?? '',
 			}
-			// Resolve relative URLs
 			if (meta.image.startsWith('/')) {
-				const urlObj = new URL(url)
+				meta.image = new URL(meta.image, url).href
-				meta.image = `${urlObj.origin}${meta.image}`
+			}
+			if (meta.favicon.startsWith('/')) {
+				meta.favicon = new URL(meta.favicon, url).href
 			}
 		} catch (error) {
 			console.error(error)

apps/vscode/editor/src/utils/bookmarks.ts

@@ -44,6 +44,12 @@ export async function onCreateAssetFromUrl({
 				description:
 					doc.head.querySelector('meta[property="og:description"]')?.getAttribute('content') ?? '',
 			}
+			if (meta.image.startsWith('/')) {
+				meta.image = new URL(meta.image, url).href
+			}
+			if (meta.favicon.startsWith('/')) {
+				meta.favicon = new URL(meta.favicon, url).href
+			}
 		} catch (error) {
 			console.error(error)
 			meta = { image: '', favicon: '', title: '', description: '' }

packages/tldraw/src/lib/defaultExternalContentHandlers.ts

@@ -130,6 +130,12 @@ export function registerDefaultExternalContentHandlers(
 				description:
 					doc.head.querySelector('meta[property="og:description"]')?.getAttribute('content') ?? '',
 			}
+			if (meta.image.startsWith('/')) {
+				meta.image = new URL(meta.image, url).href
+			}
+			if (meta.favicon.startsWith('/')) {
+				meta.favicon = new URL(meta.favicon, url).href
+			}
 		} catch (error) {
 			console.error(error)
 			toasts.addToast({