Skip to content

docs: unify README and Chrome Web Store screenshots #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
rrbe wants to merge 1 commit into from
Closed

docs: unify README and Chrome Web Store screenshots #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 32 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ Better GitHub is a Chrome extension that enhances the GitHub experience. Inspire
| :---: | :---: |
| <img src="docs/screenshots/main_screenshot_without_better_github.png" alt="GitHub without Better GitHub" width="600" /> | <img src="docs/screenshots/main_screenshot_with_better_github.png" alt="GitHub with Better GitHub" width="600" /> |

Screenshots below are illustrative scenarios based on the extension UI, using `rrbe/better-github` throughout.

## Feature Details

### Home
Expand All @@ -28,7 +30,7 @@ Better GitHub is a Chrome extension that enhances the GitHub experience. Inspire

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/better-top-repositories.png" alt="Better Top Repositories" width="300" />
<img src="docs/screenshots/better-top-repositories.png" alt="Better Top Repositories" width="800" />
</details>

### PRs and issues
Expand All @@ -37,37 +39,42 @@ Better GitHub is a Chrome extension that enhances the GitHub experience. Inspire

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/pr-issue-default-sort.png" alt="Default Sort by Updated" width="600" />
<img src="docs/screenshots/pr-issue-default-sort.png" alt="Default Sort by Updated" width="800" />
</details>

- **PR Branch Names** — Display source branch name next to each PR title. Click to copy.

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/pr-branch-name.png" alt="PR Branch Names" width="600" />
<img src="docs/screenshots/pr-branch-name.png" alt="PR Branch Names" width="800" />
</details>

- **PR Conflict Indicator** — Show a warning on PR list items that have merge conflicts. This is a read-only status and does not create or modify repository labels. Requires a token.

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/pr-conflict-indicator.png" alt="PR Conflict Indicator" width="800" />
</details>

- **PR Review Status** — Show review thread resolution status (resolved / unresolved) on the PR list. Only appears on PRs that have review threads; PRs without any review comments won't show a badge. Draft PRs are also excluded.

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/pr-review-status.png" alt="PR Review Status" width="430" />
<img src="docs/screenshots/pr-review-status.png" alt="PR Review Status" width="800" />
</details>

- **PR Diff Stats** — Show additions, deletions, and changed file count (e.g. `+223 −114 · 5 files`) on each row of the PR list. Requires a token.

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/pr-commit-diff-stats.png" alt="PR Diff Stats" width="430" />
<img src="docs/screenshots/pr-diff-stats.png" alt="PR Diff Stats" width="800" />
</details>

- **PR Label Position** — Move labels to the front of PR titles for better visibility and scanning.

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/pr-label-position.png" alt="PR Label Position" width="500" />
<img src="docs/screenshots/pr-label-position.png" alt="PR Label Position" width="800" />
</details>

### PR details
Expand All @@ -76,15 +83,14 @@ Better GitHub is a Chrome extension that enhances the GitHub experience. Inspire

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/pr-quick-approve.png" alt="PR Approve Now" width="300" />
<img src="docs/screenshots/pr-quick-approve.png" alt="PR Approve Now" width="800" />
</details>

- **Collapse/Expand All Files** — Add buttons to the diff toolbar to collapse or expand all file diffs in one click, plus a button inside the file tree to collapse or expand all folders. Works on PR, commit, and compare pages, and compatible with both the old and the new "Files changed" experience.

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/pr-collapse-expand-1.png" alt="Collapse/Expand All Files" width="600" />
<img src="docs/screenshots/pr-collapse-expand-2.png" alt="Collapse/Expand All Files" width="300" />
<img src="docs/screenshots/pr-collapse-expand.png" alt="Collapse/Expand All Files" width="800" />
</details>

### Profile
Expand All @@ -93,7 +99,7 @@ Better GitHub is a Chrome extension that enhances the GitHub experience. Inspire

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/contributor-card.png" alt="Contributor Card" width="430" />
<img src="docs/screenshots/contributor-card.png" alt="Contributor Card" width="800" />
</details>

### Commits
Expand All @@ -102,20 +108,25 @@ Better GitHub is a Chrome extension that enhances the GitHub experience. Inspire

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/commit-tags.png" alt="Commit Tags" width="300" />
<img src="docs/screenshots/commit-tags.png" alt="Commit Tags" width="800" />
</details>

- **Commit Diff Stats** — Show additions, deletions, and changed file count (e.g. `+223 −114 · 5 files`) on each row of the commits list page. Requires a token.

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/pr-commit-diff-stats.png" alt="Commit Diff Stats" width="430" />
<img src="docs/screenshots/commit-diff-stats.png" alt="Commit Diff Stats" width="800" />
</details>

### Repository

- **Release Asset Downloads** — Show the download count for every release asset, including zero-download assets that GitHub may leave blank. GitHub's native counts are still rolling out; disable this feature in the extension options if both counts appear.

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/release-asset-downloads.png" alt="Release Asset Downloads" width="800" />
</details>

- **Releases Tab** — Add a Releases tab to the repository navigation bar for quick access.

