refactor(linkcard): address feedback from saberzero1

quartz/components/LinkCardHandler.tsx

@@ -1,13 +1,8 @@
 // @ts-ignore
 import linkCardScript from "./scripts/linkcard.inline"
-import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor } from "./types"
 
-const LinkCardHandler: QuartzComponent = ({
+const LinkCardHandler: QuartzComponent = () => null
-  displayClass: _displayClass,
-  cfg: _cfg,
-}: QuartzComponentProps) => {
-  return <></>
-}
 
 LinkCardHandler.beforeDOMLoaded = linkCardScript
 

quartz/components/scripts/linkcard.inline.ts

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

quartz/components/styles/linkcard.scss

@@ -91,7 +91,7 @@
     height: 100%;
     object-fit: cover;
     object-position: center;
-    min-width: 100%; // コンテナの幅は最低限埋める
+    min-width: 100%; // ensure container width is minimally filled
   }
 }
 

quartz/plugins/transformers/linkcard.ts

@@ -14,6 +14,9 @@ const defaultOptions: Options = {
   showDescription: false,
 }
 
+/**
+ * LinkCard transformer plugin that processes link metadata at build time.
+ */
 export const LinkCard: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
   const opts = { ...defaultOptions, ...userOpts }
   return {

quartz/styles/linkcard.scss

@@ -1,147 +0,0 @@
-.rlc-container {
-  display: flex;
-  text-decoration: none;
-  border: 1px solid var(--lightgray);
-  border-radius: 12px;
-  margin: 16px 0;
-  background: var(--light);
-  transition: all 0.2s ease;
-  color: var(--darkgray);
-  overflow: hidden;
-
-  &:hover {
-    border-color: var(--secondary);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    text-decoration: none;
-    color: var(--darkgray);
-    transform: translateY(-2px);
-  }
-
-  .rlc-info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    flex: 1;
-    padding: 12px 16px;
-    min-width: 0;
-    gap: 4px;
-  }
-
-  .rlc-content {
-    flex: 1;
-  }
-
-  .rlc-title {
-    font-weight: 600;
-    font-size: 1rem;
-    line-height: 1.3;
-    margin: 0 0 4px 0;
-    color: var(--dark);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .rlc-description {
-    display: none;
-  }
-
-  .rlc-url-container {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 0.75rem;
-    color: var(--gray);
-    margin: 0;
-  }
-
-  .rlc-favicon {
-    width: 16px;
-    height: 16px;
-    border-radius: 3px;
-    flex-shrink: 0;
-  }
-
-  .rlc-url {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .rlc-image-container {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--lightgray);
-    position: relative;
-    overflow: hidden;
-    min-width: 120px; // set minimum width
-    max-width: 300px; // set maximum width
-    height: 120px; // fixed height
-    width: auto; // width adjusts automatically to image
-
-    &.image-failed {
-      display: none;
-    }
-  }
-
-  .rlc-image {
-    width: auto;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    min-width: 100%; // ensure container is at least filled
-  }
-}
-
-@media (max-width: 768px) {
-  .rlc-container {
-    flex-direction: column;
-    min-height: auto;
-    margin: 12px 0;
-
-    .rlc-info {
-      padding: 16px;
-    }
-
-    .rlc-image-container {
-      width: 100%;
-      height: 160px;
-      order: -1;
-      max-width: none; // remove max-width restriction on mobile
-
-      &.image-failed {
-        display: none;
-      }
-    }
-
-    .rlc-title {
-      font-size: 0.95rem;
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .rlc-container {
-    .rlc-info {
-      padding: 12px;
-    }
-
-    .rlc-image-container {
-      height: 140px;
-
-      &.image-failed {
-        display: none;
-      }
-    }
-
-    .rlc-title {
-      font-size: 0.9rem;
-    }
-
-    .rlc-url-container {
-      font-size: 0.7rem;
-    }
-  }
-}