diff --git a/src/components/ResourceBreadcrumb/index.tsx b/src/components/ResourceBreadcrumb/index.tsx index ef2b67c..b5b2266 100644 --- a/src/components/ResourceBreadcrumb/index.tsx +++ b/src/components/ResourceBreadcrumb/index.tsx @@ -1,8 +1,7 @@ -import pipe from "ramda/es/pipe" import React from "react" import ChevronUp from "../../icons/chevron-up.svg" -import { traversePaths } from "../../utils" +import { humanize, traversePaths } from "../../utils" import { IFileOrFolder } from "../ResourcesSidebar/index" import * as SC from "./styles" @@ -10,24 +9,6 @@ interface IResourceBreadcrumbProps { relativePath: any } -function capitalize(str: string): string { - return str - .split(" ") - .map(word => `${word.charAt(0).toUpperCase()}${word.substring(1)}`) - .join(" ") -} - -function dashToSpace(str: string): string { - return str.replace("-", " ") -} - -function humanize(str: string): string { - return pipe( - dashToSpace, - capitalize - )(str) -} - function Link({ item }: { item: IFileOrFolder }) { return {humanize(item.title)} } @@ -51,7 +32,7 @@ export function ResourceBreadcrumb({ relativePath }: IResourceBreadcrumbProps) { @@ -59,7 +40,7 @@ export function ResourceBreadcrumb({ relativePath }: IResourceBreadcrumbProps) { {item.title} + return ( + + {humanize(item.title)} + + ) })} ) diff --git a/src/components/ResourcesList/index.tsx b/src/components/ResourcesList/index.tsx index 7109ad1..9077388 100644 --- a/src/components/ResourcesList/index.tsx +++ b/src/components/ResourcesList/index.tsx @@ -2,6 +2,7 @@ import { graphql, useStaticQuery } from "gatsby" import React, { memo } from "react" import "react-perfect-scrollbar/dist/css/styles.css" import { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types" +import { humanize } from "../../utils/index" import * as SC from "./styles" import useBuildTree from "./useBuildTree" @@ -32,7 +33,7 @@ function plantTree(item: IFileOrFolder, index?: number) { {cleanedUpPath.map(node => ( // TODO: use helper to format path - {node.replace(".md", "")} + {humanize(node)} ))} ) @@ -44,7 +45,7 @@ function plantTree(item: IFileOrFolder, index?: number) { const Language = memo(({ item }: { item: IFolder; index: number }) => { return ( - {item.title} + {humanize(item.title)} {item.children.map(node => plantTree(node))} ) diff --git a/src/components/ResourcesSidebar/index.tsx b/src/components/ResourcesSidebar/index.tsx index 75b82ad..d371ddb 100644 --- a/src/components/ResourcesSidebar/index.tsx +++ b/src/components/ResourcesSidebar/index.tsx @@ -5,6 +5,7 @@ import "react-perfect-scrollbar/dist/css/styles.css" import TriangleDown from "../../icons/triangle-down.svg" import Banner from "../../images/tph-banner.svg" import { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types" +import { humanize } from "../../utils" import { ThemeToggler } from "../ThemeToggler" import useSidebar from "./../../hooks/useSidebar" import * as SC from "./styles" @@ -33,7 +34,7 @@ function plantTree(item: IFileOrFolder, index?: number, firstLevel?: boolean) { if (item.type === "file") { return ( - {item.title} + {humanize(item.title)} ) } @@ -55,7 +56,7 @@ function Folder({ item }: { item: IFolder }) { return ( - {item.title} + {humanize(item.title)} {item.children.map(node => plantTree(node))} @@ -73,7 +74,7 @@ const FirstLevelFolder = memo( className={!collapsed ? "active" : undefined} onClick={() => setCurrent(index)} > - {item.title} + {humanize(item.title)} {item.children.map(node => plantTree(node))} diff --git a/src/utils/index.ts b/src/utils/index.ts index 0f12043..478ff44 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,8 +1,35 @@ import chain from "ramda/es/chain" import partition from "ramda/es/partition" +import pipe from "ramda/es/pipe" import { IFile, IFileOrFolder, IFolder } from "../types" +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(" ") +} + +function removeDotMD(str: string): string { + return str.replace(".md", "") +} + +function dashToSpace(str: string): string { + return str.replace(/-/g, " ") +} + +export function humanize(str: string): string { + return pipe( + dashToSpace, + specificWordsToUpper, + removeDotMD + )(str) +} + export function traversePaths( [head, ...tail]: string[], basePath: string = "/resources"