create-docusaurus 2.0.0-beta.14 → 2.0.0-beta.15

package/lib/index.js

@@ -33,7 +33,7 @@ async function updatePkg(pkgPath, obj) {
     const content = await fs_extra_1.default.readFile(pkgPath, 'utf-8');
     const pkg = JSON.parse(content);
     const newPkg = Object.assign(pkg, obj);
-    await fs_extra_1.default.outputFile(pkgPath, JSON.stringify(newPkg, null, 2));
+    await fs_extra_1.default.outputFile(pkgPath, `${JSON.stringify(newPkg, null, 2)}\n`);
 }
 function readTemplates(templatesDir) {
     const templates = fs_extra_1.default
@@ -225,12 +225,11 @@ async function init(rootDir, siteName, reqTemplate, cliOptions = {}) {
     }
     const pkgManager = useYarn ? 'yarn' : 'npm';
     // Display the most elegant way to cd.
-    const cdpath = path_1.default.join(process.cwd(), name) === dest
-        ? name
-        : path_1.default.relative(process.cwd(), name);
+    const cdpath = path_1.default.relative('.', dest);
     if (!cliOptions.skipInstall) {
+        shelljs_1.default.cd(dest);
         logger_1.default.info `Installing dependencies with name=${pkgManager}...`;
-        if (shelljs_1.default.exec(`cd "${name}" && ${useYarn ? 'yarn' : 'npm install --color always'}`, {
+        if (shelljs_1.default.exec(useYarn ? 'yarn' : 'npm install --color always', {
             env: {
                 ...process.env,
                 // Force coloring the output, since the command is invoked by shelljs, which is not the interactive shell

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-docusaurus",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "description": "Create Docusaurus apps easily.",
   "repository": {
     "type": "git",
@@ -15,15 +15,13 @@
     "build": "tsc",
     "watch": "tsc --watch"
   },
-  "bin": {
-    "create-docusaurus": "bin/index.js"
-  },
+  "bin": "bin/index.js",
   "publishConfig": {
     "access": "public"
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/logger": "2.0.0-beta.14",
+    "@docusaurus/logger": "2.0.0-beta.15",
     "commander": "^5.1.0",
     "fs-extra": "^10.0.0",
     "lodash": "^4.17.20",
@@ -39,5 +37,5 @@
   "devDependencies": {
     "@types/supports-color": "^8.1.1"
   },
-  "gitHead": "c4824a8937d8f1aa0806667749cbc74058e2b294"
+  "gitHead": "32ec84ef3c0a238436e913b2026ab809e5750fa8"
 }

package/templates/classic/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-2-classic-template",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -14,8 +14,8 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.14",
-    "@docusaurus/preset-classic": "2.0.0-beta.14",
+    "@docusaurus/core": "2.0.0-beta.15",
+    "@docusaurus/preset-classic": "2.0.0-beta.15",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.2.1",

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

@@ -6,16 +6,27 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
 }
 
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+html[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --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;

package/templates/classic-typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-2-classic-typescript-template",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -15,8 +15,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.14",
-    "@docusaurus/preset-classic": "2.0.0-beta.14",
+    "@docusaurus/core": "2.0.0-beta.15",
+    "@docusaurus/preset-classic": "2.0.0-beta.15",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.2.1",
@@ -24,7 +24,7 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.14",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.15",
     "@tsconfig/docusaurus": "^1.0.4",
     "typescript": "^4.5.2"
   },

package/templates/classic-typescript/src/components/HomepageFeatures.tsx

@@ -1,3 +1,4 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import React from 'react';
 import clsx from 'clsx';
 import styles from './HomepageFeatures.module.css';
@@ -45,7 +46,11 @@ 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} />
+        <img
+          className={styles.featureSvg}
+          alt={title}
+          src={useBaseUrl(image)}
+        />
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>

package/templates/facebook/.eslintrc.js

@@ -52,7 +52,6 @@ module.exports = {
         ' ',
       ],
     ],
-    'react/jsx-closing-bracket-location': OFF, // Conflicts with Prettier.
     'react/jsx-filename-extension': OFF,
     'react-hooks/rules-of-hooks': ERROR,
     'react/prop-types': OFF, // PropTypes aren't used much these days.

package/templates/facebook/.prettierrc

@@ -1,7 +1,7 @@
 {
   "arrowParens": "always",
+  "bracketSameLine": true,
   "bracketSpacing": false,
-  "jsxBracketSameLine": true,
   "printWidth": 80,
   "proseWrap": "never",
   "singleQuote": true,

package/templates/facebook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-2-facebook-template",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -18,8 +18,8 @@
     "format:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,md,mdx}\""
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.14",
-    "@docusaurus/preset-classic": "2.0.0-beta.14",
+    "@docusaurus/core": "2.0.0-beta.15",
+    "@docusaurus/preset-classic": "2.0.0-beta.15",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "react": "^17.0.1",
@@ -35,7 +35,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.27.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "^2.5.0",
+    "prettier": "^2.5.1",
     "stylelint": "^13.2.1"
   },
   "browserslist": {

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

@@ -15,16 +15,27 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
 }
 
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+html[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgb(72, 77, 91);
   display: block;

package/templates/shared/docs/intro.md

@@ -12,24 +12,36 @@ Get started by **creating a new site**.
 
 Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
 
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 14 or above:
+  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+
 ## Generate a new site
 
-Generate a new Docusaurus site using the **classic template**:
+Generate a new Docusaurus site using the **classic template**.
 
-```shell
+The classic template will automatically be added to your project after you run the command:
+
+```bash
 npm init docusaurus@latest my-website classic
 ```
 
+You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+
+The command also installs all necessary dependencies you need to run Docusaurus.
+
 ## Start your site
 
 Run the development server:
 
-```shell
+```bash
 cd my-website
-
-npx docusaurus start
+npm run start
 ```
 
-Your site starts at `http://localhost:3000`.
+The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+
+The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
 
-Open `docs/intro.md` and edit some lines: the site **reloads automatically** and displays your changes.
+Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.