302 lines
15 KiB
Plaintext
302 lines
15 KiB
Plaintext
{# Gitea Activity Widget - Tabbed Commits/Repos/Featured/PRs #}
|
|
<is-land on:visible>
|
|
{% set ghFallbackCommits = githubActivity.commits if githubActivity and githubActivity.commits else [] %}
|
|
{% set ghFallbackFeatured = githubActivity.featured if githubActivity and githubActivity.featured else [] %}
|
|
{% set ghFallbackContributions = githubActivity.contributions if githubActivity and githubActivity.contributions else [] %}
|
|
{% set ghFallbackRepos = githubRepos if githubRepos else [] %}
|
|
{% set giteaProfileUrl = site.gitea.url + "/" + site.gitea.org %}
|
|
<div class="widget" x-data="giteaWidget('{{ site.gitea.url }}', '{{ site.gitea.org }}', '{{ site.gitea.repos | join(",") }}')" x-init="init()">
|
|
<h3 class="widget-title flex items-center gap-2">
|
|
{% include "components/icons/gitea.svg" %}
|
|
Gitea
|
|
</h3>
|
|
|
|
{# Tab buttons — order: Commits, Repos, Featured, PRs #}
|
|
<div class="flex gap-1 mb-4 border-b border-surface-200 dark:border-surface-700" role="tablist" aria-label="Gitea activity">
|
|
<button
|
|
@click="activeTab = 'commits'"
|
|
:class="activeTab === 'commits' ? 'border-b-2 border-accent-500 text-accent-700 dark:text-accent-300' : 'text-surface-600 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-300'"
|
|
:aria-selected="(activeTab === 'commits').toString()"
|
|
role="tab" id="gh-tab-commits" aria-controls="gh-panel-commits"
|
|
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
|
|
>
|
|
Commits
|
|
</button>
|
|
<button
|
|
@click="activeTab = 'repos'"
|
|
:class="activeTab === 'repos' ? 'border-b-2 border-accent-500 text-accent-700 dark:text-accent-300' : 'text-surface-600 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-300'"
|
|
:aria-selected="(activeTab === 'repos').toString()"
|
|
role="tab" id="gh-tab-repos" aria-controls="gh-panel-repos"
|
|
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
|
|
>
|
|
Repos
|
|
</button>
|
|
<button
|
|
@click="activeTab = 'featured'"
|
|
:class="activeTab === 'featured' ? 'border-b-2 border-accent-500 text-accent-700 dark:text-accent-300' : 'text-surface-600 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-300'"
|
|
:aria-selected="(activeTab === 'featured').toString()"
|
|
role="tab" id="gh-tab-featured" aria-controls="gh-panel-featured"
|
|
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
|
|
>
|
|
Featured
|
|
</button>
|
|
<button
|
|
@click="activeTab = 'prs'"
|
|
:class="activeTab === 'prs' ? 'border-b-2 border-accent-500 text-accent-700 dark:text-accent-300' : 'text-surface-600 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-300'"
|
|
:aria-selected="(activeTab === 'prs').toString()"
|
|
role="tab" id="gh-tab-prs" aria-controls="gh-panel-prs"
|
|
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
|
|
>
|
|
PRs
|
|
</button>
|
|
</div>
|
|
|
|
{# Tab content — fixed height container to prevent layout shift #}
|
|
<div class="h-[420px] overflow-y-auto">
|
|
|
|
{# Loading state #}
|
|
<div x-show="loading" class="text-sm text-surface-600 dark:text-surface-400 py-4 text-center" role="status" aria-live="polite">
|
|
Loading...
|
|
</div>
|
|
|
|
{# Commits Tab #}
|
|
<div x-show="activeTab === 'commits' && !loading" x-cloak role="tabpanel" id="gh-panel-commits" aria-labelledby="gh-tab-commits">
|
|
<ul x-show="commits.length > 0" class="space-y-3">
|
|
<template x-for="commit in commits.slice(0, 5)" :key="commit.sha">
|
|
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
|
|
<a :href="commit.url" target="_blank" rel="noopener" class="block group">
|
|
<p class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-surface-900 dark:group-hover:text-surface-100 transition-colors line-clamp-2" x-text="commit.message"></p>
|
|
<div class="flex items-center gap-2 mt-1.5 text-xs text-surface-600 dark:text-surface-400">
|
|
<code class="text-xs font-mono bg-surface-100 dark:bg-surface-800 px-1 py-0.5 rounded" x-text="commit.sha"></code>
|
|
<span class="truncate" x-text="commit.repo?.split('/')[1] || commit.repo"></span>
|
|
<span class="font-mono" x-text="formatDate(commit.date)"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
<div x-show="commits.length === 0" class="text-sm text-surface-600 dark:text-surface-400 py-2">No recent commits.</div>
|
|
</div>
|
|
|
|
{# Repos Tab #}
|
|
<div x-show="activeTab === 'repos' && !loading" x-cloak role="tabpanel" id="gh-panel-repos" aria-labelledby="gh-tab-repos">
|
|
<ul x-show="repos.length > 0" class="space-y-3">
|
|
<template x-for="repo in repos.slice(0, 5)" :key="repo.name">
|
|
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
|
|
<a :href="repo.html_url" target="_blank" rel="noopener" class="block group">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-medium text-sm text-surface-700 dark:text-surface-300 group-hover:underline truncate" x-text="repo.name"></span>
|
|
<span x-show="repo.language" class="text-xs px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 flex-shrink-0" x-text="repo.language"></span>
|
|
</div>
|
|
<p x-show="repo.description" class="text-xs text-surface-600 dark:text-surface-400 mt-1 line-clamp-2" x-text="repo.description"></p>
|
|
<div class="flex items-center gap-3 mt-1.5 text-xs text-surface-600 dark:text-surface-400">
|
|
<span x-show="repo.stargazers_count > 0" class="flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
|
<span x-text="repo.stargazers_count"></span>
|
|
</span>
|
|
<span class="font-mono" x-text="formatDate(repo.updated_at)"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
<div x-show="repos.length === 0" class="text-sm text-surface-600 dark:text-surface-400 py-2">No repositories found.</div>
|
|
</div>
|
|
|
|
{# Featured Tab #}
|
|
<div x-show="activeTab === 'featured' && !loading" x-cloak role="tabpanel" id="gh-panel-featured" aria-labelledby="gh-tab-featured">
|
|
<ul x-show="featured.length > 0" class="space-y-3">
|
|
<template x-for="repo in featured.slice(0, 5)" :key="repo.fullName || repo.name">
|
|
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
|
|
<a :href="repo.url" target="_blank" rel="noopener" class="block group">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-medium text-sm text-surface-700 dark:text-surface-300 group-hover:underline truncate" x-text="repo.name"></span>
|
|
<span x-show="repo.language" class="text-xs px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 flex-shrink-0" x-text="repo.language"></span>
|
|
</div>
|
|
<p x-show="repo.description" class="text-xs text-surface-600 dark:text-surface-400 mt-1 line-clamp-2" x-text="repo.description"></p>
|
|
<div class="flex items-center gap-3 mt-1.5 text-xs text-surface-600 dark:text-surface-400">
|
|
<span x-show="repo.stars > 0" class="flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
|
<span x-text="repo.stars"></span>
|
|
</span>
|
|
<span x-show="repo.forks > 0" class="flex items-center gap-1">
|
|
<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="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"/></svg>
|
|
<span x-text="repo.forks"></span>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
<div x-show="featured.length === 0" class="text-sm text-surface-600 dark:text-surface-400 py-2">No featured projects.</div>
|
|
</div>
|
|
|
|
{# PRs Tab #}
|
|
<div x-show="activeTab === 'prs' && !loading" x-cloak role="tabpanel" id="gh-panel-prs" aria-labelledby="gh-tab-prs">
|
|
<ul x-show="contributions.length > 0" class="space-y-3">
|
|
<template x-for="item in contributions.slice(0, 5)" :key="item.url">
|
|
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
|
|
<a :href="item.url" target="_blank" rel="noopener" class="block group">
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
class="flex-shrink-0 w-4 h-4 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400"
|
|
>
|
|
<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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
|
</span>
|
|
<span class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-surface-900 dark:group-hover:text-surface-100 transition-colors truncate" x-text="item.title"></span>
|
|
</div>
|
|
<div class="flex items-center gap-2 mt-1.5 text-xs text-surface-600 dark:text-surface-400 pl-6">
|
|
<span x-text="item.repo?.split('/')[1] || item.repo"></span>
|
|
<span x-show="item.number" x-text="'#' + item.number"></span>
|
|
<span class="font-mono" x-text="formatDate(item.date)"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
<div x-show="contributions.length === 0" class="text-sm text-surface-600 dark:text-surface-400 py-2">No recent PRs.</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{# Footer link — hidden for now
|
|
<a href="{{ giteaProfileUrl }}" target="_blank" rel="noopener" class="text-sm text-accent-700 dark:text-accent-300 hover:underline mt-3 inline-flex items-center gap-1">
|
|
View on Gitea
|
|
<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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
|
|
</a>
|
|
#}
|
|
</div>
|
|
|
|
<script>
|
|
const githubFallbackData = {
|
|
commits: {{ ghFallbackCommits | dump | safe }},
|
|
featured: {{ ghFallbackFeatured | dump | safe }},
|
|
contributions: {{ ghFallbackContributions | dump | safe }},
|
|
repos: {{ ghFallbackRepos | dump | safe }},
|
|
};
|
|
|
|
function giteaWidget(giteaUrl, giteaOrg, reposStr) {
|
|
const repoList = reposStr.split(',').filter(Boolean);
|
|
|
|
return {
|
|
activeTab: 'commits',
|
|
loading: true,
|
|
commits: [],
|
|
repos: [],
|
|
featured: [],
|
|
contributions: [],
|
|
|
|
async fetchJson(url) {
|
|
try {
|
|
const r = await fetch(url);
|
|
if (r.ok) return await r.json();
|
|
} catch {}
|
|
return null;
|
|
},
|
|
|
|
async init() {
|
|
this.commits = Array.isArray(githubFallbackData.commits) ? githubFallbackData.commits : [];
|
|
this.featured = Array.isArray(githubFallbackData.featured) ? githubFallbackData.featured : [];
|
|
this.contributions = Array.isArray(githubFallbackData.contributions) ? githubFallbackData.contributions : [];
|
|
this.repos = (githubFallbackData.repos || []).filter((r) => !r.fork && !r.private);
|
|
|
|
const hasFallbackData =
|
|
this.commits.length > 0 ||
|
|
this.featured.length > 0 ||
|
|
this.repos.length > 0;
|
|
|
|
this.loading = !hasFallbackData;
|
|
|
|
try {
|
|
// Fetch commits from all repos
|
|
const commitArrays = await Promise.all(
|
|
repoList.map((repo) =>
|
|
this.fetchJson(`${giteaUrl}/api/v1/repos/${giteaOrg}/${repo}/commits?limit=10`)
|
|
)
|
|
);
|
|
const allCommits = commitArrays.flatMap((commits, i) => {
|
|
if (!Array.isArray(commits)) return [];
|
|
return commits.map((c) => ({
|
|
sha: c.sha.slice(0, 7),
|
|
message: (c.commit?.message || '').split('\n')[0],
|
|
url: c.html_url,
|
|
repo: `${giteaOrg}/${repoList[i]}`,
|
|
date: c.created || c.commit?.author?.date,
|
|
}));
|
|
});
|
|
if (allCommits.length > 0) {
|
|
this.commits = allCommits
|
|
.sort((a, b) => new Date(b.date) - new Date(a.date))
|
|
.slice(0, 10);
|
|
}
|
|
|
|
// Fetch repos
|
|
const repos = await this.fetchJson(`${giteaUrl}/api/v1/orgs/${giteaOrg}/repos?limit=10&sort=newest`);
|
|
if (Array.isArray(repos)) {
|
|
const filtered = repos.filter((r) => !r.fork && !r.private);
|
|
this.repos = filtered.map((r) => ({
|
|
name: r.name,
|
|
full_name: r.full_name,
|
|
description: r.description,
|
|
html_url: r.html_url,
|
|
language: r.language,
|
|
stargazers_count: r.stars_count || r.stargazers_count || 0,
|
|
updated_at: r.updated,
|
|
}));
|
|
this.featured = filtered.slice(0, 5).map((r) => ({
|
|
fullName: r.full_name,
|
|
name: r.name,
|
|
description: r.description,
|
|
url: r.html_url,
|
|
stars: r.stars_count || r.stargazers_count || 0,
|
|
forks: r.forks_count || 0,
|
|
language: r.language,
|
|
}));
|
|
}
|
|
|
|
// Fetch PRs
|
|
const prArrays = await Promise.all(
|
|
repoList.map((repo) =>
|
|
this.fetchJson(`${giteaUrl}/api/v1/repos/${giteaOrg}/${repo}/pulls?state=closed&limit=5&type=pulls`)
|
|
)
|
|
);
|
|
const allPRs = prArrays.flatMap((prs, i) => {
|
|
if (!Array.isArray(prs)) return [];
|
|
return prs.map((pr) => ({
|
|
type: 'pr',
|
|
title: pr.title,
|
|
url: pr.html_url,
|
|
repo: `${giteaOrg}/${repoList[i]}`,
|
|
number: pr.number,
|
|
date: pr.merged_at || pr.closed_at || pr.created_at,
|
|
}));
|
|
});
|
|
if (allPRs.length > 0) {
|
|
this.contributions = allPRs
|
|
.sort((a, b) => new Date(b.date) - new Date(a.date))
|
|
.slice(0, 10);
|
|
}
|
|
} catch (err) {
|
|
console.error('Gitea widget error:', err);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
formatDate(dateStr) {
|
|
if (!dateStr) return '';
|
|
const d = new Date(dateStr);
|
|
const now = new Date();
|
|
const diffMs = now - d;
|
|
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
|
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
|
if (diffHours < 1) return 'just now';
|
|
if (diffHours < 24) return diffHours + 'h ago';
|
|
if (diffDays < 7) return diffDays + 'd ago';
|
|
return d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
</is-land>
|