@epicabdou/create-linkrjs-app 0.0.3 → 0.0.5

package/README.md

@@ -1,6 +1,6 @@
-# create-linkrjs-app
+# @epicabdou/create-linkrjs-app
 
-Scaffold a new **linkr.js** app (Vite + React + React Router + file-based routing) with **Tailwind v4** and the **linkr design system**.
+Scaffold a new **linkr.js** app with Vite, React, React Router v7, file-based routing (**@epicabdou/linkr**), **Tailwind CSS v4**, and the **linkr-design-system**.
 
 ## Usage
 
@@ -11,26 +11,67 @@ pnpm install
 pnpm dev
 ```
 
-(Or `npx create-linkrjs-app my-app` if you have the package installed globally.)
+You can also use the shorthand name if the package is available:
 
-This creates a folder `my-app` with:
+```bash
+npx create-linkrjs-app my-app
+```
 
-- Vite + React + TypeScript
-- React Router v7
-- **@epicabdou/linkr** for file-based routes from `src/pages/`
-- **Tailwind CSS v4** with **@tailwindcss/vite**
-- **linkr-design-system** (design tokens + base styles via `@theme` and base layer)
-- `index.tsx` (home) and `404.tsx` (not found)
+Replace `my-app` with your desired project name. The CLI creates a folder with that name in the current directory.
 
-Dev server runs at http://localhost:8000.
+**Dev server:** runs at `http://localhost:8000` by default.
+
+---
 
 ## What gets created
 
-- `package.json` — name set to your project name (includes linkr-design-system, tailwindcss, @tailwindcss/vite)
-- `vite.config.ts` — React + Tailwind v4 plugin, port 8000
-- `src/index.css` — Tailwind + linkr-design-system theme and base imports
-- `src/main.tsx` — router using `createRoutes` + `import.meta.glob("./pages/**/*.tsx")`
-- `src/pages/index.tsx` — home page (sample design-system classes)
-- `src/pages/404.tsx` — 404 page
+The template produces a minimal but complete Vite + React + TypeScript app with file-based routing and the design system.
+
+### Root files
+
+| File | Description |
+|------|-------------|
+| `package.json` | Project name set to your app name; includes `@epicabdou/linkr`, `linkr-design-system`, `react`, `react-router`, `tailwindcss`, `@tailwindcss/vite`, `vite`, etc. |
+| `vite.config.ts` | React plugin + Tailwind v4 plugin (`@tailwindcss/vite`), dev server port **8000**. |
+| `index.html` | Entry HTML with root div. |
+| `tsconfig.json` | TypeScript config for the app. |
+
+### Source structure
+
+| Path | Description |
+|------|-------------|
+| `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/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. |
+
+### Dependencies (template)
+
+- **Runtime:** `@epicabdou/linkr`, `linkr-design-system`, `react`, `react-dom`, `react-router`
+- **Dev:** `@tailwindcss/vite`, `tailwindcss`, `@vitejs/plugin-react`, `vite`, `typescript`, `@types/react`, `@types/react-dom`
+
+---
+
+## Next steps
+
+1. **Add routes** — Create files under `src/pages/`:
+   - `about.tsx` → `/about`
+   - `blog/index.tsx` → `/blog`
+   - `blog/[id].tsx` → `/blog/:id`
+   - `docs/[...slug].tsx` → `/docs/*`
+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).
+
+---
+
+## Requirements
+
+- **Node.js** 18+
+- **pnpm** (recommended), npm, or yarn for installing dependencies
 
-Add more routes by adding files under `src/pages/` (e.g. `about.tsx` → `/about`).
+The generated app uses **Vite 5**, **React 18**, **React Router 7**, and **Tailwind CSS 4**.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicabdou/create-linkrjs-app",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "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.3","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.5","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>
   );
 }