Create static demo page for github-pages

[hackingbeauty]

After developing my component, I'd like to create a demo page and push to github-pages.

Can we create a command for this? Or does this use-case already exist?

[insin]

Is there a common workflow for that? Happy to add a per-repo command to make it easier.

[dtinth]

This is what I did for redux-send.

npm install --save-dev gulp gulp-gh-pages

No gulpfile involved! Just a one liner shell script:

  "scripts": {
    "gh-pages": "node -e \"require('gulp').src('demo/dist/**/*').pipe(require('gulp-gh-pages')())\""
  },

[novascreen]

i just tried this, but wanted to see if i could find a way that doesn't rely on gulp

for me this worked:

npm install --save-dev gh-pages

And in package.json:

"scripts": {
  "deploy": "gh-pages -d demo/dist"
}

I could take a stab at a PR for this if you're interested. I just found your project yesterday and i really enjoyed creating my first React component with it :+1:

I guess this could be another question after the jsNext question? If you would add this i'm assuming the default should be no?

[revolunet]

would be great to have @novascreen solution in the default template

[leanne1]

I've written up how to publish to GitHub pages here: https://notesfromthefrontend.wordpress.com/2016/11/16/publish-a-react-nwb-project-to-github-pages/

[insin]

This should be added to the docs now that we have working examples, thanks for those.

[tnrich]

@insin has the docs for doing this been published yet? Thanks!

[sconstantinides]

@novascreen's solution works but renaming /demo to /docs might be simpler and more obvious. Or allowing this as a nwb config.

[RavenHursT]

So this worked.. initially... https://ravenhurst.github.io/react-flex-rating/

You can see my publish-demo script here: https://github.com/RavenHursT/react-flex-rating/blob/master/package.json#L21

But now I've made some updates... and while my gh-pages branch reflects those changes after running publish-demo again, the page still doesn't.

For example..

I have these transitions in the compiled css https://github.com/RavenHursT/react-flex-rating/blob/gh-pages/demo.c79dc9cc.css:

But the css on the generated GH-page looks like an old version w/o the transitions: https://ravenhurst.github.io/react-flex-rating/demo.c79dc9cc.css

Is there some kind of caching or something keeping me from seeing the changes?

[revolunet]

The gh-pages can take up to 10 minutes to update.

Looks like the transitions are there too now

[RavenHursT]

Nope.. I did this yesterday, and the transitions still aren't there... also.. there's a min-width on the dropdowns to keep the labels from wrapping that aren't there either... 🤔

[revolunet]

this is what i have atm :

.rating .rating-icon{cursor:pointer;position:relative;display:inline-block}.rating.disabled{opacity:.5}.font-size-0{font-size:0!important}.font-size-0-5{font-size:.5rem!important}.font-size-1{font-size:1rem!important}.font-size-1-5{font-size:1.5rem!important}.font-size-2{font-size:2rem!important}.font-size-2-5{font-size:2.5rem!important}.font-size-3{font-size:3rem!important}.font-size-3-5{font-size:3.5rem!important}.font-size-4{font-size:4rem!important}.font-size-4-5{font-size:4.5rem!important}.font-size-5{font-size:5rem!important}.font-size-5-5{font-size:5.5rem!important}.font-size-6{font-size:6rem!important}.font-size-6-5{font-size:6.5rem!important}.font-size-7{font-size:7rem!important}.font-size-7-5{font-size:7.5rem!important}.font-size-8{font-size:8rem!important}.font-size-8-5{font-size:8.5rem!important}.font-size-9{font-size:9rem!important}.font-size-9-5{font-size:9.5rem!important}.font-size-10{font-size:10rem!important}.font-size-10-5{font-size:10.5rem!important}#demo .html-entities-rating{font-size:2rem}#demo .MuiFormControl-root-1{min-width:8em}#demo .rating .rating-icon>span>span{-webkit-transition:color .15s;-o-transition:color .15s;transition:color .15s}#demo .rating .rating-icon .display-icon{-webkit-transition:width 50ms;-o-transition:width 50ms;transition:width 50ms}#demo .rating .rating-icon .background-icon>span{color:#494949}#demo .rating .rating-icon .background-icon.highlight>span{color:#ffd34c}#demo .rating .rating-icon.active .display-icon>span,#demo .rating .rating-icon.half .display-icon>span{color:#db9f33}#demo .rating .rating-icon.highlight .display-icon>span{color:#ffd34c}
/*# sourceMappingURL=demo.c79dc9cc.css.map*/

also, the hash in the filename should prevent any cache issue

[RavenHursT]

Ok.. weird.. you are correct!

What's odd now, is how the classnames on the elements are now totally different!

Locally.. running the demo, the markup looks like this.. the class names are all different.

No wonder why the css isn't getting applied properly!