<details>
Expand All @@ -127,23 +138,28 @@ Better GitHub is a Chrome extension that enhances the GitHub experience. Inspire

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/watch-fork-star-popup.png" alt="Watch/Fork/Star Popup" width="400" />
<img src="docs/screenshots/watch-fork-star-popup.png" alt="Watch/Fork/Star Popup" width="800" />
</details>

- **Recent Commit Message Color** — Highlight recent commits with color based on their age, making it easy to spot the latest changes. Always on.
- **Recent Commit Age Color** — Color the relative commit times in the repository file list by age, making recent changes easier to spot. Always on.

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/file-age-color.png" alt="Recent Commit Message Color" width="600" />
<img src="docs/screenshots/file-age-color.png" alt="Recent Commit Age Color" width="800" />
</details>

### Features that cannot be disabled

A few small features have little impact on the page experience. To avoid adding too many settings, they stay enabled after you install the extension:

- Recent Commit Message Color
- Recent Commit Age Color
- Copy PR/Issue numbers

<details>
<summary>Screenshot</summary>
<img src="docs/screenshots/number-copy.png" alt="Copy PR and issue numbers" width="800" />
</details>

## Installation

### Chrome Web Store
Expand Down
48 changes: 32 additions & 16 deletions README_CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ Better GitHub 是一个增强 GitHub 使用体验的 Chrome 插件，灵感源
| :----------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------: |
| <img src="docs/screenshots/main_screenshot_without_better_github.png" alt="未使用 Better GitHub 的 GitHub 页面" width="600" /> | <img src="docs/screenshots/main_screenshot_with_better_github.png" alt="使用 Better GitHub 后的 GitHub 页面" width="600" /> |

以下截图基于扩展界面制作示例场景，统一使用 `rrbe/better-github` 仓库。

## 功能详情

### 首页
Expand All @@ -28,7 +30,7 @@ Better GitHub 是一个增强 GitHub 使用体验的 Chrome 插件，灵感源

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/better-top-repositories.png" alt="Better Top Repositories" width="300" />
<img src="docs/screenshots/better-top-repositories.png" alt="Better Top Repositories" width="800" />
</details>

### PR 和 Issue
Expand All @@ -37,37 +39,42 @@ Better GitHub 是一个增强 GitHub 使用体验的 Chrome 插件，灵感源

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/pr-issue-default-sort.png" alt="默认按更新时间排序" width="600" />
<img src="docs/screenshots/pr-issue-default-sort.png" alt="默认按更新时间排序" width="800" />
</details>

- **PR 分支名显示** — 在 PR 标题旁显示源分支名，点击即可复制。

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/pr-branch-name.png" alt="PR 分支名与 Review 状态" width="600" />
<img src="docs/screenshots/pr-branch-name.png" alt="PR 分支名与 Review 状态" width="800" />
</details>

- **PR 冲突标识** — 在存在合并冲突的 PR 列表项上显示警告。只读取状态，不会创建或修改仓库 Label。需要 token。

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/pr-conflict-indicator.png" alt="PR 冲突标识" width="800" />
</details>

- **PR Review 状态** — 在 PR 列表展示 review thread 的解决状态（已解决 / 未解决）。仅在 PR 存在 review thread 时显示，没有 review 评论的 PR 不会出现标记，draft PR 也不会。

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/pr-review-status.png" alt="PR Review 状态" width="430" />
<img src="docs/screenshots/pr-review-status.png" alt="PR Review 状态" width="800" />
</details>

- **PR Diff 统计** — 在 PR 列表的每一行展示新增行数、删除行数与变更文件数（例如 `+223 −114 · 5 files`）。需要 token。

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/pr-commit-diff-stats.png" alt="PR Diff 统计" width="430" />
<img src="docs/screenshots/pr-diff-stats.png" alt="PR Diff 统计" width="800" />
</details>

- **PR Label 前置** — 将 PR 标签移到标题前方，提升可读性和浏览效率。

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/pr-label-position.png" alt="PR Label 前置" width="500" />
<img src="docs/screenshots/pr-label-position.png" alt="PR Label 前置" width="800" />
</details>

### PR 详情页
Expand All @@ -76,15 +83,14 @@ Better GitHub 是一个增强 GitHub 使用体验的 Chrome 插件，灵感源

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/pr-quick-approve.png" alt="PR 快速 Approve" width="300" />
<img src="docs/screenshots/pr-quick-approve.png" alt="PR 快速 Approve" width="800" />
</details>

- **一键折叠/展开所有文件** — 在 diff 工具栏添加按钮，一键折叠或展开所有文件 diff；同时在文件树侧边栏添加按钮，一键折叠或展开所有目录。适用于 PR、commit 和 compare 页面，兼容新旧两种 "Files changed" 体验。

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/pr-collapse-expand-1.png" alt="一键折叠/展开所有文件" width="600" />
<img src="docs/screenshots/pr-collapse-expand-2.png" alt="一键折叠/展开所有文件" width="300" />
<img src="docs/screenshots/pr-collapse-expand.png" alt="一键折叠/展开所有文件" width="800" />
</details>

