-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add demo page & SEO improvements #2664
Add demo page & SEO improvements #2664
Conversation
I find this much harder to parse than the old boring list and takes a lot of space... |
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? |
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). |
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'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) |
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... |
Ok I'll do this. |
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) |
demo/index.html
Outdated
@@ -1,62 +1,194 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<!doctype html> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please revert this for now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just the CAPS on the doctype (which comes from prettier probably) or all the index.html file on the demo ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
all of it. WIP for the demo index
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
thank you! |
This pull request includes the following changes:
Added a new demo page to the project.
Improved SEO meta data for better search engine optimization.