Files
blog-eleventy-indiekit/_includes/components/widgets/fediverse-follow.njk
Ricardo e7aaf73fba feat: consistent AP logo, Mastodon syndication detection
- Replace network-diagram SVG with official ActivityPub logo in post footer
- Replace person-plus SVG with AP logo in fediverse follow widget
- Replace Mastodon icon with AP logo in share widget, use #a730b8 purple
- AP icon brand color: #f1027e → #a730b8 in social-icon macro
- Detect Mastodon syndication URLs (/@username pattern) for proper logo pill

Confab-Link: http://localhost:8080/sessions/c5b1471e-b046-44d9-b94f-ab5e68fae7cc
2026-03-06 10:42:39 +01:00

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-500 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"
title="Follow from your fediverse instance (Shift+click to change)">
<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 %}