update examples to be easier to play with

- Create index file to list all of the examples - Normailize headers of all examples to include link back to example list - Always include the global.css in all examples - Change examples to target `<div id="example"/>` instead of `document.body` - Fix the CSS of some examples not happy about sharing the page - Include a README to explain how to make the examples - Move animation example's inline css into a separate file to match other examples
heydemo · Jul 29, 2014 · 5759fb3 · 5759fb3
1 parent ee1a620
commit 5759fb3
Show file tree

Hide file tree

Showing 27 changed files with 119 additions and 52 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,9 @@
+### React Router Examples
+
+In order to try out the examples, you need to follow these steps:
+
+1. Clone this repo
+1. Run `npm -g install webpack`, if you don't have it installed already
+1. Run `npm install` from the repo's root directory
+1. Run `./script/build-examples` from the repo's root directory
+1. Point your browser to the `index.html` location in this directory
diff --git a/examples/animations/app.css b/examples/animations/app.css
@@ -0,0 +1,30 @@
+.Image {
+  position: relative;
+}
+
+.Image img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 400;
+  width: 400;
+  background: gray;
+}
+
+.example-enter {
+  opacity: 0.01;
+  transition: opacity .5s ease-in;
+}
+
+.example-enter.example-enter-active {
+  opacity: 1;
+}
+
+.example-leave {
+  opacity: 1;
+  transition: opacity .5s ease-in;
+}
+
+.example-leave.example-leave-active {
+  opacity: 0.01;
+}
diff --git a/examples/animations/app.js b/examples/animations/app.js
@@ -41,4 +41,4 @@ var routes = (
   </Routes>
 );
 
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/animations/index.html b/examples/animations/index.html
@@ -1,37 +1,8 @@
 <!doctype html public "restroom">
 <title>Animation Example</title>
-<link href="../app.css" rel="stylesheet"/>
-<style>
-.Image {
-  position: relative;
-}
-
-.Image img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 400;
-  width: 400;
-  background: gray;
-}
-
-.example-enter {
-  opacity: 0.01;
-  transition: opacity .5s ease-in;
-}
-
-.example-enter.example-enter-active {
-  opacity: 1;
-}
-
-.example-leave {
-  opacity: 1;
-  transition: opacity .5s ease-in;
-}
-
-.example-leave.example-leave-active {
-  opacity: 0.01;
-}
-</style>
+<link href="../global.css" rel="stylesheet"/>
+<link href="app.css" rel="stylesheet"/>
 <body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Animations</h1>
+<div id="example"/>
 <script src="../build/animations.js"></script>
