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

.codexdocsrc.sample

@@ -1,9 +1,10 @@
 {
-  "title": "CodeX Editor   🤩🧦🤨",
+  "title": "CodeX Docs",
   "menu": [
     "Guides",
     "API",
     "Plugins",
     {"title": "Support Project", "uri": "/support"}
-  ]
+  ],
+  "landingFrameSrc": "https://codex.so/editor?frame=1"
 }

.gitignore

@@ -70,3 +70,4 @@ typings/
 # Cache of babel and others
 .cache/
 .eslintcache
+.DS_Store

package.json

@@ -14,7 +14,12 @@
     "@babel/polyfill": "^7.0.0",
     "body-parser": "latest",
     "codex.editor": "^2.1.3",
+    "codex.editor.delimiter": "^1.0.2",
+    "codex.editor.embed": "^2.1.2",
     "codex.editor.header": "^2.0.5",
+    "codex.editor.image": "^2.0.3",
+    "codex.editor.quote": "^2.1.5",
+    "codex.editor.raw": "^2.0.2",
     "cookie-parser": "~1.4.3",
     "debug": "~4.1.0",
     "eslint-plugin-standard": "^4.0.0",
@@ -40,8 +45,8 @@
     "chai": "^4.1.2",
     "chai-http": "^4.0.0",
     "codex.editor.code": "^2.0.0",
-    "codex.editor.inline-code": "^1.0.1",
+    "codex.editor.inline-code": "^1.2.0",
-    "codex.editor.list": "^1.0.2",
+    "codex.editor.list": "^1.2.3",
     "codex.editor.marker": "^1.0.1",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",

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 Quote from 'codex.editor.quote';
-import InlineCode from 'codex.editor.inline-code';
 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}) {
+  constructor(editorConfig = {}, options = {}) {
-    this.editor = new CodeXEditor({
+    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: {
+        delimiter: Delimiter,
-          class: ListTool,
+        embed: Embed
-          inlineToolbar: true
-        }
       },
-      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({
+    const editorConfig = this.page ? {
-      initialData: this.page ? this.page.body : null
+      data: this.page.body
+    } : {};
+
+    return new Editor(editorConfig, {
+      headerPlaceholder: 'Enter a title'
     });
   }
 

src/frontend/styles/components/aside.pcss

@@ -2,6 +2,16 @@
   font-size: 15px;
   color: var(--color-text-second);
 
+  @media (--mobile) {
+    font-size: 13px;
+    display: none;
+    margin-top: 20px;
+  }
+
+  &--toggled {
+    display: block !important;
+  }
+
   a {
     text-decoration: none;
   }
@@ -9,9 +19,21 @@
   &__section {
     margin-bottom: 30px;
 
+    @media (--mobile) {
+      margin-bottom: 20px;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
     &-title {
       margin-bottom: 15px;
       color: var(--color-link-active);
+
+      @media (--mobile) {
+        margin-bottom: 10px;
+      }
     }
 
     &-list {
@@ -26,3 +48,18 @@
     }
   }
 }
+
+.docs-aside-toggler {
+  display: none;
+  font-size: 13px;
+  cursor: pointer;
+  color: var(--color-text-second);
+
+  @media (--mobile) {
+    display: block;
+  }
+
+  svg {
+    margin-right: 10px;
+  }
+}

src/frontend/styles/components/header.pcss

@@ -1,9 +1,12 @@
 .docs-header {
   display: flex;
+  flex-shrink: 0;
   padding: 0 var(--layout-padding-horisontal);
   border-bottom: 1px solid var(--color-line-gray);
   font-size: 15.8px;
   line-height: 50px;
+  flex-wrap: wrap;
+  position: relative;
 
   a {
     display: inline-block;
@@ -18,10 +21,40 @@
   &__menu {
     display: flex;
     margin: 0 0 0 auto;
+    padding-left: 0;
+
+    @media (--mobile) {
+      flex-basis: 100%;
+      font-size: 12px;
+    }
 
     li {
+      display: inline-flex;
+      align-items: center;
       list-style: none;
       margin-left: 20px;
+
+      @media (--mobile) {
+        margin-left: 0;
+        margin-right: 15px;
+      }
+    }
+
+    &-add {
+      @media (--mobile) {
+        position: absolute;
+        right: 15px;
+        top: 15px;
+        line-height: 1em;
+        margin: 0 !important;
+      }
+      a {
+        @media (--mobile) {
+          font-size: 0;
+          padding: 8px;
+          margin-right: 0;
+        }
+      }
     }
 
     a:not(.docs-header__button) {

src/frontend/styles/components/landing.pcss

@@ -0,0 +1,30 @@
+/**
+ * Index page landing iframe
+ */
+.landing-body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.landing-loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: -1;
+  transform: translate(-50%, -50%);
+
+  & > svg {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+.landing-frame {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 500ms ease;
+  will-change: opacity;
+}

src/frontend/styles/components/page.pcss

@@ -6,10 +6,18 @@
     display: flex;
     color: var(--color-text-second);
 
+    @media (--mobile) {
+      font-size: 13px;
+    }
+
     &-nav {
       color: inherit;
       text-decoration: none;
 
+      @media (--mobile) {
+        display: none;
+      }
+
       &:hover {
         color: var(--color-link-active);
       }
@@ -24,6 +32,10 @@
 
     &-time {
       margin-left: auto;
+
+      @media (--mobile) {
+        margin-left: 0;
+      }
     }
 
     &-button {

src/frontend/styles/layout.pcss

@@ -2,14 +2,31 @@
   display: flex;
   padding: 0 var(--layout-padding-horisontal);
 
+  @media (--mobile) {
+    flex-wrap: wrap;
+  }
+
   &__aside {
     width: var(--layout-width-aside);
+
+    @media (--mobile) {
+      width: 100%;
+      flex-basis: 100%;
+      padding: 20px var(--layout-padding-horisontal) !important;
+      margin: 0 calc(-1 * var(--layout-padding-horisontal));
+      border-bottom: 1px solid var(--color-line-gray);
+    }
   }
 
   &__content {
     flex-grow: 2;
     word-wrap: break-word;
 
+    @media (--mobile) {
+      width: 100%;
+      flex-basis: 100%;
+    }
+
     &-inner {
       max-width: var(--layout-width-main-col);
       margin: 0 auto;
@@ -19,5 +36,9 @@
   &__aside,
   &__content {
     padding: var(--layout-padding-vertical) 0;
+
+    @media (--mobile) {
+      padding: 20px 0;
+    }
   }
 }

src/frontend/styles/main.pcss

@@ -5,6 +5,7 @@
 @import url('components/aside.pcss');
 @import url('components/writing.pcss');
 @import url('components/page.pcss');
+@import url('components/landing.pcss');
 
 body {
   font-family: system-ui, Helvetica, Arial, Verdana;

src/frontend/styles/vars.pcss

@@ -14,6 +14,11 @@
   --layout-width-aside: 200px;
   --layout-width-main-col: 650px;
 
+  @media (--mobile) {
+    --layout-padding-horisontal: 15px;
+    --layout-padding-vertical: 15px;
+  }
+
   --button {
     display: inline-block;
     padding: 9px 15px;
@@ -25,6 +30,7 @@
     line-height: 1em;
     text-decoration: none;
     cursor: pointer;
+    white-space: nowrap;
 
     svg {
       margin: 0 0.3em 0 -0.05em;
@@ -51,3 +57,11 @@
     }
   }
 }
+
+/**
+* Custom media queries
+*/
+@custom-media --desktop all and (min-width: 1050px);
+@custom-media --tablet all and (max-width: 1050px);
+@custom-media --mobile all and (max-width: 980px);
+@custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);

src/frontend/svg/loader.svg

@@ -0,0 +1,60 @@
+<svg class="ldi-zbvw97" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" preserveAspectRatio="xMidYMid">
+  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" style="transform-origin:50px 50px 0">
+    <g style="transform-origin:50px 50px 0">
+      <g style="transform-origin:50px 50px 0;transform:scale(.6)">
+        <g style="transform-origin:50px 50px 0">
+          <style>
+            .st3{fill:#dff0fc}
+            .st5{fill:#69cdff}
+          </style>
+          <g style="transform-origin:50px 50px 0">
+            <g class="ld ld-spin" style="transform-origin:50px 50px 0;animation-duration:1.4s;animation-delay:-1.346153846153846s;animation-direction:normal">
+              <path class="st3" d="M69.4 28.7c-3-2.8-6.5-4.8-10.3-6-4.6-1.5-7.7-5.8-7.7-10.6V7.5c4.9.2 9.7 1.1 14.2 2.9 7.4 2.9 9.5 12.6 3.8 18.3z" fill="#dff0fc"/>
+            </g>
+          </g>
+          <g style="transform-origin:50px 50px 0">
+            <g class="ld ld-spin" style="transform-origin:50px 50px 0;animation-duration:1.4s;animation-delay:-1.2923076923076924s;animation-direction:normal">
+              <path class="st5" d="M33 11c-4.4 1.9-8.5 4.6-12.1 8l3.2 3.2c3.4 3.4 8.6 4.2 12.9 2.1 3.6-1.8 7.5-2.8 11.6-3 0-8.1-8.2-13.5-15.6-10.3z" fill="#69cdff"/>
+            </g>
+          </g>
+          <g style="transform-origin:50px 50px 0">
+            <g class="ld ld-spin" style="transform-origin:50px 50px 0;animation-duration:1.4s;animation-delay:-1.2384615384615383s;animation-direction:normal">
+              <path class="st3" d="M10.4 34.4c-1.8 4.5-2.7 9.3-2.9 14.2H12c4.8 0 9.1-3.1 10.6-7.7 1.3-3.8 3.3-7.3 6.1-10.3-5.7-5.7-15.4-3.6-18.3 3.8z" fill="#dff0fc"/>
+            </g>
+          </g>
+          <g style="transform-origin:50px 50px 0">
+            <g class="ld ld-spin" style="transform-origin:50px 50px 0;animation-duration:1.4s;animation-delay:-1.1846153846153846s;animation-direction:normal">
+              <path class="st5" d="M11 67c1.9 4.4 4.6 8.5 8 12.1l3.2-3.2c3.4-3.4 4.2-8.6 2.1-12.9-1.8-3.6-2.8-7.5-3-11.6-8.1 0-13.5 8.2-10.3 15.6z" fill="#69cdff"/>
+            </g>
+          </g>
+          <g style="transform-origin:50px 50px 0">
+            <g class="ld ld-spin" style="transform-origin:50px 50px 0;animation-duration:1.4s;animation-delay:-1.1307692307692307s;animation-direction:normal">
+              <path class="st5" d="M89 33c-1.9-4.4-4.6-8.5-8-12.1l-3.2 3.2c-3.4 3.4-4.2 8.6-2.1 12.9 1.8 3.6 2.8 7.5 3 11.6 8.1 0 13.5-8.2 10.3-15.6z" fill="#69cdff"/>
+            </g>
+          </g>
+          <g style="transform-origin:50px 50px 0">
+            <g class="ld ld-spin" style="transform-origin:50px 50px 0;animation-duration:1.4s;animation-delay:-1.0769230769230769s;animation-direction:normal">
+              <path class="st3" d="M89.6 65.6c1.8-4.5 2.7-9.3 2.9-14.2H88c-4.8 0-9.1 3.1-10.6 7.7-1.3 3.8-3.3 7.3-6.1 10.3 5.7 5.7 15.4 3.6 18.3-3.8z" fill="#dff0fc"/>
+            </g>
+          </g>
+          <g style="transform-origin:50px 50px 0">
+            <g class="ld ld-spin" style="transform-origin:50px 50px 0;animation-duration:1.4s;animation-delay:-1.023076923076923s;animation-direction:normal">
+              <path class="st5" d="M67 89c4.4-1.9 8.5-4.6 12.1-8l-3.2-3.2c-3.4-3.4-8.6-4.2-12.9-2.1-3.6 1.8-7.5 2.8-11.6 3 0 8.1 8.2 13.5 15.6 10.3z" fill="#69cdff"/>
+            </g>
+          </g>
+          <g style="transform-origin:50px 50px 0">
+            <g class="ld ld-spin" style="transform-origin:50px 50px 0;animation-duration:1.4s;animation-delay:-.9692307692307691s;animation-direction:normal">
+              <path class="st3" d="M34.4 89.6c4.5 1.8 9.3 2.7 14.2 2.9V88c0-4.8-3.1-9.1-7.7-10.6-3.8-1.3-7.3-3.3-10.3-6.1-5.7 5.7-3.6 15.4 3.8 18.3z" fill="#dff0fc"/>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+    <style>
+      .ld-spin {
+        will-change: transform;
+      }
+      @keyframes ld-spin{0%{-webkit-transform:rotate(0);transform:rotate(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);animation-timing-function:cubic-bezier(.215,.61,.355,1)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes ld-spin{0%{-webkit-transform:rotate(0);transform:rotate(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);animation-timing-function:cubic-bezier(.215,.61,.355,1)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}path{stroke-width:0}.ld.ld-spin{-webkit-animation:ld-spin 1s infinite;animation:ld-spin 1s infinite}
+    </style>
+  </svg>
+</svg>

src/frontend/svg/menu.svg

@@ -0,0 +1 @@
+<svg width="13" height="10" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h13v2H0V0zm0 4h13v2H0V4zm0 4h13v2H0V8z" fill-rule="evenodd"/></svg>

src/routes/home.js

@@ -3,7 +3,7 @@ const router = express.Router();
 
 /* GET home page. */
 router.get('/', function (req, res, next) {
-  res.render('index', { title: 'Express' });
+  res.render('pages/index');
 });
 
 module.exports = router;

src/utils/rcparser.js

@@ -41,7 +41,7 @@ module.exports = class RCParser {
     }
 
     const file = fs.readFileSync(rcPath, { encoding: 'UTF-8' });
-    const rConfig = {};
+    const rConfig = RCParser.DEFAULTS;
     let userConfig;
 
     try {
@@ -51,8 +51,11 @@ module.exports = class RCParser {
       return RCParser.DEFAULTS;
     }
 
-    rConfig.title = userConfig.title || RCParser.DEFAULTS.title;
+    for (let option in userConfig) {
-    rConfig.menu = userConfig.menu || RCParser.DEFAULTS.menu;
+      if (userConfig.hasOwnProperty(option)) {
+        rConfig[option] = userConfig[option] || RCParser.DEFAULTS[option] || undefined;
+      }
+    }
 
     if (!(rConfig.menu instanceof Array)) {
       console.log('Menu section in the rc file must be an array.');

src/views/components/aside.twig

@@ -1,3 +1,6 @@
+<div class="docs-aside-toggler" onclick="document.querySelector('.docs-aside').classList.toggle('docs-aside--toggled')">
+  {{ svg('menu') }} Table of contents
+</div>
 <div class="docs-aside">
     {% for firstLevelPage in menu %}
       <section class="docs-aside__section">

src/views/components/header.twig

@@ -3,7 +3,7 @@
     {{ config.title }}
   </a>
   <ul class="docs-header__menu">
-    <li>
+    <li class="docs-header__menu-add">
       <a class="docs-header__button" href="/page/new">
         {{ svg('plus') }}
         Add Page

src/views/index.twig

@@ -1,6 +0,0 @@
-{% extends 'layout.twig' %}
-
-{% block body %}
-  {{title}}
-  <p>Welcome to {{title}}</p>
-{% endblock %}

src/views/layout.twig

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>{{ title }}</title>
+    <title>{{ config.title }}</title>
     <link rel="stylesheet" href="/dist/main.css" />
   </head>
   <body>

src/views/pages/index.twig

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html style="height: 100%">
+<head>
+  <title>{{ config.title }}</title>
+  <link rel="stylesheet" href="/dist/main.css" />
+  <link rel="preload" href="{{ config.landingFrameSrc }}" as="document">
+</head>
+<body class="landing-body">
+  {% include "components/header.twig" %}
+  <div class="landing-loader" id="frame-loader">
+    {{ svg('loader') }}
+  </div>
+  <iframe class="landing-frame" src="{{ config.landingFrameSrc }}" seamless frameborder="0" onload="this.style.opacity = 1; setTimeout(document.getElementById('frame-loader').remove(), 500)"></iframe>
+</body>
+</html>
+