npm - create-tnt-stack - Versions diffs - 0.4.3 → 0.4.4-beta.79d5e73 - Mend

create-tnt-stack 0.4.3 → 0.4.4-beta.79d5e73

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

package/README.md +4 -0
package/dist/index.js +1 -1
package/package.json +86 -86
package/template/packages/src/app/layout/base.tsx +2 -2
package/template/packages/src/app/page/base.tsx +79 -87
package/template/packages/src/app/page/with-payload.tsx +98 -20
package/template/packages/src/app/globals/with-payload.css +0 -166
package/template/packages/src/app/layout/with-payload.tsx +0 -20

package/README.md CHANGED Viewed

@@ -19,6 +19,7 @@ Simply run `npm create tnt-stack@latest` to get started!
 [![PRs-Welcome][contribute-image]][contribute-url]
 [![NPM version][npm-image]][npm-url]
+[![NPM beta version][npm-beta-image]][npm-beta-url]
 [![Downloads][downloads-image]][npm-url]<br />
 [![Release][release-image]][release-url]
 [![Prepelease][prerelease-image]][prerelease-url]
@@ -132,6 +133,9 @@ so you understand the branching strategy and local development environment.
 [npm-image]:
   https://img.shields.io/npm/v/create-tnt-stack?color=0b7285&logoColor=0b7285
 [npm-url]: https://www.npmjs.com/package/create-tnt-stack
+[npm-beta-image]:
+  https://img.shields.io/npm/v/create-tnt-stack/beta?color=orange&logoColor=orange
+[npm-beta-url]: https://www.npmjs.com/package/create-tnt-stack
 [license-image]:
   https://img.shields.io/github/license/SlickYeet/create-tnt-stack?color=red
 [license-url]: https://github.com/SlickYeet/create-tnt-stack/blob/main/LICENSE

package/dist/index.js CHANGED Viewed

@@ -51,7 +51,7 @@ Using: ${A.cyan.bold(s)}
 `).start();if(T.existsSync(n))if(T.readdirSync(n).length===0)e!=="."&&a.info(`${A.cyan.bold(e)} exists but is empty, continuing...
 `);else{a.stopAndPersist();let l=await it({message:`${A.redBright.bold("Warning:")} ${A.cyan.bold(e)} already exists and isn't empty. How would you like to proceed?`,choices:[{value:"abort",name:"Abort installation (recommended)"},{value:"clear",name:"Clear the directory and continue installation"},{value:"overwrite",name:"Continue installation and overwrite conflicting files"}],default:"abort"});l==="abort"&&(a.fail("Aborting installation..."),process.exit(1)),await st({message:`Are you sure you want to ${l==="clear"?"clear the directory":"overwrite conflicting files"}`,default:!1})||(a.fail("Aborting installation..."),process.exit(1)),l==="clear"&&(a.info(`Emptying ${A.cyan.bold(e)} and creating tnt app...
 `),T.emptyDirSync(n))}a.start(),T.copySync(t,n),T.renameSync(W.join(n,"_gitignore"),W.join(n,".gitignore"));let i=e==="."?"App":A.cyan.bold(e);a.succeed(`${i} ${A.green.bold("scaffolded successfully!")}
