perf: htmx lazy popover with Cache-Control — no pre-render, images load on hover only

This commit is contained in:
Pontoporeia
2026-04-24 13:20:19 +02:00
parent e590d8e035
commit 6eb111a6ab
3 changed files with 38 additions and 75 deletions

View File

@@ -31,10 +31,7 @@ ksort($studentWorks);
// Legacy alias for single-id use
$studentMap = array_map(fn($ids) => $ids[0], $studentWorks);
// Batch-fetch all preview data for visible students (one query)
$previewsByAuthor = !empty($studentWorks)
? $db->getThesesForAuthors(array_keys($studentWorks))
: [];
/**
* Build the toggle URL for a filter button.
@@ -182,15 +179,18 @@ $hx = 'hx-target="#repertoire-index" hx-swap="outerHTML" hx-push-url="true" hx-i
<?php else: ?>
<?php foreach ($studentWorks as $name => $ids): ?>
<?php
$firstId = $ids[0];
$targetUrl = count($ids) === 1 ? '/tfe?id=' . $firstId : '#';
$templateId = 'sp-' . md5($name);
$firstId = $ids[0];
$targetUrl = count($ids) === 1 ? '/tfe?id=' . $firstId : '#';
$previewUrl = '/repertoire/student-preview?name=' . urlencode($name);
?>
<li class="student-entry">
<a href="<?= htmlspecialchars($targetUrl) ?>"
class="rep-entry rep-entry--link"
data-student-name="<?= htmlspecialchars($name) ?>"
data-preview="<?= htmlspecialchars($templateId) ?>">
hx-get="<?= htmlspecialchars($previewUrl) ?>"
hx-target="#student-popover"
hx-trigger="mouseenter once"
hx-swap="innerHTML">
<?= htmlspecialchars($name) ?>
</a>
</li>
@@ -224,38 +224,3 @@ $hx = 'hx-target="#repertoire-index" hx-swap="outerHTML" hx-push-url="true" hx-i
</section>
</div>
<?php foreach ($studentWorks as $name => $ids):
$templateId = 'sp-' . md5($name);
$theses = $previewsByAuthor[$name] ?? [];
if (empty($theses)) continue;
?>
<template id="<?= htmlspecialchars($templateId) ?>">
<?php foreach ($theses as $t):
$synopsis = $t['synopsis'] ?? '';
if (mb_strlen($synopsis) > 160) $synopsis = mb_substr($synopsis, 0, 157) . '…';
$meta = array_filter([$t['year'] ?? null, $t['orientation'] ?? null, $t['finality_type'] ?? null]);
?>
<a href="/tfe?id=<?= (int)$t['id'] ?>" class="student-card">
<?php if (!empty($t['banner_path'])): ?>
<div class="student-card__banner" style="background-image:url('<?= htmlspecialchars($t['banner_path']) ?>')"></div>
<?php else: ?>
<div class="student-card__banner student-card__banner--gradient">
<span class="student-card__gradient-author"><?= htmlspecialchars($t['authors'] ?? '') ?></span>
<span class="student-card__gradient-title"><?= htmlspecialchars($t['title']) ?></span>
</div>
<?php endif; ?>
<div class="student-card__body">
<p class="student-card__meta"><?= htmlspecialchars(implode(' · ', $meta)) ?></p>
<h3 class="student-card__title"><?= htmlspecialchars($t['title']) ?></h3>
<?php if (!empty($t['subtitle'])): ?>
<p class="student-card__subtitle"><?= htmlspecialchars($t['subtitle']) ?></p>
<?php endif; ?>
<?php if ($synopsis !== ''): ?>
<p class="student-card__synopsis"><?= htmlspecialchars($synopsis) ?></p>
<?php endif; ?>
</div>
</a>
<?php endforeach; ?>
</template>
<?php endforeach; ?>