How to specify additional CSS

[larsen]

I would like to use and visualize GPX data in a notebook, so I am experimenting with a custom viewer that uses Leaflet.

Adapting an example in The Book of Clerk I was able to use with-d3-require to load the JS code I needed, but according to Leaflet's quickstart guide I also have to include a CSS document.

I could not find a way to do that from a notebook.

I am wondering if I am pursuing a valid idea in general (trying to include extra CSS), and what would be the appropriate mechanism to allow users to do that.

Looking into Clerk's code I found a function include-css+js that seems pertinent (and in fact it calls hiccup/include-css to include the CSS for KaTeX, which is in this respect similar to Leaflet: I mean that using KaTeX implies loading some JS code and a CSS).
Perhaps I could devise a way to make include-css+js receive extra instructions from the user, but again I am not sure this is a sound idea.

Thank you for any guidance or hints you can provide

[zampino]

Hi @larsen, what we're doing in some projects of ours, is to alter the var root of the functions you mention, like:

(alter-var-root #'nextjournal.clerk.view/include-css+js
                  (fn [include-fn]
                    (fn [state]
                      (concat (include-fn state)
                              (list (hiccup.page/include-css "https://unpkg.com/[email protected]/dist/leaflet.css"))))))

this works well enough until we find a dedicated mechanism to allow for 3rd party css additions.

[larsen]

Thank you!

[zampino]

See also discussion in #67 for more context.

[mk]

#323 is a related issue with more info, feel free to upvote it.

[larsen]

Thank you for the extra info!