Merge pull request #688 from raunofreiberg/fix/footer-nav-links-title

fix: NavigationFooter links pull paginated title from nav metadata

src/components/MarkdownPage/MarkdownPage.js

@@ -31,6 +31,18 @@ type Props = {
   titlePostfix: string,
 };
 
+const getPageById = (sectionList: Array<Object>, templateFile: ?string) => {
+  if (!templateFile) {
+    return null;
+  }
+
+  const sectionItems = sectionList.map(section => section.items);
+  const flattenedSectionItems = [].concat.apply([], sectionItems);
+  const linkId = templateFile.replace('.html', '');
+
+  return flattenedSectionItems.find(item => item.id === linkId);
+};
+
 const MarkdownPage = ({
   authors = [],
   createLink,
@@ -45,6 +57,9 @@ const MarkdownPage = ({
   const hasAuthors = authors.length > 0;
   const titlePrefix = markdownRemark.frontmatter.title || '';
 
+  const prev = getPageById(sectionList, markdownRemark.frontmatter.prev);
+  const next = getPageById(sectionList, markdownRemark.frontmatter.next);
+
   return (
     <Flex
       direction="column"
@@ -123,13 +138,8 @@ const MarkdownPage = ({
         </Container>
       </div>
 
-      {/* TODO Read prev/next from index map, not this way */}
-      {(markdownRemark.frontmatter.next || markdownRemark.frontmatter.prev) && (
-        <NavigationFooter
-          location={location}
-          next={markdownRemark.frontmatter.next}
-          prev={markdownRemark.frontmatter.prev}
-        />
+      {(next || prev) && (
+        <NavigationFooter location={location} next={next} prev={prev} />
       )}
     </Flex>
   );

src/templates/components/NavigationFooter/NavigationFooter.js

@@ -45,8 +45,8 @@ const NavigationFooter = ({next, prev, location}) => {
                   css={{
                     paddingTop: 10,
                   }}>
-                  <PrimaryLink location={location} to={prev}>
-                    {linkToTitle(prev)}
+                  <PrimaryLink location={location} to={`${prev.id}.html`}>
+                    {prev.title}
                   </PrimaryLink>
                 </div>
               </div>
@@ -66,8 +66,8 @@ const NavigationFooter = ({next, prev, location}) => {
                   css={{
                     paddingTop: 10,
                   }}>
-                  <PrimaryLink location={location} to={next}>
-                    {linkToTitle(next)}
+                  <PrimaryLink location={location} to={`${next.id}.html`}>
+                    {next.title}
                   </PrimaryLink>
                 </div>
               </div>
@@ -80,14 +80,18 @@ const NavigationFooter = ({next, prev, location}) => {
 };
 
 NavigationFooter.propTypes = {
-  next: PropTypes.string,
-  prev: PropTypes.string,
+  next: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  }),
+  prev: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  }),
 };
 
 export default NavigationFooter;
 
-const linkToTitle = link => link.replace(/-/g, ' ').replace('.html', '');
-
 const PrimaryLink = ({children, to, location}) => {
   // quick fix
   // TODO: replace this with better method of getting correct full url
@@ -97,7 +101,6 @@ const PrimaryLink = ({children, to, location}) => {
     <Link
       css={{
         display: 'inline',
-        textTransform: 'capitalize',
         borderColor: colors.subtle,
         transition: 'border-color 0.2s ease',
         fontSize: 30,