META Gnoweb UI Improvements #3355

moul · 2024-12-17T16:11:53Z

Centralizing here some feedback about the new Gnoweb UI.

moul · 2024-12-17T16:13:03Z

Add a way to easily see which network we are running on. This could be a ribbon or another indicator.

We need distinct values for the portal, testnets, and local (gnodev).

Bonus: subtle custom CSS allows us to have a gentle background color to quickly identify the portal, local, and other options.

moul · 2024-12-17T16:20:16Z

Use alt or a similar key to identify the buttons when hovering the mouse over them.

moul · 2024-12-17T16:21:32Z

When empty, remove the block or add text explaining why it is empty.

moul · 2024-12-17T16:49:02Z

Strange vertical alignment

moul · 2024-12-17T16:51:34Z

bug breaking txlink:

CleanShot.2024-12-17.at.17.50.55.mp4

moul · 2024-12-17T16:52:30Z

Lack of cookie for the key/address.

CleanShot.2024-12-17.at.17.52.04.mp4

kazai777 · 2024-12-17T17:56:14Z

It would be nice to have dark mode

This PR aims to fix some of remaining UI bugs on gnoweb after the revamp merge. Some of: #3355 - Fixes Safari select input design and icons - Fixes input hover - Fixes ToC font style - Fixes UI details and improve CSS - Fixes Responsive with long content - Fixes Scrollbar - Fixes fonts loading strategy and size - Fixes ts issue with copy btn (quick clicks) - Fixes some A11y

This PR aims to fix some of remaining UI bugs on gnoweb after the revamp merge. Some of: gnolang#3355 - Fixes Safari select input design and icons - Fixes input hover - Fixes ToC font style - Fixes UI details and improve CSS - Fixes Responsive with long content - Fixes Scrollbar - Fixes fonts loading strategy and size - Fixes ts issue with copy btn (quick clicks) - Fixes some A11y

Adds JavaScript features listed #3355 regarding Help section in gnoweb. - Adds localStorage feature for address - Fixes txlink - Minor UI styles

leohhhn · 2024-12-18T13:41:43Z

We should see if we can somehow make the page a little less empty when there is little or no content, like for example here: https://gno.land/r/docs/hello

Also, in this specific case above, the TOC is not shown even though the text is H1

This PR aims to fix some of remaining UI bugs on gnoweb after the revamp merge. Some of: gnolang#3355 - Fixes Safari select input design and icons - Fixes input hover - Fixes ToC font style - Fixes UI details and improve CSS - Fixes Responsive with long content - Fixes Scrollbar - Fixes fonts loading strategy and size - Fixes ts issue with copy btn (quick clicks) - Fixes some A11y

Adds JavaScript features listed gnolang#3355 regarding Help section in gnoweb. - Adds localStorage feature for address - Fixes txlink - Minor UI styles

stefann-01 · 2024-12-19T02:18:25Z

Naming auto-generated function calls for realms as 'docs' isn't very intuitive. It took me a few minutes to realize what it was. I initially thought it would lead to a general documentation page.

leohhhn · 2024-12-19T12:43:34Z

Inline code does not match font size of other text when in H1,H2, etc

Continue fixing the issues reported in #3355 mainly: - Colors a11y issues - Directory layout - Copy btn style - code element font-size to follow parent's one

This PR aims to fix some of remaining UI bugs on gnoweb after the revamp merge. Some of: #3355 - Fixes Safari select input design and icons - Fixes input hover - Fixes ToC font style - Fixes UI details and improve CSS - Fixes Responsive with long content - Fixes Scrollbar - Fixes fonts loading strategy and size - Fixes ts issue with copy btn (quick clicks) - Fixes some A11y

Adds JavaScript features listed #3355 regarding Help section in gnoweb. - Adds localStorage feature for address - Fixes txlink - Minor UI styles

Continue fixing the issues reported in #3355 mainly: - Colors a11y issues - Directory layout - Copy btn style - code element font-size to follow parent's one

leohhhn · 2025-01-13T20:29:05Z

Please add a back button!
We should make imports in the source tab clickable; depending on the domain set in the gnoweb config, the urls generated would differ:

if gnoweb's config has test5.gno.land -> an import, such as "gno.land/r/leon/hof" would be clickable with the url test5.gno.land/r/leon/hof

leohhhn · 2025-01-16T22:18:32Z

It seems that with a ?query inside of the path, the source/docs buttons don't work properly - clicking them adds to $source or $help to the url, but doesn't actually switch to the tab.

You can check on https://gno.land/r/docs/avl_pager

