├── .prettierrc
├── .prettierignore
├── static
    └── favicon.ico
├── gatsby-config.js
├── LICENSE
├── src
    ├── components
    │   └── portfolio-item.js
    └── pages
    │   ├── portfolio
    │       └── {ContentfulPortfolioItem.projectName}.js
    │   └── index.js
├── package.json
├── .gitignore
└── README.md


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "arrowParens": "avoid",
3 |   "semi": false
4 | }
5 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .cache
2 | package.json
3 | package-lock.json
4 | public
5 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnwithjason/corgfolio/main/static/favicon.ico


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Configure your Gatsby site with this file.
 3 |  *
 4 |  * See: https://www.gatsbyjs.org/docs/gatsby-config/
 5 |  */
 6 | require("dotenv").config()
 7 | 
 8 | module.exports = {
 9 |   /* Your site config here */
10 |   plugins: [
11 |     {
12 |       resolve: `gatsby-source-contentful`,
13 |       options: {
14 |         // Learn about environment variables: https://gatsby.dev/env-vars
15 |         spaceId: process.env.CONTENTFUL_SPACE_ID,
16 |         accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
17 |       },
18 |     },
19 |   ],
20 | }
21 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The BSD Zero Clause License (0BSD)
 2 | 
 3 | Copyright (c) 2020 Jason Lengstorf
 4 | 
 5 | Permission to use, copy, modify, and/or distribute this software for any
 6 | purpose with or without fee is hereby granted.
 7 | 
 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
14 | PERFORMANCE OF THIS SOFTWARE.
15 | 


--------------------------------------------------------------------------------
/src/components/portfolio-item.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import Image from "gatsby-image"
 3 | import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
 4 | import { MARKS } from "@contentful/rich-text-types"
 5 | 
 6 | export function PortfolioItem({ item, isPage = true }) {
 7 |   const HeadingComponent = ({ children }) =>
 8 |     isPage ? <h1>{children}</h1> : <h2>{children}</h2>
 9 | 
10 |   const description = documentToReactComponents(item.description.json, {
11 |     renderMark: {
12 |       [MARKS.ITALIC]: text => <em>{text}</em>,
13 |     },
14 |   })
15 | 
16 |   return (
17 |     <>
18 |       <HeadingComponent>{item.projectName}</HeadingComponent>
19 |       <Image fluid={item.screenshot.fluid} alt={item.screenshot.description} />
20 |       <div>{description}</div>
21 |     </>
22 |   )
23 | }
24 | 


--------------------------------------------------------------------------------
/src/pages/portfolio/{ContentfulPortfolioItem.projectName}.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { graphql, Link } from "gatsby"
 3 | import { PortfolioItem } from "../../components/portfolio-item"
 4 | 
 5 | export const query = graphql`
 6 |   query($id: String = "") {
 7 |     contentfulPortfolioItem(id: { eq: $id }) {
 8 |       projectName
 9 |       screenshot {
10 |         fluid {
11 |           ...GatsbyContentfulFluid_withWebp
12 |         }
13 |         description
14 |       }
15 |       description {
16 |         json
17 |       }
18 |     }
19 |   }
20 | `
21 | 
22 | export default function PortfolioItemPage({ data }) {
23 |   const item = data.contentfulPortfolioItem
24 | 
25 |   return (
26 |     <>
27 |       <PortfolioItem item={item} isPage />
28 |       <Link to="/">Back to all portfolio items</Link>
29 |     </>
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "corgfolio",
 3 |   "private": true,
 4 |   "version": "0.1.0",
 5 |   "license": "0BSD",
 6 |   "scripts": {
 7 |     "build": "GATSBY_EXPERIMENTAL_ROUTING_APIS=1 gatsby build",
 8 |     "develop": "GATSBY_EXPERIMENTAL_ROUTING_APIS=1 gatsby develop",
 9 |     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
10 |     "start": "npm run develop",
11 |     "serve": "gatsby serve",
12 |     "clean": "gatsby clean",
13 |     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
14 |   },
15 |   "dependencies": {
16 |     "@contentful/rich-text-react-renderer": "^14.1.1",
17 |     "@contentful/rich-text-types": "^14.1.1",
18 |     "gatsby": "^2.24.51",
19 |     "gatsby-image": "^2.4.16",
20 |     "gatsby-source-contentful": "^2.3.39",
21 |     "react": "^16.12.0",
22 |     "react-dom": "^16.12.0"
23 |   },
24 |   "devDependencies": {
25 |     "prettier": "2.1.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { graphql, Link } from "gatsby"
 3 | import { PortfolioItem } from "../components/portfolio-item"
 4 | 
 5 | export const query = graphql`
 6 |   query {
 7 |     allContentfulPortfolioItem {
 8 |       nodes {
 9 |         id
10 |         projectName
11 |         gatsbyPath(filePath: "/portfolio/{ContentfulPortfolioItem.projectName}")
12 |         screenshot {
13 |           fluid {
14 |             ...GatsbyContentfulFluid_withWebp
15 |           }
16 |           description
17 |         }
18 |         description {
19 |           json
20 |         }
21 |       }
22 |     }
23 |   }
24 | `
25 | 
26 | export default function Home({ data }) {
27 |   const items = data.allContentfulPortfolioItem.nodes
28 | 
29 |   return (
30 |     <>
31 |       <h1>My Portfolio!</h1>
32 |       {items.map(item => (
33 |         <Link key={item.id} to={item.gatsbyPath}>
34 |           <PortfolioItem item={item} isPage={false} />
35 |         </Link>
36 |       ))}
37 |       <pre>{JSON.stringify(data, null, 2)}</pre>
38 |     </>
39 |   )
40 | }
41 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # dotenv environment variable files
55 | .env*
56 | 
57 | # gatsby files
58 | .cache/
59 | public
60 | 
61 | # Mac files
62 | .DS_Store
63 | 
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 | 
71 | # Local Netlify folder
72 | .netlify
73 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="https://www.learnwithjason.dev">
 3 |     <img src="https://res.cloudinary.com/jlengstorf/image/upload/q_auto,f_auto,w_240/v1579281727/lwj/learnwithjason.png" alt="Learn With Jason" width="120" />
 4 |   </a>
 5 | </p>
 6 | <h1 align="center">
 7 |   Build Jamstack Apps with Gatsby (with Obinna Ekwuno)
 8 | </h1>
 9 | <h3 align="center">
10 |   This app was built live on <em>Learn With Jason</em> and it was super fun and I’m sad you weren’t there.
11 | </h3>
12 | <p align="center">
13 |   But don’t worry! You can still: 
14 |   <a href="https://www.learnwithjason.dev/build-jamstack-apps-with-gatsby"><strong>watch the video</strong></a> · 
15 |   <a href="https://corgfolio.netlify.app"><strong>see the demo</strong></a> · 
16 |   <a href="https://app.netlify.com/start/deploy?repository=https://github.com/learnwithjason/corgfolio&utm_source=learnwithjason&utm_medium=github&utm_campaign=devex"><strong>deploy this project</strong></a> · 
17 |   <a href="https://jason.af/lwj/schedule"><strong>see upcoming episodes</strong></a>
18 | </p>
19 | 
20 | &nbsp;
21 | 
22 | In this episode, Obinna Ekwuno teaches us how to build and deploy Gatsby apps on Netlify for blazing fast, fun-to-develop websites!
23 | 
24 | &nbsp;
25 | 
26 | ## More Information
27 | 
28 | - [Watch this app get built live + see links and additional resources][episode]
29 | - [Follow _Learn With Jason_ on Twitch][twitch] to watch future episodes live
30 | - [Add the _Learn With Jason_ schedule to your Google Calendar][cal]
31 | 
32 | &nbsp;
33 | <p align="center">
34 |   <a href="https://app.netlify.com/start/deploy?repository=https://github.com/learnwithjason/corgfolio&utm_source=learnwithjason&utm_medium=github&utm_campaign=devex">
35 |     <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy this project to Netlify" />
36 |   </a>
37 | </p>
38 | 
39 | [episode]: https://www.learnwithjason.dev/build-jamstack-apps-with-gatsby
40 | [twitch]: https://jason.af/twitch
41 | [cal]: https://jason.af/lwj/cal
42 | 


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