From f4394b13de269f01ff0f135c1ca9a2e8aff4b2f9 Mon Sep 17 00:00:00 2001 From: Kaustav Chakraborty Date: Tue, 30 Jul 2019 15:23:16 +0530 Subject: [PATCH] Kaustav | #29 | Added documentations for cli commands. | TG-29 --- docusaurus/docs/cli-command-generate.md | 44 ++++++++++++++++ docusaurus/docs/cli-command-new.md | 24 +++++++++ docusaurus/website/core/Footer.js | 33 ++++++++++-- docusaurus/website/sidebars.json | 4 ++ docusaurus/website/siteConfig.js | 67 +++++++++++++++--------- docusaurus/website/static/css/footer.css | 23 ++++++++ docusaurus/website/static/css/index.css | 4 ++ 7 files changed, 171 insertions(+), 28 deletions(-) create mode 100644 docusaurus/docs/cli-command-generate.md create mode 100644 docusaurus/docs/cli-command-new.md diff --git a/docusaurus/docs/cli-command-generate.md b/docusaurus/docs/cli-command-generate.md new file mode 100644 index 0000000..e6ade8e --- /dev/null +++ b/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** `` `` + +rg **g** `` `` + +## 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** `` + +rg g **component** `` + +#### 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. | diff --git a/docusaurus/docs/cli-command-new.md b/docusaurus/docs/cli-command-new.md new file mode 100644 index 0000000..59a22ce --- /dev/null +++ b/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** `` + +## 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. | diff --git a/docusaurus/website/core/Footer.js b/docusaurus/website/core/Footer.js index 930c27d..b16d8b9 100644 --- a/docusaurus/website/core/Footer.js +++ b/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) => ( +
+ {copyright.prefix}  + + {copyright.owner.name} + + .  + + Authored by  + + {author.name} + + . + +
+ ); + render() { + const { copyright, license, author } = this.props.config; return ( - ) + ); } } -module.exports = Footer +module.exports = Footer; diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json index a0034c8..0ae36d2 100644 --- a/docusaurus/website/sidebars.json +++ b/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" ] } } diff --git a/docusaurus/website/siteConfig.js b/docusaurus/website/siteConfig.js index 0be91e7..b481584 100644 --- a/docusaurus/website/siteConfig.js +++ b/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; diff --git a/docusaurus/website/static/css/footer.css b/docusaurus/website/static/css/footer.css index 8004460..f629355 100644 --- a/docusaurus/website/static/css/footer.css +++ b/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; + } +} diff --git a/docusaurus/website/static/css/index.css b/docusaurus/website/static/css/index.css index efd794f..f4f187d 100644 --- a/docusaurus/website/static/css/index.css +++ b/docusaurus/website/static/css/index.css @@ -79,6 +79,10 @@ max-width: 750px; } +.featureWrapper { + padding-bottom: 30px; +} + .featureWrapper h3 { color: $primaryColor; }