Possibility of Automatically Generated crumbLabelUpdates

[adonig]

Currently I have to hardcode a lot of crumbLabelUpdates in gatsby-config.js and whenever the data changes, I also have to check whether those are still correct. Is there a way to generate the crumbLabelUpdates in gatsby-node.js?

[sbardian]

@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!

[sbardian]

@adonig are your path segments that need the Labels updated pages that you create using createPages ?

[adonig]

@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).

[adonig]

@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.

[sbardian]

@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!

[sbardian]

@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.

[adonig]

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.

[sbardian]

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.

[sbardian]

@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.

[adonig]

@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.

[sbardian]

@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.

[arjendejong12]

@sbardian Any news about this? I really need this with gatsby-source-wordpress.

[emanuelstrom]

Is there a solution for this?

[rinat-lucky]

@sbardian Any news about this?