✨ Adding new template with automatique routing

ts-router/src/app.tsx

@@ -0,0 +1,46 @@
+import { Component } from "solid-js";
+import { Link, Route, useRouter } from "solid-app-router";
+
+const App: Component = () => {
+  const router = useRouter();
+
+  return (
+    <>
+      <nav class="bg-gray-200 text-gray-900 px-4">
+        <ul class="flex items-center">
+          <li class="py-2 px-4">
+            <Link href="/" class="no-underline hover:underline">
+              Home
+            </Link>
+          </li>
+          <li class="py-2 px-4">
+            <Link href="/about" class="no-underline hover:underline">
+              About
+            </Link>
+          </li>
+          <li class="py-2 px-4">
+            <Link href="/error" class="no-underline hover:underline">
+              Error
+            </Link>
+          </li>
+
+          <li class="text-sm flex items-center space-x-1 ml-auto">
+            <span>URL:</span>
+            <input
+              class="w-75px p-1 bg-white text-sm rounded-lg"
+              type="text"
+              readOnly
+              value={router.location}
+            />
+          </li>
+        </ul>
+      </nav>
+
+      <main>
+        <Route />
+      </main>
+    </>
+  );
+};
+
+export default App;

ts-router/src/errors/404.tsx

@@ -0,0 +1,8 @@
+export default function NotFound() {
+  return (
+    <section class="text-gray-700 p-8">
+      <h1 class="text-2xl font-bold">404: Not Found</h1>
+      <p class="mt-4">It's gone 😞</p>
+    </section>
+  );
+}

ts-router/src/index.tsx

@@ -0,0 +1,15 @@
+import "windi.css";
+
+import { render } from "solid-js/web";
+import { Router } from "solid-app-router";
+import { routes } from "./routes";
+import App from "./app";
+
+render(
+  () => (
+    <Router routes={routes}>
+      <App />
+    </Router>
+  ),
+  document.getElementById("root")
+);

ts-router/src/pages/about.tsx

@@ -0,0 +1,13 @@
+export default function About(props) {
+  return (
+    <section class="bg-pink-100 text-gray-700 p-8">
+      <h1 class="text-2xl font-bold">About</h1>
+
+      <p class="mt-4">A page all about this website.</p>
+
+      <pre class="mt-4">
+        <code>{JSON.stringify(props, null, 2)}</code>
+      </pre>
+    </section>
+  );
+}

ts-router/src/pages/home.tsx

@@ -0,0 +1,30 @@
+import { createSignal } from "solid-js";
+
+export default function Home() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <section class="bg-gray-100 text-gray-700 p-8">
+      <h1 class="text-2xl font-bold">Home</h1>
+      <p class="mt-4">This is the home page.</p>
+
+      <div class="flex items-center space-x-2">
+        <button
+          class="border rounded-lg px-2 border-gray-900"
+          onClick={() => setCount(count() - 1)}
+        >
+          -
+        </button>
+
+        <output class="p-10px">Count: {count}</output>
+
+        <button
+          class="border rounded-lg px-2 border-gray-900"
+          onClick={() => setCount(count() + 1)}
+        >
+          +
+        </button>
+      </div>
+    </section>
+  );
+}

ts-router/src/routes.ts

@@ -0,0 +1,24 @@
+import { RouteDefinition } from "solid-app-router";
+import { lazy, Component } from "solid-js";
+
+const pages = import.meta.glob("./pages/**/*.tsx");
+
+const autoRoutes = Object.keys(pages).map((path) => {
+  const name = path.match(/\.\/pages(.*)\.[tj]sx$/)[1].toLowerCase();
+  const Comp = pages[path] as () => Promise<{ default: Component<any> }>;
+
+  const routePath = ["/home", "/index"].includes(name) ? "/" : name;
+
+  return {
+    path: routePath,
+    component: lazy(Comp),
+  } as RouteDefinition;
+});
+
+export const routes: RouteDefinition[] = [
+  ...autoRoutes,
+  {
+    path: "**",
+    component: lazy(() => import("./errors/404")),
+  },
+];