eth-protocol-fellows/protocol-studies

Markdown tables content not showing up right in wiki

Closed this issue · 13 comments

There are 2 issues with markdown tables content not showing up right in wiki:

  • markdown footnotes inside tables are not parsed correctly in wiki index.html (div / td)
    Possible solution: check and fix Docsify config

  • wide markdown tables that have more columns (e.g. roadmap page tables) won't scroll in wiki page
    Possible solution: check and fix CSS config

Can you elaborate on this and provide screenshots or links to broken tables? I am not really sure what you mean by 1. Looking at roadmap tables referenced in 2, they are readable, rendered with horizontal lines. What do you mean won't scroll in wiki page? Like having the table within a separate window of smaller size instead of rendering the whole table?

you're right Mario, I missed to clarify that 2) is an issue on smaller screens like mobile, and that the table does not have a horizontal scroll, it just shows truncated

Screenshot_20240512_120552_Chrome.jpg

If it's ok with you, I propose to take on this issue myself, together with a fellow that offered to contribute, part of the our learning curve. guidance is welcomed and appreciated, ofc.

I am not really sure what you mean by 1.

The markdown footnotes inside table content are not functional in wiki index.html, they are not parsed from markdown to html I guess, they just show up as text inside div/td
image

Thanks for clarifying!

The first issue is that tables break footnotes linking. We don't have guidelines on using footnotes in the wiki, I am not sure if want to standardize it. The links are still available at the bottom so it is usable and can be also fixed by just adding links directly to the text instead of a footnote. That being said, we still need to fix this but the other issue has higher priority.

The second problem is on mobile platforms, tables are not responsive and therefore some are not readable at all. Mobile is generally not well optimized, there are more UX issues like sidebar navigation.

@gorondan I pushed update to wiki-pages to fix the mobile scrolling. Can you check if it works for you? It should be deployed on epf.wiki

@gorondan I pushed update to wiki-pages to fix the mobile scrolling. Can you check if it works for you? It should be deployed on epf.wiki

yes, large tables scroll horizontally now. thank you! point 2. is thus marked as resolved 👏

Currently, footnotes do not render at all (withing table or otherwise). For example in ePBS:

image

I am testing a plugin which fixes this.

Currently, footnotes do not render at all (withing table or otherwise). For example in ePBS:

image

I am testing a plugin which fixes this.

@raxhvl, there's a fellow who fixed the second point of this issue and improved the 1st, I tested it on local the other day. PR today, hopefully, I'll re-ping him

@raxhvl They do, check other references or pages. Only the numebr 23 here is linked wrong in the text but others are ok. In tables, every of them fail

In tables, every of them fail

I think we did find a solution by adding a hook in index.html that parses markdown footnotes, here's how it looks on localhost:

Screenshot_20240516_165557_WhatsApp.jpg

A PR will be opened today.

Also, for point 1 of this issue, the proposal is to switch to x-overflow:auto from x-overflow:scroll.

@gorondan I tried auto at first but it didn't work for me. But I only checked quickly on my phone so it would be good to give it a proper test on multiple devices

@gorondan I've created #285 for addressing the footnotes issues.

yes, I fed docsify with updated index.html locally and it seems the 2nd issue is fixed