astro-better-release-notes 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ReleaseNotes.astro +9 -9
- package/ReleaseNotesItem.astro +3 -3
- package/package.json +1 -1
- package/style.css +59 -32
package/ReleaseNotes.astro
CHANGED
|
@@ -9,14 +9,14 @@ export interface Category {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export const DEFAULT_CATEGORIES: Category[] = [
|
|
12
|
-
{ id: 'new-feature', label: 'New Feature', color: '#16a34a' },
|
|
13
|
-
{ id: 'enhancement', label: 'Enhancement', color: '#2563eb' },
|
|
14
|
-
{ id: 'fix', label: 'Fix', color: '#d97706' },
|
|
15
|
-
{ id: 'security', label: 'Security', color: '#566f98' },
|
|
16
|
-
{ id: 'deprecated', label: 'Deprecated', color: '#ffcc48' },
|
|
17
|
-
{ id: 'breaking-change', label: 'Breaking Change', color: '#aaaa33' },
|
|
18
|
-
{ id: 'known-issue', label: 'Known Issue', color: '#bb4448' },
|
|
19
|
-
{ id: 'internal', label: 'Internal', color: '#71717a' },
|
|
12
|
+
{ id: 'new-feature', label: 'New Feature', color: 'var(--rn-color-new-feature, #16a34a)' },
|
|
13
|
+
{ id: 'enhancement', label: 'Enhancement', color: 'var(--rn-color-enhancement, #2563eb)' },
|
|
14
|
+
{ id: 'fix', label: 'Fix', color: 'var(--rn-color-fix, #d97706)' },
|
|
15
|
+
{ id: 'security', label: 'Security', color: 'var(--rn-color-security, #566f98)' },
|
|
16
|
+
{ id: 'deprecated', label: 'Deprecated', color: 'var(--rn-color-deprecated, #ffcc48)' },
|
|
17
|
+
{ id: 'breaking-change', label: 'Breaking Change', color: 'var(--rn-color-breaking-change, #aaaa33)' },
|
|
18
|
+
{ id: 'known-issue', label: 'Known Issue', color: 'var(--rn-color-known-issue, #bb4448)' },
|
|
19
|
+
{ id: 'internal', label: 'Internal', color: 'var(--rn-color-internal, #71717a)' },
|
|
20
20
|
];
|
|
21
21
|
|
|
22
22
|
export const getCategoryColor = (id: string, categories: Category[]) =>
|
|
@@ -90,7 +90,7 @@ const filterCSS = [
|
|
|
90
90
|
))}
|
|
91
91
|
</nav>
|
|
92
92
|
|
|
93
|
-
<noscript><style>@media (max-width:
|
|
93
|
+
<noscript><style>@media (max-width: 1023px) { #release-notes-filters { display: flex !important; flex-wrap: wrap; } .filter-toggle-btn { display: none !important; } }</style></noscript>
|
|
94
94
|
</div>
|
|
95
95
|
|
|
96
96
|
<div class="version-list">
|
package/ReleaseNotesItem.astro
CHANGED
|
@@ -11,7 +11,7 @@ export interface Props {
|
|
|
11
11
|
// base URL for issue links, e.g. "https://github.com/org/repo/issues/"
|
|
12
12
|
// if omitted, issue numbers are shown as plain text
|
|
13
13
|
issueBaseUrl?: string;
|
|
14
|
-
// color for this item's badge; if omitted,
|
|
14
|
+
// color for this item's badge; if omitted, CSS handles it via --rn-color-{category}
|
|
15
15
|
categoryColor?: string;
|
|
16
16
|
// human-readable category label; if omitted, generated from id
|
|
17
17
|
categoryLabel?: string;
|
|
@@ -27,7 +27,7 @@ const {
|
|
|
27
27
|
resolvedIn,
|
|
28
28
|
viaIssue,
|
|
29
29
|
issueBaseUrl = '',
|
|
30
|
-
categoryColor
|
|
30
|
+
categoryColor,
|
|
31
31
|
categoryLabel,
|
|
32
32
|
} = Astro.props as Props;
|
|
33
33
|
|
|
@@ -63,7 +63,7 @@ const rowId = baseId ? `${baseId}--${contentSlug}` : contentSlug;
|
|
|
63
63
|
id={rowId}
|
|
64
64
|
class="issue-row"
|
|
65
65
|
data-category={category}
|
|
66
|
-
style={`--cat-color: ${categoryColor}`}
|
|
66
|
+
style={categoryColor ? `--cat-color: ${categoryColor}` : undefined}
|
|
67
67
|
>
|
|
68
68
|
<a
|
|
69
69
|
href={`#${rowId}`}
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -7,7 +7,20 @@
|
|
|
7
7
|
Dark mode: uses a .dark ancestor class (e.g. Tailwind's darkMode: 'class').
|
|
8
8
|
See README for enabling OS-based dark mode without a class toggle.
|
|
9
9
|
|
|
10
|
-
Category colors
|
|
10
|
+
Category colors: set --rn-color-{id} on :root / .dark to override per-category
|
|
11
|
+
badge and chip colors without touching component code. E.g.:
|
|
12
|
+
:root { --rn-color-enhancement: #7c3aed; }
|
|
13
|
+
.dark { --rn-color-enhancement: #fb923c; }
|
|
14
|
+
|
|
15
|
+
Built-in category defaults (CSS fallback, also used by DEFAULT_CATEGORIES):
|
|
16
|
+
--rn-color-new-feature: #16a34a
|
|
17
|
+
--rn-color-enhancement: #2563eb
|
|
18
|
+
--rn-color-fix: #d97706
|
|
19
|
+
--rn-color-security: #566f98
|
|
20
|
+
--rn-color-deprecated: #ffcc48
|
|
21
|
+
--rn-color-breaking-change: #aaaa33
|
|
22
|
+
--rn-color-known-issue: #bb4448
|
|
23
|
+
--rn-color-internal: #71717a
|
|
11
24
|
|
|
12
25
|
Sticky offset configuration:
|
|
13
26
|
Set --release-notes-top on :root (or any ancestor of .release-sticky-header)
|
|
@@ -31,13 +44,13 @@
|
|
|
31
44
|
align-items: center;
|
|
32
45
|
gap: 0.5rem;
|
|
33
46
|
padding: 0.5rem 0;
|
|
34
|
-
background-color: white;
|
|
47
|
+
background-color: var(--rn-bg, white);
|
|
35
48
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
|
|
36
49
|
margin-bottom: 0.5rem;
|
|
37
50
|
}
|
|
38
51
|
|
|
39
52
|
.dark .release-sticky-header {
|
|
40
|
-
background-color: #0f172a;
|
|
53
|
+
background-color: var(--rn-bg, #0f172a);
|
|
41
54
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
42
55
|
}
|
|
43
56
|
|
|
@@ -55,21 +68,21 @@
|
|
|
55
68
|
height: 2.5rem;
|
|
56
69
|
padding: 0 0.5rem;
|
|
57
70
|
border-radius: 6px;
|
|
58
|
-
border: 2px solid #d1d5db;
|
|
59
|
-
background-color: #f3f4f6;
|
|
60
|
-
color: #111827;
|
|
71
|
+
border: 2px solid var(--rn-border, #d1d5db);
|
|
72
|
+
background-color: var(--rn-input-bg, #f3f4f6);
|
|
73
|
+
color: var(--rn-text, #111827);
|
|
61
74
|
cursor: pointer;
|
|
62
75
|
}
|
|
63
76
|
|
|
64
77
|
.release-selector-select:focus {
|
|
65
|
-
outline: 2px solid #6366f1;
|
|
78
|
+
outline: 2px solid var(--rn-focus, #6366f1);
|
|
66
79
|
outline-offset: 1px;
|
|
67
80
|
}
|
|
68
81
|
|
|
69
82
|
.dark .release-selector-select {
|
|
70
|
-
border-color: #4b5563;
|
|
71
|
-
background-color: #1e293b;
|
|
72
|
-
color: #cbd5e1;
|
|
83
|
+
border-color: var(--rn-border, #4b5563);
|
|
84
|
+
background-color: var(--rn-input-bg, #1e293b);
|
|
85
|
+
color: var(--rn-text, #cbd5e1);
|
|
73
86
|
}
|
|
74
87
|
|
|
75
88
|
/* ---------------------------------------------------------------
|
|
@@ -86,38 +99,38 @@
|
|
|
86
99
|
font-size: 0.875rem;
|
|
87
100
|
font-weight: 500;
|
|
88
101
|
border-radius: 6px;
|
|
89
|
-
border: 2px solid #d1d5db;
|
|
90
|
-
background-color: #f3f4f6;
|
|
91
|
-
color: #374151;
|
|
102
|
+
border: 2px solid var(--rn-border, #d1d5db);
|
|
103
|
+
background-color: var(--rn-input-bg, #f3f4f6);
|
|
104
|
+
color: var(--rn-text-muted, #374151);
|
|
92
105
|
cursor: pointer;
|
|
93
106
|
white-space: nowrap;
|
|
94
107
|
}
|
|
95
108
|
|
|
96
109
|
.filter-toggle-btn:focus {
|
|
97
|
-
outline: 2px solid #6366f1;
|
|
110
|
+
outline: 2px solid var(--rn-focus, #6366f1);
|
|
98
111
|
outline-offset: 1px;
|
|
99
112
|
}
|
|
100
113
|
|
|
101
114
|
.dark .filter-toggle-btn {
|
|
102
|
-
border-color: #4b5563;
|
|
103
|
-
background-color: #1e293b;
|
|
104
|
-
color: #cbd5e1;
|
|
115
|
+
border-color: var(--rn-border, #4b5563);
|
|
116
|
+
background-color: var(--rn-input-bg, #1e293b);
|
|
117
|
+
color: var(--rn-text, #cbd5e1);
|
|
105
118
|
}
|
|
106
119
|
|
|
107
120
|
/* indicate active filters */
|
|
108
121
|
.release-container:has(.filter-input:checked) .filter-toggle-btn {
|
|
109
|
-
border-color: #6366f1;
|
|
110
|
-
background-color: color-mix(in srgb, #6366f1 12%, transparent);
|
|
111
|
-
color: #6366f1;
|
|
122
|
+
border-color: var(--rn-focus, #6366f1);
|
|
123
|
+
background-color: color-mix(in srgb, var(--rn-focus, #6366f1) 12%, transparent);
|
|
124
|
+
color: var(--rn-focus, #6366f1);
|
|
112
125
|
}
|
|
113
126
|
|
|
114
127
|
.dark .release-container:has(.filter-input:checked) .filter-toggle-btn {
|
|
115
|
-
border-color: #818cf8;
|
|
116
|
-
color: #818cf8;
|
|
117
|
-
background-color: color-mix(in srgb, #818cf8 15%, transparent);
|
|
128
|
+
border-color: var(--rn-focus, #818cf8);
|
|
129
|
+
color: var(--rn-focus, #818cf8);
|
|
130
|
+
background-color: color-mix(in srgb, var(--rn-focus, #818cf8) 15%, transparent);
|
|
118
131
|
}
|
|
119
132
|
|
|
120
|
-
@media (min-width:
|
|
133
|
+
@media (min-width: 1024px) {
|
|
121
134
|
.filter-toggle-btn {
|
|
122
135
|
display: none;
|
|
123
136
|
}
|
|
@@ -128,7 +141,7 @@
|
|
|
128
141
|
--------------------------------------------------------------- */
|
|
129
142
|
|
|
130
143
|
/* hidden on mobile by default; shown via .is-open (JS) or desktop breakpoint */
|
|
131
|
-
@media (max-width:
|
|
144
|
+
@media (max-width: 1023px) {
|
|
132
145
|
.filter-controls {
|
|
133
146
|
display: none;
|
|
134
147
|
}
|
|
@@ -138,7 +151,7 @@
|
|
|
138
151
|
}
|
|
139
152
|
}
|
|
140
153
|
|
|
141
|
-
@media (min-width:
|
|
154
|
+
@media (min-width: 1024px) {
|
|
142
155
|
.filter-controls {
|
|
143
156
|
display: flex;
|
|
144
157
|
}
|
|
@@ -164,15 +177,15 @@
|
|
|
164
177
|
transition: filter 0.15s ease-in-out;
|
|
165
178
|
opacity: 0.7;
|
|
166
179
|
filter: grayscale(100%);
|
|
167
|
-
color: #334155;
|
|
168
|
-
background-color: #f1f5f9;
|
|
169
|
-
border: 1px solid #cbd5e1;
|
|
180
|
+
color: var(--rn-chip-color, #334155);
|
|
181
|
+
background-color: var(--rn-chip-bg, #f1f5f9);
|
|
182
|
+
border: 1px solid var(--rn-chip-border, #cbd5e1);
|
|
170
183
|
}
|
|
171
184
|
|
|
172
185
|
.dark .filter-chip {
|
|
173
|
-
color: #cbd5e1;
|
|
174
|
-
background-color: #1e293b;
|
|
175
|
-
border-color: #475569;
|
|
186
|
+
color: var(--rn-chip-color, #cbd5e1);
|
|
187
|
+
background-color: var(--rn-chip-bg, #1e293b);
|
|
188
|
+
border-color: var(--rn-chip-border, #475569);
|
|
176
189
|
}
|
|
177
190
|
|
|
178
191
|
.filter-chip:hover {
|
|
@@ -191,6 +204,20 @@
|
|
|
191
204
|
color: #fff !important;
|
|
192
205
|
}
|
|
193
206
|
|
|
207
|
+
/* ---------------------------------------------------------------
|
|
208
|
+
Release note rows: per-category --cat-color defaults
|
|
209
|
+
These are overridden when the caller sets --cat-color inline.
|
|
210
|
+
--------------------------------------------------------------- */
|
|
211
|
+
|
|
212
|
+
.issue-row[data-category="new-feature"] { --cat-color: var(--rn-color-new-feature, #16a34a); }
|
|
213
|
+
.issue-row[data-category="enhancement"] { --cat-color: var(--rn-color-enhancement, #2563eb); }
|
|
214
|
+
.issue-row[data-category="fix"] { --cat-color: var(--rn-color-fix, #d97706); }
|
|
215
|
+
.issue-row[data-category="security"] { --cat-color: var(--rn-color-security, #566f98); }
|
|
216
|
+
.issue-row[data-category="deprecated"] { --cat-color: var(--rn-color-deprecated, #ffcc48); }
|
|
217
|
+
.issue-row[data-category="breaking-change"] { --cat-color: var(--rn-color-breaking-change, #aaaa33); }
|
|
218
|
+
.issue-row[data-category="known-issue"] { --cat-color: var(--rn-color-known-issue, #bb4448); }
|
|
219
|
+
.issue-row[data-category="internal"] { --cat-color: var(--rn-color-internal, #71717a); }
|
|
220
|
+
|
|
194
221
|
/* ---------------------------------------------------------------
|
|
195
222
|
Release note rows
|
|
196
223
|
Note: per-category show/hide rules are generated dynamically
|