diff --git a/examples/auth-flow/app.js b/examples/auth-flow/app.js
@@ -29,7 +29,6 @@ var App = React.createClass({
       <Link to="login">Sign in</Link>;
     return (
       <div>
-        <h1>Auth User Flow</h1>
         <ul>
           <li>{loginOrOut}</li>
           <li><Link to="about">About</Link></li>
@@ -190,4 +189,4 @@ var routes = (
   </Routes>
 );
 
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/auth-flow/index.html b/examples/auth-flow/index.html
@@ -1,6 +1,8 @@
 <!doctype html public "display of affection">
 <title>Authentication Flow Example</title>
-<link rel="stylesheet" href="../app.css"/>
+<link rel="stylesheet" href="../global.css"/>
 <body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Auth Flow</h1>
+<div id="example"/>
 <script src="../build/auth-flow.js"></script>
 
diff --git a/examples/data-flow/app.css b/examples/data-flow/app.css
@@ -11,12 +11,18 @@ a.active {
   color: hsl(20, 50%, 50%);
 }
 
+#example {
+  position: absolute;
+}
+
 .App {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  width: 500px;
+  height: 500px;
 }
 
 .Master {

diff --git a/examples/data-flow/app.js b/examples/data-flow/app.js
@@ -72,4 +72,4 @@ var routes = (
   </Routes>
 );
 
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/data-flow/index.html b/examples/data-flow/index.html
@@ -1,6 +1,8 @@
 <!doctype html public "embarassment">
 <title>Data Flow Example</title>
+<link href="../global.css" rel="stylesheet"/>
 <link href="app.css" rel="stylesheet"/>
 <body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Data Flow</h1>
+<div id="example"/>
 <script src="../build/data-flow.js"></script>
-
diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js
@@ -55,4 +55,4 @@ var routes = (
   </Routes>
 );
 
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/dynamic-segments/index.html b/examples/dynamic-segments/index.html
@@ -1,5 +1,7 @@
 <!doctype html public "restroom">
 <title>Dynamic Segments Example</title>
-<link href="../app.css" rel="stylesheet"/>
+<link href="../global.css" rel="stylesheet"/>
 <body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Dynamic Segments</h1>
+<div id="example"/>
 <script src="../build/dynamic-segments.js"></script>
diff --git a/examples/app.css → examples/global.css b/examples/app.css → examples/global.css
@@ -15,3 +15,6 @@ a.active {
   color: hsl(20, 50%, 50%);
 }
 
+.breadcrumbs a {
+  text-decoration: none;
+}
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<title>React Router Examples</title>
+<link href="global.css" rel="stylesheet"/>
+<body>
+<h1>React Router Examples</h1>
+<ul>
+<li><a href="animations/index.html">Animations</a></li>
+<li><a href="auth-flow/index.html">Auth Flow</a></li>
+<li><a href="data-flow/index.html">Data Flow</a></li>
+<li><a href="dynamic-segments/index.html">Dynamic Segments</a></li>
+<li><a href="master-detail/index.html">Master Detail</a></li>
+<li><a href="partial-app-loading/index.html">Partial App Loading</a></li>
+<li><a href="query-params/index.html">Query Params</a></li>
+<li><a href="shared-root/index.html">Shared Root</a></li>
+<li><a href="simple-master-detail/index.html">Simple Master Detail</a></li>
+<li><a href="transitions/index.html">Transitions</a></li>
+</ul>
diff --git a/examples/master-detail/app.css b/examples/master-detail/app.css
@@ -11,12 +11,18 @@ a.active {
   color: hsl(20, 50%, 50%);
 }
 
+#example {
+  position: absolute;
+}
+
 .App {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  width: 500px;
+  height: 500px;
 }
 
 .ContactList {

diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js
@@ -213,7 +213,7 @@ var routes = (
   </Routes>
 );
 
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
 
 // Request utils.
 

diff --git a/examples/master-detail/index.html b/examples/master-detail/index.html
@@ -1,5 +1,8 @@
 <!doctype html public "embarassment">
 <title>Master Detail Example</title>
+<link href="../global.css" rel="stylesheet"/>
 <link href="app.css" rel="stylesheet"/>
 <body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Master Detail</h1>
+<div id="example"/>
 <script src="../build/master-detail.js"></script>
diff --git a/examples/partial-app-loading/app.js b/examples/partial-app-loading/app.js
@@ -69,4 +69,4 @@ var routes = (
   </Routes>
 );
 
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/partial-app-loading/index.html b/examples/partial-app-loading/index.html
@@ -1,5 +1,7 @@
 <!doctype html public "intoxication">
 <title>Partial App Loading Example</title>
-<link rel="stylesheet" href="../app.css"/>
+<link rel="stylesheet" href="../global.css"/>
 <body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Partial App Loading</h1>
+<div id="example"/>
 <script src="../build/partial-app-loading.js"></script>
diff --git a/examples/query-params/app.js b/examples/query-params/app.js
@@ -40,4 +40,4 @@ var routes = (
   </Routes>
 );
 
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/query-params/index.html b/examples/query-params/index.html
@@ -1,5 +1,7 @@
 <!doctype html public "restroom">
 <title>Query Params Example</title>
-<link href="../app.css" rel="stylesheet"/>
+<link href="../global.css" rel="stylesheet"/>
 <body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Query Params</h1>
+<div id="example"/>
 <script src="../build/query-params.js"></script>
diff --git a/examples/shared-root/app.js b/examples/shared-root/app.js
@@ -80,4 +80,4 @@ var routes = (
   </Routes>
 );
 
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/shared-root/index.html b/examples/shared-root/index.html
@@ -1,5 +1,7 @@
 <!doctype html public "superawesome">
 <title>Shared Root Example</title>
-<link rel="stylesheet" href="../app.css"/>
+<link rel="stylesheet" href="../global.css"/>
 <body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Shared Root</h1>
+<div id="example"/>
 <script src="../build/shared-root.js"></script>
diff --git a/examples/simple-master-detail/app.css b/examples/simple-master-detail/app.css
@@ -11,20 +11,26 @@ a.active {
   color: hsl(20, 50%, 50%);
 }
 
+#example {
+  position: absolute;
+}
+
 .App {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  width: 1000px;
+  height: 800px;
 }
 
 .Master {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
-  width: 300px;
+  width: 200px;
   overflow: auto;
   padding: 10px 40px;
 }

diff --git a/examples/simple-master-detail/app.js b/examples/simple-master-detail/app.js
@@ -58,7 +58,7 @@ var routes = (
   </Routes>
 );
 
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
 
 /*****************************************************************************/
 // data stuff

diff --git a/examples/simple-master-detail/index.html b/examples/simple-master-detail/index.html
@@ -1,5 +1,8 @@
 <!doctype html public "embarassment">
 <title>Simple Master Detail Example</title>
+<link href="../global.css" rel="stylesheet"/>
 <link href="app.css" rel="stylesheet"/>
 <body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Simple Master Detail</h1>
+<div id="example"/>
 <script src="../build/simple-master-detail.js"></script>
diff --git a/examples/transitions/app.js b/examples/transitions/app.js
@@ -64,4 +64,4 @@ var routes = (
   </Routes>
 );
 
-React.renderComponent(routes, document.body);
+React.renderComponent(routes, document.getElementById('example'));
diff --git a/examples/transitions/index.html b/examples/transitions/index.html
@@ -1,5 +1,7 @@
 <!doctype html public "restroom">
 <title>Transitions Example</title>
-<link href="../app.css" rel="stylesheet"/>
+<link href="../global.css" rel="stylesheet"/>
 <body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Transitions</h1>
+<div id="example"/>
 <script src="../build/transitions.js"></script>