mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 08:44:56 +02:00
1026d728af
- Focus traps for fediverse modal and lightbox dialogs (C3, C4) - Search widget input label (C5) - Blogroll widget tab ARIA semantics (C6) - Footer social links "opens in new tab" warning (S5) - Reply context aria-label on aside (S8) - Photo alt text fallback includes post title (S10) - Post categories use list markup (M3) - Funkwhale now-playing bars aria-hidden (M7) - TOC uses static Tailwind classes instead of dynamic (M9) - Footer headings use proper aria heading roles (M15) - Header anchor opacity increased to 1 for contrast (M18) - Custom HTML widgets labeled as regions (M19) - Empty collection placeholder role=status (M22) - GitHub widget loading state announced (N5) - Subscribe icon contrast improved (m1) - All Permalink links have aria-label with post context (m3) - Podroll audio element aria-label (m4) - Obfuscated email link aria-label (m6) - Fediverse follow button uses aria-label (M10) Score: 53.6% → 92.9% (26/28 WCAG criteria passing) Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
140 lines
8.2 KiB
Plaintext
140 lines
8.2 KiB
Plaintext
---
|
|
layout: layouts/base.njk
|
|
title: Replies
|
|
withSidebar: true
|
|
pagination:
|
|
data: collections.replies
|
|
size: 20
|
|
alias: paginatedReplies
|
|
generatePageOnEmptyData: true
|
|
permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
|
|
---
|
|
<div class="h-feed">
|
|
<div class="flex flex-wrap items-center gap-4 mb-2">
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Replies</h1>
|
|
{% set sparklineSvg = collections.replies | postingFrequency %}
|
|
{% if sparklineSvg %}
|
|
<div class="flex-1 min-w-0 text-sky-600 dark:text-sky-400">{{ sparklineSvg | safe }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
|
My responses to posts across the web.
|
|
<span class="text-sm">({{ collections.replies.length }} total)</span>
|
|
</p>
|
|
|
|
{% if paginatedReplies.length > 0 %}
|
|
<ul class="post-list">
|
|
{% for post in paginatedReplies %}
|
|
<li class="h-entry post-card border-l-[3px] border-l-sky-400 dark:border-l-sky-500">
|
|
<div class="post-header flex items-start gap-3">
|
|
<div class="flex-shrink-0 mt-1">
|
|
<svg class="w-5 h-5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
{% if post.data.title %}
|
|
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">
|
|
<a class="hover:text-sky-600 dark:hover:text-sky-400" href="{{ post.url }}">{{ post.data.title }}</a>
|
|
</h2>
|
|
{% endif %}
|
|
<div class="post-meta">
|
|
<time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
|
|
{{ post.date | dateDisplay }}
|
|
</time>
|
|
{% if post.data.category %}
|
|
<span class="post-categories">
|
|
{% if post.data.category is string %}
|
|
<span class="p-category">{{ post.data.category }}</span>
|
|
{% else %}
|
|
{% for cat in post.data.category %}
|
|
<span class="p-category">{{ cat }}</span>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
|
|
{% set replyTo = post.data.inReplyTo or post.data.in_reply_to %}
|
|
{% if replyTo %}
|
|
{% set protocol = replyTo | protocolType %}
|
|
{% unfurl replyTo %}
|
|
<p class="mt-2 text-sm flex items-center gap-2 flex-wrap">
|
|
<span class="text-surface-600">In reply to:</span>
|
|
<a class="u-in-reply-to text-xs text-surface-600 dark:text-surface-400 hover:underline break-all" href="{{ replyTo }}">
|
|
{{ replyTo | replace("https://", "") | replace("http://", "") | truncate(60) }}
|
|
</a>
|
|
{% if protocol == "atmosphere" %}
|
|
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-[#0085ff]/10 text-[#0085ff] text-xs font-medium">
|
|
<svg class="w-3 h-3" viewBox="0 0 568 501" fill="currentColor" aria-hidden="true">
|
|
<path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/>
|
|
</svg>
|
|
via ATmosphere
|
|
</span>
|
|
{% elif protocol == "fediverse" %}
|
|
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-[#6364ff]/10 text-[#6364ff] text-xs font-medium">
|
|
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
|
|
</svg>
|
|
via Fediverse
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 text-xs font-medium">
|
|
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
|
</svg>
|
|
via Web
|
|
</span>
|
|
{% endif %}
|
|
</p>
|
|
{% endif %}
|
|
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
|
|
{{ post.templateContent | safe }}
|
|
</div>
|
|
<a class="u-url text-sm text-sky-600 dark:text-sky-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Reply from ' + (post.date | dateDisplay)) }}">Permalink</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
{# Pagination controls #}
|
|
{% if pagination.pages.length > 1 %}
|
|
<nav class="pagination" aria-label="Replies pagination">
|
|
<div class="pagination-info">
|
|
Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
|
|
</div>
|
|
<div class="pagination-links">
|
|
{% if pagination.href.previous %}
|
|
<a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
|
Previous
|
|
</a>
|
|
{% else %}
|
|
<span class="pagination-link disabled" aria-disabled="true">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
|
Previous
|
|
</span>
|
|
{% endif %}
|
|
|
|
{% if pagination.href.next %}
|
|
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
|
|
Next
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
</a>
|
|
{% else %}
|
|
<span class="pagination-link disabled" aria-disabled="true">
|
|
Next
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
{% set postType = "reply" %}
|
|
{% include "components/empty-collection.njk" %}
|
|
{% endif %}
|
|
</div>
|