Skip to content

Commit 4455c3d

Browse files
bvaughnbvaughn
authored
Gatsby patch flarnie branch (#10842)
* [Gatsby Docs Update] Quick fix for 'prev' and 'next' urls **what is the change?:** We need to add the path to the 'prev' and 'next' urls **why make this change?:** So that these urls work! **test plan:** Manual testing **issue:** Checklist item in the gatsby wiki checklist - https://github.com/bvaughn/react/wiki/Gatsby-check-list * Fixed Installation page prev/next footers too
1 parent 954ad4b commit 4455c3d

File tree

3 files changed

+93
-83
lines changed

3 files changed

+93
-83
lines changed

‎www/src/components/MarkdownPage/MarkdownPage.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ const MarkdownPage = ({
108108
{/* TODO Read prev/next from index map, not this way */}
109109
{(markdownRemark.frontmatter.next || markdownRemark.frontmatter.prev) &&
110110
<NavigationFooter
111+
location={location}
111112
next={markdownRemark.frontmatter.next}
112113
prev={markdownRemark.frontmatter.prev}
113114
/>}

‎www/src/templates/components/NavigationFooter/NavigationFooter.js

Lines changed: 91 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -16,69 +16,71 @@ import PropTypes from 'prop-types';
1616
import React from 'react';
1717
import {colors, fonts, media} from 'theme';
1818

19-
const NavigationFooter = ({next, prev}) => (
20-
<div
21-
css={{
22-
background: colors.dark,
23-
color: colors.white,
24-
paddingTop: 50,
25-
paddingBottom: 50,
26-
}}>
27-
<Container>
28-
<Flex
29-
type="ul"
30-
halign="space-between"
31-
css={{
32-
[media.between('small', 'medium')]: {
33-
paddingRight: 240,
34-
},
19+
const NavigationFooter = ({next, prev, location}) => {
20+
return (
21+
<div
22+
css={{
23+
background: colors.dark,
24+
color: colors.white,
25+
paddingTop: 50,
26+
paddingBottom: 50,
27+
}}>
28+
<Container>
29+
<Flex
30+
type="ul"
31+
halign="space-between"
32+
css={{
33+
[media.between('small', 'medium')]: {
34+
paddingRight: 240,
35+
},
3536

36-
[media.between('large', 'largerSidebar')]: {
37-
paddingRight: 280,
38-
},
37+
[media.between('large', 'largerSidebar')]: {
38+
paddingRight: 280,
39+
},
3940

40-
[media.between('largerSidebar', 'sidebarFixed', true)]: {
41-
paddingRight: 380,
42-
},
43-
}}>
44-
<Flex basis="50%" type="li">
45-
{prev &&
46-
<div>
47-
<SecondaryLabel>Previous article</SecondaryLabel>
48-
<div
49-
css={{
50-
paddingTop: 10,
51-
}}>
52-
<PrimaryLink to={prev}>
53-
{linkToTitle(prev)}
54-
</PrimaryLink>
41+
[media.between('largerSidebar', 'sidebarFixed', true)]: {
42+
paddingRight: 380,
43+
},
44+
}}>
45+
<Flex basis="50%" type="li">
46+
{prev &&
47+
<div>
48+
<SecondaryLabel>Previous article</SecondaryLabel>
49+
<div
50+
css={{
51+
paddingTop: 10,
52+
}}>
53+
<PrimaryLink location={location} to={prev}>
54+
{linkToTitle(prev)}
55+
</PrimaryLink>
56+
</div>
57+
</div>}
58+
</Flex>
59+
{next &&
60+
<Flex
61+
halign="flex-end"
62+
basis="50%"
63+
type="li"
64+
css={{
65+
textAlign: 'right',
66+
}}>
67+
<div>
68+
<SecondaryLabel>Next article</SecondaryLabel>
69+
<div
70+
css={{
71+
paddingTop: 10,
72+
}}>
73+
<PrimaryLink location={location} to={next}>
74+
{linkToTitle(next)}
75+
</PrimaryLink>
76+
</div>
5577
</div>
56-
</div>}
78+
</Flex>}
5779
</Flex>
58-
{next &&
59-
<Flex
60-
halign="flex-end"
61-
basis="50%"
62-
type="li"
63-
css={{
64-
textAlign: 'right',
65-
}}>
66-
<div>
67-
<SecondaryLabel>Next article</SecondaryLabel>
68-
<div
69-
css={{
70-
paddingTop: 10,
71-
}}>
72-
<PrimaryLink to={next}>
73-
{linkToTitle(next)}
74-
</PrimaryLink>
75-
</div>
76-
</div>
77-
</Flex>}
78-
</Flex>
79-
</Container>
80-
</div>
81-
);
80+
</Container>
81+
</div>
82+
);
83+
};
8284

8385
NavigationFooter.propTypes = {
8486
next: PropTypes.string,
@@ -89,31 +91,37 @@ export default NavigationFooter;
8991

9092
const linkToTitle = link => link.replace(/-/g, ' ').replace('.html', '');
9193

92-
const PrimaryLink = ({children, to}) => (
93-
<Link
94-
css={{
95-
display: 'inline',
96-
textTransform: 'capitalize',
97-
borderColor: colors.subtle,
98-
transition: 'border-color 0.2s ease',
99-
fontSize: 30,
100-
borderBottomWidth: 1,
101-
borderBottomStyle: 'solid',
94+
const PrimaryLink = ({children, to, location}) => {
95+
// quick fix
96+
// TODO: replace this with better method of getting correct full url
97+
const updatedUrl =
98+
(location && location.pathname.replace(/\/[^/]+\.html/, '/' + to)) || to;
99+
return (
100+
<Link
101+
css={{
102+
display: 'inline',
103+
textTransform: 'capitalize',
104+
borderColor: colors.subtle,
105+
transition: 'border-color 0.2s ease',
106+
fontSize: 30,
107+
borderBottomWidth: 1,
108+
borderBottomStyle: 'solid',
102109

103-
[media.lessThan('large')]: {
104-
fontSize: 24,
105-
},
106-
[media.size('xsmall')]: {
107-
fontSize: 16,
108-
},
109-
':hover': {
110-
borderColor: colors.white,
111-
},
112-
}}
113-
to={to}>
114-
{children}
115-
</Link>
116-
);
110+
[media.lessThan('large')]: {
111+
fontSize: 24,
112+
},
113+
[media.size('xsmall')]: {
114+
fontSize: 16,
115+
},
116+
':hover': {
117+
borderColor: colors.white,
118+
},
119+
}}
120+
to={updatedUrl}>
121+
{children}
122+
</Link>
123+
);
124+
};
117125

118126
const SecondaryLabel = ({children}) => (
119127
<div

‎www/src/templates/installation.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,7 @@ class InstallationPage extends Component {
196196
{/* TODO Read prev/next from index map, not this way */}
197197
{(markdownRemark.frontmatter.next || markdownRemark.frontmatter.prev) &&
198198
<NavigationFooter
199+
location={location}
199200
next={markdownRemark.frontmatter.next}
200201
prev={markdownRemark.frontmatter.prev}
201202
/>}

0 commit comments

Comments
 (0)