|
| 1 | +import React, {useEffect} from 'react'; |
| 2 | +import {useLocation} from '@docusaurus/router'; |
| 3 | +import Link from '@docusaurus/Link'; |
| 4 | +import styles from './styles.module.css' |
| 5 | +import HomeBreadcrumbItem from "@theme/DocBreadcrumbs/Items/Home"; |
| 6 | + |
| 7 | +function capitalizeFirstLetter(str) { |
| 8 | + |
| 9 | + if (str === 'knowledgebase') |
| 10 | + return 'Knowledge Base' |
| 11 | + if (str.length === 0) { |
| 12 | + return str; // Handle empty string case |
| 13 | + } |
| 14 | + return str.charAt(0).toUpperCase() + str.slice(1); |
| 15 | +} |
| 16 | + |
| 17 | +function pretty(str) { |
| 18 | + |
| 19 | + if (str === 'knowledgebase') |
| 20 | + return 'Knowledge Base' |
| 21 | + |
| 22 | + let spacedStr = str.replace(/[-_]/g, ' '); |
| 23 | + let words = spacedStr.split(' '); |
| 24 | + |
| 25 | + let capitalizedWords = words.map(word => { |
| 26 | + // Handle already capitalized words e.g. TTL |
| 27 | + if (word === word.toUpperCase()) { |
| 28 | + return word; // Leave as is |
| 29 | + } else { |
| 30 | + return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); // convert other letters to lowercase |
| 31 | + } |
| 32 | + }); |
| 33 | + |
| 34 | + return capitalizedWords.join(' '); |
| 35 | +} |
| 36 | + |
| 37 | + |
| 38 | +const BlogBreadcrumbs = () => { |
| 39 | + |
| 40 | + const location = useLocation(); |
| 41 | + const location_paths = location.pathname.split("/") |
| 42 | + let cleaned_location_paths = location_paths.filter((path)=>{ |
| 43 | + return !(path === '' || path === 'docs'); |
| 44 | + }) |
| 45 | + let accumulatedPath = '/docs/'; |
| 46 | + |
| 47 | + return( |
| 48 | + <div className={styles.BlogBreadcrumbsContainer}> |
| 49 | + <HomeBreadcrumbItem /> |
| 50 | + <div className={styles.BlogBreadcrumbs}> |
| 51 | + { |
| 52 | + cleaned_location_paths.map((path, index)=>{ |
| 53 | + accumulatedPath += path; |
| 54 | + const toPath = accumulatedPath; |
| 55 | + |
| 56 | + if (index < cleaned_location_paths.length - 1) { // Check if it's not the last element |
| 57 | + accumulatedPath += '/'; // Add a slash if it's not the last element |
| 58 | + return ( |
| 59 | + <div className={styles.breadCrumbLinkItem}> |
| 60 | + <Link className={styles.BreadcrumbLink} key={path} to={toPath}> |
| 61 | + {capitalizeFirstLetter(path)} |
| 62 | + </Link> |
| 63 | + <span className={styles.forwardSlash}>{"/"}</span> |
| 64 | + </div> |
| 65 | + ); |
| 66 | + } else { // Last element |
| 67 | + return ( |
| 68 | + <Link className={styles.BreadcrumbLinkBold} key={path} to={toPath}> |
| 69 | + {pretty(path)} |
| 70 | + </Link> |
| 71 | + ); |
| 72 | + } |
| 73 | + }) |
| 74 | + } |
| 75 | + </div> |
| 76 | + </div> |
| 77 | + ) |
| 78 | +} |
| 79 | + |
| 80 | +export default BlogBreadcrumbs |
| 81 | + |
0 commit comments