New tools added + code highlighting (#12)

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 %}