Merge branch 'feat/sidebar-search' of https://github.com/codex-team/codex.docs into feat/sidebar-search

.codexdocsrc.sample

@@ -5,7 +5,6 @@
     "Guides",
     {"title": "CodeX", "uri": "https://codex.so"}
   ],
-  "landingFrameSrc": "https://codex.so/editor?frame=1",
   "startPage": "",
   "misprintsChatId": "12344564",
   "yandexMetrikaId": "",

nodemon.json

@@ -1,5 +1,4 @@
 {
-  "verbose": true,
   "ignore": [
     ".git",
     "node_modules",

package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@codexteam/shortcuts": "^1.2.0",
     "@hawk.so/javascript": "^3.0.1",
-    "@hawk.so/nodejs": "^3.1.2",
+    "@hawk.so/nodejs": "^3.1.4",
     "config": "^3.3.6",
     "cookie-parser": "^1.4.5",
     "csurf": "^1.11.0",

src/backend/app.ts

@@ -8,7 +8,7 @@ import routes from './routes/index.js';
 import HttpException from './exceptions/httpException.js';
 import * as dotenv from 'dotenv';
 import config from 'config';
-import { default as HawkCatcher } from '@hawk.so/nodejs';
+import HawkCatcher from '@hawk.so/nodejs';
 import os from 'os';
 import appConfig from 'config';
 import { downloadFavicon, FaviconData } from './utils/downloadFavicon.js';

src/backend/controllers/aliases.ts

@@ -14,10 +14,6 @@ class Aliases {
   public static async get(aliasName: string): Promise<Alias> {
     const alias = await Alias.get(aliasName);
 
-    if (!alias.id) {
-      throw new Error('Entity with given alias does not exist');
-    }
-
     return alias;
   }
 }

src/backend/models/pagesFlatArray.ts

@@ -43,7 +43,7 @@ export interface PagesFlatArrayData {
 }
 
 /**
-   * @class PagesFlatArray model - flat array of pages, which are ordered like in sidebar
+ * @class PagesFlatArray model - flat array of pages, which are ordered like in sidebar
  */
 class PagesFlatArray {
   /**

src/backend/routes/aliases.ts

@@ -4,6 +4,8 @@ import Pages from '../controllers/pages.js';
 import Alias from '../models/alias.js';
 import verifyToken from './middlewares/token.js';
 import PagesFlatArray from '../models/pagesFlatArray.js';
+import HttpException from '../exceptions/httpException.js';
+
 
 const router = express.Router();
 
@@ -24,7 +26,7 @@ router.get('*', verifyToken, async (req: Request, res: Response) => {
     const alias = await Aliases.get(url);
 
     if (alias.id === undefined) {
-      throw new Error('Alias not found');
+      throw new HttpException(404, 'Alias not found');
     }
 
     switch (alias.type) {
@@ -46,10 +48,17 @@ router.get('*', verifyToken, async (req: Request, res: Response) => {
       }
     }
   } catch (err) {
-    res.status(400).json({
+    if (err instanceof HttpException && (err as HttpException).status === 404) {
-      success: false,
+      res.status(404).render('error', {
-      error: err,
+        message: 'Page not found',
-    });
+        status: 404,
+      });
+    } else {
+      res.status(500).json({
+        success: false,
+        error: err,
+      });
+    }
   }
 });
 

src/backend/routes/home.ts

@@ -1,5 +1,8 @@
 import express, { Request, Response } from 'express';
 import verifyToken from './middlewares/token.js';
+import PagesOrder from '../controllers/pagesOrder.js';
+import Pages from '../controllers/pages.js';
+
 
 const router = express.Router();
 
@@ -7,10 +10,22 @@ const router = express.Router();
 router.get('/', verifyToken, async (req: Request, res: Response) => {
   const config = req.app.locals.config;
 
+  // Check if config consists startPage
   if (config.startPage) {
     return res.redirect(config.startPage);
+  } else {
+    const pageOrder = await PagesOrder.getRootPageOrder();
+
+    // Check if page order consists
+    if (pageOrder.order.length > 0) {
+      // Get the first parent page
+      const page = await Pages.get(pageOrder.order[0]);
+
+      res.redirect(page.uri!);
+    } else {
+      res.render('pages/index', { isAuthorized: res.locals.isAuthorized });
+    }
   }
-  res.render('pages/index', { isAuthorized: res.locals.isAuthorized });
 });
 
 export default router;

src/backend/views/error.twig

@@ -1,7 +1,10 @@
 {% extends 'layout.twig' %}
 
 {% block body %}
-  <h1>{{message}}</h1>
+	<div class="error-page">
-  <h2>{{error.status}}</h2>
+    <h1>
-  <pre>{{error.stack}}</pre>
+      ┬┴┬┴┤ {{status}} ├┬┴┬┴
+    </h1>
+		<h1>{{message}}</h1>
+	</div>
 {% endblock %}

src/backend/views/pages/blocks/image.twig

@@ -4,10 +4,6 @@
   {% set classes = classes|merge(['block-image__content--bordered']) %}
 {% endif %}
 
-{% if stretched %}
-  {% set classes = classes|merge(['block-image__content--stretched']) %}
-{% endif %}
-
 {% if withBackground %}
   {% set classes = classes|merge(['block-image__content--with-background']) %}
 {% endif %}

src/backend/views/pages/index.twig

@@ -3,7 +3,6 @@
 <head>
   <title>{{ config.title }}</title>
   <link rel="stylesheet" href="/dist/main.css" />
-  <link rel="preload" href="{{ config.landingFrameSrc }}" as="document">
   <link rel="icon" type="{{ favicon.type }}" href="{{ favicon.destination }}">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta property="og:title" content="{{ config.title }}" />
@@ -12,13 +11,15 @@
 </head>
 <script>
 </script>
-<body class="landing-body">
+<body class="greeting-body">
   {% include "components/header.twig" %}
-  <div class="landing-loader" id="frame-loader">
+  <div class="greeting-content">
-    {{ svg('loader') }}
+    {{ svg('frog') }}
+    <p class="greeting-content__message">
+      It’s time to create the first page!
+    </p>
+    {% include 'components/button.twig' with {label: 'Add page', icon: 'plus', size: 'small', url: '/page/new'} %}
   </div>
-  <iframe class="landing-frame" src="{{ config.landingFrameSrc }}" seamless frameborder="0" onload="this.style.opacity = 1; setTimeout(document.getElementById('frame-loader').remove(), 500)"></iframe>
-
   {% if config.yandexMetrikaId is not empty %}
     <script type="text/javascript" >
       (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};

src/backend/views/pages/page.twig

@@ -3,19 +3,22 @@
 {% block body %}
   <article class="page" data-module="page">
     <header class="page__header">
-      <a href="/" class="page__header-nav">
+      <div class="page__header-nav">
-        Documentation
+        <a href="/" class="page__header-nav-item">
-      </a>
+          Documentation
-      {% if page._parent %}
-        <a class="page__header-nav"
-          {% if pageParent.uri %}
-            href="/{{ pageParent.uri }}"
-          {% else %}
-            href="/page/{{ pageParent._id }}"
-          {% endif %}>
-          {{ pageParent.title }}
         </a>
-      {% endif %}
+        {{ svg('arrow-right') }}
+        {% if page._parent %}
+          <a class="page__header-nav-item"
+            {% if pageParent.uri %}
+              href="/{{ pageParent.uri }}"
+            {% else %}
+              href="/page/{{ pageParent._id }}"
+            {% endif %}>
+            {{ pageParent.title }}
+          </a>
+        {% endif %}
+      </div>
       <time class="page__header-time">
         Last edit {{ (page.body.time / 1000)  | date("M d Y") }}
       </time>
@@ -34,7 +37,9 @@
         {# 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', 'image', 'code', 'list', 'delimiter', 'table', 'warning', 'checklist', 'linkTool', 'raw', 'embed'] %}
-            {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
+            <div class="page__content-block">
+              {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
+            </div>
           {% endif %}
         {% endif %}
       {%  endfor %}

src/bin/server.ts

@@ -91,6 +91,45 @@ function onListening(): void {
     : 'port ' + addr.port;
 
   debug('Listening on ' + bind);
+
+  drawBanner([
+    `CodeX Docs server is running`,
+    ``,
+    `Main page: http://localhost:${port}`
+  ]);
+}
+
+/**
+ * Draw banner in console with given text lines
+ * @param {string[]} lines
+ */
+function drawBanner(lines: string[]) {
+  /** Define banner parts */
+  const PARTS = {
+    TOP_LEFT: '┌',
+    TOP_RIGHT: '┐',
+    BOTTOM_LEFT: '└',
+    BOTTOM_RIGHT: '┘',
+    HORIZONTAL: '─',
+    VERTICAL: '│',
+    SPACE: ' ',
+  }
+
+  /** Calculate max line length */
+  const maxLength = lines.reduce((max, line) => Math.max(max, line.length), 0);
+
+  /** Prepare top line */
+  const top = PARTS.TOP_LEFT + PARTS.HORIZONTAL.repeat(maxLength + 2) + PARTS.TOP_RIGHT;
+
+  /** Compose middle lines */
+  const middle = lines.map(line => PARTS.VERTICAL + ' ' + line + PARTS.SPACE.repeat(maxLength - line.length) + ' ' + PARTS.VERTICAL);
+
+  /** Prepare bottom line */
+  const bottom = PARTS.BOTTOM_LEFT + PARTS.HORIZONTAL.repeat(maxLength + 2) + PARTS.BOTTOM_RIGHT;
+
+  console.log(top);
+  console.log(middle.join('\n'));
+  console.log(bottom);
 }
 
 export default {

src/frontend/js/modules/sidebar.js

@@ -36,7 +36,7 @@ export default class Sidebar {
       sidebarCollapsed: 'docs-sidebar--collapsed',
       sidebarAnimated: 'docs-sidebar--animated',
       sidebarContent: 'docs-sidebar__content',
-      sidebarContentHidden: 'docs-sidebar__content--hidden',
+      sidebarContentVisible: 'docs-sidebar__content--visible',
       sidebarContentInvisible: 'docs-sidebar__content--invisible',
       sidebarSearch: 'docs-sidebar__search',
     };
@@ -191,7 +191,7 @@ export default class Sidebar {
    * @returns {void}
    */
   toggleSidebar() {
-    this.nodes.sidebarContent.classList.toggle(Sidebar.CSS.sidebarContentHidden);
+    this.nodes.sidebarContent.classList.toggle(Sidebar.CSS.sidebarContentVisible);
   }
 
   /**

src/frontend/js/modules/writing.js

@@ -82,6 +82,11 @@ export default class Writing {
     this.nodes.parentIdSelector = moduleEl.querySelector('[name="parent"]');
     this.nodes.putAboveIdSelector = moduleEl.querySelector('[name="above"]');
     this.nodes.uriInput = moduleEl.querySelector('[name="uri-input"]');
+
+    /**
+     * Set minimum margin left for main column to prevent editor controls from overlapping sidebar
+     */
+    document.documentElement.style.setProperty('--main-col-min-margin-left', '50px');
   };
 
   /**

src/frontend/styles/components/error.pcss

@@ -0,0 +1,29 @@
+.error-page {
+  font-size: 15px;
+  text-align: center;
+  position: absolute;
+  top: 45%;
+  left: 50%;
+
+  @media (--mobile) {
+    position: relative;
+    top: 30vh;
+    left: 0;
+  }
+
+  @media (--tablet) {
+    position: relative;
+    top: 30vh;
+    left: 0;
+  }
+
+  h1 {
+    @media (--mobile) {
+      font-size: 20px;
+    }
+  }
+
+  p {
+    margin: 40px 0 20px;
+  }
+}

src/frontend/styles/components/greeting.pcss

@@ -0,0 +1,25 @@
+.greeting-body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.greeting-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+
+  & > svg {
+    width: 62px;
+    height: 71px;
+  }
+
+  &__message {
+    margin: 0;
+    padding: 26px 0 26px 0;
+    font-weight: 500;
+  }
+}

src/frontend/styles/components/header.pcss

@@ -10,15 +10,14 @@ html {
   border-bottom: 1px solid var(--color-line-gray);
   font-size: 18px;
   flex-wrap: wrap;
-  height: var(--layout-height-header);
   box-sizing: border-box;
   position: sticky;
   top: 0;
   background: white;
   z-index: 10;
 
-  @media (--mobile){
+  @media (--not-mobile){
-    line-height: 40px;
+    height: var(--layout-height-header);
   }
 
   &__menu-link,
@@ -36,11 +35,13 @@ html {
   }
 
   &__menu-link {
-    padding: 4px 10px;
     font-weight: 500;
     transition: background-color .13s;
 
-    @apply --squircle;
+    @media (--not-mobile) {
+      padding: 4px 10px;
+      @apply --squircle;
+    }
 
     &:hover {
       background-color: var(--color-link-hover);
@@ -55,8 +56,9 @@ html {
     font-size: 16px;
 
     @media (--mobile) {
+      margin-top: 6px;
       flex-basis: 100%;
-      font-size: 12px;
+      font-size: 14px;
     }
 
     li {
@@ -85,8 +87,8 @@ html {
         @media (--mobile) {
           display: block;
           position: absolute;
-          right: 15px;
+          right: 0;
-          top: 15px;
+          top: 13px;
           line-height: 1em;
         }
       }

src/frontend/styles/components/landing.pcss

@@ -1,30 +0,0 @@
-/**
- * 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/navigator.pcss

@@ -10,13 +10,13 @@
   flex-direction: column;
   justify-content: space-between;
   background-color: var(--color-link-hover);
-  border-radius: 10px;
   padding: 12px 16px 12px 16px;
   color: black;
   width: max-content;
-  font-weight: 500;
   font-size: 14px;
 
+  @apply --squircle;
+
   &--previous {
     align-items: flex-start;
     margin-left: 0;
@@ -29,13 +29,15 @@
 
   &-direction {
     text-transform: capitalize;
-    color: var(--color-direction-navigation);
+    color: var(--color-text-second);
     font-size: 12px;
-    font-weight: 400;
+    line-height: 140%;
+    margin-bottom: 2px;
   }
 
   &-label {
     width: 100%;
+    font-weight: 500;
   }
 }
 

src/frontend/styles/components/page.pcss

@@ -1,33 +1,38 @@
 .page {
-  font-size: 15px;
-  line-height: 1.6;
-  letter-spacing: 0.005em;
-
   &__header {
     display: flex;
     align-items: center;
+    margin-bottom: 20px;
+    font-size: 14px;
     color: var(--color-text-second);
+    line-height: 1.5em;
 
     @media (--mobile) {
       font-size: 13px;
     }
 
     &-nav {
-      color: inherit;
+      display: flex;
-      text-decoration: none;
+      align-items: center;
 
-      @media (--mobile) {
+      &-item {
-        display: none;
+        color: inherit;
+        text-decoration: none;
+
+        @media (--mobile) {
+          display: none;
+        }
+
+        &:hover {
+          color: var(--color-link-active);
+        }
       }
 
-      &:hover {
+      svg {
-        color: var(--color-link-active);
+        margin: 0 6px;
-      }
 
-      &:not(:last-of-type) {
+        @media (--mobile) {
-        &::after {
+          display: none;
-          content: '»';
-          margin: 0 0.7em 0 0.45em;
         }
       }
     }
@@ -47,11 +52,8 @@
   }
 
   &__title {
-    @apply --font-serif;
+    @apply --text-content-title;
-    font-size: 35px;
+    margin-bottom: 10px;
-    font-weight: 900;
-    letter-spacing: -0.04em;
-    margin-bottom: -0.1em;
   }
 
   .cdx-marker {
@@ -61,48 +63,20 @@
 
   .inline-code,
   .block-header a .inline-code {
-    display: inline-block;
+    @apply --text-inline-code;
-    background: rgba(251,241,241,0.78);
-    color: #C44545;
-    padding: 0.1em 0.5em;
-    border-radius: 2px;
-    margin: 0 2px;
-    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
-    font-size: 0.84em;
-    line-height: 1.4em;
-    border-bottom: 0;
-
-    &:hover {
-      background: rgba(251,241,241,0.78);
-    }
   }
 
   &__content {
+    @apply --text-content-main;
+
     a {
-      text-decoration: none;
+      @apply --text-inline-link;
-      border-bottom: 1px solid #000;
+    }
-      padding-bottom: 1px;
-      color: inherit;
 
-      &:hover {
+    &-block {
-        color: var(--color-link-active);
+      @apply --content-block;
-        border-bottom-color: var(--color-link-active);
-      }
-
-      .inline-code {
-        margin: 0;
-        padding: 0.15em .5em;
-        border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
-        color: #1f6fd8;
-        background-color: #daf1fe;
-
-        &:hover {
-          background-color: #c8edfe;
-        }
-      }
     }
   }
-
 }
 
 /**
@@ -110,6 +84,8 @@
  * ==================
  */
 .block-paragraph {
+  margin: 0;
+
   .inline-code {
     -webkit-font-smoothing: initial;
     -moz-osx-font-smoothing: initial;
@@ -121,21 +97,14 @@
  * ==================
  */
 .block-header {
-  @apply --font-serif;
+  @apply --text-header;
-  margin: 2.1em 0 0.5em;
 
   &--2 {
-    font-size: 22px;
+    @apply --text-header-2;
-    font-weight: 600;
   }
 
   &--3 {
-    font-size: 18px;
+    @apply --text-header-3;
-    font-weight: 600;
-  }
-
-  & + p {
-    margin-top: 0.5em;
   }
 
   a {
@@ -185,14 +154,8 @@
  * ==================
  */
 .block-code {
-  background: var(--color-bg-light);
+  @apply --text-code-block;
-  border: 1px solid #f1f1f4;
+  @apply --squircle;
-  border-radius: 5px;
-  font-family: var(--font-mono);
-  line-height: 1.7em;
-  font-size: 13px;
-  overflow-x: auto;
-  margin: 15px 0;
 
   &__content {
     display: inline-block !important;
@@ -200,7 +163,7 @@
     word-wrap: normal;
     background: transparent !important;
     padding: 15px !important;
-    color: #41314e !important;
+    color: var(--color-code-main) !important;
     min-width: 100%;
     box-sizing: border-box;
 
@@ -211,13 +174,31 @@
     }
   }
 
+  .hljs-params {
+    color: var(--color-code-params);
+  }
+
+  .hljs-number {
+    color: var(--color-code-number);
+  }
+
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_  {
+    color: var(--color-code-class);
+  }
+
+
   .hljs-name,
-  .hljs-section{
+  .hljs-section,
-    color: #359f3f;
+  .hljs-selector-tag {
+    color: var(--color-code-tag);
   }
 
   .hljs-tag {
-    color: #718c77;
+    color: var(--color-code-main);
   }
 
   .hljs-attr,
@@ -226,7 +207,13 @@
   .hljs-selector-id,
   .hljs-selector-pseudo,
   .hljs-title {
-    color: #904eb3;
+    color: var(--color-code-class);
+  }
+
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-operator {
+    color: var(--color-code-variable);
   }
 
   .hljs-emphasis,
@@ -235,8 +222,33 @@
   .hljs-strong,
   .hljs-template-variable,
   .hljs-variable {
-    color: #c21f04;
+    color: var(--color-code-string);
   }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type {
+    color: var(--color-code-keyword);
+  }
+
+  .hljs-variable.language_ {
+    color: var(--color-code-variable) ;
+  }
+
+  .hljs-code,
+  .hljs-comment,
+  .hljs-formula {
+    color: var(--color-code-comment);
+  }
+
+  .hljs-regexp {
+    color: var(--color-code-tag);
+  }
+
+
 }
 
 /**
@@ -244,10 +256,16 @@
  * ==================
  */
 .block-list {
-  margin: 20px 0;
+  margin: 0;
+  list-style: outside;
+  padding-left: 40px;
 
-  li {
+  &--ordered {
-    margin: 10px 0;
+    list-style-type: decimal
+  }
+
+  li:not(:last-of-type) {
+    margin-bottom: 8px;
   }
 }
 
@@ -256,8 +274,7 @@
  * ==================
  */
 .block-image {
- margin: 40px auto;
+ margin: 0 auto;
- text-align: center;
 
  &__content {
    img, video {
@@ -265,16 +282,6 @@
      max-width: 100%;
    }
 
-   &--stretched {
-     max-width: none !important;
-     width: calc(100% + 120px) !important;
-     margin-left: -60px;
-
-     img, video {
-       width: 100%;
-     }
-   }
-
    &--bordered {
      img, video {
        border: 3px solid var(--color-line-gray);
@@ -294,8 +301,9 @@
  }
 
  &__caption {
-   margin: 1em auto;
+    margin-top: 10px;
-   color: var(--color-text-second);
+    color: var(--color-text-second);
+    font-size: 0.9em;
  }
 }
 
@@ -323,7 +331,6 @@
  * ==================
  */
 .block-table {
-  margin: 20px 0;
   table-layout: fixed;
   width: 100%;
   border-radius: 3px;
@@ -331,11 +338,12 @@
   border: 1px solid var(--color-line-gray);
 
   td {
-    padding: 8px 10px;
+    padding: 6px 8px;
     border: 1px solid var(--color-line-gray);
   }
 }
 
+
 /**
  * Warning
  * ==================
@@ -343,10 +351,9 @@
 .block-warning {
   display: flex;
   padding: 20px;
-  margin: 30px 0;
+  background: #fffad0;
-  border-radius: 7px;
+
-  background: #fff9ef;
+  @apply --squircle;
-  color: #392e2f;
 
   &__icon {
     margin-right: 15px;

src/frontend/styles/components/sidebar.pcss

@@ -1,6 +1,15 @@
 .docs-sidebar {
   width: 100vw;
 
+  /* Bottom and Left coord of the "Hide Sidebar" toggler  */
+  --hide-sidebar-toggler-offset: 11px;
+  --hide-sidebar-toggler-size: 28px;
+
+  @media (--widest-desktop) {
+    --hide-sidebar-toggler-offset: var(--layout-padding-horizontal);
+    --hide-sidebar-toggler-size: 32px;
+  }
+
   &--animated {
     .docs-sidebar__content {
       transition: transform 200ms ease-in-out;
@@ -21,7 +30,7 @@
     }
 
     .docs-sidebar__slider {
-      transform: translateX(20px);
+      transform: translateX(var(--hide-sidebar-toggler-offset));
 
       svg {
         transform: rotate(180deg);
@@ -50,10 +59,15 @@
       padding-bottom: 0;
     }
 
-    &--hidden {
+    @media (--mobile) {
+      margin: 0 -8px;
       display: none;
     }
 
+    &--visible {
+      display: block;
+    }
+
     &--invisible {
       visibility: hidden;
     }
@@ -140,6 +154,11 @@
     font-size: 14px;
     line-height: 21px;
     height: 29px;
+
+    @media (--mobile){
+      font-size: 16px;
+      line-height: 21px;
+    }
   }
 
   &__section-title,
@@ -150,6 +169,7 @@
     padding: 0 8px;
     transition-property: background-color;
     transition-duration: 0.1s;
+
     @apply --squircle;
 
     &--selected {
@@ -241,8 +261,6 @@
   }
 
   &__toggler {
-    font-size: 13px;
-    cursor: pointer;
     color: var(--color-text-second);
     padding: 20px 15px;
     border-bottom: 1px solid var(--color-line-gray);
@@ -259,13 +277,15 @@
   &__slider {
     display: none;
     position: fixed;
-    transform: translateX(calc(var(--layout-sidebar-width) + 20px));
+    transform: translateX(calc(var(--layout-sidebar-width) + var(--hide-sidebar-toggler-offset)));
-    bottom: 20px;
+    bottom: var(--hide-sidebar-toggler-offset);
-    width: 32px;
+    width: var(--hide-sidebar-toggler-size);
-    height: 32px;
+    height: var(--hide-sidebar-toggler-size);
-    border-radius: 8px;
     cursor: pointer;
     background-color: var(--color-link-hover);
+    z-index: 10;
+
+    @apply --squircle;
 
     @media (--desktop) {
       display: flex;
@@ -282,6 +302,7 @@
     padding-bottom: 20px;
     padding-top: 60px;
     font-size: 14px;
+    color: var(--color-text-second);
 
     @media (--desktop) {
       display: block;

src/frontend/styles/components/table-of-content.pcss

@@ -1,12 +1,13 @@
 .table-of-content {
   border-left: 1px solid var(--color-line-gray);
-  padding-left: var(--layout-padding-horizontal);
+  max-height: 100%;
-
-  height: 100%;
   overflow: auto;
-  padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
+  padding: 0 var(--layout-padding-horizontal);
+  margin: var(--layout-padding-vertical) 0;
   box-sizing: border-box;
 
+  --padding-x: 8px;
+
   &__header {
     font-size: 16px;
     font-weight: 600;
@@ -14,7 +15,7 @@
     letter-spacing: -0.01em;
 
     margin-bottom: 12px;
-    padding: 0 6px;
+    padding: 0 var(--padding-x);
   }
 
   &__list {
@@ -27,7 +28,7 @@
 
     list-style: none;
 
-    gap: 6px;
+    gap: 2px;
 
     &-item {
       @apply --squircle;
@@ -47,7 +48,7 @@
       &--indent-4x { margin-left: 24px; }
 
       & > a {
-        padding: 4px 8px;
+        padding: 4px var(--padding-x);
         display: block;
         font-size: 14px;
         letter-spacing: -0.01em;

src/frontend/styles/components/writing.pcss

@@ -1,11 +1,8 @@
 .writing-header {
-  position: sticky;
+  padding: 0 0 15px 0;
-  top: 0;
+  margin-top: 0;
-  padding: 15px 0;
-  margin-top: calc(-1 * var(--layout-padding-vertical));
   background: #fff;
   box-shadow: 0 3px 10px #fff;
-  z-index: 2;
   font-size: 14px;
 
   &__save {
@@ -52,28 +49,68 @@
 }
 
 .writing-editor {
-  font-size: 15px;
+  @apply --text-content-main;
-  line-height: 1.6;
-  letter-spacing: 0.005em;
 
   .ce-code__textarea {
-    color: #41314e;
+    @apply --text-code-block;
-    line-height: 1.6em;
+
-    font-size: 12px;
+    border: 0;
-    background: var(--color-bg-light);
+    border-radius: 8px;
-    border: 1px solid #f1f1f4;
-    box-shadow: none;
   }
 
   .ce-paragraph a {
-    color: inherit;
+    @apply --text-inline-link;
   }
 
   .ce-header {
-    @apply --font-serif;
+    @apply --text-header;
+    padding: 0;
+  }
+
+  h2.ce-header {
+    @apply --text-header-2;
+  }
+
+  h3.ce-header {
+    @apply --text-header-3;
+  }
+
+  .cdx-block {
+    padding: 0;
+  }
+
+  .inline-code {
+    @apply  --text-inline-code;
+  }
+
+  .tc-table {
+    @apply --text-content-main;
+  }
+
+  .tc-cell {
+    padding: 6px 8px;
+  }
+
+  .cdx-list {
+    padding-left: 40px;
+  }
+
+  @media (--desktop) {
+    .ce-block__content,
+    .ce-toolbar__content {
+      max-width: var(--layout-width-main-col);
+    }
   }
 }
 
 .codex-editor__redactor .ce-block:first-of-type .ce-header {
-  font-size: 32px;
+  @apply --text-content-title;
+}
+
+.ce-block {
+  @apply --content-block;
+}
+
+.cdx-settings-button[data-tune="stretched"] {
+  display: none;
 }

src/frontend/styles/diff.pcss

@@ -2,27 +2,23 @@
   display: inline-block;
   width: 100%;
 
-  span {
-    color: inherit !important;
-  }
-
   &--added {
-    color: #277030;
+    color: #70b979;
-    background-color: #e2fce7;
+    background-color: #25f84d21;
 
     &::before {
       content: '+';
-      opacity: 0.4;
+      opacity: 0.8;
     }
   }
 
   &--removed {
-    color: rgb(174, 54, 60);
+    color: #f1acaf;
-    background-color: rgba(255, 230, 230, 1);
+    background-color: #95000069;
 
     &::before {
       content: '-';
-      opacity: 0.4;
+      opacity: 0.8;
     }
   }
 }

src/frontend/styles/layout.pcss

@@ -1,3 +1,11 @@
+:root {
+  /**
+   * Allows to dynamically set main column minimun margin left.
+   * Is used for adding extra space for editor controls in page edit mode (otherwise controls overlap sidebar)
+   */
+  --main-col-min-margin-left: 0px;
+}
+
 .docs {
   min-height: calc(100vh - var(--layout-height-header));
 
@@ -6,40 +14,42 @@
   }
 
   &__content {
+    --max-space-between-cols: 160px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
     flex-grow: 2;
     word-wrap: break-word;
 
-
     @media (--mobile) {
       width: 100%;
       flex-basis: 100%;
     }
 
+    @media (--desktop) {
+      max-width: min(
+        calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width)),
+        calc(100vw - var(--layout-sidebar-width))
+      );
+      margin-left: max(var(--main-col-min-margin-left), calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2) - var(--layout-padding-horizontal));
+      margin-right: auto;
+      padding: 0;
+    }
+
     &-inner {
       max-width: var(--layout-width-main-col);
       margin: 0 auto;
+      min-width: 0;
+      width: 100%;
 
       @media (--desktop) {
         margin-left: 0;
-        padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
+        padding: var(--layout-padding-vertical) var(--layout-padding-content-horizontal);
       }
     }
   }
 
-  &__content {
-    --max-space-between-cols: 160px;
-
-    display: flex;
-    justify-content: space-between;
-    max-width: calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width));
-    margin-left: max(0px, calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2));
-    margin-right: auto;
-
-    @media (--mobile) {
-      padding: 20px var(--layout-padding-horizontal);
-    }
-  }
-
   &__aside-right {
     width: var(--layout-sidebar-width);
     min-width: 160px;
@@ -55,6 +65,10 @@
     @media (--desktop) {
       display: block;
     }
+
+    &:empty {
+      display: none;
+    }
   }
 
   &-sidebar {

src/frontend/styles/main.pcss

@@ -6,8 +6,9 @@
 @import './components/header.pcss';
 @import './components/writing.pcss';
 @import './components/page.pcss';
-@import './components/landing.pcss';
+@import './components/greeting.pcss';
 @import './components/auth.pcss';
+@import './components/error.pcss';
 @import './components/button.pcss';
 @import './components/sidebar.pcss';
 @import './components/navigator.pcss';

src/frontend/styles/vars.pcss

@@ -1,7 +1,6 @@
 :root {
-  --color-text-main: #313649;
+  --color-text-main: #060C26;
-  --color-text-second: #5d6068;
+  --color-text-second: #717682;
-  --color-direction-navigation: #717682;
   --color-line-gray: #E8E8EB;
   --color-link-active: #2071cc;
   --color-link-hover: #F3F6F8;
@@ -10,6 +9,19 @@
   --color-input-primary: #F3F6F8;
   --color-input-border: #477CFF;
 
+
+  /* Code Block styles */
+  --color-code-bg: #252935;
+  --color-code-main: #E1EBFE;
+  --color-code-keyword: #ff6675;
+  --color-code-class: #bf9dff;
+  --color-code-variable: #69c6ff;
+  --color-code-string: #81bcff;
+  --color-code-params: #ffa259;
+  --color-code-tag: #74e59d;
+  --color-code-number: #ff6262;
+  --color-code-comment: #6c7f93;
+
   --color-button-primary: #3389FF;
   --color-button-primary-hover: #2E7AE6;
   --color-button-primary-active: #296DCC;
@@ -28,14 +40,16 @@
    */
   --layout-padding-horizontal: 22px;
   --layout-padding-vertical: 30px;
-  --layout-sidebar-width: 290px;
+  --layout-padding-content-horizontal: 50px;
-  --layout-width-main-col: 650px;
+  --layout-sidebar-width: 280px;
+  --layout-width-main-col: 700px;
   --layout-height-header: 56px;
 
   @media (--mobile) {
     --layout-padding-horizontal: 15px;
     --layout-padding-vertical: 15px;
     --layout-height-header: 88px;
+    --layout-padding-content-horizontal: var(--layout-padding-horizontal);
   }
 
   @media (--wide-desktop) {
@@ -44,11 +58,6 @@
 
   --font-mono: Menlo,Monaco,Consolas,Courier New,monospace;
 
-  --font-serif {
-    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans", Geneva, Arial, sans-serif;
-    letter-spacing: -0.03em;
-  }
-
   --button {
     display: inline-block;
     padding: 9px 15px;
@@ -131,6 +140,120 @@
       -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;
     }
   }
+
+  /**
+   * The common styles for the Page blocks as well as Editor blocks
+   */
+  --content-block {
+    padding: 10px 0;
+  }
+
+  /**
+   * Main page H1 title
+   */
+  --text-content-title {
+    font-size: 36px;
+    font-weight: 800;
+    margin: 0;
+  }
+
+  /**
+   * Page body font
+   */
+  --text-content-main {
+    font-size: 16px;
+    line-height: 150%;
+  }
+
+  /**
+   * Code on page and in the Editor
+   */
+  --text-code-block {
+    background: var(--color-code-bg);
+    color: var(--color-code-main);
+    font-family: var(--font-mono);
+    line-height: 1.5em;
+    font-size: 13px;
+    overflow-x: auto;
+  }
+
+  /**
+   * Common styles for text headings (H2, H3, H4)
+   */
+  --text-header {
+    margin: 18px 0 0;
+    line-height: 1.35em;
+  }
+
+  /**
+   * Styles for the H2 at the Page and Editor
+   */
+  --text-header-2 {
+    font-size: 24px;
+    font-weight: 700;
+  }
+
+  /**
+   * Styles for the H3 at the Page and Editor
+   */
+  --text-header-3 {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  /**
+   * Styles for the inline code element at the Page and Editor
+   */
+  --text-inline-code {
+    display: inline-block;
+    background: rgba(251,241,241,0.78);
+    color: #C44545;
+    font-size: 14px;
+    line-height: 1.4em;
+    letter-spacing: 0;
+
+    padding: 3px 4px 2px;
+    margin: -1px 2px 0;
+    font-family: var(--font-mono);
+    font-size: 0.84em;
+    border-bottom: 0;
+
+    &:hover {
+      background: rgba(251,241,241,0.78);
+    }
+  }
+
+  /**
+   * Styles for regular links inside a text
+   */
+  --text-inline-link {
+    text-decoration: none;
+    border-bottom: 1px solid #000;
+    padding-bottom: 1px;
+    color: inherit;
+
+    &:hover {
+      color: var(--color-link-active);
+      border-bottom-color: var(--color-link-active);
+    }
+
+    /**
+     * When a link contain an inline code, highlight it by its own way
+     */
+    .inline-code {
+      margin: 0;
+      padding: 2px 5px;
+      border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
+      color: #1f6fd8;
+      background-color: #daf1fe;
+      border-radius: 3px !important;
+
+      &:hover {
+        background-color: #c8edfe;
+      }
+    }
+  }
+
 }
 
 /**
@@ -140,5 +263,10 @@
 @custom-media --desktop all and (min-width: 1050px);
 @custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);
 @custom-media --mobile all and (max-width: 980px);
+@custom-media --not-mobile all and (min-width: 981px);
 @custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
 @custom-media --can-hover all and (hover:hover);
+/**
+ * Big screens that have additional space around the center column
+ */
+@custom-media --widest-desktop all and (min-width: 1470px);

src/frontend/svg/arrow-right.svg

@@ -0,0 +1 @@
+<svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.037 6.08a.833.833 0 0 0 0 1.175l2.95 2.992-2.95 2.95a.833.833 0 1 0 1.183 1.175l3.533-3.534a.832.832 0 0 0 0-1.183L9.22 6.08a.833.833 0 0 0-1.183 0Z" fill="#717682"/></svg>

webpack.config.js

@@ -87,5 +87,11 @@ export default () => {
     optimization: {
       splitChunks: false,
     },
+
+    /**
+     * Show less logs while building
+     * https://webpack.js.org/configuration/stats/
+     */
+    stats: 'minimal'
   };
 };