夏明星

---
Tên: Xu hướng GitHub
mô tả: Hiển thị các xu hướng dự án phổ biến của GitHub và tạo bảng điều khiển trực quan. SỬ DỤNG KHI xu hướng github, dự án thịnh hành, kho lưu trữ nóng, dự án github phổ biến, tạo bảng điều khiển, tạo trang web.
phiên bản: 2.0.0
---

## Tùy chỉnh

**Trước khi thực hiện, hãy kiểm tra các tùy chỉnh của người dùng tại:**
`~/.claude/skills/CORE/USER/SKILLCUSTOMIZATIONS/GitHubTrends/`

Nếu thư mục này tồn tại, hãy tải và áp dụng bất kỳ PREFERENCES.md, cấu hình hoặc tài nguyên nào được tìm thấy ở đó. Những hành vi mặc định này ghi đè. Nếu thư mục không tồn tại, hãy tiếp tục với các cài đặt mặc định của kỹ năng.

#GitHubTrends - Xu hướng dự án GitHub phổ biến

**Nhanh chóng khám phá các dự án nguồn mở phổ biến nhất trên GitHub. **

---

## Triết lý

Xu hướng GitHub là cách tốt nhất để khám phá các dự án nguồn mở chất lượng cao. Kỹ năng này cho phép tôi nhanh chóng có được danh sách các dự án phổ biến nhất hiện nay, lọc theo khoảng thời gian (hàng ngày/hàng tuần) và ngôn ngữ lập trình, đồng thời giúp khám phá các dự án đáng học hỏi và đóng góp.

---

## Bắt đầu nhanh

```bash
# 查看本周最热门的项目（默认）
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly

# 查看今日最热门的项目
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts daily

# 按语言筛选
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly --language=TypeScript
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly --language=Python

# 指定显示数量
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly --limit=20
```

---

## Khi nào nên sử dụng kỹ năng này

**Kích hoạt cốt lõi - Sử dụng kỹ năng này khi người dùng nói:**

### Yêu cầu trực tiếp
- "hiển thị xu hướng github" hoặc "xu hướng github"
- "Hiển thị các mục phổ biến" hoặc "Xem những gì phổ biến"
- "những gì đang có xu hướng trên github" hoặc "các dự án hot của github"
- "xu hướng hàng tuần" hoặc "xu hướng hàng tuần"
- “Hàng hot hôm nay” hoặc “trend hàng ngày”

### Yêu cầu khám phá
- "khám phá các dự án phổ biến" hoặc "khám phá các dự án phổ biến"
- "hiển thị các kho lưu trữ theo xu hướng" hoặc "hiển thị các kho lưu trữ theo xu hướng"
- "có gì hấp dẫn trên github" hoặc "có gì hấp dẫn trên github"
- "tìm dự án tốt" hoặc "tìm dự án tốt"

### Ngôn ngữ cụ thể
- "Dự án xu hướng TypeScript" hoặc "Dự án xu hướng TypeScript"
- "Python xu hướng" hoặc "Dự án Python hot"
- "hiển thị các dự án Rust đang thịnh hành" hoặc "hiển thị các dự án Rust đang thịnh hành"
- "Các dự án phổ biến về ngôn ngữ Go" hoặc "các dự án Go thịnh hành"

### Bảng điều khiển & Trực quan hóa
- "Tạo bảng điều khiển xu hướng GitHub" hoặc "tạo bảng điều khiển xu hướng"
- "tạo trang web thịnh hành" hoặc "tạo trang web thịnh hành"
- "tạo báo cáo tương tác" hoặc "tạo báo cáo tương tác"
- "xuất bảng thông tin xu hướng" hoặc "bảng thông tin xu hướng xuất"
- "hình dung xu hướng GitHub" hoặc "hình dung xu hướng github"

---

## Năng lực cốt lõi

### Nhận danh sách xu hướng
- **Xu hướng hàng ngày** - các mặt hàng phổ biến nhất trong 24 giờ qua
- **Xu hướng hàng tuần** - Các mặt hàng phổ biến nhất trong 7 ngày qua (mặc định)
- **Bộ lọc ngôn ngữ** - Lọc theo ngôn ngữ lập trình (TypeScript, Python, Go, Rust, v.v.)
- **Số lượng tùy chỉnh** - Chỉ định số lượng mặt hàng được trả lại (mặc định là 10)

### Tạo bảng điều khiển trực quan 🆕
- **HTML tương tác** - Tạo trang tổng quan web tương tác
- **Trực quan hóa dữ liệu** - Biểu đồ hình tròn phân phối ngôn ngữ, biểu đồ thanh tăng trưởng Số sao
- **Tin tức kỹ thuật** - Thông tin kỹ thuật tích hợp của Hacker News
- **Lọc theo thời gian thực** - Chức năng lọc, sắp xếp và tìm kiếm theo ngôn ngữ
- **Thiết kế đáp ứng** - Hỗ trợ máy tính để bàn, máy tính bảng và điện thoại di động

###Thông tin dự án
- Tên dự án và mô tả
- Số sao và những thay đổi
-ngôn ngữ lập trình
- URL dự án

---

## Cách sử dụng công cụ

### GetTrending.ts

**Vị trí:** `Tools/GetTrending.ts`

**Tính năng:** Nhận danh sách dự án thịnh hành từ GitHub

**tham số:**
- `period` - Khoảng thời gian: `daily` hoặc `weekly` (mặc định: hàng tuần)
- `--language` - Bộ lọc ngôn ngữ lập trình (tùy chọn)
- `--limit` - trả về số mục (mặc định: 10)

**Ví dụ sử dụng:**
```bash
# 基本用法
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly

# 带参数
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly --language=TypeScript --limit=15

# 简写
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts daily -l=Python
```

**Phương pháp thực hiện:**
Sử dụng trang xu hướng GitHub chính thức: https://github.com/trending
Đọc nội dung trang và phân tích thông qua API tìm nạp

---

### TạoDashboard.ts 🆕

**Vị trí:** `Tools/GenerateDashboard.ts`

**Chức năng:** Tạo các tệp HTML bảng điều khiển trực quan hóa dữ liệu tương tác

**tham số:**
- `--period` - Khoảng thời gian: `daily` hoặc `weekly` (mặc định: hàng tuần)
- `--language` - Bộ lọc ngôn ngữ lập trình (tùy chọn)
- `--limit` - trả về số mục (mặc định: 10)
- `--include-news` - chứa tin tức kỹ thuật
- `--news-count` - Số lượng tin tức (mặc định: 10)
- `--output` - đường dẫn tệp đầu ra (mặc định: ./github-trends.html)

**Ví dụ sử dụng:**
```bash
# 基本用法 - 生成本周仪表板
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts

# 包含技术新闻
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts --include-news

# TypeScript 项目每日仪表板
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts \
  --period daily \
  --language TypeScript \
  --limit 20 \
  --include-news \
  --output ~/ts-daily.html
```

**Phương pháp thực hiện:**
- Nhận dữ liệu dự án theo xu hướng GitHub
- Nhận tin tức công nghệ Hacker News
- Kết xuất HTML bằng công cụ mẫu Tay cầm
- Tích hợp CSS Tailwind và Chart.js
- Tạo các file HTML hoàn toàn độc lập (tải các phụ thuộc thông qua CDN)

---

## Định dạng đầu ra

```markdown
# GitHub Trending Projects - Weekly (2025-01-19)

## 1. vercel/next.js - ⭐ 125,342 (+1,234 this week)
**Language:** TypeScript
**Description:** The React Framework for the Web
**URL:** https://github.com/vercel/next.js

## 2. microsoft/vscode - ⭐ 160,890 (+987 this week)
**Language:** TypeScript
**Description:** Visual Studio Code
**URL:** https://github.com/microsoft/vscode

...

---
📊 Total: 10 projects | Language: All | Period: Weekly
```

---

## Ngôn ngữ được hỗ trợ

Bộ lọc ngôn ngữ lập trình phổ biến:
- **TypeScript** - Công cụ TypeScript
- **JavaScript** - Dự án JavaScript
- **Python** - Dự án Python
- **Go** - Dự án ngôn ngữ Go
- **Rust** - Dự án Rust
- **Java** - Dự án Java
- **C++** - Dự án C++
- **Ruby** - Dự án Ruby
- **Swift** - Dự án Swift
- **Kotlin** - Dự án Kotlin

---

## Tích hợp quy trình làm việc

Kỹ năng này có thể được gọi bằng các kỹ năng khác:
- **OSINT** - Khám phá các công cụ phổ biến trong khi điều tra ngăn xếp công nghệ của bạn
- **Nghiên cứu** - Xu hướng nghiên cứu trong hệ sinh thái ngôn ngữ cụ thể
- **Hệ thống** - Khám phá các dự án hữu ích liên quan đến PAI

