search

tlienart / Franklin.jl

(yet another) static site generator. Simple, customisable, fast, maths with KaTeX, code evaluation, optional pre-rendering, in Julia.
https://franklinjl.org
MIT License
940 stars 110 forks source link

Support Pluto notebooks in Franklin #813

Open tlienart opened 3 years ago

tlienart commented 3 years ago

Following a discussion with Fons, here are the short notes:

VarLad commented 3 years ago

@tlienart Lets discuss this integration a bit more

VarLad commented 3 years ago

My question here is, Assume we already have converted the notebooks to HTML via github actions, my point is, how do we wrap the header and footer and sidebar around that HTML? Fons wrote some custom stuff for that I believe.

tlienart commented 3 years ago

This is not the right path in that there will be a mismatch between local and remote.

Let's say however that you already have a local workflow that generates HTML files from Pluto notebooks. Let's say that such a file is at path ./pluto/page.html. Then what you can do is create a secondary file which includes that HTML something like page.md with content

{{insert ../pluto/page.html}}

the .. is important as insert takes paths relative to the _layout folder.

Note: I'm not going to discuss this much more, I know this is a wanted feature and am willing to work on it. It's not entirely trivial and will take me a while to do well. Feel free to experiment with alternative approaches though but I likely will not have much time to brainstorm.

fonsp commented 3 years ago

@VarLad take a look at the source code for https://github.com/mitmath/18S191, if you have any questions, ask me on zulip

StatisticalMice commented 3 years ago

I created an example repo with just basic Franklin and one Pluto notebook, and then converted the notebook to HTML using 

julia> using PlutoSliderServer
julia> PlutoSliderServer.export_notebook("penguins-aog-makie.jl")

https://github.com/StatisticalMice/franklin-pluto-demo

The 'Penguins' menu item shows the Pluto notebook in HTML, but without Franklin.

The 'Penguins 2' menu item tries to use the insert described above, but it doesn't display correctly. I believe the problem is that the HTML is not properly structured, it has two <head> sections.

tlienart commented 3 years ago

Right, so what you can try for experimentation is to modify the _layout files to have an if statement based on whether the current page is a notebook or not. To do that you would add 

@def notpluto = false

Then in the layout you'd have blocks like

{{if notpluto}}
... the usual stuff ...
{{end}}

And in configmd you need to add the default notpluto = true.

So basically that will do the same as usual in all cases except in the pluto case. Once that works you can start fiddling with what gets included or not to get the appropriate layout

atiyabzafar commented 10 months ago

I tried experimentation as mentioned by you @tlienart for adding pluto notebook. But it was turning out to be a hassle. In head.html I used 

{{if notpluto}}
... the usual stuff ...
{{end}}

I have earlier used this method to add cytoscape.js functionality in a site. But I simply was not able to get it. Easier way to do that is just to add the html in the github repo and just point a link to that. But that is a cheap way to do this.

Best and quickest way right now that I implemented was using PlutoStaticHTML.jl and add mathjax using @def hasmathjax=true instead of KaTeX. This works for now but If i get time in the coming days I will try your way. As you mentioned above it is not a trivial thing to do. Adding this comment for any future visitor as a method to add pluto notebook in Franklin site.

vchuravy commented 8 months ago

So I had a quick go at this for my personal website and while not perfect yet it is quite nice.

Using https://github.com/JuliaPluto/PlutoSliderServer.jl/pull/127 + a github action like:

https://github.com/vchuravy/vchuravy.github.io/blob/c6e13351c86f5d1717d3c864d7cda92b022d9186/.github/workflows/Deploy.yml#L33

I generate from:

talks/notebook.jl
talks/notebook/index.html
talks/notebook/notebook.jl

and then franklin just copies those files over. I then use the generated json to generate a talks page https://github.com/vchuravy/vchuravy.github.io/blob/c6e13351c86f5d1717d3c864d7cda92b022d9186/utils.jl#L143

x-ref: https://github.com/tlienart/Franklin.jl/issues/813

What I would love be able to do is: