diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts index 0251834cb5df7..d0346b05b0c26 100644 --- a/quartz/components/scripts/popover.inline.ts +++ b/quartz/components/scripts/popover.inline.ts @@ -37,29 +37,47 @@ async function mouseEnterHandler( targetUrl.hash = "" targetUrl.search = "" - const contents = await fetch(`${targetUrl}`) - .then((res) => res.text()) - .catch((err) => { - console.error(err) - }) + const response = await fetch(`${targetUrl}`).catch((err) => { + console.error(err) + }) // bailout if another popover exists if (hasAlreadyBeenFetched()) { return } - if (!contents) return - const html = p.parseFromString(contents, "text/html") - normalizeRelativeURLs(html, targetUrl) - const elts = [...html.getElementsByClassName("popover-hint")] - if (elts.length === 0) return + if (!response) return + const contentType = response.headers.get("Content-Type") + const contentTypeCategory = contentType?.split("/")[0] ?? "text" const popoverElement = document.createElement("div") popoverElement.classList.add("popover") const popoverInner = document.createElement("div") popoverInner.classList.add("popover-inner") popoverElement.appendChild(popoverInner) - elts.forEach((elt) => popoverInner.appendChild(elt)) + + popoverInner.dataset.contentType = contentTypeCategory + + switch (contentTypeCategory) { + case "image": + const img = document.createElement("img") + + response.blob().then((blob) => { + img.src = URL.createObjectURL(blob) + }) + img.alt = targetUrl.pathname + + popoverInner.appendChild(img) + break + default: + const contents = await response.text() + const html = p.parseFromString(contents, "text/html") + normalizeRelativeURLs(html, targetUrl) + const elts = [...html.getElementsByClassName("popover-hint")] + if (elts.length === 0) return + + elts.forEach((elt) => popoverInner.appendChild(elt)) + } setPosition(popoverElement) link.appendChild(popoverElement) diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss index e46292a21180e..141b89ddf0f9f 100644 --- a/quartz/components/styles/popover.scss +++ b/quartz/components/styles/popover.scss @@ -38,6 +38,17 @@ white-space: normal; } + & > .popover-inner[data-content-type="image"] { + padding: 0; + max-height: 100%; + + img { + margin: 0; + border-radius: 0; + display: block; + } + } + h1 { font-size: 1.5rem; }