Initialize Minabot with Hono and React Router

2026-09-04 07:40:35 +02:00
commit 23e9f4c717
18 changed files with 553 additions and 0 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,27 @@
+import { Route, Routes, useLocation, useNavigate } from "react-router";
+import { Home } from "./pages/Home";
+import { About } from "./pages/About";
+import { Settings } from "./pages/Settings";
+
+export function App() {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  return (
+    <>
+      <nav aria-label="Main navigation">
+        <button type="button" disabled={pathname === "/"} onClick={() => navigate("/")}>Home</button>{" "}
+        <button type="button" disabled={pathname === "/about"} onClick={() => navigate("/about")}>About</button>{" "}
+        <button type="button" disabled={pathname === "/settings"} onClick={() => navigate("/settings")}>Settings</button>
+      </nav>
+      <main>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/settings" element={<Settings />} />
+          <Route path="*" element={<h1>Page not found</h1>} />
+        </Routes>
+      </main>
+    </>
+  );
+}
--- a/src/frontend.tsx
+++ b/src/frontend.tsx
@@ -0,0 +1,18 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router";
+import { App } from "./App";
+import "../styles/globals.css";
+
+const container = document.getElementById("root")!;
+const root = import.meta.hot
+  ? (import.meta.hot.data.root ??= createRoot(container))
+  : createRoot(container);
+
+root.render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+);
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Minabot</title>
+    <script type="module" src="./frontend.tsx" async></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
--- a/src/index.ts
+++ b/src/index.ts
@@ -0,0 +1,23 @@
+import { Hono } from "hono";
+import index from "./index.html";
+
+const app = new Hono();
+
+app.get("/api/health", c => c.json({ status: "ok" }));
+app.notFound(c => c.json({ error: "Not found" }, 404));
+
+const server = Bun.serve({
+  hostname: "127.0.0.1",
+  port: Number(process.env.PORT ?? 3000),
+  routes: {
+    "/api": req => app.fetch(req),
+    "/api/*": req => app.fetch(req),
+    "/*": index,
+  },
+  development: process.env.NODE_ENV !== "production" && {
+    hmr: true,
+    console: true,
+  },
+});
+
+console.log(`Server running at ${server.url}`);
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -0,0 +1,3 @@
+export function About() {
+  return <h1>About</h1>;
+}
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -0,0 +1,3 @@
+export function Home() {
+  return <h1>Home</h1>;
+}
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,3 @@
+export function Settings() {
+  return <h1>Settings</h1>;
+}