release_cycle_template.svg.jinja

<?xml version="1.0" encoding="UTF-8"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    class="release-cycle-chart"
    viewBox="0 0 {{ diagram_width }} {{ diagram_height }}"
>
    <style>
        /* Embedded styles for standalone viewing */
        .release-cycle-chart {
            color-scheme: light;

            {# Copy vars from Furo theme if present #}
            {% for varname, default in {
                'color-foreground-primary': 'light-dark(#333, #fff)',
                'color-background-primary': 'light-dark(#fff, #333)',
                'color-brand-primary': '#4B8BBE',
                'color-background-item': '#e0e0e0',
            }.items() %}
                --svg-{{varname}}: var(--{{varname}}, {{default}});
            {% endfor %}

            font-family: var(
                --font-stack,
                -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
                Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji);
            width: 100%;

            --blob-border-width: 1.6px;

            --status-bg-color: #CCC;
            --status-border-color: #888;
        }
        .background {
            fill: var(--svg-color-background-primary);
        }
        .release-cycle-year-line {
            stroke: var(--svg-color-foreground-primary);
            stroke-width: 0.8px;
            opacity: 75%;
        }
        .release-cycle-today-line {
            stroke: var(--svg-color-brand-primary);
            stroke-width: var(--blob-border-width);
        }
        .release-cycle-row-shade {
            fill: var(--svg-color-background-item);
            opacity: 50%;
        }
        .release-cycle-blob {
            stroke-width: var(--blob-border-width);
        }
        .text-main {
            fill: var(--svg-color-foreground-primary);

            /* use specific colours on known backgrounds */
            &amp;.release-cycle-status-security,
            &amp;.release-cycle-status-bugfix {
                fill: black;
            }
        }
        .text-outline {
            /* an outline of the background color, in case it's not set
            correctly */
            fill: transparent;
            stroke: var(--svg-color-background-primary);
            stroke-width: var(--blob-border-width);

            /* use specific colours on known backgrounds */
            &amp;.release-cycle-status-security,
            &amp;.release-cycle-status-bugfix {
                stroke: var(--status-bg-color);
            }
        }
        .release-cycle-status-end-of-life {
            --status-bg-color: #DD2200;
            --status-border-color: #FF8888;
        }
        .release-cycle-status-security {
            --status-bg-color: #FFDD44;
            --status-border-color: #FF8800;
        }
        .release-cycle-status-bugfix {
            --status-bg-color: #00DD22;
            --status-border-color: #008844;
        }
        .release-cycle-status-prerelease {
            --status-bg-color: teal;
            --status-border-color: darkgreen;
        }
        .release-cycle-status-feature {
            --status-bg-color: #2222EE;
            --status-border-color: #008888;
        }
        .release-cycle-status-planned {
            /* Use grey defaults */
        }
        .release-cycle-blob {
            fill: var(--status-bg-color);
            stroke: transparent;
        }
        .release-cycle-blob-full {
            fill: var(--status-bg-color);
            stroke: var(--status-border-color);
        }
        .release-cycle-border {
            fill: transparent;
            stroke: var(--status-border-color);
            stroke-width: var(--blob-border-width);
        }
    </style>
    <defs>
        <linearGradient id="release-cycle-mask-gradient-{{ id_key }}">
            <stop stop-color="black" offset="0%" />
            <stop stop-color="white" offset="100%" />
        </linearGradient>
    </defs>

    <rect
        class="background"
        x="0"
        y="0"
        width="{{ diagram_width }}"
        height="{{ diagram_height }}"
    />

    {% for version in versions %}
        {% set y = version.y * line_height %}
        {% if version.y % 2 %}
            <!-- Row shading -->
            <rect
                class="release-cycle-row-shade"
                x="0em"
                y="{{ y - 1.125 * SCALE }}"
                width="{{ diagram_width }}"
                height="{{ line_height }}"
            />
        {% endif %}
    {% endfor %}

    {% for year in years %}
        <text
            class="release-cycle-year-text text-main"
            x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
            y="{{ diagram_height - line_height }}"
            font-size="{{ SCALE * 0.75 }}"
            text-anchor="middle"
        >
            {{ format_year(year) }}
        </text>
        {% if not loop.last %}
        <line
            class="release-cycle-year-line"
            x1="{{ year_to_x(year + 1) }}"
            x2="{{ year_to_x(year + 1) }}"
            y1="0"
            y2="{{ diagram_height - line_height }}"
            font-size="{{ SCALE }}"
        />
        {% endif %}
    {% endfor %}

    <!-- Gradient mask to fade out end-of-life versions -->
    <mask id="release-cycle-mask-{{ id_key }}">
        <rect
            x="0"
            y="0"
            width="{{ legend_width }}"
            height="{{ diagram_height }}"
            fill="black"
        />
        <rect
            x="{{ legend_width - right_margin }}"
            y="0"
            width="{{ right_margin }}"
            height="{{ diagram_height }}"
            fill="url(#release-cycle-mask-gradient-{{ id_key }})"
        />
        <rect
            x="{{ legend_width }}"
            y="0"
            width="{{ diagram_width }}"
            height="{{ diagram_height }}"
            fill="white"
        />
    </mask>

    {% for version in versions %}
        <!-- Colourful blob. -->

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

        <!-- bugfix/security blobs need to be split between the two phases.
            Draw the rectangle with two path elements instead.
            Thanks Claude.ai for the initial conversion.
        -->
        {% set middle_x = ([end_x, date_to_x(version.start_security_date)]|min)  %}
        {% set left_width = (middle_x - start_x) %}
        {% set right_width = (end_x - middle_x) %}

        {% if version.status != "end-of-life" %}
            <!-- Split the blob using path operations
                 (Move-to, Vertical/Horizontal, Arc, Z=close shape;
                  lowercase means relative to the last point.)
                 We start drawing from the top of the straight boundary
                 between the half-blobs.
             -->
            <path
                class="release-cycle-blob release-cycle-status-bugfix"
                d="
                    M{{ middle_x }},{{ top_y }}         {#- start -#}
                    v{{ height }}                       {#- down -#}
                    H{{ start_x + radius }}             {#- left -#}
                    a{{ radius }},{{ radius }} 90 0 1   {#- rounded corner -#}
                        {{ -radius }} {{ -radius }}
                    v{{ -height + 2*radius }}           {#- up -#}
                    a{{ radius }},{{ radius }} 90 0 1   {#- rounded corner -#}
                      {{ radius }} {{ -radius }}
                    Z                                   {#- right -#}
                "
            />
            <path
                class="release-cycle-blob release-cycle-status-security"
                d="
                    M{{ middle_x }},{{ top_y }}         {#- start -#}
                    v{{ height }}                       {#- down -#}
                    H{{ end_x - radius }}               {#- right -#}
                    a{{ radius }},{{ radius }} 90 0 0   {#- rounded corner -#}
                        {{ radius }} {{ -radius }}
                    v{{ -height + 2*radius }}           {#- up -#}
                    a{{ radius }},{{ radius }} 90 0 0   {#- rounded corner -#}
                        {{ -radius }} {{ -radius }}
                    Z                                   {#- left -#}
                "
            />
            <!-- Add a common border -->
            <rect
                class="release-cycle-border release-cycle-status-{{ version.status }}"
                x="{{ start_x }}"
                y="{{ top_y }}"
                width="{{ (end_x - start_x) }}"
                height="{{ height }}"
                rx="{{ radius }}"
                ry="{{ radius }}"
            />
        {% else %}
            <!-- For EOL releases, use a single rounded rectangle -->
            <rect
                class="release-cycle-blob release-cycle-blob-full
                       release-cycle-status-{{ version.status }}"
                x="{{ start_x }}"
                y="{{ top_y }}"
                width="{{ (end_x - start_x) }}"
                height="{{ height }}"
                rx="{{ radius }}"
                ry="{{ radius }}"
                mask="url(#release-cycle-mask-{{ id_key }})"
            />
        {% endif %}
    {% endfor %}

    <!-- A line for today -->
    <line
        class="release-cycle-today-line"
        x1="{{ date_to_x(today) }}"
        x2="{{ date_to_x(today) }}"
        y1="0"
        y2="{{ diagram_height - line_height }}"
        font-size="{{ SCALE }}"
    />

    {% for version in versions %}
        <!-- Label for colourful blob -->

        {% set start_x = date_to_x(version.first_release_date) %}
        {% set end_x = date_to_x(version.end_of_life_date) %}
        {% set middle_x = ([end_x, date_to_x(version.start_security_date)]|min)  %}
        {% set small_text_y = version.y * line_height - 0.1 * SCALE %}

        <!-- Add text before/after/inside the blob -->
        {% for cls in ('text-outline', 'text-main') %}
            <text
                class="release-cycle-blob-label {{cls}} release-cycle-status-{{ version.status }}"
                font-size="{{ SCALE * 0.75 }}"
                y="{{ small_text_y }}"
                {% if version.status == "bugfix" %}
                    x="{{ (start_x + middle_x) / 2 }}"
                    text-anchor="middle"
                {% elif version.status == "security" %}
                    x="{{ (middle_x + end_x) / 2 }}"
                    text-anchor="middle"
                {% elif version.status == "end-of-life" %}
                    x="{{ end_x + (0.25 * SCALE) }}"
                    text-anchor="start"
                {% else %}
                    x="{{ start_x - (0.25 * SCALE) }}"
                    text-anchor="end"
                {% endif %}
            >
                {{ version.status }}
            </text>
        {% endfor %}

        <!-- Legend on the left -->
        <text
            class="release-cycle-version-label text-main"
            x="{{ 0.5 * SCALE }}"
            y="{{ version.y * line_height }}"
            font-size="{{ SCALE }}"
        >
            Python {{ version.key }}
        </text>
    {% endfor %}
</svg>