Update post

apps/front/templates/partials/blog/all_articles.html

@@ -0,0 +1,34 @@
+<div id="articles">
+    {% for post in posts %}
+    <article>
+        <h2>{{ post.title }}</h2>
+        <p>Author: {{ post.author }}</p>
+        <p><button data-id="{{ post.id }}" class="btn">More</button></p>
+        <hr>
+    </article>
+    {% endfor %}
+</div>
+<ul class="pagination">
+      <li class="page-item disabled">
+            <a href="#" tabindex="-1">Previous</a>
+      </li>
+      <li class="page-item">
+            <a href="#">Next</a>
+      </li>
+</ul>
+
+<script>
+    const buttons = document.querySelectorAll('.btn');
+
+    buttons.forEach((button) => {
+        button.addEventListener('click', event => {
+            document.$CHAT_SOCKET.send(JSON.stringify({
+                selector: "#main",
+                template: "partials/blog/single.html",
+                data: {
+                    id: event.target.dataset.id
+                }
+            }))
+        });
+    });
+</script>

apps/front/templates/partials/blog/single.html

@@ -0,0 +1,5 @@
+<article>
+    <h1>{{ post.title }}</h1>
+    <h2>{{ post.author }}</h2>
+    <div>{{ post.content }}</div>
+</article>

apps/front/templates/partials/website/about.html

@@ -0,0 +1,5 @@
+<h2>About page</h2>
+<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam molestias ex vitae officiis, autem repellendus, ea doloribus voluptates. Odit accusamus alias soluta animi cumque, aspernatur, beatae repudiandae non laudantium sunt?</p>
+<p>Necessitatibus at hic ducimus quam numquam aspernatur fugit quia molestiae. Ipsum quibusdam quae placeat nemo? Eaque, vel repellendus ea tenetur non veniam dicta? Itaque ipsum tempora inventore, assumenda dignissimos ratione.</p>
+<p>Dicta voluptatem repudiandae exercitationem possimus iure, cumque, minus, odit accusamus, fugiat nulla ratione nobis ad harum. Recusandae obcaecati eligendi, amet officiis iusto porro saepe quaerat, cum labore molestiae? Praesentium, omnis!</p>
+<p>Voluptate nostrum qui porro est magni excepturi maxime, modi nobis nesciunt quaerat soluta error alias quis voluptatibus iusto hic minus ipsam. Repudiandae quisquam quaerat illo eos quo error, ipsa nemo.</p>