init site

This commit is contained in:
ld3zian 2025-01-13 17:44:11 -07:00
parent 40a7e60a8b
commit c765ca9c85
20 changed files with 6860 additions and 1 deletions

61
src/components/Card.astro Normal file
View file

@ -0,0 +1,61 @@
---
interface Props {
title: string;
body: string;
href: string;
}
const { href, title, body } = Astro.props;
---
<li class="link-card">
<a href={href}>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
</li>
<style>
.link-card {
list-style: none;
display: flex;
padding: 1px;
background-color: #23262d;
background-image: none;
background-size: 400%;
border-radius: 7px;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.link-card > a {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: calc(1.5rem - 1px);
border-radius: 8px;
color: white;
background-color: #23262d;
opacity: 0.8;
}
h2 {
margin: 0;
font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
p {
margin-top: 0.5rem;
margin-bottom: 0;
}
.link-card:is(:hover, :focus-within) {
background-position: 0;
background-image: var(--accent-gradient);
}
.link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent-light));
}
</style>

View file

@ -0,0 +1,68 @@
---
import type { Comic } from '../lib/types';
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';
---
<div class="comic-card">
<a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer">
<img src={coverUrl} alt={comic.md_comics.title} />
<div class="comic-info">
<h3>{comic.md_comics.title}</h3>
<p>Chapter {comic.chap}</p>
<p class="date">{new Date(comic.updated_at).toLocaleDateString()}</p>
</div>
</a>
</div>
<style>
.comic-card {
background: #23262d;
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s;
}
.comic-card:hover {
transform: translateY(-4px);
}
.comic-card a {
text-decoration: none;
color: white;
}
.comic-card img {
width: 100%;
height: 300px;
object-fit: cover;
}
.comic-info {
padding: 1rem;
}
.comic-info h3 {
margin: 0;
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.comic-info p {
margin: 0;
font-size: 0.9rem;
color: #888;
}
.date {
margin-top: 0.5rem;
font-size: 0.8rem !important;
}
</style>

View file

@ -0,0 +1,59 @@
---
import { availableLanguages, availableContentTypes } from '../lib/api';
interface Props {
currentLang: string;
currentType: string;
}
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>
))}
</select>
<select name="contentType" id="contentType">
{availableContentTypes.map(type => (
<option value={type} selected={type === currentType}>{type.toUpperCase()}</option>
))}
</select>
</div>
<script>
const langSelect = document.getElementById('language') as HTMLSelectElement;
const typeSelect = document.getElementById('contentType') as HTMLSelectElement;
function updateURL() {
const lang = langSelect.value;
const type = typeSelect.value;
window.location.href = `/${lang}/${type}`;
}
langSelect.addEventListener('change', updateURL);
typeSelect.addEventListener('change', updateURL);
</script>
<style>
.filters {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
select {
padding: 0.5rem 1rem;
border-radius: 4px;
background: #23262d;
color: white;
border: 1px solid #444;
}
select:focus {
outline: none;
border-color: rgb(var(--accent));
}
</style>

View file

@ -0,0 +1,40 @@
---
interface Props {
lang: string;
type: string;
}
const { lang, type } = Astro.props;
---
<a href={`/rss/${lang}/${type}.xml`} class="rss-link" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 11a9 9 0 0 1 9 9"></path>
<path d="M4 4a16 16 0 0 1 16 16"></path>
<circle cx="5" cy="19" r="1"></circle>
</svg>
RSS Feed
</a>
<style>
.rss-link {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
text-decoration: none;
background: #23262d;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: all 0.2s;
}
.rss-link:hover {
background: rgb(var(--accent));
}
svg {
width: 20px;
height: 20px;
}
</style>

1
src/env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference path="../.astro/types.d.ts" />

50
src/layouts/Layout.astro Normal file
View file

@ -0,0 +1,50 @@
---
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>
<style is:global>
:root {
--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101;
--accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
rgb(var(--accent-light)) 30%,
white 60%
);
}
html {
font-family: system-ui, sans-serif;
background: #13151a;
}
code {
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
</style>

47
src/lib/api.ts Normal file
View file

@ -0,0 +1,47 @@
import type { Comic } from './types';
const languages = new Set(["en", "fr", "es", "it", "pl", "tr", "ja", "zh", "sv"]);
const contentTypes = new Set(["sfw", "nsfw"]);
const urlBase = "https://api.comick.fun/chapter"; // Removed trailing slash
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: {
'Accept': 'application/json',
'User-Agent': 'Mozilla/5.0 (compatible; ComicReader/1.0)',
},
});
if (!response.ok) {
throw new Error(`API responded with status: ${response.status}`);
}
const data = await response.json();
// console.log('API response:', data); // Debug log
if (!Array.isArray(data)) {
console.error('Unexpected API response format:', data);
return [];
}
return data;
} catch (error) {
console.error('Error fetching comics:', error);
return [];
}
}
export function isValidLanguage(lang: string): boolean {
return languages.has(lang);
}
export function isValidContentType(type: string): boolean {
return contentTypes.has(type);
}
export const availableLanguages = Array.from(languages);
export const availableContentTypes = Array.from(contentTypes);

18
src/lib/types.ts Normal file
View file

