Kaustav | #29 | Added documentations for cli commands. | TG-29

docusaurus/docs/cli-command-generate.md

@@ -0,0 +1,44 @@
+---
+id: cli-command-generate
+title: rg generate
+---
+
+Generates and/or modifies files based on a task.
+
+rg **generate** `<task>` `<name>`
+
+rg **g** `<task>` `<name>`
+
+## Description
+
+It generates the required element based on the task name.
+
+> Note that, for now we are only supporting **component** generating task.
+
+## Arguments
+
+Argument | Description |
+---------|----------|
+ _task_ | The task or collection of tasks to generate. Check the [currently supported tasks](#task-commands). |
+
+---
+
+## Task commands
+
+### Component
+
+rg generate **component** `<name>`
+
+rg g **component** `<name>`
+
+#### Description
+
+Creates a new generic component definition in the given or default project.
+
+The component will be created in the current working directory.
+
+#### Arguments
+
+Argument | Description |
+---------|----------|
+ _name_ | The name of the component. |

docusaurus/docs/cli-command-new.md

@@ -0,0 +1,24 @@
+---
+id: cli-command-new
+title: rg new
+---
+
+Creates a new workspace and an initial React App along with webpack bundled with it.
+
+rg **new** `<app_name>`
+
+## Description
+
+It creates and initializes a new React application that is a default project of the new workspace.
+
+Also it provides interactive prompts for the initial _(Optional)_ configuration, such as *Author Name*. All prompt can be allowed to default.
+
+* The workspace folder is given the specified project name and contain other configuration files on the same level. _(We are going to refer this as root)_
+
+* By default the files which gets generates in the workspace directory can be found on [folder structure](./folder-structure-for-new-app.md).
+
+## Arguments
+
+Argument | Description |
+---------|----------|
+ _name_ | The name of the new workspace and initial project. |

docusaurus/website/core/Footer.js

@@ -1,15 +1,40 @@
-const React = require('react')
+const React = require("react");
 
 class Footer extends React.Component {
+  copyrightSection = (copyright, author) => (
+    <section className="rg-copyright">
+      {copyright.prefix}&nbsp;
+      <a className="rg-link" href={copyright.owner.link}>
+        {copyright.owner.name}
+      </a>
+      .&nbsp;
+      <span className="rg-author">
+        Authored by&nbsp;
+        <a className="rg-link" href={author.link}>
+          {author.name}
+        </a>
+        .
+      </span>
+    </section>
+  );
+
   render() {
+    const { copyright, license, author } = this.props.config;
     return (
       <footer className="nav-footer rg-footer" id="footer">
         <div className="footerContainer">
-          <section className="rg-copyright">{this.props.config.copyright}</section>
+          {this.copyrightSection(copyright, author)}
+          <section className="rg-license-container">
+            Code licensed under an&nbsp;
+            <a className="rg-link" href={license.link}>
+              {license.name}
+            </a>
+            &nbsp;License.
+          </section>
         </div>
       </footer>
-    )
+    );
   }
 }
 
-module.exports = Footer
+module.exports = Footer;

docusaurus/website/sidebars.json

@@ -5,6 +5,10 @@
       "getting-started",
       "folder-structure-for-new-app",
       "npm-scripts"
+    ],
+    "CLI COMMANDS": [
+      "cli-command-new",
+      "cli-command-generate"
     ]
   }
 }

docusaurus/website/siteConfig.js

@@ -1,33 +1,46 @@
 const siteConfig = {
-  title: 'rg-cli',
-  tagline: 'A command line interface for react app with webpack',
-  url: 'https://itchef.github.io',
-  baseUrl: '/rg-cli/',
-  projectName: 'rg-cli',
-  organizationName: 'itchef',
+  title: "rg-cli",
+  tagline: "A command line interface for react app with webpack",
+  url: "https://itchef.github.io",
+  baseUrl: "/rg-cli/",
+  projectName: "rg-cli",
+  organizationName: "itchef",
   headerLinks: [
-    {doc: 'introduction', label: 'DOCUMENTATION'},
-    {href: 'https://github.com/itchef/rg-cli', label: 'GITHUB'},
+    { doc: "introduction", label: "DOCUMENTATION" },
+    { href: "https://github.com/itchef/rg-cli", label: "GITHUB" }
   ],
 
-  headerIcon: 'img/Logo-rg-light.png',
-  footerIcon: 'img/Logo-rg-light.png',
-  favicon: 'img/favicon.ico',
+  headerIcon: "img/Logo-rg-light.png",
+  footerIcon: "img/Logo-rg-light.png",
+  favicon: "img/favicon.ico",
 
   colors: {
-    primaryColor: '#1A237E',
-    secondaryColor: '#3F51B5',
+    primaryColor: "#1A237E",
+    secondaryColor: "#3F51B5"
   },
 
-  copyright: `Copyright © ${new Date().getFullYear()} ITChef. Authored by Kaustav Chakraborty`,
-
+  copyright: {
+    prefix: `Copyright © ${new Date().getFullYear()}`,
+    owner: {
+      name: "ITChef",
+      link: "https://github.com/itchef"
+    }
+  },
+  license: {
+    name: "MIT-styled",
+    link: "https://github.com/itchef/rg-cli/blob/master/LICENSE"
+  },
+  author: {
+    name: "Kaustav Chakraborty",
+    link: "https://github.com/phoenixTW"
+  },
   highlight: {
-    theme: 'default',
+    theme: "default"
   },
 
-  scripts: ['https://buttons.github.io/buttons.js'],
+  scripts: ["https://buttons.github.io/buttons.js"],
 
-  onPageNav: 'separate',
+  onPageNav: "separate",
   cleanUrl: true,
 
   enableUpdateTime: true,
@@ -36,11 +49,17 @@ const siteConfig = {
   homePage: {
     commands: [
       {
-        title: 'rg new',
-        description: 'The React Generator CLI makes it easy to create a react application with webpack that already works, right out of the box. It already follows react’s best practices!',
+        title: "rg new",
+        description:
+          "The React Generator CLI makes it easy to create a react application with webpack that already works, right out of the box. It already follows react’s best practices!"
       },
-    ],
-  },
-}
+      {
+        title: "rg generate",
+        description:
+          "Generates components with a simple command. The CLI also creates simple test file with it."
+      }
+    ]
+  }
+};
 
-module.exports = siteConfig
+module.exports = siteConfig;

docusaurus/website/static/css/footer.css

@@ -6,6 +6,20 @@
   color: #FFF !important;
 }
 
+.rg-license-container {
+  color: #FFF !important;
+}
+
+.rg-link {
+  font-weight: 600;
+  color: white;
+}
+
+.rg-link:hover {
+  color: white;
+  text-decoration: underline;
+}
+
 .footerContainer {
   max-width: 1100px;
   margin: 0 auto;
@@ -17,3 +31,12 @@
     padding: 0 20px;
   }
 }
+
+@media only screen and (max-width: 639px) {
+  .rg-copyright {
+    display: block;
+  }
+  .rg-author {
+    display: block;
+  }
+}

docusaurus/website/static/css/index.css

@@ -79,6 +79,10 @@
   max-width: 750px;
 }
 
+.featureWrapper {
+  padding-bottom: 30px;
+}
+
 .featureWrapper h3 {
   color: $primaryColor;
 }