import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { biniroute } from 'bini-router'
import { biniEnv } from 'bini-env'

export default defineConfig({
  plugins: [react(), biniEnv(), biniroute()],
})

import { createRoot } from 'react-dom/client'
import App from './App'

createRoot(document.getElementById('root')!).render(<App />)

export default function Dashboard() {
  const [count, setCount] = useState(0)
  return <h1>Dashboard</h1>
}

export default function Post() {
  const { slug } = useParams()
  return <h1>Post: {slug}</h1>
}

export default function Docs() {
  // Matches /docs/anything/nested/here
  return <h1>Docs</h1>
}

export default function SidebarDefault() {
  return <p>Nothing to show here for this page.</p>
}

export const metadata = {
  title: 'My App',
  description: 'Built with bini-router',
}

export default function RootLayout() {
  return <Outlet />
}

export const metadata = {
  title: 'Dashboard',
}

export default function DashboardLayout({ params }) {
  return (
    <div className="dashboard">
      <aside>Sidebar</aside>
      <main><Outlet /></main>
    </div>
  )
}

export default function DashboardTemplate({ children }) {
  return <section className="page-transition">{children}</section>
}

export default function DashboardLoading() {
  return <p>Loading dashboard...</p>
}

export default function NotFound() {
  return (
    <div>
      <h1>Post not found</h1>
      <Link to="/blog">Back to blog</Link>
    </div>
  )
}

export default function DashboardError({ error, reset }) {
  return (
    <div>
      <h2>Something broke</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

export default function SidebarDefault() {
  return <p>Nothing to show here.</p>
}

# About us

This is **markdown**, rendered as JSX.

<button className="rounded bg-cyan-500 px-4 py-2 text-white">
  Click me
</button>

biniroute({
  mdx: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
})

export const metadata = {
  title: {
    default: 'My App',
    template: '%s | My App',
  },
  description: 'Built with bini-router',
  openGraph: {
    title: 'Dashboard',
    images: [{ url: '/og.png' }],
  },
}

export const document = {
  html: { lang: 'en', class: 'dark' },
  body: { class: 'antialiased' },
  head: (
    <>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <script async src="https://example.com/analytics.js"></script>
    </>
  ),
}

export default function RootLayout() {
  return <Outlet />
}

export default function Profile() {
  const { id } = useParams()
  const [user, setUser] = useState(null)
  return <div><Link to="/">Home</Link><h1>Profile {id}</h1></div>
}

BINI_FIREBASE_API_KEY=your_key
SMTP_USER=user@smtp.example.com
SMTP_PASS=your_password

const SMTP_USER = requireEnv('SMTP_USER')  // throws if missing
const DEBUG = getEnv('DEBUG_MODE')         // undefined if missing

export default function handler(req) {
  return Response.json({ message: 'hello', method: req.method })
}

export default function handler(req) {
  const params = JSON.parse(req.headers.get('x-bini-params') ?? '{}')
  return Response.json({ id: params.id })
}

import { Hono } from 'hono'
const app = new Hono()
app.all('/hello', (c) => c.json({ message: 'Hello!', method: c.req.method }))
export default app

biniroute({
  appDir: 'src/app',
  apiDir: 'src/app/api',
  autoImportDir: 'src',
  cors: false,
  strictMode: true,
  bodySizeLimit: 1024 * 1024,
  document: true,
  mdx: {},
})