Merge pull request #256 from the-programmers-hangout/style-format-code

style: format codebase

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "arrowParens": "avoid",
+  "arrowParens": "always",
   "bracketSpacing": true,
   "endOfLine": "lf",
   "jsxBracketSameLine": false,

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} />
 }

src/content/resources/javascript/es6/arrow-functions.md

@@ -12,7 +12,7 @@ title: Arrow functions
 Brought into ES6, arrow functions are a new way to declare functions, and allow for shorter syntax. For example, below is a regular function, as usually seen before ES6.
 
 ```js
-const sayHello = function() {
+const sayHello = function () {
   console.log("hello");
 };
 ```
@@ -36,7 +36,7 @@ const sayHello = (nameOne, nameTwo) => {
 For a single parameter, the parentheses can be omitted:
 
 ```js
-const sayHello = name => {
+const sayHello = (name) => {
   console.log("hello", name);
 };
 ```
@@ -50,13 +50,13 @@ const sayHello = () => "hello";
 The same is also true of functions returning an expression using parameters, too.
 
 ```js
-const sayHello = name => `hello ${name}`;
+const sayHello = (name) => `hello ${name}`;
 ```
 
 Or even...
 
 ```js
-const helloObject = name => ({
+const helloObject = (name) => ({
   isGreeting: true,
   helloName: name,
 });
@@ -73,7 +73,7 @@ The keyword `this` is handled differently in arrow functions. In an arrow functi
 Using regular anonymous function, `this` is refers to the `HTMLButtonObject` that called it, and therefore the function outputs `[object HTMLButtonElement]` to the console.
 
 ```js
-document.querySelector("#btn").addEventListener("click", function() {
+document.querySelector("#btn").addEventListener("click", function () {
   console.log(this); // outputs "[object HTMLButtonElement]"
 });
 ```

src/content/resources/javascript/iterative-vs-functional.md

@@ -35,11 +35,11 @@ const users = [
 ];
 
 // functional way
-const foundUser = users.find(user => user.name === "John");
+const foundUser = users.find((user) => user.name === "John");
 
 // iterative way
 let foundUser = null;
-users.forEach(user => {
+users.forEach((user) => {
   if (user.name === "John") {
     foundUser = user;
   }
@@ -71,11 +71,11 @@ const users = [
 ];
 
 // functional way
-const youngerUsers = users.filter(user => user.age < 18);
+const youngerUsers = users.filter((user) => user.age < 18);
 
 // iterative way
 const youngerUsers = [];
-users.forEach(user => {
+users.forEach((user) => {
   if (user.age < 18) {
     youngerUsers.push(user);
   }
@@ -105,11 +105,11 @@ const users = [
 ];
 
 // functional way
-const userNames = users.map(user => user.name);
+const userNames = users.map((user) => user.name);
 
 // iterative way
 const userNames = [];
-users.forEach(user => {
+users.forEach((user) => {
   userNames.push(user.name);
 });
 
@@ -140,7 +140,7 @@ const totalAge = users.reduce((acc, user) => acc + user.age, 0);
 
 // iterative way
 let totalAge = 0;
-users.forEach(user => {
+users.forEach((user) => {
   totalAge += user.age;
 });
 
@@ -166,7 +166,7 @@ const users = [
 ];
 
 // functional way
-const hasYoungUsers = users.some(user => user.age < 18);
+const hasYoungUsers = users.some((user) => user.age < 18);
 
 // iterative way
 let hasYoungUsers = false;
@@ -193,7 +193,7 @@ const users = [
 ];
 
 // functional way
-const allUsersAreOldEnough = users.every(user => user.age < 18);
+const allUsersAreOldEnough = users.every((user) => user.age < 18);
 
 // iterative way
 let allUsersAreOldEnough = true;
@@ -219,7 +219,7 @@ const found = pets.includes("dog");
 
 // iterative way
 let found = false;
-pets.forEach(pet => {
+pets.forEach((pet) => {
   if (pet === "dog") {
     found = true;
   }

src/content/resources/javascript/promises/async-await.md

@@ -130,13 +130,13 @@ Below is the same code implemented without using Async / Await as a comparision.
 ```js
 function getCharacters() {
   return fetch(`https://rickandmortyapi.com/api/character`)
-    .then(response => response.json())
-    .then(response => response.results);
+    .then((response) => response.json())
+    .then((response) => response.results);
 }
 
 getCharacters()
-  .then(characters => {
+  .then((characters) => {
     console.log(characters); // (20) [{...}, {...}, {...}]
   })
-  .catch(err => console.error(err));
+  .catch((err) => console.error(err));
 ```

src/content/resources/javascript/promises/intro.md

@@ -43,7 +43,7 @@ In order to access this information, we'll have to call the `.then` method on ou
 to access the actual members like so.
 
 ```js
-getMembers("The Programmers Hangout").then(members => {
+getMembers("The Programmers Hangout").then((members) => {
   console.log(members); // (32k) [{...}, {...}, {...}]
 });
 ```
@@ -64,7 +64,7 @@ You may have tried doing something like this before.
 ```js
 // Incorrect code, don't copy!
 let results;
-getWeather("Los Angeles").then(weather => {
+getWeather("Los Angeles").then((weather) => {
   results = weather;
 });
 console.log(results); // undefined
@@ -80,7 +80,7 @@ you can watch [this amazing talk](https://youtu.be/8aGhZQkoFbQ) on it to learn m
 In order to fix this problem we need to move the `console.log` inside the `.then` callback like so:
 
 ```js
-getWeather("Los Angeles").then(weather => {
+getWeather("Los Angeles").then((weather) => {
   console.log(weather); // Sunny, probably
 });
 ```
@@ -93,11 +93,11 @@ You can try it in your browser if you want to test it out.
 ```js
 function getCharacters() {
   return fetch(`https://rickandmortyapi.com/api/character`)
-    .then(response => response.json())
-    .then(response => response.results);
+    .then((response) => response.json())
+    .then((response) => response.results);
 }
 
-getCharacters().then(characters => {
+getCharacters().then((characters) => {
   console.log(characters); // (20) [{...}, {...}, {...}]
 });
 ```

src/content/resources/javascript/promises/simplifying-promises.md

@@ -9,9 +9,9 @@ The first naive attempt, using new Promise for something that already returns a
 
 ```js
 function doAsync(number) {
-  return new Promise(function(resolve, reject) {
-    doDatabase().then(function(dbResult) {
-      otherDbFunction(dbResult).then(function(secondResult) {
+  return new Promise(function (resolve, reject) {
+    doDatabase().then(function (dbResult) {
+      otherDbFunction(dbResult).then(function (secondResult) {
         resolve(secondResult + 10);
       });
     });
@@ -24,8 +24,8 @@ already returns a promise, you can just return the original thing.
 
 ```js
 function doAsync(number) {
-  return doDatabase().then(function(dbResult) {
-    otherDbFunction(dbResult).then(function(secondResult) {
+  return doDatabase().then(function (dbResult) {
+    otherDbFunction(dbResult).then(function (secondResult) {
       return secondResult + 10;
     });
   });
@@ -38,10 +38,10 @@ is that they allow you to chain them sequentially.
 ```js
 function doAsync(number) {
   return doDatabase()
-    .then(function(dbResult) {
+    .then(function (dbResult) {
       return otherDbFunction(dbResult);
     })
-    .then(function(secondResult) {
+    .then(function (secondResult) {
       return secondResult + 10;
     });
 }
@@ -54,7 +54,7 @@ variable, you can pass in the entire function itself to the then block
 function doAsync(number) {
   return doDatabase()
     .then(otherDbFunction)
-    .then(function(secondResult) {
+    .then(function (secondResult) {
       return secondResult + 10;
     });
 }
@@ -63,10 +63,10 @@ function doAsync(number) {
 And you don't need those returns if you just have ES6 arrow functions
 
 ```js
-const doAsync = number =>
+const doAsync = (number) =>
   doDatabase()
     .then(otherDbFunction)
-    .then(secondResult => secondResult + 10);
+    .then((secondResult) => secondResult + 10);
 ```
 
 Wow, that last one looks a lot cleaner to me than the first. Keeping that in mind, maybe we could be making some of our other functions cleaner as well

src/content/resources/javascript/spread-operator.md

@@ -70,7 +70,7 @@ console.log([...a, ...b]); // [1, 2, 3, 4] - Merged!
 Here's a real-world example. Imagine that you're making a function which accepts an `options` object as argument, but you also want to have default values for this object. Here's a not so good way to do it without spread operator:
 
 ```js
-const f = opts => {
+const f = (opts) => {
   const options = {};
   options.foo = opts.foo || "default value";
   options.bar = opts.bar || "default value";
@@ -82,7 +82,7 @@ const f = opts => {
 This works, but here's a better way:
 
 ```js
-const f = opts => {
+const f = (opts) => {
   const defaults = {
     foo: "default value",
     bar: "default value",

src/layouts/ColumnLayout/styles.tsx

@@ -4,8 +4,8 @@ export const Main = styled.div`
   display: flex;
   width: 100%;
   min-height: 100vh;
-  background: ${props => props.theme.main.background};
-  color: ${props => props.theme.main.foreground};
+  background: ${(props) => props.theme.main.background};
+  color: ${(props) => props.theme.main.foreground};
 `
 
 export const Overlay = styled.div`

src/layouts/index.tsx

@@ -16,7 +16,7 @@ interface IBaseLayout extends IPageContext {
   location: WindowLocation
 }
 
-const BaseLayout: FC<IBaseLayout> = props => {
+const BaseLayout: FC<IBaseLayout> = (props) => {
   const ResolvedLayout = useMemo(() => {
     switch (props.pageContext.layout) {
       case "resources":

src/utils/index.ts

@@ -11,10 +11,7 @@ function specificWordsToUpper(str: string): string {
   const wordsToUpper = ["pdo", "c"]
   const toUpper = (word: string) =>
     wordsToUpper.includes(word.toLowerCase()) ? word.toUpperCase() : word
-  return str
-    .split(" ")
-    .map(toUpper)
-    .join(" ")
+  return str.split(" ").map(toUpper).join(" ")
 }
 
 function removeDotMD(str: string): string {
@@ -93,7 +90,7 @@ function generateFolder({
   path: IFile["path"]
   targets: IFolder[]
 }): IFolder {
-  const children = join(chain(target => target.children, targets))
+  const children = join(chain((target) => target.children, targets))
   const sortedChildren = sort((a, b) => {
     return a.title.split("/").length > b.title.split("/").length
       ? -1
@@ -128,7 +125,7 @@ export function join([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] {
   }
 
   const [similarFs, remaining] = partition(
-    obj => obj.title === head.title && obj.type === head.type,
+    (obj) => obj.title === head.title && obj.type === head.type,
     tail
   )
   const targets = [head, ...similarFs]
@@ -148,8 +145,8 @@ export function buildToc(headings: MarkdownRemark["headings"]): ITocItem[] {
   }
 
   return headings
-    .filter(h => h?.depth === 2)
-    .map(h => {
+    .filter((h) => h?.depth === 2)
+    .map((h) => {
       return {
         depth: h!.depth!,
         link: `#${kebabCase(h!.value!)}`,