blog-eleventy-indiekit/_includes/components/h-card.njk

{# h-card - Single source of truth for IndieWeb identity microformat #}
{# See: https://microformats.org/wiki/h-card #}
{#
   Usage:
   {% include "components/h-card.njk" %}                    {# defaults to full #}
   {% set hcardVariant = "full" %}{% include "components/h-card.njk" %}
   {% set hcardVariant = "compact" %}{% include "components/h-card.njk" %}
#}

{% set variant = hcardVariant | default("full") %}

<div class="h-card p-author" itemscope itemtype="http://schema.org/Person">
  {# Hidden u-photo for reliable microformat parsing (some parsers struggle with img inside links) #}
  <data class="u-photo hidden" value="{{ site.author.avatar }}"></data>

  {% if variant == "full" %}
  {# ===== FULL VARIANT - Homepage sidebar ===== #}
  <div class="flex items-center gap-4">
    <a href="{{ site.author.url }}" class="u-url u-uid" rel="me">
      <img
        src="{{ site.author.avatar }}"
        alt="{{ site.author.name }}"
        class="w-16 h-16 rounded-full object-cover"
        loading="lazy"
        itemprop="image"
      >
    </a>
    <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" itemprop="name">
        {{ site.author.name }}
      </a>
      {% if site.author.pronoun %}
      <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>
  {# 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 %}

  {% else %}
  {# ===== COMPACT VARIANT - Blog sidebar ===== #}
  <div class="flex items-center gap-3">
    <a href="{{ site.author.url }}" class="u-url u-uid" rel="me">
      <img
        src="{{ site.author.avatar }}"
        alt="{{ site.author.name }}"
        class="w-12 h-12 rounded-full object-cover"
        loading="lazy"
      >
    </a>
    <div>
      <a href="{{ site.author.url }}" class="u-url p-name font-medium text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">
        {{ site.author.name }}
      </a>
      <p class="p-job-title text-xs text-surface-500">{{ site.author.title }}</p>
      {% if site.author.locality %}
      <p class="text-xs text-surface-500">
        <span class="p-locality">{{ site.author.locality }}</span>{% if site.author.country %}, <span class="p-country-name">{{ site.author.country }}</span>{% endif %}
      </p>
      {% endif %}
    </div>
  </div>
  {# Hidden but present for microformat completeness #}
  <p class="p-note hidden">{{ site.author.bio }}</p>
  {% if site.author.email %}<data class="u-email hidden" value="{{ site.author.email }}"></data>{% endif %}
  {% if site.author.org %}<data class="p-org hidden" value="{{ site.author.org }}"></data>{% endif %}
  {% endif %}
</div>