@epicabdou/create-linkrjs-app 0.0.4 → 0.0.6

package/README.md

@@ -42,7 +42,9 @@ The template produces a minimal but complete Vite + React + TypeScript app with
 |------|-------------|
 | `src/main.tsx` | Entry: imports CSS, builds routes with `createRoutes` + `import.meta.glob("./pages/**/*.tsx")`, creates React root and `RouterProvider`. |
 | `src/index.css` | Tailwind + design system: `@import "tailwindcss"`, `@import "linkr-design-system/theme"`, `@import "linkr-design-system/base"`. |
-| `src/pages/index.tsx` | Home page at `/` (sample content using design-system classes). |
+| `src/layouts/Layout.tsx` | Layout example (Astro-style): nav + `children`. Import and wrap page content with `<Layout>…</Layout>` only on pages that need it. |
+| `src/pages/index.tsx` | Home page at `/` — wraps content in `<Layout>`. |
+| `src/pages/about.tsx` | About page at `/about` — same `<Layout>` wrapper. |
 | `src/pages/404.tsx` | Not-found page (catch-all route). |
 | `src/config/protect.tsx` | Example `ProtectConfig` for route protection (optional use with `<Protect>`). |
 | `src/vite-env.d.ts` | Vite client types. |
@@ -61,7 +63,7 @@ The template produces a minimal but complete Vite + React + TypeScript app with
    - `blog/index.tsx` → `/blog`
    - `blog/[id].tsx` → `/blog/:id`
    - `docs/[...slug].tsx` → `/docs/*`
-2. **Add layouts** — Either add `_layout.tsx` in a page folder, or use a separate `src/layouts/` folder with `layoutsGlob` and `layoutMap` in `main.tsx` (see [linkr README](../linkr/README.md#layouts-in-a-separate-folder)).
+2. **Add layouts** — Astro-style: add components in `src/layouts/` (e.g. `Layout.tsx`) that accept `children`, then import and wrap specific pages with `<Layout>…</Layout>`. No router config — each page chooses its layout.
 3. **Protect routes** — Use the `protect` export on a page/layout or wrap content with `<Protect>` and the config from `src/config/protect.tsx`.
 4. **Styling** — Use Tailwind utilities and design-system tokens (e.g. `bg-primary-500`, `text-neutral-600`, `rounded-lg`, `font-sans`). See [design-system README](../design-system/README.md).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicabdou/create-linkrjs-app",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Scaffold a new linkr.js app (Vite + React + React Router + file-based routing)",
   "type": "module",
   "bin": {

package/template/package.json

@@ -1 +1 @@
-{"name":"my-linkrjs-app","private":true,"version":"0.0.1","type":"module","scripts":{"dev":"vite","build":"tsc -b && vite build","preview":"vite preview"},"dependencies":{"@epicabdou/linkr":"^0.0.4","linkr-design-system":"^0.0.1","react":"^18.2.0","react-dom":"^18.2.0","react-router":"^7.0.0"},"devDependencies":{"@tailwindcss/vite":"^4.0.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0","tailwindcss":"^4.0.0","typescript":"^5.3.0","vite":"^5.0.0"}}
+{"name":"my-linkrjs-app","private":true,"version":"0.0.1","type":"module","scripts":{"dev":"vite","build":"tsc -b && vite build","preview":"vite preview"},"dependencies":{"@epicabdou/linkr":"^0.0.6","linkr-design-system":"^0.0.1","react":"^18.2.0","react-dom":"^18.2.0","react-router":"^7.0.0"},"devDependencies":{"@tailwindcss/vite":"^4.0.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0","tailwindcss":"^4.0.0","typescript":"^5.3.0","vite":"^5.0.0"}}

package/template/src/layouts/Layout.tsx

@@ -0,0 +1,28 @@
+import { Link } from "react-router";
+import type { ReactNode } from "react";
+
+type LayoutProps = { children: ReactNode };
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <div className="min-h-screen font-sans flex flex-col">
+      <nav className="border-b border-neutral-200 bg-white/80 backdrop-blur-sm sticky top-0 z-10">
+        <div className="max-w-4xl mx-auto px-6 py-4 flex gap-6">
+          <Link
+            to="/"
+            className="text-neutral-600 hover:text-primary-600 font-medium transition-colors"
+          >
+            Home
+          </Link>
+          <Link
+            to="/about"
+            className="text-neutral-600 hover:text-primary-600 font-medium transition-colors"
+          >
+            About
+          </Link>
+        </div>
+      </nav>
+      <main className="flex-1">{children}</main>
+    </div>
+  );
+}

package/template/src/pages/about.tsx

@@ -0,0 +1,14 @@
+import Layout from "../layouts/Layout";
+
+export default function About() {
+  return (
+    <Layout>
+      <div className="max-w-4xl mx-auto px-6 py-8">
+        <h1 className="text-3xl font-bold text-neutral-900">About</h1>
+        <p className="mt-2 text-neutral-600">
+          This page uses the same <code className="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-sm">{"<Layout />"}</code> as Home. Add layouts in <code className="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-sm">src/layouts/</code> and wrap only the pages that need them (Astro-style).
+        </p>
+      </div>
+    </Layout>
+  );
+}

package/template/src/pages/index.tsx

@@ -1,6 +1,9 @@
+import Layout from "../layouts/Layout";
+
 export default function Home() {
   return (
-    <div className="min-h-screen font-sans p-8">
+    <Layout>
+    <div className="max-w-4xl mx-auto px-6 py-8">
       <h1 className="text-3xl font-bold text-neutral-900">Welcome to linkr.js</h1>
       <p className="mt-2 text-neutral-600">
         Edit <code className="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-sm">src/pages/index.tsx</code> to get started.
@@ -9,5 +12,6 @@ export default function Home() {
         Tailwind v4 + linkr design system are included. Use utilities like <code className="text-primary-600">bg-primary-500</code>, <code className="text-primary-600">rounded-lg</code>, <code className="text-primary-600">font-sans</code>.
       </p>
     </div>
+    </Layout>
   );
 }