refactor: apply new eslint rules

apps/blog/src/App.tsx

@@ -1,24 +1,20 @@
 import darkTheme from "@developomp-site/theme/dist/dark.json"
 import lightTheme from "@developomp-site/theme/dist/light.json"
-
+import { useMeta, useTitle, useTitleTemplate } from "hoofd"
 import { useContext, useEffect, useState } from "react"
-import { Routes, Route } from "react-router-dom"
-import styled, { ThemeProvider } from "styled-components"
-import { useTitleTemplate, useTitle, useMeta } from "hoofd"
 import { isIE } from "react-device-detect"
+import { Route, Routes } from "react-router-dom"
+import styled, { ThemeProvider } from "styled-components"
 
-import Loading from "./components/Loading"
-import Header from "./components/Header"
 import Footer from "./components/Footer"
-
-import Home from "./pages/Home"
-import Search from "./pages/Search"
-import Page from "./pages/Page"
-import NotFound from "./pages/NotFound"
-
-import GlobalStyle from "./styles/globalStyle"
-
+import Header from "./components/Header"
+import Loading from "./components/Loading"
 import { globalContext } from "./globalContext"
+import Home from "./pages/Home"
+import NotFound from "./pages/NotFound"
+import Page from "./pages/Page"
+import Search from "./pages/Search"
+import GlobalStyle from "./styles/globalStyle"
 
 const IENotSupported = styled.p`
     margin: auto;

apps/blog/src/components/Footer/Footer.tsx

@@ -1,3 +1,4 @@
+import { type FC } from "react"
 import styled from "styled-components"
 
 import GithubLinkIcon from "../GithubLinkIcon"
@@ -28,7 +29,7 @@ const StyledFooterContainer = styled.div`
     max-width: ${({ theme }) => theme.theme.maxDisplayWidth.desktop};
 `
 
-export default () => {
+const Footer: FC = () => {
     return (
         <StyledFooter>
             <StyledFooterContainer>
@@ -41,3 +42,5 @@ export default () => {
         </StyledFooter>
     )
 }
+
+export default Footer

apps/blog/src/components/GithubLinkIcon.tsx

@@ -1,8 +1,7 @@
-import { ReactNode } from "react"
-import styled from "styled-components"
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import type { FC, ReactNode } from "react"
+import styled from "styled-components"
 
 const StyledGithubLink = styled.a<{ size?: string }>`
     font-size: ${(props) => props.size || "2.5rem"};
@@ -20,7 +19,7 @@ interface Props {
     children?: ReactNode
 }
 
