Updated Documentation Structure and Added More details.

Added Logo
pagesource · May 28, 2022 · fc94e46 · fc94e46
1 parent 1bb8bf8
commit fc94e46
Show file tree

Hide file tree

Showing 16 changed files with 180 additions and 60 deletions.
diff --git a/docs/adoption.md b/docs/adoption.md
@@ -0,0 +1,5 @@
+---
+id: adoption
+title: Adoption guide
+---
+
diff --git a/docs/contribution.md b/docs/contribution.md
@@ -0,0 +1,5 @@
+---
+id: contribution
+title: Contribution guide
+---
+
diff --git a/docs/features.md b/docs/features.md
@@ -0,0 +1,24 @@
+---
+id: features
+title: Capability Summary 
+---
+
+## Ecosystem of this reference architecture generator  🎉
+
+- **Scalable Architecture:** Generate SSG, SSR and Micro-App.
+- **Development Environment:** Monorepo setup along with Storybook integrated for developing and showcasing components.
+- **Micro Frontend:** Develop Micro Frontend architecture with Module Federation.
+- **Static Code Quality checks and formatting:** Javascript and CSS linting using Eslint, StyleLint and Prettier.
+- **Component scaffolding:** Consistently generate components, services and pages using [Generate-Plop](https://github.com/pagesource/component-generator).
+- **Git Hooks:** Pre-commit, Pre-push using Husky.
+- **Testing:** Unit testing with Jest, RTL and Test Cafe for E2E.
+- **Theme and Styling:** with Styled Components.
+- **Next.js:** To develop SSR and SSG with great ease.
+- **PWA:** Develop offline apps or just performant.
+- **Authoring:** Made easy with Markdown-to-JSX.
+- **Mocking:** Mock REST and GraphQl APIs.
+- **Localization:** Switch content based on language preference.
+- **State Management:** Lightest state management with Context APi and [Smart-Context](https://www.npmjs.com/package/smart-context).
+- **Data Fetching:** Change the old way of Data Fetching with [React Query](https://react-query.tanstack.com/).
+- **Type Safe:** TypeScript by Default.
+
diff --git a/docs/how.md b/docs/how.md
@@ -0,0 +1,6 @@
+---
+id: how
+title: How this generator works? 
+sidebar_label: How Universal React works? 
+---
+
diff --git a/docs/intro.md b/docs/intro.md
@@ -1,46 +1,16 @@
 ---
 id: intro
-title: Getting Started
-sidebar_label: Getting Started
+title: Universal React
 ---
-[![Forks](https://img.shields.io/github/forks/pagesource/universal-react-v2)](https://img.shields.io/github/forks/pagesource/universal-react-v2) [![Stars](https://img.shields.io/github/stars/pagesource/universal-react-v2)](https://img.shields.io/github/stars/pagesource/universal-react-v2) [![License](https://img.shields.io/github/license/pagesource/universal-react-v2)](https://img.shields.io/github/license/pagesource/universal-react-v2)
 
-# Universal React
+[![Forks](https://img.shields.io/github/forks/pagesource/universal-react-v2)](https://img.shields.io/github/forks/pagesource/universal-react-v2) [![Stars](https://img.shields.io/github/stars/pagesource/universal-react-v2)](https://img.shields.io/github/stars/pagesource/universal-react-v2) [![License](https://img.shields.io/github/license/pagesource/universal-react-v2)](https://img.shields.io/github/license/pagesource/universal-react-v2)
 
 An accelerator for setting-up scalable frontend architecture with Next.js and React.
 
 This accelerator is a command line tool for generating SSR, SSG & Micro-App type of applications. This enables you to setup a working Micro Frontend or SPA development ecosystem with essential tooling for great dev experience and delivery quality.
 
 This will help project teams in building applications with great quality, by giving them more time to focus on business problems rather than web development chores.
 
-## Ecosystem of this reference architecture generator  🎉
-
-- **Scalable Architecture:** Generate SSG, SSR and Micro-App.
-- **Development Environment:** Monorepo setup along with Storybook integrated for developing and showcasing components.
-- **Micro Frontend:** Develop Micro Frontend architecture with Module Federation.
-- **Static Code Quality checks and formatting:** Javascript and CSS linting using Eslint, StyleLint and Prettier.
-- **Component scaffolding:** Consistently generate components, services and pages using [Generate-Plop](https://github.com/pagesource/component-generator).
-- **Git Hooks:** Pre-commit, Pre-push using Husky.
-- **Testing:** Unit testing with Jest, RTL and Test Cafe for E2E.
-- **Theme and Styling:** with Styled Components.
-- **Next.js:** To develop SSR and SSG with great ease.
-- **PWA:** Develop offline apps or just performant.
-- **Authoring:** Made easy with Markdown-to-JSX.
-- **Mocking:** Mock REST and GraphQl APIs.
-- **Localization:** Switch content based on language preference.
-- **State Management:** Lightest state management with Context APi and [Smart-Context](https://www.npmjs.com/package/smart-context).
-- **Data Fetching:** Change the old way of Data Fetching with [React Query](https://react-query.tanstack.com/).
-- **Type Safe:** TypeScript by Default.
-
-
-## Main Technology Dependencies
-
-1. React
-2. Next.js
-3. Turborepo
-4. Node.js
-4. Python
-
 ## Uses
 
 ```sh
@@ -51,12 +21,19 @@ This will run the universal-react CLI, then you can simply interact with command
 
 [![CLI Generator Features by Rakesh Kumar 10](https://s7.gifyu.com/images/Banner018d3b1cbb27ffe53f.jpg)](https://web.microsoftstream.com/video/3b7ca6eb-d0ac-47e9-819b-d3e5e398ba09 "CLI Generator Features by Rakesh Kumar 10")
 
-### Pre Requisites
+## Main Tech Dependencies
+
+1. React
+2. Next.js
+3. Turborepo
+
+### Uses Prerequisites
 1. Node >= 14.17.6
 2. NPM >= 7.0.0
 3. Python Latest Version
 
-### Contributors
+
+## Contributors
 
 This project exists thanks to all the people who contribute.
 <a href="https://github.com/pagesource/universal-react-v2/graphs/contributors"><img src="https://opencollective.com/universal-react-v2/contributors.svg?width=890&button=false" /></a>
diff --git a/docs/quality-control.md b/docs/quality-control.md
@@ -1,6 +1,6 @@
 ---
-id: qualiy-control
-title: qualiy-control
+id: quality-control
+title: Static Quality Control
 sidebar_label: Quality Control
 ---
 

diff --git a/docs/road-map.md b/docs/road-map.md
@@ -0,0 +1,5 @@
+---
+id: road-map
+title: Future road map
+---
+
diff --git a/docs/support.md b/docs/support.md
@@ -0,0 +1,6 @@
+---
+id: support
+title: Support Options
+sidebar_label: Support 
+---
+
diff --git a/docs/what.md b/docs/what.md
@@ -0,0 +1,6 @@
+---
+id: what
+title: What this generator can achieve?
+---
+
+
diff --git a/docs/why.md b/docs/why.md
@@ -0,0 +1,21 @@
+---
+id: why
+title: Why we need this generator? 
+---
+
+## Pain Points of Frontend Development!
+
+1. **Reinventing the wheel** when setting up new projects. 
+2. Maturity and quality of the solution depends on the architect on the project.
+3. Delays setting up dev eco-systems, quality gates and pipelines.
+4. Overall lack of efficiency, as replication of best practices isn’t easy. 
+
+## How does Universal React addresses above concerns? 
+
+1. Enterprise scale React applications needs a lot more focused solutions. 
+2. Continuous value addition beyond initial setup through accelerators.
+3. Developer experience needs utmost attention for great productivity.
+4. Preservation and replication of low-level best practices is a necessity in era of green teams. 
+
+With **Reuse, Replicate and Reduce**  philosophy at its core Universal React is an accelerator to generate SSR, SSG or Micro-Apps with essential tooling to enable great dev experience and solution quality.
+
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  title: 'Universal React Docs',
+  title: 'Universal React',
   tagline:
     'An accelerator for great developer experience.',
   url: 'https://github.com/',
@@ -31,18 +31,7 @@ module.exports = {
     },
     footer: {
       style: 'light',
-      links: [
-        {
-          title: 'Docs',
-          items: [
-            {
-              label: 'Getting Started',
-              to: 'docs/intro',
-            },
-          ],
-        },
-      ],
-      copyright: `Copyright © ${new Date().getFullYear()} Universal React`,
+      copyright: `Copyright © ${new Date().getFullYear()}, Made with ♥ by XE Community of Publicis Sapient. <br />Documentation site built with <a href="https://docusaurus.io/">Docusaurus<a/>.`,
     },
   },
   presets: [

diff --git a/sidebars.js b/sidebars.js
@@ -1,6 +1,6 @@
 module.exports = {
   someSidebar: {
-    Introduction: ['intro' ],
-    Features: ['qualiy-control','smart-context','unit-testing','design-system','loader','web-component','logger', 'generate-plop', 'module-federation'],
+    Introduction: ['intro', 'why', 'what', 'how', 'road-map', 'contribution', 'adoption', 'support'],
+    Features: ['features', 'quality-control', 'smart-context', 'unit-testing', 'design-system', 'loader', 'web-component', 'logger', 'generate-plop', 'module-federation', 'monorepo', 'storybook'],
   },
 };
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -22,4 +22,4 @@
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
-}
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -12,16 +12,16 @@ const features = [
     imageUrl: 'img/undraw_docusaurus_mountain.svg',
     description: (
       <>
-        This accelerator is a command line tool for generating SSR, SSG & Micro-App type of applications. This enables you to setup a working Micro Frontend or SPA development ecosystem with essential tooling for great dev experience and delivery quality.
+        CLI tool for generating SSR, SSG & Micro-App type of applications. 
       </>
     ),
   },
   {
-    title: <>Focus on What Matters</>,
+    title: <>Focus on What Matters!</>,
     imageUrl: 'img/undraw_docusaurus_tree.svg',
     description: (
       <>
-        Lets you focus on business problems rather than web development chores by addressing Architecture, Tooling, Code Quality, Scaffolding, Testing, Best Practices and most importantly Developer experience. 
+        Lets you focus on business problems rather than web development chores. 
       </>
     ),
   },
@@ -30,7 +30,7 @@ const features = [
     imageUrl: 'img/undraw_docusaurus_react.svg',
     description: (
       <>
-        Run <strong>npx create-universal-react</strong> This will run the create-universal-react CLI, then you can simply interact with command-prompt to generate 3 different kind of applications in a Monorepo structure.
+        Run <strong>npx create-universal-react</strong> This will run the create-universal-react CLI.
       </>
     ),
   },
@@ -45,8 +45,8 @@ function Feature({ imageUrl, title, description }) {
           <img className={styles.featureImage} src={imgUrl} alt={title} />
         </div>
       )}
-      <h3>{title}</h3>
-      <p>{description}</p>
+      <h3 className="text--center">{title}</h3>
+      <p className="text--center">{description}</p>
     </div>
   );
 }

diff --git a/static/img/UniversalReact.svg b/static/img/UniversalReact.svg