├── .prettierignore ├── design.jpg ├── postcss.config.js ├── src ├── styles │ └── site.css ├── images │ ├── icon.png │ └── logo.png ├── theme.js ├── components │ ├── heroComponents │ │ ├── Spacer.js │ │ ├── Showcase.js │ │ ├── Tag.js │ │ ├── Footer.js │ │ ├── Center.js │ │ ├── DisplayMedium.js │ │ └── DisplaySmall.js │ ├── Image.js │ ├── Button.js │ ├── index.js │ ├── ListItem.js │ ├── header.js │ ├── QuantityPicker.js │ ├── CartLink.js │ ├── Nav.js │ ├── seo.js │ └── formComponents │ │ ├── ConfirmSignUp.js │ │ ├── SignIn.js │ │ ├── SignUp.js │ │ └── AddInventory.js ├── pages │ ├── 404.js │ ├── admin.js │ ├── index.js │ ├── cart.js │ └── checkout.js ├── templates │ ├── Inventory.js │ ├── CategoryView.js │ ├── ItemView.js │ └── ViewInventory.js ├── context │ └── mainContext.js └── layouts │ ├── baseLayout.js │ └── layout.css ├── static ├── fonts │ ├── Eina.otf │ ├── Eina.ttf │ ├── Eina-Light.otf │ ├── Eina-SemiBold.otf │ ├── Eina-SemiBold.ttf │ └── fonts.css └── images │ └── products │ ├── chair1.png │ ├── chair2.png │ ├── chair3.png │ ├── chair4.png │ ├── chair5.png │ ├── chair6.png │ ├── chair7.png │ ├── chair8.png │ ├── chair9.png │ ├── couch1.png │ ├── couch2.png │ ├── couch3.png │ ├── couch4.png │ ├── couch5.png │ ├── couch6.png │ ├── couch7.png │ ├── couch8.png │ ├── couch9.png │ ├── chair10.png │ ├── couch10.png │ ├── couch11.png │ ├── couch12.png │ ├── couch13.png │ ├── couch14.png │ └── couch15.png ├── .prettierrc ├── gatsby-ssr.js ├── gatsby-browser.js ├── gatsby-node.js ├── providers ├── inventoryProvider.js └── inventory.js ├── LICENSE ├── utils └── helpers.js ├── .gitignore ├── gatsby-config.js ├── package.json ├── api └── index.js ├── tailwind.config.js ├── gatsby-node.esm.js └── README.md /.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/design.jpg -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = () => ({ 2 | plugins: [require("tailwindcss")], 3 | }) -------------------------------------------------------------------------------- /src/styles/site.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; -------------------------------------------------------------------------------- /src/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/src/images/icon.png -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/src/images/logo.png -------------------------------------------------------------------------------- /static/fonts/Eina.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/fonts/Eina.otf -------------------------------------------------------------------------------- /static/fonts/Eina.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/fonts/Eina.ttf -------------------------------------------------------------------------------- /static/fonts/Eina-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/fonts/Eina-Light.otf -------------------------------------------------------------------------------- /static/fonts/Eina-SemiBold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/fonts/Eina-SemiBold.otf -------------------------------------------------------------------------------- /static/fonts/Eina-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/fonts/Eina-SemiBold.ttf -------------------------------------------------------------------------------- /static/images/products/chair1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/chair1.png -------------------------------------------------------------------------------- /static/images/products/chair2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/chair2.png -------------------------------------------------------------------------------- /static/images/products/chair3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/chair3.png -------------------------------------------------------------------------------- /static/images/products/chair4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/chair4.png -------------------------------------------------------------------------------- /static/images/products/chair5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/chair5.png -------------------------------------------------------------------------------- /static/images/products/chair6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/chair6.png -------------------------------------------------------------------------------- /static/images/products/chair7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/chair7.png -------------------------------------------------------------------------------- /static/images/products/chair8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/chair8.png -------------------------------------------------------------------------------- /static/images/products/chair9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/chair9.png -------------------------------------------------------------------------------- /static/images/products/couch1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch1.png -------------------------------------------------------------------------------- /static/images/products/couch2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch2.png -------------------------------------------------------------------------------- /static/images/products/couch3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch3.png -------------------------------------------------------------------------------- /static/images/products/couch4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch4.png -------------------------------------------------------------------------------- /static/images/products/couch5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch5.png -------------------------------------------------------------------------------- /static/images/products/couch6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch6.png -------------------------------------------------------------------------------- /static/images/products/couch7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch7.png -------------------------------------------------------------------------------- /static/images/products/couch8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch8.png -------------------------------------------------------------------------------- /static/images/products/couch9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch9.png -------------------------------------------------------------------------------- /src/theme.js: -------------------------------------------------------------------------------- 1 | const colors = { 2 | primary: '#000000', 3 | secondary: '#00baa6' 4 | } 5 | 6 | export { 7 | colors 8 | } 9 | -------------------------------------------------------------------------------- /static/images/products/chair10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/chair10.png -------------------------------------------------------------------------------- /static/images/products/couch10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch10.png -------------------------------------------------------------------------------- /static/images/products/couch11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch11.png -------------------------------------------------------------------------------- /static/images/products/couch12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch12.png -------------------------------------------------------------------------------- /static/images/products/couch13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch13.png -------------------------------------------------------------------------------- /static/images/products/couch14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch14.png -------------------------------------------------------------------------------- /static/images/products/couch15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rauchg/jamstack-ecommerce/HEAD/static/images/products/couch15.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": false, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /src/components/heroComponents/Spacer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Spacer = ({ width }) => ( 4 |
5 | ) 6 | 7 | export default Spacer -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | 9 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Browser APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/browser-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | import "./src/styles/site.css" 9 | import "./src/layouts/layout.css" 10 | -------------------------------------------------------------------------------- /static/fonts/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Eina"; 3 | src: url("Eina.otf"); 4 | } 5 | 6 | @font-face { 7 | font-family: "Eina Bold"; 8 | src: url("Eina-SemiBold.otf"); 9 | } 10 | 11 | @font-face { 12 | font-family: "Eina Light"; 13 | src: url("Eina-Light.otf"); 14 | } -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | require = require('esm')(module) 2 | module.exports = require('./gatsby-node.esm.js') 3 | 4 | /** 5 | * Implement Gatsby's Node APIs in this file. 6 | * 7 | * See: https://www.gatsbyjs.org/docs/node-apis/ 8 | */ 9 | 10 | // You can delete this file if you're not using it 11 | -------------------------------------------------------------------------------- /src/components/heroComponents/Showcase.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Image from '../Image' 3 | 4 | const Showcase = ({ imageSrc }) => { 5 | return ( 6 |
7 | Showcase item 8 |
9 | ) 10 | } 11 | 12 | export default Showcase -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import SEO from "../components/seo" 4 | 5 | const NotFoundPage = () => ( 6 | <> 7 | 8 |

NOT FOUND

9 |

You just hit a route that doesn't exist... the sadness.

10 | 11 | ) 12 | 13 | export default NotFoundPage 14 | -------------------------------------------------------------------------------- /src/components/heroComponents/Tag.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Tag = ({ category, year }) => { 4 | return ( 5 |
6 |

{category}

7 | { year &&

{year}

} 8 |
9 | ) 10 | } 11 | 12 | export default Tag -------------------------------------------------------------------------------- /src/components/Image.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react" 2 | 3 | async function fetchImage(src, updateSrc) { 4 | // const image = await S3.getimage(src) 5 | updateSrc(src) 6 | } 7 | 8 | const Image = ({ src, ...props}) => { 9 | const [imageSrc, updateSrc] = useState(null) 10 | useEffect(() => { 11 | fetchImage(src, updateSrc) 12 | }, []) 13 | 14 | return imageSrc ? : null 15 | } 16 | 17 | export default Image 18 | -------------------------------------------------------------------------------- /src/components/heroComponents/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = ({ designer }) => { 4 | return ( 5 |
6 |

