chore(examples): Add @reach/skip-nav example #21107
Conversation
Co-Authored-By: LB <barth.laurie@gmail.com>
also add descriptive text for issue #5581
… lang attribute and title
… lang attribute and title
| @@ -0,0 +1,8 @@ | |||
| { | |||
There was a problem hiding this comment.
Does the example need this file?
| @@ -0,0 +1,6 @@ | |||
| # Client-only paths | |||
There was a problem hiding this comment.
You'll want to update this README to reflect what's in the package (and now I know which one was your starting point)! 😛
| @@ -0,0 +1,17 @@ | |||
| module.exports = { | |||
| siteMetadata: { | |||
| title: `Using @reach/skip-nav`, | |||
There was a problem hiding this comment.
I feel like there's more to communicate about this example's purpose. How about something like this?
| title: `Using @reach/skip-nav`, | |
| title: `Using @reach/skip-nav with client-side routing`, |
| }, | ||
| plugins: [ | ||
| { | ||
| resolve: `gatsby-plugin-typography`, |
There was a problem hiding this comment.
Does this example need the typography plugin?
| }, | ||
| // used to generate rewrites for client only paths | ||
| // on demo hosted on Netlify | ||
| `gatsby-plugin-netlify`, |
There was a problem hiding this comment.
These next two plugins can probably go away too.
| @@ -0,0 +1,11 @@ | |||
| // Implement the Gatsby API “onCreatePage”. This is | |||
| // called after every page is created. | |||
| exports.onCreatePage = ({ page, actions }) => { | |||
There was a problem hiding this comment.
I think this file can be excluded.
| { | ||
| "name": "gatsby-example-using-reach-skip-nav", | ||
| "private": true, | ||
| "description": "Gatsby example site demoing @reach/skip-nav", |
There was a problem hiding this comment.
| "description": "Gatsby example site demoing @reach/skip-nav", | |
| "description": "Gatsby example site demoing @reach/skip-nav and client-side routing", |
| @@ -0,0 +1,40 @@ | |||
| import Typography from "typography" | |||
There was a problem hiding this comment.
If you do end up removing the typography plugin, this file can go away too.
| @@ -0,0 +1,8 @@ | |||
| export const onRouteUpdate = ({ location, prevLocation }) => { | |||
There was a problem hiding this comment.
Maybe add a comment or two explaining what is happening in this file?
|
I'm going to close this PR and reopen one using a simpler starter |
Description
Add an example project showcasing how to leverage @reach/skip-nav to create the ideal navigation focus experience based on research done by @marcysutton and Fable Labs. The updated recommendation was recently added to our blog post on client-side routing in PR #20540. Because this isn't achievable at the framework level, we should show users how to implement it in their own projects.