search

googlearchive / polymer-element-catalog

A catalog of Polymer-based web components built by the Polymer team
BSD 3-Clause "New" or "Revised" License
164 stars 91 forks source link

This needs to be redesigned to prioritize demos and source #208

Open rchrd2 opened 8 years ago

rchrd2 commented 8 years ago

This "issue" would require drastic change, but I think this catalog is doing Polymer Elements a disservice. Developers need to see demos first and foremost when reviewing a library.

Angular Material prioritizes demos: https://material.angularjs.org/latest/demo/autocomplete

And so does Bootstrap: http://getbootstrap.com/2.3.2/base-css.html

As a developer who is learning which components do what and how to compose them, it cumbersome clicking through the docs to see each demo page one at a time. It takes a long time and it is really tedious to click every component one by one and see it isolated context.

A first step towards making this catalog more user friendly would be to show the demos on the same page as the component documentation. But a better solution would be to have a page with many demos on the same page. It would be much more intuitive to see a gallery of modules with example source code and examples of composed elements.

Does demo gallery like this exist? Is anyone interested in making it?

blasten commented 8 years ago

I completely agree. cc @tjsavage @frankiefu

ebidel commented 8 years ago

+1. It's time we did this. @blasten @notwaldorf have an awesome new thing we should incorporate into catalog :)

In the meantime, here's a kitchen sink: https://ebidel.github.io/material-playground/

tjsavage commented 8 years ago

This is a good suggestion. I think the best investment here is making sure the catalog is demo-forward as we're working on re-vamping the Polymer docs site.

blasten commented 8 years ago

@tjsavage @ebidel <code-preview> will help a lot here. http://blasten.github.io/elements/code-preview/demo/index.html

rchrd2 commented 8 years ago

Thanks for the positive response. The <code-preview> element looks great. I could imagine a long page, similar to Bootstrap's documentation, where components are demoed, and it's easy to copy and paste the code examples. To extend this even further, it would be amazing if the code was editable, similar to the Golang documentation.

notwaldorf commented 8 years ago

I've added something similar and lightweight for the iron-flex-layout demo which desperately needed it. (It hasn't made it to the catalog yet).

It basically uses marked-element and prism-highlighter and literally 3 lines of javascript, and looks like this:

b9909874-7e4d-11e5-8ac8-184987803cb3

If you're interested, this is the PR where it landed: PolymerElements/iron-flex-layout#42 (or just run the iron-flex-layout demo locally)

ebidel commented 8 years ago

Related: https://github.com/Polymer/polymer-element-catalog/issues/73