New tools added + code highlighting (#12)

package.json

@@ -13,19 +13,19 @@
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
     "body-parser": "latest",
-    "codex.editor": "^2.0.11",
+    "codex.editor": "^2.1.3",
     "codex.editor.header": "^2.0.5",
     "cookie-parser": "~1.4.3",
-    "debug": "~2.6.9",
+    "debug": "~4.1.0",
     "express": "~4.16.0",
-    "http-errors": "~1.6.2",
+    "http-errors": "~1.7.1",
     "module-dispatcher": "^1.0.2",
     "morgan": "~1.9.0",
     "multer": "^1.3.1",
     "nedb": "^1.8.0",
     "nodemon": "^1.18.3",
     "normalize.css": "^8.0.0",
-    "twig": "~0.10.3",
+    "twig": "~1.12.0",
     "uuid4": "^1.0.0"
   },
   "devDependencies": {
@@ -38,32 +38,37 @@
     "babel-loader": "^8.0.2",
     "chai": "^4.1.2",
     "chai-http": "^4.0.0",
+    "codex.editor.code": "^2.0.0",
+    "codex.editor.inline-code": "^1.0.1",
+    "codex.editor.list": "^1.0.2",
+    "codex.editor.marker": "^1.0.1",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
     "cssnano": "^4.1.0",
     "eslint": "^5.3.0",
     "eslint-config-codex": "github:codex-team/eslint-config",
     "eslint-plugin-chai-friendly": "^0.4.1",
-    "husky": "^0.14.3",
+    "highlight.js": "^9.13.1",
+    "husky": "^1.1.2",
     "mini-css-extract-plugin": "^0.4.3",
     "mocha": "^5.2.0",
     "mocha-sinon": "^2.1.0",
-    "nyc": "^12.0.2",
+    "nyc": "^13.1.0",
     "postcss": "^7.0.2",
     "postcss-apply": "^0.11.0",
-    "postcss-color-hex-alpha": "^3.0.0",
+    "postcss-color-hex-alpha": "^5.0.2",
-    "postcss-color-mod-function": "^2.4.3",
+    "postcss-color-mod-function": "^3.0.3",
-    "postcss-custom-media": "^6.0.0",
+    "postcss-custom-media": "^7.0.7",
-    "postcss-custom-properties": "^7.0.0",
+    "postcss-custom-properties": "^8.0.8",
-    "postcss-custom-selectors": "^4.0.1",
+    "postcss-custom-selectors": "^5.1.2",
     "postcss-font-family-system-ui": "^4.1.0",
     "postcss-loader": "^3.0.0",
-    "postcss-media-minmax": "^3.0.0",
+    "postcss-media-minmax": "^4.0.0",
-    "postcss-nested": "^3.0.0",
+    "postcss-nested": "^4.1.0",
     "postcss-nested-ancestors": "^2.0.0",
-    "postcss-nesting": "^6.0.0",
+    "postcss-nesting": "^7.0.0",
     "postcss-smart-import": "^0.7.6",
-    "sinon": "^6.3.5",
+    "sinon": "^7.0.0",
     "webpack": "^4.17.1",
     "webpack-cli": "^3.1.0"
   }

public/dist/code-styling.css