-export default ({ link, size, children }: Props) => {
+const GithubLinkIcon: FC<Props> = ({ link, size, children }) => {
     return (
         <StyledGithubLink
             aria-label="GitHub repository"
@@ -33,3 +32,5 @@ export default ({ link, size, children }: Props) => {
         </StyledGithubLink>
     )
 }
+
+export default GithubLinkIcon

apps/blog/src/components/Header/Buttons/Buttons.tsx

@@ -1,7 +1,8 @@
+import { type FC } from "react"
 import styled from "styled-components"
 
-import ThemeToggleButton from "./ThemeToggleButton"
 import SearchButton from "./SearchButton"
+import ThemeToggleButton from "./ThemeToggleButton"
 
 const RightButtons = styled.div`
     display: flex;
@@ -9,7 +10,7 @@ const RightButtons = styled.div`
     margin-left: auto;
 `
 
-export default () => {
+const Buttons: FC = () => {
     return (
         <RightButtons>
             <ThemeToggleButton />
@@ -17,3 +18,5 @@ export default () => {
         </RightButtons>
     )
 }
+
+export default Buttons

apps/blog/src/components/Header/Buttons/SearchButton.tsx

@@ -1,9 +1,9 @@
+import { faSearch } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { Link } from "react-router-dom"
 import ReactTooltip from "react-tooltip"
 
 import HeaderButton from "../HeaderButton"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faSearch } from "@fortawesome/free-solid-svg-icons"
 
 const SearchButton = () => {
     return (

apps/blog/src/components/Header/Buttons/ThemeToggleButton.tsx

@@ -1,10 +1,9 @@
+import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useContext } from "react"
-import styled from "styled-components"
 import { isMobile } from "react-device-detect"
 import ReactTooltip from "react-tooltip"
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"
+import styled from "styled-components"
 
 import { ActionsEnum, globalContext } from "../../../globalContext"
 import { HeaderButtonCSS } from "../HeaderButton"

apps/blog/src/components/Header/Header.tsx

@@ -1,14 +1,13 @@
+import { type FC } from "react"
 import { Link } from "react-router-dom"
 import styled from "styled-components"
-import ReadProgress from "./ReadProgress"
-
-import Nav from "./Nav"
 
 import Sidebar from "../Sidebar"
-
 import Buttons from "./Buttons"
+import Nav from "./Nav"
+import ReadProgress from "./ReadProgress"
 
-const Header = styled.header`
+const StyledHeader = styled.header`
     /* set z index to arbitrarily high value to prevent other components from drawing over it */
     z-index: 9999;
 
@@ -43,18 +42,25 @@ const Icon = styled.img`
     margin: 1rem;
 `
 
-export default () => {
+const Header: FC = () => {
     return (
-        <Header>
+        <StyledHeader>
             <Container>
                 <Link to="/" aria-label="homepage">
-                    <Icon width={40} height={40} src="/icon/icon_circle.svg" alt="logo" />
+                    <Icon
+                        width={40}
+                        height={40}
+                        src="/icon/icon_circle.svg"
+                        alt="logo"
+                    />
                 </Link>
                 <Nav />
                 <Buttons />
                 <Sidebar />
             </Container>
             <ReadProgress />
-        </Header>
+        </StyledHeader>
     )
 }
+
+export default Header

apps/blog/src/components/Header/Nav.tsx

@@ -1,11 +1,11 @@
-import styled from "styled-components"
+import { type FC } from "react"
 import { Link } from "react-router-dom"
-
-import HeaderButton from "./HeaderButton"
+import styled from "styled-components"
 
 import NavbarData from "../../data/NavbarData"
+import HeaderButton from "./HeaderButton"
 
-const Nav = styled.div`
+const StyledNav = styled.div`
     display: flex;
     height: 100%;
 
@@ -15,20 +15,22 @@ const Nav = styled.div`
     }
 `
 
-export default () => {
+const Nav: FC = () => {
     return (
-        <Nav>
+        <StyledNav>
             {NavbarData.map(({ path, title }, index) => {
                 return path.at(0) === "/" ? (
                     <Link key={index} to={path}>
                         <HeaderButton>{title}</HeaderButton>
                     </Link>
                 ) : (
-                    <a key={index} target="_blank" href={path}>
+                    <a key={index} target="_blank" href={path} rel="noreferrer">
                         <HeaderButton>{title}</HeaderButton>
                     </a>
                 )
             })}
-        </Nav>
+        </StyledNav>
     )
 }
+
+export default Nav

apps/blog/src/components/PostCard.tsx

@@ -1,20 +1,18 @@
-import styled from "styled-components"
-import { Link } from "react-router-dom"
-
 import { PostData } from "@developomp-site/blog-content/src/types/types"
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
     faBook,
     faCalendar,
     faHourglass,
 } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { Link } from "react-router-dom"
+import styled from "styled-components"
 
+import MainContent from "./MainContent"
 import Tag from "./Tag"
 import TagList from "./TagList"
-import MainContent from "./MainContent"
 
-const PostCard = styled(MainContent)`
+const StyledPostCard = styled(MainContent)`
     box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
     text-align: left;
     margin-bottom: 2rem;
@@ -56,12 +54,12 @@ interface Props {
     postData: PostCardData
 }
 
-export default (props: Props) => {
+const PostCard = (props: Props) => {
     const { postData } = props
     const { content_id, wordCount, date, readTime, title, tags } = postData
 
     return (
-        <PostCard>
+        <StyledPostCard>
             <PostCardContainer to={content_id}>
                 <Title>
                     {title || "No title"}
@@ -94,6 +92,7 @@ export default (props: Props) => {
                         : "unknown length"}
                 </MetaContainer>
             </PostCardContainer>
-        </PostCard>
+        </StyledPostCard>
     )
 }
+export default PostCard

apps/blog/src/components/Sidebar/Sidebar.tsx

@@ -1,15 +1,13 @@
-import { useCallback, useState } from "react"
-import styled from "styled-components"
-import ReactTooltip from "react-tooltip"
-import { isMobile } from "react-device-detect"
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faEllipsisV, faTimes } from "@fortawesome/free-solid-svg-icons"
-
-import SubMenu from "./SubMenu"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { useCallback, useState } from "react"
+import { isMobile } from "react-device-detect"
+import ReactTooltip from "react-tooltip"
+import styled from "styled-components"
 
 import NavbarData from "../../data/NavbarData"
 import { HeaderButtonCSS } from "../Header/HeaderButton"
+import SubMenu from "./SubMenu"
 
 const SidebarOpenButton = styled.div`
     ${HeaderButtonCSS}

apps/blog/src/components/Sidebar/SubMenu.tsx

@@ -2,12 +2,11 @@
  * @file Submenu item for sidebar
  */
 
-import type { Item } from "../../data/NavbarData"
-
 import { useCallback, useState } from "react"
 import { Link } from "react-router-dom"
 import styled, { css } from "styled-components"
 
+import type { Item } from "../../data/NavbarData"
 import button from "../../styles/button"
 
 const sharedStyle = css`

apps/blog/src/components/Tag.tsx

@@ -1,10 +1,9 @@
-import { MouseEvent } from "react"
-import styled from "styled-components"
-
 import { faHashtag } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import type { FC, MouseEvent } from "react"
+import styled from "styled-components"
 
-const Tag = styled.div`
+const StyledTag = styled.div`
     text-align: center;
 
     margin-right: 0.8rem;
@@ -18,10 +17,12 @@ interface Props {
     onClick?: (event: MouseEvent<never>) => void
 }
 
-export default (props: Props) => {
+const Tag: FC<Props> = (props) => {
     return (
-        <Tag onClick={props.onClick || undefined}>
+        <StyledTag onClick={props.onClick || undefined}>
             <FontAwesomeIcon icon={faHashtag} /> &nbsp;{props.text}
-        </Tag>
+        </StyledTag>
     )
 }
+
+export default Tag

apps/blog/src/data/NavbarData.tsx

@@ -1,9 +1,9 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
     faFileLines,
     faUser,
     faUserTie,
 } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 
 // item from sidebar data
 export type Item = {

apps/blog/src/globalContext.tsx

@@ -1,10 +1,9 @@
-import type { Dispatch, ReactNode, ReactElement } from "react"
 import type { Theme } from "@developomp-site/theme"
-
 import darkTheme from "@developomp-site/theme/dist/dark.json"
 import lightTheme from "@developomp-site/theme/dist/light.json"
-import { createContext, useEffect, useReducer } from "react"
 import storage from "local-storage-fallback"
+import type { Dispatch, ReactElement, ReactNode } from "react"
+import { createContext, useEffect, useReducer } from "react"
 
 export type SiteTheme = "dark" | "light"
 

apps/blog/src/index.tsx

@@ -4,9 +4,9 @@ import "@fontsource/source-code-pro"
 
 import { createRoot } from "react-dom/client"
 import { BrowserRouter } from "react-router-dom"
-import { GlobalStore } from "./globalContext"
 
 import App from "./App"
+import { GlobalStore } from "./globalContext"
 
 const container = document.getElementById("root") as HTMLElement
 const root = createRoot(container)

apps/blog/src/pages/Home/Home.tsx

@@ -3,14 +3,13 @@
  * show posts in recent order
  */
 
-import { useCallback, useEffect, useState } from "react"
-import { useTitle, useMeta } from "hoofd"
+import { useMeta, useTitle } from "hoofd"
+import { type FC, useCallback, useEffect, useState } from "react"
 import styled from "styled-components"
 
 import PostCard from "../../components/PostCard"
-import ShowMoreButton from "./ShowMoreButton"
-
 import contentMap from "../../contentMap"
+import ShowMoreButton from "./ShowMoreButton"
 
 const PostList = styled.div`
     flex-direction: column;
@@ -20,7 +19,7 @@ const PostList = styled.div`
     color: ${({ theme }) => theme.theme.color.text.default};
 `
 
-export default () => {
+const Home: FC = () => {
     const [howMany, setHowMany] = useState(5)
     const [postsLength, setPostsLength] = useState(0)
     const [postCards, setPostCards] = useState<JSX.Element[]>([])
@@ -81,3 +80,5 @@ export default () => {
         </>
     )
 }
+
+export default Home

apps/blog/src/pages/Home/ShowMoreButton.tsx

@@ -1,3 +1,4 @@
+import { type FC } from "react"
 import styled from "styled-components"
 
 import buttonStyle from "../../styles/button"
@@ -13,6 +14,8 @@ interface Props {
     action(): void
 }
 
-export default (props: Props) => {
+const ShowMoreButton: FC<Props> = (props) => {
     return <Button onClick={props.action}>Show more posts</Button>
 }
+
+export default ShowMoreButton

apps/blog/src/pages/NotFound.tsx

@@ -1,5 +1,5 @@
+import { useMeta, useTitle } from "hoofd"
 import styled from "styled-components"
-import { useTitle, useMeta } from "hoofd"
 
 import MainContent from "../components/MainContent"
 

apps/blog/src/pages/Page/Meta.tsx

@@ -1,13 +1,12 @@
-import styled from "styled-components"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { PageData } from "@developomp-site/blog-content/src/types/types"
 import {
     faBook,
     faCalendar,
     faFile,
     faHourglass,
 } from "@fortawesome/free-solid-svg-icons"
-
-import { PageData } from "@developomp-site/blog-content/src/types/types"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import styled from "styled-components"
 
 const StyledMetaContainer = styled.div`
     color: ${({ theme }) => theme.theme.color.text.gray};

apps/blog/src/pages/Page/Page.tsx

@@ -1,16 +1,16 @@
-import { useState, useEffect } from "react"
-import { useTitle, useMeta } from "hoofd"
+import type { PageData } from "@developomp-site/blog-content/src/types/types"
+import { useMeta, useTitle } from "hoofd"
+import { useEffect, useState } from "react"
 import { useLocation } from "react-router-dom"
 import styled from "styled-components"
 
+import Loading from "../../components/Loading"
 import MainContent from "../../components/MainContent"
 import PostCard from "../../components/PostCard"
-import Loading from "../../components/Loading"
-import TagList from "../../components/TagList"
 import Tag from "../../components/Tag"
+import TagList from "../../components/TagList"
+import contentMap from "../../contentMap"
 import NotFound from "../NotFound"
-
-import SeriesControlButtons from "./SeriesControlButtons"
 import {
     categorizePageType,
     fetchContent,
@@ -18,12 +18,9 @@ import {
     parsePageData,
 } from "./helper"
 import Meta from "./Meta"
+import SeriesControlButtons from "./SeriesControlButtons"
 import Toc from "./Toc"
 
-import type { PageData } from "@developomp-site/blog-content/src/types/types"
-
-import contentMap from "../../contentMap"
-
 const StyledTitle = styled.h1`
     margin-bottom: 1rem;
 

apps/blog/src/pages/Page/SeriesControlButtons.tsx

@@ -1,12 +1,11 @@
-import styled from "styled-components"
-import { Link } from "react-router-dom"
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
     faArrowLeft,
     faArrowRight,
     faListUl,
 } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { Link } from "react-router-dom"
+import styled from "styled-components"
 
 import buttonStyle from "../../styles/button"
 

apps/blog/src/pages/Page/Toc.tsx

@@ -1,9 +1,8 @@
+import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import storage from "local-storage-fallback"
 import { useEffect, useState } from "react"
 import { Collapse } from "react-collapse"
-import storage from "local-storage-fallback"
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons"
 import styled from "styled-components"
 
 const StyledTocToggleButton = styled.button`

apps/blog/src/pages/Page/helper.ts

@@ -1,5 +1,4 @@
 import portfolio from "@developomp-site/blog-content/dist/portfolio.json"
-
 import type { PageData } from "@developomp-site/blog-content/src/types/types"
 
 import contentMap from "../../contentMap"

apps/blog/src/pages/Search/Search.tsx

@@ -1,26 +1,22 @@
-import { useCallback, useEffect, useState } from "react"
-import styled from "styled-components"
-import { useSearchParams } from "react-router-dom"
-import { useTitle, useMeta } from "hoofd"
-import { Range } from "react-date-range"
-
-import elasticlunr from "elasticlunr" // search engine
-
-import searchData from "@developomp-site/blog-content/dist/search.json"
-
-import Loading from "../../components/Loading"
-import PostCard from "../../components/PostCard"
-import MainContent from "../../components/MainContent"
-
-import SearchBar from "./SearchBar"
-import TagSelect, { TagsData } from "./TagSelect"
-import { ClearDateButton, DateRangeControl, StyledDateRange } from "./DateRange"
-
-import contentMap from "../../contentMap"
-
 import "react-date-range/dist/styles.css"
 import "react-date-range/dist/theme/default.css"
 
+import searchData from "@developomp-site/blog-content/dist/search.json"
+import elasticlunr from "elasticlunr" // search engine
+import { useMeta, useTitle } from "hoofd"
+import { useCallback, useEffect, useState } from "react"
+import { Range } from "react-date-range"
+import { useSearchParams } from "react-router-dom"
+import styled from "styled-components"
+
+import Loading from "../../components/Loading"
+import MainContent from "../../components/MainContent"
+import PostCard from "../../components/PostCard"
+import contentMap from "../../contentMap"
+import { ClearDateButton, DateRangeControl, StyledDateRange } from "./DateRange"
+import SearchBar from "./SearchBar"
+import TagSelect, { TagsData } from "./TagSelect"
+
 const searchIndex = elasticlunr.Index.load(searchData as never)
 
 export interface SearchParams {

apps/blog/src/pages/Search/TagSelect.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react"
-import styled from "styled-components"
 import Select from "react-select"
+import styled from "styled-components"
 
 import contentMap from "../../contentMap"
 import { globalContext } from "../../globalContext"

apps/blog/src/styles/globalStyle.ts

@@ -1,17 +1,18 @@
-import { createGlobalStyle, css } from "styled-components"
 import "katex/dist/katex.min.css"
 
+import { createGlobalStyle, css } from "styled-components"
+
 import anchorCSS from "./anchor"
-import scrollbarCSS from "./scrollbar"
+import blockquoteCSS from "./blockQuote"
 import checkbox from "./checkbox"
 import codeCSS from "./code"
-import kbdCSS from "./kbd"
-import tableCSS from "./table"
-import blockquoteCSS from "./blockQuote"
-import hrCSS from "./hr"
 import headerCSS from "./header"
-import markCSS from "./mark"
+import hrCSS from "./hr"
 import katexCSS from "./katex"
+import kbdCSS from "./kbd"
+import markCSS from "./mark"
+import scrollbarCSS from "./scrollbar"
+import tableCSS from "./table"
 
 const globalCSS = css`
     body {

apps/blog/types/styled-components.ts

@@ -1,5 +1,7 @@
 import "styled-components"
+
 import type { Theme } from "@developomp-site/theme"
+
 import { SiteTheme } from "../src/globalContext"
 
 declare module "styled-components" {