translate comments into English

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')
-      
-      if (!container) return
-      
-      // 画像が既に読み込みエラーの場合（complete=true かつ naturalWidth=0）
-      if (imgElement.complete && imgElement.naturalWidth === 0) {
-        container.classList.add('image-failed')
-        return
-      }
-      
-      // 画像読み込みエラー時のイベントリスナー
-      const handleError = () => {
-        container.classList.add('image-failed')
-      }
-      
-      imgElement.addEventListener('error', handleError)
-      window.addCleanup(() => imgElement.removeEventListener('error', handleError))
-    })
-  }
   
-  // ページ読み込み時とナビゲーション時に実行
+  linkCardImages.forEach((img: Element) => {
-  document.addEventListener('nav', handleLinkCardImages)
+    const imgElement = img as HTMLImageElement
-  document.addEventListener('DOMContentLoaded', handleLinkCardImages)
+    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')
+    }
+    
+    imgElement.addEventListener('error', handleError)
+    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

@@ -76,10 +76,10 @@
       background: var(--lightgray);
       position: relative;
       overflow: hidden;
-      min-width: 120px; // 最小幅を設定
+      min-width: 120px; // set minimum width
-      max-width: 300px; // 最大幅を設定
+      max-width: 300px; // set maximum width
-      height: 120px; // 高さは固定
+      height: 120px; // fixed height
-      width: auto; // 幅は画像に応じて自動調整
+      width: auto; // width adjusts automatically to image
   
       &.image-failed {
         display: none;
@@ -109,7 +109,7 @@
         width: 100%;
         height: 160px;
         order: -1;
-        max-width: none; // モバイルでは最大幅制限を解除
+        max-width: none; // remove max-width restriction on mobile
   
         &.image-failed {
           display: none;

quartz/styles/linkcard.scss

@@ -76,10 +76,10 @@
       background: var(--lightgray);
       position: relative;
       overflow: hidden;
-      min-width: 120px; // 最小幅を設定
+      min-width: 120px; // set minimum width
-      max-width: 300px; // 最大幅を設定
+      max-width: 300px; // set maximum width
-      height: 120px; // 高さは固定
+      height: 120px; // fixed height
-      width: auto; // 幅は画像に応じて自動調整
+      width: auto; // width adjusts automatically to image
   
       &.image-failed {
         display: none;
@@ -91,7 +91,7 @@
       height: 100%;
       object-fit: cover;
       object-position: center;
-      min-width: 100%; // コンテナの幅は最低限埋める
+      min-width: 100%; // ensure container is at least filled
     }
   }
   
@@ -109,7 +109,7 @@
         width: 100%;
         height: 160px;
         order: -1;
-        max-width: none; // モバイルでは最大幅制限を解除
+        max-width: none; // remove max-width restriction on mobile
   
         &.image-failed {
           display: none;