live examples #16

Open
matthewmueller opened this Issue Jan 7, 2013 · 16 comments

Projects

None yet

5 participants

@matthewmueller
Member

not sure the best way to do this, but since a lot of components are UI-related, it'd be really great to have a place to play around with live examples.

some assumptions would probably have to be made about how to create examples, but I think the community is flexible enough to adopt some sort of standard practice.

@tj
Member
tj commented Jan 7, 2013

+1 gh-pages would work as long as they're not super styled up as crazy pages, I guess even if they are we could iframe them and call it a day

@ForbesLindesay

I'm not sure it really makes sense to go to the trouble of supporting in-line demos rather than just link to the live version on gh-pages. I think we could find we contently run into problems with them in-lined.

@tj
Member
tj commented Jan 7, 2013

that's the same as showing the readmes on component.io really, we're duplicating effort already

@matthewmueller
Member

yah, I definitely can see the potential issues that might come up.

But by putting them all in one spot, we can compare/select components more quickly and it helps newcomers see all this amazing work the community has done and maybe decide to give components a try.

@ForbesLindesay

True, We could render the readme pages without sanitizing them? That way people could place inline html in their readmes. The only issue is that it would show up as garbage on GitHub.

Forcing them onto the gh-pages branch seems un-necessary. Perhaps a url that's located in the component.json file that could point to anywhere. We could also require that it be a fragment of html and not a full document.

@tj
Member
tj commented Jan 7, 2013

gh-pages is the only thing that would be feasible really, most examples take several files and a pretty large chunk of html, plus the build of the component itself

@ForbesLindesay

The build of the component shouldn't be needed, since they can just reference it from component.io and have it automatically built.

Given that we're just talking about a demo for the individual component, There shouldn't be many assets to load in other than those built from the component (which would be served by component.io). I'd therefore envisage just a snippet of html:

<div id="awesome-component">
  <script src="http://component.io/component/awesome/download/latest.js"></script>
  <link href="http://component.io/component/awesome/download/latest.css" rel="stylesheet" />
  <script>
    require('awesome').doMagic(document.getElementById('awesome-component'));
  </script>
</div>
@tj
Member
tj commented Jan 7, 2013

y u fight iframe :p so much easier, less work, less edge-casey, plus most have example.html or demo.html etc for development anyway, if anything a reference to that file could be in component.json but even then that doesn't get us anything better than a simple iframe

@ForbesLindesay

OK, I've just never found IFrames work very well/very consistently, but maybe I've been using them wrong. We could support iFrames to arbitrary locations so people can self-host their demos if they choose. One advantage would be where demos involved ajax server side calls.

@matthewmueller
Member

I just ran through the workflow and it's really easy to set up (especially with git-extras). The other benefit of using gh-pages is that you can just link to them on the individual gh component pages.

How would component.io discover these? are you thinking auto-discover? We could also go with an example key in component.json

@ForbesLindesay

I think it would have to key off something in component.json so say I had an example for ajax as a gh-page:

component.json

{
  ...
  "example": "http://forbeslindesay.github.com/ajax/live-example.html"
  ...
}
@matthewmueller
Member

yah, i like that. some people may choose to put a demo on their blog, etc.

Also just realized that the gh-pages branch could get out of date pretty easily from the example.html / demo.html. Any chance of being able to point an iframe to example.html directly in the master branch?

@tj
Member
tj commented Jan 8, 2013

yeah .example sounds good to me. I wouldn't worry about gh-pages getting stale though really, just like any other repo it would be potentially easier to manage the single branch but that doesn't mean it's a good idea to do so (mocha's docs etc)

@jkroso
jkroso commented Jan 8, 2013

if the example property pointed to a relative path like './demo' that path
could be expanded to 'http://raw.github.com/jkroso/contextmenu/master/demo/'.
Then GHPages is optional

On Tue, Jan 8, 2013 at 2:27 PM, TJ Holowaychuk notifications@github.comwrote:

yeah .example sounds good to me. I wouldn't worry about gh-pages getting
stale though really, just like any other repo it would be potentially
easier to manage the single branch but that doesn't mean it's a good idea
to do so (mocha's docs etc)


Reply to this email directly or view it on GitHubhttps://github.com/component/component.io/issues/16#issuecomment-11980572.

Regards, Jakeb

@ForbesLindesay

It's not quite that simple, GitHub delivers all files (except for gh-pages branch) with a content type of text/plain so all browsers refuse to render them. You can of course build a simple proxy to modify the content type.

@buschtoens buschtoens referenced this issue in componentjs/component Feb 11, 2013
Closed

.demo component json property. #254

@wilmoore

Regarding gh-pages getting stale, what would be helpful is if we provided a GH hook for component that took care of such things (there may be other common things going forward). Do it manually until we have a process we like, then hit up GH support to add an officially supported component.io hook. Composer for example did the same.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment