Skip to content

encoreshao/github-trending

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

GitHub Trending - Discover the Most Popular Repositories

A modern, Apple-inspired web application for discovering and analyzing trending GitHub repositories. Features a beautiful homepage, subscription system, and live demo with comprehensive repository analysis tools.

Languages / 语言: English | δΈ­ζ–‡


✨ Features

🏠 Modern Website Experience

  • Apple-Style Design: Clean, professional interface with smooth animations
  • Homepage: Compelling landing page with feature highlights and call-to-actions
  • Subscription System: Category-based subscription with 18+ technology categories
  • Live Demo: Interactive demonstration of the trending repository analysis tool
  • Responsive Design: Optimized for desktop, tablet, and mobile devices

πŸ” Repository Analysis Tool

  • Real-time Data: Fetch trending repositories with live GitHub API integration
  • Dual View Modes: Table view for detailed data and Card view for visual browsing
  • Smart Filtering: Advanced filtering by categories, keywords, and attributes
  • Export Capabilities: Export data as CSV, JSON, or copy to clipboard
  • Customizable Fields: Select from 20+ repository attributes to display
  • Bilingual Support: Full English and Chinese language support

πŸ“Š CLI Script (Legacy)

  • Automated Fetching: Fetches top 20 trending GitHub repositories
  • Multiple Output Formats: Saves data as Markdown, JSON, and CSV files
  • Cron Automation: Can be automated via cron for daily data collection

πŸš€ Quick Start

Modern Web Application

  1. Install dependencies

    npm install
  2. Start the development server

    npm run dev
  3. Explore the website

    • Homepage: Visit http://localhost:5173 for the landing page
    • Subscribe: Navigate to /subscribe to choose your technology categories
    • Live Demo: Visit /demo to try the repository analysis tool
  4. Get a GitHub Token (for demo functionality)


🌐 Website Structure

πŸ“„ Pages

  • / - Homepage: Landing page with feature highlights and navigation
  • /subscribe - Subscription: Category selection for personalized updates
  • /demo - Live Demo: Interactive repository analysis tool

🎨 Design System

  • Apple-Inspired UI: Clean typography, subtle animations, and professional color scheme
  • Consistent Button Style: Transparent backgrounds with blue borders and hover effects
  • Responsive Layout: Optimized for all screen sizes
  • Modern Icons: Ant Design icon library with semantic meaning

πŸ”§ Technology Stack

  • React 18 with Vite for fast development
  • React Router for client-side navigation
  • Ant Design 5 for UI components
  • CSS Modules for scoped styling
  • GitHub API for real-time repository data

Build for Production

npm run build

Node.js CLI Script

  1. Set up your environment

    • Create a .env file in the project root:
      GITHUB_TOKEN=your_github_token
  2. Run the script

    node index.js
    • Trending data will be saved in the docs/ directory as Markdown, JSON, and CSV files
  3. Automate with cron (Optional)

    # Add to crontab for daily execution at 9 AM
    0 9 * * * cd /path/to/github-trending && node index.js

πŸ›  Tech Stack

Web Application

  • Frontend: React 18, Ant Design 5, Vite
  • Styling: CSS3 with modern grid layouts and responsive design
  • Data Processing: axios, file-saver, papaparse, react-copy-to-clipboard
  • Build Tool: Vite for fast development and optimized production builds

Node.js Script

  • Runtime: Node.js
  • HTTP Client: axios
  • File System: fs-extra
  • Data Processing: json2csv
  • Environment: dotenv

πŸ“ Project Structure

github-trending/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ AttributeSelector.jsx    # Field selection component
β”‚   β”‚   β”œβ”€β”€ RepoCardView.jsx         # Card view component
β”‚   β”‚   β”œβ”€β”€ RepoTable.jsx            # Table view component
β”‚   β”‚   β”œβ”€β”€ SettingsPanel.jsx       # Settings panel
β”‚   β”‚   └── TokenInput.jsx           # Token input component
β”‚   β”œβ”€β”€ api/
β”‚   β”‚   └── github.js               # GitHub API integration
β”‚   β”œβ”€β”€ App.jsx                     # Main application component
β”‚   β”œβ”€β”€ App.css                     # Application styles
β”‚   └── main.jsx                    # Application entry point
β”œβ”€β”€ docs/                           # Output directory for CLI script
β”œβ”€β”€ index.js                        # Node.js CLI script
β”œβ”€β”€ package.json                    # Dependencies and scripts
└── README.md                       # This file

🎯 Usage Guide

Web Application Features

  1. Settings Panel (Left Sidebar)

    • GitHub Token: Enter your personal access token
    • Field Selection: Choose which repository attributes to display
    • Page Size: Set number of repositories per page (1-100)
    • Category Filter: Filter by specific keywords or categories
    • Language: Switch between English and δΈ­ζ–‡
  2. Data Display (Main Area)

    • View Modes: Toggle between Table and Card views
    • Table View: Detailed tabular data with sortable columns
    • Card View: Visual cards with repository information
    • Export Options: CSV, JSON, or copy to clipboard
  3. Available Fields

    • Repository name, stars, owner, avatar
    • Description, topics, URLs (HTML, Git, SSH, Clone, SVN)
    • Creation/update/push dates
    • Size, language, forks, issues, license
    • Default branch and homepage

Node.js Script Output

The CLI script generates three types of files in the docs/ directory:

  1. Markdown Files (YYYY-MM-DD.md and YYYY-MM-DD-table.md)

    • Detailed repository information
    • Table format for easy reading
    • Includes all metadata
  2. JSON File (YYYY-MM-DD.json)

    • Structured data for programmatic use
    • Selected fields only for efficiency
  3. CSV File (YYYY-MM-DD.csv)

    • Spreadsheet-compatible format
    • All repository fields included

βš™οΈ Configuration

Web Application

  • Settings are automatically saved in browser localStorage
  • Token is stored securely (not transmitted to external servers)
  • Field selections persist between sessions

Node.js Script

  • Configure via .env file
  • Modify index.js to change output formats or fields
  • Adjust date range by modifying getLastWeekDate() function

πŸ”§ Customization

Adding New Fields

  1. Web Application: Edit src/components/AttributeSelector.jsx
  2. Node.js Script: Modify the fields array in saveReposToCsv()

Styling Changes

  • Web Application: Modify src/App.css for custom styling
  • Card Layout: Adjust grid settings in .grid class
  • Colors: Update CSS custom properties

API Modifications

  • Web Application: Extend src/api/github.js for additional GitHub API endpoints
  • Node.js Script: Modify the search query in fetchTrendingRepos()

πŸ“‹ Requirements

  • Node.js: Version 16 or higher
  • GitHub Token: Personal Access Token with public_repo scope
  • Browser: Modern browser with ES6+ support

πŸ› Troubleshooting

Common Issues

  1. Rate Limit Exceeded

    • Ensure you have a valid GitHub token
    • Check token permissions include public_repo scope
  2. No Data Returned

    • Verify your token is correct
    • Check network connectivity
    • Ensure repositories exist for the date range
  3. Build Errors

    • Clear node_modules and reinstall: rm -rf node_modules && npm install
    • Check Node.js version compatibility

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature-name
  3. Make your changes
  4. Commit your changes: git commit -m 'Add feature'
  5. Push to the branch: git push origin feature-name
  6. Submit a pull request

πŸ“„ License

This project is available as open source under the terms of the MIT License.


πŸ”— Links

About

GitHub Weekly Trending Repositories

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published