From df9f4c38e5efb0e85621d4279d00e8849c28d85d Mon Sep 17 00:00:00 2001 From: Nytelife26 Date: Sun, 4 Apr 2021 11:40:26 +0100 Subject: [PATCH 1/2] chore: switch chalk -> colorette --- packages/docusaurus-init/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus-init/package.json b/packages/docusaurus-init/package.json index 641207424305..03915270835a 100644 --- a/packages/docusaurus-init/package.json +++ b/packages/docusaurus-init/package.json @@ -22,7 +22,7 @@ }, "license": "MIT", "dependencies": { - "chalk": "^4.1.0", + "colorette": "^1.2.2", "commander": "^5.1.0", "fs-extra": "^9.1.0", "lodash": "^4.17.20", From ebe0a701a6e42853fb4da7e320cabd8d9e527bcb Mon Sep 17 00:00:00 2001 From: Nytelife26 Date: Sun, 4 Apr 2021 11:41:51 +0100 Subject: [PATCH 2/2] refactor(docusaurus-init): reformat and cleanup templates refactor(docusaurus-init): switch chalk -> colorette refactor(docusaurus-init): cleanup main script chore(docusaurus-init): reformat readme refactor(docusaurus-init/templates): cleanup bootstrap refactor(docusaurus-init/templates): cleanup facebook style(docusaurus-init): apply lint --- packages/docusaurus-init/bin/index.js | 16 ++- packages/docusaurus-init/src/index.ts | 105 ++++++++---------- packages/docusaurus-init/src/types/cli.ts | 11 ++ packages/docusaurus-init/src/types/index.ts | 8 ++ .../templates/{README.MD => README.md} | 6 +- .../templates/bootstrap/README.md | 16 +-- .../templates/bootstrap/package.json | 3 +- .../templates/bootstrap/src/pages/index.js | 9 +- .../templates/classic/README.md | 8 +- .../templates/facebook/README.md | 20 ++-- .../templates/facebook/package.json | 3 +- .../templates/facebook/src/pages/index.js | 9 +- yarn.lock | 5 + 13 files changed, 118 insertions(+), 101 deletions(-) create mode 100644 packages/docusaurus-init/src/types/cli.ts create mode 100644 packages/docusaurus-init/src/types/index.ts rename packages/docusaurus-init/templates/{README.MD => README.md} (60%) diff --git a/packages/docusaurus-init/bin/index.js b/packages/docusaurus-init/bin/index.js index 242f4c5e7fa5..ef1e128393dd 100755 --- a/packages/docusaurus-init/bin/index.js +++ b/packages/docusaurus-init/bin/index.js @@ -7,7 +7,7 @@ * LICENSE file in the root directory of this source tree. */ -const chalk = require('chalk'); +const color = require('colorette'); const semver = require('semver'); const path = require('path'); const program = require('commander'); @@ -15,19 +15,17 @@ const {default: init} = require('../lib'); const requiredVersion = require('../package.json').engines.node; if (!semver.satisfies(process.version, requiredVersion)) { - console.log( - chalk.red(`\nMinimum node version not met :)`) + - chalk.yellow( - `\nYou are using Node ${process.version}, Requirement: Node ${requiredVersion}.\n`, - ), - ); + console.log(`${color.red('Minimum Node version not met :)')} +${color.yellow( + `You are using Node ${process.version} - requirement: ${requiredVersion}.`, +)}`); process.exit(1); } function wrapCommand(fn) { return (...args) => fn(...args).catch((err) => { - console.error(chalk.red(err.stack)); + console.error(color.red(err.stack)); process.exitCode = 1; }); } @@ -50,7 +48,7 @@ program program.arguments('').action((cmd) => { program.outputHelp(); - console.log(` ${chalk.red(`\n Unknown command ${chalk.yellow(cmd)}.`)}`); + console.log(` ${color.red(`\n Unknown command ${color.yellow(cmd)}.`)}`); console.log(); }); diff --git a/packages/docusaurus-init/src/index.ts b/packages/docusaurus-init/src/index.ts index bb096f6f2d5a..7b49f2b5a1f9 100644 --- a/packages/docusaurus-init/src/index.ts +++ b/packages/docusaurus-init/src/index.ts @@ -5,13 +5,14 @@ * LICENSE file in the root directory of this source tree. */ -import chalk from 'chalk'; +import colorette from 'colorette'; import fs from 'fs-extra'; import {execSync} from 'child_process'; import prompts, {Choice} from 'prompts'; import path from 'path'; import shell from 'shelljs'; import {kebabCase} from 'lodash'; +import type {CliOptions} from './types/index'; function hasYarn(): boolean { try { @@ -22,8 +23,8 @@ function hasYarn(): boolean { } } -function isValidGitRepoUrl(gitRepoUrl: string): boolean { - return ['https://', 'git@'].some((item) => gitRepoUrl.startsWith(item)); +function isValidGitRepoUrl(gitRepoUrl?: string): boolean { + return /^((https|git):\/\/)|(git@)/g.test(gitRepoUrl ?? ''); } async function updatePkg( @@ -41,27 +42,22 @@ export default async function init( rootDir: string, siteName?: string, reqTemplate?: string, - cliOptions: Partial<{ - useNpm: boolean; - skipInstall: boolean; - }> = {}, + cliOptions: CliOptions = {}, ): Promise { - const useYarn = !cliOptions.useNpm ? hasYarn() : false; + const useYarn = !cliOptions.useNpm && hasYarn(); const templatesDir = path.resolve(__dirname, '../templates'); - const templates = fs - .readdirSync(templatesDir) - .filter((d) => !d.startsWith('.') && !d.startsWith('README')); + const templates = []; + // eslint-disable-next-line no-restricted-syntax + for await (const entry of await fs.opendir(templatesDir)) { + if (entry.isDirectory()) { + templates.push(entry.name); + } + } - function makeNameAndValueChoice(value: string): Choice { + function makeChoice(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; // Prompt if siteName is not passed from CLI. @@ -76,12 +72,12 @@ export default async function init( } if (!name) { - throw new Error(chalk.red('A site name is required')); + throw new Error(colorette.red('A site name is required')); } const dest = path.resolve(rootDir, name); if (fs.existsSync(dest)) { - throw new Error(`Directory already exists at ${dest} !`); + throw new Error(`Directory already exists at ${dest}!`); } let template = reqTemplate; @@ -91,9 +87,12 @@ export default async function init( type: 'select', name: 'template', message: 'Select a template below...', - choices: templateChoices, + choices: [ + ...templates.map((templateDir) => makeChoice(templateDir)), + makeChoice('Git repository'), + ], }); - template = templatePrompt.template; + template = templatePrompt.template as string; } // If user choose Git repository, we'll prompt for the url. @@ -102,36 +101,36 @@ export default async function init( type: 'text', name: 'gitRepoUrl', validate: (url?: string) => { - if (url && isValidGitRepoUrl(url)) { + if (isValidGitRepoUrl(url)) { return true; } - return chalk.red(`Invalid repository URL`); + return colorette.red(`Invalid repository URL`); }, message: - 'Enter a repository URL from GitHub, BitBucket, GitLab, or any other public repo. \n(e.g: https://github.com/ownerName/repoName.git)', + 'Enter a repository URL from GitHub, BitBucket, GitLab, or any other public repo.\n(e.g: https://github.com/owner/repo.git)', }); - template = repoPrompt.gitRepoUrl; + template = repoPrompt.gitRepoUrl as string; } - console.log(); - console.log(chalk.cyan('Creating new Docusaurus project ...')); - console.log(); + console.log(`\n${colorette.cyan('Creating new Docusaurus project ...')}\n`); - if (template && isValidGitRepoUrl(template)) { - console.log(`Cloning Git template: ${chalk.cyan(template)}`); + if (isValidGitRepoUrl(template)) { + console.log(`Cloning Git template: ${colorette.cyan(template)}`); if ( shell.exec(`git clone --recursive ${template} ${dest}`, {silent: true}) .code !== 0 ) { - throw new Error(chalk.red(`Cloning Git template: ${template} failed!`)); + throw new Error( + colorette.red(`Cloning Git template: ${template} failed!`), + ); } - } else if (template && templates.includes(template)) { + } else if (templates?.includes(template)) { // Docusaurus templates. try { await fs.copy(path.resolve(templatesDir, template), dest); } catch (err) { console.log( - `Copying Docusaurus template: ${chalk.cyan(template)} failed!`, + `Copying Docusaurus template: ${colorette.cyan(template)} failed!`, ); throw err; } @@ -147,7 +146,7 @@ export default async function init( private: true, }); } catch (err) { - console.log(chalk.red('Failed to update package.json')); + console.log(colorette.red('Failed to update package.json')); throw err; } @@ -164,41 +163,33 @@ export default async function init( const pkgManager = useYarn ? 'yarn' : 'npm'; if (!cliOptions.skipInstall) { - console.log(`Installing dependencies with: ${chalk.cyan(pkgManager)}`); + console.log(`Installing dependencies with: ${colorette.cyan(pkgManager)}`); try { shell.exec(`cd "${name}" && ${useYarn ? 'yarn' : 'npm install'}`); } catch (err) { - console.log(chalk.red('Installation failed')); + console.log(colorette.red('Installation failed')); throw err; } } - console.log(); - // Display the most elegant way to cd. const cdpath = path.join(process.cwd(), name) === dest ? name : path.relative(process.cwd(), name); - console.log(); - console.log(`Success! Created ${chalk.cyan(cdpath)}`); - console.log('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(`\n\nSuccess! Created ${colorette.cyan(cdpath)}`); + console.log('Inside that directory, you can run several commands:\n'); + console.log(` ${colorette.cyan(`${pkgManager} start`)}`); + console.log(' Starts the development server.\n'); + console.log( + ` ${colorette.cyan(`${pkgManager} ${!useYarn && 'run '}build`)}`, + ); console.log(' Bundles the app into static files for production.'); - console.log(); - console.log(chalk.cyan(` ${pkgManager} deploy`)); - console.log(' Publish website to GitHub pages.'); - console.log(); - console.log('We suggest that you begin by typing:'); - console.log(); - console.log(chalk.cyan(' cd'), cdpath); - console.log(` ${chalk.cyan(`${pkgManager} start`)}`); - - console.log(); + console.log(` ${colorette.cyan(`${pkgManager} deploy`)}`); + console.log(' Publish website to GitHub pages.\n'); + console.log('We suggest that you begin by typing:\n'); + console.log(` ${colorette.cyan('cd')} ${cdpath}`); + console.log(` ${colorette.cyan(`${pkgManager} start`)}\n`); console.log('Happy hacking!'); } diff --git a/packages/docusaurus-init/src/types/cli.ts b/packages/docusaurus-init/src/types/cli.ts new file mode 100644 index 000000000000..b410c4ec7a9c --- /dev/null +++ b/packages/docusaurus-init/src/types/cli.ts @@ -0,0 +1,11 @@ +/** + * 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. + */ + +export interface CliOptions { + useNpm?: boolean; + skipInstall?: boolean; +} diff --git a/packages/docusaurus-init/src/types/index.ts b/packages/docusaurus-init/src/types/index.ts new file mode 100644 index 000000000000..230e8ddc35cd --- /dev/null +++ b/packages/docusaurus-init/src/types/index.ts @@ -0,0 +1,8 @@ +/** + * 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. + */ + +export * from './cli'; diff --git a/packages/docusaurus-init/templates/README.MD b/packages/docusaurus-init/templates/README.md similarity index 60% rename from packages/docusaurus-init/templates/README.MD rename to packages/docusaurus-init/templates/README.md index 882b078e990d..1de31bf0012d 100644 --- a/packages/docusaurus-init/templates/README.MD +++ b/packages/docusaurus-init/templates/README.md @@ -1,8 +1,8 @@ # Templates -Official templates provided by Docusaurus. They are designed to be selected when using the `npx @docusaurus/init init [name] [template]` CLI command. +Official templates provided by Docusaurus. They are designed to be selected when using the `npx @docusaurus/init init [name] [template]` command. -## Guide to Test Templates for Developer +## How do I test templates? -1. `yarn install` in the root of the repo (one level above this directory). +1. Run `yarn install` in the root of the repo. 1. Go to any template's directory, example: `cd classic && yarn start`. diff --git a/packages/docusaurus-init/templates/bootstrap/README.md b/packages/docusaurus-init/templates/bootstrap/README.md index a9bf77a27cb9..bb1b89a10ba9 100644 --- a/packages/docusaurus-init/templates/bootstrap/README.md +++ b/packages/docusaurus-init/templates/bootstrap/README.md @@ -4,30 +4,30 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta ### Installation -``` -$ yarn +```sh +yarn install ``` ### Local Development -``` -$ yarn start +```sh +yarn start ``` This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. ### Build -``` -$ yarn build +```sh +yarn build ``` This command generates static content into the `build` directory and can be served using any static contents hosting service. ### Deployment -``` -$ GIT_USER= USE_SSH=true yarn deploy +```sh +GIT_USER= USE_SSH=true yarn deploy ``` If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. diff --git a/packages/docusaurus-init/templates/bootstrap/package.json b/packages/docusaurus-init/templates/bootstrap/package.json index d8e04ee07f8e..882c6d8abde0 100644 --- a/packages/docusaurus-init/templates/bootstrap/package.json +++ b/packages/docusaurus-init/templates/bootstrap/package.json @@ -19,7 +19,8 @@ "@mdx-js/react": "^1.5.8", "classnames": "^2.2.6", "react": "^17.0.1", - "react-dom": "^17.0.1" + "react-dom": "^17.0.1", + "react-if": "^4.0.1" }, "browserslist": { "production": [ diff --git a/packages/docusaurus-init/templates/bootstrap/src/pages/index.js b/packages/docusaurus-init/templates/bootstrap/src/pages/index.js index 49044ad2c02b..c8569e062bda 100644 --- a/packages/docusaurus-init/templates/bootstrap/src/pages/index.js +++ b/packages/docusaurus-init/templates/bootstrap/src/pages/index.js @@ -4,6 +4,7 @@ import Layout from '@theme/Layout'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import {If} from 'react-if'; import styles from './styles.module.css'; @@ -44,11 +45,11 @@ function Feature({imageUrl, title, description}) { const imgUrl = useBaseUrl(imageUrl); return (
- {imgUrl && ( +
{title}
- )} +

{title}

{description}

@@ -72,7 +73,7 @@ export default function Home() {
- {features && features.length > 0 && ( +
{features.map((props, idx) => ( @@ -80,7 +81,7 @@ export default function Home() { ))}
- )} +
diff --git a/packages/docusaurus-init/templates/classic/README.md b/packages/docusaurus-init/templates/classic/README.md index 2ecfcfd620a7..29855bb0e2fa 100644 --- a/packages/docusaurus-init/templates/classic/README.md +++ b/packages/docusaurus-init/templates/classic/README.md @@ -4,13 +4,13 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta ## Installation -```console +```sh yarn install ``` ## Local Development -```console +```sh yarn start ``` @@ -18,7 +18,7 @@ This command starts a local development server and open up a browser window. Mos ## Build -```console +```sh yarn build ``` @@ -26,7 +26,7 @@ This command generates static content into the `build` directory and can be serv ## Deployment -```console +```sh GIT_USER= USE_SSH=true yarn deploy ``` diff --git a/packages/docusaurus-init/templates/facebook/README.md b/packages/docusaurus-init/templates/facebook/README.md index ed4a0de3a6b9..051e54a94828 100644 --- a/packages/docusaurus-init/templates/facebook/README.md +++ b/packages/docusaurus-init/templates/facebook/README.md @@ -4,30 +4,30 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta ### Installation -``` -$ yarn +```sh +yarn install ``` ### Local Development -``` -$ yarn start +```sh +yarn start ``` This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. ### Build -``` -$ yarn build +```sh +yarn build ``` This command generates static content into the `build` directory and can be served using any static contents hosting service. ### Deployment -``` -$ GIT_USER= USE_SSH=true yarn deploy +```sh +GIT_USER= USE_SSH=true yarn deploy ``` If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. @@ -36,6 +36,6 @@ If you are using GitHub pages for hosting, this command is a convenient way to b Some common defaults for linting/formatting have been set for you. If you integrate your project with an open source Continuous Integration system (e.g. Travis CI, CircleCI), you may check for issues using the following command. -``` -$ yarn ci +```sh +yarn ci ``` diff --git a/packages/docusaurus-init/templates/facebook/package.json b/packages/docusaurus-init/templates/facebook/package.json index 4a03d5ad501b..496880cf82ae 100644 --- a/packages/docusaurus-init/templates/facebook/package.json +++ b/packages/docusaurus-init/templates/facebook/package.json @@ -23,7 +23,8 @@ "@mdx-js/react": "^1.6.21", "clsx": "^1.1.1", "react": "^17.0.1", - "react-dom": "^17.0.1" + "react-dom": "^17.0.1", + "react-if": "^4.0.1" }, "devDependencies": { "@babel/eslint-parser": "^7.13.10", diff --git a/packages/docusaurus-init/templates/facebook/src/pages/index.js b/packages/docusaurus-init/templates/facebook/src/pages/index.js index 9ad8a8389c43..943fc5c0090f 100644 --- a/packages/docusaurus-init/templates/facebook/src/pages/index.js +++ b/packages/docusaurus-init/templates/facebook/src/pages/index.js @@ -13,6 +13,7 @@ import Layout from '@theme/Layout'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import {If} from 'react-if'; import styles from './styles.module.css'; const features = [ @@ -52,11 +53,11 @@ function Feature({imageUrl, title, description}) { const imgUrl = useBaseUrl(imageUrl); return (
- {imgUrl && ( +
{title}
- )} +

{title}

{description}

@@ -87,7 +88,7 @@ export default function Home() {
- {features && features.length > 0 && ( +
@@ -102,7 +103,7 @@ export default function Home() {
- )} +
); diff --git a/yarn.lock b/yarn.lock index 3be48ac91ffa..85849ecca63f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16334,6 +16334,11 @@ react-helmet@^6.1.0: react-fast-compare "^3.1.1" react-side-effect "^2.1.0" +react-if@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/react-if/-/react-if-4.0.1.tgz#fd60599f585a55d417d94f9a576047869994fcae" + integrity sha512-TyfDGdBrIAHntLM5YkRbszeqcyzucB3m2ddF46XH10wTZ8SE2ZjNPD8qNphTJ+7j36SZ4qMvqmlMntcsczLAXQ== + react-is@^16.12.0, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"