Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added skip-nav to missing pages #23770

Closed
wants to merge 6 commits into from
Closed

added skip-nav to missing pages #23770

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
adac78c
added reach-skip-nav
Wu-Bowen May 5, 2020
ab030e8
added SkipNavContent component to missing pages
Wu-Bowen May 6, 2020
7b0d03a
Added MainContent Component
Wu-Bowen May 14, 2020
bfe7b65
formatting changes and added converted some files
Wu-Bowen May 15, 2020
deb1a8b
removed fragment
Wu-Bowen May 15, 2020
548b3ce
Merge branch 'master' into master
Wu-Bowen May 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions www/src/pages/404.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import FooterLinks from "../components/shared/footer-links"
export default function FourOhFour() {
return (
<>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need this fragment any more since everything is wrapped in a <Main> tag.

<main id={`reach-skip-nav`}>
<Container>
<h1>Page not found</h1>
<p>Oops! The page you are looking for has been removed or relocated.</p>
Expand All @@ -14,6 +15,7 @@ export default function FourOhFour() {
</Link>
</Container>
<FooterLinks />
</main>
</>
)
}
192 changes: 97 additions & 95 deletions www/src/pages/blog/tags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,102 +116,104 @@ class TagsPage extends React.Component {
})

return (
<Container>
<PageMetadata
title="Tags"
description={`Find case studies, tutorials, and more about Gatsby related topics by tag`}
/>
<div>
<h1
css={{
padding: `${space[6]} 0`,
margin: 0,
borderBottom: `1px solid ${colors.ui.border}`,
}}
>
Tags ({Object.keys(uniqGroup).length || 0})
</h1>
<div />
<h2>Popular tags</h2>
<PopularTagGrid>{PopularTagButtons}</PopularTagGrid>
<div
sx={{
display: `flex`,
flexFlow: `row nowrap`,
justifyContent: `space-between`,
pb: 4,
alignItems: `center`,
}}
>
<h2>All tags</h2>
<label css={{ position: `relative` }}>
<input
sx={{ ...themedInput, pl: 7 }}
id="tagsFilter"
name="filterQuery"
type="search"
placeholder="Search tags"
aria-label="Tag Search"
title="Filter tag list"
value={filterQuery}
onChange={this.handleChange}
/>
<SearchIcon />
</label>
</div>
<ul
sx={{
display: `flex`,
flexFlow: `row wrap`,
justifyContent: `start`,
p: 0,
m: 0,
}}
>
{results.length > 0 ? (
results.map(key => {
const tag = uniqGroup[key]
const firstLetter = tag.fieldValue.charAt(0).toLowerCase()
const buildTag = (
<li
key={tag.fieldValue}
sx={{
py: 3,
px: 1,
m: 4,
listStyleType: `none`,
}}
>
<Link to={tag.slug}>
{tag.fieldValue} ({tag.totalCount})
</Link>
</li>
)

if (currentLetter !== firstLetter) {
currentLetter = firstLetter
return (
<React.Fragment key={`letterheader-${currentLetter}`}>
<h4 sx={{ width: `100%`, flexBasis: `100%` }}>
{currentLetter.toUpperCase()}
</h4>
{buildTag}
</React.Fragment>
<main id={`reach-skip-nav`}>
<Container>
<PageMetadata
title="Tags"
description={`Find case studies, tutorials, and more about Gatsby related topics by tag`}
/>
<div>
<h1
css={{
padding: `${space[6]} 0`,
margin: 0,
borderBottom: `1px solid ${colors.ui.border}`,
}}
>
Tags ({Object.keys(uniqGroup).length || 0})
</h1>
<div />
<h2>Popular tags</h2>
<PopularTagGrid>{PopularTagButtons}</PopularTagGrid>
<div
sx={{
display: `flex`,
flexFlow: `row nowrap`,
justifyContent: `space-between`,
pb: 4,
alignItems: `center`,
}}
>
<h2>All tags</h2>
<label css={{ position: `relative` }}>
<input
sx={{ ...themedInput, pl: 7 }}
id="tagsFilter"
name="filterQuery"
type="search"
placeholder="Search tags"
aria-label="Tag Search"
title="Filter tag list"
value={filterQuery}
onChange={this.handleChange}
/>
<SearchIcon />
</label>
</div>
<ul
sx={{
display: `flex`,
flexFlow: `row wrap`,
justifyContent: `start`,
p: 0,
m: 0,
}}
>
{results.length > 0 ? (
results.map(key => {
const tag = uniqGroup[key]
const firstLetter = tag.fieldValue.charAt(0).toLowerCase()
const buildTag = (
<li
key={tag.fieldValue}
sx={{
py: 3,
px: 1,
m: 4,
listStyleType: `none`,
}}
>
<Link to={tag.slug}>
{tag.fieldValue} ({tag.totalCount})
</Link>
</li>
)
}
return buildTag
})
) : (
<h4>
No tags found for &quot;
{filterQuery}
&quot; 😔
</h4>
)}
</ul>
</div>
<FooterLinks />
</Container>

if (currentLetter !== firstLetter) {
currentLetter = firstLetter
return (
<React.Fragment key={`letterheader-${currentLetter}`}>
<h4 sx={{ width: `100%`, flexBasis: `100%` }}>
{currentLetter.toUpperCase()}
</h4>
{buildTag}
</React.Fragment>
)
}
return buildTag
})
) : (
<h4>
No tags found for &quot;
{filterQuery}
&quot; 😔
</h4>
)}
</ul>
</div>
<FooterLinks />
</Container>
</main>
)
}
}
Expand Down
28 changes: 15 additions & 13 deletions www/src/pages/ecosystem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,19 +46,21 @@ class EcosystemPage extends Component {
const boardIcons = { plugins: PluginsIcon, starters: StartersIcon }

return (
<Layout
location={location}
pageTitle={pageTitle}
pageIcon={EcosystemIcon}
>
<PageMetadata title="Ecosystem" />
<EcosystemBoard
icons={boardIcons}
starters={starters}
plugins={plugins}
/>
<FooterLinks />
</Layout>
<main id={`reach-skip-nav`}>
<Layout
location={location}
pageTitle={pageTitle}
pageIcon={EcosystemIcon}
>
<PageMetadata title="Ecosystem" />
<EcosystemBoard
icons={boardIcons}
starters={starters}
plugins={plugins}
/>
<FooterLinks />
</Layout>
</main>
)
}
}
Expand Down
74 changes: 38 additions & 36 deletions www/src/templates/tags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,43 +32,45 @@ const Tags = ({ pageContext, data }) => {
const doc = TAGS_AND_DOCS.get(tags[0])

return (
<Container>
<PageMetadata
title={`${preferSpacedTag(tags)} Tag`}
description={`Case studies, tutorials, and other posts about Gatsby related to ${preferSpacedTag(
tags
)}`}
/>
<h1>{tagHeader}</h1>
<Button
variant="small"
key="blog-post-view-all-tags-button"
to="/blog/tags"
>
View all tags <TagsIcon />
</Button>
{doc ? (
<React.Fragment>
<span css={{ margin: 5 }} />
<Button
variant="small"
secondary
key={`view-tag-docs-button`}
to={doc}
>
Read the documentation <TiArrowRight />
</Button>
</React.Fragment>
) : null}
{nodes.map(node => (
<BlogPostPreviewItem
post={node}
key={node.fields.slug}
sx={{ my: 9 }}
<main id={`reach-skip-nav`}>
<Container>
<PageMetadata
title={`${preferSpacedTag(tags)} Tag`}
description={`Case studies, tutorials, and other posts about Gatsby related to ${preferSpacedTag(
tags
)}`}
/>
))}
<FooterLinks />
</Container>
<h1>{tagHeader}</h1>
<Button
variant="small"
key="blog-post-view-all-tags-button"
to="/blog/tags"
>
View all tags <TagsIcon />
</Button>
{doc ? (
<React.Fragment>
<span css={{ margin: 5 }} />
<Button
variant="small"
secondary
key={`view-tag-docs-button`}
to={doc}
>
Read the documentation <TiArrowRight />
</Button>
</React.Fragment>
) : null}
{nodes.map(node => (
<BlogPostPreviewItem
post={node}
key={node.fields.slug}
sx={{ my: 9 }}
/>
))}
<FooterLinks />
</Container>
</main>
)
}

Expand Down
2 changes: 1 addition & 1 deletion www/src/templates/template-contributor-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ class ContributorPageTemplate extends React.Component {
)

return (
<main>
<main id={`reach-skip-nav`}>
<PageMetadata
title={`${contributor.id} - Contributor`}
description={contributor.bio}
Expand Down
3 changes: 2 additions & 1 deletion www/src/templates/template-creator-details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,8 @@ class CreatorTemplate extends Component {
alignItems: `flex-start`,
},
}}
>
id={`reach-skip-nav`}
>
<div
sx={{
m: 6,
Expand Down
2 changes: 1 addition & 1 deletion www/src/templates/template-feature-comparison.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ class FeatureComparison extends Component {
<PageWithSidebar location={location}>
<PageMetadata title={titleString} />
<Container>
<main>
<main id={`reach-skip-nav`}>
<Breadcrumb location={location} />
<h1>{titleString}</h1>
{options.map(o => (
Expand Down
Loading