chore: change eslint & prettier config

.gitignore

@@ -8,10 +8,10 @@ node_modules
 *.log
 .next
 dist
+build
 dist-ssr
 *.local
 .env
 .cache
-server/dist
-public/dist
 storybook-static/
+.svelte-kit/

.prettierrc

@@ -1,4 +1,19 @@
 {
-	"useTabs": true,
+    "useTabs": false,
-	"semi": false
+    "tabWidth": 4,
+    "semi": false,
+    "overrides": [
+        {
+            "files": "*.md",
+            "options": {
+                "tabWidth": 2
+            }
+        },
+        {
+            "files": ".firebaserc",
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
 }

apps/blog/src/App.tsx

@@ -62,7 +62,10 @@ export default function App() {
         <ThemeProvider
             theme={{
                 currentTheme: globalState.currentTheme,
-				theme: globalState.currentTheme === "dark" ? darkTheme : lightTheme,
+                theme:
+                    globalState.currentTheme === "dark"
+                        ? darkTheme
+                        : lightTheme,
             }}
         >
             <Helmet>

apps/blog/src/components/Card.tsx

@@ -3,7 +3,9 @@ import styled, { css } from "styled-components"
 export const cardCSS = css`
     margin: auto;
     background-color: ${({ theme }) =>
-		theme.currentTheme ? theme.theme.component.card.color.background : "white"};
+        theme.currentTheme
+            ? theme.theme.component.card.color.background
+            : "white"};
     padding: 2rem;
     border-radius: 6px;
     box-shadow: ${({ theme }) =>

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

@@ -30,7 +30,9 @@ const Container = styled.div`
     /* account for 20px scrollbar width */
     @media only screen and (min-width: calc(${({ theme }) =>
             theme.theme.maxDisplayWidth.desktop} + 20px)) {
-		width: calc(${({ theme }) => theme.theme.maxDisplayWidth.desktop} - 20px);
+        width: calc(
+            ${({ theme }) => theme.theme.maxDisplayWidth.desktop} - 20px
+        );
     }
 `
 

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

@@ -25,7 +25,9 @@ const ReadProgress = () => {
 
     // https://stackoverflow.com/a/8028584/12979111
     const scrollHandler = useCallback(() => {
-		setScroll(((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100)
+        setScroll(
+            ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100
+        )
     }, [])
 
     useEffect(() => {

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

@@ -77,9 +77,16 @@ const Sidebar = () => {
 
     return (
         <>
-			<StyledOverlay isSidebarOpen={isSidebarOpen} onClick={toggleSidebar} />
+            <StyledOverlay
+                isSidebarOpen={isSidebarOpen}
+                onClick={toggleSidebar}
+            />
 
-			<SidebarOpenButton data-tip data-for="sidebar" onClick={toggleSidebar}>
+            <SidebarOpenButton
+                data-tip
+                data-for="sidebar"
+                onClick={toggleSidebar}
+            >
                 <FontAwesomeIcon icon={faEllipsisV}></FontAwesomeIcon>
                 {!isMobile && (
                     <ReactTooltip id="sidebar" type="dark" effect="solid">
@@ -99,7 +106,13 @@ const Sidebar = () => {
                     {/* sidebar items */}
 
                     {NavbarData.map((item, index) => {
-						return <SubMenu onClick={toggleSidebar} item={item} key={index} />
+                        return (
+                            <SubMenu
+                                onClick={toggleSidebar}
+                                item={item}
+                                key={index}
+                            />
+                        )
                     })}
                 </SidebarWrap>
             </SidebarNav>

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

@@ -68,7 +68,11 @@ const SubMenu = ({ item, onClick }: Props) => {
     }
 
     return (
-		<SidebarAnchor target="_blank" href={path} onClick={handleSidebarLinkClick}>
+        <SidebarAnchor
+            target="_blank"
+            href={path}
+            onClick={handleSidebarLinkClick}
+        >
             <div>
                 {icon}
                 <SidebarLabel>{title}</SidebarLabel>

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

@@ -22,7 +22,8 @@ const Meta = (props: { fetchedPage: PageData }) => {
                     <FontAwesomeIcon icon={faFile} />
                     &nbsp;&nbsp;
                     {props.fetchedPage.length} post
-					{props.fetchedPage.length > 1 && "s"} &nbsp;&nbsp;&nbsp;&nbsp;
+                    {props.fetchedPage.length > 1 && "s"}{" "}
+                    &nbsp;&nbsp;&nbsp;&nbsp;
                 </>
             )}
             {/* date */}

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

@@ -99,9 +99,11 @@ export default function Page() {
                     <br />
 
                     {/* Post metadata */}
-					{[PageType.POST, PageType.SERIES, PageType.SERIES_HOME].includes(
+                    {[
-						pageType
+                        PageType.POST,
-					) && <Meta fetchedPage={pageData} />}
+                        PageType.SERIES,
+                        PageType.SERIES_HOME,
+                    ].includes(pageType) && <Meta fetchedPage={pageData} />}
                 </small>
 
                 <hr />

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

@@ -42,7 +42,9 @@ const Toc = (props: { data?: string }) => {
             >
                 <strong>
                     Table of Contents
-					<FontAwesomeIcon icon={isTocOpened ? faCaretUp : faCaretDown} />
+                    <FontAwesomeIcon
+                        icon={isTocOpened ? faCaretUp : faCaretDown}
+                    />
                 </strong>
             </StyledTocToggleButton>
             <StyledCollapseContainer>

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

@@ -141,7 +141,9 @@ export function parsePageData(
 
         case PageType.PORTFOLIO_PROJECT: {
             const data =
-				portfolio.projects[content_id as keyof typeof portfolio.projects]
+                portfolio.projects[
+                    content_id as keyof typeof portfolio.projects
+                ]
 
             pageData.content = fetched_content.content
             pageData.toc = fetched_content.toc

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

@@ -142,11 +142,15 @@ const Search = () => {
         for (const [key, value] of URLSearchParams.entries()) {
             switch (key) {
                 case "date_from":
-					setDateRange((prev) => [{ ...prev[0], startDate: new Date(value) }])
+                    setDateRange((prev) => [
+                        { ...prev[0], startDate: new Date(value) },
+                    ])
                     break
 
                 case "date_to":
-					setDateRange((prev) => [{ ...prev[0], endDate: new Date(value) }])
+                    setDateRange((prev) => [
+                        { ...prev[0], endDate: new Date(value) },
+                    ])
                     break
 
                 case "tags":
@@ -250,9 +254,13 @@ const Search = () => {
                             value={searchInput}
                             autoComplete="off"
                             placeholder="Search"
-							onChange={(event) => setSearchInput(event.target.value)}
+                            onChange={(event) =>
+                                setSearchInput(event.target.value)
+                            }
                             onKeyPress={(event) => {
-								event.key === "Enter" && searchInput && doSearch()
+                                event.key === "Enter" &&
+                                    searchInput &&
+                                    doSearch()
                             }}
                         />
                         {postCards.length} result{postCards.length > 1 && "s"}

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

@@ -14,7 +14,8 @@ export default styled.input`
         props.theme.theme.component.input.color.background.default};
 
     ::placeholder {
-		color: ${(props) => props.theme.theme.component.input.color.placeHolder};
+        color: ${(props) =>
+            props.theme.theme.component.input.color.placeHolder};
         opacity: 1;
     }
 

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

@@ -38,7 +38,8 @@ const TagSelect = (props: TagSelectProps) => {
                     ...reactSelectTheme,
                     colors: {
                         ...reactSelectTheme.colors,
-						neutral0: theme.component.input.color.background.default,
+                        neutral0:
+                            theme.component.input.color.background.default,
                         neutral5: "hsl(0, 0%, 20%)",
                         neutral10: "hsl(0, 0%, 30%)",
                         neutral20: "hsl(0, 0%, 40%)",
@@ -56,16 +57,20 @@ const TagSelect = (props: TagSelectProps) => {
                 styles={{
                     option: (styles) => ({
                         ...styles,
-						backgroundColor: theme.component.input.color.background.default,
+                        backgroundColor:
+                            theme.component.input.color.background.default,
                         color: theme.color.text.default,
                         cursor: "pointer",
                         ":hover": {
-							backgroundColor: theme.component.input.color.background.itemHover,
+                            backgroundColor:
+                                theme.component.input.color.background
+                                    .itemHover,
                         },
                     }),
                     control: (styles) => ({
                         ...styles,
-						backgroundColor: theme.component.input.color.background.default,
+                        backgroundColor:
+                            theme.component.input.color.background.default,
                         border: `1px solid ${theme.component.input.color.border.default}`,
                         ":hover": {
                             border: `1px solid ${theme.component.input.color.border.hover}`,
@@ -77,7 +82,8 @@ const TagSelect = (props: TagSelectProps) => {
                     multiValue: (styles) => ({
                         ...styles,
                         color: theme.color.text.default,
-						backgroundColor: theme.component.ui.color.background.default,
+                        backgroundColor:
+                            theme.component.ui.color.background.default,
                         borderRadius: "10px",
                     }),
                     multiValueLabel: (styles) => ({

apps/blog/src/styles/anchor.ts

@@ -11,7 +11,8 @@ export default css`
         }
 
         &:active {
-			color: ${(props) => props.theme.theme.component.anchor.color.active};
+            color: ${(props) =>
+                props.theme.theme.component.anchor.color.active};
         }
     }
 

apps/blog/src/styles/kbd.ts

@@ -6,7 +6,8 @@ export default css`
         margin: 0px 0.1em;
         padding: 0.1em 0.6em;
         border-radius: 3px;
-		border: 1px solid ${({ theme }) => theme.theme.component.kbd.color.border};
+        border: 1px solid
+            ${({ theme }) => theme.theme.component.kbd.color.border};
         color: ${({ theme }) => theme.theme.component.kbd.color.text};
         line-height: 1.4;
         font-size: 13.5px;

apps/blog/src/styles/scrollbar.ts

@@ -8,14 +8,16 @@ export default css`
     body::-webkit-scrollbar-track {
         border-radius: ${(props) =>
             props.theme.theme.component.scrollbar.borderRadius};
-		background: ${(props) => props.theme.theme.component.scrollbar.color.track};
+        background: ${(props) =>
+            props.theme.theme.component.scrollbar.color.track};
         box-shadow: inset 0 0 5px rgb(0 0 0 / 10%);
     }
 
     body::-webkit-scrollbar-thumb {
         border-radius: ${(props) =>
             props.theme.theme.component.scrollbar.borderRadius};
-		background: ${(props) => props.theme.theme.component.scrollbar.color.thumb};
+        background: ${(props) =>
+            props.theme.theme.component.scrollbar.color.thumb};
         box-shadow: inset 0 0 10px rgb(0 0 0 / 20%);
     }
 `

apps/blog/src/theme.tsx

@@ -15,7 +15,8 @@ const setLight = () => {
 const storedTheme = localStorage.getItem("theme")
 
 const prefersDark =
-	window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
 
 const defaultDark =
     storedTheme === "dark" || (storedTheme === null && prefersDark)

packages/blog-content/src/recursiveParse/parsePost.ts

@@ -8,8 +8,13 @@ import { DataToPass } from "."
 import { PostData } from "../types/types"
 
 export default function parsePost(data: DataToPass): void {
-	const { urlPath, markdownRaw, markdownData, humanizedDuration, totalWords } =
+    const {
-		data
+        urlPath,
+        markdownRaw,
+        markdownData,
+        humanizedDuration,
+        totalWords,
+    } = data
 
     const postData: PostData = {
         title: markdownData.title as string,

packages/blog-content/src/recursiveParse/parseSeries.ts

@@ -115,7 +115,8 @@ export default function parseSeries(data: DataToPass): void {
                     )
                 )
 
-				if (isNaN(index)) throw Error(`Invalid series index at: ${path}`)
+                if (isNaN(index))
+                    throw Error(`Invalid series index at: ${path}`)
 
                 const itemToPush = {
                     index: index,

packages/blog-content/src/util.ts

@@ -21,7 +21,8 @@ export function path2URL(pathToConvert: string): string {
  */
 export function path2FileOrFolderName(inputPath: string): string {
     // remove trailing slash
-	if (inputPath[-1] == "/") inputPath = inputPath.slice(0, inputPath.length - 1)
+    if (inputPath[-1] == "/")
+        inputPath = inputPath.slice(0, inputPath.length - 1)
 
     // get the last section
     return inputPath.slice(inputPath.lastIndexOf("/") + 1)

packages/eslint-config/index.js

@@ -1,17 +1,20 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
+    root: true,
     extends: [
-		"plugin:@typescript-eslint/recommended",
-		"plugin:json/recommended",
         "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
         "prettier",
         "turbo",
     ],
     parser: "@typescript-eslint/parser",
-	plugins: ["@typescript-eslint"],
+    plugins: ["@typescript-eslint", "simple-import-sort"],
     rules: {
-		"@next/next/no-html-link-for-pages": "off",
+        // import related
-
+        "simple-import-sort/imports": "error",
-		"@typescript-eslint/explicit-module-boundary-types": "off",
+        "simple-import-sort/exports": "error",
-		"@typescript-eslint/no-empty-interface": "off",
+        "import/first": "error",
+        "import/newline-after-import": "error",
+        "import/no-duplicates": "error",
     },
 }

packages/eslint-config/package.json

@@ -6,11 +6,13 @@
         "clean": "rm -rf node_modules"
     },
     "devDependencies": {
-		"@typescript-eslint/eslint-plugin": "^5.46.0",
+        "@typescript-eslint/eslint-plugin": "^5.60.1",
-		"@typescript-eslint/parser": "^5.46.0",
+        "@typescript-eslint/parser": "^5.60.1",
-		"eslint-config-next": "^12.3.4",
+        "eslint": "^8.43.0",
-		"eslint-config-prettier": "^8.5.0",
+        "eslint-config-prettier": "^8.8.0",
         "eslint-config-turbo": "latest",
-		"eslint-plugin-json": "^3.1.0"
+        "eslint-plugin-json": "^3.1.0",
+        "eslint-plugin-simple-import-sort": "^10.0.0",
+        "typescript": "^5.1.6"
     }
 }

packages/theme/src/dark/index.ts

@@ -145,23 +145,3 @@ export default {
         },
     },
 } as Theme
-
-/*
-	dark: {
-		backgroundColor0: "#18181b",
-		backgroundColor1: "#36393F",
-		backgroundColor2: "#2F3136",
-		color0: "#FFFFFF",
-		color1: "#EEEEEE",
-		color2: "#CCC",
-	}
-
-	light: {
-		backgroundColor0: "#FFFFFF",
-		backgroundColor1: "#F7F7F7",
-		backgroundColor2: "#DDDDDD",
-		color0: "#000000",
-		color1: "#111111",
-		color2: "#555",
-	}
-*/

packages/utils/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
     root: true,
     extends: ["developomp-site"],
-};
+}