Skip to content

docs: show the Action's new report in the homepage demo #85

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

Merged
shenxianpeng merged 4 commits into from
Nov 11, 2026
Merged

docs: show the Action's new report in the homepage demo #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a0b98c0
docs: show the Action's new report in the homepage demo
shenxianpeng Nov 11, 2026
0f26a40
docs: add before and after screenshots for the pull request
shenxianpeng Nov 11, 2026
c65d857
docs: remove the pull request screenshots
shenxianpeng Nov 11, 2026
e7428c8
fix: wrap the How to fix lines in the demo at every width
shenxianpeng Nov 11, 2026
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
88 changes: 50 additions & 38 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,13 +137,13 @@ conventional_branch = <span class="cc-t-pass">true</span></div>
<header class="cc-head cc-head--center">
<p class="cc-eyebrow">commit-check-action</p>
<h2 id="cc-action-title" class="cc-h2">Every pull request, checked and explained.</h2>
<p class="cc-sub">The Action reports where your reviewers already look — a PR comment, the job summary, inline annotations — and exposes a JSON result the next step can gate on.</p>
<p class="cc-sub">The Action reports where your reviewers already look — a PR comment, the job summary, annotations on the run — and exposes a JSON result the next step can gate on.</p>
</header>
<!--
The reports below follow the formats commit-check-action writes (see the
comment block above _report_footer in its main.py). The footer shows only
"Rules reference": the real one also names the installed version, which
would go stale here.
The reports below follow the formats commit-check-action writes since
v2.22.0 (see the "Output specification" comment block in its main.py). The
status marks are the ones in commit-check/.github branding/status. The
footer leaves out the installed version, which would go stale here.
-->
<div class="cc-demo" data-cycle="8200">
<div class="cc-tabs" role="tablist" aria-label="What the Action reports">
Expand All @@ -169,23 +169,27 @@ conventional_branch = <span class="cc-t-pass">true</span></div>
<div class="cc-comment__box">
<p class="cc-comment__head"><b>github-actions</b><span class="cc-chip">bot</span> commented<span class="cc-chip cc-chip--end" data-on="3600">edited</span></p>
<div class="cc-comment__body">
<p class="cc-report__title">Commit Check</p>
<div data-until="3600">
<p class="cc-verdict"><i class="cc-st cc-st--fail" aria-hidden="true"></i>2 of 5 checks failed</p>
<table class="cc-table">
<thead><tr><th>Scope</th><th>Checked value</th><th>Failed checks</th></tr></thead>
<tbody>
<tr data-on="800"><td class="cc-lnk">Commit 2/3 (5584f46)</td><td><code>bad msg</code></td><td class="cc-lnk">CC001 message</td></tr>
<tr data-on="1150"><td class="cc-lnk">Commit 3/3 (37d6def)</td><td><code>Fix: handle empty password</code></td><td class="cc-lnk">CC001 message</td></tr>
</tbody>
</table>
<p class="cc-fold">▸ Show all 5 checks</p>
<p class="cc-report__title"><svg class="cc-smark" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="15" fill="#0B1620"/><path d="M21 10V54" stroke="#F85149" stroke-opacity=".4" stroke-width="4" stroke-linecap="round"/><path d="M32 23L50 45M50 23L32 45" fill="none" stroke="#F85149" stroke-width="7" stroke-linecap="round"/><circle cx="21" cy="34" r="6.5" fill="#0B1620" stroke="#F85149" stroke-width="4"/></svg>Commit Check failed</p>
<p class="cc-groups"><span><svg class="cc-lmark" viewBox="0 0 64 64" aria-hidden="true"><path d="M26 34L34 42L52 20" fill="none" stroke="#2DA44E" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="19" cy="34" r="7" fill="none" stroke="#2DA44E" stroke-width="6"/></svg>Pull request: passed</span><span><svg class="cc-lmark" viewBox="0 0 64 64" aria-hidden="true"><path d="M34 22L54 46M54 22L34 46" fill="none" stroke="#E5484D" stroke-width="8" stroke-linecap="round"/><circle cx="19" cy="34" r="7" fill="none" stroke="#E5484D" stroke-width="6"/></svg>Commits: 2 of 3 failed</span><span><svg class="cc-lmark" viewBox="0 0 64 64" aria-hidden="true"><path d="M26 34L34 42L52 20" fill="none" stroke="#2DA44E" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="19" cy="34" r="7" fill="none" stroke="#2DA44E" stroke-width="6"/></svg>Branch: passed</span></p>
<div class="cc-diff">
<div class="cc-diff__hunk" data-on="800">@@ 5584f46 @@</div>
<div class="cc-diff__del" data-on="800">- bad msg</div>
<div class="cc-diff__note" data-on="800"># Use &lt;type&gt;(&lt;scope&gt;): &lt;description&gt;</div>
<div class="cc-diff__hunk" data-on="1150">@@ 37d6def @@</div>
<div class="cc-diff__del" data-on="1150">- Fix: handle empty password</div>
<div class="cc-diff__add" data-on="1150">+ fix: handle empty password</div>
</div>
<p class="cc-report__links">Commits: <code class="cc-lnk">5584f46</code> <code class="cc-lnk">37d6def</code> &nbsp;|&nbsp; Rules: <span class="cc-lnk">CC001</span></p>
<p class="cc-fold"><b>▸ How to fix</b></p>
<p class="cc-fold">▸ All 5 checks</p>
</div>
<div class="cc-flash" data-from="3600">
<p class="cc-verdict"><i class="cc-st cc-st--pass" aria-hidden="true"></i>All 5 checks passed</p>
<p class="cc-fold">▸ Show all 5 checks</p>
<p class="cc-report__title"><svg class="cc-smark" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="15" fill="#0B1620"/><path d="M21 10V54" stroke="#3FB950" stroke-opacity=".4" stroke-width="4" stroke-linecap="round"/><path d="M21 34L30 43L47 22" fill="none" stroke="#3FB950" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/><circle cx="21" cy="34" r="6.5" fill="#0B1620" stroke="#3FB950" stroke-width="4"/></svg>Commit Check passed</p>
<p class="cc-groups"><span><svg class="cc-lmark" viewBox="0 0 64 64" aria-hidden="true"><path d="M26 34L34 42L52 20" fill="none" stroke="#2DA44E" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="19" cy="34" r="7" fill="none" stroke="#2DA44E" stroke-width="6"/></svg>Pull request: passed</span><span><svg class="cc-lmark" viewBox="0 0 64 64" aria-hidden="true"><path d="M26 34L34 42L52 20" fill="none" stroke="#2DA44E" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="19" cy="34" r="7" fill="none" stroke="#2DA44E" stroke-width="6"/></svg>Commits: 3 passed</span><span><svg class="cc-lmark" viewBox="0 0 64 64" aria-hidden="true"><path d="M26 34L34 42L52 20" fill="none" stroke="#2DA44E" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="19" cy="34" r="7" fill="none" stroke="#2DA44E" stroke-width="6"/></svg>Branch: passed</span></p>
<p class="cc-fold">▸ All 5 checks</p>
</div>
<p class="cc-report__foot">Rules reference</p>
<p class="cc-report__foot">Checked by <span class="cc-lnk">Commit Check</span> · <span class="cc-lnk">Rules</span> · <span class="cc-lnk">Check before you push</span></p>
</div>
</div>
</div>
Expand All @@ -202,28 +206,36 @@ conventional_branch = <span class="cc-t-pass">true</span></div>
<div class="cc-window__body cc-run">
<div class="cc-run__side" aria-hidden="true"><span class="is-active">Summary</span><span class="cc-run__label">Jobs</span><span><i class="cc-st cc-st--fail"></i>commit-check</span><span class="cc-run__label">Run details</span><span class="cc-dim">Usage</span><span class="cc-dim">Workflow file</span></div>
<div class="cc-run__main">
<div class="cc-run__meta"><p>Triggered via pull_request<b>alex pushed 5584f46</b></p><p>Status<b>Failure</b></p><p>Total duration<b>14s</b></p></div>
<div class="cc-card">
<p class="cc-card__head">commit-check summary</p>
<div class="cc-card__body">
<p class="cc-report__title">Commit Check</p>
<p class="cc-verdict"><i class="cc-st cc-st--fail" aria-hidden="true"></i>2 of 5 checks failed</p>
<p class="cc-fold">▾ Show all 5 checks</p>
<div class="cc-tree">
<div class="cc-b" data-on="500">Commit message</div>
<div data-on="670"> <span class="cc-t-okd">✔</span> PR title (feat: add login page)</div>
<div data-on="840"> <span class="cc-t-okd">✔</span> Commit 1/3 (d87faca) (feat: add login page)</div>
<div data-on="1010"> <span class="cc-t-bad">✖</span> Commit 2/3 (5584f46) (1 failure)</div>
<div class="cc-b" data-on="1180"> CC001 message</div>
<div class="cc-dim" data-on="1350"> value: bad msg</div>
<div class="cc-dim cc-hang" data-on="1520"> Suggest: Use &lt;type&gt;(&lt;scope&gt;): &lt;description&gt;, where &lt;type&gt; is one of: feat, fix, docs, style, refactor, test, chore, perf, build, ci</div>
<div data-on="1690"> <span class="cc-t-bad">✖</span> Commit 3/3 (37d6def) (1 failure)</div>
<div class="cc-b" data-on="1860"> CC001 message</div>
<div class="cc-dim" data-on="2030"> value: Fix: handle empty password</div>
<div class="cc-t-okd cc-b" data-on="2200"> Fix: fix: handle empty password</div>
<div class="cc-b" data-on="2370">Branch</div>
<div data-on="2540"> <span class="cc-t-okd">✔</span> Branch (feature/add-login)</div>
<p class="cc-report__title"><svg class="cc-smark" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="15" fill="#0B1620"/><path d="M21 10V54" stroke="#F85149" stroke-opacity=".4" stroke-width="4" stroke-linecap="round"/><path d="M32 23L50 45M50 23L32 45" fill="none" stroke="#F85149" stroke-width="7" stroke-linecap="round"/><circle cx="21" cy="34" r="6.5" fill="#0B1620" stroke="#F85149" stroke-width="4"/></svg>Commit Check failed</p>
<p class="cc-groups"><span><svg class="cc-lmark" viewBox="0 0 64 64" aria-hidden="true"><path d="M26 34L34 42L52 20" fill="none" stroke="#2DA44E" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="19" cy="34" r="7" fill="none" stroke="#2DA44E" stroke-width="6"/></svg>Pull request: passed</span><span><svg class="cc-lmark" viewBox="0 0 64 64" aria-hidden="true"><path d="M34 22L54 46M54 22L34 46" fill="none" stroke="#E5484D" stroke-width="8" stroke-linecap="round"/><circle cx="19" cy="34" r="7" fill="none" stroke="#E5484D" stroke-width="6"/></svg>Commits: 2 of 3 failed</span><span><svg class="cc-lmark" viewBox="0 0 64 64" aria-hidden="true"><path d="M26 34L34 42L52 20" fill="none" stroke="#2DA44E" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="19" cy="34" r="7" fill="none" stroke="#2DA44E" stroke-width="6"/></svg>Branch: passed</span></p>
<div class="cc-diff">
<div class="cc-diff__hunk">@@ 5584f46 @@</div>
<div class="cc-diff__del">- bad msg</div>
<div class="cc-diff__note"># Use &lt;type&gt;(&lt;scope&gt;): &lt;description&gt;</div>
<div class="cc-diff__hunk">@@ 37d6def @@</div>
<div class="cc-diff__del">- Fix: handle empty password</div>
<div class="cc-diff__add">+ fix: handle empty password</div>
</div>
<p class="cc-report__links">Commits: <code class="cc-lnk">5584f46</code> <code class="cc-lnk">37d6def</code> &nbsp;|&nbsp; Rules: <span class="cc-lnk">CC001</span></p>
<p class="cc-fold"><b>▾ How to fix</b></p>
<div class="cc-howto">
<p data-on="500"><b>With an AI coding agent.</b> Paste this prompt:</p>
<div class="cc-tree" data-on="900">
<div>Fix these Commit Check findings without changing any code:</div>
<div>- Commit 5584f46 "bad msg": Use &lt;type&gt;(&lt;scope&gt;): &lt;description&gt;</div>
<div>- Commit 37d6def: change "Fix: handle empty password" to "fix: handle empty password"</div>
</div>
<p data-on="1900"><b>Commit messages.</b> Reword them, then force-push:</p>
<div class="cc-tree" data-on="2300">
<div>git rebase -i 5584f46~1 <span class="cc-dim"># change "pick" to "reword" on the commits above</span></div>
<div>git push --force-with-lease</div>
</div>
</div>
<p class="cc-fold">▸ All 5 checks</p>
<p class="cc-report__foot">Checked by <span class="cc-lnk">Commit Check</span> · <span class="cc-lnk">Rules</span> · <span class="cc-lnk">Check before you push</span></p>
</div>
</div>
</div>
Expand Down Expand Up @@ -277,8 +289,8 @@ conventional_branch = <span class="cc-t-pass">true</span></div>
</div>
<div class="cc-card">
<p class="cc-card__head">Annotations <span class="cc-dim">2 errors</span></p>
<div class="cc-annot" data-on="2000"><p class="cc-annot__title"><i class="cc-st cc-st--fail" aria-hidden="true"></i>CC001 message</p><p class="cc-mono">Commit 2/3 (5584f46): The commit message should follow Conventional Commits.<br>value: bad msg<br>Suggest: Use &lt;type&gt;(&lt;scope&gt;): &lt;description&gt;, where &lt;type&gt; is one of: feat, fix, docs, …</p></div>
<div class="cc-annot" data-on="2700"><p class="cc-annot__title"><i class="cc-st cc-st--fail" aria-hidden="true"></i>CC001 message</p><p class="cc-mono">Commit 3/3 (37d6def): The commit message should follow Conventional Commits.<br>value: Fix: handle empty password<br><b class="cc-t-okd">Fix: fix: handle empty password</b></p></div>
<div class="cc-annot" data-on="2000"><p class="cc-annot__title"><i class="cc-st cc-st--fail" aria-hidden="true"></i>CC001 message</p><p class="cc-mono">Commit 2/3 (5584f46) "bad msg": Use &lt;type&gt;(&lt;scope&gt;): &lt;description&gt;<br>The commit message should follow Conventional Commits.</p></div>
<div class="cc-annot" data-on="2700"><p class="cc-annot__title"><i class="cc-st cc-st--fail" aria-hidden="true"></i>CC001 message</p><p class="cc-mono">Commit 3/3 (37d6def): change "Fix: handle empty password" to "<b class="cc-t-okd">fix: handle empty password</b>"<br>The commit message should follow Conventional Commits.</p></div>
</div>
</div>
</div>
Expand Down
167 changes: 94 additions & 73 deletions docs/stylesheets/landing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -948,8 +948,10 @@
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* As tall as the tallest panel, so the page below does not move when the
tabs cycle or the report in the comment turns from failed to passed. */
.cc-demo.is-ready .cc-window {
min-height: 600px;
min-height: 722px;
}

.cc-window .cc-dim {
Expand Down Expand Up @@ -1217,65 +1219,119 @@
.cc-comment__body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 18px 14px;
gap: 10px;
padding: 14px 18px 12px;
}

.cc-comment__body > div {
display: flex;
flex-direction: column;
gap: 12px;
gap: 10px;
border-radius: 8px;
}

.md-typeset .cc-report__title {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #e3e9ed;
font-size: 19px;
font-weight: 700;
}

.md-typeset .cc-verdict {
/* The status marks the Action links to (commit-check/.github,
branding/status): the tile for the heading, the bare mark for a line. */
.cc-smark {
flex-shrink: 0;
width: 22px;
height: 22px;
}

.cc-lmark {
flex-shrink: 0;
width: 16px;
height: 16px;
}

.md-typeset .cc-groups {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13.5px;
}

.cc-groups > span {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
gap: 7px;
}

.md-typeset .cc-table {
width: 100%;
border: 1px solid var(--w-line);
/* A ```diff block as GitHub colours it: removed, added, hunk, comment. */
.cc-diff {
padding: 6px 0;
border-radius: 8px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--w-soft);
font-family: var(--cc-mono);
font-size: 12.5px;
line-height: 19px;
}

.cc-diff > div {
padding: 0 14px;
white-space: pre-wrap;
overflow-wrap: anywhere;
}

.cc-diff__hunk {
font-weight: 700;
color: #8250df;
}

.cc-diff__del {
background: #ffebe9;
color: #82071e;
}

.cc-diff__add {
background: #dafbe1;
color: #116329;
}

.cc-diff__note {
color: #59636e;
}

/* The opened "How to fix" fold: a sentence, then the block to copy. */
.cc-howto {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13.5px;
}

.md-typeset .cc-table th,
.md-typeset .cc-table td {
padding: 9px 12px;
border-bottom: 1px solid #e8edf0;
text-align: left;
vertical-align: top;
.cc-howto .cc-tree {
padding: 9px 14px;
Comment thread
shenxianpeng marked this conversation as resolved.
Resolved
}

.md-typeset .cc-table th {
background: var(--w-soft);
font-weight: 600;
/* The prompt and the commands are long lines: wrap them at every width, so
a narrow window never cuts their end off. */
.cc-howto .cc-tree > div {
white-space: pre-wrap;
overflow-wrap: anywhere;
}

.md-typeset .cc-table tr:last-child td {
border-bottom: 0;
.md-typeset .cc-report__links {
font-size: 12px;
color: var(--w-muted);
}

.md-typeset .cc-table code {
.md-typeset .cc-report__links code {
padding: 1px 5px;
border-radius: 4px;
background: #f1f4f6;
font-family: var(--cc-mono);
font-size: 12.5px;
font-size: 11.5px;
}

.cc-lnk {
Expand All @@ -1291,10 +1347,18 @@
color: var(--w-muted);
}

.md-typeset .cc-fold b {
color: var(--w-text);
}

/* Two folds in a row sit closer than the report's other parts. */
.md-typeset .cc-fold + .cc-fold {
margin-top: -5px;
}

.md-typeset .cc-report__foot {
font-size: 12.5px;
font-style: italic;
color: #176b89;
font-size: 12px;
color: var(--w-muted);
}

.md-typeset .cc-event {
Expand Down Expand Up @@ -1375,28 +1439,6 @@
padding: 20px 24px;
}

.cc-run__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 36px;
padding: 12px 16px;
border: 1px solid var(--w-line);
border-radius: 10px;
background: #ffffff;
}

.md-typeset .cc-run__meta p {
display: flex;
flex-direction: column;
font-size: 13px;
color: #5b6d7a;
}

.cc-run__meta b {
font-size: 14px;
color: var(--w-text);
}

.cc-card {
border: 1px solid var(--w-line);
border-radius: 10px;
Expand Down Expand Up @@ -2360,27 +2402,6 @@
margin-left: 0;
}

/* The report table turns into one block per failing scope. */
.md-typeset .cc-table thead {
display: none;
}

.md-typeset .cc-table tr {
display: flex;
flex-direction: column;
padding: 8px 10px;
border-bottom: 1px solid #e8edf0;
}

.md-typeset .cc-table tr:last-child {
border-bottom: 0;
}

.md-typeset .cc-table td {
padding: 1px 0;
border: 0;
}

.cc-tree {
font-size: 11.5px;
line-height: 18px;
Expand Down