---

## Ghi chú kỹ thuật

**Nguồn dữ liệu:** Trang xu hướng chính thức của GitHub
**Tần suất cập nhật:** Cập nhật mỗi giờ một lần
**Không cần xác thực:** Sử dụng các trang công khai, không cần mã thông báo API GitHub
**Phương pháp phân tích cú pháp:** Trích xuất thông tin dự án thông qua phân tích cú pháp HTML

**Xử lý lỗi:**
- Lời nhắc thân thiện sẽ được hiển thị cho các lỗi mạng
- Nếu phân tích cú pháp không thành công, HTML gốc sẽ được trả về để gỡ lỗi
- Các tham số ngôn ngữ được hỗ trợ không phân biệt chữ hoa chữ thường

---

## Những cải tiến trong tương lai

Các tính năng có thể có trong tương lai:
- Hỗ trợ xu hướng hàng tháng (nếu được cung cấp bởi GitHub)
- Lọc theo phạm vi sao (1k+, 10k+, 100k+)
- Lưu dữ liệu lịch sử để phân tích xu hướng
- Tích hợp vào quy trình làm việc tự động cho các kỹ năng khác

---

## Thông báo bằng giọng nói

**Khi thực hiện quy trình công việc, hãy thực hiện CẢ HAI:**

1. **Gửi thông báo bằng giọng nói:**
```bash
   curl -s -X POST http://localhost:8888/notify \
     -H "Content-Type: application/json" \
     -d '{"message": "Running the GitHubTrends workflow"}' \
     > /dev/null 2>&1 &
   ```

2. **Thông báo văn bản đầu ra:**
```
   Running the **GitHubTrends** workflow...
   ```

**Tài liệu đầy đủ:** `~/.claude/skills/CORE/SkillNotifications.md`
TẬP TIN:README.md
# Kỹ năng xu hướng GitHub

**Nhanh chóng khám phá các dự án nguồn mở phổ biến nhất trên GitHub và tạo bảng điều khiển trực quan! **

## Đặc trưng

###Chức năng cơ bản
- ✅ Nhận danh sách các mặt hàng phổ biến hàng ngày / hàng tuần
- ✅ Lọc theo ngôn ngữ lập trình (TypeScript, Python, Go, Rust, v.v.)
- ✅ Tùy chỉnh số lượng hàng trả lại
- ✅ Hiển thị tổng số Sao và giai đoạn tăng trưởng
- ✅ Không yêu cầu mã thông báo API GitHub

### Bảng điều khiển trực quan 🆕
- ✨ **HTML tương tác** - Tạo bảng điều khiển web tương tác
- 📊 **Trực quan hóa dữ liệu** - Biểu đồ hình tròn phân phối ngôn ngữ, biểu đồ thanh tăng trưởng Ngôi sao
- 📰 **Tin tức kỹ thuật** - Tin tức Hacker tích hợp
- 🔍 **Lọc theo thời gian thực** - Lọc, sắp xếp, tìm kiếm theo ngôn ngữ
- 📱 **Thiết kế đáp ứng** - Hỗ trợ máy tính để bàn, máy tính bảng và điện thoại di động
- 🎨 **Giao diện đẹp** - Tailwind CSS + phong cách GitHub

## Bắt đầu nhanh

### Xem các mặt hàng phổ biến trong tuần này (mặc định)

```bash
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly
```

### Xem các mặt hàng phổ biến hiện nay

```bash
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts daily
```

### Lọc theo ngôn ngữ

```bash
# TypeScript热门项目
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly --language=TypeScript

# Python热门项目
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly --language=Python

# Go热门项目
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly -l=Go
```

### Chỉ định số lượng trả lại

```bash
# 返回20个项目
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly --limit=20

# 组合使用：返回15个TypeScript项目
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly --language=TypeScript --limit=15
```

---

## Tạo bảng điều khiển trực quan 🆕

###Cách sử dụng cơ bản

```bash
# 生成本周趋势仪表板（默认）
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts
```

### Chứa tin tức công nghệ

```bash
# 生成包含 Hacker News 的仪表板
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts --include-news
```

### Tùy chọn nâng cao

```bash
# 生成 TypeScript 项目每日仪表板，包含 15 条新闻
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts \
  --period daily \
  --language TypeScript \
  --limit 20 \
  --include-news \
  --news-count 15 \
  --output ~/Downloads/ts-daily-trends.html
```

### Chức năng bảng điều khiển

Tệp HTML được tạo có chứa:
- **Tổng quan thống kê** - Tổng số dự án, tổng số sao, dự án hàng đầu
- **Biểu đồ phân bổ ngôn ngữ** - Biểu đồ hình tròn thể hiện tỷ lệ của từng ngôn ngữ
- **Biểu đồ tăng trưởng của các ngôi sao** - Biểu đồ thanh thể hiện xu hướng tăng trưởng
- **Thẻ dự án** - Trình bày dự án theo phong cách thẻ đẹp mắt
- **Tin tức công nghệ** - Hacker News Tin tức mới nhất
- **Chức năng tương tác** - lọc, sắp xếp, tìm kiếm
- **Đáp ứng** - thích ứng với nhiều kích cỡ màn hình khác nhau

---

## Ví dụ đầu ra

```markdown
# GitHub Trending Projects - Weekly (2026-01-19)

📊 **Total:** 10 projects | **Language:** All | **Period:** Weekly

---

## 1. vercel/next.js - ⭐ 125,342 (+1,234 this week)
**Language:** TypeScript
**Description:** The React Framework for the Web
**URL:** https://github.com/vercel/next.js

## 2. microsoft/vscode - ⭐ 160,890 (+987 this week)
**Language:** TypeScript
**Description:** Visual Studio Code
**URL:** https://github.com/microsoft/vscode

...
```

## Mô tả thông số

| Thông số | Mô tả | Giá trị mặc định | Giá trị tùy chọn |
|------|------|--------|--------|
| `period` | 时间周期 | `weekly` | `daily`, `weekly` |
| `--language` | Bộ lọc ngôn ngữ lập trình | Tất cả | TypeScript, Python, Go, Rust, Java, v.v. |
| `--limit` | Trả về số lượng mục | 10 | Bất kỳ số nguyên dương nào |

## Ngôn ngữ được hỗ trợ

Các ngôn ngữ lập trình thông dụng có thể dùng làm điều kiện lọc:
- **TypeScript** - Công cụ TypeScript
- **JavaScript** - Dự án JavaScript
- **Python** - Dự án Python
- **Go** - Dự án ngôn ngữ Go
- **Rust** - Dự án Rust
- **Java** - Dự án Java
- **C++** - Dự án C++
- **Ruby** - Dự án Ruby
- **Swift** - Dự án Swift
- **Kotlin** - Dự án Kotlin

## Từ kích hoạt kỹ năng

Kỹ năng này được kích hoạt khi bạn nói bất kỳ điều nào sau đây:

- "hiển thị xu hướng github" / "xu hướng github"
- "Hiển thị các mặt hàng phổ biến" / "Xem các mặt hàng phổ biến là gì"
- "xu hướng hàng tuần" / "Các mặt hàng xu hướng hàng tuần"
- "xu hướng hàng ngày" / "Hàng hot hôm nay"
- "Xu hướng TypeScript" / "Xu hướng Python"
- "Có gì hấp dẫn trên github" / "Có gì hấp dẫn trên github"

## Triển khai kỹ thuật

- **Nguồn dữ liệu**: Trang xu hướng chính thức của GitHub (https://github.com/trending)
- **Phương pháp phân tích cú pháp**: Phân tích cú pháp HTML để trích xuất thông tin dự án
- **Xác thực**: Không yêu cầu mã thông báo API GitHub
- **Tần suất cập nhật**: Cập nhật mỗi giờ một lần

## Cấu trúc thư mục

```
~/.claude/skills/GitHubTrends/
├── SKILL.md              # Skill主文件
├── README.md             # 使用文档（本文件）
├── Tools/
│   └── GetTrending.ts    # 获取trending数据的工具
└── Workflows/
    └── GetTrending.md    # 工作流文档
```

## Ghi chú

1. **Yêu cầu về mạng**: Bạn cần có khả năng truy cập trang web chính thức của GitHub
2. **Tần suất cập nhật**: Dữ liệu được cập nhật hàng giờ, không phải theo thời gian thực
3. **Độ chính xác của phân tích cú pháp**: Những thay đổi trong cấu trúc trang GitHub có thể ảnh hưởng đến việc phân tích cú pháp. Nếu bạn gặp sự cố, vui lòng kiểm tra `/tmp/github-trending-debug-*.html`
4. **Tham số ngôn ngữ**: không phân biệt chữ hoa chữ thường, `--language=typescript` và `--language=TypeScript` có cùng tác dụng

## Sự cố đã biết

- Cấu trúc HTML của trang xu hướng GitHub rất phức tạp và URL cũng như tên của một số dự án có thể được phân tích cú pháp không đầy đủ.
- Nếu cấu trúc trang GitHub thay đổi, công cụ có thể cần cập nhật logic phân tích cú pháp

## Những cải tiến trong tương lai

- [ ] hỗ trợ lưu dữ liệu lịch sử để phân tích xu hướng
- [ ] Lọc theo phạm vi sao (1k+, 10k+, 100k+)
- [ ] Phân tích cú pháp HTML thông minh hơn (sử dụng thư viện phân tích cú pháp HTML thay vì biểu thức thông thường)
- [ ] Tích hợp vào quy trình làm việc tự động của các kỹ năng khác

## đóng góp

Nếu bạn gặp vấn đề hoặc có đề xuất cải tiến, vui lòng gửi chúng!

---

**Được làm bằng ❤️ bởi Lao Wang**
TẬP TIN:Công cụ/GetTrending.ts
#!/usr/bin/env bun
/**
* Trình tìm nạp dự án xu hướng GitHub
*
* Lấy danh sách các dự án thịnh hành từ GitHub
* Hỗ trợ xu hướng hàng ngày/hàng tuần, lọc theo ngôn ngữ
*/

nhập { $ } từ "bun";

giao diện TrendingProject {
cấp bậc: số lượng;
tên: chuỗi;
mô tả: chuỗi;
ngôn ngữ: chuỗi;
sao: chuỗi;
starsThisPeriod: chuỗi;
url: chuỗi;
}

giao diện TrendingOptions {
thời gian: "hàng ngày" | "hàng tuần";
ngôn ngữ?: chuỗi;
giới hạn: số lượng;
}

hàm buildTrendingUrl(options: TrendingOptions): chuỗi {
const baseUrl = "https://github.com/trending";
const kể từ = options.thời gian === "hàng ngày" ? "hàng ngày" : "hàng tuần";
hãy url = `baseUrl?since=since`;
if (options.ngôn ngữ) {
url += `&language=encodeURIComponent(options.language.toLowerCase())`;
}
trả lại url;
}

hàm phân tích cú phápTrendingProjects(html: string, limit: number): TrendingProject[] {
dự án const: TrendingProject[] = [];
thử {
const bài viếtRegex = /<article[^>]*>([\s\S]*?)<\/article>/g;
const bài viết = html.match(articleRegex) || [];
const ArticleToProcess = Article.slice(0, limit);
ArticleToProcess.forEach((bài viết, chỉ mục) => {
thử {
const tiêu đềMatch = bài viết.match(/<h[12][^>]*>([\s\S]*?)<\/h[12]>/);
hãy để repoName: chuỗi | null = null;
nếu (tiêu đềMatch) {
const tiêu đềContent = tiêu đềMatch[1];
const validLinkMatch = tiêu đềContent.match(
/<a[^>]*href="\/([^\/"\/]+\/[^\/"\/]+)"[^>]*>(?![^<]*đăng nhập)/
);
nếu (hợp lệLinkMatch) {
repoName = validLinkMatch[1];
}
}
nếu (!repoName) {
const repoMatch = bài viết.match(
/<a[^>]*href="\/([a-zA-Z0-9_.-]+\/[a-zA-Z0-9_.-]+)"[^>]*>(?!.*(?:login|stargazers|forks|issues))/
);
repoName = repoMatch ? repoMatch[1] : null;
}
const descMatch = Article.match(/<p[^>]*class="[^"]*col-9[^"]*"[^>]*>([\s\S]*?)<\/p>/);
mô tả const = descMatch
? descMatch[1]
.replace(/<[^>]+>/g, "")
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, '"')
.trim()
.chuỗi con(0, 200)
: "Không có mô tả";
const langMatch = Article.match(/<span[^>]*itemprop="programmingLanguage"[^>]*>([^<]+)<\/span>/);
ngôn ngữ const = langMatch? langMatch[1].trim() : "Không xác định";
const starsMatch = Article.match(/<a[^>]*href="\/[^"]+\/stargazers"[^>]*>(\d[\d,]*)\s*stars?/);
const TotalStars = starsMatch ? starsMatch[1] : "0";
const starsAddedMatch = Article.match(/(\d[\d,]*)\s*stars?\s*(?:today|tuần này)/i);
const starsAdded = starsAddedMatch ? `+starsAddedMatch[1]` : "";
if (repoName && !repoName.includes("đăng nhập") && !repoName.includes("return_to")) {
dự án.push({
thứ hạng: chỉ số + 1,
tên: repoName,
Sự miêu tả,
ngôn ngữ,
sao: tổng số sao,
starsThisPeriod: saoĐã thêm,
url: `https://github.com/repoName`,
});
}
} bắt (lỗi) {
console.error(`解析第index + 1个项目失败:`, lỗi);
}
});
} bắt (lỗi) {
console.error("Không thể phân tích các mục xu hướng:", error);
}
trả lại dự án;
}

định dạng hàmDự án (dự án: TrendingProject[], tùy chọn: TrendingOptions): chuỗi {
if (dự án.length === 0) {
return "# GitHub Trending - No Projects Found\n\nKhông tìm thấy dự án xu hướng nào. Đó có thể là sự cố mạng hoặc thay đổi cấu trúc trang.";
}
const PeriodLabel = options. Period === "daily" ? "Hàng ngày" : "Hàng tuần";
const ngôn ngữLabel = tùy chọn.ngôn ngữ? `Language: options.language` : "Ngôn ngữ: Tất cả";
const hôm nay = new Date().toISOString().split("T")[0];
hãy để đầu ra = `# GitHub Trending Projects - periodLabel (today)\n\n`;
đầu ra += `📊 **Total:** projects.length projects | **languageLabel** | **Period:** periodLabel\n\n`;
đầu ra += `---\n\n`;
dự án.forEach((dự án) => {
đầu ra += `## project.rank. project.name - ⭐ project.stars`;
if (project.starsThisPeriod) {
đầu ra += ` (project.starsThisPeriod this options.period)`;
}
đầu ra += `\n`;
đầu ra += `**Language:** project.language\n`;
đầu ra += `**Description:** project.description\n`;
đầu ra += `**URL:** project.url\n\n`;
});
đầu ra += `---\n`;
đầu ra += `📊 Data from: https://github.com/trending\n`;
trả về đầu ra;
}

hàm không đồng bộ main() {
const args = process.argv.slice(2);
hãy để thời gian: "hàng ngày" | "hàng tuần" = "hàng tuần";
hãy để ngôn ngữ: chuỗi | không xác định;
đặt giới hạn = 10;
for (const arg của args) {
if (arg === "hàng ngày" || arg === "hàng tuần") {
giai đoạn = arg;
} else if (arg.startsWith("--lingu=")) {
ngôn ngữ = arg.split("=")[1];
} khác nếu (arg.startsWith("-l=")) {
ngôn ngữ = arg.split("=")[1];
} khác nếu (arg.startsWith("--limit=")) {
giới hạn = ParseInt(arg.split("=")[1]) || 10;
}
}
tùy chọn const: TrendingOptions = { period, language, limit };
thử {
const url = buildTrendingUrl(options);
console.error(`正在获取 GitHub trending 数据: url`);
phản hồi const = đang chờ tìm nạp (url);
nếu (!response.ok) {
ném Lỗi mới (`HTTP response.status: response.statusText`);
}
const html = đang chờ phản hồi.text();
dự án const = ParseTrendingProjects(html, limit);
const được định dạng = formatProjects(projects, options);
console.log(được định dạng);
if (dự án.length === 0) {
const debugFile = `/tmp/github-trending-debug-Date.now().html`;
đang chờ Bun.write(debugFile, html);
console.error(`\n调试: 原始HTML已保存到 debugFile`);
}
} bắt (lỗi) {
console.error("❌ Không lấy được dữ liệu xu hướng:");
console.error(lỗi);
quá trình.exit(1);
}
}

chủ yếu();
TẬP TIN:Quy trình làm việc/GetTrending.md
# Quy trình làm việc theo xu hướng

Quy trình làm việc để nhận danh sách các dự án thịnh hành trên GitHub.

## Sự miêu tả

Quy trình làm việc này sử dụng công cụ GetTrending.ts để lấy danh sách hiện tại các dự án phổ biến nhất từ ​​GitHub, hỗ trợ lọc theo khoảng thời gian (hàng ngày/hàng tuần) và ngôn ngữ lập trình.

## Khi nào nên sử dụng

