Hyperfox Live using React and Electron

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = false
+indent_style = space
+indent_size = 2

.gitattributes

@@ -0,0 +1,106 @@
+# From https://github.com/Danimoth/gitattributes/blob/master/Web.gitattributes
+
+# Handle line endings automatically for files detected as text
+# and leave all files detected as binary untouched.
+* text=auto
+
+#
+# The above will handle all files NOT found below
+#
+
+#
+## These files are text and should be normalized (Convert crlf => lf)
+#
+
+# source code
+*.php text
+*.css text
+*.sass text
+*.scss text
+*.less text
+*.styl text
+*.js text eol=lf
+*.coffee text
+*.json text
+*.htm text
+*.html text
+*.xml text
+*.svg text
+*.txt text
+*.ini text
+*.inc text
+*.pl text
+*.rb text
+*.py text
+*.scm text
+*.sql text
+*.sh text
+*.bat text
+
+# templates
+*.ejs text
+*.hbt text
+*.jade text
+*.haml text
+*.hbs text
+*.dot text
+*.tmpl text
+*.phtml text
+
+# server config
+.htaccess text
+
+# git config
+.gitattributes text
+.gitignore text
+.gitconfig text
+
+# code analysis config
+.jshintrc text
+.jscsrc text
+.jshintignore text
+.csslintrc text
+
+# misc config
+*.yaml text
+*.yml text
+.editorconfig text
+
+# build config
+*.npmignore text
+*.bowerrc text
+
+# Heroku
+Procfile text
+.slugignore text
+
+# Documentation
+*.md text
+LICENSE text
+AUTHORS text
+
+
+#
+## These files are binary and should be left untouched
+#
+
+# (binary is a macro for -text -diff)
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.ico binary
+*.mov binary
+*.mp4 binary
+*.mp3 binary
+*.flv binary
+*.fla binary
+*.swf binary
+*.gz binary
+*.zip binary
+*.7z binary
+*.ttf binary
+*.eot binary
+*.woff binary
+*.pyc binary
+*.pdf binary

.gitignore

@@ -0,0 +1,11 @@
+# Don't check auto-generated stuff into git
+coverage
+build
+node_modules
+stats.json
+releases
+
+# Cruft
+.DS_Store
+npm-debug.log
+.idea

README.md

@@ -1,37 +1,43 @@
-# live.hyperfox.org
+# [live.hyperfox.org](https://github.com/xiam/hyperfox-live)
+> This is the source code of the [Hyperfox][1]'s [live visualization tool][2].
 
-This is the source code of the [Hyperfox][1]'s [live visualization tool][2].
 
 ## Requisites
 
-* ruby
-* rubygems
-* nodejs (I know, I know...)
-* npm
+* Node.js (>=6)
+* npm (>=3)
 
 ## Initial setup
 
 ```
-gem install compass
-
-cd html
 npm install
-
-sudo npm install -g bower
-sudo npm install -g grunt-cli
-
-bower update
-npm install grunt-contrib-compass --save-dev
-
 ```
 
 ## Development
 
+```bash
+# start a webpack server for development
+# at http://localhost:3000
+npm run start:development
 ```
-cd html
-grunt serve
+
+## Build
+See [electron-packager](https://github.com/electron-userland/electron-packager) for electron package requirements.
+
+```bash
+# create the webpack build in the `build` folder
+npm run build
+# create an electron package for all the platforms
+npm run package
+# create an electron package for osx
+npm run package:osx
+# create an electron package for windows
+npm run package:win
+# create an electron package for linux
+npm run package:linux
 ```
 
+
 # License (MIT)
 
 > Copyright (c) 2014-2015 José Carlos Nieto, https://menteslibres.net/xiam

app/app.js

@@ -0,0 +1,101 @@
+/**
+app.js
+This is the entry file for the application, only setup and boilerplate code.
+**/
+
+import 'babel-polyfill'
+
+// Load the manifest.json file and the .htaccess file
+import 'file?name=[name].[ext]!./manifest.json'
+
+// Import all the third party stuff
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Provider } from 'react-redux'
+import { applyRouterMiddleware, Router, browserHistory, hashHistory } from 'react-router'
+import { syncHistoryWithStore } from 'react-router-redux'
+import FontFaceObserver from 'fontfaceobserver';
+import { useScroll } from 'react-router-scroll';
+import configureStore from './store'
+
+// Import Language Provider
+import LanguageProvider from 'containers/LanguageProvider'
+// Import i18n messages
+import { translationMessages } from './i18n'
+
+// Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
+// import 'sanitize.css/lib/sanitize.css'
+import styles from 'containers/App/styles.css';
+import 'bulma/css/bulma.css'
+
+const openSansObserver = new FontFaceObserver('Open Sans', {});
+
+// When Open Sans is loaded, add a font-family using Open Sans to the body
+openSansObserver.load().then(() => {
+  document.body.classList.add(styles.fontLoaded);
+}, () => {
+  document.body.classList.remove(styles.fontLoaded);
+})
+
+// Create redux store with history
+// this uses the singleton browserHistory provided by react-router
+// Optionally, this could be changed to leverage a created history
+// e.g. `const browserHistory = useRouterHistory(createBrowserHistory)();`
+const initialState = {}
+const store = configureStore(initialState, browserHistory)
+
+// Sync history and store, as the react-router-redux reducer
+// is under the non-default key ("routing"), selectLocationState
+// must be provided for resolving how to retrieve the "route" in the state
+import { selectLocationState } from 'containers/App/selectors'
+const history = syncHistoryWithStore(hashHistory, store, {
+  selectLocationState: selectLocationState()
+})
+
+// Set up the router, wrapping all Routes in the App component
+import App from 'containers/App'
+import createRoutes from './routes'
+const rootRoute = {
+  component: App,
+  childRoutes: createRoutes(store)
+}
+const render = () => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <LanguageProvider messages={translationMessages}>
+        <Router history={history} routes={rootRoute} render={
+          // Scroll to top when going to a new page, imitating default browser behaviour
+          applyRouterMiddleware(useScroll())} />
+      </LanguageProvider>
+    </Provider>,
+    document.getElementById('app')
+  )
+}
+// Hot reloadable translation json files
+if (module.hot) {
+  module.hot.accept('./i18n', () => {
+    render(translationMessages)
+  })
+}
+
+// Chunked polyfill for browsers without Intl support
+if (!window.Intl) {
+  (new Promise((resolve) => {
+    resolve(System.import('intl'));
+  }))
+    .then(() => Promise.all([
+      System.import('intl/locale-data/jsonp/en.js'),
+      System.import('intl/locale-data/jsonp/de.js'),
+    ]))
+    .then(() => render(translationMessages))
+    .catch((err) => {
+      throw err;
+    });
+} else {
+  render(translationMessages);
+}
+// Install ServiceWorker and AppCache in the end since
+// it's not most important operation and if main code fails,
+// we do not want it installed
+// import { install } from 'offline-plugin/runtime'
+// install()

app/components/Icons/Logo.js

@@ -0,0 +1,22 @@
+import React, {PropTypes} from 'react'
+
+export default function Logo (props) {
+  return (
+    <div>
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        viewBox='0 0 512 432.31'
+        width={props.width}
+        height={props.height}
+        className={props.className}>
+        <path d='M462.14 129.88c5.89-1.2 21.83 7.2 36.66-.47 23.16-12 10.69-17.1 1.43-21.23s-33.51-12.4-35.65-34.36-20.39-28.09-20.39-28.09 8.46-43.13.41-45.58S408.16 27 400.48 33.7c-26 0-53.62 34.19-54.28 74-.67 40.2-21.52 69.64-42.68 78.45-121.64 39.72-129 113-128.69 167.86a164.7 164.7 0 0 0 4.05 37.15c-13.1-12.51-31.83-49.25-19.34-116.48 15.7-84.35-30.07-168-159.54-145.82 47.72 22.9 62.14 84.22 53 119C33.28 322.64 27.5 432.3 171.35 432.3h143.3c11.24 0 26.11 0 26.11-10.54 0-11.9-41.65-15.21-45-18.18 0 0 69.48-5.27 74.7-72.72 0 0 57.68 100.89 76 101.15s31 0 42.64 0c10.06 0 13.86-5.61 13.86-13.54s-11.65-11.58-18.15-11.58c-6 0-19.5 1.65-27.43-9.26-39.67-50.9-38-89.79-38-110.07 0-9.79 3-16.86 7.29-24.13 28.79-51.27 32.63-59.27 32.77-78.38s-14.12-37.82-16.68-41.81 6.44-10.71 19.38-13.36z' />
+      </svg>
+    </div>
+  )
+}
+
+Logo.propTypes = {
+  className: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string
+}

app/components/NavigationBar/index.js

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import classNames from 'classnames'
+import styles from './styles.css'
+
+import {FormattedMessage} from 'react-intl'
+import messages from './messages'
+
+import Logo from 'components/Icons/Logo'
+
+export default function NavigationBar () {
+  return (
+    <section className=''>
+      <nav className={classNames('nav', 'is-marginless', styles.NavigationBar)}>
+        <div className={classNames('nav-left', styles.NavigationBar__Logo)}>
+          <span className='nav-item'>
+            <Logo className={styles.Logo} width={"38px"} height={"38px"} />
+          </span>
+          <span className={classNames('nav-item', styles.NavigationBar__Logo__Live)}>/ Live</span>
+        </div>
+        <div className={classNames('nav-right', styles.NavigationBar__Search)}>
+          <div className='nav-item'>
+            <p className={classNames('control', 'has-addons', styles.NavigationBar__Search__Input)}>
+              <input className='input is-primary' type='text' placeholder='Keywords' />
+              <a className='button is-primary'>
+                <span><FormattedMessage {...messages.searchMessage} /></span>
+                <span className='icon'><i className='fa fa-search'></i></span>
+              </a>
+            </p>
+          </div>
+        </div>
+      </nav>
+    </section>
+  )
+}

app/components/NavigationBar/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl'
+
+export default defineMessages({
+  searchMessage: {
+    id: 'hyperfox.components.NavigationBar.search.message',
+    defaultMessage: 'Search.'
+  }
+})

app/components/NavigationBar/styles.css

@@ -0,0 +1,30 @@
+.NavigationBar{
+  background: #455a64 !important;
+  padding: 0 10px;
+  &__Logo{
+    &__Live{
+      font-size: 20px;
+      color: #fff;
+      padding: 0;
+    }
+  }
+  &__Search{
+    &__Input{
+      .fa{
+        font-size: 15px !important;
+      }
+    }
+  }
+}
+
+.Logo{
+  path{
+    fill: #ed6c63;
+    transition: fill .4s linear;
+  }
+  &:hover{
+    path{
+      fill: #DB0F2E;
+    }
+  }
+}