mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-05-15 15:08:51 +02:00
feat: enhance sidebar h-card with full microformat properties
Added to sidebar author card: - p-pronoun - Structured address (p-locality, p-country-name) - p-org (organization) - u-email - u-key (PGP) - p-category (skills) - Proper Schema.org attributes
This commit is contained in:
@@ -1,24 +1,72 @@
|
|||||||
{# Sidebar Components #}
|
{# Sidebar Components #}
|
||||||
{# Contains: Author card, Bluesky feed, GitHub repos, RSS feed #}
|
{# Contains: Author card, Bluesky feed, GitHub repos, RSS feed #}
|
||||||
|
|
||||||
{# Author Card Widget #}
|
{# Author Card Widget - Full h-card microformat #}
|
||||||
<div class="widget">
|
<div class="widget">
|
||||||
<div class="h-card flex items-center gap-4">
|
<div class="h-card p-author" itemscope itemtype="http://schema.org/Person">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="{{ site.author.url }}" class="u-url u-uid" rel="me">
|
||||||
<img
|
<img
|
||||||
src="{{ site.author.avatar }}"
|
src="{{ site.author.avatar }}"
|
||||||
alt="{{ site.author.name }}"
|
alt="{{ site.author.name }}"
|
||||||
class="u-photo w-16 h-16 rounded-full object-cover"
|
class="u-photo w-16 h-16 rounded-full object-cover"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
|
itemprop="image"
|
||||||
>
|
>
|
||||||
|
</a>
|
||||||
<div>
|
<div>
|
||||||
<a href="{{ site.author.url }}" class="u-url p-name font-bold text-lg block hover:text-primary-600 dark:hover:text-primary-400">
|
<a href="{{ site.author.url }}" class="u-url p-name font-bold text-lg block hover:text-primary-600 dark:hover:text-primary-400" itemprop="name">
|
||||||
{{ site.author.name }}
|
{{ site.author.name }}
|
||||||
</a>
|
</a>
|
||||||
<p class="p-job-title text-sm text-surface-600 dark:text-surface-400">{{ site.author.title }}</p>
|
{% if site.author.pronoun %}
|
||||||
<p class="p-locality text-sm text-surface-500 dark:text-surface-500">{{ site.author.location }}</p>
|
<span class="p-pronoun text-xs text-surface-500">({{ site.author.pronoun }})</span>
|
||||||
|
{% endif %}
|
||||||
|
<p class="p-job-title text-sm text-surface-600 dark:text-surface-400" itemprop="jobTitle">{{ site.author.title }}</p>
|
||||||
|
{# Structured address #}
|
||||||
|
<p class="p-adr h-adr text-sm text-surface-500 dark:text-surface-500" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
|
||||||
|
{% if site.author.locality %}
|
||||||
|
<span class="p-locality" itemprop="addressLocality">{{ site.author.locality }}</span>{% if site.author.country %}, {% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{% if site.author.country %}
|
||||||
|
<span class="p-country-name" itemprop="addressCountry">{{ site.author.country }}</span>
|
||||||
|
{% endif %}
|
||||||
|
{# Fallback to legacy location #}
|
||||||
|
{% if not site.author.locality and site.author.location %}
|
||||||
|
<span class="p-locality">{{ site.author.location }}</span>
|
||||||
|
{% endif %}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="p-note mt-3 text-sm text-surface-700 dark:text-surface-300">{{ site.author.bio }}</p>
|
{# Bio #}
|
||||||
|
<p class="p-note mt-3 text-sm text-surface-700 dark:text-surface-300" itemprop="description">{{ site.author.bio }}</p>
|
||||||
|
{# Organization #}
|
||||||
|
{% if site.author.org %}
|
||||||
|
<p class="mt-2 text-sm text-surface-600 dark:text-surface-400">
|
||||||
|
<span class="p-org" itemprop="worksFor">{{ site.author.org }}</span>
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
{# Email and PGP Key #}
|
||||||
|
<div class="mt-2 flex flex-wrap gap-3 text-sm">
|
||||||
|
{% if site.author.email %}
|
||||||
|
<a href="mailto:{{ site.author.email }}" class="u-email text-primary-600 dark:text-primary-400 hover:underline" itemprop="email">
|
||||||
|
✉️ {{ site.author.email }}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
{% if site.author.keyUrl %}
|
||||||
|
<a href="{{ site.author.keyUrl }}" class="u-key text-surface-500 dark:text-surface-400 hover:underline" rel="pgpkey">
|
||||||
|
🔐 PGP Key
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{# Categories / Skills #}
|
||||||
|
{% if site.author.categories and site.author.categories.length %}
|
||||||
|
<div class="mt-3 flex flex-wrap gap-1">
|
||||||
|
{% for category in site.author.categories %}
|
||||||
|
<span class="p-category text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-800 rounded">{{ category }}</span>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{# Social Feed Widget - Tabbed Bluesky/Mastodon #}
|
{# Social Feed Widget - Tabbed Bluesky/Mastodon #}
|
||||||
|
|||||||
Reference in New Issue
Block a user