chore: initial project scaffold
Set up Mangalord with a Rust/axum backend, SvelteKit frontend, Postgres, and Docker Compose deployment. Establishes the architecture and TDD patterns the project will extend: - Hexagonal-ish backend layering (domain / repo / storage / api) with a pluggable Storage trait (LocalStorage today, S3 as a future impl). - Initial migration: users, mangas, chapters, bookmarks. - Vertical slice for mangas (list, search, create, get) with #[sqlx::test] integration coverage and storage unit tests. - SvelteKit frontend using Svelte 5 runes, typed API client, Vitest unit tests and Playwright e2e with route mocking. - CLAUDE.md documenting layering, TDD/git/SemVer workflow rules, and extension points (tags, fulltext search, OCR, S3, auth). - Project-scoped .claude/settings.json with permission allowlist for the toolchain (git, cargo, npm/vite, docker, psql, gh, doc fetches). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
11
frontend/src/app.d.ts
vendored
Normal file
11
frontend/src/app.d.ts
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
13
frontend/src/app.html
Normal file
13
frontend/src/app.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Mangalord</title>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
33
frontend/src/lib/api/client.ts
Normal file
33
frontend/src/lib/api/client.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
// All backend calls go through this module. Components and routes import
|
||||
// the typed helpers below — they do not call fetch directly.
|
||||
|
||||
const BASE = (typeof import.meta !== 'undefined' && import.meta.env?.VITE_API_BASE) || '/api';
|
||||
|
||||
export class ApiError extends Error {
|
||||
constructor(
|
||||
public readonly status: number,
|
||||
message: string
|
||||
) {
|
||||
super(message);
|
||||
this.name = 'ApiError';
|
||||
}
|
||||
}
|
||||
|
||||
export async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const res = await fetch(`${BASE}${path}`, init);
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => '');
|
||||
throw new ApiError(res.status, text || `${res.status} ${res.statusText}`);
|
||||
}
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
export type Manga = {
|
||||
id: string;
|
||||
title: string;
|
||||
author: string | null;
|
||||
description: string | null;
|
||||
cover_image_path: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
69
frontend/src/lib/api/mangas.test.ts
Normal file
69
frontend/src/lib/api/mangas.test.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { listMangas, createManga, getManga } from './mangas';
|
||||
|
||||
function ok(body: unknown): Response {
|
||||
return new Response(JSON.stringify(body), {
|
||||
status: 200,
|
||||
headers: { 'content-type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
function fail(status: number, body = ''): Response {
|
||||
return new Response(body, { status });
|
||||
}
|
||||
|
||||
describe('mangas api client', () => {
|
||||
let fetchSpy: ReturnType<typeof vi.spyOn>;
|
||||
|
||||
beforeEach(() => {
|
||||
fetchSpy = vi.spyOn(globalThis, 'fetch');
|
||||
});
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('listMangas hits /mangas with no params by default', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(ok([]));
|
||||
await listMangas();
|
||||
expect(fetchSpy).toHaveBeenCalledTimes(1);
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toMatch(/\/mangas$/);
|
||||
});
|
||||
|
||||
it('listMangas encodes search, limit, offset', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(ok([]));
|
||||
await listMangas({ search: 'one piece', limit: 10, offset: 20 });
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toContain('search=one+piece');
|
||||
expect(url).toContain('limit=10');
|
||||
expect(url).toContain('offset=20');
|
||||
});
|
||||
|
||||
it('createManga POSTs JSON', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(
|
||||
ok({
|
||||
id: 'abc',
|
||||
title: 'Berserk',
|
||||
author: 'Miura',
|
||||
description: null,
|
||||
cover_image_path: null,
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
updated_at: '2026-01-01T00:00:00Z'
|
||||
})
|
||||
);
|
||||
const m = await createManga({ title: 'Berserk', author: 'Miura' });
|
||||
expect(m.title).toBe('Berserk');
|
||||
const init = fetchSpy.mock.calls[0][1] as RequestInit;
|
||||
expect(init.method).toBe('POST');
|
||||
expect(init.headers).toMatchObject({ 'content-type': 'application/json' });
|
||||
expect(JSON.parse(init.body as string)).toEqual({ title: 'Berserk', author: 'Miura' });
|
||||
});
|
||||
|
||||
it('getManga throws ApiError on non-2xx', async () => {
|
||||
fetchSpy.mockResolvedValue(fail(404, 'not found'));
|
||||
await expect(getManga('missing')).rejects.toMatchObject({
|
||||
name: 'ApiError',
|
||||
status: 404
|
||||
});
|
||||
});
|
||||
});
|
||||
36
frontend/src/lib/api/mangas.ts
Normal file
36
frontend/src/lib/api/mangas.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { request, type Manga } from './client';
|
||||
|
||||
export type ListOptions = {
|
||||
search?: string;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
};
|
||||
|
||||
export async function listMangas(opts: ListOptions = {}): Promise<Manga[]> {
|
||||
const params = new URLSearchParams();
|
||||
if (opts.search) params.set('search', opts.search);
|
||||
if (opts.limit != null) params.set('limit', String(opts.limit));
|
||||
if (opts.offset != null) params.set('offset', String(opts.offset));
|
||||
const qs = params.toString();
|
||||
return request<Manga[]>(`/mangas${qs ? `?${qs}` : ''}`);
|
||||
}
|
||||
|
||||
export async function getManga(id: string): Promise<Manga> {
|
||||
return request<Manga>(`/mangas/${encodeURIComponent(id)}`);
|
||||
}
|
||||
|
||||
export type NewManga = {
|
||||
title: string;
|
||||
author?: string | null;
|
||||
description?: string | null;
|
||||
};
|
||||
|
||||
export async function createManga(input: NewManga): Promise<Manga> {
|
||||
return request<Manga>('/mangas', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(input)
|
||||
});
|
||||
}
|
||||
|
||||
export type { Manga };
|
||||
30
frontend/src/routes/+layout.svelte
Normal file
30
frontend/src/routes/+layout.svelte
Normal file
@@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/">Mangalord</a>
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/bookmarks">Bookmarks</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{@render children()}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
nav a {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
main {
|
||||
padding: 1rem;
|
||||
max-width: 64rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
57
frontend/src/routes/+page.svelte
Normal file
57
frontend/src/routes/+page.svelte
Normal file
@@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { listMangas, type Manga } from '$lib/api/mangas';
|
||||
|
||||
let mangas: Manga[] = $state([]);
|
||||
let search = $state('');
|
||||
let loading = $state(true);
|
||||
let error: string | null = $state(null);
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
error = null;
|
||||
try {
|
||||
mangas = await listMangas({ search: search.trim() || undefined });
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(load);
|
||||
</script>
|
||||
|
||||
<h1>Mangas</h1>
|
||||
|
||||
<form
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
load();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="search"
|
||||
bind:value={search}
|
||||
placeholder="Search by title or author"
|
||||
data-testid="search-input"
|
||||
/>
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
|
||||
{#if loading}
|
||||
<p data-testid="loading">Loading…</p>
|
||||
{:else if error}
|
||||
<p data-testid="error" role="alert">{error}</p>
|
||||
{:else if mangas.length === 0}
|
||||
<p data-testid="empty">No mangas yet. <a href="/upload">Upload one</a>.</p>
|
||||
{:else}
|
||||
<ul data-testid="manga-list">
|
||||
{#each mangas as m (m.id)}
|
||||
<li>
|
||||
<a href="/manga/{m.id}">{m.title}</a>
|
||||
{#if m.author}<span> — {m.author}</span>{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user