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 %}

{# 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"
    >
    <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-primary-600 dark:text-primary-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 %}
      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
        {{ authorDescription }}
      </p>
      {% endif %}
      {% from "components/social-icon.njk" import socialIcon %}
      {% 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 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
          target="_blank"
        >
          {{ socialIcon(link.icon, "w-5 h-5") }}
          <span class="text-sm font-medium">{{ link.name }}</span>
        </a>
        {% endfor %}
      </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-500 text-center mt-8">
  Last updated: {{ cv.lastUpdated | date("PPP") }}
</p>
{% endif %}

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