create-docusaurus 2.0.0-beta.18 → 2.0.0-beta.21

package/bin/index.js

@@ -8,13 +8,15 @@
 
 // @ts-check
 
+import path from 'path';
+import {createRequire} from 'module';
 import logger from '@docusaurus/logger';
 import semver from 'semver';
-import path from 'path';
 import {program} from 'commander';
-import {createRequire} from 'module';
 
-const packageJson = createRequire(import.meta.url)('../package.json');
+const packageJson = /** @type {import("../package.json")} */ (
+  createRequire(import.meta.url)('../package.json')
+);
 const requiredVersion = packageJson.engines.node;
 
 if (!semver.satisfies(process.version, requiredVersion)) {
@@ -45,24 +47,12 @@ program
 \`custom\`: enter your custom git clone command. We will prompt you for it.`,
   )
   .description('Initialize website.')
-  .action(
-    (
-      siteName,
-      template,
-      rootDir = '.',
-      {packageManager, skipInstall, typescript, gitStrategy} = {},
-    ) => {
-      // See https://github.com/facebook/docusaurus/pull/6860
-      import('../lib/index.js').then(({default: init}) => {
-        init(path.resolve(rootDir), siteName, template, {
-          packageManager,
-          skipInstall,
-          typescript,
-          gitStrategy,
-        });
-      });
-    },
-  );
+  .action((siteName, template, rootDir, options) => {
+    // See https://github.com/facebook/docusaurus/pull/6860
+    import('../lib/index.js').then(({default: init}) => {
+      init(path.resolve(rootDir ?? '.'), siteName, template, options);
+    });
+  });
 
 program.parse(process.argv);
 

package/lib/index.d.ts

