Am getting double names in the url

[sbardian]

Am getting double names in the url

[sbardian]

@davidkartuzinski thanks for the issue! I'll take a look and get back to you!

[sbardian]

@davidkartuzinski well, the issue is you are trusting my example of a customCrumbLabel from the docs to work with your app :)

this line:
https://github.com/davidkartuzinski/1001teafacts/blob/8a647f9f3f890d0832edadf43e05daccbfa10314/src/templates/tags.js#L20

and this line:
https://github.com/davidkartuzinski/1001teafacts/blob/8a647f9f3f890d0832edadf43e05daccbfa10314/src/templates/categories.js#L20

In your situation on this template, that is getting you the full path instead of the last section (crumb) of the path.

Try something like this instead, note: this will only get the last crumb section of the path in this template situation. (ie path of /tags/ginger-tea)

const [, , customCrumbLabel] = location.pathname.split("/")
// you can now manipulate customCrumbLabel here ex: customCrumbLabel.replace('-', ' ') 

If this fixes you up (it should) feel free to close the issue or let me know and I can close it up.

I'll review those docs and see if I can tweak them to make them better. Any suggestions welcome on that if you have any ideas to clear things up.
thanks!

[davidkartuzinski]

@sbardian Thank you. This code definitely solved the issue. I would love to try and make a pull request on the docs, however, I am not sure if I fully understand why the solution works, and therefore not sure if I can do a good job. Could you confirm my understanding below? and then I can propose something to you for the docs.

Looking at this snippet:

const [,  , customCrumbLabel] = location.pathname.split("/")

From what I understand, the plugin is using the location object to create the customCrumbLabel. The location from the gatsby.node.js file is reporting this object:

{
href: "http://localhost:8000/tags/digestion/", ancestorOrigins: DOMStringList, origin: "http://localhost:8000", protocol: "http:", host: "localhost:8000", …}
href: "http://localhost:8000/tags/digestion/"
ancestorOrigins: DOMStringList {length: 0}
origin: "http://localhost:8000"
protocol: "http:"
host: "localhost:8000"
hostname: "localhost"
port: "8000"
pathname: "/tags/digestion/"
search: ""
hash: ""
assign: ƒ assign()
reload: ƒ reload()
toString: ƒ toString()
replace: ƒ replace()
state: null
key: "initial"
__proto__: Object
}

The "problem" is that the breadCrumb is then created from pageContext, which returns as:

{
tag: "digestion", breadcrumb: {…}}
tag: "digestion"
breadcrumb: {location: "/tags/digestion/", crumbs: Array(3)}
__proto__: Object
}

... and we want only "digestion".

So by splitting the location/pathname /tags/digestion at the "/" the value of customCrumbLabel becomes digestion". Which we then add the existing "crumbs" and get the correct value. (The array becomes ["", "tags", "digestion", ""]```.

Which is why later in the component it works for crumbLabel={customCrumbLabel}.

--

After typing all this out, it seems correct to me. And really just about understanding JavaScript. I would dare say that maybe the docs don't need to be changed and if anyone has this issue, they will probably just find this issue?

I am closing the issue as the issue is closed and will see what you want me to do. Thank you very much.

[sbardian]

@davidkartuzinski no problem. I'll look into removing or just making that line in the example a note, that might help. thanks!