├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── gatsby-config.js ├── gatsby-node.js ├── package-lock.json ├── package.json ├── src ├── components │ ├── comments │ │ ├── comment-input.css │ │ ├── comment-input.js │ │ ├── comment.css │ │ ├── comment.js │ │ ├── comments.css │ │ └── comments.js │ ├── header.css │ ├── header.js │ ├── layout.css │ └── layout.js ├── content │ ├── dive-into-the-jam-stack │ │ └── index.md │ └── gatsbyjs-introduction │ │ └── index.md ├── pages │ ├── 404.js │ ├── index.css │ └── index.js └── templates │ ├── blog-post.css │ └── blog-post.js └── yarn.lock /.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 variables file 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 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # What is the JAMStack? 2 | Check [my tutorial](https://academind.com/learn/javascript/what-is-the-jamstack) and/ or dive into [https://jamstack.org](https://jamstack.org). 3 | 4 | # Using this Demo Project 5 | This project was created to demonstrate how the JAMStack works. If you want to use this project, make sure you bring your own (Firebase) API. 6 | 7 | If you are using the Firebase realtime database, you can use this code and only change 8 | 9 | ``` 10 | YOUR_FIREBASE_API 11 | ``` 12 | 13 | in the `comments.js` file to your Firebase REST API url. 14 | 15 | Thereafter, execute 16 | 17 | ```sh 18 | npm install 19 | ``` 20 | 21 | to install all dependencies and 22 | 23 | ```sh 24 | npm run dev 25 | ``` 26 | 27 | to run the development server. 28 | 29 | Run 30 | 31 | ```sh 32 | npm run build 33 | ``` 34 | 35 | to build the project for production and see all generated files in the `public` folder. 36 | 37 | Please note that this is just a demo project, it's **not** optimized, polished or battle-tested for production! -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: 'JAMStack - Example' 4 | }, 5 | plugins: [ 6 | 'gatsby-plugin-react-helmet', 7 | { 8 | resolve: `gatsby-source-filesystem`, 9 | options: { 10 | name: `content`, 11 | path: `${__dirname}/src/content`, 12 | }, 13 | }, 14 | 'gatsby-transformer-remark', 15 | 'gatsby-transformer-sharp', 16 | 'gatsby-plugin-sharp', 17 | ], 18 | } 19 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const { createFilePath } = require('gatsby-source-filesystem') 3 | 4 | exports.createPages = ({ graphql, actions }) => { 5 | const { createPage } = actions 6 | 7 | return new Promise((resolve, reject) => { 8 | // Blog post template 9 | const blogPostPage = path.resolve('./src/templates/blog-post.js') 10 | 11 | // Query for markdown nodes to use in creating pages. 12 | resolve( 13 | graphql(` 14 | { 15 | allMarkdownRemark( 16 | sort: { fields: [frontmatter___releaseDate], order: DESC } 17 | ) { 18 | edges { 19 | node { 20 | fields { 21 | slug 22 | } 23 | frontmatter { 24 | title 25 | author 26 | } 27 | } 28 | } 29 | } 30 | } 31 | `).then(result => { 32 | if (result.errors) { 33 | console.log(result.errors) 34 | reject(result.errors) 35 | } 36 | 37 | // Fetch all blog posts 38 | const blogPosts = result.data.allMarkdownRemark.edges 39 | 40 | blogPosts.forEach(blogPost => { 41 | createPage({ 42 | path: blogPost.node.fields.slug, 43 | component: blogPostPage, 44 | context: { 45 | slug: blogPost.node.fields.slug, 46 | }, 47 | }) 48 | }) 49 | }) 50 | ) 51 | }) 52 | } 53 | 54 | exports.onCreateNode = ({ node, actions, getNode }) => { 55 | const { createNodeField } = actions 56 | 57 | if (node.internal.type === `MarkdownRemark`) { 58 | const slug = createFilePath({ 59 | node, 60 | getNode, 61 | }) 62 | 63 | createNodeField({ 64 | name: `slug`, 65 | node, 66 | value: slug, 67 | }) 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-default", 3 | "description": "Gatsby default starter", 4 | "version": "1.0.0", 5 | "author": "Kyle Mathews ", 6 | "dependencies": { 7 | "gatsby": "^2.0.53", 8 | "gatsby-image": "^2.0.20", 9 | "gatsby-plugin-manifest": "^2.0.9", 10 | "gatsby-plugin-offline": "^2.0.16", 11 | "gatsby-plugin-react-helmet": "^3.0.2", 12 | "gatsby-plugin-sharp": "^2.0.12", 13 | "gatsby-source-filesystem": "^2.0.10", 14 | "gatsby-transformer-remark": "^2.1.15", 15 | "gatsby-transformer-sharp": "^2.1.8", 16 | "react": "^16.6.3", 17 | "react-dom": "^16.6.3", 18 | "react-helmet": "^5.2.0" 19 | }, 20 | "keywords": [ 21 | "gatsby" 22 | ], 23 | "license": "MIT", 24 | "scripts": { 25 | "build": "gatsby build", 26 | "dev": "gatsby develop", 27 | "start": "npm run develop", 28 | "format": "prettier --write \"src/**/*.js\"", 29 | "test": "echo \"Error: no test specified\" && exit 1" 30 | }, 31 | "devDependencies": { 32 | "prettier": "^1.15.2" 33 | }, 34 | "repository": { 35 | "type": "git", 36 | "url": "https://github.com/gatsbyjs/gatsby-starter-default" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/comments/comment-input.css: -------------------------------------------------------------------------------- 1 | .comments__form textarea { 2 | font: inherit; 3 | display: block; 4 | padding: 0.15rem; 5 | width: 100%; 6 | margin-bottom: 1rem; 7 | } 8 | 9 | .comments__form textarea:focus { 10 | outline: none; 11 | border: 1px solid #fa923f; 12 | } 13 | 14 | .comments__form button { 15 | font: inherit; 16 | padding: 0.25rem 0.5rem; 17 | background: #fa923f; 18 | color: white; 19 | border: 1px solid #fa923f; 20 | cursor: pointer; 21 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.26); 22 | } 23 | 24 | .comments__form button:hover, 25 | .comments__form button:active { 26 | background: #ffab65; 27 | border-color: #ffab65; 28 | } 29 | 30 | .comments__form button:focus { 31 | outline: none; 32 | } 33 | -------------------------------------------------------------------------------- /src/components/comments/comment-input.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | import './comment-input.css' 4 | 5 | class CommentInput extends Component { 6 | state = { 7 | commentText: '', 8 | } 9 | 10 | handleInputChange = event => { 11 | this.setState({ commentText: event.target.value }) 12 | } 13 | 14 | handleSubmit = event => { 15 | event.preventDefault() 16 | this.props.onSubmitComment(this.state.commentText) 17 | this.setState({ commentText: '' }) 18 | } 19 | 20 | render() { 21 | return ( 22 |
26 |