Update to create-react-app (#73)

.gitignore

@@ -1,4 +1,21 @@
-*.DS_Store
-.DS_Store?
-.sass-cache
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -6,61 +6,36 @@
 
 ## How-To
 
-Install project dependencies via npm:
+Install: `yarn install`
+Development: `yarn start`
+Build: `yarn build`
 
-```
-npm install
-```
-
-### Development
-
-To actively develop, run:
-
-```
-npm run dev
-```
-
-This will setup Webpack and Sass to compile javascript and CSS into the `build` folder. Hitting the root of this folder from your localhost will serve your files.
-
-### Deployment
-
-The production site at [jim-nielsen.com/teamcolors](http://jim-nielsen.com/teamcolors) runs on github pages so all static assets must be generated and pushed with the repo. To deploy, run:
-
-```
-npm run prod
-```
-**Note:**
-
-- Everything in `/static` are static files that are referenced directly via the HTML file. So if you make a commit that changes these, they’ll be pulled in automatically without having to do a “build” of the site and committing that as well. For example, if somebody makes a PR that changes a color value in the team colors .json file, you can merge the PR from github and changes should be live to the site without having to actually run a build.
-- Everything in `/build` has to be built when you make an interactive/stylistic change in javascript or CSS. Change some css? Compile it to `/build/styles` and commit. Change some javascript, i.e. the way the app works? Compile it to `/build/scripts`. Raw assets like images and data are pulled in from `/static`.
-
-## Technical Overview
+## How It Works
 
 Site is built on the react framework. `index.html` is the shell container for react app. If javascript is not supported, a link is shown to the raw JSON data which has all color information.
 
-Color data is housed in a single `.json` file `static/data/teams.json`. Any changes to team colors can be done there. *Note on colors*: Color definitions for each team are in arrays and grouped by color mode. Color values should match index position in the array across color modes, for example:
+Color data is housed in a single `.json` file `src/teams.json`. Any changes to team colors can be done there. _Note on colors_: Color definitions for each team are in arrays and grouped by color mode. Color values should match index position in the array across color modes, for example:
 
 ```
 colors:
   rgb: TEAMS-RGB-BLUE, TEAMS-RGB-RED
   hex: TEAMS-HEX-BLUE, TEAMS-HEX-RED
 ```
 
-Source artwork for each team is grouped by league in `static/sketch`. Production versions of these logo should be in `.svg` format in `static/img`.
+Source artwork for each team is grouped by league in `sketch`. Production versions of these logo should be in `.svg` format in `public/img`.
 
 ### Edit Team Color or Name
 
-Find teams `.json` file in `static/data/teams.json`, and edit the info you need.
+Find teams `.json` file in `src/teams.json`, and edit the info you need.
 
 ### Add a Team
 
 1. Determine the team’s league
 2. Following the established pattern, add the team’s name and colors the `.json` file
-3. Add a vector logo for the team in its corresponding `.sketch` league file in `static/sketch` with the team’s name (as referenced in its `.json` file) in lowercase with hyphens, i.e. "utah-jazz"
-4. Export the team’s `.svg` logo to `static/img/`
+3. Add a vector logo for the team in its corresponding `.sketch` league file in `sketch` with the team’s name (as referenced in its `.json` file) in lowercase with hyphens, i.e. "utah-jazz"
+4. Export the team’s `.svg` logo to `public/img/`
 5. Preferably, optimize the svg (with a tool like [SVGO](https://github.com/svg/svgo))
-6. Run `npm run prod`, commit, push
-
+6. Run `yarn build`, commit, push
 
 ## Official Color References
 
@@ -76,7 +51,8 @@ All NFL colors are official (see sources below).
 
 The NFL provides official RGB, HEX, CMYK, and Pantone colors (so none of the colors you see on Team Colors are conversions).
 
-The NFL has logo slicks which detail team color values. These are provided on a per-conference basis. *Note*: each of these source links are over 100MB in size, so they take a while to download.
+The NFL has logo slicks which detail team color values. These are provided on a per-conference basis. _Note_: each of these source links are over 100MB in size, so they take a while to download.
+
 - [AFC North](http://www.nflmedia.com/afc_north.zip)
 - [AFC South](http://www.nflmedia.com/afc_south.zip)
 - [AFC East](http://www.nflmedia.com/afc_east.zip)
@@ -88,7 +64,7 @@ The NFL has logo slicks which detail team color values. These are provided on a
 
 ### MLB
 
-MLB colors have been extracted from the official “RGB Digital Art” spot color logo slicks provided at [MLB Press Box](http://mlbpressbox.mlbstyleguide.com) (user account required). They were not explicitly stated values, but they are color values pulled from individual team logos in an *official* MLB document.
+MLB colors have been extracted from the official “RGB Digital Art” spot color logo slicks provided at [MLB Press Box](http://mlbpressbox.mlbstyleguide.com) (user account required). They were not explicitly stated values, but they are color values pulled from individual team logos in an _official_ MLB document.
 
 The extracted colors are in HEX form and their RGB counterparts are generated programmatically.
 
@@ -98,6 +74,7 @@ The extracted colors are in HEX form and their RGB counterparts are generated pr
 ### NHL
 
 NHL colors are official. As per [Michael Sharer](https://github.com/epitaphmike) of the NHL.
+
 ### MLS
 
 MLS colors are currently approximations, with the exceptions listed below. I am working on getting official colors of the remaining teams.

netlify.toml

@@ -0,0 +1,10 @@
+[build]
+  base = ""
+  publish = "build"
+  command = "yarn build"
+
+[[redirects]]
+  from = "https://teamcolors.netlify.com/*"
+  to = "https://teamcolors.jim-nielsen.com/:splat"
+  status = 301
+  force = true

package.json

@@ -1,43 +1,26 @@
 {
-  "name": "teamcolors.github.io",
-  "version": "1.0.0",
-  "description": "Team Colors is a reference of color values for major league sporting teams.",
+  "name": "teamcolors",
+  "version": "0.1.0",
   "private": true,
-  "scripts": {
-    "dev": "npm run css:build && npm run css:dev & npm run webpack:dev",
-    "prod": "npm run css:prod && npm run webpack:prod",
-    "prod:static": "node src/scripts/generateStatic.js",
-    "webpack:dev": "./node_modules/.bin/webpack --watch --d --config webpack.config.js",
-    "webpack:prod": "./node_modules/.bin/webpack -p --config webpack.config.js",
-    "css:build": "./node_modules/.bin/node-sass src/styles/index.scss build/styles/index.css",
-    "css:dev": "./node_modules/.bin/node-sass -w src/styles/index.scss build/styles/index.css",
-    "css:prod": "./node_modules/.bin/node-sass --output-style=compressed src/styles/index.scss build/styles/index.css",
-    "lint": "./node_modules/.bin/eslint src/scripts",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/teamcolors/teamcolors.github.io.git"
+  "dependencies": {
+    "fuzzy": "^0.1.3",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "react-scripts": "2.0.5"
   },
-  "author": "Jim Nielsen",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/teamcolors/teamcolors.github.io/issues"
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
   },
-  "homepage": "https://github.com/teamcolors/teamcolors.github.io",
-  "dependencies": {
-    "lodash": "^3.10.1",
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3"
+  "eslintConfig": {
+    "extends": "react-app"
   },
-  "devDependencies": {
-    "babel-core": "^6.3.17",
-    "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "fuzzy": "^0.1.1",
-    "node-sass": "^3.4.2",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0"
-  }
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

public/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>TeamColors: Find and copy color values from your favorite sports teams.</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="%PUBLIC_URL%/styles/reset.css" />
+  <link rel="stylesheet" href="%PUBLIC_URL%/styles/index.css" />
+</head>
+<body>
+  <header class="header">
+    <div class="wrapper">
+      <h1 class="header__logo">
+        <a href=".">
+          <img src="%PUBLIC_URL%/img/teamColorsLogo.svg" alt="TeamColors logo" />
+        </a>
+      </h1>
+      <p class="header__description">
+        <span>
+          A project from <a href="http://jim-nielsen.com" class="emphasize">Jim</a> <a href="https://twitter.com/jimniels" class="emphasize">Nielsen</a>. Got suggestions or corrections? <a href="https://github.com/jimniels/teamcolors">Source is on Github</a>.
+        </span>
+        <span>
+          Note: some colors are official, others are approximations. <a href="https://github.com/jimniels/teamcolors#official-color-references">Learn more</a>.
+        </span>
+      </p>
+    </div>
+  </header>
+
+  <main id="root">
+    <div class="wrapper">
+      <p class="loading">
+        <b>Loading...</b> Not loading? You’re probably on an old browser or have Javascript disabled. You can still <a href="data/teams.json">view the raw data</a>.
+      </p>
+    </div>
+  </main>
+
+  <!-- Google Analytics -->
+  <script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(["_setAccount", "UA-2118091-16"]);
+    _gaq.push(["_trackPageview"]);
+
+    (function() {
+      var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
+      ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
+      var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
+    })();
+  </script>
+</body>
+</html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}