updated guide

dmitriyzhuk · dmitriyzhuk · commit 57b502bb8e7b · 2019-06-12T19:26:38.000+03:00
diff --git a/.vuepress/components/themeLayout.vue b/.vuepress/components/themeLayout.vue
@@ -7,19 +7,19 @@
         <img
           src="https://themes.getbootstrap.com/wp-content/uploads/2019/03/preview_screenshot-600x450.jpg"
         >
-        <h4>Defualt theme</h4>
+        <h4>Default theme</h4>
         <p>The default theme for VueFront</p>
       </div>
       <div class="col">
         <img src="https://themes.getbootstrap.com/wp-content/uploads/2019/03/screenshot-1.png">
-        <h4>Defualt theme</h4>
+        <h4>Default theme</h4>
         <small>The default theme for VueFront</small>
       </div>
       <div class="col">
         <img
           src="https://themes.getbootstrap.com/wp-content/uploads/2018/02/BS_Marketing-768x576.png"
         >
-        <h4>Defualt theme</h4>
+        <h4>Default theme</h4>
         <small>The default theme for VueFront</small>
       </div>
     </div>
@@ -29,24 +29,24 @@
         <img
           src="https://themes.getbootstrap.com/wp-content/uploads/2018/05/front-preview-screenshot.jpg"
         >
-        <h4>Defualt theme</h4>
+        <h4>Default theme</h4>
         <small>The default theme for VueFront</small>
       </div>
       <div class="col">
         <img src="https://themes.getbootstrap.com/wp-content/uploads/2019/03/leap-1200x900.png">
-        <h4>Defualt theme</h4>
+        <h4>Default theme</h4>
         <small>The default theme for VueFront</small>
       </div>
     </div>
     <div class="row">
       <div class="col">
         <img src="https://themes.getbootstrap.com/wp-content/uploads/2018/09/screenshot-1.png">
-        <h4>Defualt theme</h4>
+        <h4>Default theme</h4>
         <small>The default theme for VueFront</small>
       </div>
       <div class="col">
         <img src="https://themes.getbootstrap.com/wp-content/uploads/2019/02/screenshot.jpg">
-        <h4>Defualt theme</h4>
+        <h4>Default theme</h4>
         <small>The default theme for VueFront</small>
       </div>
     </div>
