create-lacspace-app 1.1.0 → 1.3.0

package/README.md

@@ -36,11 +36,17 @@ It asks for a project name and a template, scaffolds the project, installs depen
 
 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

@@ -100,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"
@@ -142,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";
 
@@ -438,6 +566,67 @@ function homePage(ctx) {
       </section>
       ${FOOTER(n)}`);
 }
+var glyph = (ctx) => (ctx.template.siteName.trim()[0] ?? "A").toUpperCase();
+var iconTsx = (ctx) => `import { ImageResponse } from "next/og";
+
+// \u2728 Auto-generated favicon \u2014 a branded icon from your accent, no design file.
+export const size = { width: 64, height: 64 };
+export const contentType = "image/png";
+
+export default function Icon() {
+  return new ImageResponse(
+    (
+      <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "linear-gradient(135deg, ${ctx.template.accent[0]}, ${ctx.template.accent[1]})", color: "white", fontSize: 40, fontWeight: 800, fontFamily: "sans-serif", borderRadius: 14 }}>
+        ${glyph(ctx)}
+      </div>
+    ),
+    { ...size },
+  );
+}
+`;
+var appleIconTsx = (ctx) => `import { ImageResponse } from "next/og";
+
+// \u2728 Auto-generated Apple touch icon.
+export const size = { width: 180, height: 180 };
+export const contentType = "image/png";
+
+export default function AppleIcon() {
+  return new ImageResponse(
+    (
+      <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "linear-gradient(135deg, ${ctx.template.accent[0]}, ${ctx.template.accent[1]})", color: "white", fontSize: 104, fontWeight: 800, fontFamily: "sans-serif" }}>
+        ${glyph(ctx)}
+      </div>
+    ),
+    { ...size },
+  );
+}
+`;
+var aboutPage = (ctx) => `import type { Metadata } from "next";
+import Link from "next/link";
+import { site } from "@/lib/site";
+
+// \u2728 Per-page SEO, auto-generated: title template, canonical, Open Graph,
+// Twitter card and its OWN dynamic OG image \u2014 all from one line.
+export const metadata: Metadata = site.meta({
+  title: "About",
+  path: "/about",
+  description: "Learn more about ${ctx.template.siteName}.",
+});
+
+export default function AboutPage() {
+  return (
+    <main className="mx-auto max-w-3xl px-6 py-28">
+      <Link href="/" className="text-sm text-white/50 hover:text-white">\u2190 Back home</Link>
+      <h1 className="mt-6 text-4xl font-black sm:text-5xl gradient-text">About</h1>
+      <p className="mt-6 text-lg leading-relaxed text-white/60">
+        This page already has its own SEO \u2014 a unique title, canonical URL, Open Graph tags and a
+        generated social image \u2014 from a single <code>site.meta()</code> call. Duplicate this file for
+        any new route and it just works.
+      </p>
+    </main>
+  );
+}
+`;
 function buildFiles(ctx) {
   return {
     "package.json": pkgJson(ctx),
@@ -450,8 +639,16 @@ function buildFiles(ctx) {
     "app/layout.tsx": layout(ctx),
     "app/globals.css": globalsCss(ctx),
     "app/page.tsx": homePage(ctx),
+    "app/about/page.tsx": aboutPage(ctx),
+    "app/not-found.tsx": notFound(),
+    "app/og/route.tsx": ogRoute(ctx),
+    "app/icon.tsx": iconTsx(ctx),
+    "app/apple-icon.tsx": appleIconTsx(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,6 +1,6 @@
 {
   "name": "create-lacspace-app",
-  "version": "1.1.0",
+  "version": "1.3.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": {