This document lists the basics on how to edit the course website accessible at https://pde-on-gpu.vaw.ethz.ch/.
To test the website locally (or after making a pull from Git):
julia> using Franklin, NodeJS
julia> serve(clear=true)Note the first time you are using
NodeJS, you need to execute:
julia> run(`sudo $(npm_cmd()) install highlight.js`)Running the deploy_notebooks.jl scripts located in slide-notebooks and exercise-notebooks folder will:
create .ipynb from the .jl script
move the .ipynb and figures to the ./notebook folder (and ./notebook/figures)
create a _web.jl script and move it to website/_literate to be included in the website lecture pages. Figure links in the _web.jl files are changes from ./figures/ to ../website/_assets/literate_figures/ for correct rendering in html file.
create, if needed, a figures folder in website/_assets/literate_figures folder to hold figures for Literate scripts
💡 both deploy script contain a variable incl::String you can set to only include specific scripts (e.g. incl=l2, incl=lecture2)
Important note: The deploy_notebooks.jl script in slide-notebooks makes it possible to preprocess the Literate script for hints and solution keywords:
## Set `sol=true` to produce output with solutions contained and hints stripts. Otherwise the other way around.
sol = trueYou can populate lines beginning of Literate script with #hint= or #sol= which will permit to corresponding lines to be removed upon preprocessing (e.g. before / after the lecture).
Run the deploy script from its folder
Include the correct _web.jl filename in e.g. website/lectureXY.md file
Push
To embed YouTube videos, go to YouTube, click on the Share link and then <Embed>, and copy-paste the script into an html block:
~~~
<iframe width="560" height="315" src="https://www.youtube.com/embed/DvlM0w6lYEY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
~~~Using Literate.jl permit to write a single .jl source file that can contain Julia code and markdown comments and can be transformed into a markdown page, a notebook and notebook-based slides. The website build with Franklin.jl has native support to integrate .jl scripts ready to me processed by Literate.jl in markdown.
To allow mdstring to render correctly in Franklin, one need to set the page variable literate_mds = true. See here for details.
To disable code execution but allow rendering on the website, one needs to set the page variable noeval = true. See here for details.
Create a Literate-ready my_script.jl script
Place it in the _literate folder
Add \literate{/_literate/my_script.jl} in the website page you want to include my_script.jl markdown rendering
Done
Note that there are 2 pre-defined box environments to highlight note and warning. Use them as following:
#md # \note{...}
#md # \warn{...}In Julia, load Literate and export my_script.jl as a notebook:
julia> using Literate
julia> Literate.notebook("my_scritp.jl", outputdir=pwd())Then load IJulia and launch the notebook for the given path
julia> using IJulia
julia> notebook(dir="/some/path")To allow for slide rendering as slide, subslide or fragment, populate my_script.jl "source" code with
#nb # %% A slide [markdown] {"slideshow": {"slide_type": "slide/subslide/fragment"}}To view the notebook as a slideshow, install the RISE plugin. DISCLAIMER: the extension built from this repo is not compatible with JupyterLab and must be used with the classic notebook (i.e. notebook <= 6).
Adding support for RISE with JupyterLab (i.e. notebook > 6), assuming IJulia is already installed:
Pkg.add("Conda")
Conda.pip_interop(true)
Conda.pip("install", "jupyterlab-rise")Open the notebook as in here. Make sure to execute IJulia from the env where the Conda install was performed.
Press alt-r to start. Use spacebar to advance.
mp4 out of gifIn the second edition, we prefer mp4 instead of gif. Using FFMPEG, one can swiftly convert gifs into mp4:
run(`ffmpeg -i input_anim.gif -c libx264 -pix_fmt yuv420p -vf "pad=ceil(iw/2)*2:ceil(ih/2)*2:color=white" -y output_anim.mp4`)Or generate them from pngs:
run(`ffmpeg -framerate 30 -i %04d.png -c libx264 -pix_fmt yuv420p -vf "pad=ceil(iw/2)*2:ceil(ih/2)*2:color=white" -y output_anim.mp4`)The mp4 animation can then be embedded as follow in Literate.jl scripts:
#md # ~~~
# <center>
# <video width="80%" autoplay loop controls src="./path-to-anim/anim.mp4"/>
# </center>
#md # ~~~or directly into .md scripts as
<center>
<video width="80%" autoplay loop controls src="./path-to-anim/anim.mp4"/>
</center>gif and loopcountYou can use gifsicle as command line tool to modify the loopcount for gifs to be included in the scripts (tested on MacOS):
gifsicle gif_loopcount_inf.gif --no-loopcount > new_gif_no_loopcount.gif
gifsicle gif_loopcount_inf.gif --loop=3 > new_gif_loopcount_3.gifPut in _layout/head the following, before the opening of the body and after the loading of the css:
<style>
.content {max-width: 50rem}
</style>https://www.w3schools.com/colors/colors_picker.asp