### 用户
Expand All @@ -93,7 +99,7 @@ Better GitHub 是一个增强 GitHub 使用体验的 Chrome 插件，灵感源

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/contributor-card.png" alt="贡献者背景卡" width="430" />
<img src="docs/screenshots/contributor-card.png" alt="贡献者背景卡" width="800" />
</details>

### Commits
Expand All @@ -102,20 +108,25 @@ Better GitHub 是一个增强 GitHub 使用体验的 Chrome 插件，灵感源

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/commit-tags.png" alt="Commit 标签显示" width="300" />
<img src="docs/screenshots/commit-tags.png" alt="Commit 标签显示" width="800" />
</details>

- **Commit Diff 统计** — 在 commits 列表页的每一行展示新增行数、删除行数与变更文件数（例如 `+223 −114 · 5 files`）。需要 token。

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/pr-commit-diff-stats.png" alt="Commit Diff 统计" width="430" />
<img src="docs/screenshots/commit-diff-stats.png" alt="Commit Diff 统计" width="800" />
</details>

### 仓库页面

- **Release 资源下载量** — 显示每个 Release 资源的下载次数，包括 GitHub 可能留空的零下载资源。GitHub 原生下载量仍在灰度中；如果页面同时出现两份下载量，可在扩展选项中关闭此功能。

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/release-asset-downloads.png" alt="Release 资源下载量" width="800" />
</details>

- **Releases Tab** — 在仓库导航栏添加 Releases 标签页，快速访问。

<details>
Expand All @@ -127,23 +138,28 @@ Better GitHub 是一个增强 GitHub 使用体验的 Chrome 插件，灵感源

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/watch-fork-star-popup.png" alt="Watch/Fork/Star 悬浮预览" width="400" />
<img src="docs/screenshots/watch-fork-star-popup.png" alt="Watch/Fork/Star 悬浮预览" width="800" />
</details>

- **最近提交 Commit Message 颜色** — 根据提交时间为最近的几个 commit message 添加颜色，帮助快速定位最新提交。常驻开启。
- **最近提交时间着色** — 根据提交时间为仓库文件列表中的相对时间着色，帮助快速定位最近更新的文件。常驻开启。

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/file-age-color.png" alt="最近修改文件颜色" width="600" />
<img src="docs/screenshots/file-age-color.png" alt="最近提交时间着色" width="800" />
</details>

### 无法关闭的功能

有一些小功能，对页面体验没有太多实质影响，我不想设置太多开关，于是装上插件后他们总是保持开启

- 最近提交 Commit Message 颜色
- 最近提交时间着色
- PR/Issue number copy

<details>
<summary>示例截图</summary>
<img src="docs/screenshots/number-copy.png" alt="复制 PR 和 Issue 编号" width="800" />
</details>

## 安装

### 通过 Chrome Web Store
Expand Down
10 changes: 5 additions & 5 deletions docs/promo/build.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ const NAME = "Better GitHub";
const defs = (side, glowX, glowY, glowR) => `
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#0d1117"/>
<stop offset="1" stop-color="#161b22"/>
<stop offset="0" stop-color="#101821"/>
<stop offset="1" stop-color="#12382f"/>
</linearGradient>
<radialGradient id="glow" cx="${glowX}" cy="${glowY}" r="${glowR}" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#2ea043" stop-opacity="0.5"/>
Expand All @@ -43,8 +43,8 @@ const marquee = `<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="14
<image href="${LOGO}" x="130" y="${610}" width="180" height="180"/>
<g font-family="${FONT}">
<text x="350" y="${690}" font-size="92" font-weight="800" fill="#ffffff" letter-spacing="-2">${NAME}</text>
<text x="354" y="${752}" font-size="34" font-weight="400" fill="#8b949e">Improve usability of GitHub PR, issue &amp; other pages</text>
<rect x="356" y="${780}" width="116" height="6" rx="3" fill="#2ea043"/>
<text x="354" y="${752}" font-size="34" font-weight="400" fill="#c1d4cf">See the details that matter, right on GitHub.</text>
<rect x="356" y="${787}" width="116" height="6" rx="3" fill="#3fb950"/>
</g>
</svg>`;

Expand All @@ -55,7 +55,7 @@ const small = `<svg xmlns="http://www.w3.org/2000/svg" width="440" height="440"
<g font-family="${FONT}" text-anchor="middle">
<text x="220" y="${276}" font-size="40" font-weight="800" fill="#ffffff" letter-spacing="-1">${NAME}</text>
<rect x="186" y="${294}" width="68" height="5" rx="2.5" fill="#2ea043"/>
<text x="220" y="${328}" font-size="16" font-weight="400" fill="#8b949e">Improve GitHub PR &amp; issue pages</text>
<text x="220" y="${328}" font-size="16" font-weight="400" fill="#c1d4cf">Clearer pull requests and repos</text>
</g>
</svg>`;

Expand Down
Binary file modified docs/promo/marquee.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading