mirror of
https://github.com/ld3z/new-manga.git
synced 2026-11-09 19:23:49 -07:00
125 lines
No EOL
2.8 KiB
Text
125 lines
No EOL
2.8 KiB
Text
---
|
|
// Import the necessary types and assets
|
|
import type { Comic } from '../lib/types';
|
|
import { Image } from 'astro:assets';
|
|
|
|
interface Props {
|
|
comic: Comic;
|
|
}
|
|
|
|
const { comic } = Astro.props;
|
|
|
|
const coverUrl = comic.md_comics.md_covers[0]
|
|
? `https://meo.comick.pictures/${comic.md_comics.md_covers[0].b2key}`
|
|
: '/placeholder.png';
|
|
|
|
// Determine if the file is AVIF based on the URL
|
|
const isAvif = comic.md_comics.md_covers[0]?.b2key.endsWith('.avif');
|
|
|
|
// Define standard image dimensions
|
|
const IMG_WIDTH = 250;
|
|
const IMG_HEIGHT = 350;
|
|
|
|
// Generate optimized image URL with dimensions
|
|
const optimizedCoverUrl = coverUrl.includes('meo.comick.pictures')
|
|
? `${coverUrl}?width=${IMG_WIDTH}&quality=80`
|
|
: coverUrl;
|
|
---
|
|
|
|
<div class="comic-card">
|
|
<a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer">
|
|
<div class="image-container">
|
|
{!isAvif ? (
|
|
<Image
|
|
src={optimizedCoverUrl}
|
|
alt={comic.md_comics.title}
|
|
width={IMG_WIDTH}
|
|
height={IMG_HEIGHT}
|
|
loading="lazy"
|
|
/>
|
|
) : (
|
|
<img
|
|
src={optimizedCoverUrl}
|
|
alt={comic.md_comics.title}
|
|
width={IMG_WIDTH}
|
|
height={IMG_HEIGHT}
|
|
loading="lazy"
|
|
onError={(e) => {
|
|
e.currentTarget.src = '/placeholder.png';
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div class="comic-info">
|
|
<h3>{comic.md_comics.title}</h3>
|
|
<p>Chapter {comic.chap}</p>
|
|
<p class="date">{new Date(comic.updated_at).toLocaleString(undefined, { timeStyle: "short" })}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<style define:vars={{ imgWidth: `${IMG_WIDTH}px`, imgHeight: `${IMG_HEIGHT}px` }}>
|
|
.comic-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
transition: transform 0.2s, background-color 0.3s;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.comic-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.comic-card a {
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.image-container {
|
|
width: var(--imgWidth);
|
|
height: var(--imgHeight);
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.image-container img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.comic-card:hover .image-container img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.comic-info {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.comic-info h3 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-color);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.comic-info p {
|
|
margin: 0;
|
|
font-size: 0.9rem;
|
|
color: var(--text-color);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.date {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.8rem !important;
|
|
}
|
|
</style> |