GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-24 05:14:06 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Run npx prettier . --write

Browse Source
This commit is contained in:
tsumac 2025-06-15 22:22:28 +09:00
parent 3d93f64c92
commit 3a178acda0
7 changed files with 281 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
quartz/components/LinkCardHandler.tsx
View File

@ -2,7 +2,10 @@
import linkCardScript from "./scripts/linkcard.inline" import linkCardScript from "./scripts/linkcard.inline"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
const LinkCardHandler: QuartzComponent = ({ displayClass: _displayClass, cfg:_cfg }: QuartzComponentProps) => { const LinkCardHandler: QuartzComponent = ({
displayClass: _displayClass,
cfg: _cfg,
}: QuartzComponentProps) => {
return <></> return <></>
} }

16
quartz/components/scripts/linkcard.inline.ts
View File

@ -1,29 +1,29 @@
// Handle link card image failures // Handle link card image failures
function handleLinkCardImages() { function handleLinkCardImages() {
const linkCardImages = document.querySelectorAll('.rlc-image') const linkCardImages = document.querySelectorAll(".rlc-image")
linkCardImages.forEach((img: Element) => { linkCardImages.forEach((img: Element) => {
const imgElement = img as HTMLImageElement const imgElement = img as HTMLImageElement
const container = imgElement.closest('.rlc-image-container') const container = imgElement.closest(".rlc-image-container")
if (!container) return if (!container) return
// If the image has already failed to load (complete=true and naturalWidth=0) // If the image has already failed to load (complete=true and naturalWidth=0)
if (imgElement.complete && imgElement.naturalWidth === 0) { if (imgElement.complete && imgElement.naturalWidth === 0) {
container.classList.add('image-failed') container.classList.add("image-failed")
return return
} }
// Event listener for image load errors // Event listener for image load errors
const handleError = () => { const handleError = () => {
container.classList.add('image-failed') container.classList.add("image-failed")
} }
imgElement.addEventListener('error', handleError) imgElement.addEventListener("error", handleError)
window.addCleanup(() => imgElement.removeEventListener('error', handleError)) window.addCleanup(() => imgElement.removeEventListener("error", handleError))
}) })
} }
// Execute on page load and navigation events // Execute on page load and navigation events
document.addEventListener('nav', handleLinkCardImages) document.addEventListener("nav", handleLinkCardImages)
document.addEventListener('DOMContentLoaded', handleLinkCardImages) document.addEventListener("DOMContentLoaded", handleLinkCardImages)

11
quartz/components/styles/linkcard.scss
View File

@ -93,9 +93,9 @@
object-position: center; object-position: center;
min-width: 100%; // コンテナの幅は最低限埋める min-width: 100%; // コンテナの幅は最低限埋める
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.rlc-container { .rlc-container {
flex-direction: column; flex-direction: column;
min-height: auto; min-height: auto;
@ -119,11 +119,10 @@
.rlc-title { .rlc-title {
font-size: 0.95rem; font-size: 0.95rem;
} }
}
} }
}
@media (max-width: 480px) { @media (max-width: 480px) {
.rlc-container { .rlc-container {
.rlc-info { .rlc-info {
padding: 12px; padding: 12px;
@ -145,4 +144,4 @@
font-size: 0.7rem; font-size: 0.7rem;
} }
} }
} }

11
quartz/styles/linkcard.scss
View File

@ -93,9 +93,9 @@
object-position: center; object-position: center;
min-width: 100%; // ensure container is at least filled min-width: 100%; // ensure container is at least filled
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.rlc-container { .rlc-container {
flex-direction: column; flex-direction: column;
min-height: auto; min-height: auto;
@ -119,11 +119,10 @@
.rlc-title { .rlc-title {
font-size: 0.95rem; font-size: 0.95rem;
} }
}
} }
}
@media (max-width: 480px) { @media (max-width: 480px) {
.rlc-container { .rlc-container {
.rlc-info { .rlc-info {
padding: 12px; padding: 12px;
@ -145,4 +144,4 @@
font-size: 0.7rem; font-size: 0.7rem;
} }
} }
} }