Integrate CodeXEditor: dynamic import added (#5)

* Main elements created

* Add Editor to the writing page

src/app.js

@@ -11,6 +11,7 @@ const app = express();
 // view engine setup
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'twig');
+require('./utils/twig');
 
 app.use(logger('dev'));
 app.use(express.json());

src/frontend/js/app.js

@@ -2,11 +2,42 @@
 // eslint-disable-next-line no-unused-vars
 import css from '../styles/main.pcss';
 
-module.exports = class Docs {
+/**
+ * Module Dispatcher
+ * @see {@link https://github.com/codex-team/moduleDispatcher}
+ * @author CodeX
+ */
+import ModuleDispatcher from 'module-dispatcher';
+
+/**
+ * Import modules
+ */
+import Writing from './modules/writing';
+
+/**
+ * Main app class
+ */
+class Docs {
   /**
    * @constructor
    */
   constructor() {
     console.log('CodeX Docs initialized');
+    this.writing = new Writing();
+
+    document.addEventListener('DOMContentLoaded', (event) => {
+      this.docReady();
+    });
   }
-};
+
+  /**
+   * Document is ready
+   */
+  docReady() {
+    this.moduleDispatcher = new ModuleDispatcher({
+      Library: window.Docs
+    });
+  }
+}
+
+module.exports = new Docs();

src/frontend/js/modules/writing.js

@@ -0,0 +1,28 @@
+/**
+ * Module for pages create/edit
+ */
+module.exports = class Writing {
+  constructor(){
+  }
+
+  /**
+   * Called by ModuleDispatcher to initialize module from DOM
+   */
+  init(config, moduleEl) {
+    this.editorWrapper = document.createElement('div');
+    this.editorWrapper.id = 'codex-editor';
+
+    moduleEl.appendChild(this.editorWrapper);
+
+
+    this.loadEditor().then(() => {
+      console.log('Editor loaded');
+    })
+  };
+
+  loadEditor(){
+    return import(/* webpackChunkName: "codex-editor" */ 'codex.editor').then(({ default: CodexEditor }) => {
+       console.log('codex-editor', new CodexEditor());
+    }).catch(error => 'An error occurred while loading CodeX Editor');
+  }
+};

src/frontend/styles/components/header.pcss

@@ -7,16 +7,12 @@
 
   a {
     text-decoration: none;
-    color: inherit;
     display: inline-block;
-
-    &:hover {
-      color: var(--color-link-active);
-    }
   }
 
   &__logo {
     font-weight: bold;
+    color: inherit;
   }
 
   &__menu {
@@ -27,5 +23,18 @@
       list-style: none;
       margin-left: 20px;
     }
+
+    a:not(.docs-header__button) {
+      color: inherit;
+
+      &:hover {
+        color: var(--color-link-active);
+      }
+    }
+  }
+
+  &__button {
+    @apply --button;
+    margin: auto 30px auto auto;
   }
 }

src/frontend/styles/layout.pcss

@@ -8,6 +8,7 @@
 
   &__content {
     flex-grow: 2;
+    word-wrap: break-word;
 
     &-inner {
       max-width: var(--layout-width-main-col);

src/frontend/styles/main.pcss

@@ -10,3 +10,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+svg {
+  fill: currentColor;
+}

src/frontend/styles/vars.pcss

@@ -10,4 +10,22 @@
   --layout-padding-horisontal: 40px;
   --layout-width-aside: 250px;
   --layout-width-main-col: 650px;
+
+  --button {
+    display: inline-block;
+    background:  var(--color-link-active);
+    color: #fff;
+    border-radius: 3px;
+    padding: 9px 15px;
+    font-size: 14px;
+    line-height: 1em;
+
+    svg {
+      margin: 0 0.3em 0 -0.05em;
+    }
+
+    &:hover {
+      background: color-mod(var(--color-link-active) blackness(+10%));
+    }
+  }
 }

src/frontend/svg/plus.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.44 4.64h3.7a.9.9 0 1 1 0 1.8h-3.7v3.7a.9.9 0 1 1-1.8 0v-3.7H.9a.9.9 0 0 1 0-1.8h3.74V.9a.9.9 0 0 1 1.8 0v3.74z"/>
+</svg>

src/routes/pages.js

@@ -3,6 +3,13 @@ const router = express.Router();
 const multer = require('multer')();
 const Pages = require('../controllers/pages');
 
+/**
+ * Create new page form
+ */
+router.get('/page/new', async (req, res) => {
+  res.render('pages/form');
+});
+
 /**
  * GET /page/:id
  *

src/utils/twig.js

@@ -0,0 +1,20 @@
+/**
+ * Twig extensions
+ */
+const twig = require('twig');
+const fs = require('fs');
+
+module.exports = (function () {
+  'use strict';
+
+  /**
+   * Function for include svg on page
+   *
+   * @example svg('path/from/root/dir')
+   * @param filename - name of icon
+   * @returns {String} - svg code
+   */
+  twig.extendFunction('svg', function (filename) {
+    return fs.readFileSync(`${__dirname}/../frontend/svg/${filename}.svg`, 'utf-8');
+  });
+}());

src/views/components/header.twig

@@ -3,6 +3,12 @@
     CodeX Editor   🤩🧦🤨
   </a>
   <ul class="docs-header__menu">
+    <li>
+      <a class="docs-header__button" href="/page/new">
+        {{ svg('plus') }}
+        Add Page
+      </a>
+    </li>
     <li>
       <a href="">
         Guides

src/views/layout.twig

@@ -16,9 +16,6 @@
         </div>
       </div>
     </div>
-    <script src="/dist/bundle.js"></script>
-    <script>
-      new Docs();
-    </script>
+    <script src="/dist/main.bundle.js"></script>
   </body>
 </html>

src/views/pages/form.twig

@@ -0,0 +1,6 @@
+{% extends 'layout.twig' %}
+
+{% block body %}
+  <section data-module="writing">
+  </section>
+{% endblock %}