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:
Ricardo
2026-01-30 14:59:40 +01:00
parent e993353db8
commit 2ffdb1fee2
+54 -6
View File
@@ -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 #}