SvelteKitで作るGitHubコントリビューター表示コンポーネント

[GitHub API] → [SvelteKit Server] → [Component] → [Browser]
     ↓              ↓                 ↓            ↓
コミット履歴    コントリビューター    アバター     ユーザー
   取得          情報加工           画像表示      操作

src/
├── routes/post/[slug]/
│   ├── +page.server.ts     # GitHub API呼び出し
│   └── +page.svelte        # ページ表示
├── components/Post/
│   └── GitHubContributors.svelte  # コンポーネント
├── lib/types/
│   └── github.ts           # 型定義
└── constants/
    └── index.ts            # 設定値

# .env.local
GITHUB_TOKEN=ghp_your_token_here

// src/lib/types/github.ts
export interface Contributor {
  login: string;
  id: number;
  avatar_url: string;
  html_url: string;
  contributions: number;
  last_commit_date: string;
}
 
export interface GitHubCommit {
  sha: string;
  commit: {
    author: {
      name: string;
      email: string;
      date: string;
    };
    message: string;
  };
  author: {
    login: string;
    id: number;
    avatar_url: string;
    html_url: string;
  } | null;
}

// src/routes/post/[slug]/+page.server.ts
import { GITHUB_TOKEN } from '$env/dynamic/private';
import type { Contributor, GitHubCommit } from '$lib/types/github';
 
export async function load({ params }) {
  const contributors = await fetchContributors(`content/blog/${params.slug}.md`);
 
  return {
    contributors,
  };
}
 
async function fetchContributors(filePath: string): Promise<Contributor[]> {
  // トークンがない場合はスキップ
  if (!GITHUB_TOKEN) {
    console.warn('GITHUB_TOKEN not set');
    return [];
  }
 
  try {
    // GitHub Commits API を呼び出し
    const url = `https://api.github.com/repos/your-username/your-repo/commits?path=${filePath}`;
    const response = await fetch(url, {
      headers: {
        Authorization: `Bearer ${GITHUB_TOKEN}`,
        Accept: 'application/vnd.github.v3+json',
      },
    });
 
    if (!response.ok) {
      throw new Error(`GitHub API error: ${response.status}`);
    }
 
    const commits: GitHubCommit[] = await response.json();
    return processContributors(commits);
  } catch (error) {
    console.error('Error fetching contributors:', error);
    return [];
  }
}
 
function processContributors(commits: GitHubCommit[]): Contributor[] {
  const contributorMap = new Map<string, Contributor>();
 
  commits.forEach((commit) => {
    if (!commit.author) return;
 
    const login = commit.author.login;
    if (contributorMap.has(login)) {
      contributorMap.get(login)!.contributions++;
    } else {
      contributorMap.set(login, {
        login: commit.author.login,
        id: commit.author.id,
        avatar_url: commit.author.avatar_url,
        html_url: commit.author.html_url,
        contributions: 1,
        last_commit_date: commit.commit.author.date,
      });
    }
  });
 
  return Array.from(contributorMap.values());
}

<!-- src/components/Post/GitHubContributors.svelte -->
<script lang="ts">
  import type { Contributor } from '$lib/types/github';
 
  export let contributors: Contributor[];
</script>
 
{#if contributors.length > 0}
  <div class="contributors">
    <h3>Authors & Editors</h3>
    <div class="contributors-list">
      {#each contributors as contributor}
        <a href={contributor.html_url} target="_blank" rel="noopener noreferrer">
          <img
            src={contributor.avatar_url}
            alt={contributor.login}
            title={`${contributor.login} (${contributor.contributions} contributions)`}
          />
        </a>
      {/each}
    </div>
  </div>
{/if}
 
<style>
  .contributors {
    margin-top: 2rem;
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
  }
 
  .contributors h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
 
  .contributors-list {
    display: flex;
    gap: 0.5rem;
  }
 
  .contributors-list img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
  }
 
  .contributors-list a:hover img {
    border-color: #3b82f6;
  }
</style>

<!-- src/routes/post/[slug]/+page.svelte -->
<script lang="ts">
  import GitHubContributors from '$components/Post/GitHubContributors.svelte';
 
  export let data;
</script>
 
<article>
  <!-- 記事内容 -->
  <div class="content">
    <!-- 記事本文 -->
  </div>
 
  <!-- コントリビューター表示 -->
  <GitHubContributors contributors={data.contributors} />
</article>

# 開発サーバー起動
npm run dev
 
# ブラウザで記事ページにアクセス
# http://localhost:5173/post/your-article-slug