Update final result in docs

docs/.vuepress/components/DemoTheme.vue

@@ -31,16 +31,16 @@ module.exports = {
     editor8.Panels.addPanel(Object.assign({}, utils.panelTop, {
       el: '#panel__top8'
     }));
-    editor8.Panels.addPanel(Object.assign({}, utils.panelBasicActions, {
+    editor8.Panels.addPanel(Object.assign({}, utils.panelBasicActionsIcons, {
       el: '#panel__basic-actions8'
     }));
     editor8.Panels.addPanel(Object.assign({}, utils.panelSidebar, {
       el: '#panel__right8'
     }));
-    editor8.Panels.addPanel(Object.assign({}, utils.panelSwitcherTraits, {
+    editor8.Panels.addPanel(Object.assign({}, utils.panelSwitcherTraitsIcons, {
       el: '#panel__switcher8'
     }));
-    editor8.Panels.addPanel(Object.assign({}, utils.panelDevices, {
+    editor8.Panels.addPanel(Object.assign({}, utils.panelDevicesIcons, {
       el: '#panel__devices8'
     }));
     window.editor8 = editor8;

docs/.vuepress/components/demos/utils.js

@@ -29,6 +29,20 @@ var blockManager = {
   ]
 };
 
+var blockManagerIcons = Object.assign({}, blockManager, {
+  blocks: [
+    Object.assign({}, blockManager.blocks[0], {
+      label: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2m0 2v14H5V5h14z"></path></svg>',
+    }),
+    Object.assign({}, blockManager.blocks[1], {
+      label: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.5 4l1.16 4.35-.96.26c-.45-.87-.91-1.74-1.44-2.18C16.73 6 16.11 6 15.5 6H13v10.5c0 .5 0 1 .33 1.25.34.25 1 .25 1.67.25v1H9v-1c.67 0 1.33 0 1.67-.25.33-.25.33-.75.33-1.25V6H8.5c-.61 0-1.23 0-1.76.43-.53.44-.99 1.31-1.44 2.18l-.96-.26L5.5 4h13z"></path></svg>',
+    }),
+    Object.assign({}, blockManager.blocks[2], {
+      label: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 5c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4a2 2 0 0 1-2-2V7c0-1.11.89-2 2-2h16M5 16h14l-4.5-6-3.5 4.5-2.5-3L5 16z"></path></svg>',
+    }),
+  ]
+});
+
 var styleManager = {
   sectors: [{
       name: 'Dimension',
@@ -106,6 +120,7 @@ var panelBasicActions = {
       id: 'show-json',
       className: 'btn-show-json',
       label: 'JSON',
+      context: 'show-json',
       command(editor) {
         editor.Modal.setTitle('Components JSON')
           .setContent(`<textarea style="width:100%; height: 250px;">
@@ -116,6 +131,19 @@ var panelBasicActions = {
     }
   ],
 };
+var panelBasicActionsIcons = Object.assign({}, panelBasicActions, {
+  buttons: [
+    Object.assign({}, panelBasicActions.buttons[0], {
+      label: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 5h2V3h-2m0 18h2v-2h-2M11 5h2V3h-2m8 2h2V3h-2m0 6h2V7h-2m0 14h2v-2h-2m0-6h2v-2h-2m0 6h2v-2h-2M3 5h2V3H3m0 6h2V7H3m0 6h2v-2H3m0 6h2v-2H3m0 6h2v-2H3m8 2h2v-2h-2m-4 2h2v-2H7M7 5h2V3H7v2z"></path></svg>',
+    }),
+    Object.assign({}, panelBasicActions.buttons[1], {
+      label: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7 7-7z"></path></svg>',
+    }),
+    Object.assign({}, panelBasicActions.buttons[2], {
+      label: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 3c-1.1 0-2 .9-2 2v4c0 1.1-.9 2-2 2H3v2h1c1.1 0 2 .9 2 2v4c0 1.1.9 2 2 2h2v-2H8v-5c0-1.1-.9-2-2-2 1.1 0 2-.9 2-2V5h2V3m6 0c1.1 0 2 .9 2 2v4c0 1.1.9 2 2 2h1v2h-1c-1.1 0-2 .9-2 2v4c0 1.1-.9 2-2 2h-2v-2h2v-5c0-1.1.9-2 2-2-1.1 0-2-.9-2-2V5h-2V3h2z"></path></svg>',
+    }),
+  ]
+});
 var panelSidebar = {
   el: '#panel__right4',
   id: 'layers',
@@ -213,6 +241,21 @@ var panelSwitcherTraits = {
   ],
 };
 
+var panelSwitcherTraitsIcons = {
+  id: 'panel-switcher',
+  buttons: [
+    Object.assign({}, buttonShowLayers, {
+      label: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27M12 18.54l-7.38-5.73L3 14.07l9 7 9-7-1.63-1.27L12 18.54z"></path></svg>',
+    }),
+    Object.assign({}, buttonShowStyle, {
+      label: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5 12c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5m-3-4c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8m-5 0C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8m-3 4c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12M12 3a9 9 0 0 0 0 18c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1-.23-.27-.38-.62-.38-1 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8z"></path></svg>',
+    }),
+    Object.assign({}, buttonShowTraits, {
+      label: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66z"></path></svg>',
+    }),
+  ],
+};
+
 var panelDevices = {
   id: 'panel-devices',
   buttons: [{
@@ -229,6 +272,17 @@ var panelDevices = {
   }],
 };
 
+var panelDevicesIcons = Object.assign({}, panelDevices, {
+  buttons: [
+    Object.assign({}, panelDevices.buttons[0], {
+      label: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 14H3V4h18m0-2H3c-1.11 0-2 .89-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4a2 2 0 0 0-2-2z"></path></svg>',
+    }),
+    Object.assign({}, panelDevices.buttons[1], {
+      label: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 18H7V4h9m-4.5 18c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5m4-21h-8A2.5 2.5 0 0 0 5 3.5v17A2.5 2.5 0 0 0 7.5 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 15.5 1z"></path></svg>',
+    }),
+  ]
+});
+
 var gjsConfigStart = {
   // Indicate where to init the editor. It's also possible to pass an HTMLElement
   container: '#gjs',
@@ -287,7 +341,7 @@ var gjsConfigDevices = Object.assign({}, gjsConfigBlocks, {
 
 var gjsConfigTheme = Object.assign({}, gjsConfigBlocks, {
   container: '#gjs8',
-  blockManager: Object.assign({}, blockManager, { appendTo: '#blocks8' }),
+  blockManager: Object.assign({}, blockManagerIcons, { appendTo: '#blocks8' }),
   layerManager: Object.assign({}, layerManager, { appendTo: '#layers-container8' }),
   styleManager: Object.assign({}, styleManager, { appendTo: '#styles-container8' }),
   traitManager: Object.assign({}, traitManager, { appendTo: '#traits-container8' }),
@@ -305,8 +359,11 @@ module.exports = {
   gjsConfigTheme,
   panelTop,
   panelBasicActions,
+  panelBasicActionsIcons,
   panelSidebar,
   panelSwitcher,
   panelSwitcherTraits,
+  panelSwitcherTraitsIcons,
   panelDevices,
+  panelDevicesIcons,
 };

docs/getting-started.md

@@ -5,20 +5,32 @@ meta:
   - name: keywords
     content: grapesjs getting started
 ---
-TODO:
-- svg icons
-- Selectors
 
 # Getting Started
 
-In this guide we'll see how to create a completely customized page builder from scratch.
-Here you can find the final result: [demo](##).
+This guide is a step-by-step introduction for everyone who wants to start creating its own builder with GrapesJS. This is not a complete guide of all functionalities but just a concise overview of most common modules.
+Let's see how to create a completely customized page builder from scratch. The last demo of this page represents the [final result](#final-result)
 
-At first, let's import the latest version of the library
+## Import the library
+
+Before start using GrapesJS you have to import it inside your project, so let's import its latest version
 
 ```html
 <link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css">
 <script src="//unpkg.com/grapesjs"></script>
+<!--
+If you need plugins, put them below the main grapesjs script
+<script src="/path/to/some/plugin.min.js"></script>
+-->
+```
+
+or if you're in node environment
+
+```js
+import 'grapesjs/dist/css/grapes.min.css';
+import grapesjs from 'grapesjs';
+// If you need plugins, put them below the main grapesjs script
+// import 'grapesjs-some-plugin';
 ```
 
 ## Start from the canvas
@@ -197,6 +209,7 @@ editor.Panels.addPanel({
       id: 'show-json',
       className: 'btn-show-json',
       label: 'JSON',
+      context: 'show-json',
       command(editor) {
         editor.Modal.setTitle('Components JSON')
           .setContent(`<textarea style="width:100%; height: 250px;">
@@ -700,6 +713,6 @@ To complete our builder let's customize its color palette and to make it more vi
 
 and here is our final result
 
-<Demo>
+<Demo id="final-result">
   <DemoTheme/>
 </Demo>

src/styles/scss/_gjs_blocks.scss

@@ -29,6 +29,7 @@
   @include user-select(none);
 
   width: 45%;
+  min-width: 45px;
   padding: 1em;
   box-sizing: border-box;
   min-height: 90px;
@@ -49,6 +50,10 @@
   &:hover {
     box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
   }
+
+  svg {
+    fill: currentColor;
+  }
 }
 
 .#{$app-prefix}block-svg {

src/styles/scss/_gjs_panels.scss

@@ -67,5 +67,9 @@
       background-color: rgba(0, 0, 0, 0.15);
       box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset;
     }
+
+    svg {
+      fill: currentColor;
+    }
   }
 }