Design by

7 |

{designer}

8 |
9 | ) 10 | } 11 | 12 | export default Footer -------------------------------------------------------------------------------- /src/components/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Button({ title, onClick, full = false }) { 4 | let classNames = "text-sm font-bold tracking-wider bg-transparent hover:bg-black text-black font-semibold hover:text-white py-4 px-12 border-2 border-black hover:border-transparent" 5 | 6 | if (full) { 7 | classNames = `${classNames} w-full` 8 | } 9 | return ( 10 | 15 | ) 16 | } -------------------------------------------------------------------------------- /src/components/heroComponents/Center.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button } from '../'; 3 | import { navigate } from "gatsby" 4 | 5 | const Center = ({ price, title, link }) => { 6 | function navigateTo() { 7 | navigate(link) 8 | } 9 | 10 | return ( 11 |
12 |

{title}

13 |

FROM ${price}

14 |
19 | ) 20 | } 21 | 22 | export default Center -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Tag from './heroComponents/Tag' 2 | import Center from './heroComponents/Center' 3 | import Footer from './heroComponents/Footer' 4 | import Showcase from './heroComponents/Showcase' 5 | import DisplaySmall from './heroComponents/DisplaySmall' 6 | import DisplayMedium from './heroComponents/DisplayMedium' 7 | import Spacer from './heroComponents/Spacer' 8 | import Button from './Button' 9 | import Image from './Image' 10 | 11 | export { 12 | Tag, 13 | Center, 14 | Footer, 15 | Button, 16 | Image, 17 | Showcase, 18 | DisplaySmall, 19 | DisplayMedium, 20 | Spacer 21 | } -------------------------------------------------------------------------------- /providers/inventoryProvider.js: -------------------------------------------------------------------------------- 1 | import inventory from './inventory'; 2 | 3 | /* 4 | Inventory items must adhere to the following schema: 5 | 6 | type Product { 7 | id: ID! 8 | categories: [String]! 9 | price: Float! 10 | name: String! 11 | image: String! 12 | description: String! 13 | currentInventory: Int! 14 | brand: String 15 | } 16 | */ 17 | 18 | async function getInventory() { 19 | return new Promise((resolve, reject) => { 20 | // const inventory = API.get(apiUrl) 21 | resolve(inventory) 22 | }) 23 | } 24 | 25 | const DENOMINATION = '$' 26 | 27 | export { DENOMINATION, getInventory as default } 28 | -------------------------------------------------------------------------------- /src/components/heroComponents/DisplayMedium.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | import Image from '../Image' 4 | 5 | const DisplayMedium = ({ imageSrc, title, subtitle, link }) => { 6 | return ( 7 |
10 | 11 |
12 | {title} 13 |
14 |
15 |

{title}

16 |

{subtitle}

17 |
18 | 19 |
20 | ) 21 | } 22 | 23 | export default DisplayMedium; -------------------------------------------------------------------------------- /src/components/heroComponents/DisplaySmall.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | import { getTrimmedString } from '../../../utils/helpers' 4 | import Image from '../Image' 5 | 6 | const DisplaySmall = ({ link, title, subtitle, imageSrc }) => ( 7 |
10 | 11 |
12 | {title} 13 |
14 |
15 |

{title}

16 |

{getTrimmedString(subtitle, 150)}

17 |
18 | 19 |
20 | ) 21 | 22 | export default DisplaySmall -------------------------------------------------------------------------------- /src/components/ListItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | import { DENOMINATION } from '../../providers/inventoryProvider' 4 | import Image from './Image' 5 | 6 | const ListItem = ({ link, title, imageSrc, price }) => ( 7 |
13 | 14 |
15 |
16 | {title} 17 |
18 |
19 | 20 |
21 |

{title}

22 |

{`${DENOMINATION}${price}`}

23 |
24 |
25 | ) 26 | 27 | export default ListItem -------------------------------------------------------------------------------- /src/components/header.js: -------------------------------------------------------------------------------- 1 | import { Link } from "gatsby" 2 | import PropTypes from "prop-types" 3 | import React from "react" 4 | 5 | const Header = ({ siteTitle }) => ( 6 |
12 |
19 |

20 | 27 | {siteTitle} 28 | 29 |

30 |
31 |
32 | ) 33 | 34 | Header.propTypes = { 35 | siteTitle: PropTypes.string, 36 | } 37 | 38 | Header.defaultProps = { 39 | siteTitle: ``, 40 | } 41 | 42 | export default Header 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /src/components/QuantityPicker.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function QuantityPicker({ 4 | increment, decrement, numberOfitems, hideQuantityLabel 5 | }) { 6 | return ( 7 |
8 | { 9 | !hideQuantityLabel && ( 10 |
QUANTITY
11 | ) 12 | } 13 | 23 |

{numberOfitems}

27 | 36 |
37 | ) 38 | } -------------------------------------------------------------------------------- /src/templates/Inventory.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import AddInventory from '../components/formComponents/AddInventory' 3 | import ViewInventory from './ViewInventory' 4 | 5 | class Inventory extends React.Component { 6 | state = { 7 | viewState: 'view' 8 | } 9 | toggleViewState(viewState) { 10 | this.setState(() => ({ viewState })) 11 | } 12 | render() { 13 | return ( 14 |
15 |

Inventory

16 |
17 |

this.toggleViewState('view')}>View

18 |

this.toggleViewState('add')}>Add

19 |
20 | { 21 | this.state.viewState === 'view' ? ( 22 | 23 | ) : () 24 | } 25 | 28 |
29 | ) 30 | } 31 | } 32 | 33 | export default Inventory -------------------------------------------------------------------------------- /utils/helpers.js: -------------------------------------------------------------------------------- 1 | function slugify(string) { 2 | const a = 'àáäâãåăæąçćčđďèéěėëêęğǵḧìíïîįłḿǹńňñòóöôœøṕŕřßşśšșťțùúüûǘůűūųẃẍÿýźžż·/_,:;' 3 | const b = 'aaaaaaaaacccddeeeeeeegghiiiiilmnnnnooooooprrsssssttuuuuuuuuuwxyyzzz------' 4 | const p = new RegExp(a.split('').join('|'), 'g') 5 | 6 | return string.toString().toLowerCase() 7 | .replace(/\s+/g, '-') // Replace spaces with - 8 | .replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters 9 | .replace(/&/g, '-and-') // Replace & with 'and' 10 | .replace(/[^\w-]+/g, '') // Remove all non-word characters 11 | .replace(/--+/g, '-') // Replace multiple - with single - 12 | .replace(/^-+/, '') // Trim - from start of text 13 | .replace(/-+$/, '') // Trim - from end of text 14 | } 15 | 16 | function titleIfy(slug) { 17 | var words = slug.split('-'); 18 | for (var i = 0; i < words.length; i++) { 19 | var word = words[i]; 20 | words[i] = word.charAt(0).toUpperCase() + word.slice(1); 21 | } 22 | return words.join(' '); 23 | } 24 | 25 | function getTrimmedString(string, length = 8) { 26 | if (string.length <= length) { 27 | return string 28 | } else { 29 | return string.substring(0, length) + '...' 30 | } 31 | } 32 | 33 | export { 34 | slugify, titleIfy, getTrimmedString 35 | } -------------------------------------------------------------------------------- /.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 | .vercel -------------------------------------------------------------------------------- /src/components/CartLink.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { SiteContext } from '../context/mainContext' 3 | import { FaShoppingCart, FaCircle } from 'react-icons/fa'; 4 | import { Link } from "gatsby" 5 | import { colors } from '../theme' 6 | const { secondary } = colors 7 | 8 | class CartLink extends React.Component { 9 | render() { 10 | let { context: { numberOfItemsInCart } = { numberOfItemsInCart: 0 } } = this.props 11 | return ( 12 |
13 |
14 |
15 | 16 | 17 | 18 | { 19 | numberOfItemsInCart > Number(0) && ( 20 |
21 | 22 |
23 | ) 24 | } 25 |
26 |
27 |
28 | ) 29 | } 30 | } 31 | 32 | 33 | function CartLinkWithContext(props) { 34 | return ( 35 | 36 | { 37 | context => 38 | } 39 | 40 | ) 41 | } 42 | 43 | 44 | export default CartLinkWithContext -------------------------------------------------------------------------------- /src/templates/CategoryView.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ListItem from '../components/ListItem' 3 | import { titleIfy, slugify } from '../../utils/helpers' 4 | import CartLink from '../components/CartLink' 5 | 6 | const CategoryView = (props) => { 7 | const { pageContext: { title, content: { items = [] }}} = props 8 | return ( 9 | <> 10 | 11 |
12 |
13 |
14 |

{titleIfy(title)}

15 |
16 | 17 |
18 |
19 | { 20 | items.map((item, index) => { 21 | return ( 22 | 29 | ) 30 | }) 31 | } 32 |
33 |
34 |
35 |
36 | 37 | ) 38 | } 39 | 40 | export default CategoryView -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: `Gatsby JAMstack ECommerce Professional`, 4 | description: `Get up and running with your next E Commerce Website.`, 5 | author: `@dabit3`, 6 | }, 7 | plugins: [ 8 | { 9 | resolve: `gatsby-plugin-layout`, 10 | options: { 11 | component: require.resolve(`./src/layouts/baseLayout.js`), 12 | }, 13 | }, 14 | `gatsby-plugin-stripe`, 15 | `gatsby-plugin-postcss`, 16 | `gatsby-plugin-react-helmet`, 17 | { 18 | resolve: "gatsby-plugin-web-font-loader", 19 | options: { 20 | custom: { 21 | families: ["Eina, Eina-SemiBold"], 22 | urls: ["/fonts/fonts.css"], 23 | }, 24 | }, 25 | }, 26 | { 27 | resolve: `gatsby-source-filesystem`, 28 | options: { 29 | name: `images`, 30 | path: `${__dirname}/src/images`, 31 | }, 32 | }, 33 | `gatsby-plugin-offline`, 34 | `gatsby-transformer-sharp`, 35 | `gatsby-plugin-sharp`, 36 | { 37 | resolve: `gatsby-plugin-manifest`, 38 | options: { 39 | name: `gatsby-starter-default`, 40 | short_name: `starter`, 41 | start_url: `/`, 42 | background_color: `#663399`, 43 | theme_color: `#663399`, 44 | display: `minimal-ui`, 45 | icon: `src/images/icon.png`, // This path is relative to the root of the site. 46 | }, 47 | }, 48 | // this (optional) plugin enables Progressive Web App + Offline functionality 49 | // To learn more, visit: https://gatsby.dev/offline 50 | // `gatsby-plugin-offline`, 51 | ], 52 | } 53 | -------------------------------------------------------------------------------- /src/components/Nav.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { titleIfy, slugify } from '../../utils/helpers' 4 | import { FaShoppingCart, FaCircle } from 'react-icons/fa'; 5 | import { Link } from "gatsby" 6 | 7 | import { SiteContext, ContextProviderComponent } from '../context/mainContext' 8 | 9 | class Nav extends React.Component { 10 | render() { 11 | let { numberOfItemsInCart, navItems: { navInfo: { data: links }}} = this.props.context 12 | 13 | links = links.map(link => { 14 | const newLink = {} 15 | newLink.link = slugify(link) 16 | newLink.name = titleIfy(link) 17 | return newLink 18 | }) 19 | links.unshift({ name: 'Home', link: '/'}) 20 | return ( 21 | <> 22 |
23 | { 24 | links.map((l, i) => ( 25 | 26 |

{l.name}

27 | 28 | )) 29 | } 30 |
31 |
32 | 33 | 34 | 35 | { 36 | numberOfItemsInCart > Number(0) && ( 37 |
38 | 39 |
40 | ) 41 | } 42 |
43 | 44 | ) 45 | } 46 | } 47 | 48 | function NavWithContext(props) { 49 | return ( 50 | 51 | 52 | { 53 | context =>