mirror of
https://github.com/ld3z/new-manga.git
synced 2026-11-09 20:53:45 -07:00
added flashbang mode
This commit is contained in:
ld3zian
parent
1995bb679d
commit
687fff643d
7 changed files with 227 additions and 43 deletions
|
|
@ -9,28 +9,47 @@ interface Props {
|
|||
|
||||
const { comic } = Astro.props;
|
||||
|
||||
// Determine if the file is AVIF based on the URL
|
||||
const isAvif = comic.md_comics.md_covers[0]?.b2key.endsWith('.avif');
|
||||
|
||||
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">
|
||||
{!isAvif ? (
|
||||
// Infer size only for non-AVIF files
|
||||
<Image src={coverUrl} alt={comic.md_comics.title} inferSize={true} />
|
||||
) : (
|
||||
// Provide fallback handling for AVIF files
|
||||
<img
|
||||
src={coverUrl}
|
||||
alt={comic.md_comics.title}
|
||||
width="300" // Default width
|
||||
height="300" // Default height
|
||||
style={{ objectFit: 'cover' }}
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
|
|
@ -39,12 +58,13 @@ const coverUrl = comic.md_comics.md_covers[0]
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
<style define:vars={{ imgWidth: `${IMG_WIDTH}px`, imgHeight: `${IMG_HEIGHT}px` }}>
|
||||
.comic-card {
|
||||
background: #23262d;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s;
|
||||
transition: transform 0.2s, background-color 0.3s;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.comic-card:hover {
|
||||
|
|
@ -53,13 +73,26 @@ const coverUrl = comic.md_comics.md_covers[0]
|
|||
|
||||
.comic-card a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.comic-card img {
|
||||
.image-container {
|
||||
width: var(--imgWidth);
|
||||
height: var(--imgHeight);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.comic-card:hover .image-container img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.comic-info {
|
||||
|
|
@ -70,12 +103,19 @@ const coverUrl = comic.md_comics.md_covers[0]
|
|||
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: #888;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.date {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import { availableLanguages, availableContentTypes } from '../lib/api';
|
||||
import { availableLanguages, availableContentTypes, getLanguageName } from '../lib/api';
|
||||
|
||||
interface Props {
|
||||
currentLang: string;
|
||||
|
|
@ -12,13 +12,17 @@ const { currentLang, currentType } = Astro.props;
|
|||
<div class="filters">
|
||||
<select name="language" id="language">
|
||||
{availableLanguages.map(lang => (
|
||||
<option value={lang} selected={lang === currentLang}>{lang.toUpperCase()}</option>
|
||||
<option value={lang} selected={lang === currentLang}>
|
||||
{getLanguageName(lang)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select name="contentType" id="contentType">
|
||||
{availableContentTypes.map(type => (
|
||||
<option value={type} selected={type === currentType}>{type.toUpperCase()}</option>
|
||||
<option value={type} selected={type === currentType}>
|
||||
{type.toUpperCase()}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -47,9 +51,9 @@ const { currentLang, currentType } = Astro.props;
|
|||
select {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
background: #23262d;
|
||||
color: white;
|
||||
border: 1px solid #444;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
select:focus {
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@ const { lang, type } = Astro.props;
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: white;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
background: #23262d;
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
|
|
@ -31,6 +31,7 @@ const { lang, type } = Astro.props;
|
|||
|
||||
.rss-link:hover {
|
||||
background: rgb(var(--accent));
|
||||
color: white;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
|
|||
82
src/components/ThemeToggle.astro
Normal file
82
src/components/ThemeToggle.astro
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
---
|
||||
---
|
||||
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
||||
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="5"></circle>
|
||||
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
||||
<line x1="1" y1="12" x2="3" y2="12"></line>
|
||||
<line x1="21" y1="12" x2="23" y2="12"></line>
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||||
</svg>
|
||||
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
const setTheme = (theme: 'light' | 'dark') => {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
};
|
||||
|
||||
// Initialize theme
|
||||
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
|
||||
setTheme(initialTheme);
|
||||
|
||||
// Handle toggle click
|
||||
document.getElementById('theme-toggle')?.addEventListener('click', () => {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
setTheme(newTheme);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 100;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.sun-icon,
|
||||
.moon-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||||
}
|
||||
|
||||
:global([data-theme="dark"]) .sun-icon {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:global([data-theme="light"]) .moon-icon {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
---
|
||||
import ThemeToggle from '../components/ThemeToggle.astro';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
|
@ -17,6 +19,7 @@ const { title } = Astro.props;
|
|||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<ThemeToggle />
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -32,10 +35,48 @@ const { title } = Astro.props;
|
|||
white 60%
|
||||
);
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
:root[data-theme="light"] {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f0f0f0;
|
||||
--bg-hover: #e0e0e0;
|
||||
--text-color: #13151a;
|
||||
--card-bg: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
:root[data-theme="dark"] {
|
||||
--bg-primary: #13151a;
|
||||
--bg-secondary: #23262d;
|
||||
--bg-hover: #2a2d35;
|
||||
--text-color: #ffffff;
|
||||
--card-bg: #23262d;
|
||||
}
|
||||
|
||||
/* Default to dark theme if no data-theme is set */
|
||||
:root:not([data-theme]) {
|
||||
--bg-primary: #13151a;
|
||||
--bg-secondary: #23262d;
|
||||
--bg-hover: #2a2d35;
|
||||
--text-color: #ffffff;
|
||||
--card-bg: #23262d;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: #13151a;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family:
|
||||
Menlo,
|
||||
|
|
|
|||
|
|
@ -1,13 +1,24 @@
|
|||
import type { Comic } from './types';
|
||||
|
||||
const languages = new Set(["en", "fr", "es", "it", "pl", "tr", "ja", "zh", "sv"]);
|
||||
const languageMap = {
|
||||
"en": "English",
|
||||
"fr": "French",
|
||||
"es": "Spanish",
|
||||
"it": "Italian",
|
||||
"pl": "Polish",
|
||||
"tr": "Turkish",
|
||||
"ja": "Japanese",
|
||||
"zh": "Chinese",
|
||||
"sv": "Swedish"
|
||||
} as const;
|
||||
|
||||
const languages = new Set(Object.keys(languageMap));
|
||||
const contentTypes = new Set(["sfw", "nsfw"]);
|
||||
const urlBase = "https://api.comick.fun/chapter"; // Removed trailing slash
|
||||
const urlBase = "https://api.comick.fun/chapter";
|
||||
|
||||
export async function fetchComics(language: string = 'en', contentType: string = 'sfw'): Promise<Comic[]> {
|
||||
try {
|
||||
const apiUrl = `${urlBase}?lang=${language}&page=1&order=new&accept_erotic_content=${contentType === 'nsfw'}`;
|
||||
// console.log('Fetching from:', apiUrl); // Debug log
|
||||
|
||||
const response = await fetch(apiUrl, {
|
||||
headers: {
|
||||
|
|
@ -21,7 +32,6 @@ export async function fetchComics(language: string = 'en', contentType: string =
|
|||
}
|
||||
|
||||
const data = await response.json();
|
||||
// console.log('API response:', data); // Debug log
|
||||
|
||||
if (!Array.isArray(data)) {
|
||||
console.error('Unexpected API response format:', data);
|
||||
|
|
@ -43,5 +53,10 @@ export function isValidContentType(type: string): boolean {
|
|||
return contentTypes.has(type);
|
||||
}
|
||||
|
||||
export function getLanguageName(code: string): string {
|
||||
return languageMap[code as keyof typeof languageMap] || code.toUpperCase();
|
||||
}
|
||||
|
||||
export const availableLanguages = Array.from(languages);
|
||||
export const availableContentTypes = Array.from(contentTypes);
|
||||
export { languageMap };
|
||||
|
|
@ -28,7 +28,7 @@ let error: string | null = null;
|
|||
|
||||
try {
|
||||
comics = await fetchComics(lang, type);
|
||||
console.log(`Fetched ${comics.length} comics`); // Debug log
|
||||
console.log(`Fetched ${comics.length} comics`);
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch comics:', e);
|
||||
error = e instanceof Error ? e.message : 'Failed to fetch comics';
|
||||
|
|
@ -70,7 +70,7 @@ try {
|
|||
padding: 1rem;
|
||||
width: 1200px;
|
||||
max-width: calc(100% - 2rem);
|
||||
color: white;
|
||||
color: var(--text-color);
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
|
@ -105,7 +105,7 @@ try {
|
|||
.no-comics {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background: #23262d;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -119,7 +119,8 @@ try {
|
|||
|
||||
.debug-info {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue