Skip to main content

​
Overview

The Commit History viewer provides detailed insight into a repository’s recent activity. View commit messages, authors, timestamps, and comprehensive repository statistics in an elegant sliding panel.
The commit panel automatically fetches the 10 most recent commits when you select a repository from the explorer.

​
Opening the Commit Panel

The commit history panel appears when you click on any repository card:
App.jsx
const [selectedRepo, setSelectedRepo] = useState(null)

<RepoList
  onSelectRepo={r => setSelectedRepo(prev => prev?.id === r.id ? null : r)}
  selectedRepo={selectedRepo}
/>

{selectedRepo && (
  <CommitPanel
    repo={selectedRepo}
    username={user.login}
    getCommits={getCommits}
    onClose={() => setSelectedRepo(null)}
  />
)}
Click a repository card once to open commits, click again to close. The panel smoothly animates in with a fade-up effect.

​
Panel Structure

The commit panel consists of three main sections:
1

Header Section

Repository name, GitHub link, and close button
2

Commit List

Scrollable list of recent commits with author info
3

Repository Stats

Quick view of stars, forks, issues, size, and license

​
Panel Header

CommitPanel.jsx
<div className="panel-header">
  <div className="panel-title">
    <GitCommit size={16} style={{ color: 'var(--accent)' }} />
    <span>Commits recientes en <strong>{repo.name}</strong></span>
  </div>
  
  <div className="panel-actions">
    <a href={repo.html_url} target="_blank" rel="noreferrer">
      <ExternalLink size={14} /> Ver en GitHub
    </a>
    <button onClick={onClose}>
      <X size={16} />
    </button>
  </div>
</div>

​
Commit Display

Each commit is rendered as a clickable card linking to GitHub:
CommitPanel.jsx
{commits.map((c, i) => {
  const msg = c.commit.message.split('\n')[0]
  const sha = c.sha.slice(0, 7)
  const author = c.commit.author
  
  return (
    <a
      key={c.sha}
      href={c.html_url}
      target="_blank"
      rel="noreferrer"
      className="commit"
      style={{ animationDelay: `${i * 0.04}s` }}
    >
      <div className="commit-left">
        {c.author?.avatar_url && (
          <img src={c.author.avatar_url} className="avatar" alt="" />
        )}
        <div className="commit-info">
          <span className="message">{msg}</span>
          <span className="commit-meta">
            {author.name} · {timeAgo(author.date)}
          </span>
        </div>
      </div>
      <code className="sha">{sha}</code>
    </a>
  )
})}

​
Commit Information

Commit Message

First line of the commit message (truncated for multi-line commits)

Author Avatar

GitHub profile picture of the commit author

Author Name

Full name of the person who made the commit

Commit SHA

Short hash (first 7 characters) for commit identification

Timestamp

Human-readable time since commit (e.g., “hace 2d”)

Direct Link

Click any commit to view full details on GitHub

​
Time Formatting

Commit timestamps use relative time for better readability:
CommitPanel.jsx
function timeAgo(dateStr) {
  const diff = Date.now() - new Date(dateStr)
  const d = Math.floor(diff / 86400000)
  
  if (d === 0) return 'hoy'
  if (d === 1) return 'ayer'
  if (d < 30) return `hace ${d}d`
  
  const m = Math.floor(d / 30)
  if (m < 12) return `hace ${m}m`
  return `hace ${Math.floor(m / 12)}a`
}
  • hoy - Committed today
  • ayer - Committed yesterday
  • hace 5d - Committed 5 days ago
  • hace 3m - Committed 3 months ago
  • hace 2a - Committed 2 years ago

​
Repository Statistics

The panel footer displays key repository metrics:
CommitPanel.jsx
<div className="repo-stats">
  {repo.stargazers_count > 0 && (
    <span className="stat">⭐ {repo.stargazers_count.toLocaleString()}</span>
  )}
  {repo.forks_count > 0 && (
    <span className="stat">🍴 {repo.forks_count}</span>
  )}
  {repo.open_issues_count > 0 && (
    <span className="stat">🐛 {repo.open_issues_count} issues</span>
  )}
  {repo.language && (
    <span className="stat">📦 {repo.language}</span>
  )}
  {repo.size > 0 && (
    <span className="stat">💾 {(repo.size / 1024).toFixed(1)} MB</span>
  )}
  {repo.license?.spdx_id && (
    <span className="stat">📄 {repo.license.spdx_id}</span>
  )}
</div>

​
Available Statistics

Number of users who have starred the repository. Hidden if count is 0.
Number of times the repository has been forked. Hidden if count is 0.
Current count of open issues. Hidden if no open issues.
Main programming language used in the repository.
Total size of the repository in megabytes (converted from KB).
SPDX identifier for the repository license (e.g., MIT, Apache-2.0).

​
Loading States

While fetching commits, the panel shows skeleton loaders:
CommitPanel.jsx
{loading && (
  <div className="load-list">
    {[1,2,3,4,5].map(i => (
      <div key={i} className="skeleton sk-commit" />
    ))}
  </div>
)}
Skeleton loaders match the size and shape of actual commit cards for a smooth loading experience.

​
Error Handling

The panel gracefully handles API errors:
CommitPanel.jsx
const [error, setError] = useState(null)

useEffect(() => {
  if (!repo) return
  setLoading(true)
  setError(null)
  setCommits([])
  
  getCommits(username, repo.name)
    .then(data => { setCommits(data); setLoading(false) })
    .catch(e => { setError(e.message); setLoading(false) })
}, [repo, username])

{error && <div className="error">{error}</div>}
If commits fail to load due to rate limiting or permissions, an error message is displayed. Try adding a GitHub token for better access.

​
Empty States

For repositories with no accessible commits: 
{!loading && !error && commits.length === 0 && (
  <div className="empty">No hay commits disponibles</div>
)}

​
Animation Effects

Commits fade in sequentially for a polished experience: 
style={{ animationDelay: `${i * 0.04}s` }}
Each commit animates in 0.04 seconds after the previous one, creating a smooth cascading effect.

​
API Integration

Commits are fetched using GitHub’s REST API:
useGitHub.js
const getCommits = useCallback(
  (owner, repo, per_page = 10) =>
    request(`/repos/${owner}/${repo}/commits`, { per_page }),
  [request]
)
By default, only the 10 most recent commits are fetched to optimize performance and API usage.

​
Best Practices

1

Check Recent Activity

Review commit timestamps to gauge how actively maintained the repository is
2

Read Commit Messages

First-line messages give quick insight into recent changes and development focus
3

Click Through to GitHub

View full commit diffs and file changes by clicking any commit
4

Review Repository Stats

Use the footer metrics to assess repository size, issues, and licensing

​
Keyboard Navigation

Press ESC to close the commit panel, or click the X button in the header.

Repository Explorer

Browse and filter repositories to view commits

Language Analytics

Analyze programming languages used across repositories

Build docs developers (and LLMs) love

Get started for freeTalk to us