├── .gitignore
├── README.md
├── app
    ├── api
    │   ├── og
    │   │   ├── inter-bold.woff
    │   │   └── route.tsx
    │   └── search
    │   │   └── route.ts
    ├── docs
    │   ├── [[...slug]]
    │   │   └── page.tsx
    │   └── layout.tsx
    ├── global.css
    ├── layout.config.tsx
    ├── layout.tsx
    ├── page.tsx
    └── source.ts
├── components
    ├── icons.tsx
    ├── landing
    │   ├── animated-button.tsx
    │   ├── box-reveal.tsx
    │   ├── grid.tsx
    │   ├── ripple.tsx
    │   └── typing-animaton.tsx
    └── ui
    │   └── button.tsx
├── content
    └── docs
    │   ├── authorization.mdx
    │   ├── default-types.mdx
    │   ├── extra-options.mdx
    │   ├── fetch-options.mdx
    │   ├── fetch-schema.mdx
    │   ├── getting-started.mdx
    │   ├── handling-errors.mdx
    │   ├── hooks.mdx
    │   ├── index.mdx
    │   ├── meta.json
    │   ├── plugins.mdx
    │   └── timeout-and-retry.mdx
├── extra-content.md
├── lib
    ├── better-fetch-options.ts
    ├── example.ts
    ├── metadata.ts
    └── utils.ts
├── mdx-components.tsx
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── public
    ├── android-chrome-192x192.png
    ├── android-chrome-512x512.png
    ├── apple-touch-icon.png
    ├── banner.png
    ├── better-fetch-dark.svg
    ├── better-fetch-light.svg
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon.ico
    └── site.webmanifest
├── tailwind.config.js
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # deps
 2 | /node_modules
 3 | 
 4 | # generated content
 5 | .map.ts
 6 | .contentlayer
 7 | .content-collections
 8 | 
 9 | # test & build
