monome-community / norns-community

website listing norns community catalog and documentation
https://norns.community
6 stars 2 forks source link

image code markdown not rendered #15

Closed dtenenba closed 1 year ago

dtenenba commented 1 year ago

Have a look at the oooooo page on here:

https://norns.community/oooooo (scroll down to the grid section)

You'll see this:

image

The corresponding page on GitHub renders the grid images just fine:

https://github.com/schollz/oooooo/blob/main/README.md#grid

So I guess that something in the process of grabbing that page and rendering it is not working properly?

Thanks

p3r7 commented 1 year ago

thanks for reporting!

the issue is more about jekyll's markdown rendering engine mis-interpreting the pipe character (|), supported by github's for image options, as a table delimiter.

                ↓ here
![oooooo_grid-03|690x407](https://user-images.githubusercontent.com/6550035/132006771-4fdd4e9e-3a02-48e9-b94a-7f6454d60399.png) 

indeed jekyll has a different syntax for those (example).

dandante commented 1 year ago

Thanks, I'll post an issue in the oooooo repo about this - hopefully using the jekyll syntax will work in both places, since github pages actually uses jekyll.

p3r7 commented 1 year ago

mhm, i'm not sure. iirc github doesn't support this syntax.

the cleanest solution would be to rewrite those properties as they get imported in norns community. just a mater of regexp-foo.

schollz commented 1 year ago

I think Jekyll supports this? Ie switch kramdown to gfm: https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/setting-a-markdown-processor-for-your-github-pages-site-using-jekyll

Since the markdown is from GitHub readmes it makes sense to use gfm instead of conforming to kramdown

p3r7 commented 1 year ago

oh rad, didn't knew this could be tweaked.

thanks!


EDIT: almost there, probably missing an import or something.

image

it seems that kramdown may be doing GFM by default but it might not support one of those quirks...


EDIT2: the deployment may not rely on the classic "github pages" hosting that supports the GFM renderer.

it may be worth it to try the CommonMarkGhPages renderer, itself wrapping a GFM parser made by github themselves.

p3r7 commented 1 year ago

sorry, i've been busy w/ other stuff.

i plan to alternative renderers on a local copy on my machine (to prevent having to pollute the repo w/ more experimentations).

tyleretters commented 1 year ago

@p3r7 can i take a look?

p3r7 commented 1 year ago

@tyleretters feel free to!

i haven't yet taken the time to upgrade my local jekyll container image to try. you'll certainly be way faster than me esp. if you have something ready to play with.

i hope my previous analysis is clear enough to be useful.

tyleretters commented 1 year ago

three questions for you, @schollz!

  1. where do you see these images rendered with the dimensions as specified in markdown? the repo pages use responsive images. (the dimensions are not doing anything.)

Screenshot 2023-09-12 at 16 34 07

Screenshot 2023-09-12 at 16 33 49

  1. can you kindly point me to the spec that says this "pipe syntax" is supported in gfm? i cannot find it https://github.github.com/gfm/#images

  2. is this syntax perhaps deprecated? (or phantasmal in the first place?)

schollz commented 1 year ago

ah! that syntax is discourse markdown, because I copied and pasted it into Github readme from a lines post I think.

I can just remove it

tyleretters commented 1 year ago

🔥