leohhhn · 2025-01-16T22:23:02Z

Seems someone broke the TOC click to jump to anchor! Currently clicking just adds a single # to the url.

edit: fixed

leohhhn · 2025-01-17T16:42:46Z

Seems strikethrough is also not rendered on gnoweb currently, similarly to how tables were disabled. Should we check for some other elements as well?

EDIT: solved

leohhhn · 2025-01-17T17:22:33Z

In the docs page, when user inputs for functions contain !, and possibly ?, generated commands sometimes omit a closing ", which makes them invalid. I remember in the old version of gnoweb that ! was always escaped.

EDIT: solved

matijamarjanovic · 2025-02-03T21:58:25Z

Hey, this case should maybe be covered with appropriate message(when trying to access the "docs" tab for a package):

This realm is a good example of reusing and integrating some of my recently added libraries: - `p/moul/md` #2819 - `p/moul/mdtable` #3100 - `p/moul/realmpath` #3257 - `p/moul/txlink` #3289 - `p/moul/collection` #3321 - `p/demo/avl/pager` #2584 It helped me identify that `txlink` was not escaping the arguments, which resulted in invalid links. (fixed in #3682) Additionally, it provided me with a better understanding of: - The shortcomings of the `p/moul/md` API, particularly regarding `"\n"` handling - The need for improved management of the pager for `p/moul/collection` - What kind of UI improvements we could need on gnoweb. #3355 Demo: https://github.com/user-attachments/assets/4b20cee8-b8d7-4eba-90a8-5b87a3c19521 I also suggest you to look at the `filetest.gno` file. I believe we should proceed with the merge, to inspire others to create similar composed realms. However, I have a few improvement ideas: 1. Extract most of the generic logic into a `p/moul/present`. 2. Consider either making r/moul/present importable by `r/coreteam/present` to create a hub for presentations from all teammates, or the opposite: make `r/coreteam/present` the content source and allow `r/moul/present` to display a subset where `author="moul"` What are your thoughts? 3. Clean up the code using an improved `p/moul/md` and possibly new `p/` generic utilities. Depenes on #3682 --------- Signed-off-by: moul <94029+moul@users.noreply.github.com>

This PR ensures that special characters like ! and ? in user inputs are properly escaped when generating commands in the docs page ($help). Previously, entering ! or any other special char could cause the command string to break by omitting a closing ", making it invalid. This fix applies proper escaping to prevent such issues, ensuring that generated commands remain valid and executable. The fix introduces an escaping function that handles shell-sensitive characters before inserting them into the generated command strings. This approach ensures the commands remain intact without affecting their output when executed. Thus, the escape char is also removed from the cmd when the shell-sensitive char is removed from the arg input. cf: [issue 3355](#3355 (comment))

This PR fixes an issue where gnoweb URLs contain both a query (? prefix) and a gnowebquery ($ prefix). Previously, the header links appended the gnowebquery after the query, whereas it should be placed before the query. This update ensures the correct ordering of URL components. cf issue: #3355 (comment) --------- Co-authored-by: Guilhem Fanton <8671905+gfanton@users.noreply.github.com>

leohhhn · 2025-02-07T18:01:11Z

Let's add copy buttons and codelines to all rendered codeblocks. I see now downside to this. Any thoughts?

leohhhn · 2025-02-13T22:14:38Z

Would be cool to get some better data under the titles when searching on google. I assume this is something we could achieve with realm metadata, no? Anyways, even with no metadata, maybe we could set some default text?

Also, change the title of the website to lowercase gno.land :)

alexiscolin · 2025-02-14T03:37:22Z

Yeah I have an issue for that. I plan to tackle this meta data PR next week!👍

alexiscolin · 2025-02-14T03:38:48Z

@leohhhn cc #3333

moul added 🐞 bug Something isn't working 🌟 improvement performance improvements, refactors ... labels Dec 17, 2024

moul assigned alexiscolin Dec 17, 2024

github-project-automation bot added this to 🧙‍♂️gno.land core team Dec 17, 2024

github-project-automation bot moved this to Triage in 🧙‍♂️gno.land core team Dec 17, 2024

alexiscolin mentioned this issue Dec 17, 2024

fix: gnoweb UI styles #3349

Merged

alexiscolin mentioned this issue Dec 18, 2024

feat: improve gnoweb help function #3362

Merged

thehowl pushed a commit that referenced this issue Dec 18, 2024

feat(gnoweb): improve help page (#3362)

2fed38d

Adds JavaScript features listed #3355 regarding Help section in gnoweb. - Adds localStorage feature for address - Fixes txlink - Minor UI styles

omarsy pushed a commit to omarsy/gno that referenced this issue Dec 18, 2024

feat(gnoweb): improve help page (gnolang#3362)

d2e3de0

Adds JavaScript features listed gnolang#3355 regarding Help section in gnoweb. - Adds localStorage feature for address - Fixes txlink - Minor UI styles

alexiscolin mentioned this issue Dec 19, 2024

style: various gnoweb fix after revamp #3376

Merged

moul pushed a commit that referenced this issue Dec 19, 2024

style: various gnoweb fix after revamp (#3376)

b9aedb1

Continue fixing the issues reported in #3355 mainly: - Colors a11y issues - Directory layout - Copy btn style - code element font-size to follow parent's one

albttx pushed a commit that referenced this issue Jan 10, 2025

feat(gnoweb): improve help page (#3362)

e38c40f

Adds JavaScript features listed #3355 regarding Help section in gnoweb. - Adds localStorage feature for address - Fixes txlink - Minor UI styles

albttx pushed a commit that referenced this issue Jan 10, 2025

style: various gnoweb fix after revamp (#3376)

0158077

Continue fixing the issues reported in #3355 mainly: - Colors a11y issues - Directory layout - Copy btn style - code element font-size to follow parent's one

This was referenced Feb 3, 2025

feat(gnoweb): enable strikethrough UI #3670

Merged

fix(gnoweb): header links with webquery #3671

Merged

fix(gnoweb): escape bash chars in help args #3672

Merged

moul mentioned this issue Feb 4, 2025

feat: add r/moul/present #3668

Merged

leohhhn mentioned this issue Feb 11, 2025

Source Page Not Displaying on GnoDev in Windows #3722

Closed

gfanton mentioned this issue Feb 16, 2025

feat(gnoweb): Add column extension #3763

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

META Gnoweb UI Improvements #3355

META Gnoweb UI Improvements #3355

moul commented Dec 17, 2024

moul commented Dec 17, 2024

moul commented Dec 17, 2024

moul commented Dec 17, 2024

moul commented Dec 17, 2024

moul commented Dec 17, 2024

moul commented Dec 17, 2024

kazai777 commented Dec 17, 2024

leohhhn commented Dec 18, 2024 •

edited

Loading

stefann-01 commented Dec 19, 2024

leohhhn commented Dec 19, 2024

leohhhn commented Jan 13, 2025

leohhhn commented Jan 16, 2025 •

edited

Loading

leohhhn commented Jan 16, 2025 •

edited

Loading

leohhhn commented Jan 17, 2025 •

edited

Loading

leohhhn commented Jan 17, 2025 •

edited

Loading

matijamarjanovic commented Feb 3, 2025

leohhhn commented Feb 7, 2025 •

edited

Loading

leohhhn commented Feb 13, 2025 •

edited

Loading

alexiscolin commented Feb 14, 2025

alexiscolin commented Feb 14, 2025

META Gnoweb UI Improvements #3355

META Gnoweb UI Improvements #3355

Comments

moul commented Dec 17, 2024

moul commented Dec 17, 2024

moul commented Dec 17, 2024

moul commented Dec 17, 2024

moul commented Dec 17, 2024

moul commented Dec 17, 2024

moul commented Dec 17, 2024

kazai777 commented Dec 17, 2024

leohhhn commented Dec 18, 2024 • edited Loading

stefann-01 commented Dec 19, 2024

leohhhn commented Dec 19, 2024

leohhhn commented Jan 13, 2025

leohhhn commented Jan 16, 2025 • edited Loading

leohhhn commented Jan 16, 2025 • edited Loading

leohhhn commented Jan 17, 2025 • edited Loading

leohhhn commented Jan 17, 2025 • edited Loading

matijamarjanovic commented Feb 3, 2025

leohhhn commented Feb 7, 2025 • edited Loading

leohhhn commented Feb 13, 2025 • edited Loading

alexiscolin commented Feb 14, 2025

alexiscolin commented Feb 14, 2025

leohhhn commented Dec 18, 2024 •

edited

Loading

leohhhn commented Jan 16, 2025 •

edited

Loading

leohhhn commented Jan 16, 2025 •

edited

Loading

leohhhn commented Jan 17, 2025 •

edited

Loading

leohhhn commented Jan 17, 2025 •

edited

Loading

leohhhn commented Feb 7, 2025 •

edited

Loading

leohhhn commented Feb 13, 2025 •

edited

Loading