add pagination on blog page

content/pages/blog/blog.md

----
-title: NewBlog
-slug: newBlog
-cover: ./gatsby-cover.png
----
-
-# Lorem Ipsum

content/posts/2020-07-30-test1/index.md

 ---
 title: test rss
 slug: test1 postacst
-date: 2020-07-30
+date: '2020-07-30'
 
 # optional fields
 

content/posts/2020-08-12-post-3/index.md

+---
+title: 'post-3'
+date: 2020-08-12
+slug:  'blog/post-3'
+
+# optional fields
+
+generate-card: false
+unlisted: false
+language: fr
+cover: ./cover.jpeg
+imageShare: ./cover.jpeg
+tags: ['test']
+
+---
+
+Lorem Ipsum

src/pages/blog/2020-07-27-first-frogit-post.md → content/posts/2020-09-02-freedom/index.mdx

 ---
-title: this post the first Froggit's post test
-slug: froggit-post-test
-date: 2020-07-27
+title: Freedom
+slug: freedom
+date: 2020-09-02
 
 # optional fields
-
+published: true
+unlisted: false
 generate-card: false
-cover: ./logo_froggit.png
 language: fr
+cover: ./cover.jpeg
 
-tags: ['fake']
+tags: ['Lydra']
 translations:
-  - link: '/froggit-post-test'
+  - link: 'https://lydra.fr/'
     language: 'french'
     hreflang: fr
 ---
-
-# Froggit's blog
-
-Our first post
-
-

content/posts/2020-07-27-first-froggit-post/index.md → content/posts/2020-09-02-froggit-securite/index.md

 ---
-title: this post the first Froggit's post test
-slug: froggit-post-test
-date: 2020-07-27
+title: Securité
+slug: securite
+date: 2020-09-02
 
 # optional fields
-
+published: true
+unlisted: false
 generate-card: false
-cover: ./logo_froggit.png
 language: fr
+cover: ./cover.jpeg
 
-tags: ['fake']
+tags: ['Lydra']
 translations:
-  - link: '/froggit-post-test'
+  - link: 'https://lydra.fr/'
     language: 'french'
     hreflang: fr
 ---
-
-# Froggit's blog
-
-Our first post
-
-

content/posts/lydra.md

+---
+title: https://lydra.fr/bonnes-pratiques-git-quel-flux-de-developpement-git-choisir/
+slug: https://lydra.fr/bonnes-pratiques-git-quel-flux-de-developpement-git-choisir/
+date: 2020-08-21
+
+# optional fields
+
+generate-card: false
+language: fr
+cover: ./cover.jpeg
+
+tags: ['Lydra']
+
+---

content/posts/post-1.md

+---
+title: 'post-1'
+date: '2020-08-10'
+slug:  post-1
+
+# optional fields
+
+generate-card: false
+unlisted: false
+language: fr
+cover: ./cover.jpeg
+imageShare: ./cover.jpeg
+tags: ['test']
+---
+
+Lorem ipsum
+

content/posts/post-2.md

+---
+title: 'post-2'
+date: '2020-08-12'
+slug:  post-2
+
+
+# optional fields
+
+generate-card: false
+unlisted: false
+language: fr
+cover: ./cover.jpeg
+imageShare: ./cover.jpeg
+tags: ['test']
+---
+
+Lorem Ipsum

data/siteConfig.js

@@ -3,7 +3,7 @@ module.exports = {
   siteDescription: "",
   authorName: "Lydra",
   twitterUsername: "art_devops",
-  authorAvatar: "avatar.jpeg", // file in content/images
+  authorAvatar: "logo_froggit.png", // file in content/images
   defaultLang: "fr", // show flag if lang is not default. Leave empty to enable flags in post lists
   authorDescription: `
   
@@ -14,7 +14,7 @@ module.exports = {
   //disqusSiteUrl: "https://www.maxpou.fr/",
   // Prefixes all links. For cases when deployed to maxpou.fr/gatsby-starter-morning-dew/
   pathPrefix: "/froggit.fr", // Note: it must *not* have a trailing slash.
-  siteCover: "cover-baymax.jpeg", // file in content/images
+  siteCover: "material.jpg", // file in content/images
   googleAnalyticsId: "UA-67868977-2",
   background_color: "#ffffff",
   theme_color: "#222222",
@@ -41,10 +41,12 @@ module.exports = {
       label: "Tarifs",
       url: "/tarifs",
     },
+    
     {
       label: "Blog",
       url: "/blog",
     },
+    
     {
       label: "Login",
       url: "/login",

gatsby-config.js

@@ -6,19 +6,12 @@ module.exports = {
     title: ``,
     author: config.authorName,
     description: config.siteDescription,
+    siteUrl: config.siteUrl,
     ...config,
   },
   pathPrefix: `/froggit.fr`,
   plugins: [
-    /*
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: "posts",
-        path: "content/posts",
-      },
-    },
-    */
+  
     {
       resolve: `gatsby-source-filesystem`,
       options: {
@@ -34,6 +27,7 @@ module.exports = {
         //path: "src/page/blog",
       },
     },
+  
     {
       resolve: `gatsby-source-filesystem`,
       options: {
@@ -62,7 +56,7 @@ module.exports = {
         defaultLayouts: {
           
           default: require.resolve("./src/templates/page.js"),
-          default: require.resolve("./src/pages/blog/index.js"),
+          //default: require.resolve("./src/pages/blog.js"),
           
         },
         gatsbyRemarkPlugins: [
@@ -100,70 +94,188 @@ module.exports = {
         trackingId: config.googleAnalyticsId,
       },
     },
-  
-    
+
+    /*
+    {
+      resolve: `gatsby-source-rss-feed`,
+      options: {
+        url: `https://www.gatsbyjs.org/blog/rss.xml`,
+        name: `GatsbyBlog`,
+        // Optional
+        // Read parser document: https://github.com/bobby-brennan/rss-parser#readme
+        parserOption: {
+          customFields: {
+            item: ['itunes:duration']
+          }
+        }
+      }
+    },
+*/
+
+/*
+{ 
+  resolve: '@uptimeventures/gatsby-source-rss',
+  options: {
+    feeds: ['https://www.uptime.ventures/blog/rss.xml'],
+  },
+},
+*/
+
+  /*
+                {
+                        resolve: 'gatsby-source-rss',
+                        options: {
+                                rssURL: 'https://lydra.fr/tag/froggit/feed/rss.xml'
+                        }
+                },
+  */
+
+ /*
     {
       resolve: `gatsby-plugin-feed`,
       options: {
+        setup: (options) => ({
+          ...options,
+          custom_namespaces: {
+            yournamespace: "https://lydra.fr/tag/froggit/feed/",
+          },
+        }),
+        feeds: [
+          {
+            serialize: ({
+              query: { allMarkdownRemark },
+            }) => {
+              return allMarkdownRemark.edges.map((edge) => {
+                return Object.assign(
+                  {},
+                  edge.node.frontmatter,
+                  {
+                    
+                    custom_elements: [
+                      //{ "content:encoded": edge.node.html },
+                      { "yournamespace:yourcustomfield": edge.node.fields.someField },
+                    ],
+                  }
+                );
+              });
+            },
+          },
+        ],
+        
+      },
+    },
+
+*/
+
+/*
+{
+  resolve: 'gatsby-source-rss',
+  options: {
+    rssURL: 'https://blog.jordanrhea.com/rss.xml',
+    customFields: {
+      item: ['tags'],
+    },
+  },
+},
+*/
+
+{
+  resolve: `gatsby-plugin-feed`,
+  options: {
+    query: `
+      {
+        site {
+          siteMetadata {
+            title
+            description
+            siteUrl
+            site_url: siteUrl
+          }
+        }
+      }
+    `,
+    feeds: [
+      {
+        serialize: ({ query: { site, allMarkdownRemark } }) => {
+          return allMarkdownRemark.edges.map(edge => {
+            return Object.assign({}, edge.node.frontmatter, {
+              description: edge.node.excerpt,
+              date: edge.node.frontmatter.date,
+              url: site.siteMetadata.siteUrl + edge.node.fields.slug,
+              guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
+              custom_elements: [{ "content:encoded": edge.node.html }],
+            })
+          })
+        },
         query: `
           {
-            site {
-              siteMetadata {
-                title
-                description
-                siteUrl
-                site_url: siteUrl
+            allMarkdownRemark(
+              sort: { order: DESC, fields: [frontmatter___date] },
+            ) {
+              edges {
+                node {
+                  excerpt
+                  html
+                  fields { slug }
+                  frontmatter {
+                    title
+                    date
+                  }
+                }
               }
             }
           }
         `,
-        feeds: [
+        output: "/rss.xml",
+        title: "Your Site's RSS Feed",
+      },
+    ],
+  },
+},
+
+    {
+      resolve: `gatsby-source-podcast-rss-feed`,
+      options: {
+        feedURL: `https://lydra.fr/ea-2-le-podcasteur-erwan/rss`,
+        id: 'guid',
+      },
+  },
+  
+/*
+  {
+    resolve: `@arshad/gatsby-theme-podcast-core`,
+    options: {
+      feedUrl: `https://blog.jordanrhea.com/rss.xml`,
+      podcast: {
+        name: `Name of Podcast`,
+        description: `Eligendi nisi nobis nisi voluptate. Corporis deserunt provident hic numquam. Veritatis vero necessitatibus adipisci cumque voluptate rerum at.`,
+        image: `content/images/podcast.jpg`,
+        social: [
           {
-            serialize: ({ query: { site, allMarkdownRemark } }) => {
-              return allMarkdownRemark.edges.map(edge => {
-                return Object.assign({}, edge.node.frontmatter, {
-                  description: edge.node.excerpt,
-                  date: edge.node.frontmatter.date,
-                  url: site.siteMetadata.siteUrl + edge.node.fields.slug,
-                  guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
-                  custom_elements: [{ "content:encoded": edge.node.html }],
-                })
-              })
-            },
-            query: `
-              {
-                allMarkdownRemark(
-                  sort: { order: DESC, fields: [frontmatter___date] },
-                ) {
-                  edges {
-                    node {
-                      excerpt
-                      html
-                      fields { slug }
-                      frontmatter {
-                        title
-                        date
-                      }
-                    }
-                  }
-                }
-              }
-            `,
-            output: "/rss.xml",
-            //output: "/rss.xml",
-            //title: "Your Site's RSS Feed",
-            title: "https://lydra.fr/tag/froggit/feed",
-            // optional configuration to insert feed reference in pages:
-             //if `string` is used, it will be used to create RegExp and then test if pathname of
-             //current page satisfied this regular expression;
-            // if not provided or `undefined`, all pages will have feed reference inserted
-            match: "^/blog/",
-            // optional configuration to specify external rss feed, such as feedburner
-            //link: "https://lydra.fr/blog/",
+            name: `Apple Podcast`,
+            url: `https://itunes.apple.com`,
+          },
+          {
+            name: `Google Podcast`,
+            url: `https://podcasts.google.com`,
           },
         ],
       },
     },
+  },
+*/
+
+/*
+  {
+    resolve: `gatsby-source-youtube`,
+    options: {
+      channelId: '<<Youtube channelID eg. UCK8sQmJBp8GCxrOtXWBpyEA >>',
+      apiKey: '<< Add your Youtube api key here>>',
+      maxVideos: 50 // Defaults to 50
+    },
+  },
+*/
+    
     {
       resolve: `gatsby-plugin-manifest`,
       options: {

gatsby-node.js

+const path = require(`path`)
 const { createFilePath } = require("gatsby-source-filesystem")
 
+/*
+const { load, createFeed } = require('./internals')
+async function sourceNodes({ boundActionCreators }, options = {}) {
+  const { createNode } = boundActionCreators
+  const { feeds = [] } = options
+
+  for (const f of feeds) {
+    const { rss } = await load(f)
+
+    if (rss && rss.channel) {
+      const sources = (Array.isArray(rss.channel)
+        ? rss.channel : [rss.channel]
+      )
+
+      sources.forEach(f => createFeed(f, createNode))
+    }
+  }
+
+  return Promise.resolve()
+}
+
+module.exports = {
+  sourceNodes,
+}
+*/
+
 
 
 exports.createPages = async ({ graphql, actions, reporter }) => {
@@ -16,32 +43,33 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   )
 
   const allMarkdownQuery = await graphql(`
-    {
-      allMarkdown: allMdx(
-        sort: { fields: [frontmatter___date], order: DESC }
-        filter: { frontmatter: { published: { ne: true } } }
-        limit: 1000
-      ) {
-        edges {
-          node {
-            fileAbsolutePath
-            frontmatter {
-              title
-              slug
-              tags
-              language
-              cover {
-                publicURL
-              }
-              
+  {
+    allMarkdown: allMdx(
+      sort: { fields: [frontmatter___date], order: DESC }
+      filter: { frontmatter: { published: { ne: false } } }
+      limit: 1000
+    ) {
+      edges {
+        node {
+          fileAbsolutePath
+          frontmatter {
+            title
+            slug
+            tags
+            language
+            cover {
+              publicURL
             }
-            timeToRead
-            excerpt
+            unlisted
           }
+          timeToRead
+          excerpt
         }
       }
+      totalCount
     }
-  `)
+  }
+`)
 
   if (allMarkdownQuery.errors) {
     reporter.panic(allMarkdownQuery.errors)
@@ -62,19 +90,23 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   const posts = markdownFiles.filter(item =>
     item.node.fileAbsolutePath.includes("/content/posts/")
   )
-
+  
   const listedPosts = posts.filter(
     item => item.node.frontmatter.unlisted !== true
   )
-
+  
   // generate paginated post list
   const postsPerPage = postPerPageQuery.data.site.siteMetadata.postsPerPage
+    
   const nbPages = Math.ceil(listedPosts.length / postsPerPage)
-
+   
   Array.from({ length: nbPages }).forEach((_, i) => {
-    createPage({
-      path: i === 0 ? `/` : `/pages/${i + 1}`,
+    createPage({ // on utilise l'API createPage
+      
+   
+      path: i === 0 ? `/blog` : `/pages/${i + 1}`,
       component: ListPostsTemplate,
+   
       context: {
         limit: postsPerPage,
         skip: i * postsPerPage,
@@ -84,7 +116,9 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     })
   })
 
+
   // generate blog posts
+  
   posts.forEach((post, index, posts) => {
     const previous = index === posts.length - 1 ? null : posts[index + 1].node
     const next = index === 0 ? null : posts[index - 1].node
@@ -113,6 +147,8 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     }
   })
 
+
+
   // generate pages
   markdownFiles
     .filter(item => item.node.fileAbsolutePath.includes("/content/pages/"))
@@ -142,12 +178,58 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         },
       })
     })
-}
+  }
+
+  /*
+  let Parser = require('rss-parser');
+  let parser = new Parser();
+  
+  (async () => {
+  
+    let feed = await parser.parseURL('https://lydra.fr/tag/froggit/feed/rss.xml');
+    console.log(feed.title);
+  
+    feed.items.forEach(item => {
+      console.log(item.title + ':' + item.link)
+    });
+  
+  })();
+*/
+
+  /*
+  exports.createResolvers = ({
+    actions,
+    cache,
+    createNodeId,
+    createResolvers,
+    store,
+    reporter,
+  }) => {
+    const { createNode } = actions
+    createResolvers({
+      CMS_Asset: {
+        imageFile: {
+          type: `File`,
+          resolve(source, args, context, info) {
+            return createRemoteFileNode({
+              url: source.url,
+              store,
+              cache,
+              createNode,
+              createNodeId,
+              reporter,
+            })
+          },
+        },
+      },
+    })
+  }
+  */
 
 //exports.onCreateNode = function onCreateNode({ pathPrefix, basePath = pathPrefix }) {
-  // use basePath to replace links as you wish
+   //use basePath to replace links as you wish
   // e.g. you would visit each a tag, and replace the href with basePath + href
-// }
+ //}
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
@@ -158,6 +240,97 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
       name: `slug`,
       node,
       value,
+      //value: `/blog${slug}`,
     })
+  }}
+/*
+    if (node.internal.type === `MarkdownRemark`) {
+      const fileNode = getNode(node.parent)
+      let nodeSlug
+      nodeSlug = ensureSlashes(
+        path.basename(fileNode.relativePath, path.extname(fileNode.relativePath))
+      )
+      if (nodeSlug) {
+        createNodeField({ node, name: `slug`, value: nodeSlug })
+      }
+    }
+  
+  function ensureSlashes(slug) {
+    if (slug.charAt(0) !== `/`) {
+      slug = `/` + slug
+    }
+  
+    if (slug.charAt(slug.length - 1) !== `/`) {
+      slug = slug + `/`
+    }
+  
+    return slug
+  }
+ 
+  }
+}
+*/
+
+// gatsby-source-rss
+/*
+const parser = require('rss-parser');
+const crypto = require('crypto');
+
+const createContentDigest = obj => crypto.createHash('md5').update(JSON.stringify(obj)).digest('hex');
+
+function promisifiedParseURL(url) {
+  return new Promise((resolve, reject) => {
+    parser.parseURL(url, (err, data) => {
+      if (err) {
+        reject(err);
+      }
+      resolve(data.feed);
+    });
+  });
+}
+
+const createChildren = (entries, parentId, createNode) => {
+  const childIds = [];
+  entries.forEach(entry => {
+    childIds.push(entry.link);
+    const node = Object.assign({}, entry, {
+      id: entry.link,
+      title: entry.title,
+      link: entry.link,
+      description: entry.description,
+      parent: parentId,
+      children: []
+    });
+    node.internal = {
+      type: 'rssFeedItem',
+      contentDigest: createContentDigest(node)
+    };
+    createNode(node);
+  });
+  return childIds;
+};
+
+async function sourceNodes({ boundActionCreators }, { rssURL }) {
+  const { createNode } = boundActionCreators;
+  const data = await promisifiedParseURL(rssURL);
+  if (!data) {
+    return;
   }
+  const { title, description, link, entries } = data;
+  const childrenIds = createChildren(entries, link, createNode);
+  const feedStory = {
+    id: link,
+    title,
+    description,
+    link,
+    parent: null,
+    children: childrenIds
+  };
+
+  feedStory.internal = { type: 'rssFeed', contentDigest: createContentDigest(feedStory) };
+
+  createNode(feedStory);
 }
+
+exports.sourceNodes = sourceNodes;
+*/

package.json

@@ -35,11 +35,14 @@
     "generatePostPreviewImages": "./scripts/generatePostPreviewImages.js"
   },
   "dependencies": {
+    "@arshad/gatsby-theme-podcast-core": "^1.1.6",
     "@mdx-js/mdx": "^1.5.9",
     "@mdx-js/react": "^1.5.9",
+    "@uptimeventures/gatsby-source-rss": "^0.4.0",
+    "axios": "^0.19.2",
     "babel-plugin-styled-components": "^1.10.6",
     "disqus-react": "^1.0.8",
-    "gatsby": "^2.20.36",
+    "gatsby": "^2.24.47",
     "gatsby-image": "^2.3.5",
     "gatsby-plugin-compile-es6-packages": "^2.1.0",
     "gatsby-plugin-feed": "^2.5.11",
@@ -49,6 +52,7 @@
     "gatsby-plugin-offline": "^3.1.5",
     "gatsby-plugin-page-creator": "^2.2.4",
     "gatsby-plugin-react-helmet": "^3.2.5",
+    "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sharp": "^2.5.7",
     "gatsby-plugin-styled-components": "^3.2.4",
     "gatsby-remark-autolink-headers": "^2.2.4",
@@ -58,17 +62,23 @@
     "gatsby-remark-responsive-iframe": "^2.3.4",
     "gatsby-remark-smartypants": "^2.2.4",
     "gatsby-source-filesystem": "^2.2.5",
+    "gatsby-source-podcast-rss-feed": "^0.1.2",
+    "gatsby-source-rss-feed": "^1.2.0",
+    "gatsby-source-youtube": "^1.0.1",
     "gatsby-transformer-remark": "^2.7.5",
     "gatsby-transformer-sharp": "^2.4.7",
+    "jstoxml": "^1.6.8",
     "prismjs": "^1.20.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
+    "rss-parser": "^3.9.0",
     "styled-components": "^5.1.0",
     "styled-icons": "^10.13.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
+    "env-cmd": "^10.1.0",
     "lighthousebot": "https://github.com/GoogleChromeLabs/lighthousebot",
     "prettier": "^2.0.5",
     "puppeteer": "^1.17.0",

src/components/BlogRoll.js

+/*
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql, StaticQuery } from 'gatsby'
@@ -96,3 +97,4 @@ export default () => (
     render={(data, count) => <BlogRoll data={data} count={count} />}
   />
 )
+*/

src/components/ContentHeader.js

@@ -9,7 +9,8 @@ import { Bull } from "./Commons"
 const Header = styled.header`
   margin-bottom: 2rem;
   color: ${colors.textLight};
-  font-size: 0.9em;
+  font-size: 1.2rem;
+  text-align: center;
 `
 
 class ContentIntro extends React.Component {

src/components/Hero.js

@@ -17,14 +17,14 @@ const HeroTitle = styled.h1`
   font-weight: 700;
   font-size: 3rem;
   margin: 10px 50px;
-  color: ${colors.white};
+  color: ${colors.orange};
   text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.85);
 `
 
 const HeroSubTitle = styled.h2`
   margin: 10px 50px;
   font-size: 4rem;
-  color: ${colors.green};
+  color: ${colors.violet};
   text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.85);
 `
 

src/components/Pagination.js

@@ -22,7 +22,7 @@ const PaginationWrapper = styled.nav`
 `
 
 const PageBtn = styled(Link)`
-  border-radius: 3px;
+  border-radius: 9px;
   background-color: ${colors.primary};
   border: 1px solid ${colors.primary};
   color: ${colors.textLightest};

src/components/PrevNextPost.js

@@ -34,7 +34,7 @@ const Preview = styled.article`
   &:hover {
     box-shadow: 0 0 0 0, 0 6px 12px ${colors.grey300};
     transition: all 0.3s ease;
-    transform: translate3D(0, -1px, 0);
+    transform: translate3D(0, -5px, 0);
   }
 
   @media (min-width: 780px) {