General advice about adding panel tabs to a static (blogging) web site

Hi all,
Very pleased with my multi tab dashboard for displaying Australian electricity data. Next I will likely put the tabs into a template.

However I wish to add lots of other blog related posts. I can do this in a number of ways, conceivably even using a bunch of markdown panes and just adding a new one for every post. However I think what I want is to have the panel server run from a link/page on a static website built using for instance Hugo. The aim is to keep it as simple and efficient as possible.

I see from the docs that one way to do is is with the Bokeh “server document” function

from bokeh.embed import server_document
script = server_document("https://demo.bokeh.org/sliders")

However, being the amateur I am, it’s not clear to me that’s enough or how to link that up in the Hugo HTML. Right now the panel output loads directly from the URL.

You can just have your panel app running somewhere in the cloud and then you put an iframe pointing to your panel app on your blog.

And in fact that was the decision that we had reached after a couple of hours fiddling with the “embed application” functionality of the Bokeh server.

The only disadvantage of the iframe is having to run two servers but that I can live with until I get further down the track. Next stop Hugo I methinks.

Even in fancier settings, you will need a python process running (unless your plots are static) and your blogging server. I don’t think you can get around having to maintain multiple processes.
If you want to try to go fancy you can do something like here GitHub - akloster/bokeh-react-example

Until pretty recently it wasn’t possible to run Panel in the browser directly, it’s now possible thanks to WASM and Pyodide (and Pyscript when you leverage it), so that can be an alternative to consider if your app permits it: Running Panel in the Browser with WASM — Panel v1.2.3

1 Like

Ah yes. This is nice but one general concern with WASM is how secrets management works. Not sure if this is solved/solvable, but it would be nice a nice example in the docs.