From b121ec076b0cb1b69296b909078d208492b4f3c9 Mon Sep 17 00:00:00 2001
From: Yeghro <130201060+Yeghro@users.noreply.github.com>
Date: Sat, 25 Jan 2025 00:33:53 -0800
Subject: [PATCH] added icons

---
 script.js  | 48 +++++++++++-------------------------------------
 styles.css | 16 ++++++++++++++++
 2 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/script.js b/script.js
index 1381ce0..a85f3b6 100644
--- a/script.js
+++ b/script.js
@@ -309,6 +309,16 @@ function createResourceCard(resource) {
     card.setAttribute('itemscope', '');
     card.setAttribute('itemtype', 'https://schema.org/SoftwareApplication');
     
+    // Extract domain for favicon
+    let faviconUrl = '';
+    try {
+        const url = new URL(resource.link);
+        // Using Google's favicon service as a fallback if the direct favicon isn't available
+        faviconUrl = `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=32`;
+    } catch (e) {
+        console.warn('Invalid URL:', resource.link);
+    }
+    
     card.innerHTML = `
         <div class="resource-header">
             <h3 class="resource-title">
@@ -316,6 +326,7 @@ function createResourceCard(resource) {
                    target="_blank" 
                    rel="noopener"
                    itemprop="name">
+                    ${faviconUrl ? `<img src="${faviconUrl}" alt="" class="resource-favicon" />` : ''}
                     ${resource.name}
                     <i class="fas fa-external-link-alt" aria-hidden="true"></i>
                 </a>
@@ -605,41 +616,4 @@ function displaySection(sectionName, sections) {
             });
         }
     });
-}
-
-function createResourceCard(resource) {
-    const card = document.createElement('div');
-    card.className = 'resource-card';
-    
-    // Add schema.org structured data
-    card.setAttribute('itemscope', '');
-    card.setAttribute('itemtype', 'https://schema.org/SoftwareApplication');
-    
-    card.innerHTML = `
-        <div class="resource-header">
-            <h3 class="resource-title">
-                <a href="${resource.link}" 
-                   target="_blank" 
-                   rel="noopener"
-                   itemprop="name">
-                    ${resource.name}
-                    <i class="fas fa-external-link-alt" aria-hidden="true"></i>
-                </a>
-            </h3>
-            ${resource.stars ? `
-                <div class="resource-stars" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
-                    <i class="fas fa-star" aria-hidden="true"></i>
-                    <span itemprop="ratingValue">${resource.stars}</span>
-                    <meta itemprop="ratingCount" content="${resource.stars}">
-                </div>
-            ` : ''}
-        </div>
-        ${resource.description ? `
-            <div class="resource-description" itemprop="description">
-                ${resource.description}
-            </div>
-        ` : ''}
-    `;
-
-    return card;
 }
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 6fbd5f6..c832286 100644
--- a/styles.css
+++ b/styles.css
@@ -544,4 +544,20 @@ button:focus {
 /* Remove old view-controls styling if no longer needed */
 .content-header {
     display: none;
+}
+
+.resource-favicon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+.resource-title a {
+    display: flex;
+    align-items: center;
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: color 0.2s ease;
 } 
\ No newline at end of file