10 | /coverage
11 | /.next/
12 | /out/
13 | /build
14 | *.tsbuildinfo
15 | 
16 | # misc
17 | .DS_Store
18 | *.pem
19 | /.pnp
20 | .pnp.js
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | # others
26 | .env*.local
27 | .vercel
28 | next-env.d.ts


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Better Fetch Documentation
 2 | 
 3 | A documentation site for [better-fetch](https://github.com/bekacru/better-fetch).
 4 | 
 5 | ## Development
 6 | 
 7 | ```bash
 8 | pnpm install
 9 | pnpm dev
10 | ```
11 | 
12 | 
13 | ## License
14 | 
15 | MIT


--------------------------------------------------------------------------------
/app/api/og/inter-bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bekacru/better-fetch-docs/ca639bbc10612d5a90a78dce783b19b77ebd2071/app/api/og/inter-bold.woff


--------------------------------------------------------------------------------
/app/api/og/route.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable react/no-unknown-property -- Tailwind CSS `tw` property */
  2 | import { ImageResponse } from 'next/og';
  3 | import type { NextRequest } from 'next/server';
  4 | 
  5 | interface Mode {
  6 |     param: string;
  7 |     package: string;
  8 |     name: string;
  9 | }
 10 | 
 11 | 
 12 | export const runtime = 'edge';
 13 | 
 14 | const bold = fetch(new URL('./inter-bold.woff', import.meta.url)).then((res) =>
 15 |     res.arrayBuffer(),
 16 | );
 17 | 
 18 | const foreground = 'hsl(0 0% 98%)';
 19 | const mutedForeground = 'hsl(0 0% 63.9%)';
 20 | const background = 'rgba(10, 10, 10)';
 21 | 
 22 | export async function GET(
 23 |     request: NextRequest,
 24 | ): Promise<ImageResponse> {
 25 |     const { searchParams } = request.nextUrl;
 26 |     const title = searchParams.get('title'),
 27 |         description = searchParams.get('description');
 28 | 
 29 |     return new ImageResponse(
 30 |         OG({
 31 |             title: title ?? 'Better Fetch',
 32 |             description: description ?? 'Advanced fetch library for typescript.',
 33 |         }),
 34 |         {
 35 |             width: 1200,
 36 |             height: 630,
 37 |             fonts: [{ name: 'Inter', data: await bold, weight: 700 }],
 38 |         },
 39 |     );
 40 | }
 41 | 
 42 | function OG({
 43 |     title,
 44 |     description,
 45 | }: {
 46 |     title: string;
 47 |     description: string;
 48 | }): React.ReactElement {
 49 |     return (
 50 |         <div
 51 |             style={{
 52 |                 color: foreground,
 53 |                 background,
 54 |             }}
 55 |             tw="flex flex-col w-full h-full p-12"
 56 |         >
 57 |             <div
 58 |                 style={{
 59 |                     background:
 60 |                         'linear-gradient(to right bottom, rgb(150, 200, 255), rgb(200, 100, 255))',
 61 |                 }}
 62 |                 tw="flex flex-col justify-center rounded-2xl p-4 shadow-2xl shadow-purple-600"
 63 |             >
 64 |                 <div
 65 |                     tw="flex flex-col rounded-2xl p-12"
 66 |                     style={{
 67 |                         border: '1px rgba(156,163,175,0.3)',
 68 |                         background,
 69 |                     }}
 70 |                 >
 71 |                     <p tw="font-bold text-6xl">{title}</p>
 72 |                     <p
 73 |                         tw="text-4xl"
 74 |                         style={{
 75 |                             color: mutedForeground,
 76 |                         }}
 77 |                     >
 78 |                         {description}
 79 |                     </p>
 80 |                 </div>
 81 |             </div>
 82 | 
 83 |             <div tw="flex flex-row items-center mt-auto p-4">
 84 |                 <svg
 85 |                     fill="currentColor"
 86 |                     height="60"
 87 |                     stroke="currentColor"
 88 |                     strokeLinecap="round"
 89 |                     strokeLinejoin="round"
 90 |                     strokeWidth="2"
 91 |                     viewBox="0 0 24 24"
 92 |                     width="60"
 93 |                 >
 94 |                     <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
 95 |                     <path d="M5 3v4" />
 96 |                     <path d="M19 17v4" />
 97 |                     <path d="M3 5h4" />
 98 |                     <path d="M17 19h4" />
 99 |                 </svg>
100 |             </div>
101 |         </div>
102 |     );
103 | }


--------------------------------------------------------------------------------
/app/api/search/route.ts:
--------------------------------------------------------------------------------
 1 | import { getPages } from '@/app/source';
 2 | import { createSearchAPI } from 'fumadocs-core/search/server';
 3 | 
 4 | export const { GET } = createSearchAPI('advanced', {
 5 |   indexes: getPages().map((page) => ({
 6 |     title: page.data.title,
 7 |     structuredData: page.data.exports.structuredData,
 8 |     id: page.url,
 9 |     url: page.url,
10 |   })),
11 | });
12 | 


--------------------------------------------------------------------------------
/app/docs/[[...slug]]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { getPage, getPages } from '@/app/source';
 2 | import type { Metadata } from 'next';
 3 | import { DocsPage, DocsBody } from 'fumadocs-ui/page';
 4 | import { notFound } from 'next/navigation';
 5 | import { Card, Cards } from 'fumadocs-ui/components/card';
 6 | export default async function Page({
 7 |   params,
 8 | }: {
 9 |   params: { slug?: string[] };
10 | }) {
11 |   const page = getPage(params.slug);
12 | 
13 |   if (page == null) {
14 |     notFound();
15 |   }
16 | 
17 |   const MDX = page.data.exports.default;
18 | 
19 |   return (
20 |     <DocsPage toc={page.data.exports.toc} full={page.data.full} footer={{
21 |       enabled: false
22 |     }}>
23 |       <DocsBody>
24 |         <h1>{page.data.title}</h1>
25 |         <MDX components={{
26 |           Card,
27 |           Cards,
28 |         }} />
29 |       </DocsBody>
30 |     </DocsPage>
31 |   );
32 | }
33 | 
34 | export async function generateStaticParams() {
35 |   return getPages().map((page) => ({
36 |     slug: page.slugs,
37 |   }));
38 | }
39 | 
40 | export function generateMetadata({ params }: { params: { slug?: string[] } }) {
41 |   const page = getPage(params.slug);
42 | 
43 |   if (page == null) notFound();
44 | 
45 |   return {
46 |     title: page.data.title,
47 |     description: page.data.description,
48 |   } satisfies Metadata;
49 | }
50 | 


--------------------------------------------------------------------------------
/app/docs/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { DocsLayout } from 'fumadocs-ui/layout';
 2 | import type { ReactNode } from 'react';
 3 | import { docsOptions } from '../layout.config';
 4 | import { GitHubLogoIcon } from '@radix-ui/react-icons';
 5 | import Link from 'next/link';
 6 | 
 7 | export default function Layout({ children }: { children: ReactNode }) {
 8 |   return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/global.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | 
 6 | 
 7 | @layer base {
 8 |   :root {
 9 |     --background: 0 0% 100%;
10 |     --foreground: 20 14.3% 4.1%;
11 |     --card: 0 0% 100%;
12 |     --card-foreground: 20 14.3% 4.1%;
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 20 14.3% 4.1%;
15 |     --primary: 24.6 95% 53.1%;
16 |     --primary-foreground: 60 9.1% 97.8%;
17 |     --secondary: 60 4.8% 95.9%;
18 |     --secondary-foreground: 24 9.8% 10%;
19 |     --muted: 60 4.8% 95.9%;
20 |     --muted-foreground: 25 5.3% 44.7%;
21 |     --accent: 60 4.8% 95.9%;
22 |     --accent-foreground: 24 9.8% 10%;
23 |     --destructive: 0 84.2% 60.2%;
24 |     --destructive-foreground: 60 9.1% 97.8%;
25 |     --border: 20 5.9% 90%;
26 |     --input: 20 5.9% 90%;
27 |     --ring: 24.6 95% 53.1%;
28 |     --radius: 0.5rem;
29 |   }
30 | 
31 |   .dark {
32 |     --background: 20 14.3% 4.1%;
33 |     --foreground: 60 9.1% 97.8%;
34 |     --card: 20 14.3% 4.1%;
35 |     --card-foreground: 60 9.1% 97.8%;
36 |     --popover: 20 14.3% 4.1%;
37 |     --popover-foreground: 60 9.1% 97.8%;
38 |     --primary: 20.5 90.2% 48.2%;
39 |     --primary-foreground: 60 9.1% 97.8%;
40 |     --secondary: 12 6.5% 15.1%;
41 |     --secondary-foreground: 60 9.1% 97.8%;
42 |     --muted: 12 6.5% 15.1%;
43 |     --muted-foreground: 24 5.4% 63.9%;
44 |     --accent: 12 6.5% 15.1%;
45 |     --accent-foreground: 60 9.1% 97.8%;
46 |     --destructive: 0 72.2% 50.6%;
47 |     --destructive-foreground: 60 9.1% 97.8%;
48 |     --border: 12 6.5% 15.1%;
49 |     --input: 12 6.5% 15.1%;
50 |     --ring: 20.5 90.2% 48.2%;
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/app/layout.config.tsx:
--------------------------------------------------------------------------------
 1 | import { type BaseLayoutProps, type DocsLayoutProps } from 'fumadocs-ui/layout';
 2 | import { pageTree } from '@/app/source';
 3 | import Link from 'next/link';
 4 | import { GitHubLogoIcon } from '@radix-ui/react-icons';
 5 | 
 6 | // shared configuration
 7 | export const baseOptions: BaseLayoutProps = {
 8 |   nav: {
 9 |     title: "Better-Fetch",
10 |     transparentMode: "top",
11 |   },
12 |   links: [],
13 | 
14 | };
15 | 
16 | // docs layout configuration
17 | export const docsOptions: DocsLayoutProps = {
18 |   ...baseOptions,
19 |   tree: pageTree,
20 |   nav: {
21 |     title: "Better Fetch",
22 |   },
23 |   sidebar: {
24 |     collapsible: false,
25 |     footer: (
26 |       <Link href="https://github.com/bekacru/better-fetch" target="_blank">
27 |         <GitHubLogoIcon width={16} height={16} />
28 |       </Link>
29 |     ),
30 |     defaultOpenLevel: 1,
31 |   }
32 | };
33 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import './global.css';
 2 | import { RootProvider } from 'fumadocs-ui/provider';
 3 | import { Inter } from 'next/font/google';
 4 | import type { ReactNode } from 'react';
 5 | import 'fumadocs-ui/twoslash.css';
 6 | import { Viewport } from 'next';
 7 | import { baseUrl, createMetadata } from '@/lib/metadata';
 8 | 
 9 | const inter = Inter({
10 |   subsets: ['latin'],
11 | });
12 | 
13 | 
14 | export const metadata = createMetadata({
15 |   title: {
16 |     template: '%s | Better Fetch',
17 |     default: 'Better Fetch',
18 |   },
19 |   description: 'Advanced fetch wrapper for typescript.',
20 |   metadataBase: baseUrl,
21 | });
22 | 
23 | export default function Layout({ children }: { children: ReactNode }) {
24 |   return (
25 |     <html lang="en" className={inter.className} suppressHydrationWarning>
26 |       <head>
27 |         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
28 |         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
29 |         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
30 |         <link rel="manifest" href="/site.webmanifest" />
31 |       </head>
32 |       <body>
33 |         <RootProvider>{children}</RootProvider>
34 |       </body>
35 |     </html>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import { Button } from "@/components/ui/button"
 3 | import { Icons } from "@/components/icons"
 4 | import { cn } from '@/lib/utils';
 5 | import AnimatedGridPattern from "@/components/landing/grid";
 6 | import Ripple from '@/components/landing/ripple';
 7 | import { Banner } from 'fumadocs-ui/components/banner';
 8 | 
 9 | 
10 | 
11 | export default function HomePage() {
12 |   return (
13 |     <div className="relative min-h-screen flex w-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl">
14 | 
15 |       <Ripple />
16 |       <div className='z-10 flex flex-col items-center justify-center'>
17 |         <h1 className="mb-4 text-5xl font-bold text-center">
18 |           Better Fetch
19 |         </h1>
20 | 
21 |         <p className="text-muted-foreground mx-auto max-w-2xl text-center">
22 |           Advanced fetch wrapper for typescript with zod schema validations, pre-defined routes, callbacks, plugins and more.
23 |         </p>
24 |         <div className='flex py-4 items-center justify-center gap-4 w-full'>
25 |           <Link href="/docs">
26 |             <Button className='flex gap-2 cursor-pointer'>
27 |               <Icons.docs />
28 |               Docs
29 |             </Button>
30 |           </Link>
31 |           <Link href="https://github.com/bekacru/better-fetch">
32 |             <Button className='flex gap-2' variant="secondary">
33 |               <Icons.github />
34 |               Github
35 |             </Button>
36 |           </Link>
37 |         </div>
38 |       </div>
39 |       <div>
40 |       </div>
41 | 
42 |     </div>
43 | 
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/app/source.ts:
--------------------------------------------------------------------------------
 1 | import { map } from '@/.map';
 2 | import { createMDXSource } from 'fumadocs-mdx';
 3 | import { loader } from 'fumadocs-core/source';
 4 | 
 5 | export const { getPage, getPages, pageTree } = loader({
 6 |   baseUrl: '/docs',
 7 |   rootDir: 'docs',
 8 |   source: createMDXSource(map),
 9 | });
10 | 


--------------------------------------------------------------------------------
/components/icons.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<"svg">) {
 4 |     return (
 5 |         <svg aria-hidden="true" viewBox="0 0 42 10" fill="none" {...props}>
 6 |             <circle cx="5" cy="5" r="4.5" />
 7 |             <circle cx="21" cy="5" r="4.5" />
 8 |             <circle cx="37" cy="5" r="4.5" />
 9 |         </svg>
10 |     );
11 | }
12 | 
13 | export const Icons = {
14 |     github: () => (
15 |         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"></path></svg>
16 |     ),
17 |     docs: () => (
18 |         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fillRule="evenodd" d="M4.172 3.172C3 4.343 3 6.229 3 10v4c0 3.771 0 5.657 1.172 6.828C5.343 22 7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172C21 19.657 21 17.771 21 14v-4c0-3.771 0-5.657-1.172-6.828C18.657 2 16.771 2 13 2h-2C7.229 2 5.343 2 4.172 3.172M7.25 8A.75.75 0 0 1 8 7.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 8m0 4a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75M8 15.25a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z" clipRule="evenodd"></path></svg>
19 |     ),
20 |     trafficLights: TrafficLightsIcon
21 | }


--------------------------------------------------------------------------------
/components/landing/animated-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { motion, type AnimationProps } from "framer-motion";
 4 | 
 5 | const animationProps = {
 6 |     initial: { "--x": "100%", scale: 0.8 },
 7 |     animate: { "--x": "-100%", scale: 1 },
 8 |     whileTap: { scale: 0.95 },
 9 |     transition: {
10 |         repeat: Infinity,
11 |         repeatType: "loop",
12 |         repeatDelay: 1,
13 |         type: "spring",
14 |         stiffness: 20,
15 |         damping: 15,
16 |         mass: 2,
17 |         scale: {
18 |             type: "spring",
19 |             stiffness: 200,
20 |             damping: 5,
21 |             mass: 0.5,
22 |         },
23 |     },
24 | } as AnimationProps;
25 | 
26 | const ShinyButton = ({ text = "shiny-button" }) => {
27 |     return (
28 |         <motion.button
29 |             {...animationProps}
30 |             className="relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-[box-shadow] duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]"
31 |         >
32 |             <span
33 |                 className="relative block h-full w-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]"
34 |                 style={{
35 |                     maskImage:
36 |                         "linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))",
37 |                 }}
38 |             >
39 |                 {text}
40 |             </span>
41 |             <span
42 |                 style={{
43 |                     mask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
44 |                     maskComposite: "exclude",
45 |                 }}
46 |                 className="absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px"
47 |             ></span>
48 |         </motion.button>
49 |     );
50 | };
51 | 
52 | export default ShinyButton;
53 | 


--------------------------------------------------------------------------------
/components/landing/box-reveal.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useEffect, useRef } from "react";
 4 | import { motion, useAnimation, useInView } from "framer-motion";
 5 | 
 6 | interface BoxRevealProps {
 7 |     children: JSX.Element;
 8 |     width?: "fit-content" | "100%";
 9 |     boxColor?: string;
10 |     duration?: number;
11 | }
12 | 
13 | export const BoxReveal = ({
14 |     children,
15 |     width = "fit-content",
16 |     boxColor,
17 |     duration,
18 | }: BoxRevealProps) => {
19 |     const mainControls = useAnimation();
20 |     const slideControls = useAnimation();
21 | 
22 |     const ref = useRef(null);
23 |     const isInView = useInView(ref, { once: true });
24 | 
25 |     useEffect(() => {
26 |         if (isInView) {
27 |             slideControls.start("visible");
28 |             mainControls.start("visible");
29 |         } else {
30 |             slideControls.start("hidden");
31 |             mainControls.start("hidden");
32 |         }
33 |     }, [isInView, mainControls, slideControls]);
34 | 
35 |     return (
36 |         <div ref={ref} style={{ position: "relative", width, overflow: "hidden" }}>
37 |             <motion.div
38 |                 variants={{
39 |                     hidden: { opacity: 0, y: 75 },
40 |                     visible: { opacity: 1, y: 0 },
41 |                 }}
42 |                 initial="hidden"
43 |                 animate={mainControls}
44 |                 transition={{ duration: duration ? duration : 0.5, delay: 0.25 }}
45 |             >
46 |                 {children}
47 |             </motion.div>
48 | 
49 |             <motion.div
50 |                 variants={{
51 |                     hidden: { left: 0 },
52 |                     visible: { left: "100%" },
53 |                 }}
54 |                 initial="hidden"
55 |                 animate={slideControls}
56 |                 transition={{ duration: duration ? duration : 0.5, ease: "easeIn" }}
57 |                 style={{
58 |                     position: "absolute",
59 |                     top: 4,
60 |                     bottom: 4,
61 |                     left: 0,
62 |                     right: 0,
63 |                     zIndex: 20,
64 |                     background: boxColor ? boxColor : "#5046e6",
65 |                 }}
66 |             />
67 |         </div>
68 |     );
69 | };
70 | 
71 | export default BoxReveal;
72 | 


--------------------------------------------------------------------------------
/components/landing/grid.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useId, useRef, useState } from "react";
  4 | import { motion } from "framer-motion";
  5 | 
  6 | import { cn } from "@/lib/utils";
  7 | 
  8 | interface GridPatternProps {
  9 |     width?: number;
 10 |     height?: number;
 11 |     x?: number;
 12 |     y?: number;
 13 |     strokeDasharray?: any;
 14 |     numSquares?: number;
 15 |     className?: string;
 16 |     maxOpacity?: number;
 17 |     duration?: number;
 18 |     repeatDelay?: number;
 19 | }
 20 | 
 21 | export function GridPattern({
 22 |     width = 40,
 23 |     height = 40,
 24 |     x = -1,
 25 |     y = -1,
 26 |     strokeDasharray = 0,
 27 |     numSquares = 50,
 28 |     className,
 29 |     maxOpacity = 0.5,
 30 |     duration = 4,
 31 |     repeatDelay = 0.5,
 32 |     ...props
 33 | }: GridPatternProps) {
 34 |     const id = useId();
 35 |     const containerRef = useRef(null);
 36 |     const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
 37 |     const [squares, setSquares] = useState(() => generateSquares(numSquares));
 38 | 
 39 |     function getPos() {
 40 |         return [
 41 |             Math.floor((Math.random() * dimensions.width) / width),
 42 |             Math.floor((Math.random() * dimensions.height) / height),
 43 |         ];
 44 |     }
 45 | 
 46 |     // Adjust the generateSquares function to return objects with an id, x, and y
 47 |     function generateSquares(count: number) {
 48 |         return Array.from({ length: count }, (_, i) => ({
 49 |             id: i,
 50 |             pos: getPos(),
 51 |         }));
 52 |     }
 53 | 
 54 |     // Function to update a single square's position
 55 |     const updateSquarePosition = (id: number) => {
 56 |         setSquares((currentSquares) =>
 57 |             currentSquares.map((sq) =>
 58 |                 sq.id === id
 59 |                     ? {
 60 |                         ...sq,
 61 |                         pos: getPos(),
 62 |                     }
 63 |                     : sq,
 64 |             ),
 65 |         );
 66 |     };
 67 | 
 68 |     // Update squares to animate in
 69 |     useEffect(() => {
 70 |         if (dimensions.width && dimensions.height) {
 71 |             setSquares(generateSquares(numSquares));
 72 |         }
 73 |     }, [dimensions, numSquares]);
 74 | 
 75 |     // Resize observer to update container dimensions
 76 |     useEffect(() => {
 77 |         const resizeObserver = new ResizeObserver((entries) => {
 78 |             for (let entry of entries) {
 79 |                 setDimensions({
 80 |                     width: entry.contentRect.width,
 81 |                     height: entry.contentRect.height,
 82 |                 });
 83 |             }
 84 |         });
 85 | 
 86 |         if (containerRef.current) {
 87 |             resizeObserver.observe(containerRef.current);
 88 |         }
 89 | 
 90 |         return () => {
 91 |             if (containerRef.current) {
 92 |                 resizeObserver.unobserve(containerRef.current);
 93 |             }
 94 |         };
 95 |     }, [containerRef]);
 96 | 
 97 |     return (
 98 |         <svg
 99 |             ref={containerRef}
100 |             aria-hidden="true"
101 |             className={cn(
102 |                 "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
103 |                 className,
104 |             )}
105 |             {...props}
106 |         >
107 |             <defs>
108 |                 <pattern
109 |                     id={id}
110 |                     width={width}
111 |                     height={height}
112 |                     patternUnits="userSpaceOnUse"
113 |                     x={x}
114 |                     y={y}
115 |                 >
116 |                     <path
117 |                         d={`M.5 ${height}V.5H${width}`}
118 |                         fill="none"
119 |                         strokeDasharray={strokeDasharray}
120 |                     />
121 |                 </pattern>
122 |             </defs>
123 |             <rect width="100%" height="100%" fill={`url(#${id})`} />
124 |             <svg x={x} y={y} className="overflow-visible">
125 |                 {squares.map(({ pos: [x, y], id }, index) => (
126 |                     <motion.rect
127 |                         initial={{ opacity: 0 }}
128 |                         animate={{ opacity: maxOpacity }}
129 |                         transition={{
130 |                             duration,
131 |                             repeat: 1,
132 |                             delay: index * 0.1,
133 |                             repeatType: "reverse",
134 |                         }}
135 |                         onAnimationComplete={() => updateSquarePosition(id)}
136 |                         key={`${x}-${y}-${index}`}
137 |                         width={width - 1}
138 |                         height={height - 1}
139 |                         x={x * width + 1}
140 |                         y={y * height + 1}
141 |                         fill="currentColor"
142 |                         strokeWidth="0"
143 |                     />
144 |                 ))}
145 |             </svg>
146 |         </svg>
147 |     );
148 | }
149 | 
150 | export default GridPattern;
151 | 


--------------------------------------------------------------------------------
/components/landing/ripple.tsx:
--------------------------------------------------------------------------------
 1 | import React, { CSSProperties } from "react";
 2 | 
 3 | interface RippleProps {
 4 |     mainCircleSize?: number;
 5 |     mainCircleOpacity?: number;
 6 |     numCircles?: number;
 7 | }
 8 | 
 9 | const Ripple = React.memo(function Ripple({
10 |     mainCircleSize = 310,
11 |     mainCircleOpacity = 0.20,
12 |     numCircles = 20,
13 | }: RippleProps) {
14 |     return (
15 |         <div className="absolute inset-0 flex items-center justify-center bg-white/5 [mask-image:linear-gradient(to_bottom,white,transparent)]">
16 |             {Array.from({ length: numCircles }, (_, i) => {
17 |                 const size = mainCircleSize + i * 70;
18 |                 const opacity = mainCircleOpacity - i * 0.03;
19 |                 const animationDelay = `${i * 0.06}s`;
20 |                 const borderStyle = i === numCircles - 1 ? "dashed" : "solid";
21 |                 const borderOpacity = 5 + i * 5;
22 | 
23 |                 return (
24 |                     <div
25 |                         key={i}
26 |                         className={`absolute animate-ripple bg-foreground/25 shadow-xl border top-1/2 left-1/2 translate-x-1/2 translate-y-1/2 [--i:${i}]`}
27 |                         style={
28 |                             {
29 |                                 borderRadius: "50%",
30 |                                 width: `${size}px`,
31 |                                 height: `${size}px`,
32 |                                 opacity: opacity,
33 |                                 animationDelay: animationDelay,
34 |                                 borderStyle: borderStyle,
35 |                                 borderWidth: "1px",
36 |                                 borderColor: `rgba(var(--foreground-rgb), ${borderOpacity / 100})`,
37 |                             } as CSSProperties
38 |                         }
39 |                     />
40 |                 );
41 |             })}
42 |         </div>
43 |     );
44 | });
45 | 
46 | Ripple.displayName = "Ripple";
47 | 
48 | export default Ripple;
49 | 


--------------------------------------------------------------------------------
/components/landing/typing-animaton.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useEffect, useState } from "react";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | interface TypingAnimationProps {    
 8 |     text: string;
 9 |     duration?: number;
10 |     className?: string;
11 | }
12 | 
13 | export default function TypingAnimation({
14 |     text,
15 |     duration = 200,
16 |     className,
17 | }: TypingAnimationProps) {
18 |     const [displayedText, setDisplayedText] = useState<string>("");
19 |     const [i, setI] = useState<number>(0);
20 | 
21 |     useEffect(() => {
22 |         const typingEffect = setInterval(() => {
23 |             if (i < text.length) {
24 |                 setDisplayedText(text.substring(0, i + 1));
25 |                 setI(i + 1);
26 |             } else {
27 |                 clearInterval(typingEffect);
28 |             }
29 |         }, duration);
30 | 
31 |         return () => {
32 |             clearInterval(typingEffect);
33 |         };
34 |     }, [duration, i]);
35 | 
36 |     return (
37 |         <h1
38 |             className={cn(
39 |                 "font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm",
40 |                 className,
41 |             )}
42 |         >
43 |             {displayedText ? displayedText : text}
44 |         </h1>
45 |     );
46 | }
47 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |   VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/content/docs/authorization.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Authorization
 3 | description: Authorization
 4 | ---
 5 | 
 6 | Authorization is a way that allows you to add authentication headers to the request.
 7 | Currently, supports `Bearer` and `Basic` authorization.
 8 | 
 9 | ### Bearer
10 | 
11 | The bearer authorization is used to add a bearer token to the request. The token is added to the `Authorization` header. 
12 | 
13 | ```ts twoslash title="fetch.ts"
14 | import { createFetch } from "@better-fetch/fetch";
15 | 
16 | const $fetch = createFetch({
17 |     baseURL: "http://localhost:3000",
18 |     auth: {
19 |         type: "Bearer",
20 |         token: "my-token",
21 |     },
22 | })
23 | ```
24 | 
25 | You can also pass a function that returns a promise that resolves to a string.
26 | 
27 | ```ts twoslash title="fetch.ts"
28 | import { createFetch } from "@better-fetch/fetch";
29 | 
30 | const authStore = {
31 |     getToken: () => "my-token",
32 | }
33 | 
34 | //--cut--
35 | 
36 | const $fetch = createFetch({
37 |     baseURL: "http://localhost:3000",
38 |     auth: {
39 |         type: "Bearer",
40 |         token: () => authStore.getToken(),
41 |     },
42 | })
43 | ```
44 | 
45 | <Callout type="info">
46 |     The function will be called only once when the request is made. If it returns undefined, the header will not be added to the request.
47 | </Callout>
48 | 
49 | ### Basic
50 | 
51 | The basic authorization is used to add a basic authentication to the request. The username and password are added to the `Authorization` header.
52 | 
53 | ```ts twoslash title="fetch.ts"
54 | import { createFetch } from "@better-fetch/fetch";
55 | 
56 | const $fetch = createFetch({
57 |     baseURL: "http://localhost:3000",
58 |     auth: {
59 |         type: "Basic",
60 |         username: "my-username",
61 |         password: "my-password",
62 |     },
63 | })
64 | ```


--------------------------------------------------------------------------------
/content/docs/default-types.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Deafult Types
 3 | description: Deafult Types
 4 | ---
 5 | 
 6 | 
 7 | ## Default Output
 8 | 
 9 | By default the response data will always be type of `unknown`. If you want to customize the deafult type you can pass `defaultOutput` option to the `createFetch` function.
10 | 
11 | <Callout type="info">
12 | This only serve as a type for the response data it's not used as a validation schema.
13 | </Callout>
14 | 
15 | ```ts twoslash title="fetch.ts"
16 | import { createFetch } from "@better-fetch/fetch";
17 | import { z } from "zod";
18 | 
19 | const $fetch = createFetch({
20 |     baseURL: "https://jsonplaceholder.typicode.com",
21 |     defaultOutput: z.any(),
22 | })
23 | 
24 | const { data, error } = await $fetch("/todos/1")
25 | 
26 | // @annotate: Hover over the data object to see the type
27 | ```
28 | 
29 | If you define output schema, the default output type will be ignored.
30 | 
31 | ```ts twoslash title="fetch.ts"
32 | import { createFetch } from "@better-fetch/fetch";
33 | import { z } from "zod";
34 | 
35 | const $fetch = createFetch({
36 |     baseURL: "https://jsonplaceholder.typicode.com",
37 |     defaultOutput: z.any(),
38 | });
39 | 
40 | const { data, error } = await $fetch("/todos/1", {
41 |     output: z.object({
42 |         userId: z.string(),
43 |         id: z.number(),
44 |         title: z.string(),
45 |         completed: z.boolean(),
46 |     }),
47 | })
48 | // @annotate: Hover over the data object to see the type
49 | ```
50 | 
51 | ## Default error
52 | 
53 | The default error type is:
54 | ```ts
55 | { status: number, statusText: string, message?: string }. 
56 | ```
57 | 
58 | if you want custom defualt error type, you can pass a `defautlError` option to the `createFetch` function. 
59 | 
60 | <Callout type="info">
61 | The `status` and `statusText` properties are always defined. Your custom error definations are only
62 | infered if the api returns a json error object.
63 | </Callout>
64 | 
65 | ```ts twoslash title="fetch.ts"
66 | import { createFetch } from "@better-fetch/fetch";
67 | import { z } from "zod";
68 | 
69 | const $fetch = createFetch({
70 |     baseURL: "https://jsonplaceholder.typicode.com",
71 |     defaultError: z.object({
72 |         message: z.string().optional(),
73 |         error: z.string(),
74 |     }),
75 | })
76 | 
77 | const { data, error } = await $fetch("/todos/1")
78 | // @annotate: Hover over the error object to see the type
79 | ```
80 | 
81 | 


--------------------------------------------------------------------------------
/content/docs/extra-options.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Extra Options
 3 | description: Fetch Options
 4 | ---
 5 | 
 6 | These are better fetch specefic options.
 7 | 
 8 | ### Better Fetch Options
 9 | <AutoTypeTable path="./lib/better-fetch-options.ts" name="BetterFetchOptions" />
10 | 


--------------------------------------------------------------------------------
/content/docs/fetch-options.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: All Options
3 | description: Fetch Options
4 | ---
5 | 
6 | Fetch options is a union of `fetch` options and additional better fetch options.
7 | 
8 | ### All Fetch Options
9 | <AutoTypeTable path="./lib/better-fetch-options.ts" name="BetterFetchOption" />


--------------------------------------------------------------------------------
/content/docs/fetch-schema.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Fetch Schema
  3 | description: Fetch Schema
  4 | ---
  5 | 
  6 | Fetch schema allows you to pre-define the url path and the shape of reqeust and response data. This is like <Link href="https://trpc.io/" target="_blank">**trpc**</Link> or other typed rpc librires client but you define it yourself. 
  7 | 
  8 | The output of the scheam will be validated using zod and if the validation fails, it'll throw an error. 
  9 | 
 10 | Before we start, make sure you have installed the [zod](https://www.npmjs.com/package/zod) package.
 11 | 
 12 | ```package-install
 13 | npm i zod
 14 | ```
 15 | 
 16 | to create a fetch schema, you need to import the `createSchema` function from `@better-fetch/fetch`.
 17 | 
 18 | ```ts twoslash title="fetch.ts" 
 19 | import { createSchema, createFetch } from "@better-fetch/fetch";
 20 | import { z } from "zod";
 21 | 
 22 | 
 23 | export const schema = createSchema({ // [!code highlight]
 24 |     "/path": { // [!code highlight]
 25 |         input: z.object({ // [!code highlight]
 26 |             userId: z.string(), // [!code highlight]
 27 |             id: z.number(), // [!code highlight]
 28 |             title: z.string(), // [!code highlight]
 29 |             completed: z.boolean(), // [!code highlight]
 30 |         }), // [!code highlight]
 31 |         output: z.object({ // [!code highlight]
 32 |             userId: z.string(), // [!code highlight]
 33 |             id: z.number(), // [!code highlight]
 34 |             title: z.string(), // [!code highlight]
 35 |             completed: z.boolean(), // [!code highlight]
 36 |         }), // [!code highlight]
 37 |     } // [!code highlight]
 38 | }) // [!code highlight]
 39 | 
 40 | const $fetch = createFetch({
 41 |     baseUrl: "https://jsonplaceholder.typicode.com",
 42 |     schema: schema // [!code highlight]
 43 | });
 44 | 
 45 | ```
 46 | 
 47 | 
 48 | ## Fetch Schema
 49 | 
 50 | The Fetch Schema is a map of path/url and schema. The path is the url path and the schema is an object with 
 51 | `input`, `output`, `query` and `params` keys.
 52 | 
 53 | The `input` key is the schema of the request data. The `output` key is the schema of the response data. The `query` key is the schema of the query params. The `params` key is dynamic path parameters.
 54 | 
 55 | ### Input
 56 | 
 57 | The input schema is the schema of the request data. The `input` key is the schema of the request data. If you defined an input schema, the data will be requeired to be passed as a body of the request.
 58 | 
 59 | <Callout type="info">
 60 | If you define an input schema, a `post` method will be used to make the request and if there is no input schema, a `get` method will be used. See [method modifiers](#method-modifiers) section for defining specefic methods.
 61 | </Callout>
 62 | 
 63 | ```ts twoslash title="fetch.ts"
 64 | import { createFetch, createSchema } from "@better-fetch/fetch";
 65 | import { z } from "zod";
 66 | 
 67 | const $fetch = createFetch({
 68 |     baseUrl: "https://jsonplaceholder.typicode.com",
 69 |     schema: createSchema({
 70 |         "/path": {
 71 |             input: z.object({
 72 |                 userId: z.string(),
 73 |                 id: z.number(),
 74 |                 title: z.string(),
 75 |                 completed: z.boolean(),
 76 |             }),
 77 |         },
 78 |     }), 
 79 | })
 80 | 
 81 | // @errors: 2739
 82 | const { data, error } = await $fetch("/path", {
 83 |     body: {}
 84 | })
 85 | ```
 86 | <Callout type="info">
 87 | To make the body optional you can wrap the schema with `z.optional`.
 88 | </Callout>
 89 | 
 90 | ### Output
 91 | 
 92 | The output schema is the schema of the response data. The `output` key is the schema of the response data. If you defined an output schema, the data will be returned as the response body.
 93 | 
 94 | 
 95 | ```ts twoslash title="fetch.ts"
 96 | import { createFetch, createSchema } from "@better-fetch/fetch";
 97 | import { z } from "zod";
 98 | 
 99 | const $fetch = createFetch({
100 |     baseUrl: "https://jsonplaceholder.typicode.com",
101 |     schema: createSchema({
102 |         "/path": {
103 |             output: z.object({
104 |                 userId: z.string(),
105 |                 id: z.number(),
106 |                 title: z.string(),
107 |                 completed: z.boolean(),
108 |             }),
109 |         },
110 |     }), 
111 | })
112 | 
113 | const { data, error } = await $fetch("/path")
114 | // @annotate: Hover over the data object to see the type
115 | ```
116 | 
117 | 
118 | ### Query       
119 | 
120 | The query schema is the schema of the query params. The `query` key is the schema of the query params. If you defined a query schema, the data will be passed as the query params.
121 | 
122 | ```ts twoslash title="fetch.ts"
123 | import { createFetch, createSchema } from "@better-fetch/fetch";
124 | import { z } from "zod";
125 | 
126 | const $fetch = createFetch({
127 |     baseUrl: "https://jsonplaceholder.typicode.com",
128 |     schema: createSchema({
129 |         "/path": {
130 |             query: z.object({
131 |                 userId: z.string(),
132 |                 id: z.number(),
133 |                 title: z.string(),
134 |                 completed: z.boolean(),
135 |             }),
136 |         },
137 |     }), 
138 | })
139 | 
140 | // @errors: 2739
141 | const { data, error } = await $fetch("/path", {  
142 |     query: {}
143 | })
144 | // @annotate: Hover over the data object to see the type
145 | ```
146 | 
147 | ### Dynamic Path Parameters
148 | 
149 | The params schema is the schema of the path params. You can either use the `params` key to define the paramters or prepend `:` to the path to make the parameters dynamic. 
150 | 
151 | <Callout type="info">
152 | If you define more than one dynamic path parameter using the string modifier the paramters will be required to be passed as an array of values in the order they are defined.
153 | </Callout>
154 | 
155 | ```ts twoslash title="fetch.ts" 
156 | import { createFetch, createSchema } from "@better-fetch/fetch";
157 | import { z } from "zod";    
158 | 
159 | const schema = createSchema({
160 |     "/user/:id": {
161 |         output: z.object({
162 |             name: z.string(),
163 |         }),
164 |     },
165 |     "/post": {
166 |         params: z.object({
167 |             id: z.string(),
168 |             title: z.string(),
169 |         }),
170 |     },
171 |     "/post/:id/:title": {
172 |         output: z.object({
173 |             title: z.string(),
174 |         }),
175 |     }
176 | }) 
177 | 
178 | 
179 | const $fetch = createFetch({
180 |     baseUrl: "https://jsonplaceholder.typicode.com",
181 |     schema: schema
182 | })
183 | 
184 | const response1 = await $fetch("/user/:id", {
185 |     params: {
186 |         id: "1",
187 |     }
188 | })
189 | 
190 | const response2 = await $fetch("/post", {
191 |     params: {
192 |         id: "1",
193 |         title: "title"
194 |     },
195 | })
196 | 
197 | const response3 = await $fetch("/post/:id/:title", {
198 |     params: [
199 |         "1",
200 |         "title"
201 |     ]
202 | })
203 | 
204 | ```
205 | 
206 | 
207 | ### Method Modifiers
208 | 
209 | By default the `get` and `post` methods are used to make the request based on weather the input schema is defined or not. You can use the `method` modifier to define the method to be used. 
210 | 
211 | The method modifiers are `@get`, `@post`, `@put`, `@patch`, `@delete` and `@head`. You prepend the method name to the path to define the method
212 | 
213 | ```ts twoslash title="fetch.ts"
214 | import { createFetch, createSchema } from "@better-fetch/fetch";
215 | import { z } from "zod";
216 | 
217 | const $fetch = createFetch({
218 |     baseUrl: "https://jsonplaceholder.typicode.com",
219 |     schema: createSchema({
220 |         "/@put/user": { // [!code highlight]
221 |             input: z.object({
222 |                 title: z.string(),
223 |                 completed: z.boolean(),
224 |             }),
225 |             output: z.object({
226 |                title: z.string(),
227 |                completed: z.boolean(),
228 |             }),
229 |         },
230 |     }), 
231 | })
232 | 
233 | const { data, error } = await $fetch("/@put/user", {
234 |     body: {
235 |         title: "title",
236 |         completed: true,
237 |     }
238 | })
239 | // @annotate: the request will be made to "/user" path with a PUT method.
240 | ```
241 | 
242 | 
243 | ## Strict Schema
244 | 
245 | By default if you define schema better fetch still allows you to make a call to other routes that's not defined on the schema. If you want to enforce only the keys defined to be inferred as valid you can use pass the `strict` option to the schema.
246 | 
247 | ```ts twoslash title="fetch.ts"
248 | import { createFetch, createSchema } from "@better-fetch/fetch";
249 | import { z } from "zod";
250 | 
251 | const $fetch = createFetch({
252 |     baseUrl: "https://jsonplaceholder.typicode.com",
253 |     schema: createSchema({
254 |         "/path": {
255 |             output: z.object({
256 |                 userId: z.string(),
257 |                 id: z.number(),
258 |                 title: z.string(),
259 |                 completed: z.boolean(),
260 |             }),
261 |         },
262 |     }, 
263 |     { // [!code highlight]
264 |         strict: true // [!code highlight]
265 |     }), // [!code highlight]
266 | })
267 | // @errors: 2345
268 | const { data, error } = await $fetch("/invalid-path")
269 | ```
270 | 
271 | 
272 | 


--------------------------------------------------------------------------------
/content/docs/getting-started.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Getting Started
  3 | description: Getting started with Better Fetch
  4 | ---
  5 | 
  6 | ### Installation
  7 | 
  8 | 
  9 | ```package-install
 10 | npm i @better-fetch/fetch
 11 | ```
 12 | 
 13 | *Optionally you can also install the [zod](https://www.npmjs.com/package/zod) package to use zod schema validations.*
 14 | 
 15 | ```package-install
 16 | npm i zod
 17 | ```
 18 | 
 19 | ### Quick Start
 20 | 
 21 | The fastest way to start using better fetch is to import the `betterFetch` function and start making requests.
 22 | 
 23 | You can define the response type using generics or **zod schema (recommended)**.
 24 | 
 25 | 1. Using generics
 26 | 
 27 | ```ts twoslash title="with-generics.ts"
 28 | import { betterFetch } from '@better-fetch/fetch';
 29 | 
 30 | //Using generic type
 31 | const { data, error } = await betterFetch<{
 32 |     userId: string;
 33 |     id: number;
 34 |     title: string;
 35 |     completed: boolean;
 36 | }>("https://jsonplaceholder.typicode.com/todos/1");
 37 | ```
 38 | 
 39 | 2. Using zod schema
 40 | 
 41 | ```ts twoslash title="with-zod.ts"
 42 | import { betterFetch } from '@better-fetch/fetch';
 43 | import { z } from 'zod';
 44 | 
 45 | //Using zod schema
 46 | const { data: todos, error: todoError } = await betterFetch("https://jsonplaceholder.typicodei.com/todos/1", {
 47 |     output: z.object({
 48 |         userId: z.string(),
 49 |         id: z.number(),
 50 |         title: z.string(),
 51 |         completed: z.boolean(),
 52 |     })  
 53 | });
 54 | ```
 55 | 
 56 | Better fetch by default returns a `Promise` that resolves to an object of `data` and `error`. Hover over the example code block above to see the type of the response.
 57 | 
 58 | <Callout type="info">
 59 |     **data** by defualt is of type `unknown` or `null` incase of a response error.
 60 | </Callout>
 61 | 
 62 | You can define the type of the response data in 2 ways:
 63 | 
 64 | 1. **Using the `output` property to define a zod schema (recommended)**: The `output` property is used to define the type of the response data. The response data will be validated against the schema. If the response data does not match the schema, an error will be thrown.
 65 | 
 66 | 2. **By passing a generic type to the `betterFetch`**: You can also pass a generic type to the `betterFetch` function. It has some drawbacks but it should work in most cases.
 67 | 
 68 | <Callout type="info"> 
 69 |   Make sure strict mode is enabled in your tsconfig when using zod schema validations.
 70 | </Callout>
 71 | 
 72 | ### Create Fetch
 73 | 
 74 | Create Fetch allows you to create a better fetch instance with custom configurations.
 75 | 
 76 | ```ts twoslash title="fetch.ts"
 77 | import { createFetch } from "@better-fetch/fetch";
 78 | 
 79 | export const $fetch = createFetch({
 80 |   baseUrl: "https://jsonplaceholder.typicode.com",
 81 |   retry: {
 82 |     count: 2,
 83 |   },
 84 | });
 85 | 
 86 | const { data, error } = await $fetch<{
 87 |   userId: number;
 88 |   id: number;
 89 |   title: string;
 90 |   completed: boolean;
 91 | }>("/todos/1");
 92 | ```
 93 | You can pass more options see the [Fetch Options](/docs/fetch-options) section for more details.
 94 | 
 95 | ### Throwing Errors
 96 | 
 97 | You can throw errors instead of returning them by passing the `throw` option.
 98 | 
 99 | If you pass the `throw` option, the `betterFetch` function will throw an error. And instead of returning `data` and `error` object it'll only the response data as it is.
100 | 
101 | ```ts twoslash title="fetch.ts"
102 | import { createFetch } from '@better-fetch/fetch';
103 | import { z } from 'zod';
104 | 
105 | const $fetch = createFetch({
106 |     baseUrl: "https://jsonplaceholder.typicode.com",
107 |     throw: true,
108 | });
109 | 
110 | const data = await $fetch<{
111 |     userId: number;
112 | }>("https://jsonplaceholder.typicode.com/todos/1");
113 | ```
114 | Learn more about handling errors [Handling Errors](/docs/handling-errors) section.
115 | 
116 | 


--------------------------------------------------------------------------------
/content/docs/handling-errors.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Handling Errors
  3 | description: Handling Errors
  4 | ---
  5 | 
  6 | ## Default Error Type
  7 | Better fetch by default returns response errors as a value. By defaullt, the error object has 3 properties `status`, `statusText` and `message` properties.
  8 | 
  9 | `status` and `statusText` are always defined. If the api returns a json error object it will be parsed and returned with the error object. By default `error` includes `message` property that can be string or undefined.
 10 | 
 11 | ```ts twoslash title="fetch.ts"
 12 | import { betterFetch } from '@better-fetch/fetch';
 13 | import { z } from 'zod';
 14 | 
 15 | const { error } = await betterFetch("https://jsonplaceholder.typicode.com/todos/1");
 16 | // @annotate: Hover over the error object to see the type
 17 | ```
 18 | ## Custom Error Type
 19 | You can pass a custom error type to be inferred as a second generic argument.
 20 | 
 21 | ```ts
 22 | import { betterFetch } from 'better-fetch';
 23 | 
 24 | const { error } = await betterFetch<{
 25 |     id: number;
 26 |     userId: string;
 27 |     title: string;
 28 |     completed: boolean;
 29 | }, 
 30 | { 
 31 |     message?: string; // [!code highlight]
 32 |     error?: string;// [!code highlight]
 33 | }>("https://jsonplaceholder.typicode.com/todos/1");
 34 | ```
 35 | 
 36 | <Callout type="info">
 37 | If you pass a custom error type, it will override the default error type except for the status and statusText properties. If you still need the message property, you need to include it in your custom error type.
 38 | </Callout>
 39 | 
 40 | ## Throwing Errors
 41 | 
 42 | If you prefer to throw errors instead of returning them, you can use the `throw` option.
 43 | 
 44 | When you pass the `throw` option, the `betterFetch` function will throw an error. And instead of returning `data` and `error` object it'll only the response data as it is.
 45 | 
 46 | ```ts twoslash title="fetch.ts"
 47 | import { betterFetch } from '@better-fetch/fetch';
 48 | import { z } from 'zod';
 49 | 
 50 | const data = await betterFetch("https://jsonplaceholder.typicode.com/todos/1", {
 51 |     throw: true, // [!code highlight]
 52 |     output: z.object({  
 53 |         userId: z.string(),
 54 |         id: z.number(),
 55 |         title: z.string(),
 56 |         completed: z.boolean(),
 57 |     }),
 58 | });
 59 | 
 60 | ```
 61 | 
 62 | ## Inferring Response When Using Generics and `throw` Option
 63 | 
 64 | When you pass the `throw` option to the `betterFetch` function, it will throw an error instead of returning it. This means the error will not be returned as a value. However, if you specify the response type as a generic, the `error` object will still be returned, and `data` will be inferred as possibly `null` or the specified type. This issue arises because the `throw` option cannot be inferred when a generic value is passed, due to a TypeScript limitation.
 65 | 
 66 | To address this, you have two options. If you use either option, the `error` object will no longer exist, and the response type will be inferred correctly without being unioned with `null`.
 67 | 
 68 | 1. Create a custom fetch instance with the `throw` option.
 69 | 
 70 | ```ts twoslash title="fetch.ts"
 71 | import { createFetch } from "@better-fetch/fetch";
 72 | 
 73 | export const $fetch = createFetch({
 74 |   baseUrl: "https://jsonplaceholder.typicode.com",
 75 |   retry: {
 76 |     count: 2,
 77 |   },
 78 |   throw: true,
 79 | }); 
 80 | 
 81 | 
 82 | const data = await $fetch<{
 83 |   userId: number;
 84 |   id: number;
 85 |   title: string;
 86 |   completed: boolean;
 87 | }>("/todos/1");
 88 | ```
 89 | 
 90 | 2. Pass false as a second generic argument to the `betterFetch` function.
 91 | 
 92 | ```ts twoslash title="fetch.ts"
 93 | import { betterFetch } from '@better-fetch/fetch';
 94 | import { z } from 'zod';
 95 | 
 96 | const data = await betterFetch<{
 97 |     userId: number;
 98 |     id: number;
 99 |     title: string;
100 |     completed: boolean;
101 | }, 
102 | false // [!code highlight]
103 | >("https://jsonplaceholder.typicode.com/todos/1");
104 | ```


--------------------------------------------------------------------------------
/content/docs/hooks.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Hooks
 3 | description: Hooks
 4 | ---
 5 | 
 6 | Hooks are functions that are called at different stages of the request lifecycle. 
 7 | 
 8 | ```ts twoslash title="fetch.ts"
 9 | import { createFetch } from "@better-fetch/fetch";
10 | 
11 | const $fetch = createFetch({
12 |     baseURL: "http://localhost:3000",
13 |     onRequest(context) {
14 |         return context;
15 |     },
16 |     onResponse(context) {
17 |         return context.response
18 |     },
19 |     onError(context) {
20 |     },
21 |     onSuccess(context) {
22 |     },
23 | })
24 | 
25 | ```
26 | 
27 | ## On Request
28 | 
29 | a callback function that will be called when a request is about to be made. The function will be called with the request context as an argument and it's expected to return the modified request context.
30 | 
31 | ```ts twoslash title="fetch.ts"
32 | import { createFetch } from "@better-fetch/fetch";
33 | 
34 | const $fetch = createFetch({
35 |     baseURL: "http://localhost:3000",
36 |     onRequest(context) {
37 |         // do something with the context
38 |         return context;
39 |     },
40 | })
41 | ```
42 | 
43 | ## On Response
44 | 
45 | a callback function that will be called when a response is received. The function will be called with the response context which includes the `response` and the `requestContext` as an argument and it's expected to return response.
46 | 
47 | 
48 | ```ts twoslash title="fetch.ts"
49 | import { createFetch } from "@better-fetch/fetch";
50 | 
51 | const $fetch = createFetch({
52 |     baseURL: "http://localhost:3000",
53 |     onResponse(context) {        
54 |         // do something with the context
55 |         return context.response // return the response
56 |     },
57 | })
58 | ```
59 | 
60 | 
61 | ## On Success and On Error
62 | 
63 | on success and on error are callbacks that will be called when a request is successful or when an error occurs. The function will be called with the response context as an argument and it's not expeceted to return anything.
64 | 
65 | ```ts twoslash title="fetch.ts"
66 | import { createFetch } from "@better-fetch/fetch";
67 | 
68 | const $fetch = createFetch({
69 |     baseURL: "http://localhost:3000",
70 |     onSuccess(context) {
71 |         // do something with the context
72 |     },
73 |     onError(context) {
74 |         // do something with the context
75 |     },
76 | })
77 | ```


--------------------------------------------------------------------------------
/content/docs/index.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Introduction
 3 | description: Getting started with Better Fetch
 4 | ---
 5 | 
 6 | Better fetch is advanced fetch wrapper for typescript. It supports error as value, zod schema validations, advanced type inference, pre-defined routes, hooks, plugins and more. Works on the browser, node (version 18+), workers, deno and bun.
 7 | 
 8 | ## Features
 9 | <Cards>
10 |     <Card
11 |         title="Type safety"
12 |         description="Advanced type inference and runtime validations with zod"
13 |     />
14 |     <Card
15 |         title="Smart Parser"
16 |         description="Smart response parser for any content type"
17 |     />
18 |     <Card
19 |         title="Exntensible"
20 |         description="Plugins and hooks to extend the functionality"
21 |     />
22 |     <Card
23 |         title="Fetch Schema"
24 |         description="Pre defined routes with zod schema validations"
25 |     />
26 |     <Card
27 |         title="Utility"
28 |         description="Utility functions to make it fetching data easier"
29 |     />
30 |     <Card
31 |         title="Web API Compatible"
32 |         description="Wraps around fetch and works on the browser, node (version 18+), workers, deno and bun out of the box but can also use custom fetch implementations"
33 |     />
34 | </Cards>
35 | 
36 | 


--------------------------------------------------------------------------------
/content/docs/meta.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "title:": "guide",
 3 |     "root": true,
 4 |     "pages": [
 5 |         "---Guide---",
 6 |         "index",
 7 |         "getting-started",
 8 |         "handling-errors",
 9 |         "---Helpers---",
10 |         "authorization",
11 |         "timeout-and-retry",
12 |         "---Advanced---",
13 |         "fetch-schema",
14 |         "default-types",
15 |         "hooks",
16 |         "plugins",
17 |         "---Reference---",
18 |         "fetch-options",
19 |         "extra-options"
20 |     ]
21 | }


--------------------------------------------------------------------------------
/content/docs/plugins.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Plugins
 3 | description: Plugins
 4 | ---
 5 | 
 6 | Plugins are functions that can be used to modify the request, response, error and other parts of the request lifecycle.
 7 | 
 8 | The plugins api allows you to modify the request, response, error and other parts of the request lifecycle. 
 9 | 
10 | 
11 | ### Init
12 | 
13 | The init function is called before the request is made and any of the internal functions are called. It takes the `url` and `options` as arguments and is expected to return the modified `url` and `options`.
14 | 
15 | ```ts twoslash title="fetch.ts"
16 | import { createFetch, BetterFetchPlugin } from "@better-fetch/fetch";
17 | 
18 | const myPlugin = {
19 |     id: "my-plugin",
20 |     name: "My Plugin",
21 |     init: async (url, options) => {
22 |        if(url.startsWith("http://")) {
23 |            const _url = new URL(url)
24 |            const DEV_URL = "http://localhost:3000"
25 |            return {
26 |                url: `${DEV_URL}/${_url.pathname}`,
27 |                options,
28 |            }
29 |        }
30 |         return {
31 |             url,
32 |             options,
33 |         }
34 |     },
35 | } satisfies BetterFetchPlugin;
36 | 
37 | const $fetch = createFetch({
38 |     baseUrl: "https://jsonplaceholder.typicode.com",
39 |     plugins: [myPlugin],
40 | });
41 | ```
42 | 
43 | ### Hooks
44 | 
45 | Hooks are functions that are called at different stages of the request lifecycle. See [Hooks](/docs/hooks) for more information.
46 | 
47 | 
48 | ```ts twoslash title="fetch.ts"
49 | import { createFetch, BetterFetchPlugin } from "@better-fetch/fetch";
50 | 
51 | const myPlugin = {
52 |     id: "my-plugin",
53 |     name: "My Plugin",
54 |     hooks: {
55 |         onRequest(context) {
56 |         // do something with the context
57 |         return context;
58 |         },
59 |         onResponse(context) {
60 |             // do something with the context
61 |             return context.response;
62 |         },
63 |         onError(context) {
64 |             // do something with the context
65 |         },
66 |         onSuccess(context) {
67 |             // do something with the context
68 |         },
69 |     }
70 | } satisfies BetterFetchPlugin;
71 | 
72 | const $fetch = createFetch({
73 |     baseUrl: "https://jsonplaceholder.typicode.com",
74 |     plugins: [myPlugin],
75 | });
76 | ```
77 | 
78 | <Callout type="info">
79 |     If more than one plugin is registered, the hooks will be called in the order they are registered.
80 | </Callout>
81 | 
82 | 
83 | ### Properties
84 | <AutoTypeTable path="./lib/better-fetch-options.ts" name="BetterFetchPlugin" />
85 | 


--------------------------------------------------------------------------------
/content/docs/timeout-and-retry.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Timeout and Retry
 3 | description: Timeout and Retry
 4 | ---
 5 | 
 6 | 
 7 | Timeout and retry are two options that can be used to control the request timeout and retry behavior.
 8 | 
 9 | 
10 | ## Timeout
11 | 
12 | You can set the timeout in milliseconds.
13 | 
14 | ```ts twoslash title="fetch.ts"
15 | import { createFetch } from "@better-fetch/fetch";
16 | 
17 | const $fetch = createFetch({
18 |     baseURL: "http://localhost:3000",
19 |     timeout: 5000,
20 | })
21 | // ---cut---
22 | const res = await $fetch("/api/users", {
23 |     timeout: 10000,
24 | });
25 | ```
26 | 
27 | 
28 | ## Auto Retry
29 | 
30 | You can set the retry count and interval in milliseconds.
31 | 
32 | ```ts twoslash title="fetch.ts"
33 | import { createFetch } from "@better-fetch/fetch";
34 | 
35 | const $fetch = createFetch({
36 |     baseURL: "http://localhost:3000",
37 | })
38 | // ---cut---
39 | const res = await $fetch("/api/users", {
40 |     retry: {
41 |         count: 3,
42 |         interval: 1000, //optional
43 |     }
44 | });
45 | ```


--------------------------------------------------------------------------------
/extra-content.md:
--------------------------------------------------------------------------------
 1 | ### DisableValidation
 2 | 
 3 | If you want to bypass the validation, you can pass `disableValidation` as true.
 4 | 
 5 | ```ts
 6 | import { betterFetch } from 'better-fetch';
 7 | import { z } from 'zod';
 8 | 
 9 | const { data, error } = await betterFetch("https://jsonplaceholder.typicode.com/todos/1", {
10 |     output: z.object({
11 |         userId: z.string(),
12 |         id: z.number(),
13 |         title: z.string(),
14 |         completed: z.boolean(),
15 |     }),
16 |     disableValidation: true
17 | });
18 | ```


--------------------------------------------------------------------------------
/lib/better-fetch-options.ts:
--------------------------------------------------------------------------------
1 | import { BetterFetchOption, BetterFetchPlugin } from "@better-fetch/fetch"
2 | 
3 | 
4 | type BetterFetchOptions = Omit<BetterFetchOption, keyof RequestInit>
5 | export type { BetterFetchPlugin, BetterFetchOptions, BetterFetchOption }


--------------------------------------------------------------------------------
/lib/example.ts:
--------------------------------------------------------------------------------
1 | import { createFetch } from "@better-fetch/fetch";
2 | 
3 | 


--------------------------------------------------------------------------------
/lib/metadata.ts:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from 'next/types';
 2 | 
 3 | export function createMetadata(override: Metadata): Metadata {
 4 |     return {
 5 |         ...override,
 6 |         openGraph: {
 7 |             title: override.title ?? undefined,
 8 |             description: override.description ?? undefined,
 9 |             url: 'https://better-fetch.vercel.app',
10 |             images: 'https://better-fetch.vercel.app/banner.png',
11 |             siteName: 'Better Fetch',
12 |             ...override.openGraph,
13 |         },
14 |         twitter: {
15 |             card: 'summary_large_image',
16 |             creator: '@beakcru',
17 |             title: override.title ?? undefined,
18 |             description: override.description ?? undefined,
19 |             images: 'https://better-fetch.vercel.app/banner.png',
20 |             ...override.twitter,
21 |         },
22 |     };
23 | }
24 | 
25 | export const baseUrl =
26 |     process.env.NODE_ENV === 'development'
27 |         ? new URL('http://localhost:3000')
28 |         : new URL(`https://${process.env.VERCEL_URL!}`);


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from "clsx"
 2 | import { twMerge } from "tailwind-merge"
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs))
 6 | }
 7 | 
 8 | export const baseUrl =
 9 |   process.env.NODE_ENV === 'development'
10 |     ? new URL('http://localhost:3000')
11 |     : new URL(`https://${process.env.VERCEL_URL!}`);


--------------------------------------------------------------------------------
/mdx-components.tsx:
--------------------------------------------------------------------------------
 1 | import type { MDXComponents } from 'mdx/types';
 2 | import defaultComponents from 'fumadocs-ui/mdx';
 3 | import { Popup, PopupContent, PopupTrigger } from 'fumadocs-ui/twoslash/popup';
 4 | import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 5 | import { Callout } from 'fumadocs-ui/components/callout';
 6 | import Link from 'next/link';
 7 | import { AutoTypeTable } from 'fumadocs-typescript/ui';
 8 | import { Card, Cards } from 'fumadocs-ui/components/card';
 9 | 
10 | export function useMDXComponents(components: MDXComponents): MDXComponents {
11 |   return {
12 |     ...defaultComponents,
13 |     ...components,
14 |     Popup,
15 |     PopupContent,
16 |     PopupTrigger,
17 |     Tab,
18 |     Tabs,
19 |     Card,
20 |     Cards,
21 |     Callout,
22 |     Link,
23 |     AutoTypeTable,
24 |     blockquote: (props) => <Callout>{props.children}</Callout>,
25 |   };
26 | }
27 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | import createMDX from 'fumadocs-mdx/config';
 2 | import { rehypeCodeDefaultOptions } from 'fumadocs-core/mdx-plugins';
 3 | import { transformerTwoslash } from 'fumadocs-twoslash';
 4 | import { remarkInstall } from 'fumadocs-docgen';
 5 | const withMDX = createMDX({
 6 |   mdxOptions: {
 7 |     rehypeCodeOptions: {
 8 |       transformers: [
 9 |         ...rehypeCodeDefaultOptions.transformers,
10 |         transformerTwoslash(),
11 |       ],
12 |     },
13 |     remarkPlugins: [
14 |       [
15 |         remarkInstall, {
16 |           persist: {
17 |             id: 'persist-install',
18 |           },
19 |         },]
20 |     ],
21 |   },
22 | });
23 | 
24 | /** @type {import('next').NextConfig} */
25 | const config = {
26 |   reactStrictMode: true,
27 | };
28 | 
29 | export default withMDX(config);
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "better-fetch-doc",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "next build",
 7 |     "dev": "next dev",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@better-fetch/fetch": "1.0.1-beta.7",
12 |     "@radix-ui/react-icons": "^1.3.0",
13 |     "@radix-ui/react-slot": "^1.1.0",
14 |     "class-variance-authority": "^0.7.0",
15 |     "clsx": "^2.1.1",
16 |     "framer-motion": "^11.3.2",
17 |     "fumadocs-core": "12.4.2",
18 |     "fumadocs-docgen": "^1.1.0",
19 |     "fumadocs-mdx": "8.2.33",
20 |     "fumadocs-openapi": "^3.3.0",
21 |     "fumadocs-twoslash": "^1.1.0",
22 |     "fumadocs-typescript": "^2.0.1",
23 |     "fumadocs-ui": "12.4.2",
24 |     "next": "^14.2.4",
25 |     "react": "^18.3.1",
26 |     "react-dom": "^18.3.1",
27 |     "tailwind-merge": "^2.4.0",
28 |     "zod": "^3.23.8"
29 |   },
30 |   "devDependencies": {
31 |     "@types/mdx": "^2.0.13",
32 |     "@types/node": "20.14.10",
33 |     "@types/react": "^18.3.3",
34 |     "@types/react-dom": "^18.3.0",
35 |     "autoprefixer": "^10.4.19",
36 |     "postcss": "^8.4.39",
37 |     "tailwindcss": "^3.4.4",
38 |     "typescript": "^5.5.3"
39 |   }
40 | }


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bekacru/better-fetch-docs/ca639bbc10612d5a90a78dce783b19b77ebd2071/public/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bekacru/better-fetch-docs/ca639bbc10612d5a90a78dce783b19b77ebd2071/public/android-chrome-512x512.png


--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bekacru/better-fetch-docs/ca639bbc10612d5a90a78dce783b19b77ebd2071/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bekacru/better-fetch-docs/ca639bbc10612d5a90a78dce783b19b77ebd2071/public/banner.png


--------------------------------------------------------------------------------
/public/better-fetch-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect width="200" height="200" fill="#090707"/>
 3 | <path d="M21 24L21 111.12L21 200" stroke="#403232"/>
 4 | <path d="M181 0L182.03 86.68L181 176" stroke="#403232"/>
 5 | <path d="M165 24L166.03 110.68L165 200" stroke="#261E1E"/>
 6 | <path d="M41 0L42.0304 86.68L41 176" stroke="#191907"/>
 7 | <line x1="200" y1="176.5" x2="-4.37114e-08" y2="176.5" stroke="#403232"/>
 8 | <line x1="200" y1="24.5" x2="-4.37114e-08" y2="24.5" stroke="#403232"/>
 9 | <path d="M70.4545 135V65.1818H94.8636C99.7273 65.1818 103.739 66.0227 106.898 67.7045C110.057 69.3636 112.409 71.6023 113.955 74.4205C115.5 77.2159 116.273 80.3182 116.273 83.7273C116.273 86.7273 115.739 89.2045 114.67 91.1591C113.625 93.1136 112.239 94.6591 110.511 95.7955C108.807 96.9318 106.955 97.7727 104.955 98.3182V99C107.091 99.1364 109.239 99.8864 111.398 101.25C113.557 102.614 115.364 104.568 116.818 107.114C118.273 109.659 119 112.773 119 116.455C119 119.955 118.205 123.102 116.614 125.898C115.023 128.693 112.511 130.909 109.08 132.545C105.648 134.182 101.182 135 95.6818 135H70.4545ZM78.9091 127.5H95.6818C101.205 127.5 105.125 126.432 107.443 124.295C109.784 122.136 110.955 119.523 110.955 116.455C110.955 114.091 110.352 111.909 109.148 109.909C107.943 107.886 106.227 106.273 104 105.068C101.773 103.841 99.1364 103.227 96.0909 103.227H78.9091V127.5ZM78.9091 95.8636H94.5909C97.1364 95.8636 99.4318 95.3636 101.477 94.3636C103.545 93.3636 105.182 91.9545 106.386 90.1364C107.614 88.3182 108.227 86.1818 108.227 83.7273C108.227 80.6591 107.159 78.0568 105.023 75.9205C102.886 73.7614 99.5 72.6818 94.8636 72.6818H78.9091V95.8636Z" fill="#EA580B"/>
10 | <path d="M136.5 124.438C136.691 124.438 136.873 124.513 137.008 124.648C137.143 124.783 137.219 124.966 137.219 125.156V129.469C137.219 129.659 137.143 129.842 137.008 129.977C136.873 130.112 136.691 130.188 136.5 130.188C136.309 130.188 136.127 130.112 135.992 129.977C135.857 129.842 135.781 129.659 135.781 129.469V125.156C135.781 124.966 135.857 124.783 135.992 124.648C136.127 124.513 136.309 124.438 136.5 124.438ZM136.5 138.812C136.691 138.812 136.873 138.888 137.008 139.023C137.143 139.158 137.219 139.341 137.219 139.531V143.844C137.219 144.034 137.143 144.217 137.008 144.352C136.873 144.487 136.691 144.562 136.5 144.562C136.309 144.562 136.127 144.487 135.992 144.352C135.857 144.217 135.781 144.034 135.781 143.844V139.531C135.781 139.341 135.857 139.158 135.992 139.023C136.127 138.888 136.309 138.812 136.5 138.812ZM146.562 134.5C146.562 134.691 146.487 134.873 146.352 135.008C146.217 135.143 146.034 135.219 145.844 135.219H141.531C141.341 135.219 141.158 135.143 141.023 135.008C140.888 134.873 140.812 134.691 140.812 134.5C140.812 134.309 140.888 134.127 141.023 133.992C141.158 133.857 141.341 133.781 141.531 133.781H145.844C146.034 133.781 146.217 133.857 146.352 133.992C146.487 134.127 146.562 134.309 146.562 134.5ZM132.188 134.5C132.188 134.691 132.112 134.873 131.977 135.008C131.842 135.143 131.659 135.219 131.469 135.219H127.156C126.966 135.219 126.783 135.143 126.648 135.008C126.513 134.873 126.438 134.691 126.438 134.5C126.438 134.309 126.513 134.127 126.648 133.992C126.783 133.857 126.966 133.781 127.156 133.781H131.469C131.659 133.781 131.842 133.857 131.977 133.992C132.112 134.127 132.188 134.309 132.188 134.5ZM129.384 127.384C129.519 127.25 129.702 127.174 129.893 127.174C130.083 127.174 130.266 127.25 130.401 127.384L133.453 130.435C133.583 130.57 133.656 130.752 133.654 130.94C133.653 131.129 133.577 131.309 133.444 131.442C133.31 131.576 133.13 131.651 132.942 131.653C132.753 131.654 132.572 131.582 132.436 131.451L129.384 128.401C129.25 128.266 129.174 128.083 129.174 127.893C129.174 127.702 129.25 127.519 129.384 127.384ZM139.549 137.549C139.684 137.414 139.867 137.338 140.057 137.338C140.248 137.338 140.43 137.414 140.565 137.549L143.616 140.599C143.747 140.735 143.819 140.916 143.817 141.105C143.816 141.293 143.74 141.474 143.607 141.607C143.474 141.74 143.293 141.816 143.105 141.817C142.916 141.819 142.735 141.747 142.599 141.616L139.549 138.565C139.414 138.43 139.338 138.248 139.338 138.057C139.338 137.867 139.414 137.684 139.549 137.549ZM143.616 127.386C143.75 127.521 143.825 127.703 143.825 127.893C143.825 128.083 143.75 128.266 143.616 128.401L140.565 131.453C140.43 131.583 140.248 131.656 140.06 131.654C139.871 131.653 139.691 131.577 139.558 131.444C139.424 131.31 139.349 131.13 139.347 130.942C139.346 130.753 139.418 130.572 139.549 130.436L142.599 127.386C142.734 127.251 142.917 127.175 143.107 127.175C143.298 127.175 143.481 127.251 143.616 127.386ZM133.451 137.549C133.586 137.684 133.662 137.867 133.662 138.057C133.662 138.248 133.586 138.43 133.451 138.565L130.401 141.616C130.265 141.747 130.084 141.819 129.895 141.817C129.707 141.816 129.526 141.74 129.393 141.607C129.26 141.474 129.184 141.293 129.183 141.105C129.181 140.916 129.253 140.735 129.384 140.599L132.435 137.549C132.57 137.414 132.752 137.338 132.943 137.338C133.133 137.338 133.316 137.414 133.451 137.549Z" fill="#EA580B"/>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/public/better-fetch-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect width="200" height="200" fill="#D9D9D9"/>
 3 | <line x1="21.5" y1="2.18557e-08" x2="21.5" y2="200" stroke="#C4C4C4"/>
 4 | <line x1="173.5" y1="2.18557e-08" x2="173.5" y2="200" stroke="#C4C4C4"/>
 5 | <line x1="200" y1="176.5" x2="-4.37114e-08" y2="176.5" stroke="#C4C4C4"/>
 6 | <line x1="200" y1="24.5" x2="-4.37114e-08" y2="24.5" stroke="#C4C4C4"/>
 7 | <path d="M61.5886 137.741V47.2357H93.1952C99.493 47.2357 104.687 48.3258 108.778 50.5059C112.868 52.6566 115.914 55.5585 117.915 59.2117C119.917 62.8355 120.917 66.857 120.917 71.2762C120.917 75.165 120.226 78.3762 118.843 80.91C117.489 83.4436 115.694 85.447 113.457 86.9201C111.25 88.3931 108.851 89.4832 106.262 90.1903V91.0741C109.028 91.2509 111.809 92.2231 114.605 93.9908C117.4 95.7584 119.74 98.2921 121.624 101.592C123.507 104.891 124.449 108.928 124.449 113.7C124.449 118.237 123.419 122.318 121.359 125.941C119.299 129.565 116.047 132.438 111.603 134.559C107.159 136.68 101.376 137.741 94.2546 137.741H61.5886ZM72.5361 128.019H94.2546C101.406 128.019 106.482 126.634 109.484 123.865C112.515 121.066 114.031 117.678 114.031 113.7C114.031 110.636 113.251 107.808 111.691 105.216C110.132 102.594 107.91 100.502 105.026 98.9403C102.142 97.3493 98.7279 96.5539 94.7844 96.5539H72.5361V128.019ZM72.5361 87.0084H92.8421C96.1382 87.0084 99.1104 86.3603 101.759 85.064C104.437 83.7677 106.556 81.941 108.116 79.5843C109.705 77.2273 110.499 74.4579 110.499 71.2762C110.499 67.2989 109.116 63.9255 106.35 61.1562C103.584 58.3573 99.1987 56.9579 93.1952 56.9579H72.5361V87.0084Z" fill="#EA580B"/>
 8 | <path d="M147.109 124.049C147.356 124.049 147.592 124.147 147.767 124.321C147.942 124.496 148.04 124.733 148.04 124.98V130.571C148.04 130.818 147.942 131.055 147.767 131.229C147.592 131.404 147.356 131.502 147.109 131.502C146.862 131.502 146.625 131.404 146.451 131.229C146.276 131.055 146.178 130.818 146.178 130.571V124.98C146.178 124.733 146.276 124.496 146.451 124.321C146.625 124.147 146.862 124.049 147.109 124.049ZM147.109 142.683C147.356 142.683 147.592 142.781 147.767 142.956C147.942 143.13 148.04 143.367 148.04 143.614V149.205C148.04 149.452 147.942 149.689 147.767 149.864C147.592 150.038 147.356 150.137 147.109 150.137C146.862 150.137 146.625 150.038 146.451 149.864C146.276 149.689 146.178 149.452 146.178 149.205V143.614C146.178 143.367 146.276 143.13 146.451 142.956C146.625 142.781 146.862 142.683 147.109 142.683ZM160.139 137.093C160.139 137.34 160.041 137.577 159.866 137.751C159.692 137.926 159.455 138.024 159.208 138.024H153.624C153.377 138.024 153.14 137.926 152.966 137.751C152.791 137.577 152.693 137.34 152.693 137.093C152.693 136.845 152.791 136.609 152.966 136.434C153.14 136.259 153.377 136.161 153.624 136.161H159.208C159.455 136.161 159.692 136.259 159.866 136.434C160.041 136.609 160.139 136.845 160.139 137.093ZM141.525 137.093C141.525 137.34 141.427 137.577 141.252 137.751C141.078 137.926 140.841 138.024 140.594 138.024H135.01C134.763 138.024 134.526 137.926 134.352 137.751C134.177 137.577 134.079 137.34 134.079 137.093C134.079 136.845 134.177 136.609 134.352 136.434C134.526 136.259 134.763 136.161 135.01 136.161H140.594C140.841 136.161 141.078 136.259 141.252 136.434C141.427 136.609 141.525 136.845 141.525 137.093ZM137.895 127.869C138.07 127.694 138.306 127.596 138.553 127.596C138.8 127.596 139.037 127.694 139.211 127.869L143.163 131.823C143.332 131.999 143.426 132.234 143.424 132.478C143.422 132.722 143.324 132.956 143.151 133.129C142.979 133.302 142.746 133.4 142.502 133.402C142.257 133.404 142.022 133.31 141.847 133.14L137.895 129.186C137.721 129.011 137.623 128.774 137.623 128.527C137.623 128.28 137.721 128.043 137.895 127.869ZM151.057 141.045C151.231 140.87 151.468 140.772 151.715 140.772C151.962 140.772 152.198 140.87 152.373 141.045L156.323 144.999C156.492 145.175 156.586 145.41 156.584 145.654C156.582 145.899 156.484 146.132 156.312 146.305C156.139 146.478 155.905 146.576 155.661 146.578C155.417 146.58 155.182 146.486 155.007 146.316L151.057 142.362C150.882 142.188 150.784 141.951 150.784 141.704C150.784 141.457 150.882 141.22 151.057 141.045ZM156.323 127.87C156.497 128.045 156.594 128.282 156.594 128.528C156.594 128.775 156.497 129.011 156.323 129.186L152.373 133.142C152.197 133.312 151.962 133.406 151.718 133.404C151.474 133.401 151.241 133.303 151.068 133.131C150.896 132.958 150.798 132.724 150.796 132.48C150.794 132.236 150.887 132 151.057 131.825L155.007 127.87C155.181 127.696 155.418 127.598 155.665 127.598C155.912 127.598 156.148 127.696 156.323 127.87ZM143.161 141.045C143.335 141.22 143.433 141.457 143.433 141.704C143.433 141.951 143.335 142.188 143.161 142.362L139.211 146.316C139.036 146.486 138.801 146.58 138.556 146.578C138.313 146.576 138.079 146.478 137.906 146.305C137.734 146.132 137.636 145.899 137.634 145.654C137.632 145.41 137.726 145.175 137.895 144.999L141.845 141.045C142.019 140.87 142.256 140.772 142.503 140.772C142.75 140.772 142.986 140.87 143.161 141.045Z" fill="#EA580B"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bekacru/better-fetch-docs/ca639bbc10612d5a90a78dce783b19b77ebd2071/public/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bekacru/better-fetch-docs/ca639bbc10612d5a90a78dce783b19b77ebd2071/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bekacru/better-fetch-docs/ca639bbc10612d5a90a78dce783b19b77ebd2071/public/favicon.ico


--------------------------------------------------------------------------------
/public/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | import { createPreset } from 'fumadocs-ui/tailwind-plugin';
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | export default {
 5 |   content: [
 6 |     './components/**/*.{ts,tsx}',
 7 |     './app/**/*.{ts,tsx}',
 8 |     './content/**/*.{md,mdx}',
 9 |     './mdx-components.{ts,tsx}',
10 |     './node_modules/fumadocs-ui/dist/**/*.js',
11 |   ],
12 |   presets: [createPreset()],
13 |   theme: {
14 |     extend: {
15 |       colors: {
16 |         border: "hsl(var(--border))",
17 |         input: "hsl(var(--input))",
18 |         ring: "hsl(var(--ring))",
19 |         background: "hsl(var(--background))",
20 |         foreground: "hsl(var(--foreground))",
21 |         primary: {
22 |           DEFAULT: "hsl(var(--primary))",
23 |           foreground: "hsl(var(--primary-foreground))",
24 |         },
25 |         secondary: {
26 |           DEFAULT: "hsl(var(--secondary))",
27 |           foreground: "hsl(var(--secondary-foreground))",
28 |         },
29 |         destructive: {
30 |           DEFAULT: "hsl(var(--destructive))",
31 |           foreground: "hsl(var(--destructive-foreground))",
32 |         },
33 |         muted: {
34 |           DEFAULT: "hsl(var(--muted))",
35 |           foreground: "hsl(var(--muted-foreground))",
36 |         },
37 |         accent: {
38 |           DEFAULT: "hsl(var(--accent))",
39 |           foreground: "hsl(var(--accent-foreground))",
40 |         },
41 |         popover: {
42 |           DEFAULT: "hsl(var(--popover))",
43 |           foreground: "hsl(var(--popover-foreground))",
44 |         },
45 |         card: {
46 |           DEFAULT: "hsl(var(--card))",
47 |           foreground: "hsl(var(--card-foreground))",
48 |         },
49 |       },
50 |       borderRadius: {
51 |         lg: "var(--radius)",
52 |         md: "calc(var(--radius) - 2px)",
53 |         sm: "calc(var(--radius) - 4px)",
54 |       },
55 |       animation: {
56 |         ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite",
57 |         "accordion-down": "accordion-down 0.2s ease-out",
58 |         "accordion-up": "accordion-up 0.2s ease-out",
59 |       },
60 |       keyframes: {
61 |         "accordion-down": {
62 |           from: { height: "0" },
63 |           to: { height: "var(--radix-accordion-content-height)" },
64 |         },
65 |         "accordion-up": {
66 |           from: { height: "var(--radix-accordion-content-height)" },
67 |           to: { height: "0" },
68 |         },
69 |         ripple: {
70 |           "0%, 100%": {
71 |             transform: "translate(-50%, -50%) scale(1)",
72 |           },
73 |           "50%": {
74 |             transform: "translate(-50%, -50%) scale(0.9)",
75 |           },
76 |         },
77 |       },
78 |     }
79 |   }
80 | };
81 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "target": "ESNext",
 5 |     "lib": ["dom", "dom.iterable", "esnext"],
 6 |     "allowJs": true,
 7 |     "skipLibCheck": true,
 8 |     "strict": true,
 9 |     "forceConsistentCasingInFileNames": true,
10 |     "noEmit": true,
11 |     "esModuleInterop": true,
12 |     "module": "esnext",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "jsx": "preserve",
17 |     "incremental": true,
18 |     "paths": {
19 |       "@/*": ["./*"]
20 |     },
21 |     "plugins": [
22 |       {
23 |         "name": "next"
24 |       }
25 |     ]
26 |   },
27 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
28 |   "exclude": ["node_modules"]
29 | }
30 | 


--------------------------------------------------------------------------------