diff --git a/.env.example b/.env.example index ab7928d..1dab86b 100644 --- a/.env.example +++ b/.env.example @@ -23,6 +23,7 @@ OUTBOX_LEASE_MS=30000 # S3-compatible private media storage S3_ENDPOINT=https://s3.example.internal +S3_PUBLIC_URL=https://buzz-cdn.astrxl.dev S3_REGION=auto S3_BUCKET=buzz-sheet-media S3_ACCESS_KEY_ID=replace-with-access-key diff --git a/Plan.md b/Plan.md index 6b6f732..7a5b6a1 100644 --- a/Plan.md +++ b/Plan.md @@ -1,195 +1,57 @@ -# Buzz Sheet Guide Platform +# Buzz Sheet Structured Guide Platform -## Summary +## Product -Build a Thai-first, mobile-responsive guide CMS that converts the ideas found across the five reference Google Sheets into polished character guide websites. It must feel like a game guide—not a spreadsheet—on both the public and admin sides. +Buzz Sheet is a Thai-first, image-first Genshin guide CMS. The public directory +shows a required cover and Overview for every guide. Each guide exposes only +non-empty Weapons, Artifacts & Stats, Constellations, Team Calc, and optional +Extra sections. Use the English terms “Build” and “Team” throughout the UI. -The admin uses a visual Notion-style block editor with forms, cards, drag-and-drop sections, live preview, templates, autosave, and simple arithmetic formula fields. Published pages update from accepted autosaves, with Redis-backed Server-Sent Events (SSE) prompting connected public and admin clients to refetch authoritative state. Executable custom code, HTML, JavaScript, React, and arbitrary Tailwind input are excluded. +The admin workflow stays intentionally simple: -## Product and UI +1. Manually Sync the latest Lunaris catalog. +2. Select one Lunaris character at `/admin/create`. +3. Upload a required Guide Image and write the Overview. +4. Edit one structured section at a time under `/admin/[charid]`. +5. Press Save to update the public website immediately. -- Public routes: - - `/` searchable character directory. - - `/[character]` redirects to the character’s first visible page. - - `/[character]/[page]` renders any custom page, including `/mizuki/info` or `/mizuki/combo`. -- Admin routes: - - `/admin/login` - - `/admin` - - `/admin/[character]/[page]` - - `/admin/templates` -- Allow unlimited characters, custom pages, custom page slugs, custom fields, navigation ordering, and a public note on every page. -- New characters and pages start hidden. A page is public only when both its character and the page are visible. Existing published pages update immediately after an accepted autosave; a character with no visible pages returns 404. -- Provide reusable templates derived from all five workbooks without importing or publishing their original content: - - Classic multi-page character guide - - Combo and rotation guide - - Combined one-page build - - Multi-role/reaction build - - Categorized team database - - Calculation-backed comparison guide -- Initialize official shadcn components with the `base-nova` preset and use Tailwind v4 semantic tokens. Compose existing primitives before creating custom UI, and use only components appropriate to each interaction—not every component literally. -- Use a permanent dark, game-inspired theme with no light-mode switcher or `next-themes`. Keep decoration restrained, hierarchy strong, contrast accessible, and controls at least 44 px on touch surfaces. -- Use Anuphan as the Thai-first interface font with appropriate system fallbacks. Reserve monospace typography for formulas and technical values, and test wrapping for long Thai labels and mixed-language game terms. -- Use one restrained brand accent, semantic status colors, and a limited chart palette. Element and rarity colors appear as badges or markers and never carry meaning alone. Honor reduced motion and keep animation limited to functional panel, drag, chart, and save-state feedback. -- Public pages use guide-oriented blocks rather than editable grids: - - Profile/hero - - Rich text and headings - - Notes and callouts - - Stat cards and custom key/value fields - - Ranked weapon/artifact/constellation comparisons - - Team compositions - - Combo/rotation steps - - Tables and charts - - Images, GIFs, galleries, tabs, accordions, sections, columns, links, and separators -- Build `/` as a responsive visual portrait-card directory with search, compact role/element filters, metadata badges, loading skeletons, image fallbacks, and a useful empty state. Do not add a grid/list mode toggle in v1. -- Give public character guides a sticky character header followed by horizontally scrollable route links. Add a sticky desktop “on this page” section rail and an equivalent titled drawer on mobile. -- Keep prose in a readable content column and allow team layouts, tables, galleries, and charts to use wider responsive regions. -- Compose recommendations with full `Card` or `Item` structures, `Badge` metadata, `Alert` callouts, `Accordion` for secondary explanations, `Tabs` for authored variants, and `Carousel` only for image galleries. -- Show weapon, artifact, and game-term details through `HoverCard` on pointer devices and the same content in a titled `Drawer` on touch devices. Never make hover the only way to access information. -- Keep public comparisons author-curated and read-only. Use horizontal bars for ranked weapons/artifacts, grouped or stacked bars for team totals and member contributions, and cumulative or incremental bars/lines for constellations. Always show exact values and an accessible table fallback; do not chart qualitative recommendations or metrics with incompatible units. -- Admin editing uses a clean three-pane desktop workspace: a collapsible character/page/template `Sidebar`, an editable center canvas, and a resizable right panel with Inspector and Live Preview tabs. On mobile, keep the canvas primary and move navigation, block insertion, and inspection into titled drawers. -- Add a sticky admin toolbar with breadcrumbs, undo/redo, persistent autosave status, visibility, viewport `ToggleGroup`, and preview actions. Use `Badge` and `Spinner` for autosave status; reserve `sonner` for failures, recovery, and completed explicit actions. -- Edit rich text and simple values inline. Use the inspector for layout, data-source selection, formulas, responsive settings, and advanced properties. Support drag and keyboard reordering with visible selection and focus states. -- Use `CommandDialog` for navigation and block insertion. Use accessible contextual menus for block actions, `AlertDialog` for destructive actions, `Empty` for unconfigured blocks, and `Skeleton` for loading states. -- Edit structured comparison data through a compact admin `Table`, opening row creation and complex row editing in structured forms instead of turning the canvas into a spreadsheet. -- Build forms with `FieldGroup`, `Field`, and `InputGroup`. Formula fields use an `fx` addon, field-reference autocomplete, calculated preview, and inline typed errors. -- Comparison data can be entered efficiently in compact tables, but page construction and public rendering must never resemble Google Sheets. +There is one guide per Lunaris character key. Empty sections remain private. +Remove Guide moves content to a recoverable Trash before permanent deletion. -## Architecture and Interfaces +## Structured content -- Use Next.js 16.3.3 App Router, React 19, Bun 1.3.14, TypeScript, PostgreSQL, Drizzle, Better Auth, and Bun’s native S3 client. -- Follow the installed Next.js documentation for Server Components, Server Actions, caching, authentication, and deployment. -- Use one generic content model: - - `Character`: slug, localized identity fields, media, ordering, visibility. - - `Page`: character, slug, title, navigation order, visibility, public note, version. - - `Block`: stable ID, type, schema version, validated configuration, responsive layout. - - `DataSource`: globally reusable structured rows/fields that can feed tables, rankings, cards, and charts. - - `DataSourceVersion`: immutable data snapshot used for dependency tracking, public rendering, and historical restoration. - - `Template`: reusable character/page/block structure without reference-sheet content. - - `Revision`: page snapshot, label, author, timestamp, and source version. - - `SlugAlias`: permanent redirect after character or page slug changes. - - `Media`: private object key, metadata, current references, and revision references. - - `OutboxEvent`: retryable post-commit cache invalidation and SSE notification. -- Add validation and migration handlers for every block schema. Unknown or future block types render a safe unsupported-block notice instead of breaking the page. -- Add a constrained `ComparisonChart` block configuration: - - `dataSourceId`: globally reusable structured data source. - - `categoryField`: label/category field used by the axis and table fallback. - - `series`: one to six numeric fields with authored labels and semantic chart color tokens. - - `presentation`: `horizontal-bar`, `grouped-bar`, `stacked-bar`, or `line`. - - `normalization`: `raw`, `percent-of-total`, or `baseline-100`. - - `sort`: `authored`, `ascending`, or `descending`. - - `showValues` and `showLegend`: authored display controls. - - `tableFallback`: always enabled and not removable by authors. - - Validate a maximum of 20 visible categories and six series. Invalid or missing data renders a typed error or empty state without breaking the page. -- Render charts as isolated client components inside otherwise server-rendered public pages. Use shadcn `ChartContainer`, `ChartTooltip`, and `ChartLegend` with Recharts v3, semantic chart tokens, responsive minimum dimensions, visible touch-friendly values, and `accessibilityLayer`. -- Calculated fields use a restricted arithmetic expression language—not executable code: - - Supports `+`, `-`, `*`, `/`, parentheses, percentages, unary signs, field references, dependency ordering, circular-reference detection, and clear error states. - - Admins access formulas only through an optional advanced setting on individual fields, with field-name autocomplete and a calculated preview. - - Imported regression fixtures may retain A1-style references internally, but normal admin editing uses stable named field references. - - Use deterministic decimal arithmetic without intermediate rounding. Store canonical decimal strings and apply configurable display precision with half-up rounding only for presentation. - - Treat blank or missing references, cycles, and division by zero as typed field errors. Invalid fields and their dependents render safe public error placeholders while unrelated valid changes publish normally. - - Hide formula expressions and internal error details from public visitors. - - Place evaluation behind a `FormulaEngine` interface so a larger engine can be added later without changing page or block schemas. -- Store raw values and formulas as the source of truth; calculated results and public page DTOs are derived snapshots. -- Autosave 750 ms after the last edit, serialize mutations per page, and protect every mutation with versions. Each mutation sends `expectedVersion`; conflicting changes are rejected and shown in a merge/reload dialog rather than silently overwriting work. Retry transient failures with capped exponential backoff, but do not retry validation or conflict responses automatically. -- Version global data sources independently. Normal references follow the latest version. Revisions capture exact data-source versions; restoring a revision creates a new current page version pinned to those historical versions without changing other consumers. Provide an explicit “use latest” action to remove a pin. -- Keep named revisions indefinitely and hourly coalesced checkpoints for 30 days. Revision snapshots retain exact page, block, data-source-version, and media references. Restoring creates a new current version rather than deleting history. -- Cache validated public page snapshots by their page and data-source version vector. Use an external Redis-backed Next.js remote cache and tag handler so both application replicas share cache state and invalidations. Keep admin routes dynamic. -- Write cache invalidation and SSE work to a transactional outbox with the content mutation. A retrying worker invalidates affected page, directory, and data-source tags only after the database commit, then publishes typed Redis events. -- Provide Redis-backed, invalidation-only SSE streams for public pages, the character directory, and authenticated admin sessions. Events carry only opaque IDs and versions; clients refetch authoritative state on connection, reconnection, or notification. Send 90-second heartbeats, close streams after 30 minutes so clients reconnect, and disable Traefik response buffering. SSE is never a source of correctness and never carries page content. -- Authenticate with Better Auth email and password. Permit registration and admin access only when the credential account email exactly matches an address in the comma-separated `ADMIN_EMAIL` configuration; use a temporary `/register` bootstrap page and repeat authorization checks in every mutation, media, and administrative endpoint. -- Upload PNG, JPEG, WebP, and GIF assets up to 20 MB through short-lived presigned requests. Serve them through same-origin `/media/[id]` responses. Allow public access only while an asset is referenced by a currently visible snapshot; otherwise require admin authentication. Retain objects while referenced by either current content or retained revisions. -- Applying a template clones independent pages, blocks, and data sources. Later template edits affect only future applications. -- Do not provide custom HTML, JavaScript, TypeScript, React, CSS, code blocks that execute, external scripts, arbitrary npm packages, or network-capable extensions. +- Weapons: catalog weapon, R1–R5, overall percent and/or personal percent. +- Artifacts: multiple named ranking groups, one-set or two-set rows, percent, + up to two main stats per slot, ordered substats, targets, NA/E/Q priority and + levels, and an optional note. +- Constellations: C1–C6 description and cumulative performance against C0=100%. +- Team Calc: multiple four-character teams, raw damage, calculated member + shares, rotation duration, total DPS, and combo text. +- Extra: multiple sections of image-first rows with heading, short body, and an + optional percentage. -### Content lifecycle +## Catalog and media -```mermaid -flowchart LR - E[Admin editor] -->|autosave + expectedVersion| A[Authenticated mutation] - A --> V{Validate version,
blocks and formulas} - V -->|conflict| C[Merge or reload dialog] - V -->|accepted| T[(PostgreSQL transaction)] +The Sync button enqueues a worker job. It fetches Lunaris `version.json` and +the versioned character, weapon, and artifact lists, validates them, filters +placeholder or missing-image records, mirrors unique WebP assets and normalized +JSON to Bun S3, then atomically activates the completed version. Failed jobs do +not replace the active catalog. There is no automatic sync. - T --> P[Page and blocks] - T --> D[Immutable DataSource version] - T --> R[Revision and public snapshot] - T --> O[Outbox event] +`S3_ENDPOINT` is the private Garage API used for writes. +`S3_PUBLIC_URL=https://buzz-cdn.astrxl.dev` is the public read base. Browser +uploads go to an authenticated application route, which validates PNG, JPEG, +WebP, or GIF files up to 20 MB and writes them server-side through Bun S3. - O --> W[Retrying outbox worker] - W --> X[(Redis)] - X --> K[Shared cache and tag invalidation] - X --> S[SSE invalidation topics] +## Operations and acceptance - S --> U[Public and admin clients] - U -->|refetch authoritative version| Q[Public snapshot query] - Q --> K - K --> B[Guide block renderer] - - V -->|field error| F[Typed field error] - F --> T - F --> B -``` - -## Delivery and Deployment - -- Implement internally in four gates: - 1. Database model, immutable data-source versions, revisions, transactional outbox, formula engine, and workbook-derived fixtures. - 2. Public renderer, templates, and responsive shadcn admin editor. - 3. Better Auth email/password authentication, reference-aware S3 media handling, Redis-backed caching and SSE, and conflict recovery. - 4. Production builds, HTTP and integration tests, Docker, migrations, Kubernetes, and CI. -- Release to production once all four gates pass. -- During the public/editor gate, initialize shadcn with the `base-nova` preset before adding components. Add only the official components required by the implemented surface, and review generated component source and Base UI composition after each addition. -- Implement and commit each completed feature separately. Do not accumulate the project into one large commit. -- Keep every commit focused, independently reviewable, and limited to one coherent feature or supporting change. -- Run the feature’s relevant checks before committing it, and do not mix unrelated cleanup or formatting into feature commits. -- Use clear conventional commit messages such as `feat(editor): add page block ordering` or `test(formulas): add workbook regression corpus`. -- Provide native Kubernetes manifests through Kustomize, following the referenced Buzz Kubernetes conventions: - - Namespace `buzz-sheet` - - Two application replicas with rolling updates - - ClusterIP service on port 3000 - - Traefik ingress for `sheet.sudloh.com` - - Cloudflare edge TLS with the standard HTTP Traefik origin route - - ARM64 workload scheduling matching the production image architecture - - Readiness/liveness health endpoint - - Requests of 500m CPU/512 MiB and limits of 1 CPU/1 GiB - - HPA from 2–6 replicas at 70% CPU - - PDB with minimum one available replica - - Least-privilege CI deployer RBAC -- Use the existing external PostgreSQL, Redis, and S3-compatible services through Kubernetes secrets; do not provision an in-cluster database or Redis instance. -- Share a stable `NEXT_SERVER_ACTIONS_ENCRYPTION_KEY` across replicas and set a deployment ID from the immutable image revision to protect Server Actions and client navigation during rolling updates. Notify active clients when that revision changes and offer a full reload into the new release. -- Build immutable application and migration images in Gitea Actions, defaulting to `registry.neko-piranha.ts.net/astral/buzz-sheet`. -- Run a versioned Drizzle migration Job before rollout. Use expand/contract migrations so the previous application image remains compatible during rolling deployment. -- Produce deployment manifests and CI configuration but do not contact or mutate the production cluster during implementation. - -## Test Plan and Acceptance Criteria - -- Commit sanitized fixtures containing workbook and sheet identity, A1-to-field mappings, inputs, formulas, and expected results without original guide text or media. Assert that the corpus contains exactly all 379 extracted formula cells: 314 use addition, 335 use division, 43 contain decimal literals, and none use functions, subtraction, multiplication, percentages, unary signs, cross-sheet references, or absolute references. -- Verify those 379 formulas with deterministic decimal results, then separately test precedence, subtraction, multiplication, percentages, unary signs, blank and missing references, cycles, dependency-propagated failures, rounding, and division by zero. -- Test block validation, schema migration, unknown-block fallback, templates, custom slugs, redirects, public notes, visibility, ordering, and revision restore. -- Test autosave debounce, serialization, transient retries, concurrent conflicts, checkpoint coalescing, named revisions, 30-day expiry, global data-source dependency updates, historical version pinning, “use latest,” and media retention. -- Test email/password registration restrictions and authorization on every write/media endpoint. -- Test upload limits, file validation, failed upload recovery, and same-origin media delivery. -- Test cached public snapshots and immediate dependency-aware invalidation following accepted autosaves. -- Test SSE authorization, public-event privacy, heartbeat, reconnection and authoritative refetch, duplicate or missed notifications, and directory/page/admin topics. -- Run integration tests against two application instances sharing Redis to verify cross-replica cache invalidation and SSE delivery. -- Test character directory search and all generic route combinations. -- Test directory search/filter states, card image failures, empty results, sticky guide navigation, section navigation, long Thai labels, and characters with many custom pages. -- Test each comparison presentation with empty, invalid, negative, very large, and crowded datasets. Verify normalization, sorting, visible exact values, touch behavior, and the accessible table fallback. -- Test desktop panel resizing and collapse state, Inspector/Preview switching, inline editing, inspector synchronization, command insertion, mobile drawers, keyboard block movement, and autosave/conflict states. -- Run responsive browser and visual regression tests for common mobile, tablet, desktop, and wide-desktop sizes, including touch editing and Thai text overflow. -- Validate accessibility for keyboard navigation, focus states, charts, drawers, dialogs, menus, command search, drag alternatives, form labels, contrast, and reduced motion. -- Pass unit/integration tests, `bunx tsc --noEmit`, linting, production application and migration image builds, and `kubectl kustomize k8s/`. -- Acceptance requires that all reference guide structures can be reproduced using visual blocks and formula fields without custom code or a spreadsheet-style public interface. - -## Assumptions - -- The interface and authored guide content are Thai-first; official character, weapon, and game terms may remain in their entered language. -- Public comparisons are authored and read-only in v1; visitors cannot construct custom comparison sets. -- Decorative artwork is optional and content-driven. The application shell remains restrained so guide imagery and comparison data stay dominant. -- The five supplied spreadsheets are design and formula references only. Their content is not automatically seeded or published. -- Content entry and migration are performed through the new admin editor. -- There is one administrator at launch. -- Formulas are permitted only as restricted arithmetic expressions; “no code” means no executable or presentation code. -- SSE is a live-refresh enhancement. PostgreSQL versions, public snapshots, and authoritative refetches remain the source of correctness. -- Named revisions remain indefinitely. Expired checkpoints release their media references only when no current content or other retained revision still references those assets. -- Advanced spreadsheet functions, collaborative cursor editing, comments, arbitrary plugins, and public user accounts are outside the initial release. +- PostgreSQL migrations run before the ARM64 web and worker rollout. +- Better Auth users and sessions are preserved; the legacy block-editor guide + content is intentionally reset by migration `0002`. +- Redis outbox events invalidate the directory and guide streams after saves, + trash, restore, or delete actions. +- Verification requires `bun run test`, `bun run typecheck`, `bun run lint`, + `kubectl kustomize k8s/`, a successful ARM64 container build, ready health + checks, CDN reads, authenticated upload, catalog sync, and public rendering. +- Do not use Chromium or Playwright. Use Vitest, HTTP checks, and manual browser + verification. diff --git a/README.md b/README.md index a4d5952..dca3416 100644 --- a/README.md +++ b/README.md @@ -210,6 +210,7 @@ BETTER_AUTH_SECRET ADMIN_EMAIL REDIS_URL S3_ENDPOINT +S3_PUBLIC_URL S3_BUCKET S3_ACCESS_KEY_ID S3_SECRET_ACCESS_KEY diff --git a/app/[character]/[page]/page.tsx b/app/[character]/[page]/page.tsx index 52e0e17..0169a10 100644 --- a/app/[character]/[page]/page.tsx +++ b/app/[character]/[page]/page.tsx @@ -1,28 +1,23 @@ import type { Metadata } from "next"; -import { notFound, permanentRedirect } from "next/navigation"; +import { notFound } from "next/navigation"; import { connection } from "next/server"; -import { GuideShell } from "@/components/public/guide-shell"; -import { loadPublicPage } from "@/lib/content/loaders"; +import { publicSections, StructuredGuideShell } from "@/components/public/structured-guide"; +import { getPublicGuide } from "@/lib/guides/queries"; -type RouteParams = Promise<{ character: string; page: string }>; +type Params = Promise<{ character: string; page: string }>; -export async function generateMetadata({ params }: { params: RouteParams }): Promise { +export async function generateMetadata({ params }: { params: Params }): Promise { await connection(); const { character, page } = await params; - const result = await loadPublicPage(character, page); - if (result.type !== "page") return { title: "ไม่พบคู่มือ" }; - return { - title: `${result.snapshot.page.title} — ${result.snapshot.character.nameTh}`, - description: result.snapshot.character.description ?? undefined, - }; + const guide = await getPublicGuide(character); + return guide ? { title: `${page} — ${guide.name} Build Guide`, description: guide.overview } : { title: "ไม่พบ Guide" }; } -export default async function GuidePage({ params }: { params: RouteParams }) { +export default async function GuideSectionPage({ params }: { params: Params }) { await connection(); const { character, page } = await params; - const result = await loadPublicPage(character, page); - if (result.type === "redirect") permanentRedirect(result.location); - if (result.type === "not-found") notFound(); - return ; + const guide = await getPublicGuide(character); + if (!guide || !publicSections(guide).some((section) => section.slug === page)) notFound(); + return ; } diff --git a/app/[character]/page.tsx b/app/[character]/page.tsx index 5203054..3421ed7 100644 --- a/app/[character]/page.tsx +++ b/app/[character]/page.tsx @@ -1,16 +1,21 @@ -import { notFound, permanentRedirect } from "next/navigation"; +import type { Metadata } from "next"; +import { notFound } from "next/navigation"; import { connection } from "next/server"; -import { loadPublicPage } from "@/lib/content/loaders"; +import { StructuredGuideShell } from "@/components/public/structured-guide"; +import { getPublicGuide } from "@/lib/guides/queries"; -export default async function CharacterPage({ - params, -}: { - params: Promise<{ character: string }>; -}) { +type Params = Promise<{ character: string }>; + +export async function generateMetadata({ params }: { params: Params }): Promise { await connection(); - const { character } = await params; - const result = await loadPublicPage(character); - if (result.type === "redirect") permanentRedirect(result.location); - notFound(); + const guide = await getPublicGuide((await params).character); + return guide ? { title: `${guide.name} Build Guide`, description: guide.overview } : { title: "ไม่พบ Guide" }; +} + +export default async function GuideOverviewPage({ params }: { params: Params }) { + await connection(); + const guide = await getPublicGuide((await params).character); + if (!guide) notFound(); + return ; } diff --git a/app/admin/[character]/[page]/page.tsx b/app/admin/[character]/[page]/page.tsx index 432c8c9..00bb154 100644 --- a/app/admin/[character]/[page]/page.tsx +++ b/app/admin/[character]/[page]/page.tsx @@ -1,34 +1,23 @@ +import Link from "next/link"; +import { ArrowLeftIcon } from "lucide-react"; import { notFound, redirect } from "next/navigation"; import { connection } from "next/server"; -import { EditorWorkspace } from "@/components/admin/editor-workspace"; -import { LiveRefresh } from "@/components/live-refresh"; +import { GuideSectionEditor } from "@/components/admin/guide-section-editor"; +import { Button } from "@/components/ui/button"; import { getAdminSession } from "@/lib/auth/server"; -import { loadAdminNavigation, loadAdminPage } from "@/lib/content/loaders"; +import { getActiveCatalog, getGuideByCharacterKey, getPublicGuide } from "@/lib/guides/queries"; -export default async function AdminEditorPage({ - params, -}: { - params: Promise<{ character: string; page: string }>; -}) { +const sections = ["weapon", "artifact", "constellations", "team", "extra"] as const; + +export default async function StructuredEditorPage({ params }: { params: Promise<{ character: string; page: string }> }) { await connection(); if (!(await getAdminSession())) redirect("/admin/login"); const { character, page } = await params; - const [snapshot, navigation] = await Promise.all([ - loadAdminPage(character, page), - loadAdminNavigation(), - ]); - if (!snapshot) notFound(); - return ( - <> - {process.env.BUZZ_DEMO_MODE === "true" ? null : ( - - )} - - - ); + if (!sections.includes(page as (typeof sections)[number])) notFound(); + const guide = await getGuideByCharacterKey(character); + if (!guide) notFound(); + const [catalog, content] = await Promise.all([getActiveCatalog(), getPublicGuide(guide.slug)]); + if (!catalog || !content) notFound(); + return

