Merge branch 'main' into feature/backend-search

package.json

@@ -18,6 +18,7 @@
     "editor-upgrade": "yarn add -D @editorjs/{editorjs,header,code,delimiter,list,link,image,table,inline-code,marker,warning,checklist,raw}@latest"
   },
   "dependencies": {
+    "@codexteam/shortcuts": "^1.2.0",
     "@hawk.so/javascript": "^3.0.1",
     "@hawk.so/nodejs": "^3.1.2",
     "config": "^3.3.6",
@@ -50,7 +51,7 @@
     "@editorjs/checklist": "^1.3.0",
     "@editorjs/code": "^2.7.0",
     "@editorjs/delimiter": "^1.2.0",
-    "@editorjs/editorjs": "^2.23.2",
+    "@editorjs/editorjs": "^2.25.0",
     "@editorjs/embed": "^2.5.1",
     "@editorjs/header": "^2.6.2",
     "@editorjs/image": "^2.6.2",

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/views/components/sidebar.twig

@@ -52,4 +52,8 @@
     </div>
 
   </aside>
+
+  <div class="docs-sidebar__slider">
+    {{ svg('arrow-left') }}
+  </div>
 </div>

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/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/frontend/js/modules/sidebar.js

@@ -1,10 +1,11 @@
 import { Storage } from '../utils/storage';
+import Shortcut from '@codexteam/shortcuts';
 
 /**
  * Local storage key
  */
 const LOCAL_STORAGE_KEY = 'docs_sidebar_state';
-
+const SIDEBAR_VISIBILITY_KEY = 'docs_sidebar_visibility';
 
 /**
  * Section list item height in px
@@ -31,8 +32,11 @@ export default class Sidebar {
       sectionList: 'docs-sidebar__section-list',
       sectionListItemActive: 'docs-sidebar__section-list-item--active',
       sidebarToggler: 'docs-sidebar__toggler',
+      sidebarSlider: 'docs-sidebar__slider',
+      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',
     };
   }
@@ -45,14 +49,24 @@ export default class Sidebar {
      * Stores refs to HTML elements needed for correct sidebar work
      */
     this.nodes = {
+      sidebar: null,
       sections: [],
       sidebarContent: null,
       toggler: null,
+      slider: null,
     };
     this.sidebarStorage = new Storage(LOCAL_STORAGE_KEY);
     const storedState = this.sidebarStorage.get();
 
     this.sectionsState = storedState ? JSON.parse(storedState) : {};
+
+    // Initialize localStorage that contains sidebar visibility
+    this.sidebarVisibilityStorage = new Storage(SIDEBAR_VISIBILITY_KEY);
+    // Get current sidebar visibility from storage
+    const storedVisibility = this.sidebarVisibilityStorage.get();
+
+    // Sidebar visibility
+    this.isVisible = storedVisibility !== 'false';
   }
 
   /**
@@ -62,11 +76,14 @@ export default class Sidebar {
    * @param {HTMLElement} moduleEl - module element
    */
   init(settings, moduleEl) {
+    this.nodes.sidebar = moduleEl;
     this.nodes.sections = Array.from(moduleEl.querySelectorAll('.' + Sidebar.CSS.section));
     this.nodes.sections.forEach(section => this.initSection(section));
     this.nodes.sidebarContent = moduleEl.querySelector('.' + Sidebar.CSS.sidebarContent);
     this.nodes.toggler = moduleEl.querySelector('.' + Sidebar.CSS.sidebarToggler);
     this.nodes.toggler.addEventListener('click', () => this.toggleSidebar());
+    this.nodes.slider = moduleEl.querySelector('.' + Sidebar.CSS.sidebarSlider);
+    this.nodes.slider.addEventListener('click', () => this.handleSliderClick());
     this.ready();
   }
 
