Adapting TableOfContents for references or margin notes

[stefanbringuier]

Scope

I would like to be able to generate a reference list in the sidebar for Pluto notebooks. I'm just trying to see if I can adapt TableOfContents for making a similar style sidebar but for enumerated references. A very crude version can be done doing something like below but it really doesn't achieve the intended goal, for example, the rendered markdown cells have large font.

Features

1. Wrap text if reference entry is too long.
2. Turn markdown footnotes into reactive enumerated list in reference bar, for example:

      Here is a reference [^A] and another one [^B].
      [^A]: First reference.
      [^B]: Second reference.
   

   that yields An example of turning non-enumerated references into enumerated was given in #44 .

I haven't really been able to figure out how to do this. Any ideas?

Probably could also look at using a bibtex file and something like I'm Bibliography.jl to digest it and then write a formatter for markdown/html.

[disberd]

I dug quite a bit into the standard TableOfContents from PlutoUI recently in order to try reimplemeting it to add some features I wanted like ability to hide heading/cells, collapsing and ToC expansion only on hover.

The way TableOfContents work is by identifying all HTML header (h1, h2, ...) tags elements in your notebook and then generating custom hyperlinks inside the output cell of your TableOfContents

Selecting specific elements in your page is quite efficient using querySelectorAll, where you could specify your selection on classes or attributes on top of tag names. My first idea in your case would be to create a custom julia function to generate a specific html element to represent your numbered reference and give it a consistent html class. This way you could find all the numbered reference by using querySelectorAll with your predefined class and then mostly use the same code of the standard TableOfContents. This would also provide you with super easy custom styling of your numbered references using CSS.

You could have a look at this notebook that I used to investigate generating numbered latex equations to have an idea of how to do most of the things I mentioned (apart from the source of TableOfContents) https://github.com/disberd/PlutoUtils.jl/blob/22794583452ff40b53828f0d39f8c9ec3c856a93/src/latex_equations.jl

Take a look at the function definition of eqref which simply creates an HTML link ( tag) with custom class (and some custom attributes) so that I can style it appropriately (removing the typical underline of links) and find it with querySelectorAll in order to assign the equation number dynamically.

I think this should be a good starting point to explore your idea but let me know if you have any other question

[ghost]

Take a look at the function definition of eqref which simply creates an HTML link ( tag) with custom class (and some custom attributes) so that I can style it appropriately (removing the typical underline of links) and find it with querySelectorAll in order to assign the equation number dynamically.

Revisting this see if I can get it to work. Firstly, thanks @disberd , your resources are a great start, and the equation reference utility in PlutoUtils.jl extremely useful in my research notebooks; seems like this should be adopted by PlutoUI.jl.

However, I've been trying to utilize initialize_eqref and texeq as a template with no progress, I just don't know how to cobble things together. I guess the problem is my limited Javascript knowledge. Seems like I should be able to create a function cite(formatted_ref) which behaves similar to texeq sans KaTeX and modify the querySelectorAll calls in initialize_eqref, calling it generate_citations(), to look for the environment created by cite to do the cross-ref and generate bibliography. Do you have any other snippets or advice to help me move this along?

[disberd]

@bringuiers Unfortunately I do not have any other snippets, but if you are trying to develop this as a notebook like I do in PlutoUtils and are willing to share your draft I can at least check if I see something wrong.

[sashmit]

@bringuiers: if you want to create margin notes, you can always use this function: https://github.com/JuliaPluto/PlutoUI.jl/blob/5a49cefc0f517c0eeb17bddeb655a9f6447f5213/src/Layout.jl#L340

a bibliography.jl to html function would be neat

[ghost]

@sashmit thanks. I came across such functions in PlutoUI.jl, just need to think a bit more on how to use it for what I want to achieve.