From 31f2a3ad4d6cc29db2dd3f41a586d8e023aaae1b Mon Sep 17 00:00:00 2001 From: Jarvis Prime Date: Tue, 24 Mar 2026 05:27:36 +0000 Subject: [PATCH] Fix comic pages: simplified template renders content directly --- src/pages/comics/[slug].astro | 88 ++++++++++++++++++++++------------- 1 file changed, 55 insertions(+), 33 deletions(-) diff --git a/src/pages/comics/[slug].astro b/src/pages/comics/[slug].astro index 08e67b5..18fe3c0 100644 --- a/src/pages/comics/[slug].astro +++ b/src/pages/comics/[slug].astro @@ -6,53 +6,75 @@ import path from 'node:path'; export function getStaticPaths() { const dataDir = path.join(process.cwd(), 'src/data/comics'); if (!fs.existsSync(dataDir)) return []; - const files = fs.readdirSync(dataDir).filter(f => f.endsWith('.html')); + const files = fs.readdirSync(dataDir).filter(f => f.endsWith('.html') && !f.includes('?')); return files.map(file => { const slug = file.replace('.html', ''); - return { - params: { slug }, - props: { filePath: path.join(dataDir, file) } - }; + return { params: { slug }, props: { filePath: path.join(dataDir, file) } }; }); } const { filePath } = Astro.props; +const { slug } = Astro.params; const html = fs.readFileSync(filePath, 'utf-8'); // Extract title const titleMatch = html.match(/([^<]+)<\/title>/i); -const title = titleMatch ? titleMatch[1].replace(/&/g, '&').replace(/'/g, "'") : 'Comics'; +const title = titleMatch ? titleMatch[1].replace(/'/g, "'").replace(/&/g, '&') : `Comic #${slug}`; -// Extract meta description -const descMatch = html.match(/<meta\s+name="description"\s+content="([^"]*)"/i); -const description = descMatch ? descMatch[1] : ''; +// Extract comic image URL +const imgMatch = html.match(/src="(http:\/\/assets\.componentowl\.com\/comics\/[^"?]+)/); +const comicImg = imgMatch ? imgMatch[1] : ''; -// Extract body content -let content = html; -const bodyStart = content.indexOf('<body'); -if (bodyStart > 0) { - const bodyTagEnd = content.indexOf('>', bodyStart); - content = content.substring(bodyTagEnd + 1); -} -const bodyEnd = content.indexOf('</body>'); -if (bodyEnd > 0) { - content = content.substring(0, bodyEnd); -} +// Extract comic name from title (after "Comics: ") +const nameMatch = title.match(/Comics:\s*(.+)/); +const comicName = nameMatch ? nameMatch[1] : `Comic #${slug}`; -// Try to extract d-content-wrap -const contentWrapStart = content.indexOf('class="d-content-wrap"'); -if (contentWrapStart > 0) { - const tagStart = content.lastIndexOf('<div', contentWrapStart); - content = content.substring(tagStart); - const footerStart = content.indexOf('<div class="d-footer">'); - if (footerStart > 0) content = content.substring(0, footerStart); -} +// Extract navigation links +const prevMatch = html.match(/class="comics-prev"[^>]*>/); +const prevHref = html.match(/href="(\d+)\.html"[^>]*class="comics-prev"/); +const nextHref = html.match(/href="(\d+)\.html"[^>]*class="comics-next"/); +// Also try reverse order +const prevHref2 = html.match(/class="comics-prev"[^>]*href="(\d+)/); +const nextHref2 = html.match(/class="comics-next"[^>]*href="(\d+)/); +// And link before class +const prevLink = html.match(/<a\s+href="(\d+)\.html"\s+class="comics-prev"/); +const nextLink = html.match(/<a\s+href="(\d+)\.html"\s+class="comics-next"/); -// Clean up old script references -content = content.replace(/<script[^>]*src="[^"]*dextronet[^"]*"[^>]*><\/script>/gi, ''); -content = content.replace(/<script[^>]*src="[^"]*plugins[^"]*"[^>]*><\/script>/gi, ''); +const prev = prevHref?.[1] || prevHref2?.[1] || prevLink?.[1] || null; +const next = nextHref?.[1] || nextHref2?.[1] || nextLink?.[1] || null; + +// Extract date +const dateMatch = html.match(/comics-day[^>]*>\s*([^<]+)/); +const comicDate = dateMatch ? dateMatch[1].trim() : ''; + +// Extract description/bubble text +const bubbleMatch = html.match(/comics-bubble[^>]*>.*?<p>([^<]+)/s); +const bubble = bubbleMatch ? bubbleMatch[1].trim() : ''; + +const num = parseInt(slug); --- -<Base title={title} description={description}> - <Fragment set:html={content} /> +<Base title={title} description="Component Owl's web comics for developers"> + <div class="comics-wrap" style="text-align: center; padding: 20px 0;"> + <h1 style="font-size: 24px; margin-bottom: 10px;">#{num}: {comicName}</h1> + {comicDate && <p style="color: #a38952; font-size: 12px; margin-bottom: 15px;">{comicDate}</p>} + + <div class="comics-navigation" style="margin: 15px auto; overflow: hidden; max-width: 400px;"> + {prev && <a href={`/comics/${prev}`} style="float: left; padding: 5px 15px; background: #3a2c18; color: #fff; text-decoration: none; border-radius: 4px;">« Previous</a>} + <a href="/comics" style="padding: 5px 15px; background: #825900; color: #fff; text-decoration: none; border-radius: 4px;">All Comics</a> + {next && <a href={`/comics/${next}`} style="float: right; padding: 5px 15px; background: #3a2c18; color: #fff; text-decoration: none; border-radius: 4px;">Next »</a>} + </div> + + {comicImg && <div class="comics" style="margin: 20px auto;"> + <img src={comicImg} alt={comicName} style="max-width: 100%; height: auto; border: 2px solid #1a1a1a; border-radius: 8px;" /> + </div>} + + {bubble && <p style="font-size: 16px; font-style: italic; margin: 20px auto; max-width: 700px;">{bubble}</p>} + + <div class="comics-navigation" style="margin: 20px auto; overflow: hidden; max-width: 400px;"> + {prev && <a href={`/comics/${prev}`} style="float: left; padding: 5px 15px; background: #3a2c18; color: #fff; text-decoration: none; border-radius: 4px;">« Previous</a>} + <a href="/comics" style="padding: 5px 15px; background: #825900; color: #fff; text-decoration: none; border-radius: 4px;">All Comics</a> + {next && <a href={`/comics/${next}`} style="float: right; padding: 5px 15px; background: #3a2c18; color: #fff; text-decoration: none; border-radius: 4px;">Next »</a>} + </div> + </div> </Base>