@@ -104,7 +121,7 @@ export default class Sidebar {
 
     const itemsCount = sectionList.children.length;
 
-    sectionList.style.maxHeight = `${ itemsCount * ITEM_HEIGHT }px`;
+    sectionList.style.maxHeight = `${itemsCount * ITEM_HEIGHT}px`;
   }
 
   /**
@@ -165,7 +182,46 @@ export default class Sidebar {
    * @returns {void}
    */
   toggleSidebar() {
-    this.nodes.sidebarContent.classList.toggle(Sidebar.CSS.sidebarContentHidden);
+    this.nodes.sidebarContent.classList.toggle(Sidebar.CSS.sidebarContentVisible);
+  }
+
+  /**
+   * Initializes sidebar
+   *
+   * @returns {void}
+   */
+  initSidebar() {
+    if (!this.isVisible) {
+      this.nodes.sidebar.classList.add(Sidebar.CSS.sidebarCollapsed);
+    }
+
+    /**
+     * prevent sidebar animation on page load
+     * Since animated class contains transition, hiding will be animated with it
+     * To prevent awkward animation when visibility is set to false, we need to remove animated class
+     */
+    setTimeout(() => {
+      this.nodes.sidebar.classList.add(Sidebar.CSS.sidebarAnimated);
+    }, 200);
+
+    // add event listener to execute keyboard shortcut
+    // eslint-disable-next-line no-new
+    new Shortcut({
+      name: 'CMD+.',
+      on: document.body,
+      callback: () => this.handleSliderClick(),
+    });
+  }
+
+  /**
+   * Slides sidebar
+   *
+   * @returns {void}
+   */
+  handleSliderClick() {
+    this.isVisible = !this.isVisible;
+    this.sidebarVisibilityStorage.set(this.isVisible);
+    this.nodes.sidebar.classList.toggle(Sidebar.CSS.sidebarCollapsed);
   }
 
   /**
@@ -174,6 +230,7 @@ export default class Sidebar {
    * @returns {void}
    */
   ready() {
+    this.initSidebar();
     this.nodes.sidebarContent.classList.remove(Sidebar.CSS.sidebarContentInvisible);
   }
 }

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/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/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,7 @@
   }
 
   &__title {
-    @apply --font-serif;
+    @apply --text-content-title;
-    font-size: 35px;
-    font-weight: 900;
-    letter-spacing: -0.04em;
-    margin-bottom: -0.1em;
   }
 
   .cdx-marker {
@@ -61,48 +62,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 +83,8 @@
  * ==================
  */
 .block-paragraph {
+  margin: 0;
+
   .inline-code {
     -webkit-font-smoothing: initial;
     -moz-osx-font-smoothing: initial;
@@ -121,21 +96,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 +153,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 +162,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 +173,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 +206,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 +221,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 +255,12 @@
  * ==================
  */
 .block-list {
-  margin: 20px 0;
+  margin: 0;
+  list-style: outside;
+  padding-left: 26px;
 
-  li {
+  li:not(:last-of-type) {
-    margin: 10px 0;
+    margin-bottom: 8px;
   }
 }
 
@@ -323,7 +336,6 @@
  * ==================
  */
 .block-table {
-  margin: 20px 0;
   table-layout: fixed;
   width: 100%;
   border-radius: 3px;
@@ -331,11 +343,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 +356,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,34 @@
 .docs-sidebar {
   width: 100vw;
 
+  &--animated {
+    .docs-sidebar__content {
+      transition: transform 200ms ease-in-out;
+      will-change: transform;
+    }
+
+    .docs-sidebar__slider {
+      transition: transform 200ms ease-in-out;
+      will-change: transform;
+    }
+  }
+
+  &--collapsed {
+    @media (--desktop) {
+      .docs-sidebar__content {
+        transform: translateX(-100%);
+      }
+    }
+
+    .docs-sidebar__slider {
+      transform: translateX(20px);
+
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
   @media (--desktop) {
     width: var(--layout-sidebar-width);
   }
@@ -22,10 +50,15 @@
       padding-bottom: 0;
     }
 
-    &--hidden {
+    @media (--mobile) {
+      margin: 0 -8px;
       display: none;
     }
 
+    &--visible {
+      display: block;
+    }
+
     &--invisible {
       visibility: hidden;
     }
@@ -78,6 +111,11 @@
     font-size: 14px;
     line-height: 21px;
     height: 29px;
+
+    @media (--mobile){
+      font-size: 16px;
+      line-height: 21px;
+    }
   }
 
   &__section-title,
@@ -88,6 +126,7 @@
     padding: 0 8px;
     transition-property: background-color;
     transition-duration: 0.1s;
+
     @apply --squircle;
   }
 
@@ -173,8 +212,6 @@
 
 
   &__toggler {
-    font-size: 13px;
-    cursor: pointer;
     color: var(--color-text-second);
     padding: 20px 15px;
     border-bottom: 1px solid var(--color-line-gray);
@@ -188,6 +225,25 @@
     }
   }
 
+  &__slider {
+    display: none;
+    position: fixed;
+    transform: translateX(calc(var(--layout-sidebar-width) + 20px));
+    bottom: 20px;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    cursor: pointer;
+    background-color: var(--color-link-hover);
+    z-index: 10;
+
+    @media (--desktop) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   &__logo {
     display: none;
     margin-top: auto;
@@ -196,6 +252,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,6 +1,4 @@
 .writing-header {
-  position: sticky;
-  top: 0;
   padding: 15px 0;
   margin-top: calc(-1 * var(--layout-padding-vertical));
   background: #fff;
@@ -52,28 +50,63 @@
 }
 
 .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;
+  }
+
+  @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;
+}
+
+

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));
 
@@ -18,6 +26,8 @@
     &-inner {
       max-width: var(--layout-width-main-col);
       margin: 0 auto;
+      min-width: 0;
+      width: 100%;
 
       @media (--desktop) {
         margin-left: 0;
@@ -28,15 +38,19 @@
 
   &__content {
     --max-space-between-cols: 160px;
-
+    box-sizing: border-box;
     display: flex;
     justify-content: space-between;
-    max-width: calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width));
+    padding: 20px var(--layout-padding-horizontal);
-    margin-left: max(0px, calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2));
-    margin-right: auto;
 
-    @media (--mobile) {
+    @media (--desktop) {
-      padding: 20px var(--layout-padding-horizontal);
+      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;
     }
   }
 
@@ -55,6 +69,10 @@
     @media (--desktop) {
       display: block;
     }
+
+    &:empty {
+      display: none;
+    }
   }
 
   &-sidebar {

src/frontend/styles/main.pcss

@@ -8,6 +8,7 @@
 @import './components/page.pcss';
 @import './components/landing.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;
@@ -29,7 +41,7 @@
   --layout-padding-horizontal: 22px;
   --layout-padding-vertical: 30px;
   --layout-sidebar-width: 290px;
-  --layout-width-main-col: 650px;
+  --layout-width-main-col: 700px;
   --layout-height-header: 56px;
 
   @media (--mobile) {
@@ -44,11 +56,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 +138,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 +261,6 @@
 @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);

src/frontend/svg/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.95579 10.2458C6.14204 10.0584 6.24658 9.80498 6.24658 9.5408C6.24658 9.27661 6.14204 9.02316 5.95579 8.8358L2.41579 5.2458L5.95579 1.7058C6.14204 1.51844 6.24658 1.26498 6.24658 1.0008C6.24658 0.736612 6.14204 0.483161 5.95579 0.295798C5.86283 0.20207 5.75223 0.127675 5.63037 0.0769067C5.50851 0.026138 5.3778 0 5.24579 0C5.11378 0 4.98307 0.026138 4.86121 0.0769067C4.73935 0.127675 4.62875 0.20207 4.53579 0.295798L0.295789 4.5358C0.202061 4.62876 0.127667 4.73936 0.0768978 4.86122C0.0261292 4.98308 -9.32772e-06 5.11379 -9.32772e-06 5.2458C-9.32772e-06 5.37781 0.0261292 5.50852 0.0768978 5.63037C0.127667 5.75223 0.202061 5.86284 0.295789 5.9558L4.53579 10.2458C4.62875 10.3395 4.73935 10.4139 4.86121 10.4647C4.98307 10.5155 5.11378 10.5416 5.24579 10.5416C5.3778 10.5416 5.50851 10.5155 5.63037 10.4647C5.75223 10.4139 5.86283 10.3395 5.95579 10.2458Z" fill="#060C26"/>
+</svg>

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>