style: format codebase

src/components/404LinkCorrection/index.tsx

@@ -85,7 +85,7 @@ export const PossibleCorrections: FC<IPossibleCorrections> = ({
 
   // filter based on distance
   // levenshtein distance of x means how 'off' it was
-  const displayArray = linkArray.filter(value => {
+  const displayArray = linkArray.filter((value) => {
     return (
       levenshteinDistance(
         search.toLowerCase(),

src/components/ArchivesSidebar/index.tsx

@@ -40,14 +40,14 @@ function Tree({ item }: { item: IFileOrFolder }) {
   )
 }
 
-export const ArchivesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
+export const ArchivesSidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
   const archives = useStaticQuery<IAllArchivesQuery>(ALL_ARCHIVES)
   const tree = useBuildTree(archives, "/archives")
   const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree)
 
   return (
     <Sidebar {...props}>
-      {sortedTree.map(node => (
+      {sortedTree.map((node) => (
         <Tree item={node} />
       ))}
     </Sidebar>

src/components/ArchivesSidebar/styles.tsx

@@ -6,13 +6,13 @@ export const PageLink = styled(Link)`
   display: block;
   padding: 4px 0 0;
   margin-bottom: 4px;
-  color: ${props => props.theme.sidebar.foreground};
+  color: ${(props) => props.theme.sidebar.foreground};
   align-self: flex-start;
   text-decoration: none;
   border-bottom: 2px solid transparent;
 
   &:hover {
-    border-color: ${props =>
+    border-color: ${(props) =>
       transparentize(0.7, props.theme.sidebar.foreground)};
   }
 
@@ -22,10 +22,10 @@ export const PageLink = styled(Link)`
 
   &.active {
     font-weight: 700;
-    color: ${props => props.theme.sidebar.active};
+    color: ${(props) => props.theme.sidebar.active};
   }
 
   &.active:hover {
-    border-color: ${props => transparentize(0.7, props.theme.sidebar.active)};
+    border-color: ${(props) => transparentize(0.7, props.theme.sidebar.active)};
   }
 `

src/components/Breadcrumb/index.tsx

@@ -53,7 +53,7 @@ export function Breadcrumb({ relativePath, basePath }: IBreadcrumbProps) {
         <ChevronUp />
       </SC.LinkWrapper>
 
-      {breadcrumbItems.map(item => {
+      {breadcrumbItems.map((item) => {
         if (item.type === "folder") {
           foldersDepth++
           if (foldersDepth > 1) {

src/components/Breadcrumb/styles.tsx

@@ -25,12 +25,12 @@ export const LinkWrapper = styled.div`
   }
 
   svg path {
-    fill: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
+    fill: ${(props) => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
   }
 `
 
 export const StyledLink = styled(Link)`
-  color: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
+  color: ${(props) => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
   cursor: pointer;
   font-weight: 700;
   text-decoration: underline;

src/components/DiscordButton/styles.tsx

@@ -10,7 +10,7 @@ export const DiscordButtonWrapper = styled.a`
   font-weight: 700;
   text-decoration: none;
   text-transform: uppercase;
-  background: ${props => props.theme.discord.base};
+  background: ${(props) => props.theme.discord.base};
   color: #fff;
   padding: 18px 28px;
   border-radius: 5px;
@@ -19,7 +19,7 @@ export const DiscordButtonWrapper = styled.a`
   box-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
 
   &:hover {
-    background: ${props => props.theme.discord.darker};
+    background: ${(props) => props.theme.discord.darker};
   }
 `
 

src/components/Footer/styles.tsx

@@ -6,7 +6,7 @@ export const FooterWrapper = styled.footer`
   & a {
     display: inline;
     font-weight: 700;
-    color: ${props => props.theme.main.foreground};
+    color: ${(props) => props.theme.main.foreground};
     text-decoration: none;
     position: relative;
 

src/components/Header/index.tsx

@@ -49,7 +49,7 @@ export const Header: React.FC<IHeaderProps> = ({
                 {authors.length} contributor{authors.length > 1 && "s"}
                 <SC.Popover>
                   {authors
-                    .map(author => `${author.name}#${author.hash}`)
+                    .map((author) => `${author.name}#${author.hash}`)
                     .join(", ")}
                 </SC.Popover>
               </SC.PopoverToggler>

src/components/Header/styles.tsx

@@ -15,7 +15,7 @@ export const Meta = styled.div`
   display: flex;
   white-space: nowrap;
   align-items: center;
-  color: ${props => transparentize(0.1, props.theme.main.foreground)};
+  color: ${(props) => transparentize(0.1, props.theme.main.foreground)};
 
   & + &::before {
     content: "•";
@@ -41,7 +41,7 @@ export const Popover = styled.div`
   padding: 8px;
   border-radius: 4px;
   backdrop-filter: blur(14px);
-  background: ${props => transparentize(0.3, props.theme.main.background)};
+  background: ${(props) => transparentize(0.3, props.theme.main.background)};
 
   &::before {
     position: absolute;
@@ -54,7 +54,7 @@ export const Popover = styled.div`
     border-style: solid;
     border-width: 0 3.5px 4px 3.5px;
     border-color: transparent transparent
-      ${props => transparentize(0.3, props.theme.main.background)} transparent;
+      ${(props) => transparentize(0.3, props.theme.main.background)} transparent;
   }
 `
 
@@ -63,7 +63,7 @@ export const PopoverToggler = styled.div`
   align-items: center;
   position: relative;
   border-bottom: 1px dashed
-    ${props => transparentize(0.1, props.theme.main.foreground)};
+    ${(props) => transparentize(0.1, props.theme.main.foreground)};
 
   &:hover ${Popover} {
     display: block;

src/components/HeaderBarebone/index.tsx

@@ -10,7 +10,7 @@ interface IHeaderBareboneProps {
   className?: string
 }
 
-export const HeaderBarebone: React.FC<IHeaderBareboneProps> = props => {
+export const HeaderBarebone: React.FC<IHeaderBareboneProps> = (props) => {
   return (
     <SC.HeaderWrapper className={props.className}>
       <SC.BackgroundWrapper>

src/components/HeaderBarebone/styles.tsx

@@ -40,7 +40,7 @@ export const BackgroundWrapper = styled.div`
 
   @media screen and (max-width: 767px) {
     height: calc(100% - 67px);
-    background: ${props => darken(0.2, props.theme.main.background)};
+    background: ${(props) => darken(0.2, props.theme.main.background)};
   }
 `
 
@@ -57,7 +57,7 @@ export const StyledCircles = styled(Circles)`
 `
 
 export const StyledWavesTop = styled(WavesTop)`
-  opacity: ${props => (props.theme.name === "dark" ? 0.8 : 0.2)};
+  opacity: ${(props) => (props.theme.name === "dark" ? 0.8 : 0.2)};
   top: -10%;
   transform: scaleX(-1);
 
@@ -67,7 +67,7 @@ export const StyledWavesTop = styled(WavesTop)`
 `
 
 export const StyledWavesBottom = styled(WavesBottom)`
-  opacity: ${props => (props.theme.name === "dark" ? 0.8 : 0.2)};
+  opacity: ${(props) => (props.theme.name === "dark" ? 0.8 : 0.2)};
   bottom: -30%;
   transform: scaleX(-1);
 
@@ -82,7 +82,7 @@ export const Box = styled.div`
   position: absolute;
   bottom: 40px;
   margin-left: -16px;
-  background: ${props => transparentize(0.3, props.theme.main.background)};
+  background: ${(props) => transparentize(0.3, props.theme.main.background)};
   padding: 16px;
   backdrop-filter: blur(14px);
   max-width: 650px;

src/components/Home/styles.tsx

@@ -10,7 +10,7 @@ export const HomeWrapper = styled.header`
   width: 100%;
   position: relative;
   min-height: 100vh;
-  background: ${props => props.theme.main.background};
+  background: ${(props) => props.theme.main.background};
   overflow: hidden;
 `
 

src/components/Link/styles.tsx

@@ -5,7 +5,7 @@ const linkStyle = css`
   display: inline-block;
   font-weight: 700;
   color: #fff;
-  color: ${props => props.theme.main.foreground};
+  color: ${(props) => props.theme.main.foreground};
   font-weight: 700;
   text-decoration: none;
   position: relative;

src/components/Markdown/styles.tsx

@@ -73,11 +73,11 @@ export const MarkdownWrapper = styled.div`
   h4 .anchor svg,
   h5 .anchor svg,
   h6 .anchor svg {
-    fill: ${props => props.theme.main.foreground};
+    fill: ${(props) => props.theme.main.foreground};
   }
 
   code {
-    background: ${props => props.theme.code.background};
+    background: ${(props) => props.theme.code.background};
     padding: 4px 8px;
     display: inline;
     border-radius: 3px;
@@ -88,7 +88,7 @@ export const MarkdownWrapper = styled.div`
   :not(pre) > code[class*="language-"],
   pre[class*="language-"] {
     overflow-x: auto;
-    background: ${props => props.theme.code.background};
+    background: ${(props) => props.theme.code.background};
   }
 
   pre > code[class*="language-"] {
@@ -122,7 +122,7 @@ export const MarkdownWrapper = styled.div`
   }
 
   blockquote {
-    border-left: 2px solid ${props => props.theme.main.foreground};
+    border-left: 2px solid ${(props) => props.theme.main.foreground};
     margin-top: ${BASE_LINE_HEIGHT}px;
     margin-bottom: ${BASE_LINE_HEIGHT}px;
     margin-right: ${BASE_LINE_HEIGHT * 2}px;
@@ -134,7 +134,7 @@ export const MarkdownWrapper = styled.div`
     display: inline-block;
     position: relative;
     font-weight: 700;
-    color: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
+    color: ${(props) => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
     text-decoration: none;
     word-break: break-word;
     cursor: pointer;

src/components/MobileHeader/styles.tsx

@@ -5,7 +5,7 @@ import Logo from "../../images/tph-logo.svg"
 
 export const MobileHeaderWrapper = styled.div`
   z-index: 50;
-  background: ${props => transparentize(0.6, props.theme.main.background)};
+  background: ${(props) => transparentize(0.6, props.theme.main.background)};
   backdrop-filter: blur(14px);
   position: fixed;
   top: 0;
@@ -52,7 +52,7 @@ export const Burger = styled.div`
     content: "";
     height: 2px;
     width: 16px;
-    background: ${props => props.theme.main.foreground};
+    background: ${(props) => props.theme.main.foreground};
     margin: 0 auto;
   }
 

src/components/PageContent/index.tsx

@@ -36,7 +36,7 @@ export const PageContent: FC<IPageContentProps> = ({
         {recommendedReading && (
           <SC.RecommendedReading>
             <SC.SidebarHeader>Recommended reading</SC.SidebarHeader>
-            {recommendedReading.map(item => {
+            {recommendedReading.map((item) => {
               return <PageSidebarLink key={item} href={item} type="internal" />
             })}
           </SC.RecommendedReading>
@@ -45,8 +45,15 @@ export const PageContent: FC<IPageContentProps> = ({
         {externalResources && (
           <SC.ExternalResources>
             <SC.SidebarHeader>External Resources</SC.SidebarHeader>
-            {externalResources.map(item => {
-              return <PageSidebarLink key={item.href} href={item.href} text={item.text} type="external" />
+            {externalResources.map((item) => {
+              return (
+                <PageSidebarLink
+                  key={item.href}
+                  href={item.href}
+                  text={item.text}
+                  type="external"
+                />
+              )
             })}
           </SC.ExternalResources>
         )}

src/components/PageContent/styles.tsx

@@ -16,8 +16,8 @@ export const Content = styled.div`
 export const Sidebar = styled.div`
   width: 240px;
   flex: 0 0 240px;
-  border-left: 1px solid ${props => darken(0.1, props.theme.main.background)};
-  color: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
+  border-left: 1px solid ${(props) => darken(0.1, props.theme.main.background)};
+  color: ${(props) => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
   margin: 64px 0;
   padding: 0 32px;
   position: sticky;

src/components/PageSidebarLink/styles.tsx

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components"
 import { Link } from "gatsby"
 
 const extraLink = css`
-  color: ${props => props.theme.main.foreground};
+  color: ${(props) => props.theme.main.foreground};
   text-decoration: none;
   word-break: break-word;
 

src/components/ResourcesList/index.tsx

@@ -34,7 +34,7 @@ function plantTree(item: IFileOrFolder, index?: number) {
 
     return (
       <SC.PageLink key={item.title} to={path}>
-        {cleanedUpPath.map(node => (
+        {cleanedUpPath.map((node) => (
           // TODO: use helper to format path
           <SC.NodePart key={node}>{humanize(node)}</SC.NodePart>
         ))}
@@ -49,7 +49,7 @@ const Language = memo(({ item }: { item: IFolder; index: number }) => {
   return (
     <SC.TreeWrapper>
       <SC.LanguageLabel>{humanize(item.title)}</SC.LanguageLabel>
-      <SC.Children>{item.children.map(node => plantTree(node))}</SC.Children>
+      <SC.Children>{item.children.map((node) => plantTree(node))}</SC.Children>
     </SC.TreeWrapper>
   )
 })
@@ -58,7 +58,7 @@ interface IResourcesList extends HTMLAttributes<HTMLDivElement> {
   relativeDirectory?: string
 }
 
-export const ResourcesList: FC<IResourcesList> = props => {
+export const ResourcesList: FC<IResourcesList> = (props) => {
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
 
   const filteredResources = {

src/components/ResourcesList/styles.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components"
 
 export const ResourcesListWrapper = styled.div`
   box-sizing: border-box;
-  color: ${props => props.theme.main.foreground};
+  color: ${(props) => props.theme.main.foreground};
 `
 
 export const Children = styled.div`
@@ -28,7 +28,7 @@ export const Label = styled.div`
   align-self: flex-start;
 
   &:hover {
-    border-color: ${props =>
+    border-color: ${(props) =>
       transparentize(0.7, props.theme.sidebar.foreground)};
   }
 
@@ -47,7 +47,7 @@ export const LanguageLabel = styled.div`
   box-sizing: border-box;
   padding: 4px 15px 4px 0;
   font-weight: 700;
-  color: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
+  color: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
 
   svg {
     margin-left: auto;
@@ -55,7 +55,7 @@ export const LanguageLabel = styled.div`
     transition: transform 0.3s;
 
     path {
-      fill: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
+      fill: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
     }
   }
 `
@@ -72,20 +72,20 @@ export const TreeWrapper = styled.div`
   }
 
   & > ${Label} svg {
-    fill: ${props => props.theme.sidebar.foreground};
+    fill: ${(props) => props.theme.sidebar.foreground};
   }
 `
 
 export const PageLink = styled(Link)`
   display: block;
   padding: 2px 0;
-  color: ${props => props.theme.sidebar.foreground};
+  color: ${(props) => props.theme.sidebar.foreground};
   align-self: flex-start;
   text-decoration: none;
   border-bottom: 1px solid transparent;
 
   &:hover {
-    border-color: ${props =>
+    border-color: ${(props) =>
       transparentize(0.7, props.theme.sidebar.foreground)};
   }
 

src/components/ResourcesSidebar/index.tsx

@@ -30,7 +30,7 @@ const ALL_RESOURCES = graphql`
 `
 
 const childrenSort = sortWith<IFileOrFolder>([
-  descend(f => {
+  descend((f) => {
     if (f.title === "intro") {
       return 1
     }
@@ -87,7 +87,7 @@ function Folder({ item }: { item: IFolder }) {
   })
 
   function toggleCollapse() {
-    setCollapse(prevState => !prevState)
+    setCollapse((prevState) => !prevState)
   }
 
   const sortedChildren = childrenSort(item.children)
@@ -98,8 +98,8 @@ function Folder({ item }: { item: IFolder }) {
         <TriangleDown /> {humanize(item.title)}
       </SC.Label>
       <SC.Children>
-        {sortedChildren.map(node => (
-          <Tree key={node.title + '-tree'} item={node} />
+        {sortedChildren.map((node) => (
+          <Tree key={node.title + "-tree"} item={node} />
         ))}
       </SC.Children>
     </SC.TreeWrapper>
@@ -119,8 +119,8 @@ const FirstLevelFolder = memo(({ item }: { item: IFolder }) => {
     <SC.TreeWrapper className="firstLevel">
       <SC.FirstLabel>{humanize(item.title)}</SC.FirstLabel>
       <SC.Children>
-        {sortedChildren.map(node => (
-          <Tree key={node.title + '-tree'} item={node} />
+        {sortedChildren.map((node) => (
+          <Tree key={node.title + "-tree"} item={node} />
         ))}
       </SC.Children>
     </SC.TreeWrapper>
@@ -135,7 +135,7 @@ const LanguageList: FC<{
 
   return (
     <SC.StyledLanguageList>
-      {items.map(item => (
+      {items.map((item) => (
         <SC.Language
           key={item.title}
           className={current === item.title ? "active" : ""}
@@ -165,7 +165,7 @@ const AllLanguages: FC<{
   return (
     <SC.ExpandLanguages>
       <SC.ExpandLanguagesHeader
-        onClick={() => setExpanded(prevState => !prevState)}
+        onClick={() => setExpanded((prevState) => !prevState)}
       >
         Expand languages {expanded ? <SC.CollapseIcon /> : <SC.ExpandIcon />}
       </SC.ExpandLanguagesHeader>
@@ -174,7 +174,7 @@ const AllLanguages: FC<{
   )
 }
 
-export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
+export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
   const [expandedLanguages, setExpandedLanguages] = useState(false)
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
   const languages = useBuildTree(resources, "/resources")
@@ -184,7 +184,7 @@ export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
     languages
   )
 
-  const currentLanguage = sortedLanguages.find(lang => lang.title === current)
+  const currentLanguage = sortedLanguages.find((lang) => lang.title === current)
 
   return (
     <Sidebar {...props}>

src/components/ResourcesSidebar/styles.tsx

@@ -30,7 +30,7 @@ export const Label = styled.div`
   align-self: flex-start;
 
   &:hover {
-    border-color: ${props =>
+    border-color: ${(props) =>
       transparentize(0.7, props.theme.sidebar.foreground)};
   }
 
@@ -50,14 +50,14 @@ export const FirstLabel = styled.div`
   box-sizing: border-box;
   padding: 12px 15px 12px 0;
   font-weight: 700;
-  color: ${props => props.theme.sidebar.foreground};
+  color: ${(props) => props.theme.sidebar.foreground};
   cursor: pointer;
 
   &:hover {
-    color: ${props => props.theme.sidebar.foreground};
+    color: ${(props) => props.theme.sidebar.foreground};
 
     svg path {
-      fill: ${props => props.theme.sidebar.foreground};
+      fill: ${(props) => props.theme.sidebar.foreground};
     }
   }
 
@@ -66,7 +66,7 @@ export const FirstLabel = styled.div`
     transform: rotate(90deg);
 
     path {
-      fill: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
+      fill: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
     }
   }
 `
@@ -82,12 +82,12 @@ export const TreeWrapper = styled.div<{ collapsed?: boolean }>`
   }
 
   ${Children} {
-    display: ${props => (props.collapsed ? "none" : "flex")};
+    display: ${(props) => (props.collapsed ? "none" : "flex")};
   }
 
   & > ${Label} svg {
-    transform: rotate(${props => (props.collapsed ? -90 : 0)}deg);
-    fill: ${props => props.theme.sidebar.foreground};
+    transform: rotate(${(props) => (props.collapsed ? -90 : 0)}deg);
+    fill: ${(props) => props.theme.sidebar.foreground};
   }
 `
 
@@ -97,7 +97,7 @@ export const CollapseIcon = styled(Collapse)`
   margin-left: auto;
 
   path {
-    fill: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
+    fill: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
   }
 `
 
@@ -105,7 +105,7 @@ export const ExpandIcon = styled(Expand)`
   margin-left: auto;
 
   path {
-    fill: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
+    fill: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
   }
 `
 
@@ -113,7 +113,7 @@ export const ExpandLanguages = styled.div`
   padding: 12px 15px 12px 0;
 
   border-bottom: 1px solid
-    ${props => transparentize(0.8, props.theme.sidebar.foreground)};
+    ${(props) => transparentize(0.8, props.theme.sidebar.foreground)};
   margin-bottom: 8px;
 `
 
@@ -122,7 +122,7 @@ export const ExpandLanguagesHeader = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
+  color: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
   font-weight: 700;
 
   &:hover {
@@ -141,14 +141,14 @@ export const StyledLanguageList = styled.div`
 const item = css`
   display: block;
   margin-bottom: 4px;
-  color: ${props => props.theme.sidebar.foreground};
+  color: ${(props) => props.theme.sidebar.foreground};
   align-self: flex-start;
   text-decoration: none;
   border-bottom: 2px solid transparent;
   cursor: pointer;
 
   &:hover {
-    border-color: ${props =>
+    border-color: ${(props) =>
       transparentize(0.7, props.theme.sidebar.foreground)};
   }
 
@@ -159,11 +159,11 @@ const item = css`
 
   &.active {
     font-weight: 700;
-    color: ${props => props.theme.sidebar.active};
+    color: ${(props) => props.theme.sidebar.active};
   }
 
   &.active:hover {
-    border-color: ${props => transparentize(0.7, props.theme.sidebar.active)};
+    border-color: ${(props) => transparentize(0.7, props.theme.sidebar.active)};
   }
 `
 

src/components/Sidebar/index.tsx

@@ -17,9 +17,9 @@ const MenuItem: FC<IMenuItemProps> = ({ children, to }) => {
   )
 }
 
-export const Sidebar: FC<PropsWithChildren<
-  HTMLAttributes<HTMLDivElement>
->> = props => {
+export const Sidebar: FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> = (
+  props
+) => {
   const { children, ...restProps } = props
 
   return (

src/components/Sidebar/styles.tsx

@@ -5,8 +5,8 @@ import { transparentize } from "polished"
 export const SidebarWrapper = styled.div`
   box-sizing: border-box;
   flex: 0 0 320px;
-  background: ${props => props.theme.sidebar.background};
-  color: ${props => props.theme.sidebar.foreground};
+  background: ${(props) => props.theme.sidebar.background};
+  color: ${(props) => props.theme.sidebar.foreground};
   position: fixed;
   top: 0;
   bottom: 0;
@@ -30,7 +30,7 @@ export const SidebarWrapper = styled.div`
 
 export const Title = styled(Link)`
   display: block;
-  color: ${props => props.theme.sidebar.foreground};
+  color: ${(props) => props.theme.sidebar.foreground};
   font-size: 30px;
   line-height: 34px;
   font-weight: 700;
@@ -53,7 +53,7 @@ export const Menu = styled.nav`
   padding-top: 20px;
 
   &.has-border {
-    border-top: ${props =>
+    border-top: ${(props) =>
       `1px dashed ${transparentize(0.8, props.theme.sidebar.foreground)}`};
   }
 `
@@ -61,7 +61,7 @@ export const Menu = styled.nav`
 export const menuItemStyles = css`
   padding: 4px 0;
   font-size: 20px;
-  color: ${props => props.theme.sidebar.foreground};
+  color: ${(props) => props.theme.sidebar.foreground};
   text-decoration: none;
 
   &:hover,

src/components/StackedAvatars/styles.tsx

@@ -14,7 +14,7 @@ function containerWidth(count: number): number {
 export const StackedAvatarsWrapper = styled.div<{ count: number }>`
   display: flex;
   margin-right: 16px;
-  width: ${props => containerWidth(props.count)}px;
+  width: ${(props) => containerWidth(props.count)}px;
 `
 
 export const AuthorAvatar = styled.img<{ index: number }>`
@@ -24,6 +24,6 @@ export const AuthorAvatar = styled.img<{ index: number }>`
   flex: 0 0 ${AVATAR_SIZE}px;
   border: 2px solid #4c6780;
   border-radius: 50%;
-  z-index: ${props => props.index};
-  left: -${props => AVATAR_SIZE * OVERLAP_AMOUT * props.index}px;
+  z-index: ${(props) => props.index};
+  left: -${(props) => AVATAR_SIZE * OVERLAP_AMOUT * props.index}px;
 `

src/components/ThemeToggler/styles.tsx

@@ -10,6 +10,6 @@ export const Link = styled.span`
 
   &:hover {
     border-bottom: 2px solid
-      ${props => transparentize(0.6, props.theme.sidebar.foreground)};
+      ${(props) => transparentize(0.6, props.theme.sidebar.foreground)};
   }
 `

src/components/Toc/index.tsx

@@ -35,13 +35,17 @@ export const Toc: FC<ITocProps> = ({ header, items }) => {
   return (
     <SC.TocWrapper>
       {header}
-      {items.map(item => {
+      {items.map((item) => {
         const { prefix, title } = extractTitle(item.title)
 
         return (
           <SC.TocItem key={item.link} className={`depth-${item.depth}`}>
             {prefix}
-            <PageSidebarLink href={`${pathname}${item.link}`} text={title} type="anchor" />
+            <PageSidebarLink
+              href={`${pathname}${item.link}`}
+              text={title}
+              type="anchor"
+            />
           </SC.TocItem>
         )
       })}

src/components/Waves/index.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from "react"
 import * as SC from "./styles"
 
-export const WavesTop: FC = props => {
+export const WavesTop: FC = (props) => {
   return <SC.StyledWavesTop {...props} />
 }
 
-export const WavesBottom: FC = props => {
+export const WavesBottom: FC = (props) => {
   return <SC.StyledWavesBottom {...props} />
 }