Add Project-Pro Blog module with initial SQL setup, CSS styles, and template files

- Created SQL installation scripts for categories and posts tables. - Added uninstall scripts to drop the created tables. - Introduced CSS styles for blog layout, including responsive design for posts and categories. - Implemented PHP redirection in index files to prevent direct access. - Developed Smarty templates for blog category tree, post list, and individual post details. - Ensured proper caching headers in PHP files to enhance performance.
2026-03-03 15:24:51 +01:00
parent 8d14e5d95c
commit 5f93428041
35 changed files with 3128 additions and 2 deletions
--- a/modules/projectproblog/views/css/blog.css
+++ b/modules/projectproblog/views/css/blog.css
@@ -0,0 +1,532 @@
+/* =========================================================
+   Project-Pro Blog — style frontu
+   ========================================================= */
+
+:root {
+    --blog-accent:     #3a6fd8;
+    --blog-accent-dk:  #2a55b0;
+    --blog-accent-lt:  #e8eef9;
+    --blog-text:       #2c2c2c;
+    --blog-muted:      #777;
+    --blog-border:     #e2e6ea;
+    --blog-bg:         #f7f8fc;
+    --blog-white:      #ffffff;
+    --blog-radius:     8px;
+    --blog-shadow:     0 2px 10px rgba(0,0,0,.07);
+    --blog-shadow-hov: 0 6px 24px rgba(0,0,0,.13);
+}
+
+/* ---- Ogólny layout ---------------------------------------- */
+#blog-wrap {
+    margin-top: 2rem;
+    margin-bottom: 3rem;
+}
+
+/* ---- Sidebar ----------------------------------------------- */
+#blog-sidebar {
+    margin-bottom: 2rem;
+}
+
+@media (min-width: 768px) {
+    #blog-sidebar {
+        position: sticky;
+        top: 1.5rem;
+    }
+}
+
+.blog-cats-widget {
+    background: var(--blog-white);
+    border: 1px solid var(--blog-border);
+    border-radius: var(--blog-radius);
+    padding: 1.25rem 1.5rem;
+    box-shadow: var(--blog-shadow);
+}
+
+.blog-cats-widget h4 {
+    font-size: .78rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    color: var(--blog-muted);
+    margin: 0 0 .9rem;
+    padding-bottom: .65rem;
+    border-bottom: 2px solid var(--blog-border);
+}
+
+.blog-cat-link {
+    display: block;
+    margin-bottom: .6rem;
+    font-size: .88rem;
+    font-weight: 600;
+    color: var(--blog-accent);
+    text-decoration: none;
+    padding: .3rem .5rem;
+    border-radius: 5px;
+    transition: background .15s;
+}
+
+.blog-cat-link:hover,
+.blog-cat-link.active {
+    background: var(--blog-accent-lt);
+    color: var(--blog-accent-dk);
+    text-decoration: none;
+}
+
+/* Drzewo kategorii */
+.blog-cat-tree,
+.blog-cat-tree ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.blog-cat-tree ul {
+    padding-left: .9rem;
+    margin-top: .15rem;
+    border-left: 2px solid var(--blog-border);
+    display: none;
+}
+
+.blog-cat-tree ul.open {
+    display: block;
+}
+
+.blog-cat-tree li {
+    margin: .1rem 0;
+}
+
+.blog-cat-tree a {
+    display: block;
+    color: var(--blog-text);
+    text-decoration: none;
+    font-size: .87rem;
+    padding: .3rem .45rem;
+    border-radius: 5px;
+    transition: background .15s, color .15s;
+}
+
+.blog-cat-tree a:hover,
+.blog-cat-tree a.active {
+    background: var(--blog-accent-lt);
+    color: var(--blog-accent);
+    text-decoration: none;
+}
+
+.blog-cat-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    width: 1.2rem;
+    height: 1.2rem;
+    color: var(--blog-muted);
+    font-size: .7rem;
+    vertical-align: middle;
+    user-select: none;
+    transition: color .15s;
+    flex-shrink: 0;
+}
+
+.blog-cat-toggle:hover {
+    color: var(--blog-accent);
+}
+
+/* ---- Nagłówek listy --------------------------------------- */
+.blog-list-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: var(--blog-text);
+    margin: 0 0 1.5rem;
+    padding-bottom: .6rem;
+    border-bottom: 3px solid var(--blog-accent);
+    display: inline-block;
+}
+
+/* ---- Siatka kart ------------------------------------------ */
+.blog-grid {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -.75rem;
+}
+
+.blog-grid-item {
+    width: 50%;
+    padding: 0 .75rem;
+    margin-bottom: 1.75rem;
+    display: flex;
+}
+
+@media (max-width: 575px) {
+    .blog-grid-item {
+        width: 100%;
+    }
+}
+
+/* Karta wpisu */
+.blog-card {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--blog-border);
+    border-radius: var(--blog-radius);
+    overflow: hidden;
+    background: var(--blog-white);
+    width: 100%;
+    transition: box-shadow .25s, transform .25s;
+}
+
+.blog-card:hover {
+    box-shadow: var(--blog-shadow-hov);
+    transform: translateY(-3px);
+}
+
+.blog-card__thumb {
+    display: block;
+    overflow: hidden;
+    aspect-ratio: 16/9;
+    background: var(--blog-bg);
+}
+
+.blog-card__thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform .4s ease;
+}
+
+.blog-card:hover .blog-card__thumb img {
+    transform: scale(1.06);
+}
+
+.blog-card__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 1.1rem 1.2rem;
+}
+
+.blog-card__title {
+    font-size: .97rem;
+    font-weight: 700;
+    margin: 0 0 .5rem;
+    line-height: 1.4;
+}
+
+.blog-card__title a {
+    color: var(--blog-text);
+    text-decoration: none;
+    transition: color .15s;
+}
+
+.blog-card__title a:hover {
+    color: var(--blog-accent);
+}
+
+.blog-card__intro {
+    font-size: .85rem;
+    color: var(--blog-muted);
+    line-height: 1.55;
+    flex: 1;
+    margin-bottom: .85rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.blog-card__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: auto;
+    padding-top: .75rem;
+    border-top: 1px solid var(--blog-border);
+}
+
+.blog-card__date {
+    font-size: .78rem;
+    color: var(--blog-muted);
+    display: flex;
+    align-items: center;
+    gap: .3rem;
+}
+
+.blog-card__date::before {
+    content: '';
+    display: inline-block;
+    width: .55rem;
+    height: .55rem;
+    border-radius: 50%;
+    background: var(--blog-border);
+}
+
+.blog-card__more {
+    font-size: .78rem;
+    font-weight: 700;
+    color: var(--blog-accent);
+    text-decoration: none;
+    background: var(--blog-accent-lt);
+    border-radius: 20px;
+    padding: .25rem .75rem;
+    transition: background .15s, color .15s;
+    letter-spacing: .02em;
+}
+
+.blog-card__more:hover {
+    background: var(--blog-accent);
+    color: var(--blog-white);
+    text-decoration: none;
+}
+
+.blog-empty {
+    padding: 2.5rem;
+    text-align: center;
+    color: var(--blog-muted);
+    border: 2px dashed var(--blog-border);
+    border-radius: var(--blog-radius);
+    font-size: .95rem;
+}
+
+/* ---- Paginacja -------------------------------------------- */
+.blog-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: .3rem;
+    margin-top: 1.5rem;
+    flex-wrap: wrap;
+}
+
+.blog-pagination a,
+.blog-pagination span {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.2rem;
+    height: 2.2rem;
+    padding: 0 .5rem;
+    border: 1px solid var(--blog-border);
+    border-radius: 6px;
+    font-size: .88rem;
+    text-decoration: none;
+    color: var(--blog-text);
+    transition: background .15s, border-color .15s, color .15s;
+    font-weight: 500;
+}
+
+.blog-pagination a:hover {
+    background: var(--blog-accent-lt);
+    border-color: var(--blog-accent);
+    color: var(--blog-accent);
+    text-decoration: none;
+}
+
+.blog-pagination .current {
+    background: var(--blog-accent);
+    border-color: var(--blog-accent);
+    color: var(--blog-white);
+    font-weight: 700;
+}
+
+.blog-pagination .disabled {
+    color: #ccc;
+    border-color: #eee;
+    pointer-events: none;
+    background: #fafafa;
+}
+
+/* ---- Szczegół wpisu --------------------------------------- */
+.blog-post {
+    max-width: 100%;
+}
+
+.blog-post-header {
+    margin-bottom: 1.75rem;
+    padding-bottom: 1.25rem;
+    border-bottom: 1px solid var(--blog-border);
+}
+
+.blog-post-title {
+    font-size: 2rem;
+    font-weight: 800;
+    line-height: 1.25;
+    color: var(--blog-text);
+    margin: 0 0 1rem;
+    letter-spacing: -.02em;
+}
+
+@media (max-width: 575px) {
+    .blog-post-title {
+        font-size: 1.5rem;
+    }
+}
+
+.blog-post-meta {
+    font-size: .83rem;
+    color: var(--blog-muted);
+    display: flex;
+    flex-wrap: wrap;
+    gap: .6rem 1.2rem;
+    align-items: center;
+}
+
+.blog-post-meta time {
+    font-weight: 500;
+    color: #555;
+}
+
+.blog-post-meta a {
+    color: var(--blog-accent);
+    text-decoration: none;
+}
+
+.blog-post-meta a:hover {
+    text-decoration: underline;
+}
+
+/* Kategorie jako badges */
+.blog-post-cats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .3rem;
+}
+
+.cat-badge {
+    display: inline-block;
+    background: var(--blog-accent-lt);
+    border: 1px solid #c5d5f0;
+    border-radius: 20px;
+    font-size: .75rem;
+    font-weight: 600;
+    padding: .2rem .65rem;
+    color: var(--blog-accent);
+    text-decoration: none;
+    letter-spacing: .02em;
+    transition: background .15s, color .15s;
+}
+
+.cat-badge:hover {
+    background: var(--blog-accent);
+    color: var(--blog-white);
+    border-color: var(--blog-accent);
+    text-decoration: none;
+}
+
+/* Miniaturka */
+.blog-post-thumb {
+    margin-bottom: 1.75rem;
+    border-radius: var(--blog-radius);
+    overflow: hidden;
+    box-shadow: var(--blog-shadow);
+}
+
+.blog-post-thumb img {
+    width: 100%;
+    max-height: 460px;
+    object-fit: cover;
+    display: block;
+}
+
+/* Wstęp (intro) */
+.blog-post-intro {
+    font-size: 1.05rem;
+    font-weight: 400;
+    color: #3a3a3a;
+    line-height: 1.7;
+    padding: 1rem 1.25rem 1rem 1.5rem;
+    background: var(--blog-bg);
+    border-left: 4px solid var(--blog-accent);
+    border-radius: 0 var(--blog-radius) var(--blog-radius) 0;
+    margin-bottom: 2rem;
+    font-style: italic;
+}
+
+/* Treść wpisu */
+.blog-post-content {
+    font-size: .97rem;
+    line-height: 1.8;
+    color: var(--blog-text);
+}
+
+.blog-post-content h2 {
+    font-size: 1.45rem;
+    font-weight: 700;
+    margin: 2rem 0 .75rem;
+    color: var(--blog-text);
+    padding-bottom: .4rem;
+    border-bottom: 2px solid var(--blog-border);
+}
+
+.blog-post-content h3 {
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin: 1.5rem 0 .6rem;
+    color: var(--blog-text);
+}
+
+.blog-post-content h4 {
+    font-size: 1rem;
+    font-weight: 700;
+    margin: 1.2rem 0 .5rem;
+}
+
+.blog-post-content p {
+    margin-bottom: 1.1rem;
+}
+
+.blog-post-content ul,
+.blog-post-content ol {
+    margin-bottom: 1.1rem;
+    padding-left: 1.5rem;
+}
+
+.blog-post-content li {
+    margin-bottom: .35rem;
+}
+
+.blog-post-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 6px;
+    margin: .5rem 0;
+}
+
+.blog-post-content a {
+    color: var(--blog-accent);
+    text-decoration: underline;
+}
+
+.blog-post-content a:hover {
+    color: var(--blog-accent-dk);
+}
+
+.blog-post-content blockquote {
+    margin: 1.5rem 0;
+    padding: .75rem 1.25rem;
+    border-left: 4px solid var(--blog-accent);
+    background: var(--blog-bg);
+    border-radius: 0 6px 6px 0;
+    font-style: italic;
+    color: #555;
+}
+
+/* Powrót */
+.blog-post-back {
+    margin-top: 2.5rem;
+    padding: 1rem 1.25rem;
+    background: var(--blog-bg);
+    border-radius: var(--blog-radius);
+    border: 1px solid var(--blog-border);
+    font-size: .88rem;
+}
+
+.blog-post-back a {
+    color: var(--blog-accent);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color .15s;
+}
+
+.blog-post-back a:hover {
+    color: var(--blog-accent-dk);
+    text-decoration: underline;
+}
--- a/modules/projectproblog/views/css/index.php
+++ b/modules/projectproblog/views/css/index.php
@@ -0,0 +1 @@
+<?php header('Location: ../'); exit;
--- a/modules/projectproblog/views/img/index.php
+++ b/modules/projectproblog/views/img/index.php
@@ -0,0 +1 @@
+<?php header('Location: ../'); exit;
--- a/modules/projectproblog/views/img/posts/index.php
+++ b/modules/projectproblog/views/img/posts/index.php
@@ -0,0 +1,8 @@
+<?php
+header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
+header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
+header('Cache-Control: no-store, no-cache, must-revalidate');
+header('Cache-Control: post-check=0, pre-check=0', false);
+header('Pragma: no-cache');
+header('Location: ../');
+exit;
--- a/modules/projectproblog/views/index.php
+++ b/modules/projectproblog/views/index.php
@@ -0,0 +1,8 @@
+<?php
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+header("Location: ../");
+exit;
--- a/modules/projectproblog/views/templates/admin/index.php
+++ b/modules/projectproblog/views/templates/admin/index.php
@@ -0,0 +1,8 @@
+<?php
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+header("Location: ../");
+exit;
--- a/modules/projectproblog/views/templates/front/_category-tree.tpl
+++ b/modules/projectproblog/views/templates/front/_category-tree.tpl
@@ -0,0 +1,53 @@
+{**
+ * Project-Pro Blog — partial: drzewo kategorii (rekurencyjne)
+ *
+ * Parametry:
+ *   $tree        — wynik BlogCategory::getCategoryTree() z URL-ami
+ *   $current_cat — aktualny obiekt BlogCategory lub null
+ *}
+
+{if $tree}
+<ul class="blog-cat-tree">
+    {foreach from=$tree item=node}
+        {assign var="cat"       value=$node.category}
+        {assign var="children"  value=$node.children}
+        {assign var="isActive"  value=($current_cat && $current_cat->id == $cat.id_category)}
+        {assign var="hasActive" value=false}
+
+        {* Sprawdź czy aktywna kategoria jest wśród dzieci (do automatycznego rozwinięcia) *}
+        {if $current_cat && $children}
+            {foreach from=$children item=child}
+                {if $child.category.id_category == $current_cat->id}
+                    {assign var="hasActive" value=true}
+                {/if}
+            {/foreach}
+        {/if}
+
+        <li class="blog-cat-item{if $isActive} is-active{/if}{if $children} has-children{/if}">
+
+            {if $children}
+                <span class="blog-cat-toggle" data-target="#cat-sub-{$cat.id_category}"
+                      title="{if $isActive || $hasActive}{l s='Zwiń' mod='projectproblog'}{else}{l s='Rozwiń' mod='projectproblog'}{/if}">
+                    {if $isActive || $hasActive}&#9660;{else}&#9658;{/if}
+                </span>
+            {/if}
+
+            <a href="{$cat.url|escape:'html':'UTF-8'}"
+               class="blog-cat-link{if $isActive} active{/if}">
+                {$cat.name|escape:'html':'UTF-8'}
+            </a>
+
+            {if $children}
+                <ul id="cat-sub-{$cat.id_category}"
+                    class="{if $isActive || $hasActive}open{/if}">
+                    {include
+                        file='module:projectproblog/views/templates/front/_category-tree.tpl'
+                        tree=$children
+                        current_cat=$current_cat}
+                </ul>
+            {/if}
+
+        </li>
+    {/foreach}
+</ul>
+{/if}
--- a/modules/projectproblog/views/templates/front/index.php
+++ b/modules/projectproblog/views/templates/front/index.php
@@ -0,0 +1,8 @@
+<?php
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+header("Location: ../");
+exit;
--- a/modules/projectproblog/views/templates/front/list.tpl
+++ b/modules/projectproblog/views/templates/front/list.tpl
@@ -0,0 +1,140 @@
+{**
+ * Project-Pro Blog — strona listy wpisów
+ *}
+{extends file='layouts/layout-full-width.tpl'}
+
+{block name='content'}
+<section id="blog-wrap" class="container">
+    <div class="row">
+
+        {* ====================================================
+           LEWA KOLUMNA — drzewo kategorii
+           ==================================================== *}
+        <aside id="blog-sidebar" class="col-md-3">
+            <div class="blog-cats-widget">
+                <h4>{l s='Kategorie' mod='projectproblog'}</h4>
+
+                <a href="{$blog_url|escape:'html':'UTF-8'}"
+                   class="blog-cat-link{if !$blog_current_cat} active{/if}"
+                   style="display:block;margin-bottom:.5rem;">
+                    {l s='Wszystkie wpisy' mod='projectproblog'}
+                </a>
+
+                {include
+                    file='module:projectproblog/views/templates/front/_category-tree.tpl'
+                    tree=$blog_category_tree
+                    current_cat=$blog_current_cat}
+            </div>
+        </aside>
+
+        {* ====================================================
+           PRAWA KOLUMNA — lista wpisów + paginacja
+           ==================================================== *}
+        <div id="blog-content" class="col-md-9">
+
+            <h1 class="blog-list-title">
+                {if $blog_current_cat}
+                    {$blog_current_cat->name|escape:'html':'UTF-8'}
+                {else}
+                    {l s='Blog' mod='projectproblog'}
+                {/if}
+            </h1>
+
+            {if $blog_posts}
+
+                <div class="blog-grid">
+                    {foreach from=$blog_posts item=post}
+                    <div class="blog-grid-item">
+                        <article class="blog-card">
+
+                            {if $post.thumbnail_url}
+                                <a href="{$post.url|escape:'html':'UTF-8'}" class="blog-card__thumb">
+                                    <img src="{$post.thumbnail_url|escape:'html':'UTF-8'}"
+                                         alt="{$post.title|escape:'html':'UTF-8'}"
+                                         loading="lazy">
+                                </a>
+                            {/if}
+
+                            <div class="blog-card__body">
+                                <h2 class="blog-card__title">
+                                    <a href="{$post.url|escape:'html':'UTF-8'}">
+                                        {$post.title|escape:'html':'UTF-8'}
+                                    </a>
+                                </h2>
+
+                                {if $post.intro}
+                                    <div class="blog-card__intro">
+                                        {$post.intro|strip_tags|truncate:180:'…'}
+                                    </div>
+                                {/if}
+
+                                <div class="blog-card__footer">
+                                    <span class="blog-card__date">
+                                        {$post.date_add|date_format:'%d.%m.%Y'}
+                                    </span>
+                                    <a href="{$post.url|escape:'html':'UTF-8'}" class="blog-card__more">
+                                        {l s='Czytaj więcej' mod='projectproblog'} &rsaquo;
+                                    </a>
+                                </div>
+                            </div>
+
+                        </article>
+                    </div>
+                    {/foreach}
+                </div>
+
+                {* ---- Paginacja ---- *}
+                {if $blog_pagination && $blog_pages_count > 1}
+                <nav class="blog-pagination" aria-label="{l s='Strony' mod='projectproblog'}">
+
+                    {if $blog_pagination.prev}
+                        <a href="{$blog_pagination.prev|escape:'html':'UTF-8'}" aria-label="{l s='Poprzednia' mod='projectproblog'}">&laquo;</a>
+                    {else}
+                        <span class="disabled">&laquo;</span>
+                    {/if}
+
+                    {foreach from=$blog_pagination.pages item=pg}
+                        {if $pg.current}
+                            <span class="current">{$pg.page}</span>
+                        {else}
+                            <a href="{$pg.url|escape:'html':'UTF-8'}">{$pg.page}</a>
+                        {/if}
+                    {/foreach}
+
+                    {if $blog_pagination.next}
+                        <a href="{$blog_pagination.next|escape:'html':'UTF-8'}" aria-label="{l s='Następna' mod='projectproblog'}">&raquo;</a>
+                    {else}
+                        <span class="disabled">&raquo;</span>
+                    {/if}
+
+                </nav>
+                {/if}
+
+            {else}
+                <p class="blog-empty">
+                    {l s='Brak wpisów do wyświetlenia.' mod='projectproblog'}
+                </p>
+            {/if}
+
+        </div>{* /blog-content *}
+    </div>{* /row *}
+</section>
+{/block}
+
+{block name='javascript_bottom' append}
+<script>
+(function () {
+    'use strict';
+    /* Rozwijanie/zwijanie podkategorii */
+    document.querySelectorAll('.blog-cat-toggle').forEach(function (toggle) {
+        toggle.addEventListener('click', function () {
+            var targetId = this.getAttribute('data-target');
+            var sub = document.querySelector(targetId);
+            if (!sub) { return; }
+            var isOpen = sub.classList.toggle('open');
+            this.innerHTML = isOpen ? '&#9660;' : '&#9658;';
+        });
+    });
+}());
+</script>
+{/block}
--- a/modules/projectproblog/views/templates/front/post.tpl
+++ b/modules/projectproblog/views/templates/front/post.tpl
@@ -0,0 +1,134 @@
+{**
+ * Project-Pro Blog — strona szczegółu wpisu
+ *}
+{extends file='layouts/layout-full-width.tpl'}
+
+{block name='content'}
+<section id="blog-wrap" class="container">
+    <div class="row">
+
+        {* ====================================================
+           LEWA KOLUMNA — drzewo kategorii
+           ==================================================== *}
+        <aside id="blog-sidebar" class="col-md-3">
+            <div class="blog-cats-widget">
+                <h4>{l s='Kategorie' mod='projectproblog'}</h4>
+
+                <a href="{$blog_url|escape:'html':'UTF-8'}"
+                   class="blog-cat-link"
+                   style="display:block;margin-bottom:.5rem;">
+                    {l s='Wszystkie wpisy' mod='projectproblog'}
+                </a>
+
+                {include
+                    file='module:projectproblog/views/templates/front/_category-tree.tpl'
+                    tree=$blog_category_tree
+                    current_cat=$blog_current_cat}
+            </div>
+        </aside>
+
+        {* ====================================================
+           PRAWA KOLUMNA — treść wpisu
+           ==================================================== *}
+        <div id="blog-content" class="col-md-9">
+
+            <article class="blog-post" itemscope itemtype="https://schema.org/BlogPosting">
+
+                {* ---- Nagłówek ---- *}
+                <header class="blog-post-header">
+
+                    <h1 class="blog-post-title" itemprop="headline">
+                        {$blog_post->title|escape:'html':'UTF-8'}
+                    </h1>
+
+                    <div class="blog-post-meta">
+                        <span>
+                            <time datetime="{$blog_post->date_add|date_format:'%Y-%m-%d'}" itemprop="datePublished">
+                                {$blog_post->date_add|date_format:'%d.%m.%Y'}
+                            </time>
+                        </span>
+
+                        {if $blog_show_updated}
+                            <span>
+                                {l s='Aktualizacja:' mod='projectproblog'}
+                                <time datetime="{$blog_post->date_upd|date_format:'%Y-%m-%d'}" itemprop="dateModified">
+                                    {$blog_post->date_upd|date_format:'%d.%m.%Y'}
+                                </time>
+                            </span>
+                        {/if}
+
+                        {if $blog_post_cats}
+                            <span class="blog-post-cats">
+                                {foreach from=$blog_post_cats item=cat}
+                                    <a href="{$cat.url|escape:'html':'UTF-8'}"
+                                       class="cat-badge"
+                                       itemprop="articleSection">
+                                        {$cat.name|escape:'html':'UTF-8'}
+                                    </a>
+                                {/foreach}
+                            </span>
+                        {/if}
+                    </div>
+
+                </header>
+
+                {* ---- Miniaturka ---- *}
+                {if $blog_thumbnail}
+                    <figure class="blog-post-thumb">
+                        <img src="{$blog_thumbnail|escape:'html':'UTF-8'}"
+                             alt="{$blog_post->title|escape:'html':'UTF-8'}"
+                             itemprop="image">
+                    </figure>
+                {/if}
+
+                {* ---- Wstęp ---- *}
+                {if $blog_post->intro}
+                    <div class="blog-post-intro" itemprop="description">
+                        {$blog_post->intro nofilter}
+                    </div>
+                {/if}
+
+                {* ---- Treść ---- *}
+                {if $blog_post->content}
+                    <div class="blog-post-content" itemprop="articleBody">
+                        {$blog_post->content nofilter}
+                    </div>
+                {/if}
+
+                {* ---- Powrót do listy / kategorii ---- *}
+                <div class="blog-post-back">
+                    {if $blog_primary_cat}
+                        <a href="{$blog_primary_cat.url|escape:'html':'UTF-8'}">
+                            &larr; {l s='Wróć do kategorii' mod='projectproblog'}:
+                            {$blog_primary_cat.name|escape:'html':'UTF-8'}
+                        </a>
+                        &nbsp;&middot;&nbsp;
+                    {/if}
+                    <a href="{$blog_url|escape:'html':'UTF-8'}">
+                        {l s='Wszystkie wpisy' mod='projectproblog'}
+                    </a>
+                </div>
+
+            </article>
+
+        </div>{* /blog-content *}
+    </div>{* /row *}
+</section>
+{/block}
+
+{block name='javascript_bottom' append}
+<script>
+(function () {
+    'use strict';
+    document.querySelectorAll('.blog-cat-toggle').forEach(function (toggle) {
+        toggle.addEventListener('click', function () {
+            var targetId = this.getAttribute('data-target');
+            var sub = document.querySelector(targetId);
+            if (!sub) { return; }
+            var isOpen = sub.classList.toggle('open');
+            this.innerHTML = isOpen ? '&#9660;' : '&#9658;';
+        });
+    });
+}());
+</script>
+{/block}
--- a/modules/projectproblog/views/templates/index.php
+++ b/modules/projectproblog/views/templates/index.php
@@ -0,0 +1,8 @@
+<?php
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+header("Location: ../");
+exit;