create-spectacle: README/gitignore templates

.changeset/hip-trains-flash.md

@@ -0,0 +1,5 @@
+---
+'create-spectacle': minor
+---
+
+Add README and .gitignore to generated projects

packages/create-spectacle/src/cli.ts

@@ -170,9 +170,15 @@ const main = async () => {
   }
 
   clearInterval(progressInterval);
+  const atLocation =
+    type === 'onepage'
+      ? `at ${fileOptions.snakeCaseName}.html`
+      : `in ${fileOptions.snakeCaseName}/`;
   logUpdate(
     chalk.whiteBright.bgGreen.bold(` \u2714 `),
-    chalk.green.bold(`A new ${type} deck named ${name} was created.\n`)
+    chalk.green.bold(
+      `A new ${type} deck named ${name} was created ${atLocation}.\n`
+    )
   );
 };
 

packages/create-spectacle/src/templates/file-writers.ts

@@ -1,5 +1,4 @@
 import path from 'path';
-import { existsSync } from 'fs';
 import { mkdir, writeFile, rm } from 'fs/promises';
 import { htmlTemplate } from './html';
 import { onePageTemplate } from './one-page';
@@ -8,6 +7,8 @@ import { babelTemplate } from './babel';
 import { packageTemplate } from './package';
 import { indexTemplate } from './index';
 import { tsconfigTemplate } from './tsconfig';
+import { gitignoreTemplate } from './gitignore';
+import { readmeTemplate } from './readme';
 
 export type FileOptions = {
   snakeCaseName: string;
@@ -27,46 +28,52 @@ export const writeWebpackProjectFiles = async ({
   spectacleVersion
 }: FileOptions) => {
   const outPath = path.resolve(process.cwd(), snakeCaseName);
+  const pathFor = (file: string) => path.join(outPath, file);
 
   await rm(outPath, { recursive: true, force: true });
 
-  if (existsSync(outPath)) {
-    throw new Error(`Directory named ${snakeCaseName} already exists.`);
-  }
   await mkdir(outPath, { recursive: true });
-  await writeFile(`${snakeCaseName}/index.html`, htmlTemplate({ name, lang }));
+  await writeFile(pathFor('index.html'), htmlTemplate({ name, lang }));
   await writeFile(
-    `${snakeCaseName}/webpack.config.js`,
+    pathFor('webpack.config.js'),
     webpackTemplate({ port, usesTypeScript: enableTypeScriptSupport })
   );
   await writeFile(
-    `${snakeCaseName}/.babelrc`,
+    pathFor('.babelrc'),
     babelTemplate({ enableTypeScriptSupport })
   );
   await writeFile(
-    `${snakeCaseName}/package.json`,
+    pathFor('package.json'),
     packageTemplate({
       usesTypeScript: enableTypeScriptSupport,
       name: snakeCaseName,
       spectacleVersion
     })
   );
   await writeFile(
-    `${snakeCaseName}/index.${enableTypeScriptSupport ? 'tsx' : 'jsx'}`,
+    pathFor(`index.${enableTypeScriptSupport ? 'tsx' : 'jsx'}`),
     indexTemplate({
       usesTypeScript: enableTypeScriptSupport,
       name
     })
   );
+  await writeFile(pathFor('.gitignore'), gitignoreTemplate());
+  await writeFile(
+    pathFor('README.md'),
+    readmeTemplate({ name, enableTypeScriptSupport })
+  );
 
   enableTypeScriptSupport &&
-    (await writeFile(`${snakeCaseName}/tsconfig.json`, tsconfigTemplate()));
+    (await writeFile(pathFor('tsconfig.json'), tsconfigTemplate()));
 };
 
 export const writeOnePageHTMLFile = async ({
   snakeCaseName,
   name,
   lang
 }: FileOptions) => {
-  await writeFile(`${snakeCaseName}.html`, onePageTemplate({ name, lang }));
+  await writeFile(
+    path.resolve(process.cwd(), `${snakeCaseName}.html`),
+    onePageTemplate({ name, lang })
+  );
 };

packages/create-spectacle/src/templates/gitignore.ts

@@ -0,0 +1,20 @@
+export const gitignoreTemplate = () =>
+  `
+# Deps
+node_modules
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor/FS configs
+.vscode
+.idea
+.DS_Store
+
+# Build artifacts
+dist
+`.trim();

packages/create-spectacle/src/templates/readme.ts

@@ -0,0 +1,28 @@
+type ReadmeTemplateOptions = {
+  name: string;
+  enableTypeScriptSupport: boolean;
+};
+
+export const readmeTemplate = ({
+  name,
+  enableTypeScriptSupport
+}: ReadmeTemplateOptions) =>
+  `
+# ${name}
+
+Made with ❤️ and [Spectacle](https://github.com/FormidableLabs/spectacle/).
+
+## Running your presentation
+
+- Run \`yarn install\` (or \`npm install\` or \`pnpm install\`) to install dependencies.
+- Run \`yarn start\` (or \`npm start\` or \`pnpm start\`) to start the presentation.
+- Edit \`index.${
+    enableTypeScriptSupport ? 'tsx' : 'jsx'
+  }\` to add your presentation content.
+
+## Building you presentation
+
+To build your presentation for a production deploy, run \`yarn build\` (or \`npm build\` or \`pnpm build\`).
+
+The build artifacts will be placed in the \`dist\` directory. If you'd like to change this location, edit \`output.path\` in \`webpack.config.js\`.
+`.trim();