Render Jupyter Notebooks

[jannis-baum]

Close #55

[jannis-baum]

@tuurep this is also ready, let me know if you want to review it or if I should just merge it when the other PR is through :)

[tuurep]

Ah, cool. I can at least test this,

although not at this minute :D

Tomorrow if I can

[jannis-baum]

Awesome, thanks! And no rush at all!

I added a small Notebook to the repo in tests/notebook.ipynb to test the viewing. It's definitely not complete in terms of exhausting all features of the Notebook format but I also didn't want our repo to be 99.9% Jupyter Notebook code on GitHub haha which happens very quickly because of how the code distribution is computed and the fact that the Notebook format has Base64-encoded images, for example.

Anyways, I thought it might be nice to also add all the Markdown testing files that you have made in the past to that tests directory! Then we have everything in one place :)

[tuurep]

Anyways, I thought it might be nice to also add all the Markdown testing files that you have made in the past to that tests directory! Then we have everything in one place :)

Oh ok, I can try gathering those

Should they be as one long md file, as you're doing with the ipynb as well, as far as I can see?

[jannis-baum]

Thank you!

I don't mind, feel free to organize it how you see fit :)

[jannis-baum]

From my POV this is also ready, I would just add the Markdown testing file(s) :)

[tuurep]

Yeah!

I'll probably make a single .md file like:

Markdown test file

Use this file to try how vivify renders things

Lists

Foo

• bar
• bar
• bar

Codeblocks

qux

Etc

Baz

With each markdown syntax that we know of

Will take 1-2 days

[jannis-baum]

Sounds great, thank you!

[tuurep]

Ok I have a markdown test file!

It might be a little messy but at least good for starters. Feedback/should the images be put in a folder or anything like that?

I took a very surface level look at your notebook rendering, looks good but I'd like to point out:

The overflow-x: scroll results in these pretty big, unnecessary scrollbars, maybe overflow-x: auto would be better?

[tuurep]

Btw when I get the CI-built vivify-linux.zip I have to unzip it twice, it first wants to extract another vivify-linux.zip from inside the vivify-linux.zip and asks me if I want to replace it 😂

$ unzip vivify-linux.zip
Archive:  vivify-linux.zip
replace vivify-linux.zip? [y]es, [n]o, [A]ll, [N]one, [r]ename: y
  inflating: vivify-linux.zip
$ unzip vivify-linux.zip
Archive:  vivify-linux.zip
  inflating: viv
  inflating: vivify-server

Could there be a redundant zipping step somewhere in the build?

(might just be that when downloading, it's zipped again)

[jannis-baum]

Ok I have a markdown test file!

It might be a little messy but at least good for starters. Feedback/should the images be put in a folder or anything like that?

Awesome, thanks! Looks great! I split it into basic/extended and added KaTeX math, Graphviz/Dot and task lists. I hope with that we have everything Vivify can do in there.

[jannis-baum]

The overflow-x: scroll results in these pretty big, unnecessary scrollbars, maybe overflow-x: auto would be better?

Good spot! This doesn't happen in Safari, that's why I didn't see it. I changed it to auto

[jannis-baum]

Btw when I get the CI-built vivify-linux.zip I have to unzip it twice, it first wants to extract another vivify-linux.zip from inside the vivify-linux.zip and asks me if I want to replace it 😂

$ unzip vivify-linux.zip
Archive:  vivify-linux.zip
replace vivify-linux.zip? [y]es, [n]o, [A]ll, [N]one, [r]ename: y
  inflating: vivify-linux.zip
$ unzip vivify-linux.zip
Archive:  vivify-linux.zip
  inflating: viv
  inflating: vivify-server

Could there be a redundant zipping step somewhere in the build?

(might just be that when downloading, it's zipped again)

Ah, that's great you figured out what was going on here! The only time I tested the CI build I unzipped it with macOS Finder and I guess it has some recursive unzipping so I didn't realize.

Your suspicion was correct, seems like the upload-artifact action automatically zips: https://github.com/actions/upload-artifact?tab=readme-ov-file#zip-archives

Should be fixed now :)

[jannis-baum]

Thanks a lot for the reviewing, you spotted some important stuff! And also for the Markdown testing file of course! Great work

Let me know if everything is good now and then we can merge this

[tuurep]

I split it into basic/extended and added KaTeX math, Graphviz/Dot and task lists.

Nice, I forgot task list!

If we're going by these definitions of Extended Syntax:

https://www.markdownguide.org/extended-syntax/

Then this split is all over the place 😄 partly because of how I arranged stuff like code blocks and fenced code blocks under the same section etc

Now this extended syntax is in basic file:

• table
• fenced code block (triple backtic code block)
• strikethrough
• automatic URL linking

Are you sure it's worth to split?

Btw quite disturbing:

How the checkbox isn't aligned to the text. I might look into that next 😄

[tuurep]

Great, build artifact zip fix works, thanks!

[jannis-baum]

Then this split is all over the place 😄 partly because of how I arranged stuff like code blocks and fenced code blocks under the same section etc

Hahaha okay fair I could have checked that, I thought some of those seemed too basic to be "extended"🙈

Maybe then let's actually have 3 files? Basic, extended, and something that's one level fancier than extended for (hope this list is correct & complete now)

• Maths
• relative file links (this is actually something that's still missing and something that also answers our question if we should split ^^)
• Graphviz
• <kbd>

Would you mind refactoring this into the three-way split? In case you don't have another idea, the third one could be called markdown-additional.md or something. Best would be to also include the URL to the extended syntax that you mentioned in the extended file.

Btw quite disturbing:

How the checkbox isn't aligned to the text. I might look into that next 😄

Haha sounds good!

Edit: I just saw that (if I didn't miss anything) super/subscripts are the only piece of extended syntax Vivify doesn't support yet. Maybe it would be good to add that for completeness, I opened #87

[tuurep]

Ok, I'll do the 3-way split as soon as I can

[tuurep]

All finished! Can you give it a check?

Note:

• changed name markdown-base.md to markdown-basic.md
• ordering is the same as in the markdownguide links, except for Footnote so that the section is right next to the footnotes
• added a section for the custom heading IDs too.. see Support full extended syntax #87 (comment) if we can add that

[jannis-baum]

Awesome, looks perfect! Thanks so much. Will merge now🎉