├── .gitignore
├── README.md
├── gatsby-config.js
├── gatsby-node.js
├── netlify.toml
├── package.json
├── src
    ├── components
    │   ├── hero.js
    │   └── team-members.js
    └── pages
    │   └── index.js
├── watch.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | public
2 | .cache
3 | node_modules
4 | .env
5 | .netlify
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WordPress + Gatsby with Advanced Custom Fields and WPGraphQL
2 | 
3 | This project was built as [part of a livestream](https://youtu.be/DH7I1xRrbxs?list=PLz8Iz-Fnk_eTpvd49Sa77NiF8Uqq5Iykx) on [Learn With Jason](https://www.youtube.com/playlist?list=PLz8Iz-Fnk_eTpvd49Sa77NiF8Uqq5Iykx).
4 | 
5 | It uses WordPress as a data source via [WPGraphQL](https://www.wpgraphql.com/) to build a [Gatsby](https://gatsbyjs.org) site.
6 | 


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: [
 3 |     {
 4 |       resolve: 'gatsby-source-graphql',
 5 |       options: {
 6 |         typeName: 'WordPress',
 7 |         fieldName: 'wordPress',
 8 |         url: 'https://acf.wpgraphql.com/graphql',
 9 |         refetchInterval: 60
10 |       }
11 |     }
12 |   ]
13 | };
14 | 


--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
1 | // boop
2 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | # example netlify.toml
 2 | [build]
 3 |   command = "yarn build"
 4 |   functions = "functions"
 5 |   publish = "public"
 6 | 
 7 |   ## Uncomment to use this redirect for Single Page Applications like create-react-app. 
 8 |   ## Not needed for static site generators.
 9 |   #[[redirects]]
10 |   #  from = "/*"
11 |   #  to = "/index.html"
12 |   #  status = 200
13 |   
14 |   ## (optional) Settings for Netlify Dev
15 |   ## https://github.com/netlify/netlify-dev-plugin#project-detection
16 |   #[dev] 
17 |   #  command = "yarn start" # Command to start your dev server
18 |   #  port = 3000 # Port that the dev server will be listening on
19 |   #  publish = "dist" # Folder with the static content for _redirect file
20 |   
21 |   ## more info on configuring this file: https://www.netlify.com/docs/netlify-toml-reference/ 
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "//1": "describes your app and its dependencies",
 3 |   "//2": "https://docs.npmjs.com/files/package.json",
 4 |   "//3": "updating this file will download and update your packages",
 5 |   "name": "hello-express",
 6 |   "version": "0.0.1",
 7 |   "description": "A Gatsby site!",
 8 |   "scripts": {
 9 |     "develop": "gatsby develop",
10 |     "build": "gatsby build"
11 |   },
12 |   "dependencies": {
13 |     "gatsby": "^2.0.97",
14 |     "react": "^16.8.3",
15 |     "react-dom": "^16.6.3",
16 |     "gatsby-source-graphql": "^2.1.3"
17 |   },
18 |   "repository": {
19 |     "url": "https://glitch.com/edit/#!/fanatical-willow"
20 |   },
21 |   "license": "MIT",
22 |   "keywords": [
23 |     "node",
24 |     "glitch",
25 |     "gatsby"
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/hero.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { graphql } from 'gatsby';
 3 | 
 4 | export const fragment = graphql`
 5 |   fragment HeroSection on WordPress_Page_Pagesectionfields_Sections_Hero {
 6 |     backgroundColor
 7 |     buttonLink
 8 |     buttonText
 9 |     description
10 |     title
11 |   }
12 | `;
13 | 
14 | const Hero = ({
15 |   backgroundColor,
16 |   buttonLink,
17 |   buttonText,
18 |   description,
19 |   title
20 | }) => (
21 |   <section
22 |     style={{
23 |       backgroundColor,
24 |       color: 'white',
25 |       padding: '3em'
26 |     }}
27 |   >
28 |     <h1>{title}</h1>
29 |     <p>{description}</p>
30 |     <a href={buttonLink} style={{ color: 'white' }}>
31 |       {buttonText}
32 |     </a>
33 |   </section>
34 | );
35 | 
36 | export default Hero;
37 | 


--------------------------------------------------------------------------------
/src/components/team-members.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { graphql } from 'gatsby';
 3 | 
 4 | export const fragment = graphql`
 5 |   fragment TeamMemberSection on WordPress_Page_Pagesectionfields_Sections_TeamMembers {
 6 |     teamMembers {
 7 |       teamMember {
 8 |         ... on WordPress_TeamMember {
 9 |           title
10 |           id
11 |           profileFields {
12 |             ...ProfileFields
13 |           }
14 |         }
15 |       }
16 |     }
17 |   }
18 | 
19 |   fragment ProfileFields on WordPress_TeamMember_Profilefields {
20 |     bio
21 |     github
22 |     website
23 |     twitter
24 |     title
25 |     photo {
26 |       altText
27 |       sourceUrl
28 |     }
29 |   }
30 | `;
31 | 
32 | const TeamMembers = ({ teamMembers }) => (
33 |   <>
34 |     {teamMembers.map(({ teamMember }) => (
35 |       <section key={teamMember.id}>
36 |         <h2>
37 |           {teamMember.title}, {teamMember.profileFields.title}
38 |         </h2>
39 |         <img
40 |           src={teamMember.profileFields.photo.sourceUrl}
41 |           alt={teamMember.profileFields.photo.altText}
42 |         />
43 |       </section>
44 |     ))}
45 |   </>
46 | );
47 | 
48 | export default TeamMembers;
49 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { graphql } from 'gatsby';
 3 | import Hero from '../components/hero';
 4 | import TeamMembers from '../components/team-members';
 5 | 
 6 | export const pageQuery = graphql`
 7 |   {
 8 |     wordPress {
 9 |       pageBy(uri: "home") {
10 |         id
11 |         title
12 |         pageSectionFields {
13 |           sections {
14 |             __typename
15 |             ...HeroSection
16 |             ...TeamMemberSection
17 |           }
18 |         }
19 |       }
20 |     }
21 |   }
22 | `;
23 | 
24 | const Home = ({ data }) => {
25 |   const sections = data.wordPress.pageBy.pageSectionFields.sections;
26 | 
27 |   return (
28 |     <div>
29 |       {sections.map(section => {
30 |         const typeName = section.__typename;
31 | 
32 |         switch (typeName) {
33 |           case 'WordPress_Page_Pagesectionfields_Sections_Hero':
34 |             return <Hero key={section.id} {...section} />;
35 | 
36 |           case 'WordPress_Page_Pagesectionfields_Sections_TeamMembers':
37 |             return <TeamMembers key={section.id} {...section} />;
38 | 
39 |           default:
40 |             return <p>You done busted it.</p>;
41 |         }
42 |       })}
43 |     </div>
44 |   );
45 | };
46 | 
47 | export default Home;
48 | 


--------------------------------------------------------------------------------
/watch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "install": {
 3 |     "include": [
 4 |       "^package.json$"
 5 |     ]
 6 |   },
 7 |   "restart": {
 8 |     "exclude": [
 9 |       "^src/",
10 |       "^content/"
11 |     ],
12 |     "include": [
13 |       "^gatsby-config.js",
14 |       "^gatsby-node.js"
15 |     ]
16 |   },
17 |   "throttle": 1000
18 | }
19 | 


--------------------------------------------------------------------------------