fix: address QA review findings
All checks were successful
CI / nightly-e2e (pull_request) Has been skipped
CI / deploy (pull_request) Has been skipped
CI / pr-e2e (pull_request) Successful in 1m6s
CI / ci (pull_request) Successful in 1m24s

1. Typography: install @tailwindcss/typography and add to plugins so prose
   classes render correctly in article/about/legal templates.

2. Callout block: fix icon branches to match CalloutBlock.ICON_CHOICES
   (info/warning/trophy/tip). Previous template branched on error/success
   which are unreachable; info fell through to else silently.

3. Nav newsletter feedback: remove 'hidden' class from desktop nav
   data-newsletter-message element. JS sets textContent only; hidden
   class prevented message from ever being visible.

4. Popular Articles sidebar: add numbered Popular Articles widget to home
   page sidebar matching wireframe, using latest_articles context with
   alternating cyan/pink number accents and read_time_mins.

Rebuild CSS: typography plugin grows output from 24KB to 47KB.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
codex_a
2026-03-01 11:20:57 +00:00
parent bff59eec06
commit 71fe06edd1
7 changed files with 57 additions and 9 deletions

View File

@@ -119,7 +119,26 @@
{% include 'components/newsletter_form.html' with source='sidebar' label='Subscribe' %}
</div>
<!-- Topics -->
<!-- Popular Articles -->
{% if latest_articles %}
<div>
<h4 class="font-display font-bold mb-4 uppercase tracking-widest text-zinc-500 text-sm">Popular Articles</h4>
<ul class="space-y-4">
{% for article in latest_articles %}
<li class="group">
<a href="{{ article.url }}" class="flex gap-4 items-start">
<span class="font-display font-black text-2xl text-zinc-300 dark:text-zinc-800 group-hover:text-brand-{% cycle 'cyan' 'pink' 'cyan' 'pink' 'cyan' %} transition-colors">0{{ forloop.counter }}</span>
<div>
<h5 class="font-display font-bold text-sm leading-tight group-hover:text-brand-cyan transition-colors">{{ article.title }}</h5>
<div class="text-xs font-mono text-zinc-500 mt-1">{{ article.read_time_mins }} min read</div>
</div>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if available_tags %}
<div>
<h4 class="font-display font-bold mb-4 uppercase tracking-widest text-zinc-500 text-sm">Explore Topics</h4>