feat: docusaurus-init without example directories (#1378)

* feat: do not copy into examples folder

* Update documentation

* feat: use Undraw illustrations for initialized landing page (#1379)

docs/getting-started-installation.md

@@ -31,14 +31,17 @@ Along with previously existing files and directories, your root directory will n
 
 ```bash
 root-directory
-├── docs-examples-from-docusaurus
+├── Dockerfile
+├── README.md
+├── docker-compose.yml
+├── docs
 │   ├── doc1.md
 │   ├── doc2.md
 │   ├── doc3.md
 │   ├── exampledoc4.md
 │   └── exampledoc5.md
 └── website
-    ├── blog-examples-from-docusaurus
+    ├── blog
     │   ├── 2016-03-11-blog-post.md
     │   ├── 2017-04-10-blog-post-two.md
     │   ├── 2017-09-25-testing-rss.md
@@ -59,15 +62,13 @@ After running the Docusaurus initialization script, `docusaurus-init` as
 described in the [Installation](#installing-docusaurus) section, you will have a
 runnable, example website to use as your site's base. To run:
 
-1.  In your root, rename `docs-examples-from-docusaurus` to `docs`.
 1.  `cd website`
-1.  Rename `blog-examples-from-docusaurus` to `blog`.
 1.  From within the `website` directory, run the local webserver using
     `yarn start` or `npm start`.
 1.  Load the example site at http://localhost:3000 if it did not already open
-    automatically.
+    automatically. If port 3000 has already been taken, another port will be used. Look at the console messages to see which.
 
-    You should see the example site loaded in your web browser. There's also a LiveReload server running and any changes made to the docs and files in the `website` directory will cause the page to refresh.
+    You should see the example site loaded in your web browser. There's also a LiveReload server running and any changes made to the docs and files in the `website` directory will cause the page to refresh. A randomly generated primary and secondary theme color will be picked for you.
 
 ![](/img/getting-started-preparation-verify.png)
 

packages/docusaurus-1.x/examples/basics/pages/en/index.js

@@ -60,7 +60,7 @@ class HomeSplash extends React.Component {
 
     return (
       <SplashContainer>
-        <Logo img_src={`${baseUrl}img/docusaurus.svg`} />
+        <Logo img_src={`${baseUrl}img/undraw_monitor.svg`} />
         <div className="inner">
           <ProjectTitle siteConfig={siteConfig} />
           <PromoSection>
@@ -105,10 +105,13 @@ class Index extends React.Component {
       <Block id="try">
         {[
           {
-            content: 'Talk about trying this out',
-            image: `${baseUrl}img/docusaurus.svg`,
+            content:
+              'To make your landing page more attractive, use illustrations! Check out ' +
+              '[**Undraw**](https://undraw.co/) which provides you with customizable illustrations which are free to use. ' +
+              'The illustrations you see on this page are from Undraw.',
+            image: `${baseUrl}img/undraw_code_review.svg`,
             imageAlign: 'left',
-            title: 'Try it Out',
+            title: 'Wonderful SVG Illustrations',
           },
         ]}
       </Block>
@@ -120,7 +123,7 @@ class Index extends React.Component {
           {
             content:
               'This is another description of how this project is useful',
-            image: `${baseUrl}img/docusaurus.svg`,
+            image: `${baseUrl}img/undraw_note_list.svg`,
             imageAlign: 'right',
             title: 'Description',
           },
@@ -132,10 +135,11 @@ class Index extends React.Component {
       <Block background="light">
         {[
           {
-            content: 'Talk about learning how to use this',
-            image: `${baseUrl}img/docusaurus.svg`,
+            content:
+              'Each new Docusaurus project has **randomly-generated** theme colors.',
+            image: `${baseUrl}img/undraw_youtube_tutorial.svg`,
             imageAlign: 'right',
-            title: 'Learn How',
+            title: 'Randomly Generated Theme Colors',
           },
         ]}
       </Block>
@@ -146,13 +150,13 @@ class Index extends React.Component {
         {[
           {
             content: 'This is the content of my feature',
-            image: `${baseUrl}img/docusaurus.svg`,
+            image: `${baseUrl}img/undraw_react.svg`,
             imageAlign: 'top',
             title: 'Feature One',
           },
           {
             content: 'The content of my second feature',
-            image: `${baseUrl}img/docusaurus.svg`,
+            image: `${baseUrl}img/undraw_operating_system.svg`,
             imageAlign: 'top',
             title: 'Feature Two',
           },

packages/docusaurus-1.x/examples/basics/siteConfig.js

@@ -13,8 +13,8 @@ const users = [
   {
     caption: 'User1',
     // You will need to prepend the image path with your baseUrl
-    // if it is not '/', like: '/test-site/img/docusaurus.svg'.
-    image: '/img/docusaurus.svg',
+    // if it is not '/', like: '/test-site/img/image.jpg'.
+    image: '/img/undraw_open_source.svg',
     infoLink: 'https://www.facebook.com',
     pinned: true,
   },
@@ -48,9 +48,9 @@ const siteConfig = {
   users,
 
   /* path to images for header/footer */
-  headerIcon: 'img/docusaurus.svg',
-  footerIcon: 'img/docusaurus.svg',
-  favicon: 'img/favicon.png',
+  headerIcon: 'img/favicon.ico',
+  footerIcon: 'img/favicon.ico',
+  favicon: 'img/favicon.ico',
 
   /* Colors for website */
   colors: {
@@ -89,8 +89,8 @@ const siteConfig = {
   cleanUrl: true,
 
   // Open Graph and Twitter card images.
-  ogImage: 'img/docusaurus.png',
-  twitterImage: 'img/docusaurus.png',
+  ogImage: 'img/undraw_online.svg',
+  twitterImage: 'img/undraw_tweetstorm.svg',
 
   // Show documentation's last contributor's name.
   // enableUpdateBy: true,

packages/docusaurus-1.x/lib/copy-examples.js

@@ -69,9 +69,7 @@ if (fs.existsSync(`${CWD}/package.json`)) {
 
 const outerFolder = path.basename(path.dirname(CWD));
 
-let docsCreated = false;
-let blogCreated = false;
-let exampleSiteCreated = false;
+let docsCreatedInIntendedDirectory = true;
 
 // handles cases where feature is "translations", "versions" or neither/not present
 if (feature === 'translations') {
@@ -85,7 +83,6 @@ if (feature === 'translations') {
     );
   } else {
     fs.copySync(`${folder}/crowdin.yaml`, `${CWD}/../crowdin.yaml`);
-    exampleSiteCreated = true;
   }
   const files = glob.sync(`${folder}/**/*`);
   files.forEach(file => {
@@ -101,7 +98,6 @@ if (feature === 'translations') {
         overwrite: false,
         errorOnExist: true,
       });
-      exampleSiteCreated = true;
     } catch (e) {
       console.log(
         `${chalk.yellow(
@@ -126,7 +122,6 @@ if (feature === 'translations') {
         overwrite: false,
         errorOnExist: true,
       });
-      exampleSiteCreated = true;
     } catch (e) {
       console.log(
         `${chalk.yellow(
@@ -140,34 +135,28 @@ if (feature === 'translations') {
 } else {
   const folder = path.join(__dirname, '..', 'examples', 'basics');
   // copy docs examples
-  if (fs.existsSync(`${CWD}/../docs-examples-from-docusaurus`)) {
+  let targetDocsDir = `${CWD}/../docs`;
+  if (fs.existsSync(targetDocsDir)) {
     console.log(
-      `- ${chalk.green(
-        'docs-examples-from-docusaurus',
-      )} already exists in ${chalk.blue(outerFolder)}.`,
+      `- ${chalk.green('docs')} already exists in ${chalk.blue(
+        outerFolder,
+      )}. Copying into ${CWD}/../docs-examples-from-docusaurus instead.`,
     );
-  } else {
-    fs.copySync(
-      `${folder}/docs-examples-from-docusaurus`,
-      `${CWD}/../docs-examples-from-docusaurus`,
-    );
-    exampleSiteCreated = true;
-    docsCreated = true;
+    targetDocsDir = `${CWD}/../docs-examples-from-docusaurus`;
+    docsCreatedInIntendedDirectory = false;
   }
+
+  fs.copySync(`${folder}/docs`, targetDocsDir);
+
   // copy blog examples
-  if (fs.existsSync(`${CWD}/blog-examples-from-docusaurus`)) {
+  if (fs.existsSync(`${CWD}/blog`)) {
     console.log(
-      `- ${chalk.green(
-        'blog-examples-from-docusaurus',
-      )} already exists in ${chalk.blue(`${outerFolder}/website`)}.`,
+      `- ${chalk.green('blog')} already exists in ${chalk.blue(
+        `${outerFolder}/website`,
+      )}.`,
     );
   } else {
-    fs.copySync(
-      path.join(folder, 'blog-examples-from-docusaurus'),
-      path.join(CWD, 'blog-examples-from-docusaurus'),
-    );
-    exampleSiteCreated = true;
-    blogCreated = true;
+    fs.copySync(path.join(folder, 'blog'), path.join(CWD, 'blog'));
   }
 
   const copyFileToProjectFolder = (fileNameFrom, fileNameTo) => {
@@ -199,6 +188,7 @@ if (feature === 'translations') {
 
   // copy other files
   const files = glob.sync(`${folder}/**/*`);
+  const {primaryColor, secondaryColor} = colorScheme();
   files.forEach(file => {
     if (fs.lstatSync(file).isDirectory()) {
       return;
@@ -209,8 +199,8 @@ if (feature === 'translations') {
       path.basename(file) === 'Dockerfile' ||
       path.basename(file) === 'docker-compose.yml' ||
       path.basename(file) === 'dockerignore' ||
-      containingFolder === 'blog-examples-from-docusaurus' ||
-      containingFolder === 'docs-examples-from-docusaurus'
+      containingFolder === 'blog' ||
+      containingFolder === 'docs'
     ) {
       return;
     }
@@ -219,7 +209,6 @@ if (feature === 'translations') {
       path.basename(file) === 'siteConfig.js' &&
       !fs.existsSync(CWD + filePath)
     ) {
-      const {primaryColor, secondaryColor} = colorScheme();
       const siteConfig = fs
         .readFileSync(file, 'utf8')
         .replace('{{primaryColor}}', primaryColor)
@@ -231,7 +220,6 @@ if (feature === 'translations') {
           overwrite: false,
           errorOnExist: true,
         });
-        exampleSiteCreated = true;
       } catch (e) {
         console.log(
           `- ${chalk.green(
@@ -246,38 +234,37 @@ if (feature === 'translations') {
     }
   });
 
-  if (exampleSiteCreated) {
-    try {
-      const tree = require('tree-node-cli');
-      const dirString = tree(path.join(CWD, '..'), {
-        exclude: [
-          /node_modules/, // npm
-          /vendor/, // composer
-        ],
-      });
-      console.log(dirString);
-    } catch (error) {
-      console.warn(`Error printing directory: ${error}`);
-    }
+  const svgs = glob.sync(`${CWD}/static/img/**/*.svg`);
+  svgs.forEach(file => {
+    // Replace primary colors of SVGs.
+    const newImage = fs
+      .readFileSync(file, 'utf8')
+      .replace(/{{primaryColor}}/g, primaryColor);
+    fs.writeFileSync(file, newImage);
+  });
+
+  try {
+    const tree = require('tree-node-cli');
+    const dirString = tree(path.join(CWD, '..'), {
+      exclude: [
+        /node_modules/, // npm
+        /vendor/, // composer
+      ],
+    });
+    console.log(dirString);
+  } catch (error) {
+    console.warn(`Error printing directory: ${error}`);
   }
 }
 
-if (docsCreated) {
+if (!docsCreatedInIntendedDirectory) {
   console.log(
-    `Rename ${chalk.yellow(
-      `${outerFolder}/docs-examples-from-docusaurus`,
-    )} to ${chalk.yellow(
+    `The ${chalk.yellow(
       `${outerFolder}/docs`,
-    )} to see the example docs on your site.\n`,
-  );
-}
-
-if (blogCreated) {
-  console.log(
-    `Rename ${chalk.yellow(
-      `${outerFolder}/website/blog-examples-from-docusaurus`,
-    )} to ${chalk.yellow(
-      `${outerFolder}/website/blog`,
-    )} to see the example blog posts on your site.\n`,
+    )} directory was not created because it already exists. ` +
+      `Please manually convert the contents into a Docusaurus-compatible format ` +
+      `by referring to the examples from ${chalk.yellow(
+        `${outerFolder}/docs-examples-from-docusaurus`,
+      )}.\n`,
   );
 }