fonsp / Pluto.jl

🎈 Simple reactive notebooks for Julia
https://plutojl.org/
MIT License
4.94k stars 285 forks source link

Feature Proposal: Exported HTML can be passed to a static site generator #794

Closed FelixBenning closed 3 years ago

FelixBenning commented 3 years ago

Short Intro to Static Site Generators

I recently experimented with static site generators (e.g. Jekyll, Hugo, ...) as you can easily host static websites on github pages for free and with static site generators you can simply write content in markdown instead of having to learn html. And using a layout template you get a good looking website without much effort.

In case of Hugo you would add the following yaml heading at the top of your markdown document:

---
title: "A page"
date: "2020-12-21"
tags: [static-site, julia]
---

## Start of the actual markdown document

And you would put that markdown document.md into the /content/rel/path/to/the/markdown folder and the static site generator would generate a html document from it and put it into the index pages such that its link is https://domain/rel/path/to/the/markdown/document

In other words you can easily generate a content-only page without any html/css/js knowledge

Pluto Notebooks

Now while you can use markdown, you can also use html and add the same headers as in markdown documents to include them in the templates.

I tried this with a Pluto html output and it worked surprisingly well. But it still distorts the page (the width becomes really small) and for some reason changed the font of the table of contents to bold.

Manually removing the <link rel="stylesheet" ...> and <style> tags in the header did not seem to do anything. So it seems that a ton of the styling is done in the body of the html document.

What I think would be necessary to make this a smooth experience, would be to somehow make a clean separation between the content and styling such that the content can be passed to a static site generator for it to do its thing. (This could also be used to enables themes for the pluto editor itself with custom stylesheets)

Another problem might be, that the site generator wraps the html document into a box and the html document assumes this box is the entire screen so it puts in additional boxes/margins. So it might also be necessary to separate out a content html page from a layout template.

But I might have missed a ton of other points with my shallow understanding of html and css. I have never really written any html by myself.

fonsp commented 3 years ago

Hi, thanks for the feedback!

Manually removing the <link rel="stylesheet" ...> and