-`)}import v from"path";import B from"fs-extra";function Pe({packages:e,projectDir:n}){let s=v.join(p,"template/packages/src/app/layout"),o=e.payload.inUse,t="base.tsx";o&&(t="with-payload.tsx");let a=v.join(s,t),i=v.join(n,`src/app/${o?"(frontend)":""}/layout.tsx`);B.copySync(a,i)}function xe({packages:e,projectDir:n}){let s=v.join(p,"template/packages/src/app/page"),o=e.payload.inUse,t="base.tsx";o&&(t="with-payload.tsx");let a=v.join(s,t),i=v.join(n,`src/app/${o?"(frontend)":""}/page.tsx`);B.copySync(a,i)}function _e({packages:e,projectDir:n}){let s=v.join(p,"template/packages/src/app/globals"),o=e.payload.inUse,t="base.css";o&&(t="with-payload.css");let a=v.join(s,t),i=v.join(n,`src/app/${o?"(frontend)":""}/globals.css`);B.copySync(a,i)}async function Se({projectName:e,scopedAppName:n,packages:s,noInstall:o,databaseProvider:t}){let a=h(),i=lt.resolve(process.cwd(),e);return await we({projectName:e,projectDir:i,pkgManager:a,scopedAppName:n,noInstall:o,databaseProvider:t}),ke({projectName:e,scopedAppName:n,projectDir:i,pkgManager:a,packages:s,noInstall:o,databaseProvider:t}),Pe({packages:s,projectDir:i}),xe({packages:s,projectDir:i}),_e({packages:s,projectDir:i}),i}import{execSync as z}from"child_process";import V from"path";import{confirm as Ae}from"@inquirer/prompts";import j from"chalk";import{execa as D}from"execa";import Ie from"fs-extra";import pt from"ora";function ct(e){try{return z("git --version",{cwd:e}),!0}catch{return!1}}function K(e){return Ie.existsSync(V.join(e,".git"))}async function H(e){try{return await D("git",["rev-parse","--is-inside-work-tree"],{cwd:e,stdout:"ignore"}),!0}catch{return!1}}function mt(){let n=z("git --version").toString().trim().split(" ")[2],s=n?.split(".")[0],o=n?.split(".")[1];return{major:Number(s),minor:Number(o)}}function dt(){return z("git config --global init.defaultBranch || echo main").toString().trim()}async function Ce(e){if(r.info("Initializing Git..."),!ct(e)){r.warn("Git is not installed. Skipping Git initialization.");return}let n=pt(`Creating a new git repo...
+`)}import v from"path";import B from"fs-extra";function Pe({packages:e,projectDir:n}){let s=v.join(p,"template/packages/src/app/layout"),o=e.payload.inUse,t="base.tsx";o&&(t="base.tsx");let a=v.join(s,t),i=v.join(n,`src/app/${o?"(frontend)":""}/layout.tsx`);B.copySync(a,i)}function xe({packages:e,projectDir:n}){let s=v.join(p,"template/packages/src/app/page"),o=e.payload.inUse,t="base.tsx";o&&(t="with-payload.tsx");let a=v.join(s,t),i=v.join(n,`src/app/${o?"(frontend)":""}/page.tsx`);B.copySync(a,i)}function _e({packages:e,projectDir:n}){let s=v.join(p,"template/packages/src/app/globals"),o=e.payload.inUse,t="base.css";o&&(t="base.css");let a=v.join(s,t),i=v.join(n,`src/app/${o?"(frontend)":""}/globals.css`);B.copySync(a,i)}async function Se({projectName:e,scopedAppName:n,packages:s,noInstall:o,databaseProvider:t}){let a=h(),i=lt.resolve(process.cwd(),e);return await we({projectName:e,projectDir:i,pkgManager:a,scopedAppName:n,noInstall:o,databaseProvider:t}),ke({projectName:e,scopedAppName:n,projectDir:i,pkgManager:a,packages:s,noInstall:o,databaseProvider:t}),Pe({packages:s,projectDir:i}),xe({packages:s,projectDir:i}),_e({packages:s,projectDir:i}),i}import{execSync as z}from"child_process";import V from"path";import{confirm as Ae}from"@inquirer/prompts";import j from"chalk";import{execa as D}from"execa";import Ie from"fs-extra";import pt from"ora";function ct(e){try{return z("git --version",{cwd:e}),!0}catch{return!1}}function K(e){return Ie.existsSync(V.join(e,".git"))}async function H(e){try{return await D("git",["rev-parse","--is-inside-work-tree"],{cwd:e,stdout:"ignore"}),!0}catch{return!1}}function mt(){let n=z("git --version").toString().trim().split(" ")[2],s=n?.split(".")[0],o=n?.split(".")[1];return{major:Number(s),minor:Number(o)}}function dt(){return z("git config --global init.defaultBranch || echo main").toString().trim()}async function Ce(e){if(r.info("Initializing Git..."),!ct(e)){r.warn("Git is not installed. Skipping Git initialization.");return}let n=pt(`Creating a new git repo...
 `).start(),s=K(e),o=await H(e),t=V.parse(e).name;if(o&&s){if(n.stop(),!await Ae({message:`${j.redBright.bold("Warning:")} Git is already initialized in "${t}". Initializing a new git repository would delete the previous history. Would you like to continue anyways?`,default:!1})){n.info("Skipping Git initialization.");return}Ie.removeSync(V.join(e,".git"))}else if(o&&!s&&(n.stop(),!await Ae({message:`${j.redBright.bold("Warning:")} "${t}" is already in a git worktree. Would you still like to initialize a new git repository in this directory?`,default:!1}))){n.info("Skipping Git initialization.");return}try{let a=dt(),{major:i,minor:l}=mt();i<2||i==2&&l<28?(await D("git",["init"],{cwd:e}),await D("git",["symbolic-ref","HEAD",`refs/heads/${a}`],{cwd:e})):await D("git",["init",`--initial-branch=${a}`],{cwd:e}),await D("git",["add","."],{cwd:e}),n.succeed(`${j.green("Successfully initialized and staged")} ${j.green.bold("git")}
 `)}catch{n.fail(`${j.bold.red("Failed:")} could not initialize git. Update git to the latest version!
 `)}}import ft from"chalk";import{execa as Oe}from"execa";import Te from"ora";var Y=async(e,n,s)=>{let{onDataHandle:o,args:t=["install"],stdout:a="pipe"}=s,i=Te(`Running ${n} install...`).start(),l=Oe(n,t,{cwd:e,stdout:a});return await new Promise((d,g)=>{o&&l.stdout?.on("data",o(i)),l.on("error",u=>g(u)),l.on("close",()=>d())}),i},gt=async(e,n)=>{switch(e){case"npm":return await Oe(e,["install"],{cwd:n,stderr:"inherit"}),null;case"pnpm":return Y(n,e,{onDataHandle:s=>o=>{let t=o.toString();t.includes("Progress")&&(s.text=t.includes("|")?t.split(" | ")[1]??"":t)}});case"yarn":return Y(n,e,{onDataHandle:s=>o=>{s.text=o.toString()}});case"bun":return Y(n,e,{stdout:"ignore"})}},je=async({projectDir:e})=>{r.info("Installing dependencies...");let n=h();(await gt(n,e)??Te()).succeed(ft.green(`Successfully installed dependencies!