{guide.name}

{guide.sections.find((section) => section.slug === page)?.title ?? page}

({ id: group.id, name: group.name, rows: group.rows.map((row) => ({ firstArtifactKey: row.firstArtifactKey, secondArtifactKey: row.secondArtifactKey, percent: row.percent })) })), artifactProfile: content.artifactProfile, constellations: content.constellations, teams: content.teams.map((team) => ({ title: team.title, rotationSeconds: team.rotationSeconds, combo: team.combo, members: team.members.map((member) => ({ characterKey: member.characterKey, damage: member.damage })) })), extras: content.extras.map((section) => ({ title: section.title, rows: section.rows.map((row) => ({ mediaId: row.mediaId, heading: row.heading, body: row.body, percent: row.percent, imageUrl: row.imageUrl })) })) }} />
; } diff --git a/app/admin/[character]/page.tsx b/app/admin/[character]/page.tsx new file mode 100644 index 0000000..bce3b12 --- /dev/null +++ b/app/admin/[character]/page.tsx @@ -0,0 +1,27 @@ +import Image from "next/image"; +import Link from "next/link"; +import { ArrowLeftIcon, BoxesIcon, GemIcon, SparklesIcon, SwordsIcon, UsersIcon } from "lucide-react"; +import { notFound, redirect } from "next/navigation"; +import { connection } from "next/server"; + +import { Button } from "@/components/ui/button"; +import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { GuideOverviewForm } from "@/components/admin/guide-overview-form"; +import { getAdminSession } from "@/lib/auth/server"; +import { getGuideByCharacterKey } from "@/lib/guides/queries"; + +const sections = [ + { slug: "weapon", title: "Weapons", description: "จัดอันดับอาวุธ Refinement และเปอร์เซ็นต์", icon: SwordsIcon }, + { slug: "artifact", title: "Artifacts & Stats", description: "ชุด Artifact, Main/Sub Stats และ Talent", icon: GemIcon }, + { slug: "constellations", title: "Constellations", description: "รายละเอียด C1–C6 และเปอร์เซ็นต์สะสม", icon: SparklesIcon }, + { slug: "team", title: "Team Calc", description: "ตัวละคร 4 ตัว Damage share, DPS และ Combo", icon: UsersIcon }, +]; + +export default async function GuideOverviewPage({ params }: { params: Promise<{ character: string }> }) { + await connection(); + if (!(await getAdminSession())) redirect("/admin/login"); + const { character } = await params; + const guide = await getGuideByCharacterKey(character); + if (!guide) notFound(); + return
{guide.name}

Where do you want to edit?

{guide.name}

{sections.map(({ slug, title, description, icon: Icon }) => {title}{description})}Extra sectionsส่วนเสริมแบบภาพ หัวข้อ ข้อความสั้น และเปอร์เซ็นต์
; +} diff --git a/app/admin/actions.ts b/app/admin/actions.ts index e85c033..0af93d2 100644 --- a/app/admin/actions.ts +++ b/app/admin/actions.ts @@ -14,6 +14,19 @@ import type { DataSourceSnapshot, PageSnapshot } from "@/lib/content/types"; import { requireAdmin } from "@/lib/auth/server"; import { builtInTemplates } from "@/lib/templates"; import { persistTemplateApplication } from "@/lib/templates/persist"; +import { + createGuide, + enqueueCatalogSync, + permanentlyDeleteGuide, + restoreGuide, + saveArtifacts, + saveConstellations, + saveExtraSections, + saveTeams, + saveWeapons, + trashGuide, + updateGuideBasics, +} from "@/lib/guides/mutations"; const serializedBlockSchema = z.strictObject({ id: z.string().uuid(), @@ -188,3 +201,84 @@ export async function applyEditorTemplate(input: unknown): Promise< }; } } + +type GuideActionResult = + | { status: "saved"; version?: number; location?: string } + | { status: "error"; message: string }; + +async function runGuideAction(action: () => Promise<{ version?: number }>): Promise { + try { + const result = await action(); + return { status: "saved", version: result.version }; + } catch (cause) { + if (cause instanceof z.ZodError) { + return { status: "error", message: cause.issues.map((issue) => issue.message).join(" • ") }; + } + return { status: "error", message: cause instanceof Error ? cause.message : "บันทึกไม่สำเร็จ" }; + } +} + +export async function createStructuredGuide(input: unknown): Promise { + await requireAdmin(); + try { + const guide = await createGuide(input); + return { status: "saved", version: guide.version, location: `/admin/${guide.characterKey}` }; + } catch (cause) { + return { status: "error", message: cause instanceof Error ? cause.message : "สร้าง Guide ไม่สำเร็จ" }; + } +} + +export async function saveWeaponSection(guideId: string, input: unknown) { + await requireAdmin(); + return runGuideAction(() => saveWeapons(guideId, input)); +} + +export async function saveGuideOverview(guideId: string, input: unknown) { + await requireAdmin(); + return runGuideAction(() => updateGuideBasics(guideId, input)); +} + +export async function saveArtifactSection(guideId: string, input: unknown) { + await requireAdmin(); + return runGuideAction(() => saveArtifacts(guideId, input)); +} + +export async function saveConstellationSection(guideId: string, input: unknown) { + await requireAdmin(); + return runGuideAction(() => saveConstellations(guideId, input)); +} + +export async function saveTeamSection(guideId: string, input: unknown) { + await requireAdmin(); + return runGuideAction(() => saveTeams(guideId, input)); +} + +export async function saveExtraSectionList(guideId: string, input: unknown) { + await requireAdmin(); + return runGuideAction(() => saveExtraSections(guideId, input)); +} + +export async function moveGuideToTrash(guideId: string) { + await requireAdmin(); + return runGuideAction(() => trashGuide(guideId)); +} + +export async function restoreStructuredGuide(guideId: string) { + await requireAdmin(); + return runGuideAction(() => restoreGuide(guideId)); +} + +export async function deleteStructuredGuide(guideId: string) { + await requireAdmin(); + return runGuideAction(() => permanentlyDeleteGuide(guideId)); +} + +export async function startCatalogSync() { + const admin = await requireAdmin(); + try { + const job = await enqueueCatalogSync(admin.user.id); + return { status: "saved" as const, jobId: job.id }; + } catch (cause) { + return { status: "error" as const, message: cause instanceof Error ? cause.message : "เริ่ม Sync ไม่สำเร็จ" }; + } +} diff --git a/app/admin/create/page.tsx b/app/admin/create/page.tsx new file mode 100644 index 0000000..e381502 --- /dev/null +++ b/app/admin/create/page.tsx @@ -0,0 +1,25 @@ +import Link from "next/link"; +import { ArrowLeftIcon } from "lucide-react"; +import { redirect } from "next/navigation"; +import { connection } from "next/server"; + +import { CreateGuideFlow } from "@/components/admin/create-guide-flow"; +import { Button } from "@/components/ui/button"; +import { getAdminSession } from "@/lib/auth/server"; +import { getActiveCatalog, listGuideCards } from "@/lib/guides/queries"; + +export default async function CreateGuidePage() { + await connection(); + if (!(await getAdminSession())) redirect("/admin/login"); + const [catalog, guides] = await Promise.all([getActiveCatalog(), listGuideCards()]); + if (!catalog) redirect("/admin?sync=required"); + return ( +
+
+ +

Catalog {catalog.version}

สร้าง Guide ใหม่

+
+ guide.characterKey)} /> +
+ ); +} diff --git a/app/admin/page.tsx b/app/admin/page.tsx index 7829f23..bcd74fa 100644 --- a/app/admin/page.tsx +++ b/app/admin/page.tsx @@ -1,91 +1,23 @@ -import Link from "next/link"; -import { EyeIcon, FileTextIcon, LayoutTemplateIcon, PlusIcon } from "lucide-react"; import { redirect } from "next/navigation"; import { connection } from "next/server"; -import { AdminSidebar } from "@/components/admin/admin-sidebar"; -import { LiveRefresh } from "@/components/live-refresh"; -import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; -import { - Card, - CardAction, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { StructuredDashboard } from "@/components/admin/structured-dashboard"; import { getAdminSession } from "@/lib/auth/server"; -import { loadAdminNavigation } from "@/lib/content/loaders"; +import { getActiveCatalog, getLatestCatalogSyncJob, listGuideCards } from "@/lib/guides/queries"; export default async function AdminPage() { await connection(); if (!(await getAdminSession())) redirect("/admin/login"); - const navigation = await loadAdminNavigation(); - + const [guides, trash, syncJob, catalog] = await Promise.all([ + listGuideCards(), + listGuideCards(true), + getLatestCatalogSyncJob(), + getActiveCatalog(), + ]); return ( - - {process.env.BUZZ_DEMO_MODE === "true" ? null : ( - - )} - - -
- -
-

ภาพรวมเนื้อหา

-

ตัวละคร หน้า และสถานะการเผยแพร่

-
- -
-
-
-
-

คลังคู่มือ

-

ตัวละครทั้งหมด

-
- -
- {navigation.characters.length > 0 ? ( -
- {navigation.characters.map((character) => ( - - - {character.nameTh} - {character.nameEn ?? character.slug} - - - {character.visible ? "เผยแพร่" : "ซ่อน"} - - - - - {character.pages.map((page) => ( -
- - - {page.title} - - v{page.version} - {page.visible && character.visible ? ( - - ) : null} -
- ))} - - - ))} -
- ) : ( - ยังไม่มีตัวละคร เริ่มต้นด้วยเทมเพลตที่เตรียมไว้ - )} -
- - +
+

Buzz Sheet Admin

Guide Dashboard

จัดการ Guide แบบภาพ-first และบันทึกขึ้นเว็บไซต์ทันที

+ +
); } diff --git a/app/api/admin/media/route.ts b/app/api/admin/media/route.ts new file mode 100644 index 0000000..d2df3b8 --- /dev/null +++ b/app/api/admin/media/route.ts @@ -0,0 +1,21 @@ +import { NextResponse } from "next/server"; + +import { requireAdmin } from "@/lib/auth/server"; +import { uploadPublicMedia } from "@/lib/media/repository"; + +export async function POST(request: Request) { + const admin = await requireAdmin(); + const form = await request.formData(); + const file = form.get("file"); + if (!(file instanceof File)) { + return NextResponse.json({ error: "กรุณาเลือกไฟล์รูปภาพ" }, { status: 400 }); + } + try { + return NextResponse.json(await uploadPublicMedia(file, admin.user.id), { status: 201 }); + } catch (cause) { + return NextResponse.json( + { error: cause instanceof Error ? cause.message : "อัปโหลดไม่สำเร็จ" }, + { status: 400 }, + ); + } +} diff --git a/app/page.tsx b/app/page.tsx index 86662ce..469cc9e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,32 +1,12 @@ import { connection } from "next/server"; -import { CharacterDirectory } from "@/components/public/character-directory"; -import { SiteHeader } from "@/components/public/site-header"; import { LiveRefresh } from "@/components/live-refresh"; -import { loadPublicDirectory } from "@/lib/content/loaders"; +import { StructuredDirectory } from "@/components/public/structured-directory"; +import { SiteHeader } from "@/components/public/site-header"; +import { listGuideCards } from "@/lib/guides/queries"; export default async function HomePage() { await connection(); - const characters = await loadPublicDirectory(); - - return ( -
- {process.env.BUZZ_DEMO_MODE === "true" ? null : ( - - )} - -
-
-

คลังคู่มือตัวละคร

-

- หาคู่มือที่ต้องการ แล้วเริ่มจัดทีมได้เลย -

-

- ค้นหาตามชื่อ ธาตุ หรือบทบาท ทุกหน้าจัดรูปแบบมาให้อ่านง่ายทั้งมือถือและเดสก์ท็อป -

-
- -
-
- ); + const guides = await listGuideCards(); + return

Genshin Impact Build Guides

เลือกตัวละคร แล้วจัด Build และ Team ได้เลย

คู่มือแบบภาพ-first สำหรับ Weapons, Artifacts, Constellations และ Team Calc

; } diff --git a/components/admin/create-guide-flow.tsx b/components/admin/create-guide-flow.tsx new file mode 100644 index 0000000..9f657ce --- /dev/null +++ b/components/admin/create-guide-flow.tsx @@ -0,0 +1,93 @@ +"use client"; + +import Image from "next/image"; +import { useRouter } from "next/navigation"; +import { ArrowLeftIcon, CheckIcon, SearchIcon } from "lucide-react"; +import { useMemo, useState, useTransition } from "react"; +import { toast } from "sonner"; + +import { createStructuredGuide } from "@/app/admin/actions"; +import { MediaUploader, type UploadedMedia } from "@/components/admin/media-uploader"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; +import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"; +import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"; +import { Spinner } from "@/components/ui/spinner"; +import { Textarea } from "@/components/ui/textarea"; + +type Character = { key: string; name: string; element: string | null; rarity: number | null; imageUrl: string }; + +export function CreateGuideFlow({ characters, existingKeys }: { characters: Character[]; existingKeys: string[] }) { + const router = useRouter(); + const [query, setQuery] = useState(""); + const [selected, setSelected] = useState(null); + const [cover, setCover] = useState(null); + const [overview, setOverview] = useState(""); + const [pending, startTransition] = useTransition(); + const existing = useMemo(() => new Set(existingKeys), [existingKeys]); + const filtered = characters.filter((character) => character.name.toLowerCase().includes(query.trim().toLowerCase())); + + if (selected) { + return ( + + + ตั้งค่า Guide ของ {selected.name} + เพิ่มภาพหน้าปกและ Overview ก่อนสร้าง Guide สาธารณะ + + + + + Guide Image + {cover ? ( +
+ {`Guide +
+ ) : null} + + + + Overview +