yuriy/quartz-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(popover): add support for PDF (#913)

Browse Source 
* feat(popover): add support for PDF

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: split pdf by ';'

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: remove unnecessary check

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
This commit is contained in:
Aaron Pham
2024-02-22 22:16:40 -05:00
committed by GitHub
parent 345c347a56
commit 96c7076fb5
2 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
quartz/components/scripts/popover.inline.ts
View File

@@ -47,8 +47,8 @@ async function mouseEnterHandler(
}
if (!response) return
const contentType = response.headers.get("Content-Type")
const contentTypeCategory = contentType?.split("/")[0] ?? "text"
const [contentType] = response.headers.get("Content-Type")!.split(";")
const [contentTypeCategory, typeInfo] = contentType.split("/")
const popoverElement = document.createElement("div")
popoverElement.classList.add("popover")
@@ -56,7 +56,7 @@ async function mouseEnterHandler(
popoverInner.classList.add("popover-inner")
popoverElement.appendChild(popoverInner)
popoverInner.dataset.contentType = contentTypeCategory
popoverInner.dataset.contentType = contentType ?? undefined
switch (contentTypeCategory) {
case "image":
@@ -69,6 +69,17 @@ async function mouseEnterHandler(
popoverInner.appendChild(img)
break
case "application":
switch (typeInfo) {
case "pdf":
const pdf = document.createElement("iframe")
pdf.src = targetUrl.toString()
popoverInner.appendChild(pdf)
break
default:
break
}
break
default:
const contents = await response.text()
const html = p.parseFromString(contents, "text/html")

25
quartz/components/styles/popover.scss
View File

@@ -38,14 +38,25 @@
white-space: normal;
}
& > .popover-inner[data-content-type="image"] {
padding: 0;
max-height: 100%;
& > .popover-inner[data-content-type] {
&[data-content-type*="pdf"],
&[data-content-type*="image"] {
padding: 0;
max-height: 100%;
}
img {
margin: 0;
border-radius: 0;
display: block;
&[data-content-type*="image"] {
img {
margin: 0;
border-radius: 0;
display: block;
}
}
&[data-content-type*="pdf"] {
iframe {
width: 100%;
}
}
}