From 86fa1d5a649c5c757121b787284b278c9836135f Mon Sep 17 00:00:00 2001 From: ld3zian <42660576+ld3z@users.noreply.github.com> Date: Sun, 26 Jan 2025 12:04:01 -0700 Subject: [PATCH] search pt 2 --- src/components/SlugInput.astro | 160 ++++++++++++++++++++++++++++----- 1 file changed, 136 insertions(+), 24 deletions(-) diff --git a/src/components/SlugInput.astro b/src/components/SlugInput.astro index c295713..860454c 100644 --- a/src/components/SlugInput.astro +++ b/src/components/SlugInput.astro @@ -105,32 +105,144 @@ const languages = [ renderSlugs(); } - function renderSlugs() { + async function renderSlugs() { if (!slugList) return; - slugList.innerHTML = ''; - [...slugs].forEach(slug => { - const div = document.createElement('div'); - div.className = 'flex items-center justify-between p-3 bg-primary rounded-lg border border-hover/30'; - - const text = document.createElement('span'); - text.textContent = slug; - - const removeBtn = document.createElement('button'); - removeBtn.className = 'text-red-500 hover:text-red-600 transition-colors'; - removeBtn.innerHTML = ` - - - - `; - removeBtn.onclick = () => { - slugs.delete(slug); - updateSlugs(); - }; - - div.appendChild(text); - div.appendChild(removeBtn); - slugList.appendChild(div); + // Show loading state + slugList.innerHTML = ` +
+ ${[...slugs].map(() => ` +
+
+
+
+
+
+
+ `).join('')} +
+ `; + + const promises = [...slugs].map(async (slug) => { + try { + // Updated API endpoint to match ComicK's current structure + const response = await fetch(`https://api.comick.fun/comic/${encodeURIComponent(slug)}`); + if (!response.ok) throw new Error('Comic not found'); + + const data = await response.json(); + + const div = document.createElement('div'); + div.className = 'flex items-center gap-4 p-4 bg-primary rounded-lg border border-hover/30 hover:border-accent/50 transition-all duration-300 group relative'; + + // Add a link to the comic + const link = document.createElement('a'); + link.href = `https://comick.io/comic/${slug}`; + link.target = '_blank'; + link.rel = 'noopener noreferrer'; + link.className = 'flex items-center gap-4 flex-1'; + + // Handle cover image + if (data.comic?.md_covers?.[0]?.b2key) { + const img = document.createElement('img'); + img.src = `https://meo.comick.pictures/${data.comic.md_covers[0].b2key}`; + img.className = 'w-16 h-24 object-cover rounded shadow-md group-hover:scale-105 transition-transform duration-300'; + img.alt = data.comic.title || slug; + img.onerror = () => { + img.src = '/placeholder.png'; // Fallback image + img.onerror = null; + }; + link.appendChild(img); + } else { + // Placeholder if no image + const placeholder = document.createElement('div'); + placeholder.className = 'w-16 h-24 bg-hover/30 rounded flex items-center justify-center text-primary/30'; + placeholder.innerHTML = ''; + link.appendChild(placeholder); + } + + const info = document.createElement('div'); + info.className = 'flex-1 min-w-0'; + info.innerHTML = ` +
+ ${data.comic?.title || slug} +
+
${slug}
+ ${data.comic?.last_chapter ? ` +
+ Latest: Chapter ${data.comic.last_chapter} +
+ ` : ''} + `; + + link.appendChild(info); + div.appendChild(link); + + const removeBtn = document.createElement('button'); + removeBtn.className = 'text-red-500 hover:text-red-600 transition-colors p-2 hover:bg-red-500/10 rounded-full flex-shrink-0 relative z-10'; + removeBtn.innerHTML = ` + + + + `; + removeBtn.onclick = (e) => { + e.preventDefault(); + e.stopPropagation(); + div.classList.add('scale-95', 'opacity-0'); + setTimeout(() => { + slugs.delete(slug); + updateSlugs(); + }, 200); + }; + + div.appendChild(removeBtn); + return div; + } catch (error) { + console.error(`Failed to fetch comic info for ${slug}:`, error); + // Improved error state + const div = document.createElement('div'); + div.className = 'flex items-center justify-between p-4 bg-primary rounded-lg border border-red-500/30 group'; + div.innerHTML = ` +
+
+ + + +
+
+
Failed to load details
+
${slug}
+
+
+ + `; + + const removeButton = div.querySelector('button'); + if (removeButton) { + removeButton.onclick = (e) => { + e.preventDefault(); + e.stopPropagation(); + div.classList.add('scale-95', 'opacity-0'); + setTimeout(() => { + slugs.delete(slug); + updateSlugs(); + }, 200); + }; + } + return div; + } + }); + + Promise.all(promises).then(elements => { + slugList.innerHTML = ''; + elements.forEach(element => slugList.appendChild(element)); + }).catch(error => { + console.error('Failed to render slugs:', error); }); }