From 0eaea34b287098c5449ae4b34b80b17fcd179a82 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Tue, 19 May 2020 21:50:21 -0400 Subject: [PATCH 1/2] style: update prettier arrow parens rule --- .prettierrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.prettierrc b/.prettierrc index 3275335..e3e4496 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "arrowParens": "avoid", + "arrowParens": "always", "bracketSpacing": true, "endOfLine": "lf", "jsxBracketSameLine": false, From a1283334b3748e327c6b681f908af502aa9259c6 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Tue, 19 May 2020 21:57:49 -0400 Subject: [PATCH 2/2] style: format codebase --- src/components/404LinkCorrection/index.tsx | 2 +- src/components/ArchivesSidebar/index.tsx | 4 +-- src/components/ArchivesSidebar/styles.tsx | 8 ++--- src/components/Breadcrumb/index.tsx | 2 +- src/components/Breadcrumb/styles.tsx | 4 +-- src/components/DiscordButton/styles.tsx | 4 +-- src/components/Footer/styles.tsx | 2 +- src/components/Header/index.tsx | 2 +- src/components/Header/styles.tsx | 8 ++--- src/components/HeaderBarebone/index.tsx | 2 +- src/components/HeaderBarebone/styles.tsx | 8 ++--- src/components/Home/styles.tsx | 2 +- src/components/Link/styles.tsx | 2 +- src/components/Markdown/styles.tsx | 10 +++--- src/components/MobileHeader/styles.tsx | 4 +-- src/components/PageContent/index.tsx | 13 ++++++-- src/components/PageContent/styles.tsx | 4 +-- src/components/PageSidebarLink/styles.tsx | 2 +- src/components/ResourcesList/index.tsx | 6 ++-- src/components/ResourcesList/styles.tsx | 14 ++++---- src/components/ResourcesSidebar/index.tsx | 20 ++++++------ src/components/ResourcesSidebar/styles.tsx | 32 +++++++++---------- src/components/Sidebar/index.tsx | 6 ++-- src/components/Sidebar/styles.tsx | 10 +++--- src/components/StackedAvatars/styles.tsx | 6 ++-- src/components/ThemeToggler/styles.tsx | 2 +- src/components/Toc/index.tsx | 8 +++-- src/components/Waves/index.tsx | 4 +-- .../javascript/es6/arrow-functions.md | 10 +++--- .../javascript/iterative-vs-functional.md | 20 ++++++------ .../javascript/promises/async-await.md | 8 ++--- .../resources/javascript/promises/intro.md | 12 +++---- .../promises/simplifying-promises.md | 20 ++++++------ .../resources/javascript/spread-operator.md | 4 +-- src/layouts/ColumnLayout/styles.tsx | 4 +-- src/layouts/index.tsx | 2 +- src/utils/index.ts | 13 +++----- 37 files changed, 146 insertions(+), 138 deletions(-) diff --git a/src/components/404LinkCorrection/index.tsx b/src/components/404LinkCorrection/index.tsx index 32b06ca..c420c70 100644 --- a/src/components/404LinkCorrection/index.tsx +++ b/src/components/404LinkCorrection/index.tsx @@ -85,7 +85,7 @@ export const PossibleCorrections: FC = ({ // 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(), diff --git a/src/components/ArchivesSidebar/index.tsx b/src/components/ArchivesSidebar/index.tsx index 681357e..7f4c136 100644 --- a/src/components/ArchivesSidebar/index.tsx +++ b/src/components/ArchivesSidebar/index.tsx @@ -40,14 +40,14 @@ function Tree({ item }: { item: IFileOrFolder }) { ) } -export const ArchivesSidebar: FC> = props => { +export const ArchivesSidebar: FC> = (props) => { const archives = useStaticQuery(ALL_ARCHIVES) const tree = useBuildTree(archives, "/archives") const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree) return ( - {sortedTree.map(node => ( + {sortedTree.map((node) => ( ))} diff --git a/src/components/ArchivesSidebar/styles.tsx b/src/components/ArchivesSidebar/styles.tsx index e8bac45..ec5c767 100644 --- a/src/components/ArchivesSidebar/styles.tsx +++ b/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)}; } ` diff --git a/src/components/Breadcrumb/index.tsx b/src/components/Breadcrumb/index.tsx index 7ed0fdd..acb60aa 100644 --- a/src/components/Breadcrumb/index.tsx +++ b/src/components/Breadcrumb/index.tsx @@ -53,7 +53,7 @@ export function Breadcrumb({ relativePath, basePath }: IBreadcrumbProps) { - {breadcrumbItems.map(item => { + {breadcrumbItems.map((item) => { if (item.type === "folder") { foldersDepth++ if (foldersDepth > 1) { diff --git a/src/components/Breadcrumb/styles.tsx b/src/components/Breadcrumb/styles.tsx index f904701..d9d5559 100644 --- a/src/components/Breadcrumb/styles.tsx +++ b/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; diff --git a/src/components/DiscordButton/styles.tsx b/src/components/DiscordButton/styles.tsx index 79b6a5f..39c8abf 100644 --- a/src/components/DiscordButton/styles.tsx +++ b/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}; } ` diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx index 3f5464f..76b11fb 100644 --- a/src/components/Footer/styles.tsx +++ b/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; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index b6f8385..c7e7370 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -49,7 +49,7 @@ export const Header: React.FC = ({ {authors.length} contributor{authors.length > 1 && "s"} {authors - .map(author => `${author.name}#${author.hash}`) + .map((author) => `${author.name}#${author.hash}`) .join(", ")} diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx index 231d736..8554b06 100644 --- a/src/components/Header/styles.tsx +++ b/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; diff --git a/src/components/HeaderBarebone/index.tsx b/src/components/HeaderBarebone/index.tsx index 09caadd..df3e5aa 100644 --- a/src/components/HeaderBarebone/index.tsx +++ b/src/components/HeaderBarebone/index.tsx @@ -10,7 +10,7 @@ interface IHeaderBareboneProps { className?: string } -export const HeaderBarebone: React.FC = props => { +export const HeaderBarebone: React.FC = (props) => { return ( diff --git a/src/components/HeaderBarebone/styles.tsx b/src/components/HeaderBarebone/styles.tsx index 2126b8d..4f17686 100644 --- a/src/components/HeaderBarebone/styles.tsx +++ b/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; diff --git a/src/components/Home/styles.tsx b/src/components/Home/styles.tsx index f3dbb38..43411be 100644 --- a/src/components/Home/styles.tsx +++ b/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; ` diff --git a/src/components/Link/styles.tsx b/src/components/Link/styles.tsx index 6b52bd1..57d9dd9 100644 --- a/src/components/Link/styles.tsx +++ b/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; diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx index c06c6bf..aab176e 100644 --- a/src/components/Markdown/styles.tsx +++ b/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; diff --git a/src/components/MobileHeader/styles.tsx b/src/components/MobileHeader/styles.tsx index b4fa946..099e11e 100644 --- a/src/components/MobileHeader/styles.tsx +++ b/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; } diff --git a/src/components/PageContent/index.tsx b/src/components/PageContent/index.tsx index 29246d0..f89bac0 100644 --- a/src/components/PageContent/index.tsx +++ b/src/components/PageContent/index.tsx @@ -36,7 +36,7 @@ export const PageContent: FC = ({ {recommendedReading && ( Recommended reading - {recommendedReading.map(item => { + {recommendedReading.map((item) => { return })} @@ -45,8 +45,15 @@ export const PageContent: FC = ({ {externalResources && ( External Resources - {externalResources.map(item => { - return + {externalResources.map((item) => { + return ( + + ) })} )} diff --git a/src/components/PageContent/styles.tsx b/src/components/PageContent/styles.tsx index 290e4ad..ab6e43a 100644 --- a/src/components/PageContent/styles.tsx +++ b/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; diff --git a/src/components/PageSidebarLink/styles.tsx b/src/components/PageSidebarLink/styles.tsx index 5497ca6..7d2ead0 100644 --- a/src/components/PageSidebarLink/styles.tsx +++ b/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; diff --git a/src/components/ResourcesList/index.tsx b/src/components/ResourcesList/index.tsx index 7308012..e1987ec 100644 --- a/src/components/ResourcesList/index.tsx +++ b/src/components/ResourcesList/index.tsx @@ -34,7 +34,7 @@ function plantTree(item: IFileOrFolder, index?: number) { return ( - {cleanedUpPath.map(node => ( + {cleanedUpPath.map((node) => ( // TODO: use helper to format path {humanize(node)} ))} @@ -49,7 +49,7 @@ const Language = memo(({ item }: { item: IFolder; index: number }) => { return ( {humanize(item.title)} - {item.children.map(node => plantTree(node))} + {item.children.map((node) => plantTree(node))} ) }) @@ -58,7 +58,7 @@ interface IResourcesList extends HTMLAttributes { relativeDirectory?: string } -export const ResourcesList: FC = props => { +export const ResourcesList: FC = (props) => { const resources = useStaticQuery(ALL_RESOURCES) const filteredResources = { diff --git a/src/components/ResourcesList/styles.tsx b/src/components/ResourcesList/styles.tsx index 156d03d..7cffb67 100644 --- a/src/components/ResourcesList/styles.tsx +++ b/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)}; } diff --git a/src/components/ResourcesSidebar/index.tsx b/src/components/ResourcesSidebar/index.tsx index 38d3a06..1163530 100644 --- a/src/components/ResourcesSidebar/index.tsx +++ b/src/components/ResourcesSidebar/index.tsx @@ -30,7 +30,7 @@ const ALL_RESOURCES = graphql` ` const childrenSort = sortWith([ - 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 }) { {humanize(item.title)} - {sortedChildren.map(node => ( - + {sortedChildren.map((node) => ( + ))} @@ -119,8 +119,8 @@ const FirstLevelFolder = memo(({ item }: { item: IFolder }) => { {humanize(item.title)} - {sortedChildren.map(node => ( - + {sortedChildren.map((node) => ( + ))} @@ -135,7 +135,7 @@ const LanguageList: FC<{ return ( - {items.map(item => ( + {items.map((item) => ( setExpanded(prevState => !prevState)} + onClick={() => setExpanded((prevState) => !prevState)} > Expand languages {expanded ? : } @@ -174,7 +174,7 @@ const AllLanguages: FC<{ ) } -export const ResourcesSidebar: FC> = props => { +export const ResourcesSidebar: FC> = (props) => { const [expandedLanguages, setExpandedLanguages] = useState(false) const resources = useStaticQuery(ALL_RESOURCES) const languages = useBuildTree(resources, "/resources") @@ -184,7 +184,7 @@ export const ResourcesSidebar: FC> = props => { languages ) - const currentLanguage = sortedLanguages.find(lang => lang.title === current) + const currentLanguage = sortedLanguages.find((lang) => lang.title === current) return ( diff --git a/src/components/ResourcesSidebar/styles.tsx b/src/components/ResourcesSidebar/styles.tsx index 4369fbe..8e2ceb3 100644 --- a/src/components/ResourcesSidebar/styles.tsx +++ b/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)}; } ` diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index d3600c3..ad80ac7 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -17,9 +17,9 @@ const MenuItem: FC = ({ children, to }) => { ) } -export const Sidebar: FC ->> = props => { +export const Sidebar: FC>> = ( + props +) => { const { children, ...restProps } = props return ( diff --git a/src/components/Sidebar/styles.tsx b/src/components/Sidebar/styles.tsx index 4f38d14..4a3d152 100644 --- a/src/components/Sidebar/styles.tsx +++ b/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, diff --git a/src/components/StackedAvatars/styles.tsx b/src/components/StackedAvatars/styles.tsx index b6c7a6c..c2fdeef 100644 --- a/src/components/StackedAvatars/styles.tsx +++ b/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; ` diff --git a/src/components/ThemeToggler/styles.tsx b/src/components/ThemeToggler/styles.tsx index 632fae0..f6feac9 100644 --- a/src/components/ThemeToggler/styles.tsx +++ b/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)}; } ` diff --git a/src/components/Toc/index.tsx b/src/components/Toc/index.tsx index aea1c17..f1dff38 100644 --- a/src/components/Toc/index.tsx +++ b/src/components/Toc/index.tsx @@ -35,13 +35,17 @@ export const Toc: FC = ({ header, items }) => { return ( {header} - {items.map(item => { + {items.map((item) => { const { prefix, title } = extractTitle(item.title) return ( {prefix} - + ) })} diff --git a/src/components/Waves/index.tsx b/src/components/Waves/index.tsx index e830034..450bb06 100644 --- a/src/components/Waves/index.tsx +++ b/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 } -export const WavesBottom: FC = props => { +export const WavesBottom: FC = (props) => { return } diff --git a/src/content/resources/javascript/es6/arrow-functions.md b/src/content/resources/javascript/es6/arrow-functions.md index d62d49c..b3c9762 100644 --- a/src/content/resources/javascript/es6/arrow-functions.md +++ b/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]" }); ``` diff --git a/src/content/resources/javascript/iterative-vs-functional.md b/src/content/resources/javascript/iterative-vs-functional.md index 8add5fe..3b112e7 100644 --- a/src/content/resources/javascript/iterative-vs-functional.md +++ b/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; } diff --git a/src/content/resources/javascript/promises/async-await.md b/src/content/resources/javascript/promises/async-await.md index efe6402..7f65a7f 100644 --- a/src/content/resources/javascript/promises/async-await.md +++ b/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)); ``` diff --git a/src/content/resources/javascript/promises/intro.md b/src/content/resources/javascript/promises/intro.md index 1c8bb22..9d6df42 100644 --- a/src/content/resources/javascript/promises/intro.md +++ b/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) [{...}, {...}, {...}] }); ``` diff --git a/src/content/resources/javascript/promises/simplifying-promises.md b/src/content/resources/javascript/promises/simplifying-promises.md index 02bc741..d78f8af 100644 --- a/src/content/resources/javascript/promises/simplifying-promises.md +++ b/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 diff --git a/src/content/resources/javascript/spread-operator.md b/src/content/resources/javascript/spread-operator.md index f35c7c6..ad2a8ab 100644 --- a/src/content/resources/javascript/spread-operator.md +++ b/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", diff --git a/src/layouts/ColumnLayout/styles.tsx b/src/layouts/ColumnLayout/styles.tsx index 581265b..a28c4ad 100644 --- a/src/layouts/ColumnLayout/styles.tsx +++ b/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` diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index b58e12e..aa0bd2d 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -16,7 +16,7 @@ interface IBaseLayout extends IPageContext { location: WindowLocation } -const BaseLayout: FC = props => { +const BaseLayout: FC = (props) => { const ResolvedLayout = useMemo(() => { switch (props.pageContext.layout) { case "resources": diff --git a/src/utils/index.ts b/src/utils/index.ts index 2b211cd..a61d301 100644 --- a/src/utils/index.ts +++ b/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!)}`,