@epicabdou/create-linkrjs-app 0.0.2 → 0.0.4

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).
+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,23 +11,65 @@ 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/`
-- `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
-- `vite.config.ts` — React plugin, port 8000
-- `src/main.tsx` — router using `createRoutes` + `import.meta.glob("./pages/**/*.tsx")`
-- `src/pages/index.tsx` — home page
-- `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/pages/index.tsx` | Home page at `/` (sample content using design-system classes). |
+| `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** — 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)).
+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.2",
+  "version": "0.0.4",
   "description": "Scaffold a new linkr.js app (Vite + React + React Router + file-based routing)",
   "type": "module",
   "bin": {

package/template/index.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>linkr.js App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

package/template/package.json

@@ -1,24 +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.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^7.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@vitejs/plugin-react": "^4.2.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.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"}}

package/template/src/index.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "linkr-design-system/theme";
+@import "linkr-design-system/base";

package/template/src/main.tsx

@@ -1,3 +1,4 @@
+import "./index.css";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router";

package/template/src/pages/index.tsx

@@ -1,8 +1,13 @@
 export default function Home() {
   return (
-    <div>
-      <h1>Welcome to linkr.js</h1>
-      <p>Edit <code>src/pages/index.tsx</code> to get started.</p>
+    <div className="min-h-screen font-sans p-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.
+      </p>
+      <p className="mt-4 text-sm text-neutral-500">
+        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>
   );
 }

package/template/vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   server: { port: 8000 },
 });