Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support Pluto notebooks in Franklin #813

Open
tlienart opened this issue Apr 16, 2021 · 8 comments
Open

Support Pluto notebooks in Franklin #813

tlienart opened this issue Apr 16, 2021 · 8 comments
Labels
enhancement New feature or request

Comments

@tlienart
Copy link
Owner

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

  • effectively https://github.com/mitmath/18S191 already has an integration but
  • --> file mgt is a bit awkward
  • --> would be nicer to just allow .jl files that can be recognised as Pluto files (is_pluto_notebook) and if they are, be treated as such (provided Pluto is loaded, we can use Requires for this check)
  • (in a similar vein, we should probably use Requires for Literate but Literate is very lightweight)
@tlienart tlienart added the enhancement New feature or request label Apr 16, 2021
@VarLad
Copy link

VarLad commented May 24, 2021

@tlienart Lets discuss this integration a bit more

@VarLad
Copy link

VarLad commented May 24, 2021 •
edited
Loading

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
Copy link
Owner Author

tlienart commented May 25, 2021 •
edited
Loading

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
Copy link

fonsp commented May 25, 2021 •
edited
Loading

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

@StatisticalMice
Copy link

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
Copy link
Owner Author

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

@tlienart tlienart mentioned this issue Jul 12, 2021
Open
@kescobo kescobo mentioned this issue Aug 11, 2023
Merged
@atiyabzafar
Copy link

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 vchuravy mentioned this issue Oct 13, 2023
Draft
@vchuravy
Copy link

vchuravy commented Oct 13, 2023 •
edited
Loading

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

Using JuliaPluto/PlutoSliderServer.jl#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: #813

What I would love be able to do is:

  • Styling in the generated html: E.g. I want my top navigation page + some js injection

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@vchuravy @fonsp @tlienart @StatisticalMice @VarLad @atiyabzafar