Run npx prettier . --write

content/index.md

@@ -16,4 +16,4 @@ See the [documentation](https://quartz.jzhao.xyz) for how to get started.
 https://quartz.jzhao.xyz
 
 ☝️ Link Card View!
-```
+```

quartz/components/LinkCardHandler.tsx

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

quartz/components/scripts/linkcard.inline.ts

@@ -1,29 +1,29 @@
 // Handle link card image failures
 function handleLinkCardImages() {
-  const linkCardImages = document.querySelectorAll('.rlc-image')
+  const linkCardImages = document.querySelectorAll(".rlc-image")
-  
+
   linkCardImages.forEach((img: Element) => {
     const imgElement = img as HTMLImageElement
-    const container = imgElement.closest('.rlc-image-container')
+    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')
+      container.classList.add("image-failed")
       return
     }
-    
+
     // Event listener for image load errors
     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
-document.addEventListener('nav', handleLinkCardImages)
+document.addEventListener("nav", handleLinkCardImages)
-document.addEventListener('DOMContentLoaded', handleLinkCardImages)
+document.addEventListener("DOMContentLoaded", handleLinkCardImages)

quartz/components/styles/linkcard.scss

@@ -1,148 +1,147 @@
 .rlc-container {
-    display: flex;
+  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;
-    border: 1px solid var(--lightgray);
-    border-radius: 12px;
-    margin: 16px 0;
-    background: var(--light);
-    transition: all 0.2s ease;
     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;
-    &:hover {
+  }
-      border-color: var(--secondary);
+
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  .rlc-description {
-      text-decoration: none;
+    display: none;
-      color: var(--darkgray);
+  }
-      transform: translateY(-2px);
+
-    }
+  .rlc-url-container {
-  
+    display: flex;
-    .rlc-info {
+    align-items: center;
-      display: flex;
+    gap: 6px;
-      flex-direction: column;
+    font-size: 0.75rem;
-      justify-content: center;
+    color: var(--gray);
-      flex: 1;
+    margin: 0;
-      padding: 12px 16px;
+  }
-      min-width: 0;
+
-      gap: 4px;
+  .rlc-favicon {
-    }
+    width: 16px;
-  
+    height: 16px;
-    .rlc-content {
+    border-radius: 3px;
-      flex: 1;
+    flex-shrink: 0;
-    }
+  }
-  
+
-    .rlc-title {
+  .rlc-url {
-      font-weight: 600;
+    text-overflow: ellipsis;
-      font-size: 1rem;
+    overflow: hidden;
-      line-height: 1.3;
+    white-space: nowrap;
-      margin: 0 0 4px 0;
+  }
-      color: var(--dark);
+
-      white-space: nowrap;
+  .rlc-image-container {
-      overflow: hidden;
+    flex-shrink: 0;
-      text-overflow: ellipsis;
+    display: flex;
-    }
+    align-items: center;
-  
+    justify-content: center;
-    .rlc-description {
+    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-url-container {
+
-      display: flex;
+  .rlc-image {
-      align-items: center;
+    width: auto;
-      gap: 6px;
+    height: 100%;
-      font-size: 0.75rem;
+    object-fit: cover;
-      color: var(--gray);
+    object-position: center;
-      margin: 0;
+    min-width: 100%; // コンテナの幅は最低限埋める
+  }
+}
+
+@media (max-width: 768px) {
+  .rlc-container {
+    flex-direction: column;
+    min-height: auto;
+    margin: 12px 0;
+
+    .rlc-info {
+      padding: 16px;
     }
-  
+
-    .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;
+      width: 100%;
-      display: flex;
+      height: 160px;
-      align-items: center;
+      order: -1;
-      justify-content: center;
+      max-width: none; // remove max-width restriction on mobile
-      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 {
+    .rlc-title {
-      width: auto;
+      font-size: 0.95rem;
-      height: 100%;
-      object-fit: cover;
-      object-position: center;
-      min-width: 100%; // コンテナの幅は最低限埋める
     }
   }
-  
+}
-  @media (max-width: 768px) {
+
-    .rlc-container {
+@media (max-width: 480px) {
-      flex-direction: column;
+  .rlc-container {
-      min-height: auto;
+    .rlc-info {
-      margin: 12px 0;
+      padding: 12px;
-  
+    }
-      .rlc-info {
+
-        padding: 16px;
+    .rlc-image-container {
+      height: 140px;
+
+      &.image-failed {
+        display: none;
       }
-  
+    }
-      .rlc-image-container {
+
-        width: 100%;
+    .rlc-title {
-        height: 160px;
+      font-size: 0.9rem;
-        order: -1;
+    }
-        max-width: none; // remove max-width restriction on mobile
+
-  
+    .rlc-url-container {
-        &.image-failed {
+      font-size: 0.7rem;
-          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;
-      }
-    }
-  }

quartz/plugins/transformers/index.ts

@@ -11,4 +11,4 @@ export { SyntaxHighlighting } from "./syntax"
 export { TableOfContents } from "./toc"
 export { HardLineBreaks } from "./linebreaks"
 export { RoamFlavoredMarkdown } from "./roam"
-export { LinkCard } from "./linkcard"
+export { LinkCard } from "./linkcard"

quartz/plugins/transformers/linkcard.ts

@@ -31,4 +31,4 @@ export const LinkCard: QuartzTransformerPlugin<Partial<Options>> = (userOpts) =>
       ]
     },
   }
-}
+}

quartz/styles/linkcard.scss

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