mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16: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
37 lines
1.7 KiB
Plaintext
37 lines
1.7 KiB
Plaintext
{# Fediverse Follow Me Widget — uses the fediverseInteract Alpine.js component #}
|
|
{# Requires fediverse-interact.js loaded in base.njk (already present) #}
|
|
{# Determines actor URI from site social links: prefers self-hosted AP, falls back to Mastodon #}
|
|
|
|
{% set actorUrl = "" %}
|
|
{% for link in site.social %}
|
|
{% if link.icon == "activitypub" and not actorUrl %}
|
|
{% set actorUrl = link.url %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if not actorUrl %}
|
|
{% for link in site.social %}
|
|
{% if link.icon == "mastodon" and not actorUrl %}
|
|
{% set actorUrl = link.url %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% if actorUrl %}
|
|
<is-land on:visible>
|
|
<div class="widget" x-data="fediverseInteract('{{ actorUrl }}', 'interact')">
|
|
<h3 class="widget-title">Follow Me</h3>
|
|
<p class="text-sm text-surface-600 dark:text-surface-400 mb-3">Follow me from your fediverse instance.</p>
|
|
<a href="{{ actorUrl }}"
|
|
@click="handleClick($event)"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#a730b8]/10 text-[#a730b8] hover:bg-[#a730b8]/20 transition-colors text-sm font-medium cursor-pointer"
|
|
aria-label="Follow on the Fediverse (use the modal to pick your instance)">
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13.09 4.43L24 10.73v2.51L13.09 19.58v-2.51L21.83 12 13.09 6.98v-2.55zM13.09 9.49L17.44 12l-4.35 2.51V9.49z"/><path d="M10.91 4.43L0 10.73v2.51l8.74-5.03v10.09l2.18 1.28V4.43zM6.56 12L2.18 14.51l4.35 2.51V12z"/></svg>
|
|
<span>Follow on the Fediverse</span>
|
|
</a>
|
|
{% set modalTitle = "Follow on the Fediverse" %}
|
|
{% set modalDescription = "Choose your instance to follow this account." %}
|
|
{% include "components/fediverse-modal.njk" %}
|
|
</div>
|
|
</is-land>
|
|
{% endif %}
|