feat: author pages with /authors/:id route (0.16.0)
- `GET /v1/authors/:id` returns `AuthorWithCount` (id, name, manga_count). - `GET /v1/authors/:id/mangas` paged works by that author. - `GET /v1/authors?search=` autocomplete (already used by Phase 1 forms; now formally exposed). - New `/authors/:id` page on the frontend; author chips on the manga detail page (added in Phase 1) now link to a real page. - Extracts `lib/components/MangaCard.svelte` — already used by the home page, ready for the collection page in Phase 3. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
@@ -5,20 +5,19 @@
|
||||
import { page } from '$app/stores';
|
||||
import {
|
||||
listMangas,
|
||||
type MangaCard,
|
||||
type MangaCard as MangaCardData,
|
||||
type MangaSort,
|
||||
type MangaStatus
|
||||
} from '$lib/api/mangas';
|
||||
import { listGenres, type Genre } from '$lib/api/genres';
|
||||
import { listTags, type Tag } from '$lib/api/tags';
|
||||
import { fileUrl } from '$lib/api/client';
|
||||
import Chip from '$lib/components/Chip.svelte';
|
||||
import MangaCard from '$lib/components/MangaCard.svelte';
|
||||
import Search from '@lucide/svelte/icons/search';
|
||||
import BookImage from '@lucide/svelte/icons/book-image';
|
||||
import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal';
|
||||
import Plus from '@lucide/svelte/icons/plus';
|
||||
|
||||
let mangas: MangaCard[] = $state([]);
|
||||
let mangas: MangaCardData[] = $state([]);
|
||||
let search = $state('');
|
||||
let sort: MangaSort = $state('recent');
|
||||
let statusFilter = $state<'' | MangaStatus>('');
|
||||
@@ -389,35 +388,7 @@
|
||||
{/if}
|
||||
<ul class="manga-grid" data-testid="manga-list">
|
||||
{#each mangas as m (m.id)}
|
||||
<li class="manga-card">
|
||||
<a href="/manga/{m.id}" class="cover-link" aria-hidden="true" tabindex="-1">
|
||||
{#if m.cover_image_path}
|
||||
<img
|
||||
src={fileUrl(m.cover_image_path)}
|
||||
alt=""
|
||||
class="cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else}
|
||||
<div class="cover cover-placeholder">
|
||||
<BookImage size={36} aria-hidden="true" />
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
<div class="meta">
|
||||
<a href="/manga/{m.id}" class="title">{m.title}</a>
|
||||
{#if m.authors.length > 0}
|
||||
<span class="author">
|
||||
{m.authors.map((a) => a.name).join(', ')}
|
||||
</span>
|
||||
{/if}
|
||||
{#if m.genres.length > 0}
|
||||
<span class="genres">
|
||||
{m.genres.map((g) => g.name).join(' · ')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</li>
|
||||
<MangaCard manga={m} authors={m.authors} genres={m.genres} />
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
@@ -648,64 +619,4 @@
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.manga-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.cover-link {
|
||||
display: block;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 2 / 3;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: var(--weight-semibold);
|
||||
font-size: var(--font-sm);
|
||||
line-height: var(--leading-tight);
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.title:hover {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.author,
|
||||
.genres {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-xs);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
||||
96
frontend/src/routes/authors/[id]/+page.svelte
Normal file
96
frontend/src/routes/authors/[id]/+page.svelte
Normal file
@@ -0,0 +1,96 @@
|
||||
<script lang="ts">
|
||||
import MangaCard from '$lib/components/MangaCard.svelte';
|
||||
import ArrowLeft from '@lucide/svelte/icons/arrow-left';
|
||||
|
||||
let { data } = $props();
|
||||
const author = $derived(data.author);
|
||||
const mangas = $derived(data.mangas);
|
||||
const total = $derived(data.total);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{author.name} — Mangalord</title>
|
||||
</svelte:head>
|
||||
|
||||
<nav class="back">
|
||||
<a href="/" class="back-link">
|
||||
<ArrowLeft size={16} aria-hidden="true" />
|
||||
<span>Back to search</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<header class="overview">
|
||||
<h1 data-testid="author-name">{author.name}</h1>
|
||||
<p class="count" data-testid="author-manga-count">
|
||||
{author.manga_count}
|
||||
{author.manga_count === 1 ? 'work' : 'works'}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{#if mangas.length === 0}
|
||||
<p class="status" data-testid="author-no-mangas">
|
||||
No mangas attributed to this author.
|
||||
</p>
|
||||
{:else}
|
||||
{#if total != null}
|
||||
<p class="meta" data-testid="author-shown-of-total">
|
||||
Showing {mangas.length} of {total}
|
||||
</p>
|
||||
{/if}
|
||||
<ul class="manga-grid" data-testid="author-manga-list">
|
||||
{#each mangas as m (m.id)}
|
||||
<MangaCard manga={m} testid={`author-manga-${m.id}`} />
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.back {
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.overview {
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.overview h1 {
|
||||
margin: 0 0 var(--space-1);
|
||||
}
|
||||
|
||||
.count {
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 var(--space-2);
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
margin: 0 0 var(--space-3);
|
||||
}
|
||||
|
||||
.status {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.manga-grid {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
</style>
|
||||
24
frontend/src/routes/authors/[id]/+page.ts
Normal file
24
frontend/src/routes/authors/[id]/+page.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import { ApiError } from '$lib/api/client';
|
||||
import { getAuthor, listAuthorMangas } from '$lib/api/authors';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const ssr = false;
|
||||
|
||||
export const load: PageLoad = async ({ params }) => {
|
||||
try {
|
||||
const [author, mangas] = await Promise.all([
|
||||
getAuthor(params.id),
|
||||
listAuthorMangas(params.id, { limit: 50 })
|
||||
]);
|
||||
return { author, mangas: mangas.items, total: mangas.page.total };
|
||||
} catch (e) {
|
||||
// 404 surfaces as a real SvelteKit error so the framework shell
|
||||
// renders the standard not-found page instead of the route's
|
||||
// happy-path markup with undefined data.
|
||||
if (e instanceof ApiError && e.status === 404) {
|
||||
error(404, 'Author not found');
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user