mirror of
https://github.com/imjasonh/gitscrub
synced 2026-07-06 18:42:21 +00:00
No description
e8af117c1e
- Clear all state when path changes in FileViewerWithHistory - Reset versions array, currentIndex, and error state - Clear content cache to prevent showing wrong file content - Reset pagination state This fixes the issue where navigating to index.html (or any file) would sometimes show the history of the previously viewed file. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| docs | ||
| netlify/functions | ||
| public | ||
| scripts | ||
| src | ||
| tests | ||
| .env.example | ||
| .gitignore | ||
| CLAUDE.md | ||
| eslint.config.js | ||
| index.html | ||
| LICENSE | ||
| netlify.toml | ||
| package-lock.json | ||
| package.json | ||
| playwright.config.ts | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
GitScrub
A web application for exploring GitHub repository history with an intuitive timeline interface.
Features
- 🔍 Browse public GitHub repositories
- 📁 Navigate repository file structure
- 📜 View file history with timeline slider
- 🎯 Click anywhere on the timeline to jump to specific commits
- ⌨️ Use arrow keys for precise commit navigation
- 🔄 Load more commits for extensive history
- 🎨 Syntax highlighting and diff visualization
- 🔐 Secure authentication with GitHub OAuth
Getting Started
Prerequisites
- Node.js 18+
- npm or yarn
Installation
# Clone the repository
git clone https://github.com/imjasonh/gitscrub.git
cd gitscrub
# Install dependencies
npm install
# Start development server
npm run dev
Deployment
GitScrub is designed to be deployed on Netlify for the best user experience:
- See Netlify Deployment Guide for detailed instructions
- OAuth web flow authentication - no tokens to manage
- Users authenticate directly with GitHub
Local Development
For local development with OAuth support:
# Install Netlify CLI
npm install -g netlify-cli
# Create .env file with your GitHub OAuth App credentials
cp .env.example .env
# Edit .env and add your GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET
# Start development server with Netlify Functions
netlify dev
Running Tests
# Create .env.test with test configuration
echo "GITHUB_CLIENT_ID=your_test_client_id" > .env.test
# Run all tests
npm test
# Run tests with UI
npm run test:ui
Usage
- Navigate to a Repository: Enter a GitHub URL or use the example buttons
- Browse Files: Click on any file in the tree view
- Explore History:
- Use the timeline slider at the bottom
- Click anywhere on the timeline to jump to that point in time
- Use ← → arrow keys for precise navigation
- Toggle diff view to see changes between commits
Tech Stack
- Frontend: React, TypeScript, Vite
- Routing: React Router
- API: GitHub REST API v3
- Testing: Playwright
- Styling: CSS
Architecture
The app uses Netlify Functions for OAuth authentication and communicates directly with GitHub's API. Authentication is handled via GitHub's OAuth web flow for a seamless user experience.
Key components:
FileTree: Repository file browserFileViewerWithHistory: File content viewer with timelineHistorySlider: Interactive timeline for commit navigation
Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
This project is open source and available under the Apache License 2.0.