Some design updates (#70)

* Auth page styles improved

* styles updated

* upd bundles

src/frontend/js/classes/editor.js

@@ -32,7 +32,7 @@ export default class Editor {
       tools: {
         header: {
           class: Header,
-          inlineToolbar: ['link', 'marker', 'inlineCode'],
+          inlineToolbar: ['marker', 'inlineCode'],
           config: {
             placeholder: options.headerPlaceholder || ''
           }

src/frontend/js/modules/page.js

@@ -30,7 +30,7 @@ export default class Writing {
     const { default: CodeStyler } = await import(/* webpackChunkName: "code-styling" */ './../classes/codeStyler');
 
     return new CodeStyler({
-      selector: '.block-code'
+      selector: '.block-code__content'
     });
   };
 }

src/frontend/styles/components/aside.pcss

@@ -1,8 +1,16 @@
 .docs-aside {
-  font-size: 15px;
-  color: var(--color-text-second);
+  position: sticky;
+  top: var(--layout-padding-vertical);
+  font-size: 14px;
+  letter-spacing: 0.01em;
+  overflow-y: scroll;
+  max-height: 100vh;
+  //padding-right: 50px;
 
   @media (--mobile) {
+    position: static;
+    overflow: visible;
+    max-height: none;
     font-size: 13px;
     display: none;
     margin-top: 20px;
@@ -13,7 +21,12 @@
   }
 
   a {
+    color: inherit;
     text-decoration: none;
+
+    &:hover {
+      color: var(--color-link-active);
+    }
   }
 
   &__section {
@@ -28,8 +41,10 @@
     }
 
     &-title {
-      margin-bottom: 15px;
-      color: var(--color-link-active);
+      display: inline-block;
+      margin-bottom: 10px;
+      font-size: 1.18em;
+      font-weight: 600;
 
       @media (--mobile) {
         margin-bottom: 10px;
@@ -38,6 +53,7 @@
 
     &-list {
       padding-left: 0;
+      margin: 0;
       list-style: none;
 
       a {

src/frontend/styles/components/auth.pcss

@@ -0,0 +1,33 @@
+.auth-form {
+  font-size: 15px;
+  text-align: center;
+  margin-top: 30vh;
+
+  h1 {
+    @media (--mobile){
+      font-size: 20px;
+    }
+  }
+
+  p {
+    margin: 40px 0 20px;
+  }
+
+  input[type="password"] {
+    padding: 9px;
+    font-size: 15px;
+    outline: none;
+    border-radius: 3px;
+    -webkit-appearance: none;
+    border: 1px solid var(--color-line-gray);
+  }
+
+  input[type="submit"]{
+    @apply --button;
+    @apply --button-primary;
+    font-size: 15px;
+    padding: 10px 20px;
+    line-height: inherit;
+    vertical-align: top;
+  }
+}

src/frontend/styles/components/page.pcss

@@ -1,6 +1,7 @@
 .page {
-  font-size: 16px;
+  font-size: 15px;
   line-height: 1.6;
+  letter-spacing: 0.005em;
 
   &__header {
     display: flex;
@@ -48,10 +49,11 @@
   }
 
   &__title {
-    font-size: 26px;
-    font-weight: 700;
-    letter-spacing: -0.04px;
-    margin-bottom: -0.2em;
+    @apply --font-serif;
+    font-size: 35px;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+    margin-bottom: -0.1em;
   }
 
   .cdx-marker {
@@ -59,6 +61,18 @@
     padding: 3px 0;
   }
 
+  .inline-code {
+    display: inline-block;
+    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;
+  }
+
   &__content {
     a {
       text-decoration: none;
@@ -75,21 +89,74 @@
 
 }
 
+/**
+ * Paragraph
+ * ==================
+ */
+.block-paragraph {
+  .inline-code {
+    -webkit-font-smoothing: initial;
+    -moz-osx-font-smoothing: initial;
+  }
+}
+
 /**
  * Header
  * ==================
  */
 .block-header {
-  margin: 1.5em 0 0.5em;
+  @apply --font-serif;
+  margin: 2.1em 0 0.5em;
 
   &--2 {
     font-size: 22px;
-    font-weight: 500;
+    font-weight: 600;
   }
 
   &--3 {
     font-size: 18px;
-    font-weight: 500;
+    font-weight: 600;
+  }
+
+  & + p {
+    margin-top: 0.5em;
+  }
+
+  a {
+    text-decoration: none !important;
+    border: 0;
+    color: inherit !important;
+  }
+
+  &--anchor {
+    cursor: pointer;
+
+    &::before {
+      position: absolute;
+      content: '';
+      margin-left: -30px;
+      width: 14px;
+      height: 19px;
+      margin-top: 0.35em;
+      background-image: url("data:image/svg+xml,%3Csvg width='14' height='19' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237B7E89' fill-rule='nonzero'%3E%3Cpath d='M8.58 11.997L2.283 5.701a1.762 1.762 0 0 1 0-2.49l.933-.935a1.762 1.762 0 0 1 2.49 0l6.298 6.297a3.508 3.508 0 0 0-.901-3.39L6.952 1.031a3.522 3.522 0 0 0-4.982 0l-.933.933a3.522 3.522 0 0 0 0 4.982l4.151 4.151c.92.92 2.218 1.208 3.392.9z'/%3E%3Cpath d='M12.958 11.628l-4.151-4.15a3.507 3.507 0 0 0-3.391-.899l6.296 6.296a1.76 1.76 0 0 1 0 2.49l-.933.936a1.764 1.764 0 0 1-2.49 0l-6.296-6.298a3.507 3.507 0 0 0 .899 3.39l4.151 4.15a3.522 3.522 0 0 0 4.982 0l.933-.935a3.52 3.52 0 0 0 0-4.98z'/%3E%3C/g%3E%3C/svg%3E");
+      opacity: 0;
+      transform: translateX(5px);
+      will-change: opacity, transform;
+      transition: all 100ms ease;
+
+      @media (--mobile){
+        display: none !important;
+      }
+    }
+
+    &:hover {
+      color: #4c4c58;
+    }
+
+    &:hover::before{
+      opacity: 1;
+      transform: none;
+    }
   }
 }
 
@@ -98,12 +165,48 @@
  * ==================
  */
 .block-code {
-  padding: 20px !important;
+  background: var(--color-bg-light);
+  border: 1px solid #f1f1f4;
   border-radius: 5px;
-  font-size: 13px;
-  //border: 1px solid var(--color-line-gray);
-  font-family: Menlo,Monaco,Consolas,Courier New,monospace;
+  font-family: var(--font-mono);
   line-height: 1.7em;
+  font-size: 13px;
+
+  &__content {
+    white-space: pre;
+    word-wrap: normal;
+    overflow-x: auto;
+    background: transparent !important;
+    padding: 15px !important;
+    color: #41314e !important;
+  }
+
+  .hljs-name,
+  .hljs-section{
+    color: #359f3f;
+  }
+
+  .hljs-tag {
+    color: #718c77;
+  }
+
+  .hljs-attr,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id,
+  .hljs-selector-pseudo,
+  .hljs-title {
+    color: #904eb3;
+  }
+
+  .hljs-emphasis,
+  .hljs-quote,
+  .hljs-string,
+  .hljs-strong,
+  .hljs-template-variable,
+  .hljs-variable {
+    color: #c21f04;
+  }
 }
 
 /**
@@ -111,6 +214,8 @@
  * ==================
  */
 .block-list {
+  margin: 20px 0;
+
   li {
     margin: 10px 0;
   }
@@ -149,7 +254,7 @@
 
    &--with-background {
      padding: 15px;
-     background: var(--color-line-gray);
+     background: var(--color-bg-light);
 
      img, video {
        max-width: 60%;

src/frontend/styles/components/writing.pcss

@@ -25,7 +25,8 @@
   }
 
   select {
-    max-width: 100px
+    max-width: 100px;
+    vertical-align: bottom;
   }
 }
 
@@ -47,9 +48,30 @@
 }
 
 .writing-editor {
+  font-size: 15px;
+  line-height: 1.6;
+  letter-spacing: 0.005em;
+
   @media (--desktop) {
     margin: 0 -100px;
   }
+
+  .ce-code__textarea {
+    color: #41314e;
+    line-height: 1.6em;
+    font-size: 12px;
+    background: var(--color-bg-light);
+    border: 1px solid #f1f1f4;
+    box-shadow: none;
+  }
+
+  .ce-paragraph a {
+    color: inherit;
+  }
+
+  .ce-header {
+    @apply --font-serif;
+  }
 }
 
 .codex-editor__redactor .ce-block:first-of-type .ce-header {

src/frontend/styles/main.pcss

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

src/frontend/styles/vars.pcss

@@ -1,16 +1,17 @@
 :root {
-  --color-text-main: #1D202B;
-  --color-text-second: #7B7E89;
+  --color-text-main: #313649;
+  --color-text-second: #5d6068;
   --color-line-gray: #E8E8EB;
-  --color-link-active: #388AE5;
-  --color-button-danger: #ff1629;
+  --color-link-active: #2071cc;
+  --color-button-danger: #ff5159;
+  --color-bg-light: #f8f7fa;
 
   /**
    * Site layout sizes
    */
-  --layout-padding-horisontal: 40px;
-  --layout-padding-vertical: 40px;
-  --layout-width-aside: 200px;
+  --layout-padding-horisontal: 30px;
+  --layout-padding-vertical: 30px;
+  --layout-width-aside: 300px;
   --layout-width-main-col: 650px;
 
   @media (--mobile) {
@@ -18,6 +19,13 @@
     --layout-padding-vertical: 15px;
   }
 
+  --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;
@@ -30,6 +38,8 @@
     text-decoration: none;
     cursor: pointer;
     white-space: nowrap;
+    -webkit-appearance: none;
+    border: 0;
 
     svg {
       margin: 0 0.3em 0 -0.05em;

src/models/page.js

@@ -1,5 +1,5 @@
+const urlify = require('../utils/urlify');
 const { pages: pagesDb } = require('../utils/database/index');
-const translateString = require('../utils/translation');
 
 /**
  * @typedef {Object} PageData
@@ -116,14 +116,7 @@ class Page {
    * @return {string}
    */
   transformTitleToUri() {
-    return translateString(this.title
-      .replace(/ /g, ' ')
-      .replace(/[^a-zA-Z0-9А-Яа-яЁё ]/g, ' ')
-      .replace(/  +/g, ' ')
-      .trim()
-      .toLowerCase()
-      .split(' ')
-      .join('-'));
+    return urlify(this.title);
   }
 
   /**

src/routes/auth.js

@@ -16,7 +16,6 @@ const parseForm = express.urlencoded({ extended: false });
 router.get('/auth', csrfProtection, function (req, res) {
   res.render('auth', {
     title: 'Login page',
-    header: 'Enter password',
     csrfToken: req.csrfToken()
   });
 });

src/routes/middlewares/token.js

@@ -16,6 +16,7 @@ module.exports = async function verifyToken(req, res, next) {
   if (!userDoc) {
     res.locals.isAuthorized = false;
     next();
+    return;
   }
 
   jwt.verify(token, userDoc.passHash + config.secret, (err, decodedToken) => {

src/utils/twig.js

@@ -3,6 +3,7 @@
  */
 const twig = require('twig');
 const fs = require('fs');
+const urlify = require('./urlify');
 
 module.exports = (function () {
   'use strict';
@@ -17,4 +18,15 @@ module.exports = (function () {
   twig.extendFunction('svg', function (filename) {
     return fs.readFileSync(`${__dirname}/../frontend/svg/${filename}.svg`, 'utf-8');
   });
+
+  /**
+   * Convert text to URL-like string
+   * Example: "What is <mark>clean data</mark>" -> "what-is-clean-data"
+   *
+   * @param {string} string - source string with HTML
+   * @returns {string} alias-like string
+   */
+  twig.extendFilter('urlify', function (string) {
+    return urlify(string);
+  });
 }());

src/utils/urlify.js

@@ -0,0 +1,33 @@
+const translateString = require('./translation');
+
+/**
+ * Convert text to URL-like string
+ * Example: "What is <mark>clean data</mark>" -> "what-is-clean-data"
+ *
+ * @param {string} string - source string with HTML
+ * @returns {string} alias-like string
+ */
+module.exports = function urlify(string) {
+  // strip tags
+  string = string.replace(/(<([^>]+)>)/ig, '');
+
+  // remove nbsp
+  string = string.replace(/&nbsp;/g, ' ');
+
+  // remove all symbols except chars
+  string = string.replace(/[^a-zA-Z0-9А-Яа-яЁё ]/g, ' ');
+
+  // remove whitespaces
+  string = string.replace(/  +/g, ' ').trim();
+
+  // lowercase
+  string = string.toLowerCase();
+
+  // join words with hyphens
+  string = string.split(' ').join('-');
+
+  // translate
+  string = translateString(string);
+
+  return string;
+};

src/views/auth.twig

@@ -1,11 +1,16 @@
 {% extends 'layout.twig' %}
 
 {% block body %}
-  <h1>{{header}}</h1>
-  <form method="post" action="/auth">
+  <form class="auth-form" method="post" action="/auth">
+    <h1>
+      ┬┴┬┴┤ ͜ʖ ͡°) ├┬┴┬┴
+    </h1>
+    <p>
+      Enter a password to access pages editing
+    </p>
     <input type="hidden" name="_csrf" value={{csrfToken}}>
     <input type="password" name="password" placeholder="Password">
-    <input type="submit" value="login">
+    <input type="submit" value="Login">
   </form>
 {% endblock %}
 

src/views/pages/blocks/code.twig

@@ -1,2 +1,4 @@
-<pre class="block-code">{{ code|escape }}</pre>
+<div class="block-code">
+  <div class="block-code__content">{{ code|escape }}</div>
+</div>
 

src/views/pages/blocks/header.twig

@@ -1,3 +1,7 @@
-<h{{ level }} class="block-header block-header--{{ level }}">
-  {{ text }}
+<a name="{{ text | urlify  }}" style="display: inline-block; position: absolute; margin-top: -20px;"></a>
+<h{{ level }} class="block-header block-header--{{ level }} block-header--anchor">
+  <a href="#{{ text | urlify  }}">
+    {{ text }}
+  </a>
 </h{{ level }}>
+

src/views/pages/form.twig

@@ -25,8 +25,12 @@
             {% for _page in pagesAvailable %}
               {% if _page._id != currentPageId %}
                 <option value="{{ _page._id }}" {{ page is not empty and page._parent == _page._id ? 'selected' : ''}}>
-                {{ _page.title }}
-              </option>
+                  {% if _page._parent != "0" %}
+                    &nbsp;
+                    &nbsp;
+                  {% endif %}
+                  {{ _page.title }}
+                </option>
               {% endif %}
             {% endfor %}
           </select>