|
| 1 | +import { CodeBlock } from "../../components/CodeBlock.tsx"; |
| 2 | +import { CodeWindow } from "../../components/CodeWindow.tsx"; |
| 3 | +import { PageSection } from "../../components/PageSection.tsx"; |
| 4 | +import { SideBySide } from "../../components/SideBySide.tsx"; |
| 5 | +import { SectionHeading } from "../../components/homepage/SectionHeading.tsx"; |
| 6 | +import { FancyLink } from "../../components/FancyLink.tsx"; |
| 7 | + |
| 8 | +const apiCode = `import { createDefine } from "fresh"; |
| 9 | +const define = createDefine(); |
| 10 | +
|
| 11 | +export const handlers = define.handlers({ |
| 12 | + GET(ctx) { |
| 13 | + const user = db.getUser(ctx.params.id); |
| 14 | + return Response.json(user); |
| 15 | + }, |
| 16 | + POST(ctx) { |
| 17 | + const body = await ctx.req.json(); |
| 18 | + const user = db.updateUser(ctx.params.id, body); |
| 19 | + return Response.json(user); |
| 20 | + }, |
| 21 | + DELETE(ctx) { |
| 22 | + db.deleteUser(ctx.params.id); |
| 23 | + return new Response(null, { status: 204 }); |
| 24 | + }, |
| 25 | +});`; |
| 26 | + |
| 27 | +export function APIRoutesSection() { |
| 28 | + return ( |
| 29 | + <PageSection> |
| 30 | + <SideBySide |
| 31 | + mdColSplit="3/2" |
| 32 | + lgColSplit="3/2" |
| 33 | + reverseOnDesktop |
| 34 | + class="!items-start" |
| 35 | + > |
| 36 | + <div class="flex flex-col gap-4 md:sticky md:top-4"> |
| 37 | + <svg |
| 38 | + aria-hidden="true" |
| 39 | + xmlns="http://www.w3.org/2000/svg" |
| 40 | + class="icon icon-tabler icon-tabler-api text-fresh" |
| 41 | + width="2.5rem" |
| 42 | + height="2.5rem" |
| 43 | + viewBox="0 0 24 24" |
| 44 | + stroke-width="1.5" |
| 45 | + stroke="currentColor" |
| 46 | + fill="none" |
| 47 | + stroke-linecap="round" |
| 48 | + stroke-linejoin="round" |
| 49 | + > |
| 50 | + <title>API routes icon</title> |
| 51 | + <path stroke="none" d="M0 0h24v24H0z" fill="none" /> |
| 52 | + <path d="M4 13h5" /> |
| 53 | + <path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3" /> |
| 54 | + <path d="M20 8v8" /> |
| 55 | + <path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5" /> |
| 56 | + </svg> |
| 57 | + <SectionHeading>Handlers for every method</SectionHeading> |
| 58 | + <p> |
| 59 | + Define{" "} |
| 60 | + <code class="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono"> |
| 61 | + GET |
| 62 | + </code>,{" "} |
| 63 | + <code class="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono"> |
| 64 | + POST |
| 65 | + </code>,{" "} |
| 66 | + <code class="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono"> |
| 67 | + DELETE |
| 68 | + </code>{" "} |
| 69 | + — any HTTP method as a named handler on your route. Fresh maps |
| 70 | + requests to the right function automatically, with full type safety. |
| 71 | + </p> |
| 72 | + <FancyLink href="/docs/concepts/routing" class="mt-2"> |
| 73 | + Learn about handlers |
| 74 | + </FancyLink> |
| 75 | + </div> |
| 76 | + <div class="flex flex-col gap-4"> |
| 77 | + <CodeWindow name="routes/users/[id].tsx"> |
| 78 | + <CodeBlock code={apiCode} lang="js" /> |
| 79 | + </CodeWindow> |
| 80 | + </div> |
| 81 | + </SideBySide> |
| 82 | + </PageSection> |
| 83 | + ); |
| 84 | +} |
0 commit comments