Release cycle chart: show suggestion if JavaScript disabled

[hugovk]

Follow on from #988.

Visit https://devguide.python.org/versions/.

---

Before: with JavaScript enabled

---

Before: with JavaScript disabled

---

After: with JavaScript disabled

Instead, hide chart code and advise the user to enable JS if they wish to see the chart:

Uses the advice at https://florianbrinkmann.com/en/css-rules-when-javascript-is-disabled-4536/

---

Demo

https://cpython-devguide--997.org.readthedocs.build/versions/

[ezio-melotti]

This is an improvement compared to what we have now, but have you considered creating a static image from mermaid at build time (if possible)? This will make it easier to share/embed too.

[CAM-Gerlach]

have you considered creating a static image from mermaid at build time (if possible)? This will make it easier to share/embed too.

Seems like that could have a number of issues:

• Would need to be regenerated regularly to keep the current date line (and status/colors) accurate and up to date, which is adds complexity and noise
• Less efficient to store in the repo forever every time it is updated, exacerbated by the above
• Would increase bandwidth cost and requests needed to load the page (though probably reduce local CPU load)
• Static embedded rather than inline SVG would not be directly style-able via CSS
• Seems likely to make it more complicated for contributors/RMs to regenerate the image locally, if it requires NodeJS and JavaScript dependencies to be installed

I'm not sure the time, effort and complexity to set up and add to the CI and local workflows is worth it for the tiny proportion of users with JS disabled, but maybe the share/embed use case is more compelling?

[CAM-Gerlach]

LGTM, FWIW—too bad we have to rely on raw, but I guess it isn't so bad for the devguide.

[hugovk]

I'll have a look into pre-generating an image, it can do SVG or PNG:

https://sphinxcontrib-mermaid-demo.readthedocs.io/en/latest/#config-values

But as noted it requires installing and running Node.js.

We could instead use JavaScript to update the date line for an SVG, but then again we could instead embed the Google chart like https://python-release-cycle.glitch.me/

Anyway, let's merge this, thanks for the reviews and suggestions!