chore: add another react pages examples

docs/hello.md

@@ -3,17 +3,6 @@ id: hello
 title: Hello, World !
 ---
 
-Hi, Endilie here :)
-
-```py
-import hello
-def hi(name):
-    hello(name)
-    
-print('Welcome to my repos!')
-```
-
-
 ## Blockquotes
 
 > Blockquotes can also be nested...

lib/commands/start.js

@@ -50,7 +50,7 @@ module.exports = async function start(siteDir, cliOptions = {}) {
   }
 
   const port = await getPort(cliOptions.port);
-  const hotPort = await getPort(5555);
+  const hotPort = await getPort(port + 1);
   const {baseUrl} = props;
 
   // create compiler from generated webpack config

lib/theme/Layout/styles.css

@@ -1,5 +1,6 @@
 .footer {
 	color: #777;
+	margin-top: 30px;
 	padding: 10px 15px;
 	height: 20px;
 	text-align: center;

lib/theme/Loading.js

@@ -11,5 +11,5 @@ export default props => {
       </div>
     );
   }
-  return <div>Loading...</div>;
+  return <div align="center">Loading...</div>;
 };

package.json

@@ -73,6 +73,7 @@
     "react-loadable": "^5.5.0",
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.3.1",
+    "react-youtube": "^7.6.0",
     "remarkable": "^1.7.1",
     "semver": "^5.5.0",
     "static-site-generator-webpack-plugin": "endiliey/static-site-generator-webpack-plugin#master",

website/components/Todo/index.js

@@ -181,10 +181,6 @@ class TodoApp extends React.Component {
 
     return (
       <div className="todoapp">
-        <Helmet>
-          <title>Todo App</title>
-          <link rel="stylesheet" type="text/css" href="/css/todo.css" />
-        </Helmet>
         <header className="header">
           <h1>todos</h1>
           <input

website/pages/index.js

@@ -8,7 +8,8 @@ export default class Home extends React.Component {
     return (
       <Layout {...this.props}>
         <Helmet>
-          <title>Homepage</title>
+          <title>Todo App</title>
+          <link rel="stylesheet" type="text/css" href="/css/basic.css" />
         </Helmet>
         <Todo />
       </Layout>

website/pages/youtube.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import YouTube from 'react-youtube';
+import Layout from '@theme/Layout';
+
+export default class Player extends React.Component {
+  render() {
+    const opts = {
+      height: '390',
+      width: '640',
+      playerVars: {
+        autoplay: 1
+      }
+    };
+
+    return (
+      <Layout {...this.props}>
+        <Helmet>
+          <title>My Youtube</title>
+        </Helmet>
+        <p align="center">
+          <YouTube videoId="d9IxdwEFk1c" opts={opts} onReady={this._onReady} />
+        </p>
+      </Layout>
+    );
+  }
+
+  _onReady(event) {
+    // access to player in all event handlers via event.target
+    event.target.playVideo();
+  }
+}

yarn.lock

@@ -4284,6 +4284,10 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+
 loader-runner@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
@@ -5422,7 +5426,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.0, prop-types@^15.5.3, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -5617,6 +5621,14 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-youtube@^7.6.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-7.6.0.tgz#ea4b7a9396f635b9f2a9f03bfe2a39b93cbdd59d"
+  dependencies:
+    lodash "^4.17.4"
+    prop-types "^15.5.3"
+    youtube-player "^5.4.0"
+
 react@^16.4.1:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
@@ -6129,6 +6141,10 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
+sister@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.1.tgz#a36ba6a1d1e46415ba16cb4ecefe14cbd8d82d1f"
+
 sisteransi@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-0.1.1.tgz#5431447d5f7d1675aac667ccd0b865a4994cb3ce"
@@ -7261,3 +7277,11 @@ yargs@~3.10.0:
 ylru@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.2.1.tgz#f576b63341547989c1de7ba288760923b27fe84f"
+
+youtube-player@^5.4.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.0.tgz#95f058534f9544586185551d0d2d33f381f6587a"
+  dependencies:
+    debug "^2.6.6"
+    load-script "^1.0.0"
+    sister "^3.0.0"