star-background

configs/dev/config.js

@@ -0,0 +1,79 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+/* eslint-disable max-len */
+const defaultPort = 3000 //8080;
+
+if (process.env.BROWSER) {
+  throw new Error(
+    'Do not import `config.js` from inside the client-side code.',
+  );
+}
+
+module.exports = {
+  // Node.js app
+  port: process.env.OPENSHIFT_NODEJS_PORT ||
+    process.env.VCAP_APP_PORT ||
+    process.env.PORT ||
+    process.env.DEV_SERVICE_PORT ||
+    defaultPort,
+
+  // API Gateway
+  api: {
+    // API URL to be used in the client-side code
+    clientUrl: process.env.API_CLIENT_URL || '',
+    // API URL to be used in the server-side code
+    serverUrl:
+      process.env.API_SERVER_URL || process.env.GRAPHQL_URL ||
+      `http://${process.env.GRAPHQL_HOST ||
+        'localhost'}:${process.env.OPENSHIFT_NODEJS_PORT ||
+        process.env.VCAP_APP_PORT ||
+        process.env.PORT ||
+        process.env.DEV_SERVICE_PORT ||
+        process.env.GRAPHQL_PORT ||
+        defaultPort}`,
+  },
+
+  // Database
+  databaseUrl: process.env.DATABASE_URL || 'sqlite:data/database.sqlite',
+
+  // Web analytics
+  analytics: {
+    // https://analytics.google.com/
+    googleTrackingId: process.env.GOOGLE_TRACKING_ID, // UA-XXXXX-X
+  },
+
+  // Authentication
+  auth: {
+    jwt: { secret: process.env.JWT_SECRET || 'XXXX-REPLACEME-XXXX' },
+
+    // https://developers.facebook.com/
+    facebook: {
+      id: process.env.FACEBOOK_APP_ID || '186244551745631',
+      secret:
+        process.env.FACEBOOK_APP_SECRET || 'a970ae3240ab4b9b8aae0f9f0661c6fc',
+    },
+
+    // https://cloud.google.com/console/project
+    google: {
+      id:
+        process.env.GOOGLE_CLIENT_ID ||
+        '251410730550-ahcg0ou5mgfhl8hlui1urru7jn5s12km.apps.googleusercontent.com',
+      secret: process.env.GOOGLE_CLIENT_SECRET || 'Y8yR9yZAhm9jQ8FKAL8QIEcd',
+    },
+
+    // https://apps.twitter.com/
+    twitter: {
+      key: process.env.TWITTER_CONSUMER_KEY || 'Ie20AZvLJI2lQD5Dsgxgjauns',
+      secret:
+        process.env.TWITTER_CONSUMER_SECRET ||
+        'KTZ6cxoKnEakQCeSpZlaUCJWGAlTEBJj0y2EMkUBujA7zWSvaQ',
+    },
+  },
+};

configs/prod/config.js

@@ -0,0 +1,79 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+/* eslint-disable max-len */
+const defaultPort = 8080;
+
+if (process.env.BROWSER) {
+  throw new Error(
+    'Do not import `config.js` from inside the client-side code.',
+  );
+}
+
+module.exports = {
+  // Node.js app
+  port: process.env.OPENSHIFT_NODEJS_PORT ||
+    process.env.VCAP_APP_PORT ||
+    process.env.PORT ||
+    process.env.DEV_SERVICE_PORT ||
+    defaultPort,
+
+  // API Gateway
+  api: {
+    // API URL to be used in the client-side code
+    clientUrl: process.env.API_CLIENT_URL || '',
+    // API URL to be used in the server-side code
+    serverUrl:
+      process.env.API_SERVER_URL || process.env.GRAPHQL_URL ||
+      `http://${process.env.GRAPHQL_HOST ||
+        'localhost'}:${process.env.OPENSHIFT_NODEJS_PORT ||
+        process.env.VCAP_APP_PORT ||
+        process.env.PORT ||
+        process.env.DEV_SERVICE_PORT ||
+        process.env.GRAPHQL_PORT ||
+        defaultPort}`,
+  },
+
+  // Database
+  databaseUrl: process.env.DATABASE_URL || 'sqlite:data/database.sqlite',
+
+  // Web analytics
+  analytics: {
+    // https://analytics.google.com/
+    googleTrackingId: process.env.GOOGLE_TRACKING_ID, // UA-XXXXX-X
+  },
+
+  // Authentication
+  auth: {
+    jwt: { secret: process.env.JWT_SECRET || 'XXXX-REPLACEME-XXXX' },
+
+    // https://developers.facebook.com/
+    facebook: {
+      id: process.env.FACEBOOK_APP_ID || '186244551745631',
+      secret:
+        process.env.FACEBOOK_APP_SECRET || 'a970ae3240ab4b9b8aae0f9f0661c6fc',
+    },
+
+    // https://cloud.google.com/console/project
+    google: {
+      id:
+        process.env.GOOGLE_CLIENT_ID ||
+        '251410730550-ahcg0ou5mgfhl8hlui1urru7jn5s12km.apps.googleusercontent.com',
+      secret: process.env.GOOGLE_CLIENT_SECRET || 'Y8yR9yZAhm9jQ8FKAL8QIEcd',
+    },
+
+    // https://apps.twitter.com/
+    twitter: {
+      key: process.env.TWITTER_CONSUMER_KEY || 'Ie20AZvLJI2lQD5Dsgxgjauns',
+      secret:
+        process.env.TWITTER_CONSUMER_SECRET ||
+        'KTZ6cxoKnEakQCeSpZlaUCJWGAlTEBJj0y2EMkUBujA7zWSvaQ',
+    },
+  },
+};

package.json

@@ -21,6 +21,7 @@
     "history": "4.7.2",
     "isomorphic-style-loader": "4.0.0",
     "jsonwebtoken": "8.1.0",
+    "material-ui": "0.20.0",
     "node-fetch": "1.7.3",
     "normalize.css": "7.0.0",
     "passport": "0.4.0",
@@ -136,11 +137,16 @@
     "clean": "babel-node tools/run clean",
     "copy": "babel-node tools/run copy",
     "bundle": "babel-node tools/run bundle",
-    "build": "babel-node tools/run build --release",
+    "build": "npm run build:prod",
+    "build:dev":
+      "cp configs/dev/config.js src/;babel-node tools/run build --release",
+    "build:prod":
+      "cp configs/prod/config.js src/;babel-node tools/run build --release",
     "build-stats": "yarn run build --release --analyse",
     "deploy": "babel-node tools/run deploy",
     "render": "babel-node tools/run render",
     "serve": "babel-node tools/run runServer",
+    "prestart": "mkdir -p data",
     "start": "babel-node tools/run start"
   }
 }

src/components/Layout/Layout.js

@@ -23,7 +23,7 @@ class Layout extends React.Component {
     children: PropTypes.node.isRequired,
   };
 
-  render() {
+  renderLoggedIn() {
     return (
       <div>
         <Header />
@@ -33,6 +33,9 @@ class Layout extends React.Component {
       </div>
     );
   }
+  render() {
+    return <div>{this.props.children}</div>;
+  }
 }
 
 export default withStyles(normalizeCss, s)(Layout);

src/config.js

@@ -8,6 +8,7 @@
  */
 
 /* eslint-disable max-len */
+const defaultPort = 8080;
 
 if (process.env.BROWSER) {
   throw new Error(
@@ -21,7 +22,7 @@ module.exports = {
     process.env.VCAP_APP_PORT ||
     process.env.PORT ||
     process.env.DEV_SERVICE_PORT ||
-    8080,
+    defaultPort,
 
   // API Gateway
   api: {
@@ -36,7 +37,7 @@ module.exports = {
         process.env.PORT ||
         process.env.DEV_SERVICE_PORT ||
         process.env.GRAPHQL_PORT ||
-        8080}`,
+        defaultPort}`,
   },
 
   // Database

src/routes/home/Home.js

@@ -10,23 +10,54 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import Parallax from 'react-springy-parallax';
 import s from './Home.css';
+import { RaisedButton } from 'material-ui';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import FontIcon from 'material-ui/FontIcon';
 
 class Home extends React.Component {
   static propTypes = {
-    news: PropTypes.string.isRequired,
+    version: PropTypes.string.isRequired,
+    backgroundImg1: PropTypes.string.isRequired,
+    backgroundImg2: PropTypes.string.isRequired,
+    backgroundImg3: PropTypes.string.isRequired,
+  };
+  clickStar = () => {
+    console.log('1.Home clickStar!');
   };
-
   render() {
+    const styles = {
+      backgroundColor: '#87BCDE',
+      backgroundImage: 'url(' + this.props.backgroundImg3 + ')',
+      fontFamily: 'Menlo-Regular, Menlo, monospace',
+      fontSize: 14,
+      lineHeight: '10px',
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    };
+    const buttonStyle = {
+      width: '15',
+      height: '15',
+    };
     return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <h1>cryptoStar Alive</h1>
-          release : {this.props.news}
-        </div>
-      </div>
+      <MuiThemeProvider>
+        <Parallax ref="parallax" pages={1}>
+          <Parallax.Layer offset={0} speed={1} style={styles}>
+            <input
+              type="image"
+              alt="starbase 1"
+              style={this.buttonStyle}
+              src="/images/star-1.jpg"
+              onClick={this.clickStar}
+            />
+          </Parallax.Layer>
+        </Parallax>
+      </MuiThemeProvider>
     );
   }
 }
-
+////////
 export default withStyles(s)(Home);

src/routes/home/Home.js-orig

@@ -0,0 +1,32 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Home.css';
+
+class Home extends React.Component {
+  static propTypes = {
+    news: PropTypes.string.isRequired,
+  };
+
+  render() {
+    return (
+      <div className={s.root}>
+        <div className={s.container}>
+          <h1>cryptoStar Alive</h1>
+          release : {this.props.news}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Home);

src/routes/home/index.js

@@ -20,12 +20,20 @@ async function action({ fetch }) {
   const { data } = await resp.json();
   if (!data || !data.news) throw new Error('Failed to load the news feed.');
   const version = '123456789';
+  const backgroundImg1 = 'images/starfield-1.jpg';
+  const backgroundImg2 = 'images/starfield-2.jpg';
+  const backgroundImg3 = 'images/starfield-3.jpg';
   return {
     chunks: ['home'],
     title: 'cryptStar',
     component: (
       <Layout>
-        <Home news={version} />
+        <Home
+          version={version}
+          backgroundImg1={backgroundImg1}
+          backgroundImg2={backgroundImg2}
+          backgroundImg3={backgroundImg3}
+        />
       </Layout>
     ),
   };