Add lint configs and setup CI linter step (#7)

* Add lint configs and setup CI lint step

* Update workflows

* Update name

* Update naming one more time

.eslintignore

@@ -0,0 +1,13 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+.github
+
+babel.config.js
+docusaurus.config.js

.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "parser": "babel-eslint",
+  "extends": ["eslint:recommended", "prettier", "plugin:prettier/recommended", "plugin:react/recommended"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "legacyDecorators": true
+    },
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "prettier"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.github/workflows/deploy.yml

@@ -1,34 +1,19 @@
 name: Deploy
 
 on:
-  pull_request:
-    branches:
-      - main
   push:
     branches:
       - main
 
 jobs:
-  checks:
-    if: github.event_name != 'push'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '12.x'
-      - name: Test Build
-        run: |
-          yarn install --frozen-lockfile
-          yarn build
   gh-release:
     if: github.event_name != 'pull_request'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: 12
       - uses: webfactory/[email protected]
         with:
           ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }}

.github/workflows/lint.yml

@@ -0,0 +1,44 @@
+name: Lint & Test Build
+
+on:
+  # Trigger the workflow on push or pull request,
+  # but only for the main branch
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  run-linters:
+    name: Lint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Lint
+        run: |
+          yarn install --frozen-lockfile
+          yarn lint
+  test-build:
+    if: github.event_name != 'push'
+    name: Test Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 12
+      - name: Test Build
+        run: |
+          yarn install --frozen-lockfile
+          yarn build
+

.prettierignore

@@ -0,0 +1,13 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+.github
+
+babel.config.js
+docusaurus.config.js

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "tabWidth": 2
+}

package.json

@@ -11,7 +11,11 @@
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids"
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "fix:lint": "eslint src --fix",
+    "fix:prettier": "prettier src --write",
+    "fix": "yarn fix:prettier && yarn fix:lint",
+    "lint": "prettier src --check && eslint src"
   },
   "dependencies": {
     "@docusaurus/core": "2.0.0-beta.6",
@@ -36,5 +40,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-eslint": "10.1.0",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.25.2",
+    "prettier": "2.4.1"
   }
-}
+}

src/pages/index.js

@@ -13,10 +13,7 @@ function Home() {
           <div className="container">
             <div className="row cards__container">
               <div className={clsx("col col--4", styles.feature)}>
-                <Link
-                  className="navbar__link"
-                  to="docs/architecture/overview"
-                >
+                <Link className="navbar__link" to="docs/architecture/overview">
                   <div className="card">
                     <div className="card__header">
                       <h3>
@@ -28,7 +25,8 @@ function Home() {
                     <div className="card__body">
                       <p>
                         <Translate description="get-started-building">
-                          Get a high-level understanding of Metaplex's architecture.
+                          Get a high-level understanding of Metaplex&apos;s
+                          architecture.
                         </Translate>
                       </p>
                     </div>
@@ -43,4 +41,4 @@ function Home() {
   );
 }
 
-export default Home;
+export default Home;