chore(examples): upgrade to modern build

tomchentw · May 22, 2015 · fb82ff2 · fb82ff2
1 parent f1a92b7
commit fb82ff2
Show file tree

Hide file tree

Showing 10 changed files with 299 additions and 114 deletions.
diff --git a/examples/gh-pages/package.json b/examples/gh-pages/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "gh-pages",
+  "version": "1.0.0",
+  "scripts": {
+    "clean": "rm -f ../../public/index.html && rm -rf ../../public/assets && rm -rf ../../public/tmp",
+    "build_client": "npm run clean && webpack -p",
+    "build": "npm run clean && webpack -d",
+    "dev": "npm run clean && webpack-dev-server -d --content-base ../../public"
+  },
+  "devDependencies": {
+    "babel-core": "^5.4.7",
+    "babel-loader": "^5.1.3",
+    "css-loader": "^0.13.1",
+    "extract-text-webpack-plugin": "^0.8.0",
+    "file-loader": "^0.8.3",
+    "github-fork-ribbon-css": "git+https://github.com/tomchentw/github-fork-ribbon-css.git#gh-pages",
+    "isomorphic-react-plugin-factory": "^1.0.1",
+    "node-sass": "^3.1.2",
+    "raw-loader": "^0.5.1",
+    "react-hot-loader": "^1.2.7",
+    "sass-loader": "^1.0.2",
+    "style-loader": "^0.12.2",
+    "webpack": "^1.9.8",
+    "webpack-dev-server": "^1.9.0"
+  },
+  "dependencies": {
+    "animate.css": "^3.2.5",
+    "bootstrap-sass": "^3.3.4",
+    "classnames": "^2.1.1",
+    "prismjs": "git+https://github.com/PrismJS/prism.git#master",
+    "react": "^0.13.3",
+    "react-prism": "^1.3.1",
+    "toastr": "^2.0.4"
+  }
+}
diff --git a/examples/gh-pages/scripts/ReactRoot.js b/examples/gh-pages/scripts/ReactRoot.js
@@ -0,0 +1,45 @@
+"use strict";
+
+var React = require("react/addons");
+var ReactToastr = require("react-toastr");
+var {ToastContainer} = ReactToastr;
+var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.animation);
+
+var ReactRoot = React.createClass({
+  addAlert () {
+    this.refs.container.success("hi! Now" + new Date(), "///title\\\\\\", {
+      closeButton: true
+    });
+  },
+
+  clearAlert () {
+    this.refs.container.clear();
+  },
+
+  render: function() {
+    return (
+      <div id="react-root">
+        <ToastContainer toastMessageFactory={ToastMessageFactory} ref="container" className="toast-top-right" />
+
+        <h1>
+          React-Toastr
+          <small>React.js toastr component</small>
+        </h1>
+
+
+
+        <div className="btn-container">
+          <button className="primary" onClick={this.addAlert}>Hello {this.props.name}</button>
+          <button className="primary" onClick={this.clearAlert}>CLEAR</button>
+        </div>
+
+        <div className="github-button-container">
+          <iframe src="http://ghbtns.com/github-btn.html?user=tomchentw&amp;repo=react-toastr&amp;type=watch&amp;count=true" allowTransparency="true" frameBorder="0" scrolling="0" width="90" height="20"></iframe>
+          <iframe src="http://ghbtns.com/github-btn.html?user=tomchentw&amp;repo=react-toastr&amp;type=fork&amp;count=true" allowTransparency="true" frameBorder="0" scrolling="0" width="90" height="20"></iframe>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = ReactRoot;
diff --git a/examples/gh-pages/scripts/client.js b/examples/gh-pages/scripts/client.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+import ReactRoot from "./ReactRoot";
+
+require("../styles/index.scss");
+
+React.render(<ReactRoot />, document.getElementById("react-container"));
diff --git a/examples/gh-pages/scripts/html.js b/examples/gh-pages/scripts/html.js
@@ -0,0 +1,40 @@
+import React from "react";
+
+const {PropTypes} = React;
+
+class ReactHtml extends React.Component {
+
+  _render_link_to_stylesheet_ (clientAssets) {
+    if (clientAssets["client"]) {
+      return (
+        <link rel="stylesheet" href={clientAssets["client"].replace(/js$/, "css")} />
+      );
+    }
+  }
+
+  render () {
+    const {props, state} = this,
+          {clientAssets} = props,
+          innerHtml = {__html: props.componentString};
+
+    return (
+      <html>
+        <head>
+          <title>React Google Maps | tomchentw</title>
+          {this._render_link_to_stylesheet_(clientAssets)}
+        </head>
+        <body>
+          <div id="react-container" dangerouslySetInnerHTML={innerHtml} />
+          <script type="text/javascript" src={clientAssets["assets/client"] || clientAssets["client"]} />
+        </body>
+      </html>
+    );
+  }
+}
+
+ReactHtml.propTypes = {
+  componentString: PropTypes.string.isRequired,
+  clientAssets: PropTypes.object.isRequired,
+};
+
+export default ReactHtml;
diff --git a/examples/gh-pages/scripts/index.js b/examples/gh-pages/scripts/index.js
diff --git a/examples/gh-pages/scripts/server.js b/examples/gh-pages/scripts/server.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+import ReactRoot from "./ReactRoot";
+
+export default ReactRoot;
diff --git a/examples/gh-pages/styles/_bootstrap_override.scss b/examples/gh-pages/styles/_bootstrap_override.scss
@@ -1,50 +1,50 @@
 // Core variables and mixins
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
 
 // Reset and dependencies
-@import "bootstrap/normalize";
-@import "bootstrap/print";
-@import "bootstrap/glyphicons";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/print";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
 
 // Core CSS
-@import "bootstrap/scaffolding";
-@import "bootstrap/type";
-@import "bootstrap/code";
-@import "bootstrap/grid";
-@import "bootstrap/tables";
-@import "bootstrap/forms";
-@import "bootstrap/buttons";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";
 
 // Components
-@import "bootstrap/component-animations";
-@import "bootstrap/dropdowns";
-@import "bootstrap/button-groups";
-@import "bootstrap/input-groups";
-@import "bootstrap/navs";
-@import "bootstrap/navbar";
-@import "bootstrap/breadcrumbs";
-@import "bootstrap/pagination";
-@import "bootstrap/pager";
-@import "bootstrap/labels";
-@import "bootstrap/badges";
-@import "bootstrap/jumbotron";
-@import "bootstrap/thumbnails";
-@import "bootstrap/alerts";
-@import "bootstrap/progress-bars";
-@import "bootstrap/media";
-@import "bootstrap/list-group";
-@import "bootstrap/panels";
-@import "bootstrap/responsive-embed";
-@import "bootstrap/wells";
-@import "bootstrap/close";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/navs";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/pager";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/labels";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/badges";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/media";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/list-group";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/close";
 
 // Components w/ JavaScript
-@import "bootstrap/modals";
-@import "bootstrap/tooltip";
-@import "bootstrap/popovers";
-@import "bootstrap/carousel";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel";
 
 // Utility classes
-@import "bootstrap/utilities";
-@import "bootstrap/responsive-utilities";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
diff --git a/examples/gh-pages/styles/_bootstrap_variables.scss b/examples/gh-pages/styles/_bootstrap_variables.scss
@@ -1 +1,4 @@
-$icon-font-path: "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0";
+$icon-font-path: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4";
+
+// Adjust this to enjoy Hot Module Replacement :)
+// $font-size-base: 20px;
diff --git a/examples/gh-pages/styles/index.scss b/examples/gh-pages/styles/index.scss
@@ -1,6 +1,8 @@
-@import url(//fonts.googleapis.com/css?family=Lato:400,900);
-@import url(//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css);
-@import url(~animate.css/animate.css);
+@import url("//fonts.googleapis.com/css?family=Lato:400,900");
+
+@import url("~toastr/toastr.css");
+@import url("~animate.css/animate.css");
+
 @import "./bootstrap_variables";
 @import "./bootstrap_override";
 
@@ -37,7 +39,7 @@ body {
     -ms-filter: blur(10px);
     -o-filter: blur(10px);
     filter: blur(10px);
-    background-image: url(/images/background.jpg);
+    background-image: url("../images/background.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     display: block;