package/package.json CHANGED Viewed

@@ -1,88 +1,88 @@
 {
-  "name": "create-tnt-stack",
-  "version": "0.4.3",
-  "description": "Create web application with the TNT-Powered stack",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/slickyeet/create-tnt-stack",
-    "directory": "cli"
-  },
-  "keywords": [
-    "create-tnt-stack",
-    "tnt-stack",
-    "typescript",
-    "next.js",
-    "tailwind"
-  ],
-  "type": "module",
-  "exports": "./dist/index.js",
-  "bin": {
-    "create-tnt-stack": "./dist/index.js"
-  },
-  "files": [
-    "dist",
-    "template",
-    "README.md",
-    "LICENSE",
-    "package.json"
-  ],
-  "engines": {
-    "node": ">=18"
-  },
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "start": "node dist/index.js",
-    "format": "prettier '**/*.{cjs,mjs,ts,tsx,md,json}' --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --write",
-    "format:check": "prettier '**/*.{cjs,mjs,ts,tsx,md,json}' --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --check",
-    "typecheck": "tsc",
-    "clean": "rm -rf dist .turbo node_modules",
-    "release": "changeset version",
-    "pub:beta": "bun run build && npm publish --tag beta",
-    "pub:release": "bun run build && npm publish"
-  },
-  "dependencies": {
-    "@inquirer/prompts": "^7.4.0",
-    "chalk": "^5.4.1",
-    "commander": "^13.1.0",
-    "execa": "^9.5.2",
-    "fs-extra": "^11.3.0",
-    "gradient-string": "^3.0.0",
-    "ora": "^8.2.0",
-    "sort-package-json": "^3.0.0"
-  },
-  "devDependencies": {
-    "@auth/prisma-adapter": "^2.8.0",
-    "@eslint/eslintrc": "^3.3.1",
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
-    "@payloadcms/db-sqlite": "^3.33.0",
-    "@payloadcms/db-vercel-postgres": "^3.33.0",
-    "@payloadcms/next": "^3.33.0",
-    "@payloadcms/payload-cloud": "^3.33.0",
-    "@payloadcms/richtext-lexical": "^3.33.0",
-    "@prisma/client": "^6.5.0",
-    "@t3-oss/env-nextjs": "^0.12.0",
-    "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9.22.0",
-    "eslint-config-next": "^15.2.4",
-    "graphql": "^16.10.0",
-    "next": "^15.2.4",
-    "next-auth": "^4.24.11",
-    "payload": "^3.33.0",
-    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "prisma": "^6.5.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "sharp": "^0.34.1",
-    "tailwindcss": "^4.0.17",
-    "tsup": "^8.4.0",
-    "type-fest": "^4.37.0",
-    "typescript": "^5.8.2",
-    "zod": "^3.24.2"
-  }
+	"name": "create-tnt-stack",
+	"version": "0.4.4-beta.79d5e73",
+	"description": "Create web application with the TNT-Powered stack",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/slickyeet/create-tnt-stack",
+		"directory": "cli"
+	},
+	"keywords": [
+		"create-tnt-stack",
+		"tnt-stack",
+		"typescript",
+		"next.js",
+		"tailwind"
+	],
+	"type": "module",
+	"exports": "./dist/index.js",
+	"bin": {
+		"create-tnt-stack": "./dist/index.js"
+	},
+	"files": [
+		"dist",
+		"template",
+		"README.md",
+		"LICENSE",
+		"package.json"
+	],
+	"engines": {
+		"node": ">=18"
+	},
+	"scripts": {
+		"dev": "tsup --watch",
+		"build": "tsup",
+		"start": "node dist/index.js",
+		"format": "prettier '**/*.{cjs,mjs,ts,tsx,md,json}' --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --write",
+		"format:check": "prettier '**/*.{cjs,mjs,ts,tsx,md,json}' --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --check",
+		"typecheck": "tsc",
+		"clean": "rm -rf dist .turbo node_modules",
+		"release": "changeset version",
+		"pub:beta": "bun run build && npm publish --tag beta",
+		"pub:release": "bun run build && npm publish"
+	},
+	"dependencies": {
+		"@inquirer/prompts": "^7.4.0",
+		"chalk": "^5.4.1",
+		"commander": "^13.1.0",
+		"execa": "^9.5.2",
+		"fs-extra": "^11.3.0",
+		"gradient-string": "^3.0.0",
+		"ora": "^8.2.0",
+		"sort-package-json": "^3.0.0"
+	},
+	"devDependencies": {
+		"@auth/prisma-adapter": "^2.8.0",
+		"@eslint/eslintrc": "^3.3.1",
+		"@ianvs/prettier-plugin-sort-imports": "^4.4.1",
+		"@payloadcms/db-sqlite": "^3.33.0",
+		"@payloadcms/db-vercel-postgres": "^3.33.0",
+		"@payloadcms/next": "^3.33.0",
+		"@payloadcms/payload-cloud": "^3.33.0",
+		"@payloadcms/richtext-lexical": "^3.33.0",
+		"@prisma/client": "^6.5.0",
+		"@t3-oss/env-nextjs": "^0.12.0",
+		"@types/fs-extra": "^11.0.4",
+		"@types/node": "^22",
+		"@types/react": "^19",
+		"@types/react-dom": "^19",
+		"eslint": "^9.22.0",
+		"eslint-config-next": "^15.2.4",
+		"graphql": "^16.10.0",
+		"next": "^15.2.4",
+		"next-auth": "^4.24.11",
+		"payload": "^3.33.0",
+		"prettier": "^3.5.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"prisma": "^6.5.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"sharp": "^0.34.1",
+		"tailwindcss": "^4.0.17",
+		"tsup": "^8.4.0",
+		"type-fest": "^4.37.0",
+		"typescript": "^5.8.2",
+		"zod": "^3.24.2"
+	}
 }

