Main elements created: header, aside

bin/www

@@ -22,15 +22,13 @@ const server = http.createServer(app);
 /**
  * Listen on provided port, on all network interfaces.
  */
-
 server.listen(port);
 server.on('error', onError);
 server.on('listening', onListening);
 
 /**
  * Normalize a port into a number, string, or false.
  */
-
 function normalizePort(val) {
   const port = parseInt(val, 10);
 
@@ -50,7 +48,6 @@ function normalizePort(val) {
 /**
  * Event listener for HTTP server "error" event.
  */
-
 function onError(error) {
   if (error.syscall !== 'listen') {
     throw error;
@@ -78,7 +75,6 @@ function onError(error) {
 /**
  * Event listener for HTTP server "listening" event.
  */
-
 function onListening() {
   const addr = server.address();
   const bind = typeof addr === 'string'

package.json

@@ -6,7 +6,7 @@
     "start": "nodemon ./bin/www",
     "test": "mocha --recursive ./test",
     "lint": "eslint --fix --cache ./src/**/*.js",
-    "build": "webpack ./src/frontend/js/app.js --o='./public/dist/bundle.js' --output-library=Docs -d",
+    "build": "webpack ./src/frontend/js/app.js --o='./public/dist/bundle.js' --output-library=Docs -d --watch",
     "precommit": "yarn lint && yarn test --exit"
   },
   "dependencies": {
@@ -19,6 +19,7 @@
     "multer": "^1.3.1",
     "nedb": "^1.8.0",
     "nodemon": "^1.18.3",
+    "normalize.css": "^8.0.0",
     "twig": "~0.10.3",
     "uuid4": "^1.0.0"
   },

src/frontend/styles/components/aside.pcss

@@ -0,0 +1,28 @@
+.docs-aside {
+  font-size: 15px;
+  color: var(--color-text-second);
+
+  a {
+    text-decoration: none;
+  }
+
+  &__section {
+    margin-bottom: 30px;
+
+    &-title {
+      margin-bottom: 15px;
+      color: var(--color-link-active);
+    }
+
+    &-list {
+      padding-left: 0;
+      list-style: none;
+
+      a {
+        display: inline-block;
+        color: inherit;
+        padding: 8px 0;
+      }
+    }
+  }
+}

src/frontend/styles/components/header.pcss

@@ -0,0 +1,31 @@
+.docs-header {
+  font-size: 15.8px;
+  border-bottom: 1px solid var(--color-line-gray);
+  line-height: 50px;
+  display: flex;
+  padding: 0 var(--layout-padding-horisontal);
+
+  a {
+    text-decoration: none;
+    color: inherit;
+    display: inline-block;
+
+    &:hover {
+      color: var(--color-link-active);
+    }
+  }
+
+  &__logo {
+    font-weight: bold;
+  }
+
+  &__menu {
+    display: flex;
+    margin: 0 0 0 auto;
+
+    li {
+      list-style: none;
+      margin-left: 20px;
+    }
+  }
+}

src/frontend/styles/layout.pcss

@@ -0,0 +1,22 @@
+.docs {
+  display: flex;
+  padding: 0 var(--layout-padding-horisontal);
+
+  &__aside {
+    width: var(--layout-width-aside);
+  }
+
+  &__content {
+    flex-grow: 2;
+
+    &-inner {
+      max-width: var(--layout-width-main-col);
+      margin: 0 auto;
+    }
+  }
+
+  &__aside,
+  &__content {
+    padding: 40px 0;
+  }
+}

src/frontend/styles/main.pcss

@@ -1,7 +1,12 @@
+@import url('../../../node_modules/normalize.css');
+@import url('vars.pcss');
+@import url('layout.pcss');
+@import url('components/header.pcss');
+@import url('components/aside.pcss');
+
 body {
   font-family: system-ui, Helvetica, Arial, Verdana;
-}
-
-a {
-  color: #00B7FF;
+  color: var(--color-text-main);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

src/frontend/styles/vars.pcss

@@ -0,0 +1,13 @@
+:root {
+  --color-text-main: #1D202B;
+  --color-text-second: #7B7E89;
+  --color-line-gray: #E8E8EB;
+  --color-link-active: #388AE5;
+
+  /**
+   * Site layout sizes
+   */
+  --layout-padding-horisontal: 40px;
+  --layout-width-aside: 250px;
+  --layout-width-main-col: 650px;
+}

src/views/components/aside.twig

@@ -0,0 +1,19 @@
+<div class="docs-aside">
+  <section class="docs-aside__section">
+    <a class="docs-aside__section-title" href="">
+      Base concepts
+    </a>
+    <ul class="docs-aside__section-list">
+      <li>
+        <a href="">
+          Insallation
+        </a>
+      </li>
+      <li>
+        <a href="">
+          Usage
+        </a>
+      </li>
+    </ul>
+  </section>
+</div>

src/views/components/header.twig

@@ -0,0 +1,27 @@
+<header class="docs-header">
+  <a href="/" class="docs-header__logo">
+    CodeX Editor &nbsp; 🤩🧦🤨
+  </a>
+  <ul class="docs-header__menu">
+    <li>
+      <a href="">
+        Guides
+      </a>
+    </li>
+    <li>
+      <a href="">
+        API
+      </a>
+    </li>
+    <li>
+      <a href="">
+        Plugins
+      </a>
+    </li>
+    <li>
+      <a href="">
+        Support Project
+      </a>
+    </li>
+  </ul>
+</header>

src/views/index.twig

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

src/views/layout.twig

@@ -3,9 +3,22 @@
   <head>
     <title>{{ title }}</title>
     <link rel="stylesheet" href="/dist/bundle.css" />
-    <script src="/dist/bundle.js" onload="new Docs()"></script>
   </head>
   <body>
-    {% block body %}{% endblock %}
+    {% include "components/header.twig" %}
+    <div class="docs">
+      <aside class="docs__aside">
+        {% include "components/aside.twig" %}
+      </aside>
+      <div class="docs__content">
+        <div class="docs__content-inner">
+          {% block body %}{% endblock %}
+        </div>
+      </div>
+    </div>
+    <script src="/dist/bundle.js"></script>
+    <script>
+      new Docs();
+    </script>
   </body>
 </html>

yarn.lock

@@ -3936,6 +3936,10 @@ normalize-url@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
 
+normalize.css@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.0.tgz#14ac5e461612538a4ce9be90a7da23f86e718493"
+
 npm-bundled@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"