Sử dụng quy trình làm việc này khi người dùng yêu cầu bất kỳ thao tác nào sau đây:
- "hiển thị xu hướng github" / "xu hướng github"
- "Hiển thị các mặt hàng phổ biến" / "Xem các mặt hàng phổ biến là gì"
- "xu hướng hàng tuần" / "Các mặt hàng xu hướng hàng tuần"
- "xu hướng hàng ngày" / "Hàng hot hôm nay"
- "Xu hướng TypeScript" / "Xu hướng Python" / Lọc theo ngôn ngữ
- "Có gì hấp dẫn trên github" / "Có gì hấp dẫn trên github"

## Các bước của quy trình làm việc

### Bước 1: Xác định thông số
Xác nhận hoặc suy ra các thông số sau từ người dùng:
- **Khoảng thời gian**: hàng ngày (hàng ngày) hoặc hàng tuần (hàng tuần, mặc định)
- **Ngôn ngữ lập trình**: tùy chọn (chẳng hạn như TypeScript, Python, Go, Rust, v.v.)
- **Số mục**: Mặc định 10

### Bước 2: Thực thi công cụ
Chạy công cụ GetTrending.ts:

```bash
# 基本用法（本周，全部语言，10个项目）
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly

# 指定语言
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly --language=TypeScript

# 指定数量
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts weekly --limit=20

# 组合参数
bun ~/.claude/skills/GitHubTrends/Tools/GetTrending.ts daily --language=Python --limit=15
```

### Bước 3: Hiển thị kết quả
Công cụ tự động định dạng đầu ra, bao gồm:
- Xếp hạng dự án
- Tên dự án
- Tổng số sao và tốc độ tăng trưởng trong chu kỳ
-ngôn ngữ lập trình
- Mô tả dự án
- URL GitHub

### Bước 4: Thao tác tiếp theo (tùy chọn)
Theo nhu cầu của người dùng, bạn có thể:
- Mở một trang dự án
- Sử dụng các kỹ năng khác để phân tích sâu hơn về dự án
- Lưu kết quả vào file để tham khảo sau

## Tích hợp với các kỹ năng khác

- **OSINT**: Khám phá các công cụ phổ biến trong khi nghiên cứu kho công nghệ
- **Nghiên cứu**: Xu hướng nghiên cứu trong hệ sinh thái ngôn ngữ cụ thể
- **Trình duyệt**: Mở trang dự án để phân tích chi tiết

## Ghi chú

- Dữ liệu được cập nhật hàng giờ
- Không yêu cầu mã thông báo API GitHub
- Sử dụng trang xu hướng GitHub công khai
- Các tham số ngôn ngữ được hỗ trợ không phân biệt chữ hoa chữ thường
TẬP TIN: Công cụ/TạoDashboard.ts
#!/usr/bin/env bun
/**
* Trình tạo bảng điều khiển xu hướng GitHub
*
* Tạo bảng điều khiển trực quan hóa dữ liệu tương tác
*
* Cách sử dụng:
* ./GenerateDashboard.ts [options]
*
* Tùy chọn:
* --thời gian - hàng ngày | hàng tuần (mặc định: hàng tuần)
* --ngôn ngữ - bộ lọc ngôn ngữ lập trình (tùy chọn)
* --limit - số lượng mục (mặc định: 10)
* --include-news - bao gồm tin tức kỹ thuật
* --news-count - số lượng tin tức (mặc định: 10)
* --chủ đề - ánh sáng | tối | tự động (mặc định: tự động)
* --output - đường dẫn tệp đầu ra (mặc định: ./github-trends.html)
*
* Ví dụ:
* ./GenerateDashboard.ts
* ./GenerateDashboard.ts --thời gian hàng ngày --ngôn ngữ TypeScript --include-news
* ./GenerateDashboard.ts --limit 20 --output ~/trends.html
*/

nhập Tay lái từ 'tay lái';
nhập loại { DashboardOptions, TrendingProject, TechNewsItem, TemplateData } từ './Lib/types';
nhập { registerHelpers, renderTemplate } từ './Lib/template-helpers';
nhập { analyzeData } từ './Lib/visualization-helpers';

//Đăng ký hàm trợ giúp Handlebars
registerHelpers();

/**
* Xây dựng URL xu hướng GitHub
*/
hàm buildTrendingUrl(options: DashboardOptions): chuỗi {
const baseUrl = "https://github.com/trending";
const kể từ = options.thời gian === "hàng ngày" ? "hàng ngày" : "hàng tuần";
hãy url = `baseUrl?since=since`;

if (options.ngôn ngữ) {
url += `&language=encodeURIComponent(options.language.toLowerCase())`;
}

trả lại url;
}

/**
* Phân tích HTML để trích xuất các mục xu hướng
* (logic được sao chép từ GetTrending.ts)
*/
hàm không đồng bộ getTrendingProjects(options: DashboardOptions): Promise<TrendingProject[]> {
const url = buildTrendingUrl(options);

console.error(`正在获取 GitHub trending 数据: url`);

phản hồi const = đang chờ tìm nạp (url);
nếu (!response.ok) {
ném Lỗi mới (`HTTP response.status: response.statusText`);
}

const html = đang chờ phản hồi.text();
trả về phân tích cú phápTrendingProjects(html, options.limit);
}

/**
* Phân tích HTML
*/
hàm phân tích cú phápTrendingProjects(html: string, limit: number): TrendingProject[] {
dự án const: TrendingProject[] = [];

thử {
const bài viếtRegex = /<article[^>]*>([\s\S]*?)<\/article>/g;
const bài viết = html.match(articleRegex) || [];
const ArticleToProcess = Article.slice(0, limit);

ArticleToProcess.forEach((bài viết, chỉ mục) => {
thử {
const tiêu đềMatch = bài viết.match(/<h[12][^>]*>([\s\S]*?)<\/h[12]>/);
hãy để repoName: chuỗi | null = null;

nếu (tiêu đềMatch) {
const tiêu đềContent = tiêu đềMatch[1];
const validLinkMatch = tiêu đềContent.match(
/<a[^>]*href="\/([^\/"\/]+\/[^\/"\/]+)"[^>]*>(?![^<]*đăng nhập)/
);
nếu (hợp lệLinkMatch) {
repoName = validLinkMatch[1];
}
}

nếu (!repoName) {
const repoMatch = bài viết.match(
/<a[^>]*href="\/([a-zA-Z0-9_.-]+\/[a-zA-Z0-9_.-]+)"[^>]*>(?!.*(?:login|stargazers|forks|issues))/
);
repoName = repoMatch ? repoMatch[1] : null;
}

const descMatch = Article.match(/<p[^>]*class="[^"]*col-9[^"]*"[^>]*>([\s\S]*?)<\/p>/);
mô tả const = descMatch
? descMatch[1]
.replace(/<[^>]+>/g, "")
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, '"')
.trim()
.chuỗi con(0, 200)
: "Không có mô tả";

const langMatch = Article.match(/<span[^>]*itemprop="programmingLanguage"[^>]*>([^<]+)<\/span>/);
ngôn ngữ const = langMatch? langMatch[1].trim() : "Không xác định";

// Trích xuất tổng số sao - GitHub đã thay đổi cấu trúc HTML, và số nằm sau SVG
const starsMatch = Article.match(/stargazers[^>]*>[\s\S]*?<\/svg>\s*([\d,]+)/);
const TotalStars = starsMatch ? starsMatch[1] : "0";

//Cố gắng trích xuất các ngôi sao mới - định dạng: XXX sao hôm nay/tuần này
const starsAddedMatch = Article.match(/(\d[\d,]*)\s+stars?\s+(?:today|tuần này)/);
const starsAdded = starsAddedMatch ? `+starsAddedMatch[1]` : "";

if (repoName && !repoName.includes("đăng nhập") && !repoName.includes("return_to")) {
dự án.push({
thứ hạng: chỉ số + 1,
tên: repoName,
Sự miêu tả,
ngôn ngữ,
sao: tổng số sao,
starsThisPeriod: saoĐã thêm,
url: `https://github.com/repoName`,
});
}
} bắt (lỗi) {
console.error(`解析第index + 1个项目失败:`, lỗi);
}
});
} bắt (lỗi) {
console.error("Không thể phân tích các mục xu hướng:", error);
}

trả lại dự án;
}

/**
* Nhận tin tức công nghệ
*/
hàm không đồng bộ getTechNews(count: number): Promise<TechNewsItem[]> {
const HN_API = 'https://hn.algolia.com/api/v1/search_by_date';

thử {
phản hồi const = đang chờ tìm nạp(`HN_API?tags=story&hitsPerPage=count`);
nếu (!response.ok) {
ném Lỗi mới (`HTTP response.status: response.statusText`);
}

dữ liệu const = đang chờ phản hồi.json();

trả về data.hits.slice(0, count).map((hit: Any) => ({
id: hit.objectID,
tiêu đề: hit.title,
url: hit.url || `https://news.ycombinator.com/item?id=hit.objectID`,
nguồn: 'hackernews',
điểm: hit.points || 0,
bình luận: hit.num_comments || 0,
dấu thời gian: Ngày mới(hit.created_at).toISOString(),
tags: hit._tags || []
}));
} bắt (lỗi) {
console.error('Không nhận được tin tức về Hacker:', error);
trở lại [];
}
}

/**
* Tạo bảng điều khiển
*/
hàm không đồng bộ generateDashboard(options: DashboardOptions): Promise<void> {
thử {
console.error('🚀 Bắt đầu tạo Bảng thông tin xu hướng GitHub...\n');

// 1. Nhận dữ liệu Xu hướng GitHub
dự án const = đang chờ getTrendingProjects(options);
console.error(`✅ 获取到 projects.length 个项目`);

// 2. Nhận tin tức kỹ thuật (nếu được bật)
đưa tin: TechNewsItem[] = [];
if (options.includeNews) {
tin tức = đang chờ getTechNews(options.newsCount);
console.error(`✅ 获取到 news.length 条新闻`);
}

// 3. Phân tích dữ liệu
phân tích const = analyzeData(dự án);
console.error(`✅ 数据分析完成`);

// 4. Chuẩn bị dữ liệu mẫu
const templateData: Dữ liệu mẫu = {
tiêu đề: 'Bảng điều khiển xu hướng GitHub',
được tạoAt: new Date().toLocaleString('zh-CN'),
thời gian: tùy chọn.thời gian === 'hàng ngày'? 'Hàng ngày' : 'Hàng tuần',
dự án,
tin tức,
phân tích,
tùy chọn
};

// 5. Kết xuất mẫu
const templatePath = `import.meta.dir/../Templates/dashboard.hbs`;
const templateContent = đang chờ Bun.file(templatePath).text();
const template = Handlebars.compile(templateContent);
const html = mẫu (templateData);
console.error(`✅ 模板渲染完成`);

// 6. Lưu tập tin
đang chờ Bun.write(options.output, html);
console.error(`\n🎉 仪表板生成成功！`);
console.error(`📄 文件路径: options.output`);
console.error(`\n💡 在浏览器中打开查看效果！`);

} bắt (lỗi) {
console.error('\n❌ Không tạo được bảng thông tin:');
console.error(lỗi);
quá trình.exit(1);
}
}

/**
* Phân tích các tham số dòng lệnh
*/
hàm phân tích cú phápArgs(): DashboardOptions {
const args = process.argv.slice(2);

tùy chọn const: DashboardOptions = {
khoảng thời gian: 'hàng tuần',
giới hạn: 10,
đầu ra: './github-trends.html',
bao gồmTin tức: sai,
tin tứcĐếm: 10,
chủ đề: 'tự động'
};

for (let i = 0; i < args.length; i++) {
const arg = args[i];

chuyển đổi (arg) {
trường hợp '--thời gian':
options. Period = args[++i] === 'hàng ngày' ? 'hàng ngày' : 'hàng tuần';
phá vỡ;
trường hợp '--ngôn ngữ':
tùy chọn.ngôn ngữ = args[++i];
phá vỡ;
trường hợp '--giới hạn':
options.limit = parsInt(args[++i]) || 10;
phá vỡ;
trường hợp '--include-news':
tùy chọn.includeNews = true;
phá vỡ;
trường hợp '--news-count':
options.newsCount = parsInt(args[++i]) || 10;
phá vỡ;
trường hợp '--theme':
options.theme = args[++i] === 'ánh sáng' || args[++i] === 'tối'? args[i] : 'tự động';
phá vỡ;
trường hợp '--output':
tùy chọn.output = args[++i];
phá vỡ;
mặc định:
if (arg.startsWith('--output=')) {
options.output = arg.split('=')[1];
} else if (arg.startsWith('--lingu=')) {
tùy chọn.ngôn ngữ = arg.split('=')[1];
} else if (arg.startsWith('--limit=')) {
options.limit = ParseInt(arg.split('=')[1]) || 10;
}
}
}

tùy chọn trả lại;
}

/**
* Chức năng chính
*/
hàm không đồng bộ main() {
tùy chọn const = parsArgs();
đang chờ generateDashboard(options);
}

// Nếu bạn chạy trực tiếp script này
if (import.meta.main) {
chủ yếu();
}

// Xuất để sử dụng cho các mô-đun khác
xuất { generateDashboard };
loại xuất { DashboardOptions };
TẬP TIN: Công cụ/GetTechNews.ts
#!/usr/bin/env bun
/**
* Trình tải tin tức công nghệ
*
* Nhận tin tức công nghệ từ Hacker News và các nguồn khác
*
* Cách sử dụng:
* ./GetTechNews.ts [count]
*
* Thông số:
* count - lấy số lượng tin tức (mặc định: 10)
*
* Ví dụ:
* ./GetTechNews.ts
* ./GetTechNews.ts 20
*/

nhập Trình phân tích cú pháp từ 'rss-parser';
nhập loại { TechNewsItem } từ './Lib/types';

const HN_API = 'https://hn.algolia.com/api/v1/search';
trình phân tích cú pháp const = Trình phân tích cú pháp mới();

/**
* Nhận tin tức từ Hacker News Algolia API
*/
hàm không đồng bộ getHackerNews(count: number): Promise<TechNewsItem[]> {
thử {
phản hồi const = đang chờ tìm nạp(`HN_API?tags=front_page&hits=count`);
nếu (!response.ok) {
ném Lỗi mới (`HTTP response.status: response.statusText`);
}

dữ liệu const = đang chờ phản hồi.json();

trả về data.hits.map((hit: Any) => ({
id: hit.objectID,
tiêu đề: hit.title,
url: hit.url || `https://news.ycombinator.com/item?id=hit.objectID`,
nguồn: 'hackernews',
điểm: hit.points || 0,
bình luận: hit.num_comments || 0,
dấu thời gian: Ngày mới(hit.created_at).toISOString(),
tags: hit._tags || []
}));
} bắt (lỗi) {
console.error('Không nhận được tin tức về Hacker:', error);
trở lại [];
}
}

/**
* Nhận tin tức từ Hacker News RSS (thay thế)
*/
hàm không đồng bộ getHackerNewsRSS(count: number): Promise<TechNewsItem[]> {
thử {
nguồn cấp dữ liệu const = đang chờ trình phân tích cú pháp.parseURL('https://news.ycombinator.com/rss');

return Feed.items.slice(0, count).map((item: Any) => ({
id: item.guid || mục.link,
tiêu đề: item.title || 'Không có tiêu đề',
url: item.link,
nguồn: 'hackernews',
dấu thời gian: item.pubDate || Ngày mới().toISOString(),
thẻ: ['hackernews', 'rss']
}));
} bắt (lỗi) {
console.error('Không lấy được RSS Tin tức Hacker:', error);
trở lại [];
}
}

/**
* Nhận tin tức kỹ thuật (chức năng chính)
*/
hàm không đồng bộ getTechNews(count: number = 10): Promise<TechNewsItem[]> {
console.error(`正在获取技术新闻（count条）...`);

// Ưu tiên sử dụng API Hacker News
let news = chờ getHackerNews(count);

// Nếu thất bại, hãy thử dự phòng RSS
if (news.length === 0) {
console.error('API tin tức của hacker không thành công, hãy thử RSS...');
tin tức = đang chờ getHackerNewsRSS(đếm);
}

console.error(`✅ 获取到 news.length 条新闻`);
trả lại tin tức;
}

/**
* Mục nhập CLI
*/
hàm không đồng bộ main() {
const args = process.argv.slice(2);
const count = parsInt(args[0]) || 10;

thử {
const news = đang chờ getTechNews(count);

// Định dạng JSON đầu ra (thuận tiện cho việc gọi chương trình)
console.log(JSON.stringify(news, null, 2));
} bắt (lỗi) {
console.error('❌ Không nhận được tin tức:');
console.error(lỗi);
quá trình.exit(1);
}
}

// Nếu bạn chạy trực tiếp script này
if (import.meta.main) {
chủ yếu();
}

// Xuất để sử dụng cho các mô-đun khác
xuất { getTechNews };
loại xuất { TechNewsItem };
TẬP TIN: Công cụ/Lib/types.ts
/**
* GitHubTrends - định nghĩa kiểu
*
* Xác định tất cả các loại và giao diện TypeScript
*/

/**
* Dự án xu hướng GitHub
*/
giao diện xuất TrendingProject {
cấp bậc: số lượng;
tên: chuỗi;
mô tả: chuỗi;
ngôn ngữ: chuỗi;
sao: chuỗi;
starsThisPeriod: chuỗi;
url: chuỗi;
}

/**
* Tin tức công nghệ
*/
giao diện xuất TechNewsItem {
id: chuỗi;
tiêu đề: chuỗi;
url: chuỗi;
nguồn: chuỗi; // 'hackernews', 'reddit', v.v.
điểm?: số;
ý kiến?: con số;
dấu thời gian: chuỗi;
thẻ: chuỗi[];
}

/**
* Tùy chọn tạo bảng điều khiển
*/
giao diện xuất DashboardOptions {
thời gian: 'hàng ngày' | 'hàng tuần';
ngôn ngữ?: chuỗi;
giới hạn: số lượng;
đầu ra: chuỗi;
bao gồmTin tức: boolean;
newsCount: số;
chủ đề: 'ánh sáng' | 'đen tối' | 'tự động';
}

/**
* Kết quả phân tích dữ liệu
*/
giao diện xuất Analytics {
Phân phối ngôn ngữ: Record<string, number>;
tổng số sao: số lượng;
topProject: Dự án xu hướng;
Thống kê tăng trưởng: {
cao nhất: TrendingProject;
trung bình: số lượng;
};
}

/**
* Tùy chọn truy vấn xu hướng (đối với GetTrending.ts)
*/
giao diện xuất TrendingOptions {
thời gian: "hàng ngày" | "hàng tuần";
ngôn ngữ?: chuỗi;
giới hạn: số lượng;
}

/**
* Dữ liệu biểu đồ
*/
giao diện xuất ChartData {
nhãn: chuỗi[];
dữ liệu: số[];
màu sắc: chuỗi [];
}

/**
* Dữ liệu kết xuất mẫu
*/
giao diện xuất Dữ liệu mẫu {
tiêu đề: chuỗi;
được tạoAt: chuỗi;
dấu chấm: chuỗi;
dự án: TrendingProject[];
tin tức?: TechNewsItem[];
phân tích: Phân tích;
tùy chọn: Bảng điều khiểnTùy chọn;
}
TẬP TIN: Công cụ/Lib/template-helpers.ts
/**
* Người trợ giúp mẫu
*
* Chức năng phụ trợ tùy chỉnh trên tay lái
*/

nhập Tay lái từ 'tay lái';

/**
* Đăng ký tất cả các chức năng trợ giúp tùy chỉnh
*/
hàm xuất registerHelpers(): void {
// Định dạng số (thêm dấu phân cách hàng nghìn)
Handlebars.registerHelper('formatNumber', (value: number) => {
giá trị trả về.toLocaleString();
});

//Cắt ngắn văn bản
Handlebars.registerHelper('truncate', (str: string, length: number = 100) => {
if (str.length <= length) trả về str;
return str.substring(0, length) + '...';
});

//Định dạng ngày
Handlebars.registerHelper('formatDate', (dateStr: string) => {
const date = Ngày mới(dateStr);
ngày trả về.toLocaleDateString('zh-CN', {
năm: 'số',
tháng: 'dài',
ngày: 'số',
giờ: '2 chữ số',
phút: '2 chữ số'
});
});

// Tuần tự hóa JSON (đối với dữ liệu được nhúng)
Handlebars.registerHelper('json', (ngữ cảnh: bất kỳ) => {
trả về JSON.stringify(bối cảnh);
});

//Phán xét có điều kiện
Handlebars.registerHelper('eq', (a: Any, b: Any) => {
trả về một === b;
});

Handlebars.registerHelper('ne', (a: Any, b: Any) => {
trả về a !== b;
});

Handlebars.registerHelper('gt', (a: number, b: number) => {
trả về a > b;
});

Handlebars.registerHelper('lt', (a: number, b: number) => {
trả về a < b;
});
}

/**
* Kết xuất mẫu
*/
xuất hàm không đồng bộ renderTemplate(
templatePath: chuỗi,
dữ liệu: bất kỳ
): Hứa<string> {
const templateContent = đang chờ Bun.file(templatePath).text();
const template = Handlebars.compile(templateContent);
mẫu trả về (dữ liệu);
}

xuất mặc định { registerHelpers, renderTemplate };
TẬP TIN:Tools/Lib/visualization-helpers.ts
/**
* Người trợ giúp trực quan
*
* Chức năng phụ trợ phân tích và hiển thị dữ liệu
*/

nhập loại { TrendingProject, Analytics } từ './types';

/**
* Phân tích dữ liệu dự án
*/
hàm xuất phân tíchData(dự án: TrendingProject[]): Analytics {
// Thống kê phân bổ ngôn ngữ
phân phối ngôn ngữ const: Record<string, number> = {};
dự án.forEach(dự án => {
const lang = project.ngôn ngữ;
ngôn ngữDistribution[lang] = (ngôn ngữDistribution[lang] || 0) + 1;
});

// Tổng số sao
const TotalStars = project.reduce((sum, project) => {
tổng trả về + ParseInt(project.stars.replace(/,/g, '') || 0);
}, 0);

// Tìm dự án hàng đầu
const topProject = project.reduce((top, project) => {
const topStars = ParseInt(top.stars.replace(/,/g, '') || 0);
const projStars = ParseInt(project.stars.replace(/,/g, '') || 0);
quay lại projStars > topStars ? dự án : hàng đầu;
}, dự án[0]);

// Thống kê tăng trưởng
const dự ánWithGrowth = dự án.filter(p => p.starsThisPeriod);
const tăng trưởngValues ​​= dự ánWithGrowth.map(p =>
ParseInt(p.starsThisPeriod.replace(/[+,]/g, '') || 0)
);

const cao nhấtGrowth = dự ánWithGrowth.reduce((cao nhất, dự án) => {
const cao nhấtValue = ParseInt(highest.starsThisPeriod.replace(/[+,]/g, '') || 0);
const projValue = ParseInt(project.starsThisPeriod.replace(/[+,]/g, '') || 0);
trả lại projValue> giá trị cao nhất? dự án: cao nhất;
}, dự ánWithGrowth[0] || dự án[0]);

const AverageGrowth = tăng trưởngValues.length > 0
? Math.round(growthValues.reduce((a, b) => a + b, 0) / tăng trưởngValues.length)
: 0;

// Trích xuất danh sách các ngôn ngữ duy nhất (để lọc)
const ngôn ngữ = Object.keys(ngôn ngữDistribution).sort();

// Tạo dữ liệu biểu đồ
const tăng trưởngData = dự án.slice(0, 10).map(p => ({
tên: p.name.split('/')[1] || p.name,
tăng trưởng: parsInt(p.starsThisPeriod.replace(/[+,]/g, '') || 0)
}));

trở lại {
phân phối ngôn ngữ,
tổng số sao,
topdự án,
Thống kê tăng trưởng: {
cao nhất: mức tăng trưởng cao nhất,
trung bình: trung bìnhTăng trưởng
},
ngôn ngữ,
dữ liệu tăng trưởng
};
}

/**
* Định dạng số sao
*/
hàm xuất định dạngStars(starsStr: string): số {
trả về phân tích cú phápInt(starsStr.replace(/,/g, '') || 0);
}

/**
* Phân tích giá trị tăng trưởng
*/
hàm xuất parsGrowth(growthStr: string): số {
if (!growthStr) trả về 0;
trả về phân tích cú phápInt(growthStr.replace(/[+,]/g, '') || 0);
}

