Added eslint + prettier and updated .editorconfig

.editorconfig

@@ -15,5 +15,9 @@ csharp_new_line_before_open_brace = all
 trim_trailing_whitespace = false
 
 [*.json]
+indent_size = 2
 trim_trailing_whitespace = false
 insert_final_newline = false
+
+[*.js]
+indent_size = 2

website/.eslintrc.js

@@ -0,0 +1,63 @@
+const prettierOptions = require('./prettier.config');
+
+module.exports = {
+  parser: 'babel-eslint',
+  extends: ['airbnb', 'prettier', 'prettier/react'],
+  plugins: ['prettier', 'react', 'jsx-a11y'],
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+    es6: true,
+  },
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    'prettier/prettier': ['error', prettierOptions],
+    'arrow-body-style': [2, 'as-needed'],
+    'class-methods-use-this': 0,
+    'import/imports-first': 0,
+    'import/newline-after-import': 0,
+    'import/no-dynamic-require': 0,
+    'import/no-extraneous-dependencies': 0,
+    'import/no-named-as-default': 0,
+    'import/no-unresolved': 2,
+    'import/no-webpack-loader-syntax': 0,
+    'import/prefer-default-export': 0,
+    indent: [
+      2,
+      2,
+      {
+        SwitchCase: 1
+      },
+    ],
+    'jsx-a11y/aria-props': 2,
+    'jsx-a11y/heading-has-content': 0,
+    'jsx-a11y/label-has-for': 2,
+    'jsx-a11y/mouse-events-have-key-events': 2,
+    'jsx-a11y/role-has-required-aria-props': 2,
+    'jsx-a11y/role-supports-aria-props': 2,
+    'max-len': 0,
+    'newline-per-chained-call': 0,
+    'no-confusing-arrow': 0,
+    'no-console': 1,
+    'no-use-before-define': 0,
+    'prefer-template': 2,
+    'react/jsx-closing-tag-location': 0,
+    'react/forbid-prop-types': 0,
+    'react/jsx-first-prop-new-line': [2, 'multiline'],
+    'react/jsx-filename-extension': 0,
+    'react/jsx-no-target-blank': 0,
+    'react/require-default-props': 0,
+    'react/require-extension': 0,
+    'react/self-closing-comp': 0,
+    'react/sort-comp': 0,
+    'react/prop-types': 0,
+    'react/jsx-fragments': 0,
+  },
+}

website/package.json

@@ -9,6 +9,15 @@
     "rename-version": "docusaurus-rename-version"
   },
   "devDependencies": {
-    "docusaurus": "^1.13.0"
+    "babel-eslint": "^10.0.3",
+    "docusaurus": "^1.13.0",
+    "eslint": "^6.5.1",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.4.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.16.0",
+    "prettier": "^1.18.2"
   }
 }

website/pages/en/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 /**
  * Copyright (c) 2017-present, Facebook, Inc.
  *
@@ -5,126 +6,123 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const React = require("react");
+const React = require('react');
 
-const CompLibrary = require("../../core/CompLibrary.js");
+// eslint-disable-next-line import/no-unresolved
+const CompLibrary = require('../../core/CompLibrary');
 
-const {MarkdownBlock, GridBlock, Container} = CompLibrary; /* Used to read markdown */
+const { GridBlock, Container } = CompLibrary; /* Used to read markdown */
 
-const siteConfig = require(`${process.cwd()}/siteConfig.js`);
+const siteConfig = require(`${process.cwd()}/siteConfig`);
 
 function docUrl(doc, language) {
-  return `${siteConfig.baseUrl}${language ? `${language}/` : ""}${doc}`;
+  return `${siteConfig.baseUrl}${language ? `${language}/` : ''}${doc}`;
 }
 
 function imgUrl(img) {
   return `${siteConfig.baseUrl}img/${img}`;
 }
 
-class Button extends React.Component {
+const Button = ({ href, target, children }) => (
-  render() {
-    return (
   <div className="pluginWrapper buttonWrapper">
-        <a className="button hero" href={this.props.href} target={this.props.target}>
+    <a className="button hero" href={href} target={target}>
-          {this.props.children}
+      {children}
     </a>
   </div>
-    );
+);
-  }
-}
 
 Button.defaultProps = {
-  target: "_self"
+  target: '_self',
 };
 
