cb3c2115ae
Apply the collaboratively-written design system from .interface-design/system.md: - Domain color map: Social pages (rose), Code pages (emerald), Reading pages (orange), Music pages (purple) replace generic accent tokens - Font-mono on all <time> elements via global CSS rule + wrap 7 non-<time> dates - Shadow standardization: replace hover:shadow-lg with border-hover on news cards - Active states: scale(0.97) press feedback on buttons and pagination links - Gradient cleanup: remove to-white gradient on github featured project cards - CV Skills & Interests: cycle through 8 distinct colors per family category (amber, emerald, sky, rose, purple, orange, teal, indigo) on both CV page and homepage - Update system.md with refined palette documentation and domain color spec Files: 19 changed across templates, CSS, and design documentation Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
271 lines
13 KiB
Plaintext
271 lines
13 KiB
Plaintext
---
|
|
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-emerald-600 dark:text-emerald-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-emerald-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-surface-50 dark:bg-surface-800 rounded-xl border-2 border-surface-200 dark:border-surface-700 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-emerald-600 dark:hover:text-emerald-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-surface-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-surface-200 dark:border-surface-700 pt-3 mt-3 overflow-hidden">
|
|
<summary class="cursor-pointer text-sm font-medium text-surface-600 dark:text-surface-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-emerald-600 dark:text-emerald-400 hover:underline font-mono text-xs" 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-emerald-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-surface-50 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-emerald-600 dark:hover:text-emerald-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>
|
|
· <time datetime="{{ commit.date }}">{{ commit.date | date("MMM d, yyyy") }}</time>
|
|
</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-emerald-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-surface-50 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-emerald-100 dark:bg-emerald-900 text-emerald-800 dark:text-emerald-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-emerald-600 dark:hover:text-emerald-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 }}
|
|
· <time datetime="{{ item.date }}">{{ item.date | date("MMM d, yyyy") }}</time>
|
|
</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-surface-50 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-emerald-600 dark:hover:text-emerald-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-surface-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-emerald-600 dark:text-emerald-400 hover:underline">
|
|
View all repositories →
|
|
</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-emerald-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-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-600 transition-colors">
|
|
<h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
|
|
<a href="{{ repo.url }}" class="hover:text-emerald-600 dark:hover:text-emerald-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-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 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-surface-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>
|
|
|
|
<a href="/github/starred/" class="inline-block mt-4 text-emerald-600 dark:text-emerald-400 hover:underline">
|
|
View all {{ githubStarred.totalCount | default(githubActivity.stars | length) }} starred repos →
|
|
</a>
|
|
{% else %}
|
|
<p class="text-surface-600 dark:text-surface-400">No starred repositories found.</p>
|
|
{% endif %}
|
|
</section>
|
|
</div>
|