Skip to content

Commit 2c985f6

Browse files
hugovkhugovk
authored
Merge pull request #36 from encukou/standalone-svg
2 parents f271745 + 53a698c commit 2c985f6

File tree

2 files changed

+121
-127
lines changed

2 files changed

+121
-127
lines changed

‎_static/devguide_overrides.css‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,6 @@
66
height: 110px;
77
}
88

9-
/* Release cycle chart */
10-
.release-cycle-chart .release-cycle-year-line {
11-
stroke: var(--color-foreground-primary);
12-
}
13-
14-
.release-cycle-chart .release-cycle-year-text {
15-
fill: var(--color-foreground-primary);
16-
}
17-
18-
.release-cycle-chart .release-cycle-today-line {
19-
stroke: var(--color-brand-primary);
20-
}
21-
22-
.release-cycle-chart .release-cycle-row-shade {
23-
fill: var(--color-background-item);
24-
}
25-
26-
.release-cycle-chart .release-cycle-version-label {
27-
fill: var(--color-foreground-primary);
28-
}
29-
30-
.release-cycle-chart .release-cycle-blob-label.release-cycle-status-end-of-life,
31-
.release-cycle-chart .release-cycle-blob-label.release-cycle-status-prerelease,
32-
.release-cycle-chart .release-cycle-blob-label.release-cycle-status-feature {
33-
/* and FG when it's not in a blob */
34-
fill: var(--color-foreground-primary);
35-
}
36-
379
.good pre {
3810
border-left: 3px solid rgba(74, 182, 93, 1);
3911
}

‎_tools/release_cycle_template.svg.jinja‎

Lines changed: 121 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -7,93 +7,99 @@
77
<style>
88
/* Embedded styles for standalone viewing */
99
.release-cycle-chart {
10-
font-family: Arial, sans-serif;
10+
color-scheme: light;
11+
12+
{# Copy vars from Furo theme if present #}
13+
{% for varname, default in {
14+
'color-foreground-primary': 'light-dark(#333, #fff)',
15+
'color-background-primary': 'light-dark(#fff, #333)',
16+
'color-brand-primary': '#4B8BBE',
17+
'color-background-item': '#e0e0e0',
18+
}.items() %}
19+
--svg-{{varname}}: var(--{{varname}}, {{default}});
20+
{% endfor %}
21+
22+
font-family: var(
23+
--font-stack,
24+
-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
25+
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji);
1126
width: 100%;
27+
28+
--blob-border-width: 1.6px;
29+
}
30+
.background {
31+
fill: var(--svg-color-background-primary);
1232
}
1333
.release-cycle-year-line {
14-
stroke: #333;
34+
stroke: var(--svg-color-foreground-primary);
1535
stroke-width: 0.8px;
1636
opacity: 75%;
1737
}
18-
.release-cycle-year-text {
19-
fill: #333;
20-
}
2138
.release-cycle-today-line {
22-
stroke: #4B8BBE;
23-
stroke-width: 1.6px;
39+
stroke: var(--svg-color-brand-primary);
40+
stroke-width: var(--blob-border-width);
2441
}
2542
.release-cycle-row-shade {
26-
fill: #e0e0e0;
43+
fill: var(--svg-color-background-item);
2744
opacity: 50%;
2845
}
29-
.release-cycle-version-label {
30-
fill: #333;
31-
}
3246
.release-cycle-blob {
33-
stroke-width: 1.6px;
47+
stroke-width: var(--blob-border-width);
3448
}
35-
.release-cycle-blob-label {
36-
/* white looks good on both light and dark */
37-
fill: white;
49+
.text-main {
50+
fill: var(--svg-color-foreground-primary);
51+
52+
/* use specific colours on known backgrounds */
53+
&amp;.release-cycle-status-security,
54+
&amp;.release-cycle-status-bugfix {
55+
fill: black;
56+
}
3857
}
39-
.release-cycle-blob-label.release-cycle-status-security,
40-
.release-cycle-blob-label.release-cycle-status-bugfix {
41-
/* but use black to improve contrast for lighter backgrounds */
42-
fill: black;
58+
.text-outline {
59+
/* an outline of the background color, in case it's not set
60+
correctly */
61+
fill: transparent;
62+
stroke: var(--svg-color-background-primary);
63+
stroke-width: var(--blob-border-width);
64+
65+
/* use specific colours on known backgrounds */
66+
&amp;.release-cycle-status-security,
67+
&amp;.release-cycle-status-bugfix {
68+
stroke: var(--status-bg-color);
69+
}
4370
}
44-
.release-cycle-blob-label.release-cycle-status-end-of-life,
45-
.release-cycle-blob-label.release-cycle-status-prerelease,
46-
.release-cycle-blob-label.release-cycle-status-feature {
47-
fill: #333;
71+
.release-cycle-status-end-of-life {
72+
--status-bg-color: #DD2200;
73+
--status-border-color: #FF8888;
4874
}
49-
.release-cycle-status-end-of-life .release-cycle-blob,
50-
.release-cycle-blob.release-cycle-status-end-of-life {
51-
fill: #DD2200;
52-
stroke: #FF8888;
75+
.release-cycle-status-security {
76+
--status-bg-color: #FFDD44;
77+
--status-border-color: #FF8800;
5378
}
54-
.release-cycle-status-security .release-cycle-blob,
55-
.release-cycle-blob.release-cycle-status-security {
56-
fill: #FFDD44;
57-
stroke: transparent;
79+
.release-cycle-status-bugfix {
80+
--status-bg-color: #00DD22;
81+
--status-border-color: #008844;
5882
}
59-
.release-cycle-status-bugfix .release-cycle-blob,
60-
.release-cycle-blob.release-cycle-status-bugfix {
61-
fill: #00DD22;
62-
stroke: transparent;
83+
.release-cycle-status-prerelease {
84+
--status-bg-color: teal;
85+
--status-border-color: darkgreen;
6386
}
64-
.release-cycle-status-prerelease .release-cycle-blob,
65-
.release-cycle-blob.release-cycle-status-prerelease {
66-
fill: teal;
67-
stroke: transparent;
87+
.release-cycle-status-feature {
88+
--status-bg-color: #2222EE;
89+
--status-border-color: #008888;
6890
}
69-
.release-cycle-status-feature .release-cycle-blob,
70-
.release-cycle-blob.release-cycle-status-feature {
71-
fill: #2222EE;
91+
.release-cycle-blob {
92+
fill: var(--status-bg-color);
7293
stroke: transparent;
7394
}
74-
.release-cycle-blob-full.release-cycle-status-end-of-life {
75-
fill: #DD2200;
76-
stroke: #FF8888;
77-
}
78-
.release-cycle-border.release-cycle-status-security {
79-
fill: transparent;
80-
stroke: #FF8800;
81-
stroke-width: 1.6px;
82-
}
83-
.release-cycle-border.release-cycle-status-bugfix {
84-
fill: transparent;
85-
stroke: #008844;
86-
stroke-width: 1.6px;
95+
.release-cycle-blob-full {
96+
fill: var(--status-bg-color);
97+
stroke: var(--status-border-color);
8798
}
88-
.release-cycle-border.release-cycle-status-prerelease {
99+
.release-cycle-border {
89100
fill: transparent;
90-
stroke: darkgreen;
91-
stroke-width: 1.6px;
92-
}
93-
.release-cycle-border.release-cycle-status-feature {
94-
fill: transparent;
95-
stroke: #008888;
96-
stroke-width: 1.6px;
101+
stroke: var(--status-border-color);
102+
stroke-width: var(--blob-border-width);
97103
}
98104
</style>
99105
<defs>
@@ -103,9 +109,16 @@
103109
</linearGradient>
104110
</defs>
105111

112+
<rect
113+
class="background"
114+
x="0"
115+
y="0"
116+
width="{{ diagram_width }}"
117+
height="{{ diagram_height }}"
118+
/>
119+
106120
{% for version in versions %}
107121
{% set y = version.y * line_height %}
108-
109122
{% if version.y % 2 %}
110123
<!-- Row shading -->
111124
<rect
@@ -120,7 +133,7 @@
120133

121134
{% for year in years %}
122135
<text
123-
class="release-cycle-year-text"
136+
class="release-cycle-year-text text-main"
124137
x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
125138
y="{{ diagram_height - line_height }}"
126139
font-size="{{ SCALE * 0.75 }}"
@@ -166,16 +179,14 @@
166179
</mask>
167180

168181
{% for version in versions %}
169-
<!-- Colourful blob with a label. -->
182+
<!-- Colourful blob. -->
170183

171184
{% set top_y = version.y * line_height - 1 * SCALE %}
172185
{% set height = 1.25 * SCALE %}
173186
{% set start_x = date_to_x(version.first_release_date) %}
174187
{% set end_x = date_to_x(version.end_of_life_date) %}
175188
{% set radius = 0.25 * SCALE %}
176189

177-
{% set small_text_y = version.y * line_height - 0.1 * SCALE %}
178-
179190
<!-- bugfix/security blobs need to be split between the two phases.
180191
Draw the rectangle with two path elements instead.
181192
Thanks Claude.ai for the initial conversion.
@@ -243,47 +254,58 @@
243254
mask="url(#release-cycle-mask-{{ id_key }})"
244255
/>
245256
{% endif %}
257+
{% endfor %}
258+
259+
<!-- A line for today -->
260+
<line
261+
class="release-cycle-today-line"
262+
x1="{{ date_to_x(today) }}"
263+
x2="{{ date_to_x(today) }}"
264+
y1="0"
265+
y2="{{ diagram_height - line_height }}"
266+
font-size="{{ SCALE }}"
267+
/>
268+
269+
{% for version in versions %}
270+
<!-- Label for colourful blob -->
271+
272+
{% set start_x = date_to_x(version.first_release_date) %}
273+
{% set end_x = date_to_x(version.end_of_life_date) %}
274+
{% set middle_x = ([end_x, date_to_x(version.start_security_date)]|min) %}
275+
{% set small_text_y = version.y * line_height - 0.1 * SCALE %}
246276

247277
<!-- Add text before/after/inside the blob -->
248-
<text
249-
class="release-cycle-blob-label release-cycle-status-{{ version.status }}"
250-
font-size="{{ SCALE * 0.75 }}"
251-
y="{{ small_text_y }}"
252-
{% if version.status == "bugfix" %}
253-
x="{{ (start_x + middle_x) / 2 }}"
254-
text-anchor="middle"
255-
{% elif version.status == "security" %}
256-
x="{{ (middle_x + end_x) / 2 }}"
257-
text-anchor="middle"
258-
{% elif version.status == "end-of-life" %}
259-
x="{{ end_x + (0.25 * SCALE) }}"
260-
text-anchor="start"
261-
{% else %}
262-
x="{{ start_x - (0.25 * SCALE) }}"
263-
text-anchor="end"
264-
{% endif %}
265-
>
266-
{{ version.status }}
267-
</text>
278+
{% for cls in ('text-outline', 'text-main') %}
279+
<text
280+
class="release-cycle-blob-label {{cls}} release-cycle-status-{{ version.status }}"
281+
font-size="{{ SCALE * 0.75 }}"
282+
y="{{ small_text_y }}"
283+
{% if version.status == "bugfix" %}
284+
x="{{ (start_x + middle_x) / 2 }}"
285+
text-anchor="middle"
286+
{% elif version.status == "security" %}
287+
x="{{ (middle_x + end_x) / 2 }}"
288+
text-anchor="middle"
289+
{% elif version.status == "end-of-life" %}
290+
x="{{ end_x + (0.25 * SCALE) }}"
291+
text-anchor="start"
292+
{% else %}
293+
x="{{ start_x - (0.25 * SCALE) }}"
294+
text-anchor="end"
295+
{% endif %}
296+
>
297+
{{ version.status }}
298+
</text>
299+
{% endfor %}
268300

269301
<!-- Legend on the left -->
270302
<text
271-
class="release-cycle-version-label"
303+
class="release-cycle-version-label text-main"
272304
x="{{ 0.5 * SCALE }}"
273305
y="{{ version.y * line_height }}"
274306
font-size="{{ SCALE }}"
275307
>
276308
Python {{ version.key }}
277309
</text>
278310
{% endfor %}
279-
280-
<!-- A line for today -->
281-
<line
282-
class="release-cycle-today-line"
283-
x1="{{ date_to_x(today) }}"
284-
x2="{{ date_to_x(today) }}"
285-
y1="0"
286-
y2="{{ diagram_height - line_height }}"
287-
font-size="{{ SCALE }}"
288-
/>
289311
</svg>

0 commit comments

Comments
 (0)