diff --git a/docs/adoption.md b/docs/adoption.md new file mode 100644 index 0000000..a8c774e --- /dev/null +++ b/docs/adoption.md @@ -0,0 +1,5 @@ +--- +id: adoption +title: Adoption guide +--- + diff --git a/docs/contribution.md b/docs/contribution.md new file mode 100644 index 0000000..0538655 --- /dev/null +++ b/docs/contribution.md @@ -0,0 +1,5 @@ +--- +id: contribution +title: Contribution guide +--- + diff --git a/docs/features.md b/docs/features.md new file mode 100644 index 0000000..1b945d5 --- /dev/null +++ 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 new file mode 100644 index 0000000..39e3df3 --- /dev/null +++ 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 index fab599c..63b51be 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -1,11 +1,9 @@ --- 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. @@ -13,34 +11,6 @@ This accelerator is a command line tool for generating SSR, SSG & Micro-App type 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. \ No newline at end of file diff --git a/docs/quality-control.md b/docs/quality-control.md index e6a60aa..f995819 100644 --- 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 new file mode 100644 index 0000000..61b74f9 --- /dev/null +++ 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 new file mode 100644 index 0000000..36ca6cb --- /dev/null +++ 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 new file mode 100644 index 0000000..e5c7747 --- /dev/null +++ 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 new file mode 100644 index 0000000..4265ac0 --- /dev/null +++ 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 index 80ef500..a3264d3 100644 --- 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.
Documentation site built with Docusaurus.`, }, }, presets: [ diff --git a/sidebars.js b/sidebars.js index 1cdc932..bf5fb5a 100644 --- 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 index 74ba0f2..2e1eb7f 100644 --- 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); -} +} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index f00a0bb..c9f7f6d 100644 --- 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 npx create-universal-react 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 npx create-universal-react This will run the create-universal-react CLI. ), }, @@ -45,8 +45,8 @@ function Feature({ imageUrl, title, description }) { {title} )} -

{title}

-

{description}

+

{title}

+

{description}

); } diff --git a/static/img/UniversalReact.svg b/static/img/UniversalReact.svg new file mode 100644 index 0000000..0d15ed2 --- /dev/null +++ b/static/img/UniversalReact.svg @@ -0,0 +1,39 @@ + +Created with Fabric.js 3.5.0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/logo.svg b/static/img/logo.svg index bac801c..0d15ed2 100644 --- a/static/img/logo.svg +++ b/static/img/logo.svg @@ -1,2 +1,39 @@ - - + +Created with Fabric.js 3.5.0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file