feat: new init template classic-typescript (#5233)

* Add typescript template

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Update template

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Complete CLI

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Remove d.ts file

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Refactor

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Revert lock file changes

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Regenerate lock

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Add stylelint ignore

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix tsconfig

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Attempt to use symlink

* More symlinks

* Link all markdown

* Link source files

* Change to relative links

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix blogs

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix link

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Link config

* Documentation

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Add option to index

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Add option

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix copying

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Provide suffix

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Always have colored output

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Remove return signature

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Update generate examples

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Update lock

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix tsconfig

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Use latest docusaurus

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Update lock

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Add type def

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* init: make classic first in list + mark as recommended + minor refactors

* remove types.d.ts

* add "yarn typecheck" script

* Minor tweaks

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Generate example for TS

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Add comment

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* No emit when running tsc

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* FIx generate examples

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Remove compiler options

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* This looks better

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Use new tsconfig

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Co-authored-by: slorber <lorber.sebastien@gmail.com>

.eslintignore

@@ -16,13 +16,3 @@ packages/docusaurus-*/lib-next/
 packages/docusaurus-plugin-ideal-image/copyUntypedFiles.js
 
 packages/docusaurus-init/templates/facebook/.eslintrc.js
-
-examples/bootstrap/babel.config.js
-examples/bootstrap/docusaurus.config.js
-examples/bootstrap/sidebars.js
-examples/bootstrap/src/pages/index.js
-examples/classic/babel.config.js
-examples/classic/docusaurus.config.js
-examples/classic/sidebars.js
-examples/classic/src/pages/index.js
-examples/facebook/.eslintrc.js

.eslintrc.js

@@ -126,12 +126,14 @@ module.exports = {
   overrides: [
     {
       files: [
-        'packages/docusaurus-init/templates/bootstrap/**/*.js',
+        'packages/docusaurus-init/templates/**/*.js',
-        'packages/docusaurus-init/templates/classic/**/*.js',
+        'packages/docusaurus-init/templates/**/*.ts',
+        'packages/docusaurus-init/templates/**/*.tsx',
       ],
       rules: {
         'header/header': OFF,
         'global-require': OFF,
+        '@typescript-eslint/no-var-requires': OFF,
       },
     },
     {

.stylelintignore

@@ -0,0 +1 @@
+packages/docusaurus-init/templates/

generateExamples.js

@@ -20,11 +20,14 @@ function generateTemplateExample(template) {
     );
 
     // run the docusaurus script to bootstrap the template in the examples folder
+    const command = template.endsWith('-typescript')
+      ? template.replace('-typescript', ' --typescript')
+      : template;
     execSync(
       // /!\ we use the published init script on purpose,
       // because using the local init script is too early and could generate upcoming/unavailable config options
       // remember CodeSandbox templates will use the published version, not the repo version
-      `npx @docusaurus/init@latest init examples/${template} ${template}`,
+      `npx @docusaurus/init@latest init examples/${template} ${command}`,
       // `node ./packages/docusaurus-init/bin/index.js init examples/${template} ${template}`,
       {
         stdio: 'inherit',
@@ -143,6 +146,7 @@ function run() {
   console.log('-------');
   console.log('## Removing example folders...');
   rimraf.sync('./examples/classic');
+  rimraf.sync('./examples/classic-typescript');
   rimraf.sync('./examples/facebook');
   rimraf.sync('./examples/bootstrap');
   console.log('');

packages/docusaurus-init/bin/index.js

@@ -42,13 +42,17 @@ program
   .command('init [siteName] [template] [rootDir]')
   .option('--use-npm')
   .option('--skip-install')
+  .option('--typescript')
   .description('Initialize website.')
-  .action((siteName, template, rootDir = '.', {useNpm, skipInstall}) => {
+  .action(
-    wrapCommand(init)(path.resolve(rootDir), siteName, template, {
+    (siteName, template, rootDir = '.', {useNpm, skipInstall, typescript}) => {
-      useNpm,
+      wrapCommand(init)(path.resolve(rootDir), siteName, template, {
-      skipInstall,
+        useNpm,
-    });
+        skipInstall,
-  });
+        typescript,
+      });
+    },
+  );
 
 program.arguments('<command>').action((cmd) => {
   program.outputHelp();

packages/docusaurus-init/src/index.ts

@@ -11,9 +11,12 @@ import {execSync} from 'child_process';
 import prompts, {Choice} from 'prompts';
 import path from 'path';
 import shell from 'shelljs';
-import {kebabCase} from 'lodash';
+import {kebabCase, sortBy} from 'lodash';
 
-function hasYarn(): boolean {
+const RecommendedTemplate = 'classic';
+const TypeScriptTemplateSuffix = '-typescript';
+
+function hasYarn() {
   try {
     execSync('yarnpkg --version', {stdio: 'ignore'});
     return true;
@@ -22,14 +25,11 @@ function hasYarn(): boolean {
   }
 }
 
-function isValidGitRepoUrl(gitRepoUrl: string): boolean {
+function isValidGitRepoUrl(gitRepoUrl: string) {
   return ['https://', 'git@'].some((item) => gitRepoUrl.startsWith(item));
 }
 
-async function updatePkg(
+async function updatePkg(pkgPath: string, obj: Record<string, unknown>) {
-  pkgPath: string,
-  obj: Record<string, unknown>,
-): Promise<void> {
   const content = await fs.readFile(pkgPath, 'utf-8');
   const pkg = JSON.parse(content);
   const newPkg = Object.assign(pkg, obj);
@@ -37,6 +37,33 @@ async function updatePkg(
   await fs.outputFile(pkgPath, JSON.stringify(newPkg, null, 2));
 }
 
+function readTemplates(templatesDir: string) {
+  const templates = fs
+    .readdirSync(templatesDir)
+    .filter(
+      (d) =>
+        !d.startsWith('.') &&
+        !d.startsWith('README') &&
+        !d.endsWith(TypeScriptTemplateSuffix),
+    );
+
+  // Classic should be first in list!
+  return sortBy(templates, (t) => t !== RecommendedTemplate);
+}
+
+function createTemplateChoices(templates: string[]) {
+  function makeNameAndValueChoice(value: string): Choice {
+    const title =
+      value === RecommendedTemplate ? `${value} (recommended)` : value;
+    return {title, value};
+  }
+
+  return [
+    ...templates.map((template) => makeNameAndValueChoice(template)),
+    makeNameAndValueChoice('Git repository'),
+  ];
+}
+
 export default async function init(
   rootDir: string,
   siteName?: string,
@@ -44,23 +71,16 @@ export default async function init(
   cliOptions: Partial<{
     useNpm: boolean;
     skipInstall: boolean;
+    typescript: boolean;
   }> = {},
 ): Promise<void> {
   const useYarn = !cliOptions.useNpm ? hasYarn() : false;
   const templatesDir = path.resolve(__dirname, '../templates');
-  const templates = fs
+  const templates = readTemplates(templatesDir);
-    .readdirSync(templatesDir)
+  const hasTS = (templateName: string) =>
-    .filter((d) => !d.startsWith('.') && !d.startsWith('README'));
+    fs.pathExistsSync(
-
+      path.resolve(templatesDir, `${templateName}${TypeScriptTemplateSuffix}`),
-  function makeNameAndValueChoice(value: string): Choice {
+    );
-    return {title: value, value} as Choice;
-  }
-
-  const gitChoice = makeNameAndValueChoice('Git repository');
-  const templateChoices = [
-    ...templates.map((template) => makeNameAndValueChoice(template)),
-    gitChoice,
-  ];
 
   let name = siteName;
 
@@ -85,15 +105,26 @@ export default async function init(
   }
 
   let template = reqTemplate;
+  let useTS = cliOptions.typescript;
   // Prompt if template is not provided from CLI.
   if (!template) {
     const templatePrompt = await prompts({
       type: 'select',
       name: 'template',
       message: 'Select a template below...',
-      choices: templateChoices,
+      choices: createTemplateChoices(templates),
     });
     template = templatePrompt.template;
+    if (template && !useTS && hasTS(template)) {
+      const tsPrompt = await prompts({
+        type: 'confirm',
+        name: 'useTS',
+        message:
+          'This template is available in TypeScript. Do you want to use the TS variant?',
+        initial: false,
+      });
+      useTS = tsPrompt.useTS;
+    }
   }
 
   // If user choose Git repository, we'll prompt for the url.
@@ -127,8 +158,18 @@ export default async function init(
     }
   } else if (template && templates.includes(template)) {
     // Docusaurus templates.
+    if (useTS) {
+      if (!hasTS(template)) {
+        throw new Error(
+          `Template ${template} doesn't provide the Typescript variant.`,
+        );
+      }
+      template = `${template}${TypeScriptTemplateSuffix}`;
+    }
     try {
-      await fs.copy(path.resolve(templatesDir, template), dest);
+      await fs.copy(path.resolve(templatesDir, template), dest, {
+        dereference: true,
+      });
     } catch (err) {
       console.log(
         `Copying Docusaurus template ${chalk.cyan(template)} failed!`,
@@ -167,7 +208,12 @@ export default async function init(
     console.log(`Installing dependencies with ${chalk.cyan(pkgManager)}...`);
 
     try {
-      shell.exec(`cd "${name}" && ${useYarn ? 'yarn' : 'npm install'}`);
+      shell.exec(
+        `cd "${name}" && ${
+          // Force coloring the output, because the command is invoked by shelljs, not in the interative shell
+          useYarn ? 'FORCE_COLOR=true yarn' : 'npm install --color always'
+        }`,
+      );
     } catch (err) {
       console.log(chalk.red('Installation failed.'));
       throw err;
@@ -181,27 +227,27 @@ export default async function init(
       ? name
       : path.relative(process.cwd(), name);
 
-  console.log();
+  console.log(`
-  console.log(`Successfully created "${chalk.cyan(cdpath)}".`);
+Successfully created "${chalk.cyan(cdpath)}".
-  console.log('Inside that directory, you can run several commands:');
+Inside that directory, you can run several commands:
-  console.log();
-  console.log(chalk.cyan(`  ${pkgManager} start`));
-  console.log('    Starts the development server.');
-  console.log();
-  console.log(chalk.cyan(`  ${pkgManager} ${useYarn ? '' : 'run '}build`));
-  console.log('    Bundles your website into static files for production.');
-  console.log();
-  console.log(chalk.cyan(`  ${pkgManager} ${useYarn ? '' : 'run '}serve`));
-  console.log('    Serve the built website locally.');
-  console.log();
-  console.log(chalk.cyan(`  ${pkgManager} deploy`));
-  console.log('    Publish the website to GitHub pages.');
-  console.log();
-  console.log('We recommend that you begin by typing:');
-  console.log();
-  console.log(chalk.cyan('  cd'), cdpath);
-  console.log(`  ${chalk.cyan(`${pkgManager} start`)}`);
 
-  console.log();
+  ${chalk.cyan(`${pkgManager} start`)}
-  console.log('Happy building awesome websites!');
+    Starts the development server.
+
+  ${chalk.cyan(`${pkgManager} ${useYarn ? '' : 'run '}build`)}
+    Bundles your website into static files for production.
+
+  ${chalk.cyan(`${pkgManager} ${useYarn ? '' : 'run '}serve`)}
+    Serves the built website locally.
+
+  ${chalk.cyan(`${pkgManager} deploy`)}
+    Publishes the website to GitHub pages.
+
+We recommend that you begin by typing:
+
+  ${chalk.cyan('cd')} ${cdpath}
+  ${chalk.cyan(`${pkgManager} start`)}
+
+Happy building awesome websites!
+`);
 }

packages/docusaurus-init/templates/classic-typescript/README.md

@@ -0,0 +1 @@
+../classic/README.md

packages/docusaurus-init/templates/classic-typescript/babel.config.js

@@ -0,0 +1 @@
+../classic/babel.config.js

packages/docusaurus-init/templates/classic-typescript/blog/2019-05-28-hola.md

@@ -0,0 +1 @@
+../../classic/blog/2019-05-28-hola.md

packages/docusaurus-init/templates/classic-typescript/blog/2019-05-29-hello-world.md

@@ -0,0 +1 @@
+../../classic/blog/2019-05-29-hello-world.md

packages/docusaurus-init/templates/classic-typescript/blog/2019-05-30-welcome.md

@@ -0,0 +1 @@
+../../classic/blog/2019-05-30-welcome.md

packages/docusaurus-init/templates/classic-typescript/docs/intro.md

@@ -0,0 +1 @@
+../../classic/docs/intro.md

packages/docusaurus-init/templates/classic-typescript/docs/tutorial-basics/_category_.json

@@ -0,0 +1 @@
+../../../classic/docs/tutorial-basics/_category_.json

packages/docusaurus-init/templates/classic-typescript/docs/tutorial-basics/congratulations.md

@@ -0,0 +1 @@
+../../../classic/docs/tutorial-basics/congratulations.md

packages/docusaurus-init/templates/classic-typescript/docs/tutorial-basics/create-a-blog-post.md

@@ -0,0 +1 @@
+../../../classic/docs/tutorial-basics/create-a-blog-post.md

packages/docusaurus-init/templates/classic-typescript/docs/tutorial-basics/create-a-document.md

@@ -0,0 +1 @@
+../../../classic/docs/tutorial-basics/create-a-document.md

packages/docusaurus-init/templates/classic-typescript/docs/tutorial-basics/create-a-page.md

@@ -0,0 +1 @@
+../../../classic/docs/tutorial-basics/create-a-page.md

packages/docusaurus-init/templates/classic-typescript/docs/tutorial-basics/deploy-your-site.md

@@ -0,0 +1 @@
+../../../classic/docs/tutorial-basics/deploy-your-site.md

packages/docusaurus-init/templates/classic-typescript/docs/tutorial-basics/markdown-features.mdx

@@ -0,0 +1 @@
+../../../classic/docs/tutorial-basics/markdown-features.mdx

packages/docusaurus-init/templates/classic-typescript/docs/tutorial-extras/_category_.json

@@ -0,0 +1 @@
+../../../classic/docs/tutorial-extras/_category_.json

packages/docusaurus-init/templates/classic-typescript/docs/tutorial-extras/manage-docs-versions.md

@@ -0,0 +1 @@
+../../../classic/docs/tutorial-extras/manage-docs-versions.md

packages/docusaurus-init/templates/classic-typescript/docs/tutorial-extras/translate-your-site.md

@@ -0,0 +1 @@
+../../../classic/docs/tutorial-extras/translate-your-site.md

packages/docusaurus-init/templates/classic-typescript/docusaurus.config.js

@@ -0,0 +1 @@
+../classic/docusaurus.config.js

packages/docusaurus-init/templates/classic-typescript/gitignore

@@ -0,0 +1 @@
+../classic/gitignore

packages/docusaurus-init/templates/classic-typescript/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "docusaurus-2-classic-typescript-template",
+  "version": "2.0.0-beta.4",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.0.0-beta.4",
+    "@docusaurus/preset-classic": "2.0.0-beta.4",
+    "@mdx-js/react": "^1.6.21",
+    "@svgr/webpack": "^5.5.0",
+    "clsx": "^1.1.1",
+    "file-loader": "^6.2.0",
+    "prism-react-renderer": "^1.2.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "url-loader": "^4.1.1"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-beta.4",
+    "@tsconfig/docusaurus": "^1.0.3",
+    "@types/react": "^17.0.14",
+    "@types/react-helmet": "^6.1.2",
+    "@types/react-router-dom": "^5.1.8",
+    "typescript": "^4.3.5"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

packages/docusaurus-init/templates/classic-typescript/sidebars.js

@@ -0,0 +1 @@
+../classic/sidebars.js

packages/docusaurus-init/templates/classic-typescript/src/components/HomepageFeatures.module.css

@@ -0,0 +1 @@
+../../../classic/src/components/HomepageFeatures.module.css

packages/docusaurus-init/templates/classic-typescript/src/components/HomepageFeatures.tsx

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import styles from './HomepageFeatures.module.css';
+
+type FeatureItem = {
+  title: string;
+  image: string;
+  description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: 'Easy to Use',
+    image: '/img/undraw_docusaurus_tree.svg',
+    description: (
+      <>
+        Docusaurus was designed from the ground up to be easily installed and
+        used to get your website up and running quickly.
+      </>
+    ),
+  },
+  {
+    title: 'Focus on What Matters',
+    image: '/img/undraw_docusaurus_tree.svg',
+    description: (
+      <>
+        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
+        ahead and move your docs into the <code>docs</code> directory.
+      </>
+    ),
+  },
+  {
+    title: 'Powered by React',
+    image: '/img/undraw_docusaurus_tree.svg',
+    description: (
+      <>
+        Extend or customize your website layout by reusing React. Docusaurus can
+        be extended while reusing the same header and footer.
+      </>
+    ),
+  },
+];
+
+function Feature({title, image, description}: FeatureItem) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+        <img className={styles.featureSvg} alt={title} src={image} />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures(): JSX.Element {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

packages/docusaurus-init/templates/classic-typescript/src/css/custom.css

@@ -0,0 +1 @@
+../../../classic/src/css/custom.css

packages/docusaurus-init/templates/classic-typescript/src/pages/index.module.css

@@ -0,0 +1 @@
+../../../classic/src/pages/index.module.css

packages/docusaurus-init/templates/classic-typescript/src/pages/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import styles from './index.module.css';
+import HomepageFeatures from '../components/HomepageFeatures';
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/intro">
+            Docusaurus Tutorial - 5min ⏱️
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home(): JSX.Element {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />">
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}

packages/docusaurus-init/templates/classic-typescript/src/pages/markdown-page.md

@@ -0,0 +1 @@
+../../../classic/src/pages/markdown-page.md

packages/docusaurus-init/templates/classic-typescript/static/img/docusaurus.png

@@ -0,0 +1 @@
+../../../classic/static/img/docusaurus.png

packages/docusaurus-init/templates/classic-typescript/static/img/favicon.ico

@@ -0,0 +1 @@
+../../../classic/static/img/favicon.ico

packages/docusaurus-init/templates/classic-typescript/static/img/logo.svg

@@ -0,0 +1 @@
+../../../classic/static/img/logo.svg

packages/docusaurus-init/templates/classic-typescript/static/img/tutorial/docsVersionDropdown.png

@@ -0,0 +1 @@
+../../../../classic/static/img/tutorial/docsVersionDropdown.png

packages/docusaurus-init/templates/classic-typescript/static/img/tutorial/localeDropdown.png

@@ -0,0 +1 @@
+../../../../classic/static/img/tutorial/localeDropdown.png

packages/docusaurus-init/templates/classic-typescript/static/img/undraw_docusaurus_mountain.svg

@@ -0,0 +1 @@
+../../../classic/static/img/undraw_docusaurus_mountain.svg

packages/docusaurus-init/templates/classic-typescript/static/img/undraw_docusaurus_react.svg

@@ -0,0 +1 @@
+../../../classic/static/img/undraw_docusaurus_react.svg

packages/docusaurus-init/templates/classic-typescript/static/img/undraw_docusaurus_tree.svg

@@ -0,0 +1 @@
+../../../classic/static/img/undraw_docusaurus_tree.svg

packages/docusaurus-init/templates/classic-typescript/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  // This file is not used in compilation. It is here just for a nice editor experience.
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "include": ["src/"]
+}

packages/docusaurus-init/templates/classic/src/components/HomepageFeatures.module.css

@@ -1,5 +1,3 @@
-/* stylelint-disable docusaurus/copyright-header */
-
 .features {
   display: flex;
   align-items: center;

packages/docusaurus-init/templates/classic/src/css/custom.css

@@ -1,4 +1,3 @@
-/* stylelint-disable docusaurus/copyright-header */
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to

packages/docusaurus-init/tsconfig.json

@@ -5,5 +5,7 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "rootDir": "src",
     "outDir": "lib"
-  }
+  },
+  "include": ["src/"],
+  "exclude": ["templates/"]
 }

website/docs/installation.md

@@ -52,6 +52,12 @@ If you want to skip installing dependencies, use the `--skip-install` option, li
 npx @docusaurus/init@latest init my-website classic --skip-install
 ```
 
+You can also use the template's TypeScript variant by passing the `--typescript` flag.
+
+```bash
+npx @docusaurus/init@latest init my-website classic --typescript
+```
+
 ## Project structure {#project-structure}
 
 Assuming you chose the classic template and named your site `my-website`, you will see the following files generated under a new directory `my-website/`:

website/docs/typescript-support.md

@@ -3,9 +3,19 @@ id: typescript-support
 title: TypeScript Support
 ---
 
+## Initialization {#initialization}
+
+Docusaurus supports writing and using TypeScript theme components. If the init template provides a Typescript variant, you can directly initialize a site with full TypeScript support by using the `--typescript` flag.
+
+```bash
+npx @docusaurus/init@latest init my-website classic --typescript
+```
+
+Below are some guides on how to migrate an existing project to TypeScript.
+
 ## Setup {#setup}
 
-Docusaurus supports writing and using TypeScript theme components. To start using TypeScript, add `@docusaurus/module-type-aliases` and some `@types` dependencies to your project:
+To start using TypeScript, add `@docusaurus/module-type-aliases` and some `@types` dependencies to your project:
 
 ```bash npm2yarn
 npm install --save-dev typescript @docusaurus/module-type-aliases @types/react @types/react-router-dom @types/react-helmet @tsconfig/docusaurus

yarn.lock

@@ -3849,6 +3849,11 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.1.1.tgz#3348564048e7a2d7398c935d466c0414ebb6a669"
   integrity sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==
 
+"@tsconfig/docusaurus@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@tsconfig/docusaurus/-/docusaurus-1.0.3.tgz#040582bdceb27336d7abf2301fb0f4c909a9ac2f"
+  integrity sha512-g4X3HvNXbkowvEdPLu759fZjbXoazPjvi2a/fAAITp2yMOGeSKpHuY6N538ZY+1u6Z91Er3QKPtYGdZQ+tqXUA==
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.14"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.14.tgz#faaeefc4185ec71c389f4501ee5ec84b170cc402"
@@ -4340,10 +4345,10 @@
     "@types/webpack" "^4"
     "@types/webpack-dev-server" "*"
 
-"@types/react-helmet@*", "@types/react-helmet@^6.0.0":
+"@types/react-helmet@*", "@types/react-helmet@^6.0.0", "@types/react-helmet@^6.1.2":
-  version "6.1.1"
+  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.1.tgz#4fde22cbcaa1b461642e1d719cc6162d95acb110"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.2.tgz#e9d7d16b29e4ec5716711c52c35c3cec45819eac"
-  integrity sha512-VmSCMz6jp/06DABoY60vQa++h1YFt0PfAI23llxBJHbowqFgLUL0dhS1AQeVPNqYfRp9LAfokrfWACTNeobOrg==
+  integrity sha512-dcfAZNlWb5JYFbO9CGfrPWLJAyFcT6UeR3u35eBbv8liY2Rg4K7fM1G5+HnwVgot+C+kVwXAZ8pLEn2jsMfTDg==
   dependencies:
     "@types/react" "*"
 
@@ -4364,10 +4369,10 @@
     "@types/react" "*"
     "@types/react-router" "*"
 
-"@types/react-router-dom@*":
+"@types/react-router-dom@*", "@types/react-router-dom@^5.1.8":
-  version "5.1.7"
+  version "5.1.8"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.7.tgz#a126d9ea76079ffbbdb0d9225073eb5797ab7271"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.8.tgz#bf3e1c8149b3d62eaa206d58599de82df0241192"
-  integrity sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==
+  integrity sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==
   dependencies:
     "@types/history" "*"
     "@types/react" "*"
@@ -4381,10 +4386,10 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^17.0.2":
+"@types/react@*", "@types/react@^17.0.14", "@types/react@^17.0.2":
-  version "17.0.11"
+  version "17.0.15"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.15.tgz#c7533dc38025677e312606502df7656a6ea626d0"
-  integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==
+  integrity sha512-uTKHDK9STXFHLaKv6IMnwp52fm0hwU+N89w/p9grdUqcFA6WuqDyPhaWopbNyE1k/VhgzmHl8pu1L4wITtmlLw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -19489,10 +19494,10 @@ typescript@^3.8.3, typescript@^3.9.7:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.9.tgz#e69905c54bc0681d0518bd4d587cc6f2d0b1a674"
   integrity sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==
 
-typescript@^4.1.5:
+typescript@^4.1.5, typescript@^4.3.5:
-  version "4.3.2"
+  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
-  integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
 
 ua-parser-js@^0.7.18:
   version "0.7.28"