package/template/packages/src/app/layout/base.tsx CHANGED Viewed

@@ -14,8 +14,8 @@ const geistMono = Geist_Mono({
 })
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Create TNT Stack",
+  description: "Generated by create tnt stack",
 }
 export default function RootLayout({

package/template/packages/src/app/page/base.tsx CHANGED Viewed

@@ -1,105 +1,97 @@
-import Link from "next/link"
+import { fileURLToPath } from "url"
 export default function HomePage() {
+  const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center px-4 text-center">
-      {/* Logo */}
-      <div className="mb-8">
-        <div className="relative flex h-24 w-24 items-center justify-center">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+      <div className="flex grow flex-col items-center justify-center">
+        {/* Logo */}
+        <picture className="relative">
           <div className="absolute inset-0 animate-pulse rounded-xl bg-gradient-to-r from-purple-500 to-cyan-500 opacity-20 blur-xl dark:from-purple-800 dark:to-cyan-800" />
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="80"
-            height="80"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="rounded-lg bg-gradient-to-r from-purple-500 to-cyan-500 dark:from-purple-800 dark:to-cyan-800"
-          >
-            <polyline points="4 17 10 11 4 5" />
-            <line x1="12" x2="20" y1="19" y2="19" />
-          </svg>
-        </div>
-      </div>
+          <source srcSet="https://github.com/SlickYeet/create-tnt-stack/blob/main/docs/public/logo.light.png?raw=true" />
+          <img
+            src="https://github.com/SlickYeet/create-tnt-stack/blob/main/docs/public/logo.light.png?raw=true"
+            alt="Logo"
+            width={65}
+            height={65}
+            className="block h-auto max-w-full"
+          />
+        </picture>
-      <div className="max-w-xl text-balance">
-        <h1 className="mb-8 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text pb-1.5 text-6xl font-bold tracking-tighter text-transparent md:text-7xl lg:text-8xl">
+        <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
           TNT-Powered Next.js App
         </h1>
-        <p className="mb-12 text-xl text-neutral-700 md:text-2xl dark:text-neutral-300">
+        <p className="mt-4 text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
           Build modern web applications with today&apos;s most popular tools
         </p>
-      </div>
-      <div className="mb-12 flex flex-col gap-10 sm:flex-row">
-        <Link
-          href="https://create.tntstack.org"
-          target="_blank"
-          referrerPolicy="no-referrer"
-          className="hover:text-primary relative flex items-center justify-center gap-2 text-lg font-medium"
-        >
-          Website
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="absolute top-0 -right-4 size-4 fill-none stroke-current stroke-2"
+        <div className="mt-12 flex items-center gap-3">
+          <a
+            href="https://create.tntstack.org"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
           >
-            <path d="M7 7h10v10" />
-            <path d="M7 17 17 7" />
-          </svg>
-        </Link>
-        <Link
-          href="https://create.tntstack.org/introduction"
-          target="_blank"
-          referrerPolicy="no-referrer"
-          className="hover:text-primary relative flex items-center justify-center gap-2 text-lg font-medium"
-        >
-          Docs
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="absolute top-0 -right-4 size-4 fill-none stroke-current stroke-2"
+            Website
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
+          </a>
+          <a
+            href="https://create.tntstack.org/introduction"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
           >
-            <path d="M7 7h10v10" />
-            <path d="M7 17 17 7" />
-          </svg>
-        </Link>
-        <Link
-          href="https://github.com/SlickYeet/create-tnt-stack"
-          target="_blank"
-          referrerPolicy="no-referrer"
-          className="hover:text-primary relative flex items-center justify-center gap-2 text-lg font-medium"
-        >
-          GitHub
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="absolute top-0 -right-4 size-4 fill-none stroke-current stroke-2"
+            Docs
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
+          </a>
+          <a
+            href="https://github.com/SlickYeet/create-tnt-stack"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
           >
-            <path d="M7 7h10v10" />
-            <path d="M7 17 17 7" />
-          </svg>
-        </Link>
+            GitHub
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
+          </a>
+        </div>
       </div>
-      <div className="mt-16 text-sm text-neutral-600 dark:text-neutral-400">
-        <p>
-          Get started by editing{" "}
-          <code className="rounded-md bg-neutral-200 px-2 py-1 dark:bg-neutral-800">
-            src/app/page.tsx
-          </code>
-        </p>
+      <div className="flex flex-col items-center gap-1 text-sm text-neutral-600 lg:flex-row lg:gap-2 dark:text-neutral-400">
+        <p className="m-0">Get started by editing </p>
+        <a
+          href={fileURL}
+          className="rounded-md bg-neutral-200 px-2 py-1 dark:bg-neutral-800"
+        >
+          <code>src/app/page.tsx</code>
+        </a>
       </div>
     </main>
   )

package/template/packages/src/app/page/with-payload.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import { fileURLToPath } from "url"
 import config from "@payload-config"
 import { headers as getHeaders } from "next/headers.js"
-import Image from "next/image"
 import { getPayload } from "payload"
 import "./globals.css"
@@ -15,44 +14,123 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
   return (
-    <div className="home">
-      <div className="content">
-        <picture>
-          <source srcSet="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg" />
-          <Image
-            alt="Payload Logo"
-            height={65}
-            src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg"
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+      <div className="flex grow flex-col items-center justify-center">
+        {/* Logo */}
+        <picture className="relative">
+          <div className="absolute inset-0 animate-pulse rounded-xl bg-gradient-to-r from-purple-500 to-cyan-500 opacity-20 blur-xl dark:from-purple-800 dark:to-cyan-800" />
+          <source srcSet="https://github.com/SlickYeet/create-tnt-stack/blob/main/docs/public/logo.light.png?raw=true" />
+          <img
+            src="https://github.com/SlickYeet/create-tnt-stack/blob/main/docs/public/logo.light.png?raw=true"
+            alt="Logo"
             width={65}
+            height={65}
+            className="block h-auto max-w-full"
           />
         </picture>
-        {!user && <h1>Welcome to your new project.</h1>}
-        {user && <h1>Welcome back, {user.email}</h1>}
-        <div className="links">
+        {!user && (
+          <>
+            <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
+              TNT-Powered Next.js App
+            </h1>
+            <p className="mt-4 text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
+              Build modern web applications with today&apos;s most popular tools
+            </p>
+          </>
+        )}
+        {user && (
+          <h1 className="mt-6 bg-gradient-to-r from-purple-500 to-cyan-500 bg-clip-text text-center text-4xl leading-10 text-transparent sm:text-5xl sm:leading-14 md:text-6xl md:leading-20 lg:mt-10 lg:text-7xl lg:font-bold">
+            Welcome back, {user.email}
+          </h1>
+        )}
+        <div className="mt-12 flex items-center gap-3">
           <a
-            className="admin"
             href={payloadConfig.routes.admin}
             rel="noopener noreferrer"
             target="_blank"
+            className="rounded-md bg-white px-2 py-1 text-black focus:opacity-80 focus:outline-none active:opacity-70 active:outline-none"
           >
             Go to admin panel
           </a>
           <a
-            className="docs"
             href="https://payloadcms.com/docs"
             rel="noopener noreferrer"
             target="_blank"
+            className="rounded-md border border-white px-2 py-1 text-white focus:opacity-80 focus:outline-none active:opacity-70 active:outline-none"
+          >
+            Payload Docs
+          </a>
+        </div>
+        <div className="mt-12 flex items-center gap-3">
+          <a
+            href="https://create.tntstack.org"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
+          >
+            Website
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
+          </a>
+          <a
+            href="https://create.tntstack.org/introduction"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
           >
-            Documentation
+            Docs
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
+          </a>
+          <a
+            href="https://github.com/SlickYeet/create-tnt-stack"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center rounded-md border border-white px-2 py-1 outline-none focus:opacity-80 active:opacity-70"
+          >
+            GitHub
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+            >
+              <path d="M7 7h10v10" />
+              <path d="M7 17 17 7" />
+            </svg>
           </a>
         </div>
       </div>
-      <div className="footer">
-        <p>Update this page by editing</p>
-        <a className="codeLink" href={fileURL}>
-          <code>app/(frontend)/page.tsx</code>
+      <div className="flex flex-col items-center gap-1 text-sm text-neutral-600 lg:flex-row lg:gap-2 dark:text-neutral-400">
+        <p className="m-0">Get started by editing </p>
+        <a
+          href={fileURL}
+          className="rounded-md bg-neutral-200 px-2 py-1 dark:bg-neutral-800"
+        >
+          <code>src/app/(frontend)/page.tsx</code>
         </a>
       </div>
-    </div>
+    </main>
   )
 }

package/template/packages/src/app/globals/with-payload.css DELETED Viewed

@@ -1,166 +0,0 @@
-@import "tailwindcss";
-:root {
-  --font-mono: "Roboto Mono", monospace;
-}
-* {
-  box-sizing: border-box;
-}
-html {
-  font-size: 18px;
-  line-height: 32px;
-  background: rgb(0, 0, 0);
-  -webkit-font-smoothing: antialiased;
-}
-html,
-body,
-#app {
-  height: 100%;
-}
-body {
-  font-family: system-ui;
-  font-size: 18px;
-  line-height: 32px;
-  margin: 0;
-  color: rgb(1000, 1000, 1000);
-  @media (max-width: 1024px) {
-    font-size: 15px;
-    line-height: 24px;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
-h1 {
-  margin: 40px 0;
-  font-size: 64px;
-  line-height: 70px;
-  font-weight: bold;
-  @media (max-width: 1024px) {
-    margin: 24px 0;
-    font-size: 42px;
-    line-height: 42px;
-  }
-  @media (max-width: 768px) {
-    font-size: 38px;
-    line-height: 38px;
-  }
-  @media (max-width: 400px) {
-    font-size: 32px;
-    line-height: 32px;
-  }
-}
-p {
-  margin: 24px 0;
-  @media (max-width: 1024px) {
-    margin: calc(var(--base) * 0.75) 0;
-  }
-}
-a {
-  color: currentColor;
-  &:focus {
-    opacity: 0.8;
-    outline: none;
-  }
-  &:active {
-    opacity: 0.7;
-    outline: none;
-  }
-}
-svg {
-  vertical-align: middle;
-}
-.home {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  height: 100vh;
-  padding: 45px;
-  max-width: 1024px;
-  margin: 0 auto;
-  overflow: hidden;
-  @media (max-width: 400px) {
-    padding: 24px;
-  }
-  .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1;
-    h1 {
-      text-align: center;
-    }
-  }
-  .links {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    a {
-      text-decoration: none;
-      padding: 0.25rem 0.5rem;
-      border-radius: 4px;
-    }
-    .admin {
-      color: rgb(0, 0, 0);
-      background: rgb(1000, 1000, 1000);
-      border: 1px solid rgb(0, 0, 0);
-    }
-    .docs {
-      color: rgb(1000, 1000, 1000);
-      background: rgb(0, 0, 0);
-      border: 1px solid rgb(1000, 1000, 1000);
-    }
-  }
-  .footer {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    @media (max-width: 1024px) {
-      flex-direction: column;
-      gap: 6px;
-    }
-    p {
-      margin: 0;
-    }
-    .codeLink {
-      text-decoration: none;
-      padding: 0 0.5rem;
-      background: rgb(60, 60, 60);
-      border-radius: 4px;
-    }
-  }
-}

package/template/packages/src/app/layout/with-payload.tsx DELETED Viewed

@@ -1,20 +0,0 @@
-import type { Metadata } from "next"
-import "./globals.css"
-export const metadata: Metadata = {
-  description: "A blank template using Payload in a Next.js app.",
-  title: "Payload Blank Template",
-}
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode
-}>) {
-  return (
-    <html lang="en">
-      <body className="antialiased">{children}</body>
-    </html>
-  )
-}