Comments (5)
Oh that is super cool! Totally forgot we could use react context for this 🤔 Since this would be a bit of a refactor, I'll make an issue for it for safe keeping!
from blueprints.
Yay, happy to see this happening! Please don't feel like you have to keep any of these component names... NodeLink might have made sense for me, but it may not for anyone else. 😂 Maybe we call them PageLink, etc.?
Also, I think I may have discovered a better way to get the list of pages in Next.js, which should eliminate all of the pages hackiness that's happening.
from blueprints.
Oooh I would be very interested in hearing more!
from blueprints.
After hunting around GitHub and Spectrum, I found this thread which suggests that contexts can share data between server and client. If that's the case, then I think it looks something like this:
// pages/_document.js
import NextDocument from 'next/document'
import Pages from '../docs/pages'
export default Document extends NextDocument {
render() {
const {buildManifest} = this.props
return (
<Pages.Provider value={buildManifest.pages}>
...
</Pages.Provider>
)
}
// docs/components/SideNav.js
import Pages from '../docs/pages'
export default props => (
<Pages.Consumer>
{pages => (
// do something with the pages object
)}
</Pages.Consumer>
)
...and I guess only the components that need access to it would use <Pages.Consumer>
?
If contexts don't work across the server/client boundary, then we might need to wire up a slightly hackier solution, but it's got to be better than what we have now. 😬
from blueprints.
Maybe an HOC that wraps withRouter()
would be nice:
export function withPages(Component) {
return withRouter(props => (
<Pages.Consumer>{value => <Component pages={value} {...props} />}</Pages.Consumer>
))
}
from blueprints.
Related Issues (18)
- Consider using Context for pages functionality
- Hero Illustration
- Add edit link component
- NavDropdown Component
- Need location for tools docs HOT 1
- Responsive Header Navigation HOT 1
- Search performance
- Header links run into vertical scrollbar
- Add padding to CodeExample HOT 4
- Support for custom elements HOT 1
- Remove header link to `/team` HOT 1
- Support for table of contents (TOC)
- Bump up the contrast of the search input HOT 1
- Search performance HOT 2
- Bad styling on sidebar if the content is too short
- Render static versions of SVG animations server-side
- New Components Tracking Issue
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 blueprints.