From be55729482296663da8c96723bfd22080e6762c1 Mon Sep 17 00:00:00 2001 From: yyamashita Date: Wed, 6 May 2026 22:07:53 +0900 Subject: Add Tokyo livehouse event aggregator service Full-stack React Router v7 app that scrapes event listings from major Tokyo live venues (Liquid Room, WWW/WWW X, Shibuya O-EAST, Shinjuku LOFT, Club Quattro) and stores them in SQLite for browsing and search. - Modular scraper architecture: add a new venue by dropping a file in app/scrapers/ and registering it in index.ts - Routes: /events (filter by keyword/venue/date), /events/:id, /venues, GET /api/scrape - EventCard shows artist, date/time, venue, ticket URL, and fee - Post-scrape per-venue Markdown files generated to events/ (dev reference) - /add-livehouse Claude Code skill defined in .claude/commands/ Co-Authored-By: Claude Sonnet 4.6 --- app/routes/api.scrape.ts | 37 +++++++++++++ app/routes/events.$id.tsx | 124 +++++++++++++++++++++++++++++++++++++++++++ app/routes/events._index.tsx | 94 ++++++++++++++++++++++++++++++++ app/routes/index.tsx | 5 ++ app/routes/venues.tsx | 68 ++++++++++++++++++++++++ 5 files changed, 328 insertions(+) create mode 100644 app/routes/api.scrape.ts create mode 100644 app/routes/events.$id.tsx create mode 100644 app/routes/events._index.tsx create mode 100644 app/routes/index.tsx create mode 100644 app/routes/venues.tsx (limited to 'app/routes') diff --git a/app/routes/api.scrape.ts b/app/routes/api.scrape.ts new file mode 100644 index 0000000..4071985 --- /dev/null +++ b/app/routes/api.scrape.ts @@ -0,0 +1,37 @@ +/** + * Resource route: POST /api/scrape + * Triggers scraping for all venues (or a specific one via ?venue_id=xxx). + * Returns JSON results and redirects back if called from a form. + */ +import { redirect } from "react-router"; +import type { Route } from "./+types/api.scrape"; +import { runAllScrapers, runScraper } from "~/lib/scraper-runner.server"; + +export async function action({ request }: Route.ActionArgs) { + const formData = await request.formData(); + const venueId = formData.get("venue_id"); + + const results = venueId + ? [await runScraper(String(venueId))] + : await runAllScrapers(); + + // If called from a browser form, redirect back + const referer = request.headers.get("Referer"); + if (referer) { + return redirect(referer); + } + + return Response.json({ results }); +} + +// Allow GET for quick testing in the browser +export async function loader({ request }: Route.LoaderArgs) { + const url = new URL(request.url); + const venueId = url.searchParams.get("venue_id"); + + const results = venueId + ? [await runScraper(venueId)] + : await runAllScrapers(); + + return Response.json({ results }); +} diff --git a/app/routes/events.$id.tsx b/app/routes/events.$id.tsx new file mode 100644 index 0000000..cecb282 --- /dev/null +++ b/app/routes/events.$id.tsx @@ -0,0 +1,124 @@ +import { useLoaderData, Link } from "react-router"; +import type { Route } from "./+types/events.$id"; +import { getEvent } from "~/lib/db.server"; + +export async function loader({ params }: Route.LoaderArgs) { + const id = parseInt(params.id, 10); + if (isNaN(id)) throw new Response("Not Found", { status: 404 }); + const event = getEvent(id); + if (!event) throw new Response("Not Found", { status: 404 }); + return { event }; +} + +export default function EventDetail() { + const { event } = useLoaderData(); + + return ( +
+
+ + 🎸 東京ライブハウス + + +
+ +
+ + ← イベント一覧に戻る + + +
+ {event.image_url && ( + {event.title} + )} + +
+
+

{event.title}

+ {event.artist && ( +

{event.artist}

+ )} +
+ + {event.venue_name} + +
+ +
+ + {event.open_time && } + {event.start_time && } + {event.price && } + {event.venue_area && } +
+ + {event.description && ( +

+ {event.description} +

+ )} + +
+ {event.ticket_url && ( + + チケット購入 + + )} + {event.source_url && ( + + 詳細ページ + + )} + {event.venue_url && ( + + 会場サイト + + )} +
+ +

+ 最終取得: {event.fetched_at} +

+
+
+
+ ); +} + +function Detail({ label, value }: { label: string; value: string }) { + return ( +
+
{label}
+
{value}
+
+ ); +} + +function formatDate(iso: string): string { + const [y, m, d] = iso.split("-"); + const days = ["日", "月", "火", "水", "木", "金", "土"]; + const day = days[new Date(iso).getDay()]; + return `${y}年${m}月${d}日（${day}）`; +} diff --git a/app/routes/events._index.tsx b/app/routes/events._index.tsx new file mode 100644 index 0000000..3883d37 --- /dev/null +++ b/app/routes/events._index.tsx @@ -0,0 +1,94 @@ +import { useLoaderData, useSearchParams, Form, Link } from "react-router"; +import type { Route } from "./+types/events._index"; +import { queryEvents, getVenues } from "~/lib/db.server"; +import EventCard from "~/components/EventCard"; +import FilterBar from "~/components/FilterBar"; + +export async function loader({ request }: Route.LoaderArgs) { + const url = new URL(request.url); + const date_from = url.searchParams.get("date_from") ?? undefined; + const date_to = url.searchParams.get("date_to") ?? undefined; + const venue_id = url.searchParams.get("venue_id") ?? undefined; + const keyword = url.searchParams.get("keyword") ?? undefined; + const page = Math.max(1, parseInt(url.searchParams.get("page") ?? "1", 10)); + const limit = 30; + const offset = (page - 1) * limit; + + const events = queryEvents({ date_from, date_to, venue_id, keyword, limit, offset }); + const venues = getVenues(); + + return { events, venues, page, hasMore: events.length === limit }; +} + +export default function EventsIndex() { + const { events, venues, page, hasMore } = useLoaderData(); + const [searchParams] = useSearchParams(); + + return ( +
+
+ + 🎸 東京ライブハウス + + +
+ +
+
+

イベント一覧

+
+ +
+
+ + + + {events.length === 0 ? ( +
+

イベントが見つかりません

+

「情報を更新」ボタンでデータを取得してください。

+
+ ) : ( +
+ {events.map((event) => ( + + ))} +
+ )} + +
+ {page > 1 && ( + + ← 前のページ + + )} + {hasMore && ( + + 次のページ → + + )} +
+
+
+ ); +} + +function buildPageParams(params: URLSearchParams, page: number): string { + const next = new URLSearchParams(params); + next.set("page", String(page)); + return next.toString(); +} diff --git a/app/routes/index.tsx b/app/routes/index.tsx new file mode 100644 index 0000000..1cdb9a4 --- /dev/null +++ b/app/routes/index.tsx @@ -0,0 +1,5 @@ +import { redirect } from "react-router"; + +export function loader() { + return redirect("/events"); +} diff --git a/app/routes/venues.tsx b/app/routes/venues.tsx new file mode 100644 index 0000000..23b052f --- /dev/null +++ b/app/routes/venues.tsx @@ -0,0 +1,68 @@ +import { useLoaderData, Link } from "react-router"; +import type { Route } from "./+types/venues"; +import { getVenues } from "~/lib/db.server"; +import { getScraperIds } from "~/lib/venue-meta.server"; + +export async function loader(_: Route.LoaderArgs) { + const venues = getVenues(); + const scraperIds = getScraperIds(); + return { venues, scraperIds }; +} + +export default function Venues() { + const { venues, scraperIds: scraperIdList } = useLoaderData(); + const scraperIds = new Set(scraperIdList); + + return ( +
+
+ + 🎸 東京ライブハウス + + +
+ +
+
+

会場一覧

+

+ 現在 {scraperIdList.length} 会場のスクレイパーが登録されています。 + 新しい会場を追加するには app/scrapers/ に + モジュールを追加して index.ts に登録してください。 +

+
+ + {venues.length === 0 ? ( +

まだ会場データがありません。「情報を更新」してください。

+ ) : ( +
+ {venues.map((v) => ( + +
+

{v.name}

+ {v.area &&

{v.area}

} + {scraperIds.has(v.id) && ( + + スクレイパー登録済 + + )} +
+ + {v.event_count ?? 0} + 件 + + + ))} +
+ )} +
+
+ ); +} -- cgit v1.2.3