xuất mặc định { analyzeData, formatStars, parseGrowth };
TẬP TIN:Mẫu/dashboard.hbs
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang tổng quan xu hướng GitHub - {{period}_</title>

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
chủ đề: {
mở rộng: {
màu sắc: {
github: {
tối: '#0d1117',
ánh sáng: '#161b22',
đường viền: '#30363d',
giọng: '#58a6ff'
}
}
}
}
}
</script>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<style>
thân hình {
họ phông chữ: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.project-card {
chuyển tiếp: tất cả đều dễ dàng 0,3 giây;
}
.project-card: di chuột {
biến đổi: dịchY(-2px);
bóng hộp: 0 8px 25px rgba(0,0,0,0.15);
}
.stat-thẻ {
nền: gradient tuyến tính (135deg, #667eea 0%, #764ba2 100%);
}
.huy hiệu {
hiển thị: khối nội tuyến;
phần đệm: 0,25rem 0,75rem;
bán kính đường viền: 9999px;
cỡ chữ: 0,75rem;
trọng lượng phông chữ: 600;
}
.news-item {
viền-trái: 3px liền khối #58a6ff;
đệm-trái: 1rem;
}
</style>
</head>

<body class="bg-gray-50 min-h-screen">
<!-- 页头 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center">
<div>
<h1 class="text-3xl font-bold text-gray-900">🚀 Bảng điều khiển xu hướng GitHub</h1>
<p class="text-gray-600 mt-1">
Từ khóa: <span class="font-semibold text-github-accent">{{period}_</span> |
Thời gian thế hệ: <span class="text-gray-500">{{generatedAt}__</span>
</p>
</div>
<div class="flex gap-2">
<button onclick="window.print()" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium">
🖨️ In
</button>
</div>
</div>
</div>
</header>

<main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">

<!-- 统计概览 -->
<section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="stat-card rounded-xl p-6 text-white shadow-lg">
<h3 class="text-lg font-semibold opacity-90">Tổng số mục</h3>
<p class="text-4xl font-bold mt-2">{{projects.length}_</p>
<p class="text-sm opacity-75 mt-1">{{period}} Đang thịnh hành</p>
</div>

<div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-6 text-white shadow-lg">
<h3 class="text-lg font-semibold opacity-90">总Stars数</h3>
<p class="text-4xl font-bold mt-2">{{analytics.totalStars}_</p>
<p class="text-sm opacity-75 mt-1">Tổng cộng tất cả các mục</p>
</div>

<div class="bg-gradient-to-br from-orange-500 to-red-500 rounded-xl p-6 text-white shadow-lg">
<h3 class="text-lg font-semibold opacity-90">Vật phẩm hấp dẫn</h3>
<p class="text-xl font-bold mt-2 truncate">{{analytics.topProject.name}_</p>
<p class="text-sm opacity-75 mt-1">{{analytics.topProject.stars}} sao</p>
</div>
</section>

<!-- 筛选和搜索 -->
<section class="bg-white rounded-xl shadow-sm p-6 mb-8">
<div class="flex flex-wrap gap-4 items-center">
<div class="flex-1 min-w-64">
<label class="block text-sm font-medium text-gray-700 mb-1">Tìm kiếm mục</label>
<đầu vào
gõ="văn bản"
id="searchInput"
placeholder="Tìm kiếm theo tên hoặc mô tả..."
class="w-full px-4 py-2 viền border-gray-300 round-lg focus:ring-2 focus:ring-github-accent focus:border-transparent"
oninput="filterProjects()"
>
</div>

<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Bộ lọc ngôn ngữ</label>
<chọn
id="ngôn ngữFilter"
class="px-4 py-2 viền border-gray-300 round-lg focus:ring-2 focus:ring-github-accent focus:border-transparent"
onchange="filterProjects()"
>
<option value="all">Tất cả ngôn ngữ</option>
{{#each analytics.languages}}
<option value="{{this}}">{{this}_</option>
{{/each}}
</select>
</div>

<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Sắp xếp theo </label>
<chọn
id="sắp xếpChọn"
class="px-4 py-2 viền border-gray-300 round-lg focus:ring-2 focus:ring-github-accent focus:border-transparent"
onchange="sortProjects()"
>
<option value="rank"> xếp hạng</option>
<option value="stars">总 Sao</option>
<option value="growth">Tăng trong giai đoạn này</option>
</select>
</div>
</div>
</section>

<!-- 语言分布图表 -->
<section class="bg-white rounded-xl shadow-sm p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-4">📊 Phân phối ngôn ngữ</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div>
<canvas id="languageChart"></canvas>
</div>
<div>
<canvas id="growthChart"></canvas>
</div>
</div>
</section>

<!-- Trending Projects -->
<section class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-4">🔥 Dự án phổ biến</h2>
<div id="projects-container" class="grid grid-cols-1 gap-4">
{{#each projects}}
<div class="project-card bg-white round-xl Shadow-sm p-6 viền border-gray-200"
data-rank="{{rank}}"
data-ngôn ngữ="{{language}}"
data-stars="{{stars}}"
data-growth="{{starsThisPeriod}}"
data-name="{{name}}"
data-description="{{description}}">
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl font-bold text-github-accent">#{{rank}__</span>
<h3 class="text-xl font-semibold text-gray-900">
<a href="{{url}}" target="_blank" class="hover:text-github-accent">{{name}_</a>
</h3>
<span class="badge bg-blue-100 text-blue-800">{{language}_</span>
</div>
<p class="text-gray-600 mb-3">{{description}_</p>
<div class="flex items-center gap-4 text-sm text-gray-500">
<span>⭐ {{stars}} sao</span>
{{#if starsThisPeriod}}
<span class="text-green-600 font-semibold">(+{{starsThisPeriod}} {{../period}})</span>
{{/if}}
</div>
</div>
<a href="{{url}}" target="_blank" class="px-4 py-2 bg-github-accent text-white rounded-lg hover:bg-blue-600 transition font-medium">
Xem →
</a>
</div>
</div>
{{/each}}
</div>
</section>

<!-- Tech News -->
{{#if news}}
<section class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-4">📰 Thông tin kỹ thuật</h2>
<div class="grid grid-cols-1 gap-4">
{{#each news}}
<div class="news-item bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition">
<div class="flex items-start justify-between">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900 mb-1">
<a href="{{url}}" target="_blank" class="hover:text-github-accent">{{title}_</a>
</h3>
<div class="flex items-center gap-4 text-sm text-gray-500">
<span class="text-orange-600">📰 {{source}__</span>
{{#if points}}
<span>⬆️ {{points}} điểm</span>
{{/if}}
{{#if comments}}
<span>💬 {{comments}} nhận xét</span>
{{/if}}
</div>
</div>
</div>
</div>
{{/each}}
</div>
</section>
{{/if}}

</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 mt-12">
<div class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
<p class="text-center text-gray-500 text-sm">
Được tạo bởi GitHubTrends Skill | Nguồn: GitHub và Hacker News
</p>
</div>
</footer>

<!-- JavaScript -->
<script>
//Thêm dữ liệu
window.dashboardData = {
dự án: {{{json projects}}},
phân tích: {
Phân phối ngôn ngữ: {{{json analytics.languageDistribution}}},
Dữ liệu tăng trưởng: {{{json analytics.growthData}}}
}
};

// Khởi tạo biểu đồ
document.addEventListener('DOMContentLoaded', function() {
initLanguageChart();
initGrowthChart();
});

// Biểu đồ phân bổ ngôn ngữ
hàm initLanguageChart() {
const ctx = document.getElementById('ngôn ngữChart').getContext('2d');
dữ liệu const = window.dashboardData.analytics.linguDistribution;

Biểu đồ mới(ctx, {
gõ: 'chiếc bánh',
dữ liệu: {
nhãn: Object.keys(dữ liệu),
bộ dữ liệu: [{
dữ liệu: Object.values(data),
màu nền: [
'#58a6ff', '#238636', '#f1e05a', '#d73a49',
'#8957E5', '#e34c26', '#CB3837', '#DA5B0B',
'#4F5D95', '#563d7c'
]
}]
},
tùy chọn: {
đáp ứng: đúng,
plugin: {
huyền thoại: {
vị trí: 'đúng'
},
tiêu đề: {
hiển thị: đúng,
text: 'Dự án theo ngôn ngữ'
}
}
}
});
}

// Biểu đồ tăng trưởng của sao
hàm initGrowthChart() {
const ctx = document.getElementById('growthChart').getContext('2d');
dự án const = window.dashboardData.projects.slice(0, 10);

Biểu đồ mới(ctx, {
gõ: 'thanh',
dữ liệu: {
nhãn: dự án.map(p => p.name.split('/')[1] || p.name),
bộ dữ liệu: [{
nhãn: 'Những ngôi sao trong thời kỳ này',
dữ liệu: project.map(p => ParseInt(p.starsThisPeriod.replace('+', '') || 0)),
nềnColor: 'rgba(88, 166, 255, 0.8)',
borderColor: 'rgba(88, 166, 255, 1)',
chiều rộng đường viền: 1
}]
},
tùy chọn: {
đáp ứng: đúng,
trục chỉ mục: 'và',
plugin: {
tiêu đề: {
hiển thị: đúng,
text: 'Top 10 tăng trưởng'
}
},
cân: {
x: {
BeginAtZero: đúng
}
}
}
});
}

// Lọc các mục
hàm filterProjects() {
const searchValue = document.getElementById('searchInput').value.toLowerCase();
const ngôn ngữValue = document.getElementById('ngôn ngữFilter').value;

const cards = document.querySelectorAll('.project-card');

cards.forEach(card => {
tên const = card.dataset.name.toLowerCase();
mô tả const = card.dataset.description.toLowerCase();
ngôn ngữ const = card.dataset.lingu;

constmatchSearch = name.includes(searchValue) || description.includes(searchValue);
constmatchLanguage = ngôn ngữValue === 'tất cả' || ngôn ngữ === ngôn ngữValue;

card.style.display =matchTìm kiếm && khớpNgôn ngữ ? 'chặn' : 'không';
});
}

// Sắp xếp các mục
hàm sắp xếpProjects() {
const SortBy = document.getElementById('sortSelect').value;
const container = document.getElementById('projects-container');
thẻ const = Array.from(container.children);

cards.sort((a, b) => {
chuyển đổi (sortBy) {
trường hợp 'sao':
trả về phân tích cú phápInt(b.dataset.stars.replace(/,/g, '')) - ParseInt(a.dataset.stars.replace(/,/g, ''));
trường hợp 'tăng trưởng':
const tăng trưởngA = ParseInt(a.dataset.growth.replace(/[+,]/g, '') || 0);
const tăng trưởngB = ParseInt(b.dataset.growth.replace(/[+,]/g, '') || 0);
tăng trưởng lợi nhuậnB - tăng trưởngA;
trường hợp 'xếp hạng':
mặc định:
trả về ParseInt(a.dataset.rank) - ParseInt(b.dataset.rank);
}
});

cards.forEach(card => container.appendChild(card));
}
</script>
</body>
</html>
TẬP TIN:Quy trình làm việc/GenerateDashboard.md
# Tạo quy trình làm việc trên bảng điều khiển

Quy trình tạo bảng thông tin trực quan hóa dữ liệu tương tác.

## Sự miêu tả

Quy trình công việc này sử dụng công cụ GeneratorDashboard.ts để lấy dự án thịnh hành từ GitHub và tạo bảng điều khiển HTML tương tác hỗ trợ:
- Hiển thị thẻ dự án
- Biểu đồ phân bố ngôn ngữ
- Biểu đồ thanh tăng trưởng sao
- Danh sách tin tức công nghệ
- Chức năng lọc, sắp xếp và tìm kiếm theo thời gian thực

## Khi nào nên sử dụng

Sử dụng quy trình làm việc này khi người dùng yêu cầu bất kỳ thao tác nào sau đây:
- "Tạo bảng điều khiển xu hướng GitHub"
- "Tạo trang thịnh hành"
- "Tạo báo cáo trực quan"
- "bảng điều khiển xu hướng xuất khẩu"
- "Tạo các trang web tương tác"

## Các bước của quy trình làm việc

### Bước 1: Xác định thông số
Xác nhận hoặc suy ra các thông số sau từ người dùng:
- **Khoảng thời gian**: hàng ngày (hàng ngày) hoặc hàng tuần (hàng tuần, mặc định)
- **Ngôn ngữ lập trình**: tùy chọn (chẳng hạn như TypeScript, Python, Go, Rust, v.v.)
- **Số mục**: Mặc định 10
- **Bao gồm tin tức**: Có bao gồm tin tức kỹ thuật hay không
- **Số tin**: Mặc định 10
- **Đường dẫn đầu ra**: Mặc định ./github-trends.html

### Bước 2: Thực thi công cụ
Chạy công cụ GeneratorDashboard.ts:

```bash
# 基本用法（本周，10个项目）
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts

# 指定语言和新闻
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts \
  --period weekly \
  --language TypeScript \
  --limit 20 \
  --include-news \
  --news-count 15 \
  --output ~/trends.html

# 每日趋势
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts \
  --period daily \
  --output ~/daily-trends.html
```

### Bước 3: Hiển thị kết quả
Công cụ tự động:
1. Nhận dữ liệu xu hướng GitHub
2. Nhận tin tức kỹ thuật (nếu được bật)
3. Phân tích dữ liệu để tạo ra thông tin thống kê
4. Kết xuất mẫu HTML
5. Lưu vào đường dẫn đã chỉ định

### Bước 4: Xác minh và mở
Tệp HTML được tạo có chứa:
- ✅ Bố cục đáp ứng
- ✅ Hiển thị thẻ dự án
- ✅ Biểu đồ phân bố ngôn ngữ
- ✅ Biểu đồ thanh tăng trưởng sao
- ✅ Chức năng lọc theo thời gian thực
- ✅ Chức năng sắp xếp
- ✅Chức năng tìm kiếm
- ✅ Danh sách tin tức công nghệ

## Ví dụ về cách sử dụng

### Ví dụ 1: Bảng điều khiển cơ bản
```
User: "生成本周 GitHub trending 仪表板"

Assistant:
运行 GenerateDashboard 工具...
[执行命令，生成 /tmp/github-trends.html]
✅ 仪表板生成成功！已在浏览器中打开。
```

### Ví dụ 2: Dashboard có tin tức
```
User: "生成 TypeScript 项目的每日趋势，包含新闻"

Assistant:
生成 TypeScript 每日趋势仪表板，包含技术新闻...
[执行命令：--period daily --language TypeScript --include-news]
✅ 仪表板已生成到 ~/Downloads/ts-daily-trends.html
```

### Ví dụ 3: Đầu ra tùy chỉnh
```
User: "生成一个包含 20 个项目的仪表板，保存到桌面"

Assistant:
生成 20 个项目的趋势仪表板...
[执行命令：--limit 20 --output ~/Desktop/github-trends.html]
✅ 完成！文件已保存到桌面
```

## Tùy chọn công cụ

| Thông số | Mô tả | Giá trị mặc định | Giá trị tùy chọn |
|------|------|--------|--------|
| `--period` | 时间周期 | `weekly` | `daily`, `weekly` |
| `--language` | Bộ lọc ngôn ngữ lập trình | Tất cả | TypeScript, Python, Go, Rust, v.v. |
| `--limit` | Trả về số lượng mục | 10 | Bất kỳ số nguyên dương nào |
| `--include-news` | Chứa tin tức kỹ thuật | sai | - |
| `--news-count` | Số tin tức | 10 | Bất kỳ số nguyên dương nào |
| `--theme` | 主题 | `auto` | `light`, `dark`, `auto` |
| `--output` | Đường dẫn tệp đầu ra | `./github-trends.html` | Bất kỳ con đường nào |

## Tính năng đầu ra

### Trực quan hóa dữ liệu
- **Biểu đồ hình tròn phân phối ngôn ngữ**: Hiển thị tỷ lệ dự án trong từng ngôn ngữ lập trình
- **Biểu đồ thanh tăng trưởng sao**: Hiển thị mức tăng trưởng sao của 10 dự án hàng đầu

###Chức năng tương tác
- **Tìm kiếm**: Tìm kiếm theo tên dự án hoặc mô tả
- **Bộ lọc**: Lọc theo ngôn ngữ lập trình
- **Sắp xếp**: Sắp xếp theo thứ hạng, tổng số sao, mức tăng trưởng trong kỳ

### Thiết kế đáp ứng
-Hỗ trợ máy tính để bàn, máy tính bảng và điện thoại di động
- Xây dựng giao diện đẹp mắt bằng Tailwind CSS
- Phối màu theo phong cách GitHub

## Xử lý lỗi

Nếu bạn gặp lỗi:
1. **Lỗi mạng**: Kiểm tra kết nối mạng để đảm bảo bạn có thể truy cập GitHub
2. **Phân tích cú pháp không thành công**: Cấu trúc trang GitHub có thể thay đổi và công cụ sẽ hiển thị thông tin gỡ lỗi.
3. **Ghi tệp không thành công**: Kiểm tra quyền ghi của đường dẫn đầu ra

## Thông báo bằng giọng nói

Gửi thông báo bằng giọng nói khi thực hiện quy trình làm việc này:

```bash
curl -s -X POST http://localhost:8888/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "正在生成 GitHub Trending Dashboard..."}' \
  > /dev/null 2>&1 &
```

Và thông báo văn bản đầu ra:
```
Running the **GenerateDashboard** workflow from the **GitHubTrends** skill...
```

## Tích hợp với các kỹ năng khác

- **Trình duyệt**: Xác minh hiệu quả của trang HTML được tạo
- **Hệ thống**: Lưu ảnh chụp nhanh trang tổng quan vào BỘ NHỚ/
- **OSINT**: Phân tích xu hướng ngăn xếp công nghệ

## Ghi chú

- Dữ liệu được cập nhật hàng giờ (tần suất cập nhật xu hướng GitHub)
- HTML được tạo hoàn toàn khép kín, không cần máy chủ
- Tất cả các phần phụ thuộc được tải thông qua CDN (Tailwind CSS, Chart.js)
-Hỗ trợ xem ngoại tuyến (biểu đồ có dữ liệu nhúng)

## Cách sử dụng nâng cao

### Tạo hàng loạt
```bash
# 生成多个语言的仪表板
for lang in TypeScript Python Go Rust; do
  bun Tools/GenerateDashboard.ts \
    --language $lang \
    --output ~/trends-$lang.html
done
```

### Nhiệm vụ theo lịch trình
```bash
# 每小时生成一次快照
# 添加到 crontab:
0 * * * * cd ~/.claude/skills/GitHubTrends && bun Tools/GenerateDashboard.ts --output ~/trends-$(date +%H).html
```

### Chủ đề tùy chỉnh
Có thể tùy chỉnh bằng cách sửa đổi `Templates/dashboard.hbs`:
- cách phối màu
- Cấu trúc bố cục
- Đã thêm loại biểu đồ mới
- Thêm tính năng tương tác mới