Comments (10)
Yes totally okay to close issue! Consider it done.
from gatsby-plugin-breadcrumb.
@davidkartuzinski so in version 9.0.1 useClassNames
is gone. Since I'm not doing any inline css anymore there was no longer a need for it. It just removed inline css and let you style via the class names. Let me look into what you are experiencing with the active link.
from gatsby-plugin-breadcrumb.
@davidkartuzinski as far as I can tell, if you take the trailing / off the url it matches and applies the breadcrumb__link__active
class. gatsby-plugin-breadcrumb
uses Gatsby's (Reach Router's) <Link/>
component. The to
prop has to match the url to be considered "active". I think there are levels of acceptable matching we could play with, if we would like it to match less restrictively, but I think that is why the trailing /
in the url wasn't giving you the active class on the breadcrumb. . .
let me know if you find the same behavior.
from gatsby-plugin-breadcrumb.
Yes yes, that is exactly the issue. the "/" is not always at the end of the URL which is why I am seeing different behaviour. Clicking around my site, some of my URLs have the trailing slash and some don't (ie. Tags and Categories) and when the trailing slash is not there, the active Class works great.
I can see how to have all my URLs have the trailing slash. I don't know how to easily remove the trailing slash which is generated automatically by the onCreateNode function (I suppose createFilePath is more accurate). From the gatsby-node.js.
I think personally I would like to standardise this through my site by having trailing slashes every time. But I think the average programmer isn't going to notice, read the docs (if we added it) and just end up blaming the plugin. Which is bad.
So I conclude that allowing for either scenario is probably a good idea for DX.
EDIT: If you wanted to be the ultimate "Rock Star" you could provide an option for either scenario or both. And I assume careful programmers will pay attention and settle on one scenario.
-DK
from gatsby-plugin-breadcrumb.
@davidkartuzinski let me look into what I might be able to do on the plugin end. If you are in a hurry you might be able to use gatsby-plugin-remove-trailing-slashes
(https://www.gatsbyjs.org/packages/gatsby-plugin-remove-trailing-slashes/). This would remove all the trailing slashes of your paths so your urls match up. This used to be a requirement of the plugin, maybe I could mention this in the docs if people have trailing slashes in their app? I will also see if I can add a prop for Reach Routers getProps
option.
from gatsby-plugin-breadcrumb.
@davidkartuzinski I think we are already good. Try adding this function to the code where you are using the <Breadcrumb>
component.
const isPartiallyActive = ({ isPartiallyCurrent, isCurrent }) => {
return isPartiallyCurrent && isCurrent
? { className: "breadcrumb__link breadcrumb__link__active" }
: {}
}
Then pass the following prop to the <Breadcrumb>
component:
getProps={isPartiallyActive}
<Breadcrumb
crumbs={crumbs}
crumbLabel={crumbLabel}
getProps={isPartiallyActive}
/>
Or just use the gatsby-plugin-remove-trailing-slashes
in your case. I'm going to work on updating the README in my plugin to mention these options.
from gatsby-plugin-breadcrumb.
@davidkartuzinski see the updated README Gotchas. Let me know what you think.
from gatsby-plugin-breadcrumb.
@sbardian - Thank you for your attention to this. I definitely think the const isPartiallyActive
to be a bit "hacky" and would rather not.
In fact the actual problem is this piece of code:
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `Mdx`) {
const slug = createFilePath({ node, getNode, basePath: `pages` })
createNodeField({
node,
name: `slug`,
value: slug,
})
}
}
This generates a slug with a trailing slash and is use in two major places. The blog roll and tags/categories. The other links like menu or prev/next, etc are being generated from the frontmatter and can or cannot have the trailing slash.
Therefore, you made me think and I came up with this const slug = createFilePath({ node, getNode, basePath:
pages }).replace(/\/$/,"")
This removes the trailing slash from the slug and the full function now looks like this:
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `Mdx`) {
const slug = createFilePath({ node, getNode, basePath: `pages` }).replace(
/\/$/,
""
)
createNodeField({
node,
name: `slug`,
value: slug,
})
}
}
I then removed all trailing slashes I had put in earlier haha, and now the activeClass works perfectly everywhere! https://gatsby-theme-naked.netlify.com/
I think most people are using the original function as it's in the docs and most of the themes I looked it and maybe this could also be an option or perhaps THE option if people are running into this situation.
This is the least amount of code.
Anyway, I don't have the overview you have, and maybe I am the only one with this issue!? In either case, thank you. And I have already started on the post for the community from you.
-DK
from gatsby-plugin-breadcrumb.
I forgot to mention, I think your Readme is super clear. And I wouldn't change a word. (Except to add the above if you think it's valuable)? @sbardian
from gatsby-plugin-breadcrumb.
@davidkartuzinski yeah the getProps
prop is part of the <Link>
API from Reach Router so not much we can do about how it works (other than creating better functions for the logic it performs).
I think with all the different ways to create pages/and their URLs in gatsby, everyone could end up with one result or another. So adding the gotcha and the info there should help people decide on a path to take, just as you have. Update the URLs on pages they are creating themselves, use one of the other options on things they don't create/have control over/use gatsby-plugin-remove-trailing-slashes
/etc..
Thanks for working on the blog post! Can't wait to see it.
Are we ok to close this issue out?
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
- Possibility of Automatically Generated crumbLabelUpdates HOT 14
- 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.