From dfeea37ac3e64b40752fb399d8c9d161ded71169 Mon Sep 17 00:00:00 2001
From: Florian Kissling <21834+fk@users.noreply.github.com>
Date: Fri, 14 Sep 2018 13:33:35 +0200
Subject: [PATCH] [www] Fix header background for paginated "Blog" pages
 (#8042)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Move paginated blog pages from e.g. `/blog/2` to `/blog/page/2`

and fix header background for those pages.

* Fix navigating to page 1 (`/blog/`)

Thanks @pieh, @NickyMeuleman and @DSchau! 🙏
---
 www/gatsby-node.js                     | 2 +-
 www/src/components/navigation.js       | 2 +-
 www/src/components/pagination/index.js | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/www/gatsby-node.js b/www/gatsby-node.js
index 4a2f61d302418..e3f5552d6679f 100644
--- a/www/gatsby-node.js
+++ b/www/gatsby-node.js
@@ -181,7 +181,7 @@ exports.createPages = ({ graphql, actions }) => {
 
       Array.from({ length: numPages }).forEach((_, i) => {
         createPage({
-          path: i === 0 ? `/blog` : `/blog/${i + 1}`,
+          path: i === 0 ? `/blog` : `/blog/page/${i + 1}`,
           component: slash(blogListTemplate),
           context: {
             limit: postsPerPage,
diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js
index 991dbf8fe6af6..95677f40f6ebc 100644
--- a/www/src/components/navigation.js
+++ b/www/src/components/navigation.js
@@ -30,7 +30,7 @@ const NavItem = ({ linkTo, children }) => (
 
 const Navigation = ({ pathname }) => {
   const isHomepage = pathname === `/`
-  const isBlog = pathname === `/blog/`
+  const isBlog = pathname === `/blog/` || pathname.indexOf(`/blog/page/`) === 0
 
   const socialIconsStyles = {
     ...styles.navItem,
diff --git a/www/src/components/pagination/index.js b/www/src/components/pagination/index.js
index 639f9b24fdd78..6cfc2cc278f17 100644
--- a/www/src/components/pagination/index.js
+++ b/www/src/components/pagination/index.js
@@ -8,17 +8,17 @@ import { options, rhythm } from "../../utils/typography"
 
 class Pagination extends React.Component {
   changePage = e => {
-    navigate(`/blog/${e.target.value}`)
+    navigate(e.target.value ? `/blog/page/${e.target.value}` : `/blog/`)
   }
   render() {
     const { numPages, currentPage } = this.props.context
     const isFirst = currentPage === 1
     const isLast = currentPage === numPages
     const prevPageNum =
-      currentPage - 1 === 1 ? `` : (currentPage - 1).toString()
+      currentPage - 1 === 1 ? `` : `page/${(currentPage - 1).toString()}`
     const nextPageNum = (currentPage + 1).toString()
     const prevPageLink = isFirst ? null : `/blog/${prevPageNum}`
-    const nextPageLink = isLast ? null : `/blog/${nextPageNum}`
+    const nextPageLink = isLast ? null : `/blog/page/${nextPageNum}`
 
     const prevNextLinkStyles = {
       "&&": {