mirror of
https://github.com/github/gh-stack.git
synced 2026-09-14 20:26:28 +08:00
minor docs styling & content updates (#48)
* udpate meta tags for docs site * stack diagram styling fixes * update favicon * recommend gh skill to install skills file
This commit is contained in:
Sameen Karim
@@ -21,7 +21,7 @@ Requires the [GitHub CLI](https://cli.github.com/) (`gh`) v2.0+.
|
||||
Install the gh-stack skill so your AI coding agent knows how to work with stacked PRs and the `gh stack` CLI:
|
||||
|
||||
```sh
|
||||
npx skills add github/gh-stack
|
||||
gh skill install github/gh-stack
|
||||
```
|
||||
|
||||
## Quick start
|
||||
|
||||
+10
-2
@@ -13,14 +13,22 @@ export default defineConfig({
|
||||
integrations: [
|
||||
starlight({
|
||||
title: 'GitHub Stacked PRs',
|
||||
description: 'Manage stacked branches and pull requests with the gh stack CLI extension.',
|
||||
description: 'Break large changes into small, reviewable pull requests that build on each other — with native GitHub support and the gh stack CLI.',
|
||||
favicon: '/favicon.svg',
|
||||
logo: {
|
||||
src: './src/assets/github-invertocat.svg',
|
||||
alt: 'GitHub',
|
||||
},
|
||||
head: [
|
||||
{ tag: 'meta', attrs: { name: 'robots', content: 'noindex, nofollow' } },
|
||||
{ tag: 'meta', attrs: { property: 'og:type', content: 'website' } },
|
||||
{ tag: 'meta', attrs: { property: 'og:site_name', content: 'GitHub Stacked PRs' } },
|
||||
{ tag: 'meta', attrs: { property: 'og:image', content: 'https://github.github.com/gh-stack/github-social-card.jpg' } },
|
||||
{ tag: 'meta', attrs: { property: 'og:image:alt', content: 'GitHub Stacked PRs — Break large changes into small, reviewable pull requests' } },
|
||||
{ tag: 'meta', attrs: { property: 'og:image:width', content: '1200' } },
|
||||
{ tag: 'meta', attrs: { property: 'og:image:height', content: '630' } },
|
||||
{ tag: 'meta', attrs: { name: 'twitter:card', content: 'summary_large_image' } },
|
||||
{ tag: 'meta', attrs: { name: 'twitter:site', content: '@github' } },
|
||||
{ tag: 'meta', attrs: { name: 'twitter:image', content: 'https://github.github.com/gh-stack/github-social-card.jpg' } },
|
||||
],
|
||||
components: {
|
||||
SocialIcons: './src/components/CustomHeader.astro',
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96" width="16" height="16">
|
||||
<style>path{fill:#1F2328}@media(prefers-color-scheme:dark){path{fill:#fff}}</style>
|
||||
<path
|
||||
d="M7.122.392a1.75 1.75 0 0 1 1.756 0l5.003 2.902c.83.481.83 1.68 0 2.162L8.878 8.358a1.75 1.75 0 0 1-1.756 0L2.119 5.456a1.251 1.251 0 0 1 0-2.162ZM8.125 1.69a.248.248 0 0 0-.25 0l-4.63 2.685 4.63 2.685a.248.248 0 0 0 .25 0l4.63-2.685ZM1.601 7.789a.75.75 0 0 1 1.025-.273l5.249 3.044a.248.248 0 0 0 .25 0l5.249-3.044a.75.75 0 0 1 .752 1.298l-5.248 3.044a1.75 1.75 0 0 1-1.756 0L1.874 8.814A.75.75 0 0 1 1.6 7.789Zm0 3.5a.75.75 0 0 1 1.025-.273l5.249 3.044a.248.248 0 0 0 .25 0l5.249-3.044a.75.75 0 0 1 .752 1.298l-5.248 3.044a1.75 1.75 0 0 1-1.756 0l-5.248-3.044a.75.75 0 0 1-.273-1.025Z" />
|
||||
<path d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 6.69539e-07 48.9043 4.309e-07C21.8203 1.92261e-07 -1.9479e-07 22.1074 -4.3343e-07 49.1914C-6.20631e-07 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 782 B After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@@ -1,48 +0,0 @@
|
||||
<svg width="100%" viewBox="0 0 480 340" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
text { font-family: -apple-system, "system-ui", "Segoe UI", sans-serif; }
|
||||
.trunk-box { fill: rgba(128,128,128,0.1); stroke: rgba(128,128,128,0.4); stroke-width: 1; }
|
||||
.trunk-text { fill: #1f1f1f; font-size: 14px; font-weight: 500; }
|
||||
.branch-box { fill: rgba(9,105,218,0.12); stroke: #0969da; stroke-width: 1; }
|
||||
.branch-text { fill: #1f1f1f; font-size: 14px; font-weight: 500; }
|
||||
.arrow-line { stroke: #1f1f1f; stroke-width: 1.5; opacity: 0.4; }
|
||||
.annotation { fill: #1f1f1f; font-size: 12px; font-style: italic; opacity: 0.5; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.trunk-text, .branch-text { fill: #fff; }
|
||||
.arrow-line { stroke: #fff; }
|
||||
.annotation { fill: #fff; }
|
||||
}
|
||||
</style>
|
||||
<defs>
|
||||
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||
<path d="M2 1L8 5L2 9" fill="none" stroke="#1f1f1f" stroke-opacity="0.4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<g>
|
||||
<rect x="80" y="262" width="220" height="44" rx="8" class="trunk-box"/>
|
||||
<text x="190" y="284" text-anchor="middle" dominant-baseline="central" class="trunk-text">main</text>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<rect x="80" y="188" width="220" height="44" rx="8" class="branch-box"/>
|
||||
<text x="190" y="210" text-anchor="middle" dominant-baseline="central" class="branch-text">PR #1 · auth-layer</text>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<rect x="80" y="114" width="220" height="44" rx="8" class="branch-box"/>
|
||||
<text x="190" y="136" text-anchor="middle" dominant-baseline="central" class="branch-text">PR #2 · api-endpoints</text>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<rect x="80" y="40" width="220" height="44" rx="8" class="branch-box"/>
|
||||
<text x="190" y="62" text-anchor="middle" dominant-baseline="central" class="branch-text">PR #3 · frontend</text>
|
||||
</g>
|
||||
|
||||
<line x1="190" y1="262" x2="190" y2="232" marker-end="url(#arrow)" class="arrow-line"/>
|
||||
<line x1="190" y1="188" x2="190" y2="158" marker-end="url(#arrow)" class="arrow-line"/>
|
||||
<line x1="190" y1="114" x2="190" y2="84" marker-end="url(#arrow)" class="arrow-line"/>
|
||||
|
||||
<text x="320" y="210" dominant-baseline="central" class="annotation">← bottom</text>
|
||||
<text x="320" y="62" dominant-baseline="central" class="annotation">← top</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,62 @@
|
||||
---
|
||||
/**
|
||||
* Inline SVG stack diagram — uses currentColor to inherit text color from the
|
||||
* parent element, which is styled via external CSS. This avoids Safari bugs
|
||||
* where @media (prefers-color-scheme) doesn't work inside SVG elements.
|
||||
*/
|
||||
---
|
||||
<div class="stack-diagram-wrapper" style="max-width: 520px; margin: 1.5rem auto;">
|
||||
<svg width="100%" viewBox="-100 0 580 340" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A stack of pull requests: main at the bottom, with auth-layer (PR #1), api-endpoints (PR #2), and frontend (PR #3) stacked on top">
|
||||
<style>
|
||||
text { font-family: 'Mona Sans', -apple-system, "system-ui", "Segoe UI", sans-serif; }
|
||||
.trunk-box { fill: rgba(128,128,128,0.1); stroke: rgba(128,128,128,0.4); stroke-width: 1; }
|
||||
.trunk-text { fill: currentColor; font-size: 14px; font-weight: 600; }
|
||||
.branch-box { fill: rgba(9,105,218,0.12); stroke: #0969da; stroke-width: 1; }
|
||||
.branch-text { fill: currentColor; font-size: 14px; font-weight: 600; }
|
||||
.arrow-line { stroke: currentColor; stroke-width: 1.5; opacity: 0.4; }
|
||||
.arrow-marker { stroke: currentColor; stroke-opacity: 0.9; }
|
||||
.annotation { fill: currentColor; font-size: 14px; font-style: italic; opacity: 0.6; font-weight: 600; }
|
||||
</style>
|
||||
<defs>
|
||||
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||
<path d="M2 1L8 5L2 9" fill="none" class="arrow-marker" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<g>
|
||||
<rect x="80" y="262" width="220" height="44" rx="8" class="trunk-box"/>
|
||||
<text x="190" y="284" text-anchor="middle" dominant-baseline="central" class="trunk-text">main</text>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<rect x="80" y="188" width="220" height="44" rx="8" class="branch-box"/>
|
||||
<text x="190" y="210" text-anchor="middle" dominant-baseline="central" class="branch-text">PR #1 · auth-layer</text>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<rect x="80" y="114" width="220" height="44" rx="8" class="branch-box"/>
|
||||
<text x="190" y="136" text-anchor="middle" dominant-baseline="central" class="branch-text">PR #2 · api-endpoints</text>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<rect x="80" y="40" width="220" height="44" rx="8" class="branch-box"/>
|
||||
<text x="190" y="62" text-anchor="middle" dominant-baseline="central" class="branch-text">PR #3 · frontend</text>
|
||||
</g>
|
||||
|
||||
<line x1="190" y1="262" x2="190" y2="232" marker-end="url(#arrow)" class="arrow-line"/>
|
||||
<line x1="190" y1="188" x2="190" y2="158" marker-end="url(#arrow)" class="arrow-line"/>
|
||||
<line x1="190" y1="114" x2="190" y2="84" marker-end="url(#arrow)" class="arrow-line"/>
|
||||
|
||||
<text x="320" y="210" dominant-baseline="central" class="annotation">← bottom</text>
|
||||
<text x="320" y="62" dominant-baseline="central" class="annotation">← top</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stack-diagram-wrapper {
|
||||
color: #1f1f1f;
|
||||
}
|
||||
:root[data-theme='dark'] .stack-diagram-wrapper {
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@@ -23,6 +23,12 @@ gh extension install github/gh-stack
|
||||
|
||||
If you use AI coding agents (like GitHub Copilot), install the gh-stack skill so they know how to work with Stacked PRs:
|
||||
|
||||
```sh
|
||||
gh skill install github/gh-stack
|
||||
```
|
||||
|
||||
Or if you prefer to use `npx skills`:
|
||||
|
||||
```sh
|
||||
npx skills add github/gh-stack
|
||||
```
|
||||
|
||||
@@ -191,6 +191,12 @@ The `unstack` command deletes the stack on GitHub first, then removes local trac
|
||||
|
||||
AI coding agents (like GitHub Copilot) can create and manage Stacked PRs on your behalf. Install the gh-stack skill to give them the context they need:
|
||||
|
||||
```sh
|
||||
gh skill install github/gh-stack
|
||||
```
|
||||
|
||||
Or if you prefer to use `npx skills`:
|
||||
|
||||
```sh
|
||||
npx skills add github/gh-stack
|
||||
```
|
||||
|
||||
@@ -17,7 +17,7 @@ hero:
|
||||
|
||||
import { Card, CardGrid, Aside } from '@astrojs/starlight/components';
|
||||
import { Image } from 'astro:assets';
|
||||
import stackDiagram from '../../assets/stack-diagram.svg';
|
||||
import StackDiagram from '../../components/StackDiagram.astro';
|
||||
import stackNavigator from '../../assets/screenshots/stack-navigator.png';
|
||||
|
||||
<CardGrid>
|
||||
@@ -31,7 +31,7 @@ import stackNavigator from '../../assets/screenshots/stack-navigator.png';
|
||||
The `gh stack` CLI makes it easy to create stacks, perform cascading rebases, push branches and create PRs, and navigate between layers — all from your terminal.
|
||||
</Card>
|
||||
<Card title="AI Agent Integration" icon="puzzle">
|
||||
Run `npx skills add github/gh-stack` to teach your AI coding agents how to work with stacks. Break up a large diff into a stack or develop with stacks from the start.
|
||||
Run `gh skill install github/gh-stack` to teach your AI coding agents how to work with stacks. Break up a large diff into a stack or develop with stacks from the start.
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
@@ -43,9 +43,7 @@ Large pull requests are hard to review, slow to merge, and prone to conflicts. R
|
||||
|
||||
A **stack** is a series of pull requests in the same repository where each PR targets the branch of the PR below it, forming an ordered chain that ultimately lands on your main branch.
|
||||
|
||||
<div style="max-width: 420px; margin: 1.5rem auto;">
|
||||
<Image src={stackDiagram} alt="A stack of pull requests: main at the bottom, with auth-layer (PR #1), api-endpoints (PR #2), and frontend (PR #3) stacked on top" />
|
||||
</div>
|
||||
<StackDiagram />
|
||||
|
||||
GitHub understands stacks end-to-end: the pull request UI shows a **stack map** so reviewers can navigate between layers, branch protection rules are enforced against the **final target branch** (not just the direct base), and CI runs for every PR in the stack as if they were targeting the final branch.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user