Update getting started demo

docs/.vuepress/components/DemoBasicBlocks.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div id="gjs2">
+      <h1>Hello World Component!</h1>
+    </div>
+    <div id="blocks2"></div>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  mounted() {
+    window.editor2 = grapesjs.init({
+      container: '#gjs2',
+      fromElement: true,
+      height: '300px',
+      storageManager: { type: null },
+      panels: { defaults: [] },
+      // ...
+      blockManager: {
+        appendTo: '#blocks2',
+        blocks: [
+          {
+            id: 'text', // id is mandatory
+            label: '<b>Text</b>',
+            attributes: { class:'gjs-text-block' },
+            content: '<div>Insert your text here</div>',
+          }, {
+            id: 'image',
+            label: 'Image',
+            content: { type: 'image' },
+          }
+        ]
+      },
+    });
+  }
+}
+</script>
+
+<style>
+</style>

docs/.vuepress/components/DemoCanvasOnly.vue

@@ -9,12 +9,22 @@ module.exports = {
       console.log('import res', res);
     });
     */
-
+    const editor = grapesjs.init({
-    var editor = grapesjs.init({
+      // Indicate where to init the editor. It's also possible to pass an HTMLElement
       container: '#gjs',
+      // Get the content for the canvas direectly from the element
+      // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
       fromElement: true,
+      // Height of the editor
       height: '300px',
+      // Disable the storage manager for the moment
+      storageManager: { type: null },
+      // Avoid any default panel
+      panels: { defaults: [] },
     });
   }
 }
 </script>
+
+<style src="./demos/DemoCanvasOnly.css">
+</style>

docs/.vuepress/components/demos/DemoCanvasOnly.css

@@ -0,0 +1,12 @@
+/* Let's highlight canvas boundaries */
+#gjs {
+  border-radius: 3px;
+  border: 3px solid #444;
+}
+
+/* Reset some default styling */
+.gjs-cv-canvas {
+  top: 0;
+  width: 100%;
+  height: 100%;
+}

docs/.vuepress/components/demos/DemoCanvasOnly.js

@@ -1,5 +1,13 @@
-var editor = grapesjs.init({
+const editor = grapesjs.init({
+  // Indicate where to init the editor. You can also pass an HTMLElement
   container: '#gjs',
+  // Get the content for the canvas directly from the element
+  // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
   fromElement: true,
+  // Height of the editor
   height: '300px',
+  // Disable the storage manager for the moment
+  storageManager: { type: null },
+  // Avoid any default panel
+  panels: { defaults: [] },
 });

docs/.vuepress/config.js

@@ -7,7 +7,8 @@ module.exports = {
   head: [
     ['link', { rel: 'icon', href: '/logo-icon.png' }],
     ['link', { rel: 'stylesheet', href: 'https://unpkg.com/grapesjs/dist/css/grapes.min.css' }], // dev https://localhost:8080/dist/css/grapes.min.css
-    ['script', { src: '/grapes.min.js' }], // dev https://localhost:8080/dist/grapes.min.js
+    // ['script', { src: '/grapes.min.js' }], // dev https://localhost:8080/dist/grapes.min.js
+    ['script', { src: 'https://localhost:8080/dist/grapes.min.js' }], // dev https://localhost:8080/dist/grapes.min.js
   ],
   localesSKIP: {
     '/': {

docs/getting-started.md

@@ -7,7 +7,8 @@ meta:
 
 # Getting Started
 
-In this guide we'll see how to create a completely customized page builder from scratch. You can check the final result [here](##).
+In this guide we'll see how to create a completely customized page builder from scratch.
+Here you can check the final result: [demo](##).
 
 At first, let's import the latest version of the library
 
@@ -16,26 +17,30 @@ At first, let's import the latest version of the library
 <script src="//unpkg.com/grapesjs"></script>
 ```
 
-## Canvas
+## Start from the canvas
 
-The first step is to define the interface of our editor and for this purpose we gonna use Panels API.
+The first step is to define the interface of our editor and for this purpose we gonna start from basic HTML layouts.
 Finding a common structure for the UI of any project is not an easy task that's why GrapesJS prefers to keep this process as simple as possible, by providing just few helpers but letting the user define the interface in a more flexible way.
 The main part of the GrapesJS editor is the canvas, this is where you gonna create the whole structure of your templates and you definitely can't miss it. Let's try to initiate the editor with just the canvas and no panels.
 
 <<< @/docs/.vuepress/components/demos/DemoCanvasOnly.html
 <<< @/docs/.vuepress/components/demos/DemoCanvasOnly.js
+<<< @/docs/.vuepress/components/demos/DemoCanvasOnly.css
 <Demo>
  <DemoCanvasOnly/>
 </Demo>
 
-With just the canvas you're already able to move, copy and delete components on the structure. For now we just see the example template taken from the container. Let's see now how can we create and drag custom blocks into our canvas.
+With just the canvas you're already able to move, copy and delete components from the structure (when you select components in the canvas, the toolbar is shown). For now we just see the example template taken from the container. Let's see now how can we create and drag custom blocks into our canvas.
 
-## Blocks
+## Add Blocks
-A block in Grapesjs is just a draggable peace of HTML, so it can be an image, a button, or an entire section with videos, forms and iframes. Let's start from creating another container and append inside ir few basic blocks which we can later use to build more complex structures.
+The Block in GrapesJS is just a draggable peace of HTML, so it can be an image, a button, or an entire section with videos, forms and iframes. Let's start from creating another container and append inside it few basic blocks which we can later use to build more complex structures.
 
+<Demo>
+ <DemoBasicBlocks/>
+</Demo>
 -- add block, image, text and button blocks, put the block container under the canvas
 
-As you see we added our blocks via the initial configuration, which is ok, but obviously there might be the case you would like to add them dynamically, in this case you have to use the Block's API
+As you see we added our blocks via the initial configuration, which is ok, but obviously there might be the case you would like to add them dynamically, in this case you have to use the [Block Manager API](api/block_manager.html)
 
 -- show how to add a block via API
 --TODO: components as blocks

package.json

@@ -16,11 +16,9 @@
     "cash-dom": "^1.3.7",
     "codemirror": "^5.39.0",
     "codemirror-formatting": "^1.0.0",
-    "documentation": "^8.0.0",
     "font-awesome": "^4.7.0",
     "keymaster": "^1.6.2",
     "promise-polyfill": "^8.0.0",
-    "sinon": "^6.1.0",
     "spectrum-colorpicker": "^1.8.0",
     "underscore": "^1.9.1"
   },
@@ -29,6 +27,7 @@
     "babel-loader": "^7.1.5",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.7.0",
+    "documentation": "^8.0.0",
     "eslint": "^4.19.1",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
@@ -36,6 +35,7 @@
     "lint-staged": "^7.2.0",
     "node-sass": "^4.9.1",
     "prettier": "^1.13.7",
+    "sinon": "^6.1.0",
     "string-replace-loader": "^2.1.1",
     "vuepress": "^0.10.2",
     "webpack": "^4.15.1",