Add linter

adoptium · Sep 18, 2023 · 0499c42 · 0499c42
1 parent d7ea326
commit 0499c42
Show file tree

Hide file tree

Showing 17 changed files with 738 additions and 893 deletions.
diff --git a/.github/linters/.stylelintrc.json b/.github/linters/.stylelintrc.json
@@ -0,0 +1,12 @@
+{
+    "extends": ["stylelint-config-standard-scss"],
+    "rules": {
+        "keyframes-name-pattern": null,
+        "at-rule-no-unknown": null,
+        "declaration-empty-line-before": null,
+        "number-leading-zero": null,
+        "color-function-notation": null,
+        "no-descending-specificity": null,
+        "selector-class-pattern": null
+    }
+}
diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml
@@ -0,0 +1,33 @@
+name: Linter
+
+on:
+  pull_request:
+    branches: [ main ]
+
+permissions:
+  contents: read
+
+jobs:
+  linter:
+    name: Lint Code Base
+    runs-on: ubuntu-latest
+    permissions:
+      statuses: write  # for github/super-linter/slim to mark status of each linter run
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4.0.0
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Lint Code Base
+        uses: github/super-linter/slim@45fc0d88288beee4701c62761281edfee85655d7 # v5.0.0
+
+        env:
+          VALIDATE_ALL_CODEBASE: true
+          DEFAULT_BRANCH: main
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # Markdown lint complains about the issue templates
+          FILTER_REGEX_EXCLUDE: .github/ISSUE_TEMPLATE/*
+          VALIDATE_YAML: false
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,6 @@
         "express": "^4.18.2",
         "highcharts": "^11.1.0",
         "highcharts-react-official": "^3.2.1",
-        "http-proxy-middleware": "^2.0.6",
         "lodash": "^4.17.21",
         "moment": "^2.29.4",
         "react": "^17.0.2",

diff --git a/server.js b/server.js
@@ -1,10 +1,9 @@
-const proxy = require('http-proxy-middleware')
 const Bundler = require('parcel-bundler')
 const express = require('express')
 
-let bundler = new Bundler('index.html')
-let app = express()
+const bundler = new Bundler('index.html')
+const app = express()
 
 app.use(bundler.middleware())
 
-app.listen(Number(process.env.PORT || 3000))
+app.listen(Number(process.env.PORT || 3000))
diff --git a/src/App.js b/src/App.js
@@ -1,61 +1,63 @@
-import React, { Component } from 'react';
-import { Route } from 'react-router';
-import { ConfigProvider, Layout, Menu, Button } from 'antd';
-import en_US from "antd/lib/locale/en_US";
-import { Download, Trends } from './Graph/';
-import AdoptiumLogo from './Adoptiumlogo.svg';
-import NavigationMenu from './Components/NavigationMenu';
-import ErrorBoundary from './ErrorBoundary';
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import React, { Component } from 'react'
+import { Route } from 'react-router'
+import { ConfigProvider, Layout, Menu, Button } from 'antd'
+import enUs from 'antd/lib/locale/en_US'
+import { Download, Trends } from './Graph/'
+import AdoptiumLogo from './Adoptiumlogo.svg'
+import NavigationMenu from './Components/NavigationMenu'
+import ErrorBoundary from './ErrorBoundary'
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
+
+const { Header, Content, Sider } = Layout
 
-const { Header, Content, Sider } = Layout;
-
 export default class App extends Component {
-	state = {
-		collapsed: false,
-	};
+  state = {
+    collapsed: false
+  }
 
-	toggle = () => {
-		this.setState({
-			collapsed: !this.state.collapsed,
-		});
-	};
+  handleToggle = () => {
+    this.setState({
+      collapsed: !this.state.collapsed
+    })
+  }
 
-	render() {
-		return <ConfigProvider locale={en_US}>
-			<Layout>
-				<Header className="header" style={{ background: '#14003c' }}>
-					<div className="logo" />
-					<Menu
-						theme="dark"
-						mode="horizontal"
-						defaultSelectedKeys={['2']}
-						style={{ lineHeight: '64px', background: '#14003c' }}
-					>
-						<Menu.Item key="1"><a href="https://adoptium.net/" style={{ height: '100%', display: 'flex' }}><img src={AdoptiumLogo} style={{height: '3.5em', paddingTop: '1em'}} /></a></Menu.Item>
-					</Menu>
-				</Header>
-				<Layout>
-					<Sider width={200} style={{ background: '#fff' }} trigger={null} collapsible collapsed={this.state.collapsed}>
-						<NavigationMenu />
-					</Sider>
-					<Layout style={{ padding: '0 24px 24px' }}>
-						<ErrorBoundary>
-							<Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
-								<Button onClick={this.toggle} type="link" shape="circle" icon={this.state.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} />
-								<Route exact path="/" component={Download} />
-								<Route path="/download" component={Download} />
-								<Route path="/trends" component={Trends} />
-							</Content>
-						</ErrorBoundary>
-					</Layout>
-				</Layout>
-				<Layout>
-					<footer className="py-3 mt-auto" style={{ background: '#14003c', margin: '20px 0'}}>
-						<a href="https://www.netlify.com" style={{ height: '100%', display: 'flex' }}><img src="https://www.netlify.com/v3/img/components/netlify-light.svg" alt="Deploys by Netlify" /></a>
-					</footer>
-				 </Layout>
-			</Layout>
-		</ConfigProvider>
-	}
+  render () {
+    return (
+      <ConfigProvider locale={enUs}>
+        <Layout>
+          <Header className='header' style={{ background: '#14003c' }}>
+            <div className='logo' />
+            <Menu
+              theme='dark'
+              mode='horizontal'
+              defaultSelectedKeys={['2']}
+              style={{ lineHeight: '64px', background: '#14003c' }}
+            >
+              <Menu.Item key='1'><a href='https://adoptium.net/' style={{ height: '100%', display: 'flex' }}><img src={AdoptiumLogo} style={{ height: '3.5em', paddingTop: '1em' }} /></a></Menu.Item>
+            </Menu>
+          </Header>
+          <Layout>
+            <Sider width={200} style={{ background: '#fff' }} trigger={null} collapsible collapsed={this.state.collapsed}>
+              <NavigationMenu />
+            </Sider>
+            <Layout style={{ padding: '0 24px 24px' }}>
+              <ErrorBoundary>
+                <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
+                  <Button onClick={this.handleToggle} type='link' shape='circle' icon={this.state.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} />
+                  <Route exact path='/' component={Download} />
+                  <Route path='/download' component={Download} />
+                  <Route path='/trends' component={Trends} />
+                </Content>
+              </ErrorBoundary>
+            </Layout>
+          </Layout>
+          <Layout>
+            <footer className='py-3 mt-auto' style={{ background: '#14003c', margin: '20px 0' }}>
+              <a href='https://www.netlify.com' style={{ height: '100%', display: 'flex' }}><img src='https://www.netlify.com/v3/img/components/netlify-light.svg' alt='Deploys by Netlify' /></a>
+            </footer>
+          </Layout>
+        </Layout>
+      </ConfigProvider>
+    )
+  }
 }
diff --git a/src/ErrorBoundary.jsx b/src/ErrorBoundary.jsx
@@ -1,19 +1,19 @@
-import React from 'react';
+import React from 'react'
 
 export default class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
+  constructor (props) {
+    super(props)
+    this.state = { hasError: false }
   }
 
-  componentDidCatch(error, info) {
-    this.setState({ hasError: true });
+  componentDidCatch (error, info) {
+    this.setState({ hasError: true, errorMessage: error.message })
   }
 
-  render() {
+  render () {
     if (this.state.hasError) {
-      return <h1>Something went wrong.</h1>;
+      return <h1>Something went wrong.</h1>
     }
-    return this.props.children;
+    return this.props.children
   }
-}
+}
diff --git a/src/Graph/BarChart.js b/src/Graph/BarChart.js
@@ -1,66 +1,68 @@
-import React, { Component } from 'react';
-import Highcharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
-import startCase from 'lodash/startCase';
-import './Graph.css';
+import React, { Component } from 'react'
+import Highcharts from 'highcharts'
+import HighchartsReact from 'highcharts-react-official'
+import startCase from 'lodash/startCase'
+import './Graph.css'
 
 export default class BarChart extends Component {
-    render() {
-        const { data, name, startCaseKeys } = this.props;
-        if (!data) return null;
+  render () {
+    const { data, name, startCaseKeys } = this.props
+    if (!data) return null
 
-        const options = {
-            chart: {
-                type: 'column'
-            },
-            title: {
-                text: name
-            },
-            subtitle: {
-                text: 'Data is from: <a href="https://api.adoptium.net/v3/stats/downloads/total" target="_blank" rel="noopener noreferrer">api.adoptium.net/v3/stats/downloads/total</a>',
-                useHTML: true,
-            },
-            xAxis: {
-                categories: Object.keys(data).map(v => startCaseKeys ? startCase(v) : v),
-                crosshair: true
-            },
-            yAxis: {
-                title: {
-                    text: 'Downloads'
-                }
-            },
-            tooltip: {
-                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
-                footerFormat: '</table>',
-                shared: true,
-                useHTML: true
-            },
-            plotOptions: {
-                column: {
-                    dataLabels: {
-                        enabled: true,
-                        formatter: function () {
-                            if (!this || !this.y) return '';
-                            return Highcharts.numberFormat(this.y, 0, '.', ' ');
-                        }
-                    },
-                    pointPadding: 0.2,
-                    borderWidth: 0,
-                    minPointLength: 10,
-                    shadow: true
-                },
-            },
-            series: [{
-                name,
-                data: Object.values(data),
-            }]
+    const options = {
+      chart: {
+        type: 'column'
+      },
+      title: {
+        text: name
+      },
+      subtitle: {
+        text: 'Data is from: <a href="https://api.adoptium.net/v3/stats/downloads/total" target="_blank" rel="noopener noreferrer">api.adoptium.net/v3/stats/downloads/total</a>',
+        useHTML: true
+      },
+      xAxis: {
+        categories: Object.keys(data).map(v => startCaseKeys ? startCase(v) : v),
+        crosshair: true
+      },
+      yAxis: {
+        title: {
+          text: 'Downloads'
         }
-
-        return <div className="chart">
-            <HighchartsReact
-                highcharts={Highcharts}
-                options={options}
-            />
-        </div>;
+      },
+      tooltip: {
+        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
+        footerFormat: '</table>',
+        shared: true,
+        useHTML: true
+      },
+      plotOptions: {
+        column: {
+          dataLabels: {
+            enabled: true,
+            formatter: function () {
+              if (!this || !this.y) return ''
+              return Highcharts.numberFormat(this.y, 0, '.', ' ')
+            }
+          },
+          pointPadding: 0.2,
+          borderWidth: 0,
+          minPointLength: 10,
+          shadow: true
+        }
+      },
+      series: [{
+        name,
+        data: Object.values(data)
+      }]
     }
-}
+
+    return (
+      <div className='chart'>
+        <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+        />
+      </div>
+    )
+  }
+}