Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Docs: Recipe for Contentful data source (#17318)
* Added recipe for sourcing from contentful * Editing * Moved Conentful recipe into recipe.md * Prettier formatting * Apply suggestions from code review Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Removed issue note Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * More base-relative URLs. * Linting * Added example repo * Added readme to sample * Stronger language on environment variables * Semantic example Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Removed unneeded files from example, news in index * Formatting for step 4 * Define example field types * Tightened up a sentence * Changed to using seeded blog space * Use page context * Unused graphql variable * Edited readme * Added env vars note * Changed recipe to use contentful blog seed * Removed duplicate content * Applied suggestions from review Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> Co-Authored-By: Michael <184316+muescha@users.noreply.github.com> * Extra space Co-Authored-By: Michael <184316+muescha@users.noreply.github.com> * Applied code review suggestions Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> Co-Authored-By: Michael <184316+muescha@users.noreply.github.com>
- Loading branch information
Showing
12 changed files
with
995 additions
and
0 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# Sourcing data from Contentful recipe example | ||
|
||
This repo is an example Gatsby site that shows how to source data from Contentful. To get started, [follow the Gatsby recipe to create a sample Contentful space](https://www.gatsbyjs.org/docs/recipes/#sourcing-data-from-contentful). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
module.exports = { | ||
siteMetadata: { | ||
title: `Gatsby Contentful Recipe`, | ||
description: `Example Gatsby site sourcing data from Contentful.`, | ||
author: `@gatsbyjs`, | ||
}, | ||
plugins: [ | ||
{ | ||
resolve: `gatsby-source-contentful`, | ||
options: { | ||
spaceId: `[space ID]`, // or process.env.CONTENTFUL_SPACE_ID | ||
accessToken: `[access token]`, // or process.env.CONTENTFUL_TOKEN | ||
}, | ||
}, | ||
`gatsby-transformer-remark`, | ||
], | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
const path = require(`path`) | ||
|
||
exports.createPages = async ({ graphql, actions }) => { | ||
const { createPage } = actions | ||
const result = await graphql(` | ||
query { | ||
allContentfulBlogPost { | ||
edges { | ||
node { | ||
slug | ||
title | ||
childContentfulBlogPostBodyTextNode { | ||
childMarkdownRemark { | ||
html | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} | ||
`) | ||
|
||
result.data.allContentfulBlogPost.edges.forEach(({ node }) => { | ||
createPage({ | ||
path: `blog/${node.slug}`, | ||
component: path.resolve(`./src/templates/blog-post.js`), | ||
context: node, | ||
}) | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
{ | ||
"name": "gatsby-recipe-sourcing-contentful", | ||
"private": true, | ||
"description": "A simple starter to get up and developing quickly with Gatsby", | ||
"version": "0.1.0", | ||
"author": "@gatsbyjs", | ||
"dependencies": { | ||
"gatsby": "^2.15.14", | ||
"gatsby-image": "^2.2.18", | ||
"gatsby-plugin-offline": "^2.2.10", | ||
"gatsby-source-contentful": "^2.1.35", | ||
"gatsby-transformer-remark": "^2.6.22", | ||
"prop-types": "^15.7.2", | ||
"react": "^16.9.0", | ||
"react-dom": "^16.9.0" | ||
}, | ||
"devDependencies": { | ||
"prettier": "^1.18.2" | ||
}, | ||
"keywords": [ | ||
"gatsby" | ||
], | ||
"license": "MIT", | ||
"scripts": { | ||
"build": "gatsby build", | ||
"develop": "gatsby develop", | ||
"format": "prettier --write \"**/*.{js,jsx,json,md}\"", | ||
"start": "npm run develop", | ||
"serve": "gatsby serve", | ||
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \"" | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/gatsbyjs/gatsby-starter-default" | ||
}, | ||
"bugs": { | ||
"url": "https://github.com/gatsbyjs/gatsby/issues" | ||
} | ||
} |
42 changes: 42 additions & 0 deletions
42
examples/recipe-sourcing-contentful/src/components/header.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { Link } from "gatsby" | ||
import PropTypes from "prop-types" | ||
import React from "react" | ||
|
||
const Header = ({ siteTitle }) => ( | ||
<header | ||
style={{ | ||
background: `rebeccapurple`, | ||
marginBottom: `1.45rem`, | ||
}} | ||
> | ||
<div | ||
style={{ | ||
margin: `0 auto`, | ||
maxWidth: 960, | ||
padding: `1.45rem 1.0875rem`, | ||
}} | ||
> | ||
<h1 style={{ margin: 0 }}> | ||
<Link | ||
to="/" | ||
style={{ | ||
color: `white`, | ||
textDecoration: `none`, | ||
}} | ||
> | ||
{siteTitle} | ||
</Link> | ||
</h1> | ||
</div> | ||
</header> | ||
) | ||
|
||
Header.propTypes = { | ||
siteTitle: PropTypes.string, | ||
} | ||
|
||
Header.defaultProps = { | ||
siteTitle: ``, | ||
} | ||
|
||
export default Header |
Oops, something went wrong.