upgraded packages

.babelrc

@@ -1,3 +1,10 @@
 {
-    "presets": ["env", "stage-0", "flow", "react"],
+    "presets": [
+		"@babel/preset-env",
+		"@babel/preset-flow",
+		"@babel/preset-react"
+	],
+	"plugins": [
+		"@babel/plugin-proposal-class-properties"
+	]
 }

package.json

@@ -10,53 +10,56 @@
   "scripts": {
     "test": "npm run flow && npm run mocha",
     "start": "webpack-dev-server --env development",
-    "build": "webpack --env production",
+    "build": "webpack --env production && flow-copy-source src build",
     "mocha": "mocha --require babel-register --timeout 100 --slow 30 --throw-deprecation --use_strict",
     "clean": "rm -rf build",
     "flow": "flow",
     "lint": "eslint src",
-    "prepublishOnly": "npm run test && npm run build"
+    "prepack": "npm run clean && npm run test && npm run build"
   },
   "author": "Arwed Mett",
   "license": "MIT",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "babel-loader": "^7.1.3",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "babel-register": "^6.26.0",
-    "eslint": "^4.18.1",
+    "@babel/cli": "^7.1.2",
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
+    "babel-eslint": "^9.0.0",
+    "babel-loader": "^8.0.4",
+    "eslint": "^5.6.0",
     "eslint-plugin-flowtype": "^2.46.1",
     "eslint-plugin-react": "^7.7.0",
-    "file-loader": "^1.1.10",
-    "flow-bin": "^0.63.1",
-    "mocha": "^4.1.0",
+    "file-loader": "^2.0.0",
+    "flow": "^0.2.3",
+    "flow-bin": "^0.69.0",
+    "flow-copy-source": "^2.0.2",
+    "flow-typed": "^2.4.0",
+    "mocha": "^5.1.0",
     "raw-loader": "^0.5.1",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.11.2",
-    "webpack-notifier": "^1.5.1"
+    "url-loader": "^1.1.2",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9",
+    "webpack-notifier": "^1.7.0"
   },
   "dependencies": {
-    "@fortawesome/fontawesome": "^1.1.4",
-    "@fortawesome/fontawesome-free-brands": "^5.0.7",
-    "@fortawesome/fontawesome-free-solid": "^5.0.7",
-    "@fortawesome/react-fontawesome": "0.0.17",
-    "ejs": "^2.5.7",
-    "express": "^4.16.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.6",
+    "@fortawesome/free-brands-svg-icons": "^5.4.1",
+    "@fortawesome/free-solid-svg-icons": "^5.4.1",
+    "@fortawesome/react-fontawesome": "^0.1.3",
+    "ejs": "^2.6.1",
+    "express": "^4.16.4",
     "intersection-observer": "^0.5.0",
-    "react": "^16.2.0",
-    "react-autosize-textarea": "^3.0.2",
-    "react-dom": "^16.2.0",
-    "react-fontawesome": "^1.6.1",
-    "react-intersection-observer": "^3.0.3",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
-    "styled-components": "^2.4.0"
+    "react": "^16.5.2",
+    "react-autosize-textarea": "^5.0.0",
+    "react-dom": "^16.5.2",
+    "react-intersection-observer": "^6.2.3",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
+    "styled-components": "^3.4.10"
   }
 }

src/components/links.js

@@ -2,25 +2,29 @@
 
 import React from "react"
 import { Container, Icon, Link } from "../elements/header/links"
-import faGithub from "@fortawesome/fontawesome-free-brands/faGithub"
-import faLinkedin from "@fortawesome/fontawesome-free-brands/faLinkedin"
-import faStackOverflow from "@fortawesome/fontawesome-free-brands/faStackOverflow"
-import faKey from "@fortawesome/fontawesome-free-solid/faKey"
+import { library } from "@fortawesome/fontawesome-svg-core"
+import { faKey } from "@fortawesome/free-solid-svg-icons"
+import { faGithub, faLinkedin, faStackOverflow } from "@fortawesome/free-brands-svg-icons"
 import pubKey from "../../resources/arwed-mett.pub.asc"
 
+library.add(faGithub)
+library.add(faLinkedin)
+library.add(faStackOverflow)
+library.add(faKey)
+
 export default () => <Container>
 	<Link
-		icon={ <Icon icon={ faGithub } /> }
+		icon={ <Icon icon={ [ "fab", "github" ] } /> }
 		label="Github"
 		href="https://github.com/Pfeifenjoy"
 	/>
 	<Link
-		icon={ <Icon icon={ faLinkedin } /> }
+		icon={ <Icon icon={ [ "fab", "linkedin" ] } /> }
 		label="Linkedin"
 		href="https://www.linkedin.com/in/arwed-mett-4b5784123/"
 	/>
 	<Link
-		icon={ <Icon icon={ faStackOverflow } /> }
+		icon={ <Icon icon={ [ "fab", "stack-overflow" ] } /> }
 		label="Stack Overflow"
 		href="https://stackoverflow.com/users/4399651/arwed-mett?tab=profile"
 	/>

src/elements/button/index.js

@@ -2,10 +2,13 @@
 
 import React, { Component, Fragment } from "react"
 import type { ElementProps, Node } from "react"
-import faCircle from "@fortawesome/fontawesome-free-solid/faCircleNotch"
-import FontAwesome from "@fortawesome/react-fontawesome"
+import { library } from "@fortawesome/fontawesome-svg-core"
+import { faCircle } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import styled, { keyframes } from "styled-components"
 
+library.add(faCircle)
+
 /************************************************************/
 /* Loader                                                   */
 /************************************************************/
@@ -19,7 +22,7 @@ const LoaderKeyframes = keyframes`
 	}
 `
 
-const LoaderStyle = styled(FontAwesome)`
+const LoaderStyle = styled(FontAwesomeIcon)`
 	position: absolute;
 	display: block;
 	height: 90%;
@@ -31,7 +34,7 @@ const LoaderStyle = styled(FontAwesome)`
 	animation: ${ LoaderKeyframes } 2s linear infinite;
 `
 
-const Loader = () => <LoaderStyle icon={ faCircle } />
+const Loader = () => <LoaderStyle icon="circle" />
 
 /************************************************************/
 /* Button Style                                             */

src/elements/header/links/icon.js

@@ -1,9 +1,11 @@
 //@flow
 
+import React from "react"
 import styled from "styled-components"
-import FontAwesome from "@fortawesome/react-fontawesome"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 
-export default styled(FontAwesome)`
+export default styled(FontAwesomeIcon)`
 	color: ${ props => props.theme.textColor || "#FFFFFF" };
 	margin-right: 5px;
 `
+

src/index.ejs

@@ -57,9 +57,6 @@
 				border-spacing: 0;
 			}
 		</style>
-		<style>
-			<%= fontawesomecss %>
-		</style>
 		<%- style %>
     </head>
     <body>

src/router.js

@@ -8,7 +8,6 @@ import App from "./app"
 import path from "path"
 import ejs from "ejs"
 import indexFile from "raw-loader!./index.ejs"
-import fontawesome from "@fortawesome/fontawesome"
 
 const router = new Router
 
@@ -18,13 +17,11 @@ const template = ejs.compile(indexFile)
 const content = renderToString(sheet.collectStyles(<App />))
 const title = "Arwed Mett"
 const style = sheet.getStyleTags()
-const fontawesomecss = fontawesome.dom.css()
 
 const indexPage = template({
 	content,
 	title,
-	style,
-	fontawesomecss
+	style
 })
 
 router.get("/", (req: $Request, res: $Response) => {

webpack.config.js

@@ -22,7 +22,7 @@ const baseConfig = {
 				test: /\.(png|jpg|gif)$/,
 				use: [
 					{
-						loader: 'url-loader',
+						loader: "url-loader",
 						options: {
 							limit: 8192
 						}
@@ -83,24 +83,25 @@ const index = () => Object.assign({ }, baseConfig, {
 	},
 	node: {
 		__dirname: false,
-		__filename: false,
+		__filename: false
 	}
 })
 
 // decorators
 const production = config => Object.assign({ }, config(), {
+	mode: "production",
 	plugins: [
 		new webpack.DefinePlugin({
-			"process.env.NODE_ENV": JSON.stringify('production')
-		}),
-		new webpack.optimize.UglifyJsPlugin()
+			"process.env.NODE_ENV": JSON.stringify("production")
+		})
 	]
 })
 
 const development = config => Object.assign({ }, config(), {
+	mode: "development",
 	devServer: {
 		historyApiFallback: true,
-		stats: 'errors-only',
+		stats: "errors-only",
 
 		host: process.env.HOST,
 		port: 5000,
@@ -112,14 +113,14 @@ const development = config => Object.assign({ }, config(), {
 	devtool: "source-map",
 	plugins: [
 		new webpack.HotModuleReplacementPlugin(),
-        new WebpackNotifierPlugin()
+		new WebpackNotifierPlugin()
 	]
 })
 
 module.exports = env => {
-	if (env === 'production') {
-		return [production(index), production(runtime)]
+	if (env === "production") {
+		return [ production(index), production(runtime) ]
 	} else {
-		return [development(runtime)]
+		return [ development(runtime) ]
 	}
 }