diff --git a/.vuepress/config.js b/.vuepress/config.js
@@ -17,7 +17,16 @@ module.exports = {
         docsDir: 'docs',
         sidebar: {
             "/guide/": getSideBar(),
-            "/develop/": getSideBar(),
+            "/develop/": [{
+                title: "Develop",
+                collapsable: false,
+                children: [
+                    '/develop/',
+                    '/develop/config',
+                    '/develop/theme',
+                    '/develop/app'
+                ]
+            }],
             "/community/": getSideBar(),
             "/cms/": [{
                 title: "CMS Extensions",
@@ -33,6 +42,7 @@ module.exports = {
         nav: [
             { text: 'Home', link: '/' },
             { text: 'Guide', link: '/guide/' },
+            { text: 'Develop', link: '/develop/' },
             { text: 'CMS Connect', link: '/cms/' },
             { text: 'Themes', link: '/themes/' },
             { text: 'Apps', link: '/apps/' },
@@ -52,16 +62,6 @@ function getSideBar() {
                 '/guide/setup'
             ]
         },
-        {
-            title: "Develop",
-            collapsable: false,
-            children: [
-                '/develop/',
-                '/develop/store',
-                '/develop/theme',
-                '/develop/cms'
-            ]
-        },
         {
             title: "Community",
             collapsable: false,
diff --git a/README.md b/README.md
@@ -11,29 +11,46 @@ heroImage: /logo.png
 actionText: Get Started →
 actionLink: /guide/
 features:
-  - title: Works with your site
+  - title: You can use it today
     details: Compatible with Wordpress, Woocommerce, Shopify, Magento, Drupal, Joomla, Opencart and more.
   - title: Build for the future
     details: Single Page application (SPA) and Progressive Web App (PWA) out of the box.
-  - title: Simply beautiful
-    details: It just works. We took out the hard stuff and made it easy to use. 
+  - title:  It just works
+    details: We took the liberty of making a complete solution from creating the back-end GraphQL module to building the front-end web app.
 
 footer: MIT Licensed | Copyright © 2018-present Dreamvention
 ---
 
-### As Easy as 1, 2, 3
+### See the Demos
 
-1. Install VueFront CMS Extension on your site (Opencart, Worpdress/WooCommerce)
-2. Install VueFront app. (requires node.js >= 8, git, and yarn)
+1. Wordpress + WooCommerce demo
+- [VueFront](https://wordpress.vuefront.com/)
+- [Admin](https://wordpress.vuefront.com/wp-admin)
+
+2. OpenCart + Blog Module demo
+- [VueFront](https://opencart.vuefront.com/)
+- [Admin](https://opencart.vuefront.com/admin)
+
+
+### Installing is as easy as 1, 2, 3
+
+1. [Download](/cms/) and Install VueFront **CMS Connect App** on your site ([OpenCart](/cms/opencart.html), [Worpdress/WooCommerce](/cms/wordpress.html)) the app will provide you with a CMS Connect URL. 
+2. In command line install VueFront Web App. (requires node.js >= 8 and yarn or npm)
 
 ```bash
 # Create VueFront app. replace <project-name> with vuefront
 yarn create vuefront-app <project-name>
 # OR npx create-vuefront-app <project-name>
 
 yarn dev
+# OR npm run dev
+```
+
+- When prompt during the setup step, paste the CMS Connect URL provided by CMS Connect App. 
+
+```bash
+# during the setup you will be asked to paste the CMS Connect URL:
+? Paste the CMS Connect URL, provided by your CMS Connect App ()
 ```
 
-::: warning COMPATIBILITY NOTE
-VueFront requires Node.js >= 8.
-:::
+Enjoy your new VueFront!
diff --git a/cms/opencart.md b/cms/opencart.md
@@ -10,3 +10,10 @@ meta:
 ---
 
 # OpenCart
+
+| Version     | Link     |
+|-------------|----------|
+| 3.0.x       | download |
+| 2.3.x       | download |
+| 2.0.x-2.2.x | download |
+| 1.5.x       | download |
diff --git a/develop/app.md b/develop/app.md
@@ -1,5 +1,5 @@
 ---
-title: CMS connect
+title: App development
 lang: en-US
 sidebarDepth: 2
 meta:
@@ -9,4 +9,4 @@ meta:
     content: vuefront, vuejs, nuxt, agnostic framework, documentation
 ---
 
-# How to develop a CMS connect App
+# App development
diff --git a/develop/config.md b/develop/config.md
@@ -1,5 +1,5 @@
 ---
-title: Store
+title: Config file
 lang: en-US
 sidebarDepth: 2
 meta:
@@ -9,4 +9,4 @@ meta:
     content: vuefront, vuejs, nuxt, agnostic framework, documentation
 ---
 
-# Store
+# Config file
diff --git a/guide/README.md b/guide/README.md
@@ -8,72 +8,71 @@ meta:
   - name: keywords
     content: vuefront, vuejs, nuxt, agnostic framework, documentation
 ---
-
-# What is VueFront?
+# VueFront - CMS Agnostic Front-end
+## What is VueFront?
 
 > “Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.” ~ Steve Jobs
 
-__For website owners__
-VueFront lets you lets your old fashioned site into the future. You get to keep your current admin panel while upgrading to a compleatly new beautiful frontend, build on new technology: extreamly fast, no more page refresh, can work off-line, can be saved to homescreen like an mobile app and it's unbelievably extensible
+VueFront is a Vue powered CMS agnostic front-end framework that allows owners and developers of an old-fashioned blog or e-commerce site to quickly switch to a SPA progressive web app. 
 
-__For developers__
-VueFront is a free open-source vue powered agnistic frontend framework. It works straight out of the box with the most popular CMS like wordpress & woocommerce, magenta, opencart, prestashop. It is built on Vuejs and works great together with Nuxt or Vue Cli. It is by default an SPA (single page application) with a option to turn into a PWA (progressiv web app).
+It is open-source with MIT license so you are free to modify it as you wish.
 
 ::: tip
-Want to see how your current site looks in VueFront? Follow our simple [5 minute setup](/guide/setup.html)
+Want to see how your current site looks in VueFront? Follow our simple [5-minute setup](/guide/setup.html)
 :::
 
-Currently we maintaine support for the following website/blogging and E-commerce CMS backends:
+## Who is it for?
+
+Anyone from a basic Wordpress & Woocommerce user, OpenCart or Magenta webshop owner to a professional PrestaShop or Shopify Developer. 
+
+You can install and use VueFront today. The setup takes less than 5 minutes. You won't need to delete anything or make costly migrations. All you need is a computer with Nodejs & Yarn (or NPM) installed and access to your old-fashioned website files. 
+
+## What CMS's are supported
 
+Currently, we maintain support for the following website/blogging and E-commerce CMS backends:
 - Wordpress + WooCommerce
 - OpenCart + Blog Module
+
+In development...
 - Prestashop + PrestaBLog
+- Magento
 
 Soon to come...
-
-- Magento
 - Joomla
 - Drupal + DrupalCommerce
 - Shopify
 - BigCommerce
 - Volusion
 
-## Why use VueFront?
-
+## What do I get out-of-the-box?
 > “Everything should be made as simple as possible, but not simpler.” ~ Albert Einstein
 
-In the core of VueFront lies the concept __Decoupling and Symplicity__.
-
-In modern web development, monolithic applications have been divided into smaller simpler parts, where each one is often outsorced to specilized teams and services. VueFront is one of them. It allows you to decouple your monolithic web application, which could be your current CMS like wordpress or shopify and outsource the frontend. You get a new shiny SPA front, while keeping your usual backend and your business flow.
+VueFront was created as a fully functional Blog & E-commerce web app. You get a working new single-page application with the possibility to turn it into a progressive web app. 
 
-**Here are five key features of VueFront, that will make your mouth**
+In other words, you get a cool new website that is: 
 
-- Backend Agnostic (works with many website/blogging/eccomerce CMS out of the box).
-- Modern (Built with Vue on Nuxt or Vue Cli, utilizing GraphQL).
-- An SPA and PWA (Single Page Application & Progressive Web App).
-- Extensible (allows Themes, Apps, and easy upgrades).
-- Well documented (we know how importent documentation is).
+- Super fast
+- SEO friendly
+- Offline ready
+- Modern 
 
-## Backend Agnostic
+For more tech-savvy ones:
 
-Infographics here...
+**Here are five key features of VueFront, that will make your mouth water**
 
-1. Frontend Web App is built with Vue on Nuxt or Vue Cli, which implements SPA and PWA.
-2. The store is managed by Vuex and an Apollo client
-3. On the Backend a CMS corresponding module is installed and a GraphQL API is setup via Apollo
-4. VueFront makes all requests to the Apollo API endpoint and displays the data accordingly.
-
-### What are the trade-offs?
+- Backend Agnostic (works with many websites/blogging/eCommerce CMS out of the box).
+- Modern (Built with Vue on Nuxt or Vue Cli, utilizing GraphQL).
+- SPA and PWA (Single Page Application & Progressive Web App).
+- Extensible (allows Themes, Apps, and easy upgrades).
+- Well documented (we know how important documentation is).
 
-Since we are implementing one standard for all websites/blogs/ecommerce sites, there must be some trade-offs.
+## How to develop for it?
 
-- Unique features of a CMS may not be avalible out of the box.
-- Customizations done to the old frontend will have to be reimplemented on the new VueFront
-- A higher learning curve for developers used to old CMSs, mostly php.
+One of its key features is extensibility. You can create custom themes and apps for VueFront or use third-party developed. 
 
-All of these limitations are being removed thanks to a growing community of VueFront creators, who develope new extensions and features, improving the VueFront ecosystem.
+When developing for VueFront you won't be editing the core files, rather extending them to add new features and themes. This makes future upgrades simple, keeping your codebase up to date. You get code splitting, asset optimization, progressive images, and link prefetching out of the box.
 
-At the end of the day, an open-source project is all about the community around it.
+For more information read the [Developer's guide](/develop/)
 
 ::: tip
 Want to do more with VueFront? Become a [VueFront Creator](/support.html).
diff --git a/guide/setup.md b/guide/setup.md
@@ -10,7 +10,7 @@ meta:
 ---
 
 # Quick Setup
-Try our 5 minute setup
+Try our 5-minute setup
 
 1. Install CMS Connect App. [Download and install your CMS Connect app →](/cms/)
 
@@ -25,37 +25,30 @@ yarn dev
 
 ## Step 1. Install CMS Connect App
 
-For VueFront to have access to your website data, you need to install a CMS Connect App that will provide a GraphQL API endpoint. VueFront will then to fetch all the data from your website like any other webapp. CMS Connect APP also adds the required functionality such as submiting reviews, adding products to cart, checkout etc.
+For VueFront to have access to your website data, you need to install a CMS Connect App that will provide a GraphQL API endpoint. VueFront will then to fetch all the data from your website like any other web app. CMS Connect APP also adds the required functionality such as submitting reviews, adding products to cart, checkout, etc.
 
 - Wordpress/Woocommerce
 - OpenCart
 
 [view all CMS Connect Apps →](/cms/)
 
-The CMS Connect App will provide you with your API Url. You will need it on the next step, when installing VueFront
+The CMS Connect App will provide you with your API Url. You will need it on the next step when installing VueFront
 
 ::: tip
 Didn't find a `CMS Connect` App for your current website. No biggy. Simply [send us a request](/support.html) and we will be happy to create one for you. 
 :::
 
 ## Step 2. Install VueFront
 
-VueFront is a Single page application that needs to be hosted on a NodeJs server for Server-side rendering. It requires the follwoing:
+VueFront is a Single page application that needs to be hosted on a NodeJs server for Server-side rendering. It requires the following:
 
 - nodejs >= 8
 - yarn (or nmp)
 
-
-VueFront consists of the following modules:
-
-1. [vuefront (Github)](https://github.com/vuefront/vuefront)
-2. [vuefront-nuxt (Github)](https://github.com/vuefront/vuefront-nuxt)
-3. [vuefront-cli (Github)](https://github.com/vuefront/vuefront-cli)
-
-After you have installed the CMS extension, activated it and recieved the API Url, you can now install VueFront.
+After you have installed the CMS extension, activated it and received the **CMS Connect Url**, you can now install VueFront.
 
 ```bash
-# Create VueFront app. replace <project-name> with vuefront
+# Create VueFront app. replace <project-name> with vuefront or ./ for selected folder
 yarn create vuefront-app <project-name>
 # OR npx create-vuefront-app <project-name>
 
@@ -69,13 +62,18 @@ After you have launched the app in `dev mode`, you should see your site at [http
 
 
 ### Create-vuefront-app
-For a simpler installation process we have provided [create-vuefront-app](https://github.com/vuefront/create-vuefront-app), which helps you setup your vuefront with ease. 
 
-It will ask you several questions to configure your vuefront app. 
+VueFront consists of the following modules:
+
+1. [vuefront (Github)](https://github.com/vuefront/vuefront)
+2. [vuefront-nuxt (Github)](https://github.com/vuefront/vuefront-nuxt)
+3. [vuefront-cli (Github)](https://github.com/vuefront/vuefront-cli)
+
+For a simpler installation process, we have provided [create-vuefront-app](https://github.com/vuefront/create-vuefront-app), which helps you set up your vuefront with ease. 
+
+It will ask you several questions to configure your VueFront app. 
 
 ### Recommendations
 When installing VueFront, we recommend sticking to the following rules:
 1. using always `yarn` as the default package manager
-2. using `vue cli` as your vue framework for new users and `nuxt` for advanced users.
-
-
+2. using `vue cli` as your Vue framework for new users and `nuxt` for advanced users.
diff --git a/package.json b/package.json
@@ -8,9 +8,15 @@
     "scripts": {
         "dev": "vuepress dev"
     },
+    "resolutions": {
+        "webpack-dev-middleware": "3.6.0"
+    },
     "dependencies": {
         "vuepress": "^0.14.11",
-        "webpack-dev-middleware": "^3.6.2",
+        "webpack-dev-middleware": "3.6.0",
         "webpack-dev-server": "^3.3.1"
+    },
+    "devDependencies": {
+        "vuepress": "^0.14.11"
     }
-}
+}
diff --git a/yarn.lock b/yarn.lock
