Hello everyone. I am an R user migrating from Hugo-Learn to Hugo-doks theme. I am attempting to use Leaflet and Plotly widgets deployed on Netlify.
I have existing deployments on netlify using Leaflet and Plotly e.g. https://www.anest.uk/8whitepaper/pricycles/
However Hugo-doks uses npm and - the way I am using it - it is less tightly coupled with Rstudio, so instead of Rmarkdown I write markdown and even a little html as below.
On localhost both leaflet and plotly render using an iframe referencing a leaf bundle with html: files ~5MB. So the following renders fine locally (Windows):
<iframe seamless src="leafmap/index.html" width="100%" height="500"></iframe>` <iframe seamless src="plotly/index.html" width="100%" height="500"></iframe>`
However deployed to netlify there are errors: “anestuk-doksf.netlify.app refused to connect” for both leaflet and plotly.
In a support thread on doks forum https://github.com/h-enk/doks/discussions/461 the author gave some hints/alternatives,
- ./layouts/index.headers: script-src ‘self’ https://cdn.plot.ly/plotly-latest.min.js;
- Laboratory is an experimental Firefox extension: could help you with remaining CSP issues
- You could also install the Plotly npm package (recommended method)
I have attempted 1) but the error remains, 2) gives a very minimal ‘generated CSP policy’ of default-src ‘none’ but I don’t really know how to use it and 3) is probably even further beyond my grasp. In fact all of this is well beyond my grasp, frankly!
There are similar queries before in this community such as
However although ‘solved’ I’m not clear how to apply the information they contain.
I am unclear whether to give up on these two widgets and just use static images, or whether the solution is within reach using a ‘cookbook’ set of steps.
Any help would be most gratefully received!
Minimal mods to doks starter template, (a) add widgets (b) apply patch (1) above to ./layouts/index.headers https://github.com/amberalpha/doksf
On netlify autodeployed from github, showing error: https://anestuk-doksf.netlify.app/blog/widgets/