asepharyana
d54aa7e2c2
CI / lint + typecheck + test + build (push) Canceled after 0s
- Auth: middleware.ts guards /protected via better-auth session cookie; protected page reads session server-side (auth.api.getSession) - Demo wiring (app/demo + components/demo): react-markdown + remark-gfm + shiki CodeBlock, RHF+zod form with react-query mutation + sonner toast, react-table items list (legacy API, table v9), /api/items GET+POST (zod v4 coercion, schema in lib/items.ts shared with unit tests) - Error UX: app/error.tsx (retry + digest), not-found.tsx (404), loading.tsx - Env: lib/env.ts zod-validated (no import-time throw), .env.example sync (NEXT_PUBLIC_BETTER_AUTH_URL), auth-client uses env - Tooling: @vitest/coverage-v8 (test:coverage works), tsconfig cleanup (drop .next/dev/dev/types artifact), README rewrite, demo e2e specs
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
import { CodeBlock } from "@/components/ui/code-block";
|
|
import { DemoClient } from "@/components/demo/demo-client";
|
|
|
|
const SAMPLE_MD = `# Demo Page
|
|
|
|
This page shows the core wiring of the template:
|
|
|
|
- **Server component** renders this markdown via \`react-markdown\` + \`remark-gfm\`
|
|
- **Shiki** highlights code blocks server-side
|
|
- **React Query** fetches \`/api/items\`
|
|
- **React Hook Form + Zod** validates the "Add item" form
|
|
- **better-auth** session is read on the server below
|
|
|
|
## Code sample
|
|
|
|
\`\`\`ts
|
|
export function getGreeting(name: string): string {
|
|
return \`Hello, \${name}!\`;
|
|
}
|
|
\`\`\`
|
|
|
|
> Tip: copy this page as a starting point for real features.
|
|
`;
|
|
|
|
export default function DemoPage() {
|
|
return (
|
|
<main className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-8 p-8">
|
|
<article className="prose prose-sm dark:prose-invert">
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
components={{
|
|
code(props) {
|
|
const { children, className, ...rest } = props;
|
|
const match = /language-(\w+)/.exec(className ?? "");
|
|
if (match) {
|
|
return (
|
|
<CodeBlock
|
|
code={String(children).replace(/\n$/, "")}
|
|
lang={match[1]}
|
|
className="my-4 overflow-x-auto rounded-lg border text-sm"
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<code className={className} {...rest}>
|
|
{children}
|
|
</code>
|
|
);
|
|
},
|
|
}}
|
|
>
|
|
{SAMPLE_MD}
|
|
</ReactMarkdown>
|
|
</article>
|
|
|
|
<DemoClient />
|
|
</main>
|
|
);
|
|
}
|