View for image block

package.json

@@ -7,7 +7,7 @@
     "start:dev": "cross-env NODE_ENV=development nodemon ./bin/www",
     "test": "cross-env NODE_ENV=testing mocha --recursive ./test",
     "lint": "eslint --fix --cache ./src/**/*.js",
-    "build": "webpack ./src/frontend/js/app.js --o='./public/dist/[name].bundle.js' --output-library=Docs --output-public-path=/dist/ -p --watch",
+    "build": "webpack ./src/frontend/js/app.js -o ./public/dist/[name].bundle.js --output-library=Docs --output-public-path=/dist/ -p --watch",
     "precommit": "yarn lint && yarn test --exit"
   },
   "dependencies": {

public/dist/code-styling.css

@@ -1 +1 @@
-.hljs{display:block;overflow-x:auto;padding:.5em;color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
+.hljs{display:block;background:#fff;padding:.5em;color:#333;overflow-x:auto}.hljs-comment,.hljs-meta{color:#969896}.hljs-emphasis,.hljs-quote,.hljs-string,.hljs-strong,.hljs-template-variable,.hljs-variable{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-attribute,.hljs-bullet,.hljs-literal,.hljs-symbol{color:#0086b3}.hljs-name,.hljs-section{color:#63a35c}.hljs-tag{color:#333}.hljs-attr,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-title{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}

src/frontend/styles/components/page.pcss

@@ -117,3 +117,50 @@
   }
 }
 
+/**
+ * Image
+ * ==================
+ */
+.block-image {
+ margin: 40px auto;
+ text-align: center;
+
+ &__content {
+   img {
+     vertical-align: bottom;
+     max-width: 100%;
+   }
+
+   &--stretched {
+     max-width: none !important;
+     width: calc(100% + 120px) !important;
+     margin-left: -60px;
+
+     img {
+       width: 100%;
+     }
+   }
+
+   &--bordered {
+     img {
+       border: 3px solid #e8e8eb;
+       box-sizing: border-box;
+     }
+   }
+
+   &--with-background {
+     padding: 15px;
+     background: #eff2f5;
+
+     img {
+       max-width: 60%;
+       margin: 0 auto;
+     }
+   }
+ }
+
+ &__caption {
+   margin: 1em auto;
+   color: var(--color-text-second);
+ }
+}

src/views/pages/blocks/image.twig

@@ -0,0 +1,24 @@
+{% set classes = ['block-image__content'] %}
+
+{% if withBorder %}
+  {% set classes = classes|merge(['block-image__content--bordered']) %}
+{% endif %}
+
+{% if stretched %}
+  {% set classes = classes|merge(['block-image__content--stretched']) %}
+{% endif %}
+
+{% if withBackground %}
+  {% set classes = classes|merge(['block-image__content--with-background']) %}
+{% endif %}
+
+<figure class="block-image">
+  <div class="{{classes.join(' ')}}">
+    <img src="{{file.url}}" alt="{{caption ? caption : ''}}">
+  </div>
+  {% if caption %}
+      <footer class="block-image__caption">
+          {{caption}}
+      </footer>
+  {% endif %}
+</figure>

src/views/pages/page.twig

@@ -30,7 +30,7 @@
       {% for block in page.body.blocks %}
         {# 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', 'list', 'code'] %}
+          {% if block.type in ['paragraph', 'header', 'list', 'code', 'image'] %}
             {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
           {% endif %}
         {% endif %}