create-lacspace-app 1.0.0 → 1.2.0

package/README.md

@@ -29,14 +29,24 @@ It asks for a project name and a template, scaffolds the project, installs depen
 | **business** | A professional company / agency site with services + CTA |
 | **ecommerce** | A modern storefront home with a featured product grid |
 | **saas** | A high-converting SaaS landing page with features + pricing |
+| **blog** | An editorial blog / magazine home with a featured post + grid |
+| **docs** | A documentation landing with quick-start + feature cards |
+| **dashboard** | An admin app shell with a sidebar, stat cards and activity |
+| **restaurant** | A warm restaurant / cafe site with a menu and reservations |
 
 Every template is a real Next.js 15 App Router + Tailwind v4 project — dark, modern, responsive, with a gradient accent you can theme.
 
-## Batteries already wired
+## A complete, polished project — not a blank page
 
-- **`lib/site.ts`** — one [`@lacspace/seo`](https://www.npmjs.com/package/@lacspace/seo) `defineSite()` config drives your `<title>`, canonical, Open Graph, Twitter card and JSON-LD
-- **`next.config.mjs`** — hardened security headers via [`@lacspace/headers`](https://www.npmjs.com/package/@lacspace/headers)
-- **`app/robots.txt` + `app/sitemap.xml`** — generated from your site config with [`@lacspace/robots`](https://www.npmjs.com/package/@lacspace/robots) & [`@lacspace/sitemap`](https://www.npmjs.com/package/@lacspace/sitemap)
+Every generated app arrives finished, with the boring-but-essential things done:
+
+- 🎨 **Beautiful home page** — Tailwind v4, the Inter font, dark theme + a gradient accent
+- 🔎 **SEO** — one [`@lacspace/seo`](https://www.npmjs.com/package/@lacspace/seo) `defineSite()` config drives your `<title>`, canonical, Open Graph, Twitter card and JSON-LD
+- ✨ **Dynamic OG images** — every page auto-generates a social-share card at `/og` (no design tool)
+- 🛡️ **Security headers** — HSTS, CSP, X-Frame-Options and more via [`@lacspace/headers`](https://www.npmjs.com/package/@lacspace/headers)
+- 🗺️ **robots.txt + sitemap.xml** — generated from your config with [`@lacspace/robots`](https://www.npmjs.com/package/@lacspace/robots) & [`@lacspace/sitemap`](https://www.npmjs.com/package/@lacspace/sitemap)
+- 🧩 **A styled 404, a PWA manifest, and `.env.example`** — the finishing touches most starters skip
+- 🎁 **A `WELCOME.md`** that walks you through everything and shows the bonus packages you can drop in
 
 Edit `lib/site.ts` and `app/page.tsx` and you're off.
 

package/dist/index.js

@@ -20,7 +20,11 @@ var TEMPLATES = [
   { key: "personal", label: "Personal portfolio", description: "A sleek personal / developer portfolio with projects and contact.", accent: ["#6366f1", "#a855f7"], siteName: "Your Name", siteDescription: "Developer, designer & maker. Selected work and writing." },
   { key: "business", label: "Business site", description: "A professional company / agency site with services and a CTA.", accent: ["#2563eb", "#06b6d4"], siteName: "Acme Studio", siteDescription: "We design and build digital products that grow businesses." },
   { key: "ecommerce", label: "E-commerce storefront", description: "A modern product storefront home with a featured grid.", accent: ["#0d9488", "#84cc16"], siteName: "Acme Store", siteDescription: "Beautiful things, thoughtfully made. Free shipping worldwide." },
-  { key: "saas", label: "SaaS landing", description: "A high-converting SaaS landing page with features and pricing.", accent: ["#7c3aed", "#ec4899"], siteName: "Acme Cloud", siteDescription: "The all-in-one platform your team will love. Ship faster." }
+  { key: "saas", label: "SaaS landing", description: "A high-converting SaaS landing page with features and pricing.", accent: ["#7c3aed", "#ec4899"], siteName: "Acme Cloud", siteDescription: "The all-in-one platform your team will love. Ship faster." },
+  { key: "blog", label: "Blog / magazine", description: "A clean editorial blog home with a featured post and a grid.", accent: ["#f97316", "#ef4444"], siteName: "The Journal", siteDescription: "Essays, notes and stories on building things that matter." },
+  { key: "docs", label: "Documentation", description: "A docs landing with quick-start and feature cards.", accent: ["#0ea5e9", "#6366f1"], siteName: "Acme Docs", siteDescription: "Everything you need to build with Acme \u2014 guides, API and examples." },
+  { key: "dashboard", label: "Admin dashboard", description: "An app dashboard shell with stat cards and a table.", accent: ["#10b981", "#14b8a6"], siteName: "Acme Admin", siteDescription: "Your control center \u2014 metrics, activity and management in one place." },
+  { key: "restaurant", label: "Restaurant / cafe", description: "A warm restaurant home with menu highlights and reservations.", accent: ["#e11d48", "#f59e0b"], siteName: "Olive & Ember", siteDescription: "Seasonal plates, natural wine and a warm room. Book a table." }
 ];
 var pkgJson = (ctx) => JSON.stringify({
   name: ctx.name,
@@ -96,38 +100,59 @@ var globalsCss = (ctx) => `@import "tailwindcss";
 :root {
   --accent-from: ${ctx.template.accent[0]};
   --accent-to: ${ctx.template.accent[1]};
+  --bg: #0a0a0f;
+  --fg: #e5e7eb;
 }
 
+* { border-color: rgb(255 255 255 / 0.08); }
 html { scroll-behavior: smooth; }
-body { background: #0a0a0f; color: #e5e7eb; -webkit-font-smoothing: antialiased; }
+body {
+  background: var(--bg);
+  color: var(--fg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+::selection { background: var(--accent-to); color: #0a0a0f; }
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.12); border-radius: 8px; }
+:focus-visible { outline: 2px solid var(--accent-to); outline-offset: 2px; border-radius: 4px; }
 
 .gradient-text {
   background: linear-gradient(120deg, var(--accent-from), var(--accent-to));
   -webkit-background-clip: text; background-clip: text; color: transparent;
 }
 .gradient-bg { background: linear-gradient(120deg, var(--accent-from), var(--accent-to)); }
+
+/* soft entrance for content */
+@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
+main > section, main > * { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
+@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; scroll-behavior: auto; } }
 `;
 var siteTs = (ctx) => `import { defineSite } from "@lacspace/seo";
 
 /** Your site's SEO configuration \u2014 set once, used everywhere. */
 export const site = defineSite({
   name: ${JSON.stringify(ctx.template.siteName)},
-  url: "https://example.com",
+  url: process.env.NEXT_PUBLIC_SITE_URL ?? "https://example.com",
   description: ${JSON.stringify(ctx.template.siteDescription)},
   // twitter: "yourhandle",
-  // ogImage: "/og",
+  ogImage: "/og", // \u2728 auto social-share images \u2014 see app/og/route.tsx
 });
 `;
 var layout = (ctx) => `import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 import { site } from "@/lib/site";
 import "./globals.css";
 
+const inter = Inter({ subsets: ["latin"], display: "swap" });
+
 export const metadata: Metadata = site.meta({ title: ${JSON.stringify(ctx.template.siteName)} });
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body>
+    <html lang="en" className={inter.className}>
+      <body className="antialiased">
         {children}
         <script
           type="application/ld+json"
@@ -138,6 +163,113 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   );
 }
 `;
+var ogRoute = (ctx) => `import { ImageResponse } from "next/og";
+import { site } from "@/lib/site";
+
+// \u2728 Dynamic Open Graph images \u2014 every page gets a gorgeous social card,
+// generated on the fly at /og?title=Your+Page+Title. No design tool needed.
+export const runtime = "edge";
+
+export function GET(req: Request) {
+  const title = new URL(req.url).searchParams.get("title") ?? site.config.name;
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%", height: "100%", display: "flex", flexDirection: "column",
+          justifyContent: "center", padding: "90px",
+          background: "linear-gradient(135deg, ${ctx.template.accent[0]}, ${ctx.template.accent[1]})",
+          color: "white", fontFamily: "sans-serif",
+        }}
+      >
+        <div style={{ fontSize: 72, fontWeight: 800, lineHeight: 1.05, letterSpacing: "-0.02em" }}>{title}</div>
+        <div style={{ marginTop: 28, fontSize: 34, opacity: 0.85 }}>{site.config.name}</div>
+      </div>
+    ),
+    { width: 1200, height: 630 },
+  );
+}
+`;
+var notFound = () => `import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center gap-6 px-6 text-center">
+      <div className="text-8xl font-black gradient-text">404</div>
+      <p className="text-lg text-white/60">This page wandered off.</p>
+      <Link href="/" className="gradient-bg rounded-full px-6 py-3 font-semibold text-black">Back home</Link>
+    </main>
+  );
+}
+`;
+var manifestTs = (ctx) => `import type { MetadataRoute } from "next";
+import { site } from "@/lib/site";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: site.config.name,
+    short_name: site.config.name,
+    description: site.config.description,
+    start_url: "/",
+    display: "standalone",
+    background_color: "#0a0a0f",
+    theme_color: "${ctx.template.accent[0]}",
+  };
+}
+`;
+var envExample = () => `# Your production URL \u2014 powers canonical URLs, sitemap, robots and OG images.
+NEXT_PUBLIC_SITE_URL=https://example.com
+`;
+var welcomeMd = (ctx) => `# \u{1F381} Welcome to ${ctx.name}
+
+You didn't get a blank page \u2014 you got a running, good-looking **${ctx.template.label}** with the
+boring-but-essential stuff already done. Here's what's in the box.
+
+## \u2705 Already set up for you
+
+- **Beautiful home page** \u2014 styled with Tailwind v4, Inter font, dark theme + gradient accent.
+- **SEO** \u2014 metadata, Open Graph, Twitter cards & JSON-LD, all from one file (\`lib/site.ts\`).
+- **\u2728 Dynamic OG images** \u2014 every page auto-generates a social-share card at \`/og\`. Share a link and see.
+- **Security headers** \u2014 HSTS, CSP, X-Frame-Options and more, via \`next.config.mjs\`.
+- **robots.txt + sitemap.xml** \u2014 generated from your site config. No hand-editing.
+- **A styled 404** and a **PWA manifest** \u2014 the finishing touches most starters skip.
+
+## \u{1F680} Run it
+
+\`\`\`bash
+npm run dev      # http://localhost:3000
+\`\`\`
+
+## \u{1F3A8} Make it yours (start here)
+
+1. Edit **\`lib/site.ts\`** \u2014 your name, URL and description flow into SEO, sitemap, robots and OG.
+2. Edit **\`app/page.tsx\`** \u2014 your home page.
+3. Set **\`NEXT_PUBLIC_SITE_URL\`** in \`.env\` before deploying (copy \`.env.example\`).
+
+## \u{1F389} Surprise: 49 more Lacspace packages, one install away
+
+Your app is wired for the whole ecosystem. Drop any of these in \u2014 all zero-dependency:
+
+\`\`\`bash
+npm i @lacspace/id          # uuidv7, nanoid, short ids
+npm i @lacspace/pdf         # invoices & receipts, no headless browser
+npm i @lacspace/signed-url  # magic-login & expiring download links
+npm i @lacspace/webhooks    # sign / verify / deliver webhooks
+npm i @lacspace/flags       # feature flags & A/B, no SaaS
+npm i @lacspace/humanize    # "1.5 KB", "3 hours ago", "1.2M"
+\`\`\`
+
+Browse them all \u2192 **https://lacspace.com/packages**
+
+## \u2601\uFE0F Deploy
+
+Push to GitHub and import on **[Vercel](https://vercel.com/new)** \u2014 it just works. Remember to set
+\`NEXT_PUBLIC_SITE_URL\` to your real domain.
+
+---
+
+Built with \u2764\uFE0F using [Lacspace](https://lacspace.com/packages). This app is yours under the Lacspace Free Licence.
+`;
 var robotsTs = () => `import { robotsForSite } from "@lacspace/robots";
 import { site } from "@/lib/site";
 
@@ -276,6 +408,131 @@ function homePage(ctx) {
       </section>
       ${FOOTER(n)}`);
   }
+  if (ctx.template.key === "blog") {
+    return shell(`${NAV(n, ["Latest", "Topics", "About"])}
+      <section className="mx-auto max-w-3xl px-6 py-24">
+        <p className="mb-3 text-sm font-semibold uppercase tracking-widest text-white/40">The Journal</p>
+        <h1 className="text-5xl font-black leading-tight sm:text-6xl gradient-text">${n}</h1>
+        <p className="mt-6 text-lg text-white/60">${ctx.template.siteDescription}</p>
+      </section>
+      <section id="latest" className="mx-auto max-w-5xl px-6 pb-8">
+        <a href="#" className="group block rounded-3xl border border-white/10 bg-white/[0.02] p-8 transition hover:border-white/20">
+          <div className="mb-6 h-56 rounded-2xl gradient-bg opacity-80" />
+          <span className="text-xs font-semibold uppercase tracking-wider text-white/40">Featured</span>
+          <h2 className="mt-2 text-3xl font-bold group-hover:opacity-90">The one thing every product needs before launch</h2>
+          <p className="mt-2 text-white/60">A short, punchy dek that pulls the reader into the piece and makes them want more.</p>
+        </a>
+      </section>
+      <section className="mx-auto max-w-5xl px-6 py-12">
+        <div className="grid gap-8 sm:grid-cols-2">
+          {[1, 2, 3, 4].map((i) => (
+            <a key={i} href="#" className="group">
+              <div className="mb-4 h-40 rounded-xl gradient-bg opacity-70" />
+              <span className="text-xs uppercase tracking-wider text-white/40">Essay</span>
+              <h3 className="mt-1 text-xl font-semibold group-hover:opacity-90">A thoughtful headline for post {i}</h3>
+              <p className="mt-1 text-sm text-white/50">Two lines of supporting copy to set the scene for the reader.</p>
+            </a>
+          ))}
+        </div>
+      </section>
+      ${FOOTER(n)}`);
+  }
+  if (ctx.template.key === "docs") {
+    return shell(`${NAV(n, ["Guides", "API", "Examples"])}
+      <section className="mx-auto max-w-4xl px-6 py-28 text-center">
+        <h1 className="text-5xl font-black leading-tight sm:text-6xl"><span className="gradient-text">${n}</span></h1>
+        <p className="mx-auto mt-6 max-w-2xl text-lg text-white/60">${ctx.template.siteDescription}</p>
+        <div className="mt-8 inline-flex items-center gap-3 rounded-lg border border-white/10 bg-black/40 px-4 py-3 font-mono text-sm text-white/80">
+          <span className="text-white/40">$</span> npm install @acme/sdk
+        </div>
+      </section>
+      <section id="guides" className="mx-auto max-w-6xl px-6 py-12">
+        <div className="grid gap-6 md:grid-cols-3">
+          {[
+            { t: "Quick start", d: "Go from zero to your first request in five minutes." },
+            { t: "Guides", d: "Task-focused walkthroughs for the common paths." },
+            { t: "API reference", d: "Every endpoint, typed, with copy-paste examples." },
+          ].map((c) => (
+            <a key={c.t} href="#" className="rounded-2xl border border-white/10 bg-white/[0.02] p-8 transition hover:border-white/20">
+              <h3 className="text-xl font-bold gradient-text">{c.t}</h3>
+              <p className="mt-2 text-white/60">{c.d}</p>
+            </a>
+          ))}
+        </div>
+      </section>
+      ${FOOTER(n)}`);
+  }
+  if (ctx.template.key === "dashboard") {
+    return shell(`<div className="flex min-h-screen">
+        <aside className="hidden w-56 shrink-0 border-r border-white/10 p-6 md:block">
+          <div className="mb-8 text-lg font-black gradient-text">${n}</div>
+          <nav className="space-y-1 text-sm text-white/60">
+            {["Overview", "Analytics", "Customers", "Settings"].map((l) => (
+              <a key={l} href="#" className="block rounded-lg px-3 py-2 hover:bg-white/5 hover:text-white">{l}</a>
+            ))}
+          </nav>
+        </aside>
+        <main className="flex-1 p-6 md:p-10">
+          <h1 className="text-2xl font-bold">Overview</h1>
+          <p className="mt-1 text-white/50">${ctx.template.siteDescription}</p>
+          <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {[
+              { l: "Revenue", v: "$48.2k", c: "+12%" }, { l: "Users", v: "12,480", c: "+3.4%" },
+              { l: "Orders", v: "1,204", c: "+8%" }, { l: "Churn", v: "1.2%", c: "-0.3%" },
+            ].map((s) => (
+              <div key={s.l} className="rounded-2xl border border-white/10 bg-white/[0.02] p-5">
+                <div className="text-sm text-white/50">{s.l}</div>
+                <div className="mt-1 text-2xl font-bold">{s.v}</div>
+                <div className="mt-1 text-xs text-emerald-400">{s.c}</div>
+              </div>
+            ))}
+          </div>
+          <div className="mt-6 rounded-2xl border border-white/10 bg-white/[0.02] p-6">
+            <div className="mb-4 font-semibold">Recent activity</div>
+            <div className="space-y-3">
+              {[1, 2, 3, 4].map((i) => (
+                <div key={i} className="flex items-center justify-between border-b border-white/5 pb-3 text-sm">
+                  <span className="text-white/70">Event #{i}</span>
+                  <span className="text-white/40">just now</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </main>
+      </div>`);
+  }
+  if (ctx.template.key === "restaurant") {
+    return shell(`${NAV(n, ["Menu", "Story", "Reserve"])}
+      <section className="mx-auto max-w-4xl px-6 py-28 text-center">
+        <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-white/40">Est. 2026</p>
+        <h1 className="text-5xl font-black leading-tight sm:text-7xl gradient-text">${n}</h1>
+        <p className="mx-auto mt-6 max-w-xl text-lg text-white/60">${ctx.template.siteDescription}</p>
+        <a href="#reserve" className="mt-10 inline-block gradient-bg rounded-full px-8 py-3 font-semibold text-black">Reserve a table</a>
+      </section>
+      <section id="menu" className="mx-auto max-w-4xl px-6 py-16">
+        <h2 className="mb-10 text-center text-3xl font-bold">Tonight's plates</h2>
+        <div className="grid gap-6 sm:grid-cols-2">
+          {[
+            { n: "Charred leeks", p: "$14" }, { n: "Handmade tagliatelle", p: "$22" },
+            { n: "Wood-fired trout", p: "$28" }, { n: "Olive oil cake", p: "$11" },
+          ].map((d) => (
+            <div key={d.n} className="flex items-baseline justify-between gap-4 border-b border-white/10 pb-4">
+              <div>
+                <h3 className="text-lg font-semibold">{d.n}</h3>
+                <p className="text-sm text-white/50">A short, mouth-watering description of the dish.</p>
+              </div>
+              <span className="shrink-0 gradient-text font-bold">{d.p}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+      <section id="reserve" className="mx-auto max-w-2xl px-6 py-24 text-center">
+        <h2 className="text-3xl font-bold">Join us</h2>
+        <p className="mt-3 text-white/60">Open Wed\u2013Sun, 5pm till late. Walk-ins welcome; bookings recommended.</p>
+        <a href="tel:+10000000000" className="mt-8 inline-block rounded-full border border-white/20 px-8 py-3 font-semibold hover:bg-white/5">Call to book</a>
+      </section>
+      ${FOOTER(n)}`);
+  }
   return shell(`${NAV(n, ["Features", "Pricing", "Sign in"])}
       <section className="mx-auto max-w-4xl px-6 py-28 text-center">
         <p className="mb-4 inline-block rounded-full border border-white/15 px-4 py-1 text-xs font-semibold text-white/60">New \xB7 v1.0</p>
@@ -321,8 +578,13 @@ function buildFiles(ctx) {
     "app/layout.tsx": layout(ctx),
     "app/globals.css": globalsCss(ctx),
     "app/page.tsx": homePage(ctx),
+    "app/not-found.tsx": notFound(),
+    "app/og/route.tsx": ogRoute(ctx),
+    "app/manifest.ts": manifestTs(ctx),
     "app/robots.txt/route.ts": robotsTs(),
-    "app/sitemap.xml/route.ts": sitemapTs()
+    "app/sitemap.xml/route.ts": sitemapTs(),
+    ".env.example": envExample(),
+    "WELCOME.md": welcomeMd(ctx)
   };
 }
 function parseArgs(list) {

package/package.json

@@ -1,17 +1,51 @@
 {
   "name": "create-lacspace-app",
-  "version": "1.0.0",
-  "description": "Scaffold a beautiful, production-ready Next.js app from a Lacspace template — personal portfolio, business site, e-commerce or SaaS landing — pre-wired with SEO metadata + JSON-LD, security headers, sitemap and robots. Like create-next-app, but you start gorgeous.",
+  "version": "1.2.0",
+  "description": "Scaffold a beautiful, production-ready Next.js app from a Lacspace template — portfolio, business, e-commerce, SaaS, blog, docs, dashboard or restaurant — pre-wired with SEO, security headers, sitemap and robots. Like create-next-app, but you start gorgeous.",
   "type": "module",
-  "bin": { "create-lacspace-app": "./dist/index.js" },
-  "files": ["dist"],
-  "scripts": { "build": "tsup", "prepublishOnly": "npm run build" },
-  "keywords": ["create-lacspace-app", "nextjs", "next-app", "starter", "template", "scaffold", "boilerplate", "portfolio-template", "ecommerce-template", "saas-template", "cli", "create-next-app-alternative", "typescript"],
+  "bin": {
+    "create-lacspace-app": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "create-lacspace-app",
+    "nextjs",
+    "next-app",
+    "starter",
+    "template",
+    "scaffold",
+    "boilerplate",
+    "portfolio-template",
+    "ecommerce-template",
+    "saas-template",
+    "blog-template",
+    "dashboard-template",
+    "docs-template",
+    "cli",
+    "create-next-app-alternative",
+    "typescript"
+  ],
   "author": "Lacspace <contact@lacspace.com>",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://lacspace.com/packages",
-  "repository": { "type": "git", "url": "git+https://github.com/lacspace/npm-packages.git", "directory": "create-lacspace-app" },
-  "bugs": { "url": "https://github.com/lacspace/npm-packages/issues" },
-  "engines": { "node": ">=18" },
-  "publishConfig": { "access": "public" }
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lacspace/npm-packages.git",
+    "directory": "create-lacspace-app"
+  },
+  "bugs": {
+    "url": "https://github.com/lacspace/npm-packages/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }