search

pydata / pydata-sphinx-theme

A clean, three-column Sphinx theme with Bootstrap for the PyData community
https://pydata-sphinx-theme.readthedocs.io
BSD 3-Clause "New" or "Revised" License
589 stars 309 forks source link

Theme switcher should not added via a script tag, in general do we support browsers w/o js ? #1920

Open Carreau opened 2 months ago

Carreau commented 2 months ago

the theme switcher does:

<script>
document.write(`
  <button ...>
...
  </button>
`);
</script>

I believe this is bad practice as it will block rendering while js is executed to insert this. Which makes the theme slower. We could use I belive: 

<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

And just have whatever is js only be not displayed when there is no JS.

But in general we do rely on a bunch of other things that need JS (More dropdown in navbar requires js).

So maybe we should assume we always have JS ?

drammock commented 2 months ago

The logic here was "the switcher won't work at all without JS, so don't even render it if JS is unavailable". I'm open to trying out your proposed approach.

I'll add that the current approach may be bad practice for another reason: document.write is strongly discouraged in general. I just haven't had time to think hard about the alternative approaches.

gabalafou commented 1 month ago

So... my personal dream would be that one could load a PST-themed docs site in Lynx and reach all the same info as someone loading the site in Chrome. In other words, everything beyond basic HTML is considered a progressive enhancement.

In that same spirit, I would love to have fallbacks for all JS-powered components, such as the theme switcher. But perhaps that is not realistic. Or perhaps it doesn't stand up to a cost-benefit analysis.

At any rate, I think that our current implementation could use improvement. Since we have core components that absolutely require JavaScript, we should more prominently warn users who have disabled JavaScript that the site won't completely work and disclose exactly what functionality requires JavaScript.