feat(create-gatsby): Prompt for site name (#28401)

* feat(create-gatsby): Prompt for site name

* Move kebabify into utils

Author: ascorbic

packages/create-gatsby/src/index.ts

@@ -15,12 +15,14 @@ import { trackCli } from "./tracking"
 import crypto from "crypto"
 import { reporter } from "./reporter"
 import { setSiteMetadata } from "./site-metadata"
+import { kebabify } from "./utils"
 
 const sha256 = (str: string): string =>
   crypto.createHash(`sha256`).update(str).digest(`hex`)
 
 const md5 = (str: string): string =>
   crypto.createHash(`md5`).update(str).digest(`hex`)
+
 /**
  * Hide string on windows (for emojis)
  */
@@ -67,14 +69,14 @@ export const validateProjectName = async (
 
 // The enquirer types are not accurate
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const questions: any = [
+export const questions = (initialFolderName: string): any => [
   {
     type: `textinput`,
     name: `project`,
     message: `What would you like to name the folder where your site will be created?`,
     hint: path.basename(process.cwd()),
     separator: `/`,
-    initial: `my-gatsby-site`,
+    initial: initialFolderName,
     format: (value: string): string => c.cyan(value),
     validate: validateProjectName,
   },
@@ -101,6 +103,7 @@ export const questions: any = [
   },
 ]
 interface IAnswers {
+  name: string
   project: string
   styling?: keyof typeof styles
   cms?: keyof typeof cmses
@@ -168,7 +171,15 @@ ${center(c.blueBright.bold.underline(`Welcome to Gatsby!`))}
 
   enquirer.use(plugin)
 
-  const data = await enquirer.prompt(questions)
+  const { name: siteName } = await enquirer.prompt({
+    type: `textinput`,
+    name: `name`,
+    message: `What would you like to call your site?`,
+    initial: `My Gatsby Site`,
+    format: (value: string): string => c.cyan(value),
+  } as any)
+
+  const data = await enquirer.prompt(questions(kebabify(siteName)))
   data.project = data.project.trim()
 
   trackCli(`CREATE_GATSBY_SELECT_OPTION`, {
@@ -298,7 +309,12 @@ ${c.bold(`Thanks! Here's what we'll now do:`)}
     return
   }
 
-  await initStarter(DEFAULT_STARTER, data.project, packages.map(removeKey))
+  await initStarter(
+    DEFAULT_STARTER,
+    data.project,
+    packages.map(removeKey),
+    siteName
+  )
 
   reporter.success(`Created site in ${c.green(data.project)}`)
 
@@ -308,7 +324,7 @@ ${c.bold(`Thanks! Here's what we'll now do:`)}
     reporter.info(`${w(`🔌 `)}Setting-up plugins...`)
     await installPlugins(plugins, pluginConfig, fullPath, [])
   }
-  await setSiteMetadata(fullPath, `title`, data.project)
+  await setSiteMetadata(fullPath, `title`, siteName)
 
   await gitSetup(data.project)
 
@@ -318,7 +334,7 @@ ${c.bold(`Thanks! Here's what we'll now do:`)}
   reporter.info(
     stripIndent`
     ${w(`🎉  `)}Your new Gatsby site ${c.bold(
-      data.project
+      siteName
     )} has been successfully created
     at ${c.bold(fullPath)}.
     `

packages/create-gatsby/src/init-starter.ts

@@ -7,16 +7,10 @@ import { spin } from "tiny-spin"
 import { getConfigStore } from "./get-config-store"
 type PackageManager = "yarn" | "npm"
 import c from "ansi-colors"
-import { clearLine } from "./utils"
+import { clearLine, kebabify } from "./utils"
 
 const packageManagerConfigKey = `cli.packageManager`
 
-const kebabify = (str: string): string =>
-  str
-    .replace(/([a-z])([A-Z])/g, `$1-$2`)
-    .replace(/[^a-zA-Z]+/g, `-`)
-    .toLowerCase()
-
 export const getPackageManager = (
   npmConfigUserAgent?: string
 ): PackageManager => {
@@ -92,7 +86,7 @@ const setNameInPackage = async (
   const packageJsonPath = path.join(sitePath, `package.json`)
   const packageJson = await fs.readJSON(packageJsonPath)
   packageJson.name = kebabify(name)
-  packageJson.description = `My Gatsby site`
+  packageJson.description = name
   try {
     const result = await execa(`git`, [`config`, `user.name`])
     if (result.failed) {
@@ -198,13 +192,14 @@ export async function gitSetup(rootPath: string): Promise<void> {
 export async function initStarter(
   starter: string,
   rootPath: string,
-  packages: Array<string>
+  packages: Array<string>,
+  siteName: string
 ): Promise<void> {
   const sitePath = path.resolve(rootPath)
 
   await clone(starter, sitePath)
 
-  await setNameInPackage(sitePath, rootPath)
+  await setNameInPackage(sitePath, siteName)
 
   await install(rootPath, packages)
 

packages/create-gatsby/src/utils.ts

@@ -10,3 +10,9 @@ export const clearLine = (count = 1): Promise<boolean> =>
       resolve()
     })
   })
+
+export const kebabify = (str: string): string =>
+  str
+    .replace(/([a-z])([A-Z])/g, `$1-$2`)
+    .replace(/[^a-zA-Z]+/g, `-`)
+    .toLowerCase()