indiekit-blog/_includes/layouts/home.njk

---
layout: layouts/base.njk
withSidebar: true
---

{# Homepage content — two-tier fallback: #}
{# 1. Plugin config (homepageConfig) — homepage builder controls everything #}
{# 2. Default — show recent posts with default hero #}

{# Default hero — only shown for Tier 2 (plugin controls its own hero) #}
{% if not (homepageConfig and homepageConfig.sections) %}
<section class="mb-8 sm:mb-12">
  <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
    {# Avatar #}
    <img
      src="{{ site.author.avatar }}"
      alt="{{ site.author.name }}"
      width="96"
      height="96"
      class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
      loading="eager"
    >

    {# Introduction #}
    <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">
        {{ site.author.name }}
      </h1>
      <p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
        {{ site.author.title }}
      </p>
      {% if site.author.bio %}
      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
        {{ site.author.bio }}
      </p>
      {% endif %}
      {% if site.description %}
      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
        {{ site.description }}
        <a href="/about/" class="text-accent-600 dark:text-accent-400 hover:underline font-medium">Read more &rarr;</a>
      </p>
      {% endif %}

      {# Social Links #}
      {% from "components/social-icon.njk" import socialIcon, socialIconColorClass %}
      <div class="flex flex-wrap gap-3">
        {% for link in site.social %}
        <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"
        >
          <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>
    </div>
  </div>
</section>
{% endif %}

{# --- Tier 1: Plugin-driven layout --- #}
{% if homepageConfig and homepageConfig.sections %}
  {% include "components/homepage-builder.njk" %}

{# --- Tier 2: Default — recent posts and explore links --- #}
{% else %}

{# Recent Posts #}
{% if collections.posts and collections.posts.length %}
<section class="mb-8 sm:mb-12">
  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Recent Posts</h2>
  <ul class="post-list">
    {% for post in collections.posts | head(10) %}
      {% set likedUrl = post.data.likeOf or post.data.like_of %}
      {% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
      {% set repostedUrl = post.data.repostOf or post.data.repost_of %}
      {% set replyToUrl = post.data.inReplyTo or post.data.in_reply_to %}

      {% set borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
      {% if likedUrl %}
        {% set borderClass = "border-l-[3px] border-l-red-400 dark:border-l-red-500" %}
      {% elif bookmarkedUrl %}
        {% set borderClass = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
      {% elif repostedUrl %}
        {% set borderClass = "border-l-[3px] border-l-green-400 dark:border-l-green-500" %}
      {% elif replyToUrl %}
        {% set borderClass = "border-l-[3px] border-l-sky-400 dark:border-l-sky-500" %}
      {% endif %}

      {% set postTitle = ((post.data.title or post.data.name or "") | trim) %}
      <li class="h-entry post-card {{ borderClass }}">
        {% if postTitle %}
        <h3 class="text-xl font-semibold mb-1">
          <a href="{{ post.url }}" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
            {{ postTitle }}
          </a>
        </h3>
        {% endif %}

        {% if post.data.summary %}
        <p class="p-summary text-surface-700 dark:text-surface-300 mt-2 mb-2">
          {{ post.data.summary }}
        </p>
        {% endif %}

        <div class="post-meta">
          <time class="dt-published font-mono text-sm" datetime="{{ post.data.published or post.date }}">
            {{ (post.data.published or post.date) | date("MMM d, yyyy") }}
          </time>
          {% if postTitle %}
          <a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Read more &rarr;</a>
          {% else %}
          <a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Permalink</a>
          {% endif %}
        </div>
      </li>
    {% endfor %}
  </ul>
  <a href="/blog/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
    View all posts
    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
  </a>
</section>
{% endif %}

{# Explore — quick links to key sections #}
<section class="mb-8 sm:mb-12">
  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Explore</h2>
  <div class="grid gap-3 sm:grid-cols-3">
    <a href="/blog/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center shadow-sm">
      <div class="text-2xl mb-2">
        <svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
        </svg>
      </div>
      <span class="font-semibold text-surface-900 dark:text-surface-100">Blog</span>
      <p class="text-sm text-surface-600 dark:text-surface-400 mt-1">Articles, notes, and photos</p>
    </a>
    <a href="/cv/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center shadow-sm">
      <div class="text-2xl mb-2">
        <svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
        </svg>
      </div>
      <span class="font-semibold text-surface-900 dark:text-surface-100">CV</span>
      <p class="text-sm text-surface-600 dark:text-surface-400 mt-1">Experience and projects</p>
    </a>
    <a href="/about/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center shadow-sm">
      <div class="text-2xl mb-2">
        <svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
        </svg>
      </div>
      <span class="font-semibold text-surface-900 dark:text-surface-100">About</span>
      <p class="text-sm text-surface-600 dark:text-surface-400 mt-1">Who I am and what I do</p>
    </a>
  </div>
</section>

{# Posting Activity — contribution graph (Tier 2 default only) #}
{% if collections.posts and collections.posts.length %}
<section class="mb-8 sm:mb-12">
  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Posting Activity</h2>
  {% postGraph collections.posts %}
  <a href="/graph/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
    View full history
    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
    </svg>
  </a>
</section>
{% endif %}

{% endif %} {# end two-tier fallback #}