Landing + mobile adoptation (#38)

* Landing + mobile adoptation

* replace svg

* small updates

* use landing as iframe

* Delete .codexdocsrc

* remove unused

* updates

* Delete _index.twig

* update header shrink in chrome

* Delete .codexdocsrc

* remove focus

src/frontend/js/app.js

@@ -23,14 +23,14 @@ class Docs {
    * @constructor
    */
   constructor() {
-    console.log('CodeX Docs initialized');
-
     this.writing = new Writing();
     this.page = new Page();
 
     document.addEventListener('DOMContentLoaded', (event) => {
       this.docReady();
     });
+
+    console.log('CodeX Docs initialized');
   }
 
   /**

src/frontend/js/classes/editor.js

@@ -1,9 +1,18 @@
 import CodeXEditor from 'codex.editor';
+
+/**
+ * Tools for the Editor
+ */
 import Header from 'codex.editor.header';
-import CodeTool from 'codex.editor.code';
-import InlineCode from 'codex.editor.inline-code';
+import Quote from 'codex.editor.quote';
 import Marker from 'codex.editor.marker';
-import ListTool from 'codex.editor.list';
+import CodeTool from 'codex.editor.code';
+import Delimiter from 'codex.editor.delimiter';
+import InlineCode from 'codex.editor.inline-code';
+import List from 'codex.editor.list';
+import RawTool from 'codex.editor.raw';
+import ImageTool from 'codex.editor.image';
+import Embed from 'codex.editor.embed';
 
 /**
  * Class for working with Editor.js
@@ -11,32 +20,59 @@ import ListTool from 'codex.editor.list';
 export default class Editor {
   /**
    * Creates Editor instance
-   * @property {object} initialData - data to start with
+   * @param {object} editorConfig - configuration object for Editor.js
+   * @param {object} data.blocks - data to start with
+   * @param {object} options
+   * @param {string} options.headerPlaceholder - placeholder for Header tool
    */
-  constructor({initialData}) {
-    this.editor = new CodeXEditor({
+  constructor(editorConfig = {}, options = {}) {
+    const defaultConfig = {
       tools: {
         header: {
           class: Header,
+          inlineToolbar: ['link', 'marker'],
           config: {
-            placeholder: 'Enter a title'
+            placeholder: options.headerPlaceholder || ''
           }
         },
-        code: CodeTool,
+        // image: {
+        //   class: ImageTool,
+        //   inlineToolbar: true,
+        //   config: {
+        //     endpoints: {
+        //       byFile: '/editor/transport',
+        //       byUrl: '/editor/transport'
+        //     }
+        //   }
+        // },
+        list: {
+          class: List,
+          inlineToolbar: true
+        },
+        quote: {
+          class: Quote,
+          inlineToolbar: true
+        },
+        code: {
+          class: CodeTool,
+          shortcut: 'CMD+SHIFT+D'
+        },
         inlineCode: {
           class: InlineCode,
-          shortcut: 'CMD+SHIFT+I'
+          shortcut: 'CMD+SHIFT+C'
         },
-        Marker: {
+        rawTool: {
+          class: RawTool,
+          shortcut: 'CMD+SHIFT+R'
+        },
+        marker: {
           class: Marker,
           shortcut: 'CMD+SHIFT+M'
         },
-        list: {
-          class: ListTool,
-          inlineToolbar: true
-        }
+        delimiter: Delimiter,
+        embed: Embed
       },
-      data: initialData || {
+      data: {
         blocks: [
           {
             type: 'header',
@@ -47,7 +83,9 @@ export default class Editor {
           }
         ]
       }
-    });
+    };
+
+    this.editor = new CodeXEditor(Object.assign(defaultConfig, editorConfig));
   }
 
   /**

src/frontend/js/modules/writing.js

@@ -66,7 +66,7 @@ export default class Writing {
       this.nodes.removeButton.addEventListener('click', () => {
         const isUserAgree = confirm("Are you sure?");
         if (!isUserAgree) {
-          return
+          return;
         }
 
         this.removeButtonClicked();
@@ -85,8 +85,12 @@ export default class Writing {
   async loadEditor() {
     const {default: Editor} = await import(/* webpackChunkName: "editor" */ './../classes/editor');
 
-    return new Editor({
-      initialData: this.page ? this.page.body : null
+    const editorConfig = this.page ? {
+      data: this.page.body
+    } : {};
+
+    return new Editor(editorConfig, {
+      headerPlaceholder: 'Enter a title'
     });
   }