@epicabdou/create-linkrjs-app 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +7 -4
  2. package/package.json +1 -1
  3. package/template/index.html +3 -0
  4. package/template/package.json +1 -24
  5. package/template/src/index.css +3 -0
  6. package/template/src/main.tsx +1 -0
  7. package/template/src/pages/index.tsx +8 -3
  8. package/template/vite.config.ts +2 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # create-linkrjs-app
2
2
 
3
- Scaffold a new **linkr.js** app (Vite + React + React Router + file-based routing).
3
+ Scaffold a new **linkr.js** app (Vite + React + React Router + file-based routing) with **Tailwind v4** and the **linkr design system**.
4
4
 
5
5
  ## Usage
6
6
 
@@ -18,16 +18,19 @@ This creates a folder `my-app` with:
18
18
  - Vite + React + TypeScript
19
19
  - React Router v7
20
20
  - **@epicabdou/linkr** for file-based routes from `src/pages/`
21
+ - **Tailwind CSS v4** with **@tailwindcss/vite**
22
+ - **linkr-design-system** (design tokens + base styles via `@theme` and base layer)
21
23
  - `index.tsx` (home) and `404.tsx` (not found)
22
24
 
23
25
  Dev server runs at http://localhost:8000.
24
26
 
25
27
  ## What gets created
26
28
 
27
- - `package.json` — name set to your project name
28
- - `vite.config.ts` — React plugin, port 8000
29
+ - `package.json` — name set to your project name (includes linkr-design-system, tailwindcss, @tailwindcss/vite)
30
+ - `vite.config.ts` — React + Tailwind v4 plugin, port 8000
31
+ - `src/index.css` — Tailwind + linkr-design-system theme and base imports
29
32
  - `src/main.tsx` — router using `createRoutes` + `import.meta.glob("./pages/**/*.tsx")`
30
- - `src/pages/index.tsx` — home page
33
+ - `src/pages/index.tsx` — home page (sample design-system classes)
31
34
  - `src/pages/404.tsx` — 404 page
32
35
 
33
36
  Add more routes by adding files under `src/pages/` (e.g. `about.tsx` → `/about`).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epicabdou/create-linkrjs-app",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "Scaffold a new linkr.js app (Vite + React + React Router + file-based routing)",
5
5
  "type": "module",
6
6
  "bin": {
package/template/index.html CHANGED
@@ -4,6 +4,9 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>linkr.js App</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
+ <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" />
7
10
  </head>
8
11
  <body>
9
12
  <div id="root"></div>
package/template/package.json CHANGED
@@ -1,24 +1 @@
1
- {
2
- "name": "my-linkrjs-app",
3
- "private": true,
4
- "version": "0.0.1",
5
- "type": "module",
6
- "scripts": {
7
- "dev": "vite",
8
- "build": "tsc -b && vite build",
9
- "preview": "vite preview"
10
- },
11
- "dependencies": {
12
- "@epicabdou/linkr": "^1.0.0",
13
- "react": "^18.2.0",
14
- "react-dom": "^18.2.0",
15
- "react-router": "^7.0.0"
16
- },
17
- "devDependencies": {
18
- "@types/react": "^18.2.0",
19
- "@types/react-dom": "^18.2.0",
20
- "@vitejs/plugin-react": "^4.2.0",
21
- "typescript": "^5.3.0",
22
- "vite": "^5.0.0"
23
- }
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.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"}}
package/template/src/index.css ADDED
@@ -0,0 +1,3 @@
1
+ @import "tailwindcss";
2
+ @import "linkr-design-system/theme";
3
+ @import "linkr-design-system/base";
package/template/src/main.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import "./index.css";
1
2
  import { StrictMode } from "react";
2
3
  import { createRoot } from "react-dom/client";
3
4
  import { createBrowserRouter, RouterProvider } from "react-router";
package/template/src/pages/index.tsx CHANGED
@@ -1,8 +1,13 @@
1
1
  export default function Home() {
2
2
  return (
3
- <div>
4
- <h1>Welcome to linkr.js</h1>
5
- <p>Edit <code>src/pages/index.tsx</code> to get started.</p>
3
+ <div className="min-h-screen font-sans p-8">
4
+ <h1 className="text-3xl font-bold text-neutral-900">Welcome to linkr.js</h1>
5
+ <p className="mt-2 text-neutral-600">
6
+ 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.
7
+ </p>
8
+ <p className="mt-4 text-sm text-neutral-500">
9
+ 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>.
10
+ </p>
6
11
  </div>
7
12
  );
8
13
  }
package/template/vite.config.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import { defineConfig } from "vite";
2
2
  import react from "@vitejs/plugin-react";
3
+ import tailwindcss from "@tailwindcss/vite";
3
4
 
4
5
  export default defineConfig({
5
- plugins: [react()],
6
+ plugins: [react(), tailwindcss()],
6
7
  server: { port: 8000 },
7
8
  });