Beautiful urls (#18)

* Added uri property to Page model

* Added aliases collection

* Added routing form aliases

* Fixed redirect after page creation

* Added abiltity to support few pages with same title

* Added ability to change uri manually

* Changed hash function

* Changed uri parsing

* Removed pages controller promise

* Modified page's tests

* Added tests for alias model

* Added tests for aliases

* Escaping special characters

* Added missed files

* Fixed bugs related to translation

* Fixed parent page link

* Added server validation for uri

* Changed css properties order

* Made uri property of page be optional

* Prevented alias creation from empty uri

* Moved alias types to model

src/frontend/js/modules/writing.js

@@ -29,6 +29,7 @@ export default class Writing {
       saveButton: null,
       parentIdSelector: null,
       putAboveIdSelector: null,
+      uriInput: null
     };
   }
 
@@ -63,6 +64,7 @@ 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"]');
   };
 
   /**
@@ -86,6 +88,15 @@ export default class Writing {
     const editorData = await this.editor.save();
     const firstBlock = editorData.blocks.length ? editorData.blocks[0] : null;
     const title = firstBlock && firstBlock.type === 'header' ? firstBlock.data.text : null;
+    let uri = '';
+
+    if (this.nodes.uriInput && this.nodes.uriInput.value) {
+      if (this.nodes.uriInput.value.match(/^[a-z0-9'-]+$/i)) {
+        uri = this.nodes.uriInput.value;
+      } else {
+        throw new Error('Uri has unexpected characters');
+      }
+    }
 
     if (!title) {
       throw new Error('Entry should start with Header');
@@ -100,6 +111,7 @@ export default class Writing {
     return {
       parent: this.nodes.parentIdSelector.value,
       putAbovePageId: putAbovePageId,
+      uri: uri,
       body: editorData
     };
   }
@@ -124,7 +136,7 @@ export default class Writing {
         response = await response.json();
 
         if (response.success) {
-          document.location = '/page/' + response.result._id;
+          window.location.pathname = response.result.uri ? response.result.uri : '/page/' + response.result._id;
         } else {
           alert(response.error);
           console.log('Validation failed:', response.error);

src/frontend/styles/components/header.pcss

@@ -1,13 +1,13 @@
 .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);
+  border-bottom: 1px solid var(--color-line-gray);
+  font-size: 15.8px;
+  line-height: 50px;
 
   a {
-    text-decoration: none;
     display: inline-block;
+    text-decoration: none;
   }
 
   &__logo {

src/frontend/styles/components/page.pcss

@@ -66,8 +66,8 @@
  */
 .block-code {
   padding: 20px !important;
-  font-size: 13px;
   border-radius: 3px;
+  font-size: 13px;
   border: 1px solid var(--color-line-gray);
   font-family: Menlo,Monaco,Consolas,Courier New,monospace;
   line-height: 1.7em;

src/frontend/styles/components/writing.pcss

@@ -1,12 +1,12 @@
 .writing-header {
   display: flex;
-  padding: 15px 0;
-  margin-top: calc(-1 * var(--layout-padding-vertical));
   position: sticky;
   top: 0;
+  padding: 15px 0;
+  margin-top: calc(-1 * var(--layout-padding-vertical));
   background: #fff;
-  z-index: 2;
   box-shadow: 0 3px 10px #fff;
+  z-index: 2;
 
   &__save {
     @apply --button;
@@ -22,3 +22,13 @@
     }
   }
 }
+
+.uri-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 3px;
+  border: 1px solid rgba(201, 201, 204, 0.48);
+  box-shadow: inset 0 1px 2px 0 rgba(35, 44, 72, 0.06);
+  outline: none;
+}

src/frontend/styles/vars.pcss

@@ -3,6 +3,7 @@
   --color-text-second: #7B7E89;
   --color-line-gray: #E8E8EB;
   --color-link-active: #388AE5;
+  --color-gray-border: rgba(var(--color-line-gray), 0.48);
 
   /**
    * Site layout sizes
@@ -14,10 +15,10 @@
 
   --button {
     display: inline-block;
+    padding: 9px 15px;
+    border-radius: 3px;
     background:  var(--color-link-active);
     color: #fff;
-    border-radius: 3px;
-    padding: 9px 15px;
     font-size: 14px;
     line-height: 1em;
     text-decoration: none;