Merge branch 'main' into copy-link

nodemon.json

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

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/styles/components/page.pcss

@@ -53,6 +53,7 @@
 
   &__title {
     @apply --text-content-title;
+    margin-bottom: 10px;
   }
 
   .cdx-marker {
@@ -333,7 +334,11 @@
 .block-list {
   margin: 0;
   list-style: outside;
-  padding-left: 26px;
+  padding-left: 40px;
+
+  &--ordered {
+    list-style-type: decimal
+  }
 
   li:not(:last-of-type) {
     margin-bottom: 8px;
@@ -345,8 +350,7 @@
  * ==================
  */
 .block-image {
- margin: 40px auto;
- text-align: center;
+ margin: 0 auto;
 
  &__content {
    img, video {
@@ -373,8 +377,9 @@
  }
 
  &__caption {
-   margin: 1em auto;
-   color: var(--color-text-second);
+    margin-top: 10px;
+    color: var(--color-text-second);
+    font-size: 0.9em;
  }
 }
 

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);
@@ -228,15 +237,16 @@
   &__slider {
     display: none;
     position: fixed;
-    transform: translateX(calc(var(--layout-sidebar-width) + 20px));
-    bottom: 20px;
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
+    transform: translateX(calc(var(--layout-sidebar-width) + var(--hide-sidebar-toggler-offset)));
+    bottom: var(--hide-sidebar-toggler-offset);
+    width: var(--hide-sidebar-toggler-size);
+    height: var(--hide-sidebar-toggler-size);
     cursor: pointer;
     background-color: var(--color-link-hover);
     z-index: 10;
 
+    @apply --squircle;
+
     @media (--desktop) {
       display: flex;
       justify-content: center;

src/frontend/styles/components/writing.pcss

@@ -91,6 +91,10 @@
     padding: 6px 8px;
   }
 
+  .cdx-list {
+    padding-left: 40px;
+  }
+
   @media (--desktop) {
     .ce-block__content,
     .ce-toolbar__content {

src/frontend/styles/layout.pcss

@@ -14,15 +14,29 @@
   }
 
   &__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;
@@ -31,29 +45,11 @@
 
       @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;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
-
-    @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;
-    }
-  }
-
   &__aside-right {
     width: var(--layout-sidebar-width);
     min-width: 160px;

src/frontend/styles/vars.pcss

@@ -43,7 +43,8 @@
    */
   --layout-padding-horizontal: 22px;
   --layout-padding-vertical: 30px;
-  --layout-sidebar-width: 290px;
+  --layout-padding-content-horizontal: 50px;
+  --layout-sidebar-width: 280px;
   --layout-width-main-col: 700px;
   --layout-height-header: 56px;
 
@@ -51,6 +52,7 @@
     --layout-padding-horizontal: 15px;
     --layout-padding-vertical: 15px;
     --layout-height-header: 88px;
+    --layout-padding-content-horizontal: var(--layout-padding-horizontal);
   }
 
   @media (--wide-desktop) {
@@ -267,3 +269,7 @@
 @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);

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'
   };
 };