fix(cli): unify styles/content of templates (#47294)

### What? - fixes some typos - [x] getting started by editing "filename" - [x] match app/pages content - [x] fix utm params - [x] Reverted different text coloring in the CLI as they were hard to read on a dark background - [x] removes 13 ([Slack thread](https://vercel.slack.com/archives/C03KAR5DCKC/p1679151687968809?thread_ts=1679123593.519319&cid=C03KAR5DCKC)) ### Why? Unifying the styles across all templates ### How? Used https://github.com/vercel/next.js/tree/canary/packages/create-next-app/templates/default/js as the base and made sure that all other templates match its content and styling. Related: #46927. This PR was extracted from #47238 to make reviewing easier. fix NEXT-851 ([link](https://linear.app/vercel/issue/NEXT-851)) --------- Co-authored-by: JJ Kasper <jj@jjsweb.site>
vercel · Mar 20, 2023 · 2a8961b · 2a8961b
1 parent f428258
commit 2a8961b
Show file tree

Hide file tree

Showing 21 changed files with 172 additions and 322 deletions.
diff --git a/packages/create-next-app/index.ts b/packages/create-next-app/index.ts
@@ -243,7 +243,7 @@ async function run(): Promise<void> {
         program.typescript = false
         program.javascript = true
       } else {
-        const styledTypeScript = chalk.hex('#0645ad')('TypeScript')
+        const styledTypeScript = chalk.hex('#007acc')('TypeScript')
         const { typescript } = await prompts(
           {
             type: 'toggle',
@@ -280,7 +280,7 @@ async function run(): Promise<void> {
       if (ciInfo.isCI) {
         program.eslint = true
       } else {
-        const styledEslint = chalk.hex('#4b32c3')('ESLint')
+        const styledEslint = chalk.hex('#007acc')('ESLint')
         const { eslint } = await prompts({
           onState: onPromptState,
           type: 'toggle',
@@ -302,7 +302,7 @@ async function run(): Promise<void> {
       if (ciInfo.isCI) {
         program.tailwind = false
       } else {
-        const tw = chalk.hex('#38BDF8')('Tailwind CSS')
+        const tw = chalk.hex('#007acc')('Tailwind CSS')
         const { tailwind } = await prompts({
           onState: onPromptState,
           type: 'toggle',

diff --git a/packages/create-next-app/templates/app-tw/js/app/page.js b/packages/create-next-app/templates/app-tw/js/app/page.js
@@ -9,7 +9,7 @@ export default function Home() {
       <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
         <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800 dark:bg-opacity-30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800 lg:dark:bg-opacity-30">
           Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
+          <code className="font-mono font-bold">app/page.js</code>
         </p>
         <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
           <a
@@ -31,7 +31,7 @@ export default function Home() {
         </div>
       </div>
 
-      <div className="before:bg-gradient-radial after:bg-gradient-conic relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/2 after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:translate-x-2/3 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
+      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
         <Image
           className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
           src="/next.svg"
@@ -40,19 +40,9 @@ export default function Home() {
           height={37}
           priority
         />
-        <div className="before:bg-gradient-conic relative ml-4 flex h-20 w-20 items-center justify-center overflow-hidden rounded-xl shadow-lg before:absolute before:-z-10 before:h-[200%] before:w-[200%] before:animate-[spin_6s_linear_reverse_infinite] before:from-transparent before:via-black before:content-[''] after:absolute after:inset-[1px] after:-z-10 after:rounded-xl after:bg-gradient-to-br after:from-slate-50 after:to-slate-200 after:content-[''] motion-reduce:animate-none before:dark:via-white before:dark:to-transparent before:dark:opacity-50 after:dark:from-black after:dark:to-black">
-          <Image
-            className="dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-            src="/thirteen.svg"
-            alt="13"
-            width={40}
-            height={31}
-            priority
-          />
-        </div>
       </div>
 
-      <div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-3 lg:text-left">
+      <div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
         <a
           href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
@@ -66,12 +56,31 @@ export default function Home() {
             </span>
           </h2>
           <p
-            className={`${inter.className} m-0 max-w-[34ch] text-sm opacity-50`}
+            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
           >
             Find in-depth information about Next.js features and API.
           </p>
         </a>
 
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`${inter.className} mb-3 text-2xl font-semibold`}>
+            Learn{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p
+            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
+          >
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
         <a
           href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
@@ -85,7 +94,7 @@ export default function Home() {
             </span>
           </h2>
           <p
-            className={`${inter.className} m-0 max-w-[34ch] text-sm opacity-50`}
+            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
           >
             Explore the Next.js 13 playground.
           </p>
@@ -104,7 +113,7 @@ export default function Home() {
             </span>
           </h2>
           <p
-            className={`${inter.className} m-0 max-w-[34ch] text-sm opacity-50`}
+            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
           >
             Instantly deploy your Next.js site to a shareable URL with Vercel.
           </p>

diff --git a/packages/create-next-app/templates/app-tw/js/public/thirteen.svg b/packages/create-next-app/templates/app-tw/js/public/thirteen.svg
diff --git a/packages/create-next-app/templates/app-tw/ts/app/page.tsx b/packages/create-next-app/templates/app-tw/ts/app/page.tsx
@@ -31,7 +31,7 @@ export default function Home() {
         </div>
       </div>
 
-      <div className="before:bg-gradient-radial after:bg-gradient-conic relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/2 after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:translate-x-2/3 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
+      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
         <Image
           className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
           src="/next.svg"
@@ -40,19 +40,9 @@ export default function Home() {
           height={37}
           priority
         />
-        <div className="before:bg-gradient-conic relative ml-4 flex h-20 w-20 items-center justify-center overflow-hidden rounded-xl shadow-lg before:absolute before:-z-10 before:h-[200%] before:w-[200%] before:animate-[spin_6s_linear_reverse_infinite] before:from-transparent before:via-black before:content-[''] after:absolute after:inset-[1px] after:-z-10 after:rounded-xl after:bg-gradient-to-br after:from-slate-50 after:to-slate-200 after:content-[''] motion-reduce:animate-none before:dark:via-white before:dark:to-transparent before:dark:opacity-50 after:dark:from-black after:dark:to-black">
-          <Image
-            className="dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-            src="/thirteen.svg"
-            alt="13"
-            width={40}
-            height={31}
-            priority
-          />
-        </div>
       </div>
 
-      <div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-3 lg:text-left">
+      <div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
         <a
           href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
@@ -66,12 +56,31 @@ export default function Home() {
             </span>
           </h2>
           <p
-            className={`${inter.className} m-0 max-w-[34ch] text-sm opacity-50`}
+            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
           >
             Find in-depth information about Next.js features and API.
           </p>
         </a>
 
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`${inter.className} mb-3 text-2xl font-semibold`}>
+            Learn{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p
+            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
+          >
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
         <a
           href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
@@ -85,7 +94,7 @@ export default function Home() {
             </span>
           </h2>
           <p
-            className={`${inter.className} m-0 max-w-[34ch] text-sm opacity-50`}
+            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
           >
             Explore the Next.js 13 playground.
           </p>
@@ -104,7 +113,7 @@ export default function Home() {
             </span>
           </h2>
           <p
-            className={`${inter.className} m-0 max-w-[34ch] text-sm opacity-50`}
+            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
           >
             Instantly deploy your Next.js site to a shareable URL with Vercel.
           </p>

diff --git a/packages/create-next-app/templates/app-tw/ts/public/thirteen.svg b/packages/create-next-app/templates/app-tw/ts/public/thirteen.svg
diff --git a/packages/create-next-app/templates/app/js/app/page.js b/packages/create-next-app/templates/app/js/app/page.js
@@ -40,9 +40,6 @@ export default function Home() {
           height={37}
           priority
         />
-        <div className={styles.thirteen}>
-          <Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
-        </div>
       </div>
 
       <div className={styles.grid}>
@@ -60,6 +57,20 @@ export default function Home() {
           </p>
         </a>
 
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={inter.className}>
+            Learn <span>-&gt;</span>
+          </h2>
+          <p className={inter.className}>
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
         <a
           href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           className={styles.card}

diff --git a/packages/create-next-app/templates/app/js/app/page.module.css b/packages/create-next-app/templates/app/js/app/page.module.css
@@ -20,8 +20,8 @@
 
 .description a {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   gap: 0.5rem;
 }
 
@@ -41,7 +41,7 @@
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(33%, auto));
+  grid-template-columns: repeat(4, minmax(25%, auto));
   width: var(--max-width);
   max-width: 100%;
 }
@@ -69,7 +69,7 @@
   opacity: 0.6;
   font-size: 0.9rem;
   line-height: 1.5;
-  max-width: 34ch;
+  max-width: 30ch;
 }
 
 .center {
@@ -104,53 +104,9 @@
   transform: translateZ(0);
 }
 
-.logo,
-.thirteen {
+.logo {
   position: relative;
 }
-
-.thirteen {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 75px;
-  height: 75px;
-  padding: 25px 10px;
-  margin-left: 16px;
-  transform: translateZ(0);
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  box-shadow: 0px 2px 8px -1px #0000001a;
-}
-
-.thirteen::before,
-.thirteen::after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-}
-
-/* Conic Gradient Animation */
-.thirteen::before {
-  animation: 6s rotate linear infinite;
-  width: 200%;
-  height: 200%;
-  background: var(--tile-border);
-}
-
-/* Inner Square */
-.thirteen::after {
-  inset: 0;
-  padding: 1px;
-  border-radius: var(--border-radius);
-  background: linear-gradient(
-    to bottom right,
-    rgba(var(--tile-start-rgb), 1),
-    rgba(var(--tile-end-rgb), 1)
-  );
-  background-clip: content-box;
-}
-
 /* Enable hover only on non-touch devices */
 @media (hover: hover) and (pointer: fine) {
   .card:hover {
@@ -164,17 +120,13 @@
 }
 
 @media (prefers-reduced-motion) {
-  .thirteen::before {
-    animation: none;
-  }
-
   .card:hover span {
     transform: none;
   }
 }
 
-/* Mobile and Tablet */
-@media (max-width: 1023px) {
+/* Mobile */
+@media (max-width: 700px) {
   .content {
     padding: 4rem;
   }
@@ -250,13 +202,19 @@
   }
 }
 
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+  .grid {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .vercelLogo {
     filter: invert(1);
   }
 
-  .logo,
-  .thirteen img {
+  .logo {
     filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
   }
 }

diff --git a/packages/create-next-app/templates/app/js/public/thirteen.svg b/packages/create-next-app/templates/app/js/public/thirteen.svg