@ -0,0 +1,18 @@
export interface Comic {
id: string;
chap: string;
updated_at: string;
md_comics: {
title: string;
slug: string;
genres: number[];
md_covers: {
b2key: string;
}[];
};
}
export interface Genre {
id: number;
name: string;
}

View file

@ -0,0 +1,125 @@
---
import Layout from '../../layouts/Layout.astro';
import ComicCard from '../../components/ComicCard.astro';
import LanguageSelector from '../../components/LanguageSelector.astro';
import RSSLink from '../../components/RSSLink.astro';
import { fetchComics, isValidLanguage, isValidContentType } from '../../lib/api';
import type { Comic } from '../../lib/types';
export async function getStaticPaths() {
const languages = ['en', 'fr', 'es', 'it', 'pl', 'tr', 'ja', 'zh', 'sv'];
const types = ['sfw', 'nsfw'];
return languages.flatMap(lang =>
types.map(type => ({
params: { lang, type },
}))
);
}
const { lang, type } = Astro.params;
if (!isValidLanguage(lang!) || !isValidContentType(type!)) {
return Astro.redirect('/en/sfw');
}
let comics: Comic[] = [];
let error: string | null = null;
try {
comics = await fetchComics(lang, type);
console.log(`Fetched ${comics.length} comics`); // Debug log
} catch (e) {
console.error('Failed to fetch comics:', e);
error = e instanceof Error ? e.message : 'Failed to fetch comics';
}
---
<Layout title={`Comick - ${lang?.toUpperCase()} ${type?.toUpperCase()}`}>
<main>
<h1>ComicK-RSS</h1>
<div class="controls">
<LanguageSelector currentLang={lang!} currentType={type!} />
<RSSLink lang={lang!} type={type!} />
</div>
{error && (
<div class="error-message">
<p>Error: {error}</p>
</div>
)}
{comics.length > 0 ? (
<div class="comics-grid">
{comics.map(comic => (
<ComicCard comic={comic} />
))}
</div>
) : (
<div class="no-comics">
<p>No comics found. Please try a different language or content type.</p>
<p class="debug-info">Language: {lang}, Type: {type}</p>
</div>
)}
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1rem;
width: 1200px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
line-height: 1.6;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
h1 {
font-size: 3rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
background-image: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400%;
background-position: 0%;
}
.comics-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 2rem;
padding: 0;
}
.no-comics {
text-align: center;
padding: 2rem;
background: #23262d;
border-radius: 8px;
}
.error-message {
background: #ff4444;
color: white;
padding: 1rem;
border-radius: 8px;
margin-bottom: 2rem;
}
.debug-info {
font-size: 0.8rem;
color: #666;
margin-top: 1rem;
}
</style>

5
src/pages/index.astro Normal file
View file

@ -0,0 +1,5 @@
---
export const prerender = false;
---
<meta http-equiv="refresh" content="0;url=/en/sfw">

View file

@ -0,0 +1,63 @@
import rss from "@astrojs/rss";
import {
fetchComics,
isValidLanguage,
isValidContentType,
} from "../../../lib/api";
import type { APIRoute } from "astro";
export const GET: APIRoute = async ({ params, request }) => {
const { lang = "en", type = "sfw" } = params;
if (!isValidLanguage(lang) || !isValidContentType(type)) {
return new Response("Invalid language or content type", { status: 400 });
}
const comics = await fetchComics(lang, type);
const siteURL = new URL(request.url).origin;
return rss({
title: `ComicK - ${lang.toUpperCase()} ${type.toUpperCase()}`,
description: `A simple RSS feed for ComicK!`,
site: "https://github.com/ld3z/manga-rss",
items: comics.map((comic) => ({
title: `<![CDATA[${comic.md_comics.title} - Chapter ${comic.chap}]]`,
link: `https://comick.io/comic/${comic.md_comics.slug}`,
pubDate: new Date(comic.updated_at),
description: `<![CDATA[Chapter ${comic.chap} of ${
comic.md_comics.title
} is now available on ComicK!
${
comic.md_comics.md_covers[0]
? `<img src="https://meo.comick.pictures/${comic.md_comics.md_covers[0].b2key}"
alt="Cover" style="max-width: 300px;" />]]`
: ""
}
`,
})),
});
};
export function getStaticPaths() {
return [
{ params: { lang: "en", type: "sfw" } },
{ params: { lang: "en", type: "nsfw" } },
{ params: { lang: "fr", type: "sfw" } },
{ params: { lang: "fr", type: "nsfw" } },
{ params: { lang: "es", type: "nsfw" } },
{ params: { lang: "es", type: "sfw" } },
{ params: { lang: "it", type: "sfw" } },
{ params: { lang: "it", type: "nsfw" } },
{ params: { lang: "pl", type: "sfw" } },
{ params: { lang: "pl", type: "nsfw" } },
{ params: { lang: "tr", type: "sfw" } },
{ params: { lang: "tr", type: "nsfw" } },
{ params: { lang: "ja", type: "sfw" } },
{ params: { lang: "ja", type: "nsfw" } },
{ params: { lang: "zh", type: "sfw" } },
{ params: { lang: "zh", type: "nsfw" } },
{ params: { lang: "sv", type: "sfw" } },
{ params: { lang: "sv", type: "nsfw" } },
// Add other combinations as needed
];
}