-const SplashContainer = props => (
+const SplashContainer = ({ children }) => (
   <div className="homeContainer">
     <div className="homeSplashFade">
-      <div className="wrapper homeWrapper">{props.children}</div>
+      <div className="wrapper homeWrapper">{children}</div>
     </div>
   </div>
 );
 
 const ProjectTitle = () => (
   <React.Fragment>
-    <div style={{display : "flex", justifyContent : "center", alignItems : "center"}}>
+    <div
-      <img src={"img/atom-icon-pure-purple.png"} className="homeLogo" alt="Unity Atoms logo" width={82} height={82} style={{ marginRight: '0.5rem' }}/>
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <img
+        src="img/atom-icon-pure-purple.png"
+        className="homeLogo"
+        alt="Unity Atoms logo"
+        width={82}
+        height={82}
+        style={{ marginRight: '0.5rem' }}
+      />
       <h1 className="projectTitle">{siteConfig.title}</h1>
     </div>
 
-    <h2 style={{marginTop : "0.5em"}}>
+    <h2 style={{ marginTop: '0.5em' }}>
       Tiny modular pieces utilizing the power of Scriptable Objects
     </h2>
   </React.Fragment>
 );
 
-const PromoSection = props => (
+const PromoSection = ({ children }) => (
   <div className="section promoSection">
     <div className="promoRow">
-      <div className="pluginRowBlock">{props.children}</div>
+      <div className="pluginRowBlock">{children}</div>
     </div>
   </div>
 );
 
-class HomeSplash extends React.Component {
+const HomeSplash = ({ language = '' }) => (
-  render() {
-    const language = this.props.language || "";
-    return (
   <SplashContainer>
     <div className="inner">
       <ProjectTitle />
       <PromoSection>
-            <Button href={docUrl("introduction/quick-start", language)}>
+        <Button href={docUrl('introduction/quick-start', language)}>
           Get Started
         </Button>
       </PromoSection>
     </div>
   </SplashContainer>
-    );
+);
-  }
-}
 
-const Block = props => (
+const Block = ({ id, background, className, children, layout }) => (
-  <Container
+  <Container id={id} background={background} className={className}>
-    id={props.id}
+    <GridBlock align="center" contents={children} layout={layout} />
-    background={props.background}
-    className={props.className}
-  >
-    <GridBlock align="center" contents={props.children} layout={props.layout}/>
   </Container>
 );
 
-const FeaturesTop = props => (
+const FeaturesTop = () => (
   <Block layout="threeColumn" className="featureBlock">
     {[
       {
-        content: "Avoid scripts and systems directly dependent on each other.",
+        content: 'Avoid scripts and systems directly dependent on each other.',
-        image : imgUrl("box.svg"),
+        image: imgUrl('box.svg'),
         imageAlign: 'top',
-        title: "Modular"
+        title: 'Modular',
       },
       {
-        content: "Scriptable Objects makes it possible to make changes to your game at runtime.",
+        content:
-        image : imgUrl("pen.svg"),
+          'Scriptable Objects makes it possible to make changes to your game at runtime.',
+        image: imgUrl('pen.svg'),
         imageAlign: 'top',
-        title: "Editable"
+        title: 'Editable',
       },
       {
-        content: "Modular code is easier to debug than tightly coupled code.",
+        content: 'Modular code is easier to debug than tightly coupled code.',
-        image : imgUrl("bug.svg"),
+        image: imgUrl('bug.svg'),
         imageAlign: 'top',
-        title: "Debuggable"
+        title: 'Debuggable',
       },
     ]}
   </Block>
 );
 
-
+const Index = ({ language = '' }) => (
-class Index extends React.Component {
-  render() {
-    const language = this.props.language || "";
-
-    return (
   <div className="homeMainWrapper">
     <HomeSplash language={language} />
     <Container background="light">
@@ -133,8 +131,6 @@ class Index extends React.Component {
       </div>
     </Container>
   </div>
-    );
+);
-  }
-}
 
 module.exports = Index;

website/prettier.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  printWidth: 80,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

website/siteConfig.js

@@ -26,7 +26,7 @@ const siteConfig = {
   headerLinks: [
     { doc: 'introduction/quick-start', label: 'Quick Start' },
     { doc: 'api/actions', label: 'API' },
-    { href: 'https://www.github.com/AdamRamberg/unity-atoms', label: 'Github' }
+    { href: 'https://www.github.com/AdamRamberg/unity-atoms', label: 'Github' },
   ],
 
   /* path to images for header/footer */