@@ -4,17 +4,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const SupportedPackageManagers: {
+declare type CLIOptions = {
+    packageManager?: PackageManager;
+    skipInstall?: boolean;
+    typescript?: boolean;
+    gitStrategy?: GitStrategy;
+};
+declare const lockfileNames: {
     npm: string;
     yarn: string;
     pnpm: string;
 };
-declare type SupportedPackageManager = keyof typeof SupportedPackageManagers;
+declare type PackageManager = keyof typeof lockfileNames;
 declare const gitStrategies: readonly ["deep", "shallow", "copy", "custom"];
-export default function init(rootDir: string, siteName?: string, reqTemplate?: string, cliOptions?: Partial<{
-    packageManager: SupportedPackageManager;
-    skipInstall: boolean;
-    typescript: boolean;
-    gitStrategy: typeof gitStrategies[number];
-}>): Promise<void>;
+declare type GitStrategy = typeof gitStrategies[number];
+export default function init(rootDir: string, reqName?: string, reqTemplate?: string, cliOptions?: CLIOptions): Promise<void>;
 export {};

package/lib/index.js

@@ -4,28 +4,27 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import logger from '@docusaurus/logger';
 import fs from 'fs-extra';
-import prompts from 'prompts';
+import { fileURLToPath } from 'url';
 import path from 'path';
-import shell from 'shelljs';
 import _ from 'lodash';
+import logger from '@docusaurus/logger';
+import shell from 'shelljs';
+import prompts from 'prompts';
 import supportsColor from 'supports-color';
-import { fileURLToPath } from 'url';
-const RecommendedTemplate = 'classic';
-const TypeScriptTemplateSuffix = '-typescript';
+import { escapeShellArg } from '@docusaurus/utils';
 // Only used in the rare, rare case of running globally installed create +
 // using --skip-install. We need a default name to show the tip text
-const DefaultPackageManager = 'npm';
-const SupportedPackageManagers = {
+const defaultPackageManager = 'npm';
+const lockfileNames = {
     npm: 'package-lock.json',
     yarn: 'yarn.lock',
     pnpm: 'pnpm-lock.yaml',
 };
-const PackageManagersList = Object.keys(SupportedPackageManagers);
-async function findPackageManagerFromLockFile() {
-    for (const packageManager of PackageManagersList) {
-        const lockFilePath = path.resolve(SupportedPackageManagers[packageManager]);
+const packageManagers = Object.keys(lockfileNames);
+async function findPackageManagerFromLockFile(rootDir) {
+    for (const packageManager of packageManagers) {
+        const lockFilePath = path.join(rootDir, lockfileNames[packageManager]);
         if (await fs.pathExists(lockFilePath)) {
             return packageManager;
         }
@@ -33,88 +32,101 @@ async function findPackageManagerFromLockFile() {
     return undefined;
 }
 function findPackageManagerFromUserAgent() {
-    return PackageManagersList.find((packageManager) => process.env.npm_config_user_agent?.startsWith(packageManager));
+    return packageManagers.find((packageManager) => process.env.npm_config_user_agent?.startsWith(packageManager));
 }
 async function askForPackageManagerChoice() {
     const hasYarn = shell.exec('yarn --version', { silent: true }).code === 0;
-    const hasPNPM = shell.exec('pnpm --version', { silent: true }).code === 0;
-    if (!hasYarn && !hasPNPM) {
+    const hasPnpm = shell.exec('pnpm --version', { silent: true }).code === 0;
+    if (!hasYarn && !hasPnpm) {
         return 'npm';
     }
-    const choices = ['npm', hasYarn && 'yarn', hasPNPM && 'pnpm']
+    const choices = ['npm', hasYarn && 'yarn', hasPnpm && 'pnpm']
         .filter((p) => Boolean(p))
         .map((p) => ({ title: p, value: p }));
-    return (await prompts({
+    return ((await prompts({
         type: 'select',
         name: 'packageManager',
         message: 'Select a package manager...',
         choices,
-    })).packageManager;
+    }, {
+        onCancel() {
+            logger.info `Falling back to name=${defaultPackageManager}`;
+        },
+    })).packageManager ?? defaultPackageManager);
 }
-async function getPackageManager(packageManagerChoice, skipInstall = false) {
-    if (packageManagerChoice &&
-        !PackageManagersList.includes(packageManagerChoice)) {
-        throw new Error(`Invalid package manager choice ${packageManagerChoice}. Must be one of ${PackageManagersList.join(', ')}`);
+async function getPackageManager(dest, { packageManager, skipInstall }) {
+    if (packageManager && !packageManagers.includes(packageManager)) {
+        throw new Error(`Invalid package manager choice ${packageManager}. Must be one of ${packageManagers.join(', ')}`);
     }
-    return (packageManagerChoice ??
-        (await findPackageManagerFromLockFile()) ??
+    return (
+    // If dest already contains a lockfile (e.g. if using a local template), we
+    // always use that instead
+    (await findPackageManagerFromLockFile(dest)) ??
+        packageManager ??
+        (await findPackageManagerFromLockFile('.')) ??
         findPackageManagerFromUserAgent() ??
         // This only happens if the user has a global installation in PATH
-        (skipInstall ? DefaultPackageManager : askForPackageManagerChoice()));
-}
-function isValidGitRepoUrl(gitRepoUrl) {
-    return ['https://', 'git@'].some((item) => gitRepoUrl.startsWith(item));
+        (skipInstall ? defaultPackageManager : askForPackageManagerChoice()));
 }
-async function updatePkg(pkgPath, obj) {
-    const content = await fs.readFile(pkgPath, 'utf-8');
-    const pkg = JSON.parse(content);
-    const newPkg = Object.assign(pkg, obj);
-    await fs.outputFile(pkgPath, `${JSON.stringify(newPkg, null, 2)}\n`);
-}
-async function readTemplates(templatesDir) {
-    const templates = (await fs.readdir(templatesDir)).filter((d) => !d.startsWith('.') &&
+const recommendedTemplate = 'classic';
+const typeScriptTemplateSuffix = '-typescript';
+const templatesDir = fileURLToPath(new URL('../templates', import.meta.url));
+async function readTemplates() {
+    const dirContents = await fs.readdir(templatesDir);
+    const templates = await Promise.all(dirContents
+        .filter((d) => !d.startsWith('.') &&
         !d.startsWith('README') &&
-        !d.endsWith(TypeScriptTemplateSuffix) &&
-        d !== 'shared');
+        !d.endsWith(typeScriptTemplateSuffix) &&
+        d !== 'shared')
+        .map(async (name) => {
+        const tsVariantPath = path.join(templatesDir, `${name}${typeScriptTemplateSuffix}`);
+        return {
+            name,
+            path: path.join(templatesDir, name),
+            tsVariantPath: (await fs.pathExists(tsVariantPath))
+                ? tsVariantPath
+                : undefined,
+        };
+    }));
     // Classic should be first in list!
-    return _.sortBy(templates, (t) => t !== RecommendedTemplate);
+    return _.sortBy(templates, (t) => t.name !== recommendedTemplate);
 }
-function createTemplateChoices(templates) {
-    function makeNameAndValueChoice(value) {
-        const title = value === RecommendedTemplate ? `${value} (recommended)` : value;
-        return { title, value };
-    }
-    return [
-        ...templates.map((template) => makeNameAndValueChoice(template)),
-        makeNameAndValueChoice('Git repository'),
-        makeNameAndValueChoice('Local template'),
-    ];
-}
-function getTypeScriptBaseTemplate(template) {
-    if (template.endsWith(TypeScriptTemplateSuffix)) {
-        return template.replace(TypeScriptTemplateSuffix, '');
-    }
-    return undefined;
-}
-async function copyTemplate(templatesDir, template, dest) {
+async function copyTemplate(template, dest, typescript) {
     await fs.copy(path.join(templatesDir, 'shared'), dest);
     // TypeScript variants will copy duplicate resources like CSS & config from
     // base template
-    const tsBaseTemplate = getTypeScriptBaseTemplate(template);
-    if (tsBaseTemplate) {
-        const tsBaseTemplatePath = path.resolve(templatesDir, tsBaseTemplate);
-        await fs.copy(tsBaseTemplatePath, dest, {
+    if (typescript) {
+        await fs.copy(template.path, dest, {
             filter: async (filePath) => (await fs.stat(filePath)).isDirectory() ||
                 path.extname(filePath) === '.css' ||
                 path.basename(filePath) === 'docusaurus.config.js',
         });
     }
-    await fs.copy(path.resolve(templatesDir, template), dest, {
-        // Symlinks don't exist in published NPM packages anymore, so this is only
+    await fs.copy(typescript ? template.tsVariantPath : template.path, dest, {
+        // Symlinks don't exist in published npm packages anymore, so this is only
         // to prevent errors during local testing
         filter: async (filePath) => !(await fs.lstat(filePath)).isSymbolicLink(),
     });
 }
+function createTemplateChoices(templates) {
+    function makeNameAndValueChoice(value) {
+        if (typeof value === 'string') {
+            return { title: value, value };
+        }
+        const title = value.name === recommendedTemplate
+            ? `${value.name} (recommended)`
+            : value.name;
+        return { title, value };
+    }
+    return [
+        ...templates.map((template) => makeNameAndValueChoice(template)),
+        makeNameAndValueChoice('Git repository'),
+        makeNameAndValueChoice('Local template'),
+    ];
+}
+function isValidGitRepoUrl(gitRepoUrl) {
+    return ['https://', 'git@'].some((item) => gitRepoUrl.startsWith(item));
+}
 const gitStrategies = ['deep', 'shallow', 'copy', 'custom'];
 async function getGitCommand(gitStrategy) {
     switch (gitStrategy) {
@@ -122,67 +134,104 @@ async function getGitCommand(gitStrategy) {
         case 'copy':
             return 'git clone --recursive --depth 1';
         case 'custom': {
-            const { command } = await prompts({
+            const { command } = (await prompts({
                 type: 'text',
                 name: 'command',
                 message: 'Write your own git clone command. The repository URL and destination directory will be supplied. E.g. "git clone --depth 10"',
-            });
-            return command;
+            }, {
+                onCancel() {
+                    logger.info `Falling back to code=${'git clone'}`;
+                },
+            }));
+            return command ?? 'git clone';
         }
         case 'deep':
         default:
             return 'git clone';
     }
 }
-export default async function init(rootDir, siteName, reqTemplate, cliOptions = {}) {
-    const templatesDir = fileURLToPath(new URL('../templates', import.meta.url));
-    const templates = await readTemplates(templatesDir);
-    const hasTS = (templateName) => fs.pathExists(path.join(templatesDir, `${templateName}${TypeScriptTemplateSuffix}`));
-    let name = siteName;
-    // Prompt if siteName is not passed from CLI.
-    if (!name) {
-        const prompt = await prompts({
-            type: 'text',
-            name: 'name',
-            message: 'What should we name this site?',
-            initial: 'website',
-        });
-        name = prompt.name;
+async function getSiteName(reqName, rootDir) {
+    async function validateSiteName(siteName) {
+        if (!siteName) {
+            return 'A website name is required.';
+        }
+        const dest = path.resolve(rootDir, siteName);
+        if (await fs.pathExists(dest)) {
+            return logger.interpolate `Directory already exists at path=${dest}!`;
+        }
+        return true;
     }
-    if (!name) {
-        logger.error('A website name is required.');
-        process.exit(1);
+    if (reqName) {
+        const res = validateSiteName(reqName);
+        if (typeof res === 'string') {
+            throw new Error(res);
+        }
+        return reqName;
     }
-    const dest = path.resolve(rootDir, name);
-    if (await fs.pathExists(dest)) {
-        logger.error `Directory already exists at path=${dest}!`;
-        process.exit(1);
+    const { siteName } = (await prompts({
+        type: 'text',
+        name: 'siteName',
+        message: 'What should we name this site?',
+        initial: 'website',
+        validate: validateSiteName,
+    }, {
+        onCancel() {
+            logger.error('A website name is required.');
+            process.exit(1);
+        },
+    }));
+    return siteName;
+}
+async function getSource(reqTemplate, templates, cliOptions) {
+    if (reqTemplate) {
+        if (isValidGitRepoUrl(reqTemplate)) {
+            if (cliOptions.gitStrategy &&
+                !gitStrategies.includes(cliOptions.gitStrategy)) {
+                logger.error `Invalid git strategy: name=${cliOptions.gitStrategy}. Value must be one of ${gitStrategies.join(', ')}.`;
+                process.exit(1);
+            }
+            return {
+                type: 'git',
+                url: reqTemplate,
+                strategy: cliOptions.gitStrategy ?? 'deep',
+            };
+        }
+        else if (await fs.pathExists(path.resolve(reqTemplate))) {
+            return {
+                type: 'local',
+                path: path.resolve(reqTemplate),
+            };
+        }
+        const template = templates.find((t) => t.name === reqTemplate);
+        if (!template) {
+            logger.error('Invalid template.');
+            process.exit(1);
+        }
+        if (cliOptions.typescript && !template.tsVariantPath) {
+            logger.error `Template name=${reqTemplate} doesn't provide the TypeScript variant.`;
+            process.exit(1);
+        }
+        return {
+            type: 'template',
+            template,
+            typescript: cliOptions.typescript ?? false,
+        };
     }
-    let template = reqTemplate;
-    let useTS = cliOptions.typescript;
-    // Prompt if template is not provided from CLI.
-    if (!template) {
-        const templatePrompt = await prompts({
+    const template = cliOptions.gitStrategy
+        ? 'Git repository'
+        : (await prompts({
             type: 'select',
             name: 'template',
             message: 'Select a template below...',
             choices: createTemplateChoices(templates),
-        });
-        template = templatePrompt.template;
-        if (template && !useTS && (await 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;
-        }
-    }
-    let gitStrategy = cliOptions.gitStrategy ?? 'deep';
-    // If user choose Git repository, we'll prompt for the url.
+        }, {
+            onCancel() {
+                logger.error('A choice is required.');
+                process.exit(1);
+            },
+        })).template;
     if (template === 'Git repository') {
-        const repoPrompt = await prompts({
+        const { gitRepoUrl } = (await prompts({
             type: 'text',
             name: 'gitRepoUrl',
             validate: (url) => {
@@ -192,26 +241,45 @@ export default async function init(rootDir, siteName, reqTemplate, cliOptions =
                 return logger.red('Invalid repository URL');
             },
             message: logger.interpolate `Enter a repository URL from GitHub, Bitbucket, GitLab, or any other public repo.
-(e.g: path=${'https://github.com/ownerName/repoName.git'})`,
-        });
-        ({ gitStrategy } = await prompts({
-            type: 'select',
-            name: 'gitStrategy',
-            message: 'How should we clone this repo?',
-            choices: [
-                { title: 'Deep clone: preserve full history', value: 'deep' },
-                { title: 'Shallow clone: clone with --depth=1', value: 'shallow' },
-                {
-                    title: 'Copy: do a shallow clone, but do not create a git repo',
-                    value: 'copy',
-                },
-                { title: 'Custom: enter your custom git clone command', value: 'custom' },
-            ],
+(e.g: url=${'https://github.com/ownerName/repoName.git'})`,
+        }, {
+            onCancel() {
+                logger.error('A git repo URL is required.');
+                process.exit(1);
+            },
         }));
-        template = repoPrompt.gitRepoUrl;
+        let strategy = cliOptions.gitStrategy;
+        if (!strategy) {
+            ({ strategy } = (await prompts({
+                type: 'select',
+                name: 'strategy',
+                message: 'How should we clone this repo?',
+                choices: [
+                    { title: 'Deep clone: preserve full history', value: 'deep' },
+                    { title: 'Shallow clone: clone with --depth=1', value: 'shallow' },
+                    {
+                        title: 'Copy: do a shallow clone, but do not create a git repo',
+                        value: 'copy',
+                    },
+                    {
+                        title: 'Custom: enter your custom git clone command',
+                        value: 'custom',
+                    },
+                ],
+            }, {
+                onCancel() {
+                    logger.info `Falling back to name=${'deep'}`;
+                },
+            })));
+        }
+        return {
+            type: 'git',
+            url: gitRepoUrl,
+            strategy: strategy ?? 'deep',
+        };
     }
     else if (template === 'Local template') {
-        const dirPrompt = await prompts({
+        const { templateDir } = (await prompts({
             type: 'text',
             name: 'templateDir',
             validate: async (dir) => {
@@ -225,64 +293,76 @@ export default async function init(rootDir, siteName, reqTemplate, cliOptions =
                 return logger.red('Please enter a valid path.');
             },
             message: 'Enter a local folder path, relative to the current working directory.',
-        });
-        template = dirPrompt.templateDir;
+        }, {
+            onCancel() {
+                logger.error('A file path is required.');
+                process.exit(1);
+            },
+        }));
+        return {
+            type: 'local',
+            path: templateDir,
+        };
     }
-    if (!template) {
-        logger.error('Template should not be empty');
-        process.exit(1);
+    let useTS = cliOptions.typescript;
+    if (!useTS && template.tsVariantPath) {
+        ({ useTS } = (await prompts({
+            type: 'confirm',
+            name: 'useTS',
+            message: 'This template is available in TypeScript. Do you want to use the TS variant?',
+            initial: false,
+        })));
     }
+    return {
+        type: 'template',
+        template,
+        typescript: useTS ?? false,
+    };
+}
+async function updatePkg(pkgPath, obj) {
+    const pkg = (await fs.readJSON(pkgPath));
+    const newPkg = Object.assign(pkg, obj);
+    await fs.outputFile(pkgPath, `${JSON.stringify(newPkg, null, 2)}\n`);
+}
+export default async function init(rootDir, reqName, reqTemplate, cliOptions = {}) {
+    const templates = await readTemplates();
+    const siteName = await getSiteName(reqName, rootDir);
+    const dest = path.resolve(rootDir, siteName);
+    const source = await getSource(reqTemplate, templates, cliOptions);
     logger.info('Creating new Docusaurus project...');
-    if (isValidGitRepoUrl(template)) {
-        logger.info `Cloning Git template path=${template}...`;
-        if (!gitStrategies.includes(gitStrategy)) {
-            logger.error `Invalid git strategy: name=${gitStrategy}. Value must be one of ${gitStrategies.join(', ')}.`;
+    if (source.type === 'git') {
+        const gitCommand = await getGitCommand(source.strategy);
+        const gitCloneCommand = `${gitCommand} ${escapeShellArg(source.url)} ${escapeShellArg(dest)}`;
+        if (shell.exec(gitCloneCommand).code !== 0) {
+            logger.error `Cloning Git template failed!`;
             process.exit(1);
         }
-        const command = await getGitCommand(gitStrategy);
-        if (shell.exec(`${command} ${template} ${dest}`).code !== 0) {
-            logger.error `Cloning Git template name=${template} failed!`;
-            process.exit(1);
-        }
-        if (gitStrategy === 'copy') {
+        if (source.strategy === 'copy') {
             await fs.remove(path.join(dest, '.git'));
         }
     }
-    else if (templates.includes(template)) {
-        // Docusaurus templates.
-        if (useTS) {
-            if (!(await hasTS(template))) {
-                logger.error `Template name=${template} doesn't provide the Typescript variant.`;
-                process.exit(1);
-            }
-            template = `${template}${TypeScriptTemplateSuffix}`;
-        }
+    else if (source.type === 'template') {
         try {
-            await copyTemplate(templatesDir, template, dest);
+            await copyTemplate(source.template, dest, source.typescript);
         }
         catch (err) {
-            logger.error `Copying Docusaurus template name=${template} failed!`;
+            logger.error `Copying Docusaurus template name=${source.template.name} failed!`;
             throw err;
         }
     }
-    else if (await fs.pathExists(path.resolve(template))) {
-        const templateDir = path.resolve(template);
+    else {
         try {
-            await fs.copy(templateDir, dest);
+            await fs.copy(source.path, dest);
         }
         catch (err) {
-            logger.error `Copying local template path=${templateDir} failed!`;
+            logger.error `Copying local template path=${source.path} failed!`;
             throw err;
         }
     }
-    else {
-        logger.error('Invalid template.');
-        process.exit(1);
-    }
     // Update package.json info.
     try {
         await updatePkg(path.join(dest, 'package.json'), {
-            name: _.kebabCase(name),
+            name: _.kebabCase(siteName),
             version: '0.0.0',
             private: true,
         });
@@ -301,15 +381,15 @@ export default async function init(rootDir, siteName, reqTemplate, cliOptions =
     }
     // Display the most elegant way to cd.
     const cdpath = path.relative('.', dest);
-    const pkgManager = await getPackageManager(cliOptions.packageManager, cliOptions.skipInstall);
+    const pkgManager = await getPackageManager(dest, cliOptions);
     if (!cliOptions.skipInstall) {
         shell.cd(dest);
         logger.info `Installing dependencies with name=${pkgManager}...`;
         if (shell.exec(pkgManager === 'yarn' ? 'yarn' : `${pkgManager} install --color always`, {
             env: {
                 ...process.env,
-                // Force coloring the output, since the command is invoked,
-                // by shelljs which is not the interactive shell
+                // Force coloring the output, since the command is invoked by
+                // shelljs, which is not an interactive shell
                 ...(supportsColor.stdout ? { FORCE_COLOR: '1' } : {}),
             },
         }).code !== 0) {
@@ -322,7 +402,7 @@ export default async function init(rootDir, siteName, reqTemplate, cliOptions =
         }
     }
     const useNpm = pkgManager === 'npm';
-    logger.success `Created path=${cdpath}.`;
+    logger.success `Created name=${cdpath}.`;
     logger.info `Inside that directory, you can run several commands:
 
   code=${`${pkgManager} start`}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-docusaurus",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.21",
   "description": "Create Docusaurus apps easily.",
   "type": "module",
   "repository": {
@@ -13,8 +13,8 @@
   },
   "scripts": {
     "create-docusaurus": "create-docusaurus",
-    "build": "tsc -p tsconfig.build.json",
-    "watch": "tsc -p tsconfig.build.json --watch"
+    "build": "tsc --build",
+    "watch": "tsc --build --watch"
   },
   "bin": "bin/index.js",
   "publishConfig": {
@@ -22,21 +22,22 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/logger": "2.0.0-beta.18",
+    "@docusaurus/logger": "2.0.0-beta.21",
+    "@docusaurus/utils": "2.0.0-beta.21",
     "commander": "^5.1.0",
-    "fs-extra": "^10.0.1",
+    "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",
     "prompts": "^2.4.2",
-    "semver": "^7.3.5",
+    "semver": "^7.3.7",
     "shelljs": "^0.8.5",
-    "supports-color": "^9.2.1",
-    "tslib": "^2.3.1"
+    "supports-color": "^9.2.2",
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
     "@types/supports-color": "^8.1.1"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=16.14"
   },
-  "gitHead": "1a945d06993d53376e61bed2c942799fe07dc336"
+  "gitHead": "69ac49fc6909517f13615ee40290c4bd00c39df4"
 }

package/templates/classic/docusaurus.config.js

@@ -13,9 +13,20 @@ const config = {
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
   organizationName: 'facebook', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
 
+  // Even if you don't use internalization, you can use this field to set useful
+  // metadata like html lang. For example, if your site is Chinese, you may want
+  // to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
   presets: [
     [
       'classic',
@@ -24,11 +35,14 @@ const config = {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
-          editUrl: 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+          // Remove this to remove the "edit this page" links.
+          editUrl:
+            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },

package/templates/classic/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-2-classic-template",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.21",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -14,14 +14,17 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.18",
-    "@docusaurus/preset-classic": "2.0.0-beta.18",
+    "@docusaurus/core": "2.0.0-beta.21",
+    "@docusaurus/preset-classic": "2.0.0-beta.21",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
-    "prism-react-renderer": "^1.3.1",
+    "prism-react-renderer": "^1.3.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-beta.21"
+  },
   "browserslist": {
     "production": [
       ">0.5%",

package/templates/classic/src/css/custom.css

@@ -14,6 +14,7 @@
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -25,15 +26,5 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
-}
-
-.docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.3);
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

package/templates/classic/src/pages/index.js

@@ -1,11 +1,12 @@
 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 Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
+import styles from './index.module.css';
+
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (

package/templates/classic-typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-2-classic-typescript-template",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.21",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -15,18 +15,18 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.18",
-    "@docusaurus/preset-classic": "2.0.0-beta.18",
+    "@docusaurus/core": "2.0.0-beta.21",
+    "@docusaurus/preset-classic": "2.0.0-beta.21",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
-    "prism-react-renderer": "^1.3.1",
+    "prism-react-renderer": "^1.3.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.18",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.21",
     "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.4"
   },
   "browserslist": {
     "production": [

package/templates/classic-typescript/src/pages/index.tsx

@@ -1,11 +1,12 @@
 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 Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
+import styles from './index.module.css';
+
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (

package/templates/facebook/docusaurus.config.js

@@ -18,6 +18,9 @@ const config = {
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
   organizationName: 'facebook', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
 
@@ -29,12 +32,14 @@ const config = {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },

package/templates/facebook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-2-facebook-template",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.21",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -18,25 +18,25 @@
     "format:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,md,mdx}\""
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.18",
-    "@docusaurus/preset-classic": "2.0.0-beta.18",
+    "@docusaurus/core": "2.0.0-beta.21",
+    "@docusaurus/preset-classic": "2.0.0-beta.21",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.17.0",
-    "eslint": "^8.11.0",
+    "@babel/eslint-parser": "^7.18.2",
+    "eslint": "^8.16.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "^2.6.0",
-    "stylelint": "^14.6.0"
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "prettier": "^2.6.2",
+    "stylelint": "^14.8.5"
   },
   "browserslist": {
     "production": [

package/templates/facebook/src/css/custom.css

@@ -35,10 +35,3 @@
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
 }
-
-.docusaurus-highlight-code-line {
-  background-color: rgb(72, 77, 91);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}

package/templates/shared/docs/tutorial-basics/_category_.json

@@ -1,4 +1,8 @@
 {
   "label": "Tutorial - Basics",
-  "position": 2
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn the most important Docusaurus concepts."
+  }
 }

package/templates/shared/docs/tutorial-basics/markdown-features.mdx

@@ -43,7 +43,7 @@ Let's see how to [Create a page](./create-a-page.md).
 
 Regular Markdown images are supported.
 
-Add an image at `static/img/docusaurus.png` and display it in Markdown:
+You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
 
 ```md
 ![Docusaurus logo](/img/docusaurus.png)
@@ -51,6 +51,8 @@ Add an image at `static/img/docusaurus.png` and display it in Markdown:
 
 ![Docusaurus logo](/img/docusaurus.png)
 
+You can reference images relative to the current file as well, as shown in [the extra guides](../tutorial-extras/manage-docs-versions.md).
+
 ## Code Blocks
 
 Markdown code blocks are supported with Syntax highlighting.

package/templates/shared/docs/tutorial-extras/_category_.json

@@ -1,4 +1,7 @@
 {
   "label": "Tutorial - Extras",
-  "position": 3
+  "position": 3,
+  "link": {
+    "type": "generated-index"
+  }
 }

package/templates/shared/docs/tutorial-extras/manage-docs-versions.md

@@ -45,7 +45,7 @@ module.exports = {
 
 The docs version dropdown appears in your navbar:
 
-![Docs Version Dropdown](/img/tutorial/docsVersionDropdown.png)
+![Docs Version Dropdown](./img/docsVersionDropdown.png)
 
 ## Update an existing version
 

package/templates/shared/docs/tutorial-extras/translate-your-site.md

@@ -71,7 +71,7 @@ module.exports = {
 
 The locale dropdown now appears in your navbar:
 
-![Locale Dropdown](/img/tutorial/localeDropdown.png)
+![Locale Dropdown](./img/localeDropdown.png)
 
 ## Build your localized site