jarvis/componentowl-astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix comic pages: simplified template renders content directly

Browse Source
This commit is contained in:
Jarvis Prime
2026-03-24 05:27:36 +00:00
parent 36dc8259e5
commit 31f2a3ad4d
1 changed files with 55 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/pages/comics/[slug].astro
View File

@@ -6,53 +6,75 @@ import path from 'node:path';
export function getStaticPaths() { export function getStaticPaths() {
const dataDir = path.join(process.cwd(), 'src/data/comics'); const dataDir = path.join(process.cwd(), 'src/data/comics');
if (!fs.existsSync(dataDir)) return []; 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 => { return files.map(file => {
const slug = file.replace('.html', ''); const slug = file.replace('.html', '');
return { return { params: { slug }, props: { filePath: path.join(dataDir, file) } };
params: { slug },
props: { filePath: path.join(dataDir, file) }
};
}); });
} }
const { filePath } = Astro.props; const { filePath } = Astro.props;
const { slug } = Astro.params;
const html = fs.readFileSync(filePath, 'utf-8'); const html = fs.readFileSync(filePath, 'utf-8');
// Extract title // Extract title
const titleMatch = html.match(/<title>([^<]+)<\/title>/i); const titleMatch = html.match(/<title>([^<]+)<\/title>/i);
const title = titleMatch ? titleMatch[1].replace(/&amp;/g, '&').replace(/&#039;/g, "'") : 'Comics'; const title = titleMatch ? titleMatch[1].replace(/&#039;/g, "'").replace(/&amp;/g, '&') : `Comic #${slug}`;
// Extract meta description // Extract comic image URL
const descMatch = html.match(/<meta\s+name="description"\s+content="([^"]*)"/i); const imgMatch = html.match(/src="(http:\/\/assets\.componentowl\.com\/comics\/[^"?]+)/);
const description = descMatch ? descMatch[1] : ''; const comicImg = imgMatch ? imgMatch[1] : '';
// Extract body content // Extract comic name from title (after "Comics: ")
let content = html; const nameMatch = title.match(/Comics:\s*(.+)/);
const bodyStart = content.indexOf('<body'); const comicName = nameMatch ? nameMatch[1] : `Comic #${slug}`;
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);
}
// Try to extract d-content-wrap // Extract navigation links
const contentWrapStart = content.indexOf('class="d-content-wrap"'); const prevMatch = html.match(/class="comics-prev"[^>]*>/);
if (contentWrapStart > 0) { const prevHref = html.match(/href="(\d+)\.html"[^>]*class="comics-prev"/);
const tagStart = content.lastIndexOf('<div', contentWrapStart); const nextHref = html.match(/href="(\d+)\.html"[^>]*class="comics-next"/);
content = content.substring(tagStart); // Also try reverse order
const footerStart = content.indexOf('<div class="d-footer">'); const prevHref2 = html.match(/class="comics-prev"[^>]*href="(\d+)/);
if (footerStart > 0) content = content.substring(0, footerStart); 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 const prev = prevHref?.[1] || prevHref2?.[1] || prevLink?.[1] || null;
content = content.replace(/<script[^>]*src="[^"]*dextronet[^"]*"[^>]*><\/script>/gi, ''); const next = nextHref?.[1] || nextHref2?.[1] || nextLink?.[1] || null;
content = content.replace(/<script[^>]*src="[^"]*plugins[^"]*"[^>]*><\/script>/gi, '');
// 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}> <Base title={title} description="Component Owl's web comics for developers">
<Fragment set:html={content} /> <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;">&laquo; 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 &raquo;</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;">&laquo; 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 &raquo;</a>}
</div>
</div>
</Base> </Base>