Static html blog post

[weymouth]

I've written a tutorial that might be fun to host on the JuliaLang blog. I made it using Pluto and have exported the static HTML which can be found here..

@ViralBShah

[github-actions[bot]]

Hey, thank you for bringing this issue up and welcome to the Julia Programming Language's GitHub. We will review this and comment here. Welcome and thanks again!

[ViralBShah]

@tlienart Any suggestions on how we convert the Pluto HTML posted above into a blog post? Would it be possible to just take the standard blog template and then dump the static html below?

[tlienart]

oh wow, that's a bit of a mammoth page...

it's possible to do this but currently requires manual work; there may be a future where Pluto notebooks can be directly plugged in Franklin following the example that Fons did for the intro to computing site but for now it's not there.

What might work is to:

• take the page as it stands and
• remove the top part until the script loading lodash
• remove the bottom from </head> to the end
• put the content of that in a .md file with

+++
title = "the title"
# other variables, follow template from other blog posts
+++
~~~
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@observablehq/stdlib@3.3.1/dist/stdlib.js" defer></script>
...
<script src="https://cdn.jsdelivr.net/gh/fonsp/Pluto.jl@0.15.1/frontend/editor.js" type="module" defer></script>
    <script src="https://cdn.jsdelivr.net/gh/fonsp/Pluto.jl@0.15.1/frontend/warn_old_browsers.js"></script>

    <script src="https://cdn.jsdelivr.net/gh/fonsp/Pluto.jl@0.15.1/frontend/common/SetupMathJax.js"></script>
    <script type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3.1.2/es5/tex-svg-full.js" async></script>
~~~

very likely it will not look good because there will be clashes between the layout of the site and the layout that Pluto tries to apply same with the CSS, but would be good to test this as a first step and see what it gives.

I'm personally not in favour of this approach as it makes the page totally unmaintainable. We could make the static-html generation part of the build of the site but this will massively slow down the overall build process just for the sake of one blog post.

Possible alternatives:

1. wait until there's a more streamlined support for Pluto notebooks in Franklin (not soon but eventually)
2. use Literate.jl to transform the notebook into a Literate file, and then use that (since Franklin directly supports Literate files)
3. transcribe the tutorial to Franklin directly (this should be fairly easy to do btw, once you have the notebook you can basically copy paste cells).

IMO 2 or 3 are the more reasonable options and I could help with one of those if needed

[weymouth]

Yeah, it's big because of the embedded gifs.

I'm happy to try out 2. What is the output from Literate that you need?

[tlienart]

If you transform your Pluto file into a .jl file that Literate can understand and that I can run directly on my side, I can do the rest (including saving gifs in the right location and loading them so don't worry about that)

[tlienart]

PS: there won't be sliders, but they also don't work on http://weymouth.github.io/Shark.jl.html as far as I can see so you're probably fine with this?

[weymouth]

Ok. I'll give it a shot.

[tlienart]

I think the downloadable notebook.jl file is pretty close to what I need with a few things

• remove the interactiveutils stuff
• remove the manifest at the bottom
• remove all the begin-end stuff
• remove the Pluto timestamp thingy
• turn all text into comment (# ...)

and that should be roughly enough I think.

[ViralBShah]

@fonsp may be interested in this discussion as well (but he's on holiday).

[tlienart]

Well he's already figured out a way to do this for https://github.com/mitmath/18S191 which he encouraged me to streamline for Franklin, I've just not come around to doing it yet ;)

[weymouth]

Ok. I've tried to do as suggested and put it here.

I'm not sure how it's going to look. Code blocks have comments, which now look the same as the markdown blocks... Let me know.

[tlienart]

alright, I'll try to do a pass in a few hours and will ping you once I have something that looks ok

[StefanKarpinski]

This blog post is awesome.

[weymouth]

Thanks!

[fonsp]

I wont be able to look into this until next month, but the solution from the mit course was:

• (if you want to automate the HTML generation) use PlutoSliderServer.jl as demonstrated in https://github.com/JuliaPluto/static-export-template
• use an iframe to show a pluto notebook inside a page with additional navigation elements. use CSS media queries to show the iframe at 100vh 100vw on small screens

hope it's useful!