Add carbon banner on the page

.codexdocsrc.sample

@@ -10,5 +10,9 @@
   "landingFrameSrc": "https://codex.so/editor?frame=1",
   "startPage": "codex",
   "misprintsChatId": "12344564",
-  "yandexMetrikaId": ""
+  "yandexMetrikaId": "",
+  "carbon": {
+    "serve": "",
+    "placement": ""
+  }
 }

src/frontend/styles/carbon.pcss

@@ -0,0 +1,123 @@
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+}
+
+#carbonads {
+  display: flex;
+  max-width: 330px;
+  z-index: 100;
+  margin: 15px 0 20px;
+  overflow: hidden;
+
+  background-color: hsl(0, 0%, 98%);
+  border-radius: 6px;
+}
+
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: inherit;
+}
+
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+
+#carbonads .carbon-wrap {
+  display: flex;
+}
+
+#carbonads .carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+
+#carbonads .carbon-img img {
+  display: block;
+}
+
+#carbonads .carbon-text {
+  font-size: 13px;
+  padding: 10px;
+  margin-bottom: 16px;
+  line-height: 1.5;
+  text-align: left;
+}
+
+#carbonads .carbon-poweredby {
+  display: block;
+  padding: 6px 8px;
+  background: #f1f1f2;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 1;
+  border-top-left-radius: 3px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+@media (--mobile) {
+  #carbonads {
+    max-width: unset;
+  }
+
+  #carbonads span {
+    width: 100%;
+  }
+}
+
+@media (--tablet), (--desktop) {
+  #carbonads {
+    float: right;
+
+    padding: 10px 10px 10px 40px;
+    background: #fff;
+    border-radius: 0;
+    margin: 0;
+
+    max-width: 130px;
+  }
+
+  #carbonads .carbon-wrap {
+    flex-flow: column nowrap;
+  }
+
+  #carbonads .carbon-text {
+    line-height: initial;
+    padding: 10px 0;
+  }
+
+  #carbonads .carbon-poweredby {
+    left: 0;
+    right: unset;
+    padding: 6px 0;
+    background: none;
+
+    color: var(--color-text-second);
+  }
+}
+
+@media(--wide-desktop) {
+  #carbonads {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+  }
+}

src/frontend/styles/main.pcss

@@ -1,6 +1,7 @@
 @import 'normalize.css';
 @import './vars.pcss';
 @import './layout.pcss';
+@import './carbon.pcss';
 @import './components/header.pcss';
 @import './components/aside.pcss';
 @import './components/writing.pcss';

src/frontend/styles/vars.pcss

@@ -71,7 +71,8 @@
 /**
 * Custom media queries
 */
+@custom-media --wide-desktop all and (min-width: 1300px);
 @custom-media --desktop all and (min-width: 1050px);
-@custom-media --tablet all and (max-width: 1050px);
+@custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);
 @custom-media --mobile all and (max-width: 980px);
 @custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);

src/routes/aliases.js

@@ -30,6 +30,7 @@ router.get('*', verifyToken, async (req, res) => {
         res.render('pages/page', {
           page,
           pageParent,
+          config: req.app.locals.config,
         });
       }
     }

src/routes/pages.js

@@ -54,6 +54,7 @@ router.get('/page/:id', verifyToken, async (req, res, next) => {
     res.render('pages/page', {
       page,
       pageParent,
+      config: req.app.locals.config,
     });
   } catch (error) {
     res.status(404);

src/views/pages/page.twig

@@ -28,6 +28,9 @@
     <h1 class="page__title">
       {{ page.title }}
     </h1>
+    {% if (config.carbon and config.carbon.placement and config.carbon.serve) %}
+      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve={{ config.carbon.serve }}&placement={{ config.carbon.placement }}" id="_carbonads_js"></script>
+    {% endif %}
     <section class="page__content">
       {% for block in page.body.blocks %}
         {# Skip first header, because it is already showed as a Title #}