style: fix lint issues

src/SidebarProvider.tsx

@@ -1,21 +1,21 @@
 import React, { useState } from "react"
 
-interface SidebarProviderProps {
+interface ISidebarProviderProps {
   children: React.ReactNode
 }
 
-export interface SidebarContextInterface {
+export interface ISidebarContextInterface {
   current: number
   setCurrent: (index: number) => void
 }
 
-export const SidebarContext = React.createContext<SidebarContextInterface | null>(
+export const SidebarContext = React.createContext<ISidebarContextInterface | null>(
   null
 )
 
 export function SidebarProvider({
   children,
-}: SidebarProviderProps): JSX.Element {
+}: ISidebarProviderProps): JSX.Element {
   const [current, setCurrent] = useState(0)
 
   function selectFirstLevel(index: number) {

src/components/Footer/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import * as SC from "./styles"
 import { Container } from "../Container"
+import * as SC from "./styles"
 
 export function Footer() {
   return (

src/components/Header/index.tsx

@@ -1,7 +1,7 @@
 import { Link } from "gatsby"
 import React, { PropsWithChildren } from "react"
-import { Container } from "../Container"
 import logo from "../../images/tph-logo.png"
+import { Container } from "../Container"
 import * as SC from "./styles"
 
 function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {

src/components/Layout/index.tsx

@@ -5,16 +5,16 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
+import { graphql, useStaticQuery } from "gatsby"
 import React, { PropsWithChildren } from "react"
-import { useStaticQuery, graphql } from "gatsby"
 
+import Scrollbar from "react-perfect-scrollbar"
+import "react-perfect-scrollbar/dist/css/styles.css"
+import { GlobalStyles } from "../../globalStyles"
 import { Container } from "../Container"
 import { Footer } from "../Footer"
 import { Header } from "../Header"
-import { GlobalStyles } from "../../globalStyles"
 import * as SC from "./styles"
-import Scrollbar from "react-perfect-scrollbar"
-import "react-perfect-scrollbar/dist/css/styles.css"
 
 export function Layout({ children }: PropsWithChildren<{}>) {
   const data = useStaticQuery(graphql`

src/components/Markdown/index.tsx

@@ -1,12 +1,12 @@
-import React from "react"
-import * as SC from "./styles"
 import Prism from "prismjs"
-import "prismjs/components/prism-python"
 import "prismjs/components/prism-markup-templating"
 import "prismjs/components/prism-php"
+import "prismjs/components/prism-python"
 import "prismjs/plugins/line-numbers/prism-line-numbers.css"
+import React from "react"
+import * as SC from "./styles"
 
-interface MarkdownProps {
+interface IMarkdownProps {
   content: string
 }
 

src/components/ResourceBreadcrumb/index.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 
-import { IFileOrFolder } from "../ResourcesSidebar/index"
 import ChevronUp from "../../icons/chevron-up.svg"
 import { traversePaths } from "../../utils"
+import { IFileOrFolder } from "../ResourcesSidebar/index"
 import * as SC from "./styles"
 
-interface ResourceBreadcrumbProps {
+interface IResourceBreadcrumbProps {
   relativePath: any
 }
 
@@ -24,7 +24,7 @@ function flatten([
   return flatten([...currNode.children, ...previousNodes, currNode])
 }
 
-export function ResourceBreadcrumb({ relativePath }: ResourceBreadcrumbProps) {
+export function ResourceBreadcrumb({ relativePath }: IResourceBreadcrumbProps) {
   const paths = relativePath.split("/")
   const breadcrumbItems = flatten([traversePaths(paths)])
 

src/components/ResourceBreadcrumb/styles.tsx

@@ -1,5 +1,5 @@
-import styled from "styled-components"
 import { Link } from "gatsby"
+import styled from "styled-components"
 
 export const ResourceBreadcrumbWrapper = styled.div`
   display: flex;

src/components/ResourceHeader/index.tsx

@@ -1,11 +1,11 @@
 import React, { Fragment } from "react"
 
-import { StackedAvatars } from "../StackedAvatars"
 import ChevronUp from "../../icons/chevron-up.svg"
 import { ResourceBreadcrumb } from "../ResourceBreadcrumb"
+import { StackedAvatars } from "../StackedAvatars"
 import * as SC from "./styles"
 
-interface ResourceHeaderProps {
+interface IResourceHeaderProps {
   relativePath: any
   title: any
   authors: any

src/components/ResourceHeader/styles.tsx

@@ -1,5 +1,5 @@
-import styled, { css } from "styled-components"
 import { Link } from "gatsby"
+import styled, { css } from "styled-components"
 import { fontFamily, modularScale } from "../../design/typography"
 
 export const ResourceHeaderWrapper = styled.div`

src/components/ResourcesLayout/index.tsx

@@ -8,9 +8,9 @@
 import React, { PropsWithChildren } from "react"
 
 import { GlobalStyles } from "../../globalStyles"
+import { SidebarProvider } from "../../SidebarProvider"
 import { ResourcesSidebar } from "../ResourcesSidebar"
 import * as SC from "./styles"
-import { SidebarProvider } from "../../SidebarProvider"
 
 export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
   return (

src/components/ResourcesSidebar/index.tsx

@@ -1,10 +1,10 @@
-import React, { useState, PropsWithChildren } from "react"
-import { useStaticQuery, graphql, Link } from "gatsby"
-import useBuildTree from "./useBuildTree"
-import useSidebar from "./../../hooks/useSidebar"
-import Banner from "../../images/tph-banner.svg"
+import { graphql, Link, useStaticQuery } from "gatsby"
+import React, { PropsWithChildren, useState } from "react"
 import TriangleDown from "../../icons/triangle-down.svg"
+import Banner from "../../images/tph-banner.svg"
+import useSidebar from "./../../hooks/useSidebar"
 import * as SC from "./styles"
+import useBuildTree from "./useBuildTree"
 
 export interface IFile {
   title: string

src/components/ResourcesSidebar/styles.tsx

@@ -1,5 +1,5 @@
-import styled from "styled-components"
 import { Link } from "gatsby"
+import styled from "styled-components"
 import ChevronUp from "../../icons/chevron-up.svg"
 
 export const ResourcesSidebarWrapper = styled.div`

src/components/ResourcesSidebar/useBuildTree.tsx

@@ -1,13 +1,13 @@
-import partition from "ramda/es/partition"
 import chain from "ramda/es/chain"
+import partition from "ramda/es/partition"
 
 import { traversePaths } from "../../utils"
 import {
-  IFileOrFolder,
-  IFile,
-  IFolder,
   IAllResourcesQuery,
+  IFile,
+  IFileOrFolder,
   IFileQuery,
+  IFolder,
 } from "./index"
 
 function generateFolder({
@@ -44,7 +44,7 @@ function generateFile({
 }
 
 function join([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] {
-  if (!head) return []
+  if (!head) { return [] }
 
   const [similarFs, remaining] = partition(
     obj => obj.title === head.title && obj.type === head.type,

src/components/ResourcesSidebarSection/index.tsx

@@ -1,14 +1,14 @@
 import React, { PropsWithChildren } from "react"
 import * as SC from "./styles"
 
-export interface ResourcesSidebarSectionProps {
+export interface IResourcesSidebarSectionProps {
   readonly title: string
 }
 
 export function ResourcesSidebarSection({
   title,
   children,
-}: PropsWithChildren<ResourcesSidebarSectionProps>) {
+}: PropsWithChildren<IResourcesSidebarSectionProps>) {
   return (
     <div>
       <SC.SidebarTitle>{title}</SC.SidebarTitle>

src/components/SEO/index.tsx

@@ -1,8 +1,8 @@
+import { graphql, useStaticQuery } from "gatsby"
 import React from "react"
 import Helmet from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
 
-interface SEOProps {
+interface ISEOProps {
   readonly description?: string
   readonly lang?: string
   readonly meta?: any[]
@@ -16,7 +16,7 @@ export function SEO({
   meta = [],
   keywords = [],
   title,
-}: SEOProps) {
+}: ISEOProps) {
   const { site } = useStaticQuery(
     graphql`
       query {

src/components/StackedAvatars/index.tsx

@@ -2,11 +2,11 @@ import React from "react"
 
 import * as SC from "./styles"
 
-interface StackedAvatarsProps {
+interface IStackedAvatarsProps {
   authors: any
 }
 
-export function StackedAvatars({ authors }: StackedAvatarsProps) {
+export function StackedAvatars({ authors }: IStackedAvatarsProps) {
   return (
     <SC.StackedAvatarsWrapper count={authors.length}>
       {authors.map((author, index) => (

src/pages/about.tsx

@@ -1,7 +1,7 @@
-import React, { Fragment } from "react"
 import { graphql } from "gatsby"
-import { Markdown } from "../components/Markdown"
+import React, { Fragment } from "react"
 import { MarkdownRemark, Query } from "../../generated/graphql"
+import { Markdown } from "../components/Markdown"
 import { SEO } from "../components/SEO"
 
 function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {

src/pages/index.tsx

@@ -1,5 +1,5 @@
-import React, { Fragment } from "react"
 import { Link } from "gatsby"
+import React, { Fragment } from "react"
 
 import { SEO } from "../components/SEO"
 

src/pages/rules.tsx

@@ -1,7 +1,7 @@
-import React, { Fragment } from "react"
 import { graphql } from "gatsby"
-import { Markdown } from "../components/Markdown"
+import React, { Fragment } from "react"
 import { MarkdownRemark, Query } from "../../generated/graphql"
+import { Markdown } from "../components/Markdown"
 import { SEO } from "../components/SEO"
 
 function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {

src/templates/languagePost.tsx

@@ -1,8 +1,8 @@
-import React, { Fragment } from "react"
 import { graphql } from "gatsby"
+import React, { Fragment } from "react"
 import { Markdown } from "../components/Markdown"
-import { SEO } from "../components/SEO"
 import { ResourceHeader } from "../components/ResourceHeader"
+import { SEO } from "../components/SEO"
 
 // @todo maybe find alternative type for data
 function LanguagePost({ data }: any) {

src/utils/index.ts

@@ -2,7 +2,7 @@ import { IFileOrFolder } from "../components/ResourcesSidebar/index"
 
 export function traversePaths(
   [head, ...tail]: string[],
-  basePath = "/resources"
+  basePath: string = "/resources"
 ): IFileOrFolder {
   const path = basePath + "/" + head
   const isFile = !tail.length