Update examples app layout #218
Conversation
|
I checked this out on pages preview, but when I click on the components in the list they show a blank page, example: https://primer-0bb1136e55.drafts.github.io/primer-react/primer-react/components/Avatar I want us to make quite a few changes to the IA etc. so I'm not sure whether it makes sense to ship this without us discussing the broader docs design 🤔 |
examples/components.js
Outdated
| const ComponentPage = () => { | ||
| const basename = process.env.NODE_ENV === 'development' ? '/components' : '/primer-react/components' | ||
| export default function Components(props) { | ||
| const basename = process.env.NODE_ENV === 'development' ? '/components/' : '/primer-react/components/' |
There was a problem hiding this comment.
I think these changes might what's be breaking showing the components when clicking on them in the sidebar. x0 is very finicky with these things
|
Okay, so I think I fixed the linking problem. Turns out either with the updated x0 or the simplified Library component in this PR, we don't need to conditionally prefix the basename with The only thing that's funky is that the selected state of the top and side nav isn't applied when you link directly to, say, |
|
I think it would be good to sync back up about this after having a better idea of where we want to head with docs - could discuss in the component api review tomorrow? |
|
Closing in favor of #221 so we can review all that work in one place. |
This refactors our app layout with a sticky top nav and undoes the x0 Library styling with a simpler implementation that uses flexbox without
min-height: 100vhand independent scrolling on the sidenav and content. The tile ("Grid") view is gone (for now) too, in favor of some basic introductions on the Components and Demos landing pages. Fixes #217.Before:
After:
I've also simplified all of our example exports to just use the
export default {}form so that we don't have to name them, and made a bunch of other tweaks to our example code while I was in there. There are a bunch more code snippets that could use some nicer formatting, but that can happen later.