replace component pages with inline expansion

[tj]

slide out contents, this makes a few things a bit easier, and a bit less "shock" when your search results are suddenly gone. This may have implications once we implement search pagination (even when infinite) however.

[ForbesLindesay]

How much space does that then give you for readme, downloads, dependency graphs etc.? Could we just add the search query to the url (push state or hash fragment) so that back takes you back to the search query.

[ianstormtaylor]

depending on how it's done, it could work. here's what our slide-out trays look like on segment.io:

you could even eke out a bit more space on component because the names are left aligned, so they'll still peak out. (key is just to have something recognizable still peeking out underneath the tray).

that escape component is gna come in handy :p gotta make it public soon

[tj]

yeah something like that would be cool, the component pages are going to be pretty bland no matter what so it'll be nice if it's less of the page

[ForbesLindesay]

They shouldn't be bland, they should have a lot of information to display. They need to provide, at a minimum, links to github, links to direct downloads in a number of different forms (standalone/CommonJS/AMD/standalone component/component + require, minified/not-minified).

They could ideally also provide links to dependencies, readme (with auto generated ToC), graph of dependency tree, links to dependents etc. etc.

I think they'll be anything but bland. I think the big issue is likely to be how crowded they may get.

[juliangruber]

if in doubt, do less

[ForbesLindesay]

I'm not in doubt :smile: There's currently a close competition between component and browserify. They've recently become much more similar systems. We are currently better (in my opinion) at listing modules that work with the browser. The only way to continue to compete is to keep making that side of things powerful and awesome. Graphing the dependency may be something for a separate project, but I think everything else I've mentioned is needed.

Oh, and we'll also need to display browser compatibility badges pulled from jepso-ci, ci.testling and whatever @visionmedia comes up with (I believe he's building something).

[juliangruber]

+1 for compatibility badges and links to different downloads. Dependencies shouldn't matter so much, perhaps only display the number of dependencies.

[tj]

the dep graphs are kinda fun, already got that mostly ready anyway https://github.com/component/component-graph and I'll try and get the CI ready soonish, it's mostly done I just need the front end stuff

[ianstormtaylor]

i don't think their complexity necessarily means that you can't have a slide-out tray. but i do think it would be interesting to see what it feels like, because it could search -> compare much quicker

[ForbesLindesay]

Cool, just to check, are you OK with supporting a number of different CI systems? I think since they all have JSON APIs we should be able to generate matching images for them fairly easily.

[ianstormtaylor]

is a link to download really necessary? shouldnt people be encouraged to use it through component? i guess i can see some use cases, especially for things like segmentio/analytics.js but for most things it seems unnecessary?

and even for things that can be built standalone, if someones on the component site theyre probably not using the standalone version.

[buschtoens]

+1 on the slide-out variant (CSS3 animations ftw). Though we'd have to rethink the scrolling. When the tray is opended, <html|body> should get overflow-y: hidden; so we don't end up with two scrollbars.

html
  overflow-y: scroll
  &.tray-open
    overflow-y: none

.tray
  position: fixed
  left: 400px // This would make the tray fluid, with a left margin of 400px
  width: 900px // This would make the tray fixed at 900px width
  right: 0
  top: 0
  bottom: 0
  z-index: 100 // or whatsoever
  overflow-y: scroll

  pointer-events: none
  transform: translateX(100%)
  opacity: 0
  transition: all .5s ease
  .tray-open &
    pointer-events: auto
    transform: translateX(0%)
    opacity: 1

The downloads are also kinda cool, but tempting. I find them very useful when doing simle Apache stuff. I know it's wrong, but it can be a real time-saver for these scenarios.