blog-eleventy-indiekit/github.njk

---
layout: layouts/base.njk
title: GitHub Activity
permalink: /github/
withSidebar: true
---
<div class="github-page">
  <header class="mb-6 sm:mb-8">
    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">GitHub Activity</h1>
    <p class="text-surface-600 dark:text-surface-400">
      My open source contributions and starred repositories.
      <a href="https://github.com/{{ site.feeds.github }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">
        Follow me on GitHub
      </a>
    </p>
  </header>

  {# Featured Projects Section #}
  {% if githubActivity.featured.length %}
  <section class="mb-12">
    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
      <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
      </svg>
      Featured Projects
    </h2>

    <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
      {% for repo in githubActivity.featured %}
      <article class="p-5 bg-gradient-to-br from-primary-50 to-white dark:from-surface-800 dark:to-surface-800 rounded-xl border-2 border-primary-200 dark:border-primary-800 shadow-sm">
        <div class="flex items-start justify-between mb-3">
          <h3 class="font-bold text-lg text-surface-900 dark:text-surface-100">
            <a href="{{ repo.url }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
              {{ repo.fullName }}
            </a>
          </h3>
          {% if repo.isPrivate %}
          <span class="text-xs px-2 py-0.5 bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-400 rounded">Private</span>
          {% endif %}
        </div>

        {% if repo.description %}
        <p class="text-sm text-surface-600 dark:text-surface-400 mb-4">{{ repo.description }}</p>
        {% endif %}

        <div class="flex flex-wrap items-center gap-3 text-sm text-surface-500 mb-4">
          {% if repo.language %}
          <span class="flex items-center gap-1">
            <span class="w-3 h-3 rounded-full bg-primary-500"></span>
            {{ repo.language }}
          </span>
          {% endif %}
          <span class="flex items-center gap-1">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
            </svg>
            {{ repo.stars }}
          </span>
          {% if repo.forks > 0 %}
          <span class="flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
            </svg>
            {{ repo.forks }}
          </span>
          {% endif %}
        </div>

        {% if repo.commits and repo.commits.length %}
        <details class="border-t border-primary-200 dark:border-surface-700 pt-3 mt-3 overflow-hidden">
          <summary class="cursor-pointer text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">
            Recent commits ({{ repo.commits.length }})
          </summary>
          <ul class="mt-3 space-y-2 overflow-hidden">
            {% for commit in repo.commits %}
            <li class="flex items-start gap-2 text-sm min-w-0">
              <code class="flex-shrink-0 text-xs font-mono bg-surface-100 dark:bg-surface-700 px-1.5 py-0.5 rounded">
                <a href="{{ commit.url }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">{{ commit.sha }}</a>
              </code>
              <span class="text-surface-700 dark:text-surface-300 truncate min-w-0 flex-1">{{ commit.message }}</span>
            </li>
            {% endfor %}
          </ul>
        </details>
        {% endif %}
      </article>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {# Recent Commits Section #}
  <section class="mb-12">
    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
      <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      Recent Commits
    </h2>

    {% if githubActivity.commits.length %}
    <div class="space-y-3">
      {% for commit in githubActivity.commits %}
      <div class="flex items-start gap-3 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
        <code class="text-xs font-mono bg-surface-100 dark:bg-surface-700 px-2 py-1 rounded">
          {{ commit.sha }}
        </code>
        <div class="flex-1 min-w-0">
          <a href="{{ commit.url }}" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
            {{ commit.message }}
          </a>
          <p class="text-xs text-surface-500 mt-1">
            <a href="{{ commit.repoUrl }}" class="hover:underline" target="_blank" rel="noopener">{{ commit.repo }}</a>
            · {{ commit.date | date("MMM d, yyyy") }}
          </p>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="text-surface-600 dark:text-surface-400">No recent commits found.</p>
    {% endif %}
  </section>

  {# Contributions Section (PRs & Issues) #}
  {% if githubActivity.contributions.length %}
  <section class="mb-12">
    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
      <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
      </svg>
      Pull Requests & Issues
    </h2>

    <div class="space-y-3">
      {% for item in githubActivity.contributions %}
      <div class="flex items-start gap-3 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
        {% if item.type == "pr" %}
        <span class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded">PR</span>
        {% else %}
        <span class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded">Issue</span>
        {% endif %}
        <div class="flex-1 min-w-0">
          <a href="{{ item.url }}" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
            {{ item.title }}
          </a>
          <p class="text-xs text-surface-500 mt-1">
            <a href="{{ item.repoUrl }}" class="hover:underline" target="_blank" rel="noopener">{{ item.repo }}</a>
            #{{ item.number }}
            · {{ item.date | date("MMM d, yyyy") }}
          </p>
        </div>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {# My Repositories Section #}
  <section class="mb-12">
    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
      </svg>
      My Repositories
    </h2>

    {% if githubRepos.length %}
    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
      {% for repo in githubRepos | head(6) %}
      <article class="p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
        <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
          <a href="{{ repo.html_url }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
            {{ repo.name }}
          </a>
        </h3>

        {% if repo.description %}
        <p class="text-sm text-surface-600 dark:text-surface-400 mb-3">{{ repo.description | truncate(100) }}</p>
        {% endif %}

        <div class="flex flex-wrap items-center gap-3 text-sm text-surface-500">
          {% if repo.language %}
          <span class="flex items-center gap-1">
            <span class="w-3 h-3 rounded-full bg-primary-500"></span>
            {{ repo.language }}
          </span>
          {% endif %}
          <span class="flex items-center gap-1">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
            </svg>
            {{ repo.stargazers_count }}
          </span>
          <span class="flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
            </svg>
            {{ repo.forks_count }}
          </span>
        </div>
      </article>
      {% endfor %}
    </div>

    <a href="https://github.com/{{ site.feeds.github }}?tab=repositories" class="inline-block mt-4 text-primary-600 dark:text-primary-400 hover:underline">
      View all repositories &rarr;
    </a>
    {% else %}
    <p class="text-surface-600 dark:text-surface-400">No repositories found.</p>
    {% endif %}
  </section>

  {# Starred Repos Section #}
  <section>
    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
      <svg class="w-6 h-6 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
      </svg>
      Starred Repositories
    </h2>

    {% if githubActivity.stars.length %}
    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
      {% for repo in githubActivity.stars | head(10) %}
      <article class="p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
        <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
          <a href="{{ repo.url }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
            {{ repo.name }}
          </a>
        </h3>

        {% if repo.description %}
        <p class="text-sm text-surface-600 dark:text-surface-400 mb-3">{{ repo.description }}</p>
        {% endif %}

        <div class="flex flex-wrap gap-2 mb-3">
          {% for topic in repo.topics %}
          <span class="text-xs px-2 py-0.5 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded">
            {{ topic }}
          </span>
          {% endfor %}
        </div>

        <div class="flex flex-wrap items-center gap-3 text-sm text-surface-500">
          {% if repo.language %}
          <span class="flex items-center gap-1">
            <span class="w-3 h-3 rounded-full bg-primary-500"></span>
            {{ repo.language }}
          </span>
          {% endif %}
          <span class="flex items-center gap-1">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
            </svg>
            {{ repo.stars }}
          </span>
        </div>
      </article>
      {% endfor %}
    </div>
    {% else %}
    <p class="text-surface-600 dark:text-surface-400">No starred repositories found.</p>
    {% endif %}
  </section>
</div>