Merge branch 'feature/posts' into develop

.woodpecker.yml

@@ -77,7 +77,6 @@ pipeline:
       - sed -i "s#app_directory#$APP_DIRECTORY#g" .mage.yml
       - /root/.config/composer/vendor/bin/mage deploy "$CI_BUILD_DEPLOY_TARGET"
     when:
-      branch: [master, master-*, develop, develop-*]
       event: [deployment]
 
 services:

assets/css/app.scss

@@ -463,10 +463,14 @@ pre[class*="language-"] {
     cursor: pointer;
   }
 
-  a:not(.button), h1, h2, h3, h4, h5, p, ul {
+  a:not(.button), h1, h2, h3, h4, h5, p, ul:not(.btn-group) {
     color: $color-body-text;
   }
 
+  ul.btn-group a {
+    color: #fff;
+  }
+
   p a, ul a {
     border-bottom: 2px dotted $color-blue2;
   }
@@ -1253,7 +1257,7 @@ $links: (
 }
 
 .bg-box {
-  background: #fbfcff;
+  background: #f1f1f1;
 }
 
 .invalid-feedback {

assets/js/app/px-image.js

@@ -9,16 +9,22 @@ class PxImage {
         const images = doc.querySelectorAll('.quick-image img, .card figure img')
 
         for (let i = 0, len = images.length; i < len; i++) {
-            (function(image) {
+            ((image) => {
                 const source = image.getAttribute('data-src')
+                const sourceError = image.getAttribute('data-src-error')
+                const color = image.getAttribute('data-color')
                 const loader = new Image()
 
-                loader.onload = function() {
-                    image.style.backgroundImage = 'url(' + source + ')'
+                loader.onload = () => {
+                    image.style.background = `${color ? color : null} url(${source})`
                     image.style.backgroundSize = 'cover'
                     image.style.backgroundPosition = 'center'
                 }
 
+                loader.onerror = () => {
+                    image.style.background = `${color ? color : null} url('${sourceError}') center center`
+                }
+
                 loader.src = source
             })(images[i])
         }

src/Controller/Blog/PostController.php

@@ -95,7 +95,7 @@ class PostController extends PageController
     public function posts(int $page = 1): Response
     {
         $entities = $this->createQuery()
-            ->paginate($page, 5)
+            ->paginate($page, 9)
         ;
 
         return $this->defaultRender($this->siteRequest->getPage()->getTemplate(), [
@@ -111,7 +111,7 @@ class PostController extends PageController
         if ($query || $tag) {
             $entities = $this->createQuery()
                 ->search($query, $tag)
-                ->paginate($page, 5)
+                ->paginate($page, 9)
             ;
         }
 
@@ -126,7 +126,7 @@ class PostController extends PageController
     {
         $entities = $this->createQuery()
             ->inCategory($category, false)
-            ->paginate($page, 5)
+            ->paginate($page, 9)
         ;
 
         if (!$category->getIsActive() && !$this->getUser()) {

src/Twig/Extension/ColorExtension.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Twig\Extension;
+
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFunction;
+
+class ColorExtension extends AbstractExtension
+{
+    public function getFunctions(): array
+    {
+        return [
+            new TwigFunction('generate_color_by_string', [$this, 'generateColorByString']),
+        ];
+    }
+
+    public function generateColorByString(string $value)
+    {
+        srand(crc32($value));
+
+        $colors = [];
+
+        for ($i = 0; $i < 3; ++$i) {
+            $colors[] = mt_rand(20 * ($i + 1), 50 * ($i + 1));
+        }
+
+        $red = dechex($colors[0]);
+        $green = dechex($colors[1]);
+        $blue = dechex($colors[2]);
+
+        return sprintf(
+            '#%s%s%s',
+            strlen($red) != 2 ? '0'.$red : $red,
+            strlen($green) != 2 ? '0'.$green : $green,
+            strlen($blue) != 2 ? '0'.$blue : $blue,
+        );
+    }
+}

src/Twig/Extension/TypoExtension.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Twig\Extension;
+
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+use Twig\TwigFunction;
+
+class TypoExtension extends AbstractExtension
+{
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('nbsp', [$this, 'nbsp']),
+        ];
+    }
+
+    public function nbsp(string $value)
+    {
+        return preg_replace_callback(
+            '/(.+)(\.+|,+|;+|:+|!+|\?+)/isU',
+            function($d) {
+                return sprintf('%s&nbsp;%s', trim($d[1]), $d[2]);
+            },
+            $value
+        );
+    }
+}

templates/page/category/default.html.twig

@@ -19,13 +19,13 @@
 {% endblock %}
 
 {% block body %}
-    {% for post in pager %}
-        {% if not loop.first %}
-            <hr class="col-12">
-        {% endif %}
-
-        {{ include('page/post/_post.html.twig', {post: post}) }}
-    {% endfor %}
+    <div class="grid grid-flow-row-dens grid-cols-12 md:p-8 gap-5">
+        {% for post in pager %}
+            <div class="card shadow-md col-span-12 md:col-span-6 lg:col-span-4 m-3 bg-box">
+                {{ include('page/post/_post_card.html.twig') }}
+            </div>
+        {% endfor %}
+    </div>
 
     {% if pager.getPaginationData.pageCount > 1 %}
         <div class="col-12">

templates/page/post/_post.html.twig

@@ -76,26 +76,8 @@
         <div class="body">
             <div class="grid grid-flow-row-dens grid-cols-3 gap-5">
                 {% for item in similarPosts %}
-                    {% set url = safe_path('blog_menu_post', {post: item.id, slug: item.slug, _domain: _domain}) %}
-
                     <div class="card shadow-md col-span-3 md:col-span-1 bg-box">
-                        <div class="card">
-                            {%- if item.image -%}
-                                <figure>
-                                    <a href="{{ url }}">
-                                        {% set image = asset(item.image)|imagine_filter('post_preview_filter') %}
-                                        <img src="{{ asset('build/images/px.png') }}" data-src="{{ image }}" alt="{{ item.title }}">
-                                    </a>
-                                </figure>
-                            {%- endif -%}
-                            <div class="card-body">
-                                <h3 class="card-title">
-                                    <a href="{{- url -}}">
-                                        {{- item.title -}}
-                                    </a>
-                                </h3>
-                            </div>
-                        </div>
+                        {{ include('page/post/_post_card.html.twig', {post: item, summarySize: 100}) }}
                     </div>
                 {% endfor %}
             </div>

templates/page/post/_post_card.html.twig

@@ -0,0 +1,42 @@
+{% set url = safe_path('blog_menu_post', {post: post.id, slug: post.slug, _domain: _domain}) %}
+{% set color = generate_color_by_string(post.title) %}
+
+{%- set image -%}
+    {%- if post.image -%}
+        {{ asset(post.image)|imagine_filter('post_preview_filter') }}
+    {%- elseif post.quickImage -%}
+        {{ post.quickImage }}
+    {% else %}
+        {{ asset('build/images/post-image-logo.png') }}
+    {%- endif -%}
+{%- endset -%}
+
+<figure>
+    <a href="{{ url }}">
+        <img src="{{ asset('build/images/px.png') }}" data-color="{{ generate_color_by_string(post.id) }}" data-src="{{- image -}}" data-src-error="{{ asset('build/images/post-image-logo.png') }}" alt="{{ post.title }}">
+    </a>
+</figure>
+
+<div class="card-body">
+    <h3 class="card-title">
+        <a href="{{- url -}}">
+            {{- post.title|nbsp|raw -}}
+        </a>
+    </h3>
+
+    {% set content %}
+        {% if post.contentFormat == 'html' %}
+            {{- post.content|murph_url|file_attributes|post -}}
+        {% elseif post.contentFormat == 'markdown' %}
+            {{- post.content|murph_url|file_attributes|markdown('post')|lazy_load -}}
+        {% elseif post.contentFormat == 'editorjs' %}
+            {{- post.content|murph_url|file_attributes|editorjs_to_html|raw -}}
+        {% endif %}
+    {%- endset -%}
+
+    {% set summarySize = summarySize ?? 200 %}
+
+    {% set content = content|striptags[:summarySize] %}
+
+    <p>{{ content }}{% if content|length >= summarySize %}…{% endif %}</p>
+</div>

templates/page/posts/default.html.twig

@@ -1,13 +1,13 @@
 {% extends "page/titled/default.html.twig" %}
 
 {% block body %}
-    {% for post in pager %}
-        {% if not loop.first %}
-            <hr class="col-12">
-        {% endif %}
-
-        {{ include('page/post/_post.html.twig', {post: post}) }}
-    {% endfor %}
+    <div class="grid grid-flow-row-dens grid-cols-12 md:p-8 gap-5">
+        {% for post in pager %}
+            <div class="card shadow-md col-span-12 md:col-span-6 lg:col-span-4 m-3 bg-box">
+                {{ include('page/post/_post_card.html.twig') }}
+            </div>
+        {% endfor %}
+    </div>
 
     {% if pager.getPaginationData.pageCount > 1 %}
         <div class="col-12">

templates/page/search/default.html.twig

@@ -14,13 +14,13 @@
     </div>
 
     {% if pager %}
-        {% for post in pager %}
-            {% if not loop.first %}
-                <hr class="col-12">
-            {% endif %}
-
-            {{ include('page/post/_post.html.twig', {post: post}) }}
-        {% endfor %}
+        <div class="grid grid-flow-row-dens grid-cols-12 md:p-8 gap-5">
+            {% for post in pager %}
+                <div class="card shadow-md col-span-12 md:col-span-6 lg:col-span-4 m-3 bg-box">
+                    {{ include('page/post/_post_card.html.twig') }}
+                </div>
+            {% endfor %}
+        </div>
 
         {% if pager.getPaginationData.pageCount > 1 %}
             <div class="col-12">