[v2] Update Sitemap example (#5767)

examples/sitemap/gatsby-config.js

@@ -15,6 +15,9 @@ module.exports = {
     `gatsby-transformer-remark`,
     {
       resolve: `gatsby-plugin-sitemap`,
+      options: {
+        exclude: [`/secret`],
+      },
     },
   ],
 }

examples/sitemap/gatsby-node.js

@@ -1,4 +1,49 @@
 const path = require(`path`)
+const slash = require(`slash`)
+
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage } = actions
+
+  return new Promise((resolve, reject) => {
+    const blogPostTemplate = path.resolve(`src/templates/template-blog-post.js`)
+    graphql(
+      `
+        {
+          allMarkdownRemark(
+            limit: 1000
+            filter: { frontmatter: { draft: { ne: true } } }
+          ) {
+            edges {
+              node {
+                fields {
+                  slug
+                }
+              }
+            }
+          }
+        }
+      `
+    ).then(result => {
+      if (result.errors) {
+        console.log(result.errors)
+        reject(result.errors)
+      }
+
+      // Create blog posts pages.
+      result.data.allMarkdownRemark.edges.forEach(edge => {
+        createPage({
+          path: edge.node.fields.slug, // required
+          component: slash(blogPostTemplate),
+          context: {
+            slug: edge.node.fields.slug,
+          },
+        })
+      })
+
+      resolve()
+    })
+  })
+}
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions

examples/sitemap/package.json

@@ -5,12 +5,16 @@
   "version": "1.0.0",
   "author": "Nicholas Young <nicholas@nicholaswyoung.com>",
   "dependencies": {
-    "gatsby": "latest",
-    "gatsby-source-filesystem": "latest",
-    "gatsby-transformer-remark": "latest",
-    "gatsby-plugin-sitemap": "latest"
+    "gatsby": "next",
+    "gatsby-plugin-sitemap": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-remark": "next",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2"
   },
-  "keywords": ["gatsby"],
+  "keywords": [
+    "gatsby"
+  ],
   "license": "MIT",
   "main": "index.js",
   "scripts": {

examples/sitemap/src/components/layout.js

@@ -0,0 +1,7 @@
+import React from "react"
+
+export default ({ children }) => (
+  <div>
+    {children}
+  </div>
+)

examples/sitemap/src/pages/index.js

@@ -1,14 +1,21 @@
 import React from "react"
+import Layout from "../components/layout"
 
 const IndexRoute = () => (
-  <div>
-    <p>
-      Welcome to the GatsbyJS Sitemap Demo. Visit{` `}
-      <a href="https://www.gatsbyjs.org/sitemap.xml">
-        to see the generated sitemap.
-      </a>
-    </p>
-  </div>
+  <Layout>
+    <div>
+      <p>
+        Welcome to the GatsbyJS Sitemap Demo. Visit{` `}
+        <a href="/sitemap.xml">
+          to see the generated sitemap.
+        </a>
+      </p>
+      <p>
+        Note: gatsby-plugin-sitemap uses <code>siteMetadata.siteUrl</code>{` `}
+        defined in gatsby-config.js to construct absolute URLs!
+      </p>
+    </div>
+  </Layout>
 )
 
 export default IndexRoute

examples/sitemap/src/pages/page-2.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Layout from "../components/layout"
+
+const Page = () => (
+  <Layout>
+    <div>
+      <h1>Not so secret page</h1>
+      <p>This page should be included in sitemap.xml</p>
+    </div>
+  </Layout>
+)
+
+export default Page

examples/sitemap/src/pages/secret.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Layout from "../components/layout"
+
+const Secret = () => (
+  <Layout>
+    <div>
+      <h1>Secret page</h1>
+      <p>This page should be excluded from sitemap.xml</p>
+    </div>
+  </Layout>
+)
+
+export default Secret

examples/sitemap/src/templates/template-blog-post.js

@@ -0,0 +1,33 @@
+import React from 'react'
+
+class BlogPost extends React.Component {
+  render() {
+    const { html, frontmatter } = this.props.data.markdownRemark
+    return (
+      <div>
+        <h1>{frontmatter.title}</h1>
+        <div className="container content">
+          <div dangerouslySetInnerHTML={{ __html: html }} />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default BlogPost
+
+export const PageQuery = graphql`
+  query blogPostBySlug($slug: String!) {
+    markdownRemark(fields: { slug: { eq: $slug } }) {
+      html
+      frontmatter {
+        title
+      }
+    }
+    site {
+      siteMetadata {
+        title 
+      }
+    }
+  }
+`