Skip to content

Commit 661ad00

Browse files
committed
docs: add demos & clarify page status badges
1 parent a3fcb93 commit 661ad00

1 file changed

Lines changed: 120 additions & 28 deletions

File tree

user_guide/27-page-status-badges.qmd

Lines changed: 120 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,18 @@ versions: ">=0.6"
88

99
# Page Status Badges
1010

11-
Great Docs lets you mark pages with a lifecycle status such as "New", "Beta", or "Deprecated". Status badges appear as colored indicators in two places:
11+
Documentation pages have a lifecycle. Some pages describe brand-new features, others cover APIs that
12+
are experimental and subject to change, and some document capabilities that are being phased out.
13+
Communicating this status helps readers set expectations before they invest time in a page.
14+
15+
Great Docs lets you mark pages with a lifecycle status such as "New", "Beta", or "Deprecated".
16+
Status badges appear as colored indicators in two places:
1217

1318
1. **Below the page title**: a full badge with icon, label, and description
1419
2. **In sidebar navigation**: a compact icon next to the link, with a tooltip on hover
1520

16-
Status badges are disabled by default. To enable them, add a `page_status` section to `great-docs.yml`:
21+
Status badges are disabled by default. To enable them, add a `page_status` section to
22+
`great-docs.yml`:
1723

1824
```{.yaml filename="great-docs.yml"}
1925
page_status:
@@ -37,11 +43,13 @@ status: deprecated
3743
---
3844
```
3945

40-
The value must match one of the defined status keys (see below). Pages without a `status` key display no badge.
46+
The value must match one of the defined status keys (see below). Pages without a `status` key
47+
display no badge.
4148

4249
## Built-in Statuses
4350

44-
Great Docs ships with five built-in statuses, each with a [Lucide](https://lucide.dev/icons/) icon, color, and description:
51+
Great Docs ships with five built-in statuses, each with a [Lucide](https://lucide.dev/icons/) icon,
52+
color, and description:
4553

4654
| Key | Label | Icon | Color | Description |
4755
|----------------|----------------|---------------------|---------|-------------------------------------|
@@ -51,10 +59,76 @@ Great Docs ships with five built-in statuses, each with a [Lucide](https://lucid
5159
| `deprecated` | Deprecated | `triangle-alert` | Red | May be removed in a future release |
5260
| `experimental` | Experimental | `beaker` | Purple | API may change without notice |
5361

54-
All built-in status labels and descriptions are automatically translated when the site uses a non-English language (see [Internationalization](internationalization.qmd)).
62+
Here is how these five statuses look as page-level badges:
63+
64+
<style>
65+
.gd-demo-badge, .gd-demo-sidebar-item, .gd-demo-sidebar-pill, .gd-demo-page-mock {
66+
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
67+
}
68+
.gd-demo-badge {
69+
display: inline-flex;
70+
align-items: center;
71+
gap: 0.35rem;
72+
padding: 0.25rem 0.65rem;
73+
font-size: 14px;
74+
font-weight: 500;
75+
line-height: 1.4;
76+
border-radius: 0.35rem;
77+
}
78+
.gd-demo-badge .gd-demo-lbl { font-weight: 600; }
79+
.gd-demo-badge .gd-demo-dsc { font-weight: 400; opacity: 0.8; }
80+
.gd-demo-sidebar-item {
81+
display: flex;
82+
align-items: center;
83+
padding: 0.3rem 0.75rem;
84+
font-size: 0.875rem;
85+
color: #374151;
86+
}
87+
body.quarto-dark .gd-demo-sidebar-item { color: #d1d5db; }
88+
.gd-demo-sidebar-pill {
89+
display: inline-flex;
90+
align-items: center;
91+
margin-left: 4px;
92+
padding: 0.05rem 0.35rem;
93+
font-size: 0.65rem;
94+
font-weight: 600;
95+
line-height: 1.3;
96+
border-radius: 0.75rem;
97+
white-space: nowrap;
98+
}
99+
.gd-demo-sidebar-list {
100+
border: 1px solid #e5e7eb;
101+
border-radius: 0.5rem;
102+
padding: 0.4rem 0;
103+
max-width: 300px;
104+
margin: 1rem 0;
105+
background: transparent;
106+
}
107+
body.quarto-dark .gd-demo-sidebar-list { border-color: #374151; }
108+
.gd-demo-page-mock {
109+
border: 1px solid #e5e7eb;
110+
border-radius: 0.5rem;
111+
padding: 1rem 1.25rem;
112+
margin: 1rem 0;
113+
background: transparent;
114+
}
115+
body.quarto-dark .gd-demo-page-mock { border-color: #374151; }
116+
</style>
117+
118+
<div style="display:flex; flex-direction:column; align-items:flex-start; gap:0.35rem; margin:1rem 0;">
119+
<div class="gd-demo-badge" style="color:#10b981; background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.25);"><span class="gd-demo-lbl">✦ New</span> <span class="gd-demo-dsc">&mdash; Recently added</span></div>
120+
<div class="gd-demo-badge" style="color:#3b82f6; background:rgba(59,130,246,0.08); border:1px solid rgba(59,130,246,0.25);"><span class="gd-demo-lbl">↻ Updated</span> <span class="gd-demo-dsc">&mdash; Recently updated</span></div>
121+
<div class="gd-demo-badge" style="color:#f59e0b; background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.25);"><span class="gd-demo-lbl">⚗ Beta</span> <span class="gd-demo-dsc">&mdash; Beta feature</span></div>
122+
<div class="gd-demo-badge" style="color:#ef4444; background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.25);"><span class="gd-demo-lbl">⚠ Deprecated</span> <span class="gd-demo-dsc">&mdash; May be removed in a future release</span></div>
123+
<div class="gd-demo-badge" style="color:#8b5cf6; background:rgba(139,92,246,0.08); border:1px solid rgba(139,92,246,0.25);"><span class="gd-demo-lbl"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 3h15"></path><path d="M6 3v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3"></path><path d="M6 14h12"></path></svg> Experimental</span> <span class="gd-demo-dsc">&mdash; API may change without notice</span></div>
124+
</div>
125+
126+
All built-in status labels and descriptions are automatically translated when the site uses a
127+
non-English language (see [Internationalization](internationalization.qmd)).
55128

56129
## Custom Statuses
57130

131+
The five built-in statuses cover common lifecycle stages, but your team may have its own workflow.
58132
You can add your own statuses or override built-in ones via the `statuses` map in `great-docs.yml`:
59133

60134
```{.yaml filename="great-docs.yml"}
@@ -82,9 +156,10 @@ Each custom status definition accepts:
82156
| `color` | string | No | CSS color for the badge (defaults to `#6b7280`) |
83157
| `description` | string | No | Short explanation shown on the page badge and as a tooltip |
84158

85-
Custom statuses use their literal `label` and `description` values in all languages. Only the five built-in statuses are translated automatically.
159+
Custom statuses use their literal `label` and `description` values in all languages. Only the five
160+
built-in statuses are translated automatically.
86161

87-
Then use the custom key in frontmatter:
162+
Use the custom key in frontmatter just like a built-in status:
88163

89164
```{.yaml filename="user_guide/10-new-api.qmd"}
90165
---
@@ -95,7 +170,8 @@ status: draft
95170

96171
## Overriding Built-in Statuses
97172

98-
To change a built-in status (for example, switching the icon or color for `deprecated`), redefine it in `statuses`:
173+
To change a built-in status (for example, switching the icon or color for `deprecated`), redefine
174+
it in `statuses`:
99175

100176
```{.yaml filename="great-docs.yml"}
101177
page_status:
@@ -108,11 +184,13 @@ page_status:
108184
description: "Superseded by a newer approach"
109185
```
110186

111-
Your definition fully replaces the built-in default for that key.
187+
Your definition fully replaces the built-in default for that key. Any fields you omit fall back to
188+
their defaults (gray color, title-cased label, no icon).
112189

113190
## Controlling Where Badges Appear
114191

115-
By default, badges are shown both below page titles and in the sidebar. You can disable either location independently:
192+
By default, badges are shown in both locations. You can disable either one independently if you
193+
prefer a subtler approach.
116194

117195
### Sidebar Only
118196

@@ -136,23 +214,28 @@ page_status:
136214

137215
### On the Page
138216

139-
The page-level badge appears directly below the title (and subtitle, if present). It displays the status icon, label, and description in the status color:
217+
The page-level badge appears directly below the title (and subtitle, if present). It displays the
218+
status icon, label, and description in the status color:
140219

141-
```
142-
Getting Started ← page title
143-
A quick introduction ← subtitle (if any)
144-
✦ New — Recently added ← status badge
145-
```
220+
<div class="gd-demo-page-mock">
221+
<div style="font-size:1.5rem; font-weight:700; margin-bottom:0.15rem;">Getting Started</div>
222+
<div style="font-size:0.95rem; color:#6b7280; margin-bottom:0.5rem;">A quick introduction to the package</div>
223+
<div class="gd-demo-badge" style="color:#10b981; background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.25);"><span class="gd-demo-lbl">✦ New</span> <span class="gd-demo-dsc">&mdash; Recently added</span></div>
224+
</div>
146225

147226
### In the Sidebar
148227

149-
Sidebar links for pages with a status show a small colored icon after the link text. Hovering over the icon displays a tooltip with the full label and description:
228+
Sidebar links for pages with a status show a small colored pill after the link text. Hovering over
229+
the pill displays a tooltip with the full label and description:
150230

151-
```
152-
▸ Getting Started ✦ ← icon with tooltip
153-
▸ Migration Guide ⚠
154-
▸ Configuration
155-
```
231+
<div class="gd-demo-sidebar-list">
232+
<div class="gd-demo-sidebar-item">Getting Started <span class="gd-demo-sidebar-pill" style="color:#10b981; background:rgba(16,185,129,0.1);" title="New — Recently added">✦</span></div>
233+
<div class="gd-demo-sidebar-item">Migration Guide <span class="gd-demo-sidebar-pill" style="color:#ef4444; background:rgba(239,68,68,0.1);" title="Deprecated — May be removed in a future release">⚠</span></div>
234+
<div class="gd-demo-sidebar-item" style="opacity:0.7;">Configuration</div>
235+
<div class="gd-demo-sidebar-item">New API Design <span class="gd-demo-sidebar-pill" style="color:#8b5cf6; background:rgba(139,92,246,0.1);" title="Experimental — API may change without notice"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 3h15"></path><path d="M6 3v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3"></path><path d="M6 14h12"></path></svg></span></div>
236+
</div>
237+
238+
Pages without a status display no indicator, keeping the sidebar clean.
156239

157240
## Which Pages Are Scanned?
158241

@@ -162,7 +245,8 @@ Great Docs scans for `status` frontmatter in `.qmd` files found in:
162245
- **Recipes** pages (`recipes/`)
163246
- **Custom sections** (any section defined in `sections:` config)
164247

165-
API reference pages, the changelog, and index pages are not scanned.
248+
API reference pages, the changelog, and index pages are not scanned. This keeps badges focused on
249+
content pages where lifecycle status is meaningful.
166250

167251
## Full Configuration Reference
168252

@@ -203,15 +287,23 @@ page_status:
203287

204288
## Tips
205289

206-
- **Use statuses sparingly**: a page should carry a status only when it communicates something actionable. If every page is "New", the badge loses its value.
207-
- **Remove stale statuses**: revisit `status: new` and `status: updated` periodically and remove them once the content is no longer recent.
208-
- **Combine with tags**: statuses and tags serve different purposes. Tags categorize content by topic; statuses communicate lifecycle. A page can have both.
209-
- **Custom statuses for workflows**: define statuses like `draft` or `review` to track editorial progress while keeping the documentation published.
290+
A few guidelines help keep status badges effective across your documentation.
291+
292+
- **Use statuses sparingly**: a page should carry a status only when it communicates something
293+
actionable. If every page is "New", the badge loses its value.
294+
- **Remove stale statuses**: revisit `status: new` and `status: updated` periodically and remove
295+
them once the content is no longer recent.
296+
- **Combine with tags**: statuses and tags serve different purposes. Tags categorize content by
297+
topic; statuses communicate lifecycle. A page can have both.
298+
- **Custom statuses for workflows**: define statuses like `draft` or `review` to track editorial
299+
progress while keeping the documentation published.
210300

211301
## Next Steps
212302

213-
Status badges communicate lifecycle information at a glance. They work best when used selectively for pages that are genuinely new, recently updated, or approaching deprecation.
303+
Status badges communicate lifecycle information at a glance. They work best when used selectively
304+
for pages that are genuinely new, recently updated, or approaching deprecation.
214305

215306
- [Page Tags](page-tags.qmd) categorizes pages by topic with filterable tag listings
216307
- [API Evolution](api-evolution.qmd) tracks changes across releases at the API level
308+
- [Internationalization](internationalization.qmd) covers how built-in badge labels are translated
217309
- [Configuration](configuration.qmd) covers all status badge settings in `great-docs.yml`

0 commit comments

Comments
 (0)