Add 'yarn lint' command and run it in GH actions (#517)

* Add 'yarn lint' command and run it in GH actions

* Move linting to own workflow

* Remove linting from build-workflow

* Solve linting warnings

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: lint and build
+name: test, build
 
 on:
   push:
@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         node: ['12', '14']
-    name: Test with NodeJS ${{ matrix.node }}
+    name: Test and build with NodeJS ${{ matrix.node }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2

.github/workflows/lint.yml

@@ -0,0 +1,28 @@
+name: lint
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    name: Lints all .ts and .tsx files
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: Cache node_modules
+        uses: actions/cache@v1.1.0
+        with:
+          path: node_modules
+          key: node_modules
+      - name: Set up NodeJS
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Install dependencies
+        run: yarn install
+      - name: Lint code
+        run: yarn lint

package.json

@@ -93,6 +93,7 @@
         "build:serve": "http-server build/ -s -p 3001 -P \"http://127.0.0.1:3001?\"",
         "build": "react-scripts build",
         "test": "react-scripts test",
+        "lint": "eslint --ext .ts,.tsx src",
         "eject": "react-scripts eject",
         "cy:open": "cypress open",
         "cy:run:chrome": "cypress run --browser chrome",

src/components/editor/table-of-contents/table-of-contents.tsx

@@ -9,7 +9,7 @@ export interface TableOfContentsProps {
   className?: string
 }
 
-export const slugify = (content:string) => {
+export const slugify = (content:string): string => {
   return encodeURIComponent(String(content).trim().toLowerCase().replace(/\s+/g, '-'))
 }
 

src/components/editor/yaml-metadata/yaml-metadata.ts

@@ -13,8 +13,8 @@ export interface RawYAMLMetadata {
   GA: string | undefined
   disqus: string | undefined
   type: string | undefined
-  slideOptions: any
-  opengraph: any
+  slideOptions: unknown
+  opengraph: { [key: string]:string }
 }
 
 export class YAMLMetaData {

src/components/markdown-renderer/markdown-it-plugins/alert-container.ts

@@ -1,12 +1,13 @@
+import MarkdownIt from 'markdown-it'
 import Renderer from 'markdown-it/lib/renderer'
 import Token from 'markdown-it/lib/token'
 
-type RenderContainerReturn = (tokens: Token[], index: number, options: any, env: any, self: Renderer) => void;
+type RenderContainerReturn = (tokens: Token[], index: number, options: MarkdownIt.Options, env: unknown, self: Renderer) => void;
 type ValidAlertLevels = ('warning' | 'danger' | 'success' | 'info')
 export const validAlertLevels: ValidAlertLevels[] = ['success', 'danger', 'info', 'warning']
 
 export const createRenderContainer = (level: ValidAlertLevels): RenderContainerReturn => {
-  return (tokens: Token[], index: number, options: any, env: any, self: Renderer) => {
+  return (tokens: Token[], index: number, options: MarkdownIt.Options, env: unknown, self: Renderer) => {
     tokens[index].attrJoin('role', 'alert')
     tokens[index].attrJoin('class', 'alert')
     tokens[index].attrJoin('class', `alert-${level}`)

src/components/markdown-renderer/markdown-renderer.tsx

@@ -34,7 +34,7 @@ import { ShowIf } from '../common/show-if/show-if'
 import { ForkAwesomeIcons } from '../editor/editor-pane/tool-bar/emoji-picker/icon-names'
 import { slugify } from '../editor/table-of-contents/table-of-contents'
 import { RawYAMLMetadata, YAMLMetaData } from '../editor/yaml-metadata/yaml-metadata'
-import { createRenderContainer, validAlertLevels } from './container-plugins/alert'
+import { createRenderContainer, validAlertLevels } from './markdown-it-plugins/alert-container'
 import { highlightedCode } from './markdown-it-plugins/highlighted-code'
 import { lineNumberMarker } from './markdown-it-plugins/line-number-marker'
 import { linkifyExtra } from './markdown-it-plugins/linkify-extra'