blog-eleventy-indiekit/_includes/components/cv-builder.njk

{#
  CV Page Builder - renders configured layout, sections, and sidebar
  from cvPageConfig (written by indiekit-endpoint-cv plugin)
#}

{% set layout = cvPageConfig.layout or "single-column" %}
{% set hasSidebar = cvPageConfig.sidebar and cvPageConfig.sidebar.length %}

{# CV identity — check cvPageConfig.identity first, fall back to site.author #}
{% set cvId = cvPageConfig.identity if (cvPageConfig and cvPageConfig.identity) else {} %}
{% set authorName = cvId.name or site.author.name %}
{% set authorAvatar = cvId.avatar or site.author.avatar %}
{% set authorTitle = cvId.title or site.author.title %}
{% set authorBio = cvId.bio or site.author.bio %}
{% set authorDescription = cvId.description or '' %}
{% set socialLinks = cvId.social if (cvId.social and cvId.social.length) else site.social %}
{% set cvLocality = cvId.locality or site.author.locality %}
{% set cvCountry = cvId.country or site.author.country %}
{% set cvOrg = cvId.org or site.author.org %}
{% set cvUrl = cvId.url or '' %}
{% set cvEmail = cvId.email or site.author.email %}
{% set cvKeyUrl = cvId.keyUrl or site.author.keyUrl %}

{# Hero — rendered at top when enabled (default: true) #}
{% if cvPageConfig.hero.enabled != false %}
<section class="mb-8 sm:mb-12">
  <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
    <img
      src="{{ authorAvatar }}"
      alt="{{ authorName }}"
      class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
      loading="eager"
      eleventy:ignore
    >
    <div class="flex-1 min-w-0">
      <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
        {{ authorName }}
      </h1>
      {% if authorTitle %}
      <p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
        {{ authorTitle }}
      </p>
      {% endif %}
      {% if authorBio %}
      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
        {{ authorBio }}
      </p>
      {% endif %}
      {% if authorDescription %}
      <details class="mb-4 sm:mb-6">
        <summary class="text-sm font-medium text-accent-600 dark:text-accent-400 cursor-pointer hover:underline list-none">
          More about me &darr;
        </summary>
        <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mt-3">
          {{ authorDescription }}
        </p>
      </details>
      {% endif %}
      {% from "components/social-icon.njk" import socialIcon, socialIconColorClass %}
      {% if cvPageConfig.hero.showSocial != false and socialLinks %}
      <div class="flex flex-wrap gap-3">
        {% for link in socialLinks %}
        <a
          href="{{ link.url }}"
          rel="{{ link.rel }} noopener"
          class="inline-flex items-center gap-2 px-3 py-2 text-sm text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
          target="_blank"
        >
          <span class="{{ socialIconColorClass(link.icon) }}">{{ socialIcon(link.icon, "w-5 h-5") }}</span>
          <span class="text-sm font-medium">{{ link.name }}</span>
        </a>
        {% endfor %}
      </div>
      {% endif %}
      {# Contact details — location, organization, website, email, PGP #}
      {% if cvLocality or cvCountry or cvOrg or cvUrl or cvEmail or cvKeyUrl %}
      <div class="flex flex-wrap gap-x-4 gap-y-1 mt-4 text-sm text-surface-600 dark:text-surface-400">
        {% if cvLocality or cvCountry %}
        <span>{% if cvLocality %}{{ cvLocality }}{% endif %}{% if cvLocality and cvCountry %}, {% endif %}{% if cvCountry %}{{ cvCountry }}{% endif %}</span>
        {% endif %}
        {% if cvOrg %}
        <span>{{ cvOrg }}</span>
        {% endif %}
        {% if cvUrl %}
        <span><a href="{{ cvUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">{{ cvUrl | replace("https://", "") | replace("http://", "") }}</a></span>
        {% endif %}
        {% if cvEmail %}
        <span><a href="mailto:{{ cvEmail }}" class="text-accent-600 dark:text-accent-400 hover:underline">{{ cvEmail }}</a></span>
        {% endif %}
        {% if cvKeyUrl %}
        <span><a href="{{ cvKeyUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">PGP Key</a></span>
        {% endif %}
      </div>
      {% endif %}
    </div>
  </div>
</section>
{% endif %}

{# Layout wrapper #}
{% if layout == "single-column" %}

  {# Single column — no sidebar, full width sections #}
  <div class="cv-sections">
    {% for section in cvPageConfig.sections %}
      {% include "components/homepage-section.njk" %}
    {% endfor %}
  </div>

{% elif layout == "two-column" and hasSidebar %}

  {# Two column — sections + sidebar #}
  <div class="layout-with-sidebar">
    <div class="main-content">
      <div class="cv-sections">
        {% for section in cvPageConfig.sections %}
          {% include "components/homepage-section.njk" %}
        {% endfor %}
      </div>
    </div>
    <aside class="sidebar" data-pagefind-ignore>
      {% include "components/cv-sidebar.njk" %}
    </aside>
  </div>

{% elif layout == "full-width-hero" %}

  {# Full width hero (already rendered above), then two-column below #}
  {% if hasSidebar %}
  <div class="layout-with-sidebar">
    <div class="main-content">
      <div class="cv-sections">
        {% for section in cvPageConfig.sections %}
          {% include "components/homepage-section.njk" %}
        {% endfor %}
      </div>
    </div>
    <aside class="sidebar" data-pagefind-ignore>
      {% include "components/cv-sidebar.njk" %}
    </aside>
  </div>
  {% else %}
  <div class="cv-sections">
    {% for section in cvPageConfig.sections %}
      {% include "components/homepage-section.njk" %}
    {% endfor %}
  </div>
  {% endif %}

{% else %}

  {# Fallback — two-column without sidebar, or unknown layout #}
  <div class="cv-sections">
    {% for section in cvPageConfig.sections %}
      {% include "components/homepage-section.njk" %}
    {% endfor %}
  </div>

{% endif %}

{# Last Updated #}
{% if cv.lastUpdated %}
<p class="text-sm text-surface-600 dark:text-surface-400 text-center mt-8">
  Last updated: <time class="font-mono text-sm" datetime="{{ cv.lastUpdated }}">{{ cv.lastUpdated | date("PPP") }}</time>
</p>
{% endif %}

{# Footer — rendered after the main layout, full width #}
{% include "components/cv-footer.njk" %}