Comments (14)
@adonig this was brought up recently. I have not had time to check into yet. I will try to look into it asap. Thanks for the issue!
from gatsby-plugin-breadcrumb.
@adonig are your path segments that need the Labels updated pages that you create using createPages
?
from gatsby-plugin-breadcrumb.
@sbardian Yes. I use useAutoGen=true
and have categories of things with slugs like /<name-of-category>/<name-of-thing>/
. I override the crumbLabel for the things with their title dynamically but the link pointing to the category on the thing page still has an incorrect label. That's why I have to maintain all categories in crumbLabelUpdates.
I had a look at the plugin's gatsby-node.js yesterday. If I understand correctly, we could maybe make it possible to get the crumbLabel for a node with a getter or even allow the users to set the label in their gatsby-node.js as long as they create the pages in the right order (sort by depth).
from gatsby-plugin-breadcrumb.
@sbardian I wrote some code that allows people to set the crumbLabel in the page context, see here:
https://github.com/adonig/gatsby-plugin-breadcrumb/blob/develop/src/gatsby-node.js
If you are interested, I can make it a pull request.
from gatsby-plugin-breadcrumb.
@adonig let me check this out. There have been a couple ideas on how to go about this. Let me noddle it and see what we can land on. Thanks!
from gatsby-plugin-breadcrumb.
@adonig are your path segments that need the Labels updated pages that you create using
createPages
?
@adonig and I guess my question here, is more about, the pages that include your paths that need updating, did you create them using your projects gatsby-node.js and implementing createPages
? Say using a template page /etc.
from gatsby-plugin-breadcrumb.
did you create them using your projects gatsby-node.js and implementing createPages? Say using a template page /etc.
@sbardian Yes, exactly. I create them in gatsby-node.js using gatsby-transformer-csv.
from gatsby-plugin-breadcrumb.
Ok, so in this case I had a similar idea to what you have done. Though not everyone is creating them this way, and I want to try to avoid many different ways to update the Label of path segments. Been pretty busy but let me give it some more thought and see, it might be time that we ditch the crumbLabelUpdates
for something else all together.
Other ideas were to include it in maybe a frontmatter on each page, but that would require a rewrite of the plugin to use createPages
instead of onCreatePage
and also force a dependency on two other plugins (gatsby-transformer-javascript-frontmatter
, and gatsby-source-filesystem
), would like to avoid this as well.
from gatsby-plugin-breadcrumb.
@adonig if you have your own pages serving up label updates in the page context, it should flow through to the page / page template as I only add on the breadcrumb to the context.
You could perform the label updates in the page/page template on the breadcrumb object I pass through before sending the crumbs on to the <Breadcrumb/>
component or your own custom Breadcrumb component.
This would get you by while waiting for a feature update. Just a thought I had, so this isn't a bottleneck to you going forward.
from gatsby-plugin-breadcrumb.
@sbardian I'm currently using my fork.
https://github.com/adonig/gatsby-plugin-breadcrumb/blob/develop/src/gatsby-node.js
Maybe I can quickly explain what it does.
So what I'm doing here, is setting the crumb labels in the page context in my project's gatsby-node.js. I changed gatsby-plugin-breadcrumb's gatsby-node.js to read any crumb labels from the page context before setting the breadcrumbs.
Because the page context is only available for the current page, what is missing are the crumb labels for the path components. For example if we have /<category>/<thing>/
, then we know the crumb label for the thing page, but not the one for category page.
That's why I introduced a global Map to memorize crumb label updates in the first line.
const crumbLabelUpdates = new Map() // mapping pathname without trailing slash to crumbLabel
That way, if the pages are created in the right order (ascending by path depth), it's possible to store the crumb label for the category page and use it later.
Then I still want the crumb label updates from the config to work, because I use those for the pages I create from the filesystem, i.e. the imprint or something like that. So during the initial execution I read those from the config and add them to the global map.
const optionsActual = { ...defaultOptions, ...pluginOptions }
const {
crumbLabelUpdates: configCrumbLabelUpdates,
trailingSlashes,
} = optionsActual
// import the crumbLabelUpdates from the config on the first execution
if (crumbLabelUpdates.size === 0) {
configCrumbLabelUpdates.forEach(({ pathname, crumbLabel }) => {
// regex removes any trailing slashes from any pathname besides /
crumbLabelUpdates.set(pathname.replace(/\/$/, ''), crumbLabel)
})
}
Now if the page isn't excluded and there is not already a crumb label update from the config, we add the crumb label from the page context to the map (maybe it makes sense to override the ones from the config, something to think about).
// for pages not excludecd, create crumbs out of each section of the page path
if (!optionsActual.exclude.includes(page.path)) {
// if crumbLabel is in the page context, add it to crumbLabelUpdates
const { context: oldPageContext } = page
if (typeof oldPageContext.crumbLabel !== 'undefined') {
const pathname = page.path.replace(/\/$/, '') // see above
if (!crumbLabelUpdates.has(pathname)) {
crumbLabelUpdates.set(pathname, oldPageContext.crumbLabel)
}
}
Finally if there's a matching crumb label update in the map, override the auto-generated crumb label accordingly.
// remaining sections of path
acc += `/${split}`
// update crumbLabel for any crumbLabelUpdates
let crumbLabel = split
if (crumbLabelUpdates.has(acc)) {
crumbLabel = crumbLabelUpdates.get(acc)
}
If I understand correctly what the plugin did before, that approach does not break anything. As long as you don't set the crumb label in the page context, nothing happens.
from gatsby-plugin-breadcrumb.
@adonig yup that description matches what I thought you were doing. I would like to spend some time thinking about it, as it solves for your specific use case, which is great, but I don't want to implement 4 ways to handle this specific to 4 different ways people may currently have label updates.
It may be that everyone is doing something similar to you, just not sure at this point. That being said I'll spend some time, and it might be we implement something like you have here as it does appear to work/etc.
Thanks for taking the time! I'm currently doing some job hunt stuff because of COVID so hope to get back soon.
from gatsby-plugin-breadcrumb.
@sbardian Any news about this? I really need this with gatsby-source-wordpress
.
from gatsby-plugin-breadcrumb.
Is there a solution for this?
from gatsby-plugin-breadcrumb.
Related Issues (20)
- Unclear styling option rtfm HOT 6
- Allow use of wildcards/regex in "exclude" configuration option HOT 2
- Breadcrumb texts get confused with rerender HOT 5
- Action Required: Fix Renovate Configuration HOT 1
- TypeScript support HOT 4
- Support for gatsby v3 HOT 2
- Plugin gatsby-plugin-breadcrumb is not compatible with your gatsby version 3.1.0 - It requires [email protected] HOT 1
- Problems with `pathPrefix` HOT 4
- Plugin gatsby-plugin-breadcrumb is not compatible with your gatsby version 2.32.9 - It requires gatsby@^3.0.0 HOT 3
- I am having this unexpected behavior as well and the demo seems to be having the same issue HOT 8
- Dependency Dashboard
- warning Plugin gatsby-plugin-breadcrumb is not compatible with your gatsby version 4.2.0 - It requires gatsby@^3.0.0 HOT 9
- possibility of resetting the first path if it is changed HOT 4
- Plugin gatsby-plugin-breadcrumb is not compatible with your gatsby version 5.5.0 - It requires gatsby@^3.0.0 || ^4.0.0 HOT 5
- Unit Test failed with: TypeError: Cannot read properties of undefined (reading 'pathname') HOT 10
- Gatsby v5 support HOT 2
- Test action
- Test greeting
- build failed HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-plugin-breadcrumb.