@@ -0,0 +1 @@
+.hljs{display:block;background:#fff;padding:.5em;color:#333;overflow-x:auto}.hljs-comment,.hljs-meta{color:#969896}.hljs-emphasis,.hljs-quote,.hljs-string,.hljs-strong,.hljs-template-variable,.hljs-variable{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-attribute,.hljs-bullet,.hljs-literal,.hljs-symbol{color:#0086b3}.hljs-name,.hljs-section{color:#63a35c}.hljs-tag{color:#333}.hljs-attr,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-title{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}

src/frontend/js/app.js

@@ -13,6 +13,7 @@ import ModuleDispatcher from 'module-dispatcher';
  * Import modules
  */
 import Writing from './modules/writing';
+import Page from './modules/page';
 
 /**
  * Main app class
@@ -25,6 +26,7 @@ class Docs {
     console.log('CodeX Docs initialized');
 
     this.writing = new Writing();
+    this.page = new Page();
 
     document.addEventListener('DOMContentLoaded', (event) => {
       this.docReady();

src/frontend/js/classes/codeStyler.js

@@ -0,0 +1,46 @@
+import hljs from "highlight.js/lib/highlight";
+import javascript from 'highlight.js/lib/languages/javascript';
+import style from 'highlight.js/styles/github-gist.css';
+
+/**
+ * @class CodeStyles
+ * @classdesc Provides styling for code blocks
+ */
+export default class CodeStyler {
+  /**
+   * @param {string} selector - CSS selector for code blocks
+   * @param {string[]} languages - list of languages to highlight, see hljs.listLanguages()
+   */
+  constructor({selector, languages = [ 'javascript' ]}) {
+    this.codeBlocksSelector = selector;
+    this.languages = languages;
+    this.langsAvailable = {
+      javascript
+    };
+
+    this.init();
+  }
+
+  /**
+   * Start to highlight
+   */
+  init() {
+    const codeBlocks = document.querySelectorAll(this.codeBlocksSelector);
+
+    if (!codeBlocks.length) {
+      return;
+    }
+
+    this.languages.forEach(lang => {
+      hljs.registerLanguage(lang, this.langsAvailable[lang]);
+    });
+
+    hljs.configure({
+      languages: this.languages
+    });
+
+    Array.from(codeBlocks).forEach(block => {
+      hljs.highlightBlock(block);
+    });
+  }
+}

src/frontend/js/classes/editor.js

@@ -1,5 +1,9 @@
 import CodeXEditor from 'codex.editor';
 import Header from 'codex.editor.header';
+import CodeTool from 'codex.editor.code';
+import InlineCode from 'codex.editor.inline-code';
+import Marker from 'codex.editor.marker';
+import ListTool from 'codex.editor.list';
 
 /**
  * Class for working with Editor.js
@@ -17,6 +21,19 @@ export default class Editor {
           config: {
             placeholder: 'Enter a title'
           }
+        },
+        code: CodeTool,
+        inlineCode: {
+          class: InlineCode,
+          shortcut: 'CMD+SHIFT+I'
+        },
+        Marker: {
+          class: Marker,
+          shortcut: 'CMD+SHIFT+M'
+        },
+        list: {
+          class: ListTool,
+          inlineToolbar: true
         }
       },
       data: initialData || {

src/frontend/js/modules/page.js

@@ -0,0 +1,36 @@
+/**
+ * @typedef {object} pageModuleSettings
+ */
+
+/**
+ * @class Page
+ * @classdesc Class for page module
+ */
+export default class Writing {
+  /**
+   * Creates base properties
+   */
+  constructor() {
+    this.codeStyler = null;
+  }
+
+  /**
+   * Called by ModuleDispatcher to initialize module from DOM
+   * @param {pageModuleSettings} settings - module settings
+   * @param {HTMLElement} moduleEl - module element
+   */
+  init(settings = {}, moduleEl) {
+    this.codeStyler = this.createCodeStyling();
+  };
+
+  /**
+   * Init code highlighting
+   */
+  async createCodeStyling() {
+    const {default: CodeStyler} = await import(/* webpackChunkName: "code-styling" */ './../classes/codeStyler');
+
+    return new CodeStyler({
+      selector: '.block-code',
+    });
+  };
+}

src/frontend/styles/components/page.pcss

@@ -42,6 +42,10 @@
   }
 }
 
+/**
+ * Header
+ * ==================
+ */
 .block-header {
   margin: 1.5em 0 0.5em;
 
@@ -55,3 +59,28 @@
     font-weight: 500;
   }
 }
+
+/**
+ * Code
+ * ==================
+ */
+.block-code {
+  padding: 20px !important;
+  font-size: 13px;
+  border-radius: 3px;
+  border: 1px solid var(--color-line-gray);
+  font-family: Menlo,Monaco,Consolas,Courier New,monospace;
+  line-height: 1.7em;
+}
+
+
+/**
+ * List
+ * ==================
+ */
+.block-list {
+  li {
+    margin: 10px 0;
+  }
+}
+

src/views/pages/blocks/code.twig

@@ -0,0 +1 @@
+<pre class="block-code">{{ code }}</pre>

src/views/pages/blocks/list.twig

@@ -0,0 +1,12 @@
+{% set tag = 'ul' %}
+
+{% if type == 'orderd' %}
+  {% set tag = 'ol' %}
+{% endif %}
+<{{ tag }} class="block-list block-list--{{ type }}">
+  {% for item in items %}
+    <li>
+      {{ item }}
+    </li>
+  {% endfor %}
+</{{ tag }}>

src/views/pages/page.twig

@@ -1,7 +1,7 @@
 {% extends 'layout.twig' %}
 
 {% block body %}
-  <article class="page">
+  <article class="page" data-module="page">
     <header class="page__header">
       <a href="/" class="page__header-nav">
         Documentation
@@ -25,7 +25,7 @@
       {% for block in page.body.blocks %}
         {# Skip first header, because it is already showed as a Title #}
         {% if not (loop.first and block.type == 'header') %}
-          {% if block.type in ['paragraph', 'header'] %}
+          {% if block.type in ['paragraph', 'header', 'list', 'code'] %}
             {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
           {% endif %}
         {% endif %}