Fix for wrong cover url on pagination

Author: thandaanda

gatsby-wordpress-theme-libre/gatsby-node.js

@@ -258,6 +258,8 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
             subscribeWidget {
               visible
             }
+            coverUrl
+            siteUrl
           }
         }
 
@@ -280,6 +282,8 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   const pages = result.data.allWordpressPage.edges;
   const siteTitle = result.data.site.siteMetadata.siteTitle;
   const subscribeWidget = result.data.site.siteMetadata.subscribeWidget;
+  const siteUrl =  result.data.site.siteMetadata.siteUrl;
+  const coverUrl =  result.data.site.siteMetadata.coverUrl;
 
   posts.forEach((post, i, arr) => {
     createPage({
@@ -342,6 +346,10 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     items: posts,
     itemsPerPage: postsPerPage,
     component: indexTemplate,
+    context: {
+      coverUrl: coverUrl,
+      siteUrl: siteUrl
+    },
     pathPrefix: ({ pageNumber }) => {
       if (pageNumber === 0) {
         return `/`;

gatsby-wordpress-theme-libre/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbox-co/gatsby-wordpress-theme-libre",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "license": "MIT",
   "resolutions": {
     "sharp": "0.23.4"

gatsby-wordpress-theme-libre/src/templates/index.js

@@ -6,22 +6,24 @@ import Pagination from "../components/pagination";
 import Footer from "../components/footer";
 import WebsiteMeta from "../components/meta/website-meta";
 import { Link } from "gatsby";
+import url from "url";
 
 const Index = ({ data, pageContext }) => {
+  const {coverUrl, siteUrl} = pageContext
   return (
     <>
       <Layout>
         <WebsiteMeta />
         <div className="home blog wp-embed-responsive">
           <div id="page" className="hfeed site">
-            {data.site.siteMetadata.coverUrl && (
+            {coverUrl && (
               <div
                 className="custom-header-container"
                 style={{ height: "200px" }}
               >
                 <Link to="/" rel="home">
                   <img
-                    src={data.site.siteMetadata.coverUrl}
+                    src={url.resolve(siteUrl,coverUrl)}
                     alt=""
                     className="custom-header"
                   />
@@ -62,11 +64,5 @@ export const pageQuery = graphql`
         }
       }
     }
-
-    site {
-      siteMetadata {
-        coverUrl
-      }
-    }
   }
 `;