Files
Pontoporeia fc66b37801 feat(home): htmx lazy-load cover images
Replace the eager <img> on the home page with an htmx placeholder <figure>
that fetches a /cover-fragment endpoint when it scrolls into view
(hx-trigger="revealed"), so heavy cover bytes load only on demand.
Add spinner + settle-fade transition CSS, and load htmx.min.js on home.
2026-09-18 16:26:36 +02:00

48 lines
2.2 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?php if ($year): ?>
<p class="filter-info" role="status">
Année : <?= htmlspecialchars($year) ?>
<a href="/" class="clear-filter"><span aria-hidden="true">✕</span> Réinitialiser</a>
</p>
<?php elseif ($isDefaultView): ?>
<p class="home-section-label" role="status">Publication récente</p>
<?php endif; ?>
<main class="home-main" id="main-content">
<h1 class="sr-only">Mémoires de l'ERG</h1>
<ul class="cards-container">
<?php foreach ($itemsToLoad as $item): ?>
<li class="card">
<a href="/tfe?id=<?= (int)$item["id"] ?>">
<?php
$thumb = $coverMap[$item['id']] ?? null;
?>
<?php if ($thumb): ?>
<figure
hx-get="/cover-fragment?path=<?= urlencode($thumb) ?>"
hx-trigger="intersect threshold:0.05 once"
hx-swap="innerHTML"
aria-busy="true">
<div class="card__media--placeholder" role="status">
<span class="card__cover-loading">…</span>
</div>
</figure>
<?php else: ?>
<div class="card__media--gradient"
aria-hidden="true">
<span class="card__gradient-author"><?= htmlspecialchars($item['authors'] ?? '') ?></span>
<span class="card__gradient-title"><?= htmlspecialchars($item['title']) ?></span>
</div>
<?php endif; ?>
<p><?= htmlspecialchars($item["authors"] ?? '') ?><?php if (!empty($item['authors']) && !empty($item['title'])): ?> – <?php endif; ?><?= htmlspecialchars($item["title"]) ?><?php if (!empty($item['year'])): ?><span class="sr-only">, <?= (int)$item['year'] ?></span><?php endif; ?></p>
</a>
</li>
<?php endforeach; ?>
<?php if (empty($itemsToLoad)): ?>
<li class="cards-empty">Aucun mémoire trouvé.</li>
<?php endif; ?>
</ul>
<?php include APP_ROOT . '/templates/partials/pagination.php'; ?>
</main>