🌟 New layout, new system

[fonsp]

This is a complete rewrite of our website! It uses a special new system, PlutoPages.jl.

New design

New search feature

Collapsible sidebar on small screens

Local development environment

PlutoPages.jl is written in... Pluto! When you run julia develop.jl, everything will launch automatically, including this dashboard with site generation progress:

Schermopname.2022-11-01.om.20.24.57.mov

New features

The new PlutoPages system adds the following features:

• Universal search, including notebook contents (and video captions in the future)
• New sidebar layout
• Better small-screen support: the site works well on a smartphone
• More powerful template system, with things like always-up-to-date Julia version in the installation instructions
• Light mode and dark mode 🌚🌝
• Notebook exports run in parallel, giving a 3x build speedup on GitHub Actions.
• Everything is automated:
  • the sidebar and main menu automatically update: no more book_model.jl
  • Pluto frontmatter (💌 Pluto.frontmatter fonsp/Pluto.jl#2008 and Frontmatter GUI fonsp/Pluto.jl#2104) is used for title, chapter, section, etc, so this information is now stored in the notebook file itself
  • The lecture header with youtube video does not need to be included in the notebook file: this is done by PlutoPages
• Better page load speeds:
  • no more <iframe> for the notebook embed
  • Faster youtube embed using https://github.com/paulirish/lite-youtube-embed
  • Bundled CSS and JS resources for Pluto resources: Use bundled editor.html for static export if possible fonsp/Pluto.jl#2133
  • Preload/precache Pluto resources on our index page
• Better SEO:
  • no more <iframe> for the notebook embed:
    • content can be crawled by Googlebot
    • notebook contents are indexed at the correct page, instead of the URL of the embedded notebook. This means that google search visitors will see our sidebar and other navigation to explore the rest of the site.
  • HTML SEO tags, like title, description, date, author, image, crosslinks.
  • Possibility to add a sitemap later.
• Fully-featured local development environment: you can now run the entire site locally, with fast realtime updates to changing the site source.

Supersedes #120

[greimel]

Hi @fonsp! This looks amazing! Have been working on a template repository already? Or is forking this repository the way to go?

[fonsp]

Hey @greimel ! I have not worked on a template yet, but this time around, forking and editing for your own needs should be a bit simpler!

TODO for the template:

• Folder watching to automatically refresh the site (when developing locally) is broken
• A few more months of polishing the PlutoPages system.
• Feedback from someone else using the system.
• Register PlutoPages as a package, so that template users can receive patch updates without having to do a tricky git dance.
• Write "author documentation" (I need to do this in any case): how do I add notebooks, update the sidebar, etc
• Factor out "computational thinking" styles vs the "template" style

Contributions are welcome! Let me know if you want to start using the new system :) I can prioritise writing documentation if you like.

[lucaferranti]

This looks very exciting. For a course I am teaching next spring, I am planning to have all my teaching materials as pluto notebooks in a public website and I'd be interested in using this format.

A template would be super nice to have. I cloned the repository yesterday and started editing with my material, I could get things to work locally and I was amazed by how smoothly the plug-and-play went.

One thing I couldnt figure out yet is how to bring the website to life. Particularly,

1. Where does the magic happen? I looked at the generate.jl script and the ExportNotebooks.yml, but I didnt see how (or even if) that was generating the website from the source.
2. What should I edit in the cloned repository to deploy the website, say in droplet like the computational course did? (Here I am pretending I know how to setup droplet, which I actually dont :) )
3. This is maybe a crazier idea, but would love to join forces of this with Precompute all possible slider states JuliaPluto/PlutoSliderServer.jl#29 so that I could precompute all states of the notebooks, export the html and host everything in github pages without running a server. Do you think this is feasible? reasonable? I see PlutoPages.jl calls PlutoSliderServer.export_notebook, so I could start by editing that and see how it goes.

Do you have @fonsp thoughts/pointers on those? I'll need to work on this during summer/fall for my teaching anyway and I'd be happy to pay-back with helping setting up a generic template, or write some notes for future generations at least.

[fonsp]

Hey @lucaferranti ! What do you mean with bringing the website to life and "magic"? 😅 Do you mean how to make the html files available on a web domain (computationalthinking.mit.edu instead of localhost) or how to have @Bind working with PlutoSliderServer?

For the first: we use github pages, see our github action files to learn more
For the second, we run PlutoSliderServer on a 32GB Linux server that we rent at digitalocean. The setup is exactly https://github.com/JuliaPluto/PlutoSliderServer.jl#sample-setup-given-a-repository-start-a-plutosliderserver-to-serve-static-exports-with-live-preview . The configuration files are in the PlutoDeployment folder.

[fonsp]

I am definitely planning to use JuliaPluto/PlutoSliderServer.jl#29 here! It will be very easy to set up, because the idea of JuliaPluto/PlutoSliderServer.jl#29 is:

• Run a github action that use PlutoSliderServer to generate a large folder /staterequest/
• Put this on netlify/github pages
• This netlify site will now behave exactly like a real PlutoSliderServer on that address. (It responds to the same URLs with the same responses. See the PlutoSliderServer readme to learn more.)

In the case of our course, we will use JuliaPluto/PlutoSliderServer.jl#29 in hybrid mode: we still run a plutosliderserver on a linux server, but a subset of the notebooks will be fully precomputed and then shut down, instead of leaving them running. This will allow us to rent a server with less memory, or to host more lectures :)

[lucaferranti]

thanks for the reply @fonsp

I drafted a MWE template from the new format here: https://github.com/lucaferranti/computational-thinking-template , as a bonus, I wrote in the README some notes while I was playing, mainly what to edit, how to set tracks etc. maybe it's useful.

I am experimenting in combining JuliaPluto/PlutoSliderServer.jl#29 with the new format (see JuliaPluto/computational-thinking-template#1), in general it should work. The only things I need to figure out (I think) are

• where to place all the generated bondconnections and staterequests. Can I have two folders with that name under _site for all notebooks.
• whether I need to tweak something inside PlutoPages.jl to make sure it can find them in the right place.

I'll play more with this during the weekend, but feel free to chim in if you have some comments / suggestions.

[fonsp]

Hey @lucaferranti , that's awesome!! ⭐

If you have time, I would love to have a short call! Right now would be perfect, the next days might be more difficult to schedule. Let me know! fons@plutojl.org

[lucaferranti]

Hi @fonsp , very nice to hear, just sent you an email