From 2a8961b36b5cbe44ea515bbffbd3e557c74efad9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Mon, 20 Mar 2023 23:33:44 +0100 Subject: [PATCH] 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 --- packages/create-next-app/index.ts | 6 +- .../templates/app-tw/js/app/page.js | 41 ++++++----- .../templates/app-tw/js/public/thirteen.svg | 1 - .../templates/app-tw/ts/app/page.tsx | 39 +++++++---- .../templates/app-tw/ts/public/thirteen.svg | 1 - .../templates/app/js/app/page.js | 17 ++++- .../templates/app/js/app/page.module.css | 70 ++++--------------- .../templates/app/js/public/thirteen.svg | 1 - .../templates/app/ts/app/page.module.css | 70 ++++--------------- .../templates/app/ts/app/page.tsx | 17 ++++- .../templates/app/ts/public/thirteen.svg | 1 - .../templates/default-tw/js/pages/index.js | 51 ++++++++------ .../default-tw/js/public/thirteen.svg | 1 - .../templates/default-tw/ts/pages/index.tsx | 51 ++++++++------ .../default-tw/ts/public/thirteen.svg | 1 - .../templates/default/js/pages/index.js | 9 --- .../templates/default/js/public/thirteen.svg | 1 - .../default/js/styles/Home.module.css | 53 +------------- .../templates/default/ts/pages/index.tsx | 9 --- .../templates/default/ts/public/thirteen.svg | 1 - .../default/ts/styles/Home.module.css | 53 +------------- 21 files changed, 172 insertions(+), 322 deletions(-) delete mode 100644 packages/create-next-app/templates/app-tw/js/public/thirteen.svg delete mode 100644 packages/create-next-app/templates/app-tw/ts/public/thirteen.svg delete mode 100644 packages/create-next-app/templates/app/js/public/thirteen.svg delete mode 100644 packages/create-next-app/templates/app/ts/public/thirteen.svg delete mode 100644 packages/create-next-app/templates/default-tw/js/public/thirteen.svg delete mode 100644 packages/create-next-app/templates/default-tw/ts/public/thirteen.svg delete mode 100644 packages/create-next-app/templates/default/js/public/thirteen.svg delete mode 100644 packages/create-next-app/templates/default/ts/public/thirteen.svg diff --git a/packages/create-next-app/index.ts b/packages/create-next-app/index.ts index 873bf9b2d08d..a7a139e731c9 100644 --- a/packages/create-next-app/index.ts +++ b/packages/create-next-app/index.ts @@ -243,7 +243,7 @@ async function run(): Promise { 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 { 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 { 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 index 2dde70859cb6..17f92c320b9a 100644 --- 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() {

Get started by editing  - app/page.tsx + app/page.js

-
+
-
- 13 -
-
+

Find in-depth information about Next.js features and API.

+ +

+ Learn{' '} + + -> + +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ +

Explore the Next.js 13 playground.

@@ -104,7 +113,7 @@ export default function Home() {

Instantly deploy your Next.js site to a shareable URL with Vercel.

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 deleted file mode 100644 index 8977c1bd123c..000000000000 --- a/packages/create-next-app/templates/app-tw/js/public/thirteen.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file 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 index 2dde70859cb6..7c63b7136045 100644 --- 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() {
-
+
-
- 13 -
-
+

Find in-depth information about Next.js features and API.

+ +

+ Learn{' '} + + -> + +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ +

Explore the Next.js 13 playground.

@@ -104,7 +113,7 @@ export default function Home() {

Instantly deploy your Next.js site to a shareable URL with Vercel.

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 deleted file mode 100644 index 8977c1bd123c..000000000000 --- a/packages/create-next-app/templates/app-tw/ts/public/thirteen.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/create-next-app/templates/app/js/app/page.js b/packages/create-next-app/templates/app/js/app/page.js index 241b72c0f7f7..dff89aaea026 100644 --- 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 /> -
- 13 -
@@ -60,6 +57,20 @@ export default function Home() {

+ +

+ Learn -> +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + \ No newline at end of file diff --git a/packages/create-next-app/templates/app/ts/app/page.module.css b/packages/create-next-app/templates/app/ts/app/page.module.css index 4732b55fdc23..9411a5e6f26a 100644 --- a/packages/create-next-app/templates/app/ts/app/page.module.css +++ b/packages/create-next-app/templates/app/ts/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/ts/app/page.tsx b/packages/create-next-app/templates/app/ts/app/page.tsx index 965f40ed2bd9..01946f7979e1 100644 --- a/packages/create-next-app/templates/app/ts/app/page.tsx +++ b/packages/create-next-app/templates/app/ts/app/page.tsx @@ -40,9 +40,6 @@ export default function Home() { height={37} priority /> -
- 13 -
@@ -60,6 +57,20 @@ export default function Home() {

+ +

+ Learn -> +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + \ No newline at end of file diff --git a/packages/create-next-app/templates/default-tw/js/pages/index.js b/packages/create-next-app/templates/default-tw/js/pages/index.js index 2dde70859cb6..3642a79d82f7 100644 --- a/packages/create-next-app/templates/default-tw/js/pages/index.js +++ b/packages/create-next-app/templates/default-tw/js/pages/index.js @@ -9,12 +9,12 @@ export default function Home() { -
+
-
- 13 -
-
+

Find in-depth information about Next.js features and API.

+

+ Learn{' '} + + -> + +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + +

- Explore the Next.js 13 playground. + Discover and deploy boilerplate example Next.js projects.

Instantly deploy your Next.js site to a shareable URL with Vercel.

diff --git a/packages/create-next-app/templates/default-tw/js/public/thirteen.svg b/packages/create-next-app/templates/default-tw/js/public/thirteen.svg deleted file mode 100644 index 8977c1bd123c..000000000000 --- a/packages/create-next-app/templates/default-tw/js/public/thirteen.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/create-next-app/templates/default-tw/ts/pages/index.tsx b/packages/create-next-app/templates/default-tw/ts/pages/index.tsx index 2dde70859cb6..744cbef1bb5a 100644 --- a/packages/create-next-app/templates/default-tw/ts/pages/index.tsx +++ b/packages/create-next-app/templates/default-tw/ts/pages/index.tsx @@ -9,12 +9,12 @@ export default function Home() { -
+
-
- 13 -
-
+

Find in-depth information about Next.js features and API.

+

+ Learn{' '} + + -> + +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + +

- Explore the Next.js 13 playground. + Discover and deploy boilerplate example Next.js projects.

Instantly deploy your Next.js site to a shareable URL with Vercel.

diff --git a/packages/create-next-app/templates/default-tw/ts/public/thirteen.svg b/packages/create-next-app/templates/default-tw/ts/public/thirteen.svg deleted file mode 100644 index 8977c1bd123c..000000000000 --- a/packages/create-next-app/templates/default-tw/ts/public/thirteen.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/create-next-app/templates/default/js/pages/index.js b/packages/create-next-app/templates/default/js/pages/index.js index 486c7fa248e3..54bc281694f0 100644 --- a/packages/create-next-app/templates/default/js/pages/index.js +++ b/packages/create-next-app/templates/default/js/pages/index.js @@ -48,15 +48,6 @@ export default function Home() { height={37} priority /> -
- 13 -
diff --git a/packages/create-next-app/templates/default/js/public/thirteen.svg b/packages/create-next-app/templates/default/js/public/thirteen.svg deleted file mode 100644 index 8977c1bd123c..000000000000 --- a/packages/create-next-app/templates/default/js/public/thirteen.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/create-next-app/templates/default/js/styles/Home.module.css b/packages/create-next-app/templates/default/js/styles/Home.module.css index 27dfff5ec4cf..9411a5e6f26a 100644 --- a/packages/create-next-app/templates/default/js/styles/Home.module.css +++ b/packages/create-next-app/templates/default/js/styles/Home.module.css @@ -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,10 +120,6 @@ } @media (prefers-reduced-motion) { - .thirteen::before { - animation: none; - } - .card:hover span { transform: none; } @@ -262,8 +214,7 @@ 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/default/ts/pages/index.tsx b/packages/create-next-app/templates/default/ts/pages/index.tsx index e92114873413..8c2467c810f5 100644 --- a/packages/create-next-app/templates/default/ts/pages/index.tsx +++ b/packages/create-next-app/templates/default/ts/pages/index.tsx @@ -48,15 +48,6 @@ export default function Home() { height={37} priority /> -
- 13 -
diff --git a/packages/create-next-app/templates/default/ts/public/thirteen.svg b/packages/create-next-app/templates/default/ts/public/thirteen.svg deleted file mode 100644 index 8977c1bd123c..000000000000 --- a/packages/create-next-app/templates/default/ts/public/thirteen.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/create-next-app/templates/default/ts/styles/Home.module.css b/packages/create-next-app/templates/default/ts/styles/Home.module.css index 27dfff5ec4cf..9411a5e6f26a 100644 --- a/packages/create-next-app/templates/default/ts/styles/Home.module.css +++ b/packages/create-next-app/templates/default/ts/styles/Home.module.css @@ -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,10 +120,6 @@ } @media (prefers-reduced-motion) { - .thirteen::before { - animation: none; - } - .card:hover span { transform: none; } @@ -262,8 +214,7 @@ filter: invert(1); } - .logo, - .thirteen img { + .logo { filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); } }