Add demo page & SEO improvements

[damien-schneider]

This pull request includes the following changes:

• Added a new demo page to the project.

• Improved SEO meta data for better search engine optimization.

[adumesny]

I find this much harder to parse than the old boring list and takes a lot of space... While the main site looks great, this is all about find examples fast. wonder if we can keep as a list, adding maybe some icon for react vs angular vs vue examples to spruce it up a bit. Also links make it easy to see what you alreayd visited. I was thinking having the nav stay there and load the demo on the right would make it easier to try them all quickly... I was hoping you were doing that.

[damien-schneider]

Thanks for the feedback, I understand the usefulness of maintaining the color link, but the automatic styling might not align with any beautiful design goal. One potential solution is to store the 'visited' status of each link in local storage, using the link's ID, and then apply styles dynamically based on this data. Would this approach work for you?

Regarding the grid layout, I have reservations about moving away from using tags. Tags simplify the process of identifying relevant examples, and we can always add more as needed. My plan is to update the site incrementally and introduce a filtering system that would allow users to select tags like "angular", "vue", "react", "nested grid", etc., to refine the list of examples.

I initially intended to display examples directly on the page via a popup. This would have been straightforward to implement if we were hosting on a platform that supports modern frameworks like React and Next.js. However, since we are using GitHub Pages with plain HTML and JavaScript, integration is challenging. Using an iframe might be a possibility, though I'm not fully convinced it's the best solution. What are your thoughts?

[adumesny]

yeah I was thinking iframe which I do not generally like, but not sure how to split the right side to have demo with a left nav having the list. I do that in my angular apps all the time (routing) but not sure what's possible in github hosting... on mobile it shouldn't split the screen thought. so that's something we can look at later.

What I don't care for is the card view for the list of demos. I think a list as before works much better in visually finding things (alphabetical and groups by types). just need to style it better. Also the demos have a blue bg which looks odd and doesn't add antyhing useful. keep in mind that index.html and demos come directly from the dev website where I modify often as new feature are added. so they must match as I copy over (only the relative paths change).

[damien-schneider]

Thank you for the feedback. Currently, I'm quite limited on time but I will address these points over the next few weeks.

(And yes for sure with Next.JS it would have been a lot easier, but we cannot when hosting with Github pages 😢) For the Iframe solution, we'll explore this later, first I suggest to focus on modernizing the actual site, then to improve it For the blue background in the examples, I'll check this and fix the updated, it was probably not volontary but I will soon change the style of the examples (without changing the html files as it comes directly from the dev, by just changing the style file)

Regarding the interface, I'm open to foregoing a grid view in favor of a list layout. However, it is crucial to include brief descriptions beneath each title. For newcomers to Gridstack, the titles alone may not be sufficiently informative. Additionally, this enhancement is also important for improving SEO.

To combine our ideas, I suggest we could organize the list similar to the examples below, grouping items by common themes—like "React", "Angular", and "Responsive"—rather than in alphabetical order. These groupings would reflect the categorization I used with the tags (the advantage is that this can evolve easily.

Please note that these examples are intended to inspire functionality, not the style:

[adumesny]

not sure I agree with needed comments. the list I have start and are grouped with keywords React, Vue, Reponsive, etc... etc and make it quite easy to find (visually vertically aligned so you scan top to bottom), with longer title for descibing the differences. I would just change the CSS here (in a way the master branch can use as is).

[damien-schneider]

I'm not sure I understand why we shouldn't change the code in a way the master branch can use as is, because I'm not modifying the examples, only the list. So, I don't see why, by changing the HTML, the master branch couldn't use it as is. (sorry for late response)

[adumesny]

can you split this review for home page (ok with changes) vs the demo list view ? I think we need to try something more compact like what was there before and just restyle the list...

[damien-schneider]

Ok I'll do this.

[damien-schneider]

I have reverted the style changes but kept the SEO changes. Even if it should be the same as the master, it would not be optimized at all to keep an old demo.html version without any updates just to keep the same information as the master branch.

(For example not adding the navbar to keep the demo.html the same as master branch is from my point of view not the best decision for the library to be mainly discovered)

[adumesny]

thank you!