The breadcrumbs functionality, shown below, was written by someone else and is not up to my preferred standards. Don't get me wrong, it works, but it can be done in a much better way. I would like to have the code in TypeScript rather than JavaScript.
It would be much better to sanitise the string first, in other words - remove trailing slashes, before using split and automatically converting it into an array. That way, we can get rid of the popping. Clean input, clean output. šš¼
Something like:
const currentPage = (this.$page.path.charAt(parts.length - 1) === '/') ? this.$page.path.slice(0, -1) : this.$page.path; // Current page, relative to domain, without trailing slash.
const parts = currentPage.split("/");
// ...
Maybe even ES6+:
const currentPage = this.$page.path.endsWith('/') ? this.$page.path.slice(0, -1) : this.$page.path; // Current page, relative to domain, without trailing slash.
const parts = currentPage.split("/");
There are many more things I see in this small piece of code that can be written in a more efficient way. So let's refactor it.
The breadcrumbs functionality, shown below, was written by someone else and is not up to my preferred standards. Don't get me wrong, it works, but it can be done in a much better way. I would like to have the code in TypeScript rather than JavaScript.
https://github.com/ricardobalk/website/blob/1c10d86a4d81e4062f16b44ba75d34f771b3e333/src/.vuepress/theme/components/Breadcrumbs.js#L1-L25
There are some lines that caught my attention, for example...
On line 4, it looks like the URL of the page is split via JavaScript's built-in
splitfunctionality, with/as delimiter. This means, that/blog/tech/whateverbecomes an array (actually, anArray<string>when it would be TypeScript š¤), containing["blog", "tech", "whatever"]. https://github.com/ricardobalk/website/blob/1c10d86a4d81e4062f16b44ba75d34f771b3e333/src/.vuepress/theme/components/Breadcrumbs.js#L4If we look further, at line numbers 5 to 7, it looks like the array is being checked for an empty value, which gets removed ('popped') from the array. To me, it looks like you're popping an empty value that could've been caused by a trailing slash. For example,
/blog/tech/whatever/becomes["blog", "tech", "whatever", ""]when using the split functionality. https://github.com/ricardobalk/website/blob/1c10d86a4d81e4062f16b44ba75d34f771b3e333/src/.vuepress/theme/components/Breadcrumbs.js#L5-L7It would be much better to sanitise the string first, in other words - remove trailing slashes, before using split and automatically converting it into an array. That way, we can get rid of the popping. Clean input, clean output. šš¼
Something like:
Maybe even ES6+:
There are many more things I see in this small piece of code that can be written in a more efficient way. So let's refactor it.