feat: standarize titles

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 <SC.StyledLink to={item.path}>{humanize(item.title)}</SC.StyledLink>
 }
@@ -51,7 +32,7 @@ export function ResourceBreadcrumb({ relativePath }: IResourceBreadcrumbProps) {
     <SC.ResourceBreadcrumbWrapper>
       <SC.LinkWrapper>
         <Link
-          item={{ path: "/", title: "Home", type: "folder", children: [] }}
+          item={{ path: "/", title: "home", type: "folder", children: [] }}
         />
         <ChevronUp />
       </SC.LinkWrapper>
@@ -59,7 +40,7 @@ export function ResourceBreadcrumb({ relativePath }: IResourceBreadcrumbProps) {
         <Link
           item={{
             path: "/resources",
-            title: "Resources",
+            title: "resources",
             type: "folder",
             children: [],
           }}
@@ -76,7 +57,11 @@ export function ResourceBreadcrumb({ relativePath }: IResourceBreadcrumbProps) {
           )
         }
 
-        return <SC.CurrentPage key={item.path}>{item.title}</SC.CurrentPage>
+        return (
+          <SC.CurrentPage key={item.path}>
+            {humanize(item.title)}
+          </SC.CurrentPage>
+        )
       })}
     </SC.ResourceBreadcrumbWrapper>
   )

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) {
       <SC.PageLink key={item.title} to={item.path}>
         {cleanedUpPath.map(node => (
           // TODO: use helper to format path
-          <SC.NodePart key={node}>{node.replace(".md", "")}</SC.NodePart>
+          <SC.NodePart key={node}>{humanize(node)}</SC.NodePart>
         ))}
       </SC.PageLink>
     )
@@ -44,7 +45,7 @@ function plantTree(item: IFileOrFolder, index?: number) {
 const Language = memo(({ item }: { item: IFolder; index: number }) => {
   return (
     <SC.TreeWrapper>
-      <SC.LanguageLabel>{item.title}</SC.LanguageLabel>
+      <SC.LanguageLabel>{humanize(item.title)}</SC.LanguageLabel>
       <SC.Children>{item.children.map(node => plantTree(node))}</SC.Children>
     </SC.TreeWrapper>
   )

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 (
       <SC.PageLink key={item.title} to={item.path} activeClassName="active">
-        {item.title}
+        {humanize(item.title)}
       </SC.PageLink>
     )
   }
@@ -55,7 +56,7 @@ function Folder({ item }: { item: IFolder }) {
   return (
     <SC.TreeWrapper collapsed={collapsed}>
       <SC.Label onClick={toggleCollapse}>
-        <TriangleDown /> {item.title}
+        <TriangleDown /> {humanize(item.title)}
       </SC.Label>
       <SC.Children>{item.children.map(node => plantTree(node))}</SC.Children>
     </SC.TreeWrapper>
@@ -73,7 +74,7 @@ const FirstLevelFolder = memo(
           className={!collapsed ? "active" : undefined}
           onClick={() => setCurrent(index)}
         >
-          {item.title}
+          {humanize(item.title)}
           <SC.CollapseToggler />
         </SC.FirstLabel>
         <SC.Children>{item.children.map(node => plantTree(node))}</SC.Children>

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"