AudioCore/modules/blog/views/site/index.php

<?php
$posts = is_array($posts ?? null) ? $posts : [];
$page = is_array($page ?? null) ? $page : null;
$pageContentHtml = trim((string)($page['content_html'] ?? ''));

$formatDate = static function (?string $value): string {
    if ($value === null || trim($value) === '') {
        return '';
    }
    try {
        return (new DateTime($value))->format('d M Y');
    } catch (Throwable $e) {
        return $value;
    }
};

$renderTags = static function (string $tags): array {
    return array_values(array_filter(array_map('trim', explode(',', $tags))));
};

ob_start();
?>
<section class="card news-list-shell-minimal">
  <?php if ($pageContentHtml !== ''): ?>
    <div class="blog-page-content-box">
      <?= $pageContentHtml ?>
    </div>
  <?php endif; ?>

  <?php if ($posts): ?>
    <div class="news-list-grid-minimal">
      <?php foreach ($posts as $post): ?>
        <a class="news-card-minimal" href="/news/<?= htmlspecialchars((string)$post['slug'], ENT_QUOTES, 'UTF-8') ?>">
          <?php if (!empty($post['featured_image_url'])): ?>
            <div class="news-card-media-minimal">
              <img src="<?= htmlspecialchars((string)$post['featured_image_url'], ENT_QUOTES, 'UTF-8') ?>" alt="">
            </div>
          <?php endif; ?>
          <div class="news-card-copy-minimal">
            <div class="news-card-meta-minimal">
              <?php $published = $formatDate((string)($post['published_at'] ?? '')); ?>
              <?php if ($published !== ''): ?><span><?= htmlspecialchars($published, ENT_QUOTES, 'UTF-8') ?></span><?php endif; ?>
              <?php if (!empty($post['author_name'])): ?><span><?= htmlspecialchars((string)$post['author_name'], ENT_QUOTES, 'UTF-8') ?></span><?php endif; ?>
            </div>
            <h2><?= htmlspecialchars((string)$post['title'], ENT_QUOTES, 'UTF-8') ?></h2>
            <?php if (!empty($post['excerpt'])): ?>
              <p><?= htmlspecialchars((string)$post['excerpt'], ENT_QUOTES, 'UTF-8') ?></p>
            <?php endif; ?>
            <?php $tags = $renderTags((string)($post['tags'] ?? '')); ?>
            <?php if ($tags): ?>
              <div class="news-card-tags-minimal">
                <?php foreach (array_slice($tags, 0, 3) as $tag): ?>
                  <span><?= htmlspecialchars($tag, ENT_QUOTES, 'UTF-8') ?></span>
                <?php endforeach; ?>
              </div>
            <?php endif; ?>
          </div>
        </a>
      <?php endforeach; ?>
    </div>
  <?php elseif ($pageContentHtml === ''): ?>
    <div class="news-empty-minimal">No published posts yet.</div>
  <?php endif; ?>
</section>

<style>
  .news-list-shell-minimal { display: grid; gap: 18px; }
  .blog-page-content-box {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(12,15,21,.84);
    padding: 28px;
    overflow: hidden;
  }
  .blog-page-content-box img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .news-list-grid-minimal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .news-card-minimal {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 0;
    min-height: 180px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(12,15,21,.84);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .news-card-minimal:hover {
    transform: translateY(-2px);
    border-color: rgba(34,242,165,.34);
    box-shadow: 0 18px 32px rgba(0,0,0,.2);
  }
  .news-card-media-minimal { background: rgba(255,255,255,.03); }
  .news-card-media-minimal img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .news-card-copy-minimal {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 20px;
  }
  .news-card-meta-minimal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: rgba(255,255,255,.58);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .news-card-copy-minimal h2 {
    margin: 0;
    font-size: 34px;
    line-height: .96;
  }
  .news-card-copy-minimal p {
    margin: 0;
    color: #c4cede;
    line-height: 1.65;
    font-size: 15px;
  }
  .news-card-tags-minimal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .news-card-tags-minimal span {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: #dce5f6;
    font-size: 11px;
  }
  .news-empty-minimal {
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,.16);
    padding: 24px;
    color: #afb8ca;
    background: rgba(255,255,255,.02);
  }
  @media (max-width: 980px) {
    .news-list-grid-minimal { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    .blog-page-content-box { padding: 20px; }
    .news-card-minimal {
      grid-template-columns: 1fr;
      min-height: 0;
    }
    .news-card-media-minimal { min-height: 220px; }
    .news-card-copy-minimal h2 { font-size: 28px; }
  }
</style>
<?php
$content = ob_get_clean();
require __DIR__ . '/../../../../views/site/layout.php';