├── .babelrc ├── .eslintrc.json ├── .gitignore ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── gatsby-config.js ├── gatsby-node.js ├── package.json ├── src ├── assets │ └── images │ │ ├── about.jpg │ │ └── duck_avatar.jpeg ├── components │ ├── Buttons │ │ └── index.js │ ├── Footer │ │ ├── __snapshots__ │ │ │ └── footer.test.js.snap │ │ ├── footer.test.js │ │ └── index.js │ ├── Layout │ │ └── index.js │ ├── Misc │ │ └── index.js │ └── Navigation │ │ ├── index.js │ │ └── mobile.js ├── data │ ├── authors.yaml │ └── content.json ├── layouts │ └── index.js ├── pages │ ├── about.js │ ├── blog │ │ ├── example-post-1 │ │ │ └── index.md │ │ ├── example-post-2 │ │ │ └── index.md │ │ ├── example-post-3 │ │ │ └── index.md │ │ ├── index.js │ │ └── post.sh │ ├── index.js │ ├── privacy.js │ └── terms.js ├── templates │ └── blog-post-template.js └── utils │ ├── enzyme.js │ ├── feather.js │ ├── media.js │ └── typography.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | // This babelrc is only needed for jest to work properly 2 | { 3 | "env": { 4 | "test": { 5 | "presets": ["es2015", "react"], 6 | "plugins": "babel-plugin-emotion" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": [ 7 | "airbnb", 8 | "prettier" 9 | ], 10 | "parserOptions": { 11 | "ecmaFeatures": { 12 | "experimentalObjectRestSpread": true, 13 | "jsx": true 14 | }, 15 | "sourceType": "module" 16 | }, 17 | "plugins": [ 18 | "react", 19 | "prettier" 20 | ], 21 | "rules": { 22 | "prettier/prettier": "error", 23 | "import/no-extraneous-dependencies": "off", 24 | "react/jsx-filename-extension": "off", 25 | "jsx-a11y/anchor-is-valid": "off" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.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 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # gatsby specific folders 61 | public/ 62 | .cache/ 63 | 64 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .cache/ 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "jsxBracketSameLine": false, 6 | "parser": "babylon" 7 | } 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018 Airtable https://airtable.com 2 | 3 | MIT License 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # airtable-gatsbyjs-blog 2 | 3 | A basic [GatsbyJS](https://www.gatsbyjs.org) blog that uses [Airtable](https://airtable.com) as a CMS. 4 | 5 | For more detailed instructions on how to set this up, be sure to read our [how-to blog post](https://blog.airtable.com/build-your-own-custom-blog-cms-with-airtable-and-gatsbyjs). 6 | 7 | This example uses the [Hampton theme](https://github.com/davad/gatsby-hampton-theme). 8 | 9 | ## Setup 10 | 11 | Start by installing the project's dependencies and the Gatsby CLI: 12 | ``` 13 | $ yarn 14 | $ yarn global add gatsby-cli 15 | ``` 16 | 17 | Next, add your Airtable API key and base ID to `gatsby-config.js`. You can find this information via our [interactive API documentation](https://airtable.com/api). 18 | 19 | If you're following along with the blog post, you don't need to change anything else. Otherwise, you may have to change the table/view name, GraphQL queries, and template variables to match your own base schema. 20 | 21 | To start your development server: 22 | ``` 23 | $ gatsby develop 24 | ``` 25 | 26 | Your blog should now be visible at [localhost:8000](https://localhost:8000)! 27 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/gatsby-hampton-theme', 3 | siteMetadata: { 4 | title: 'My Gatsby Site' 5 | }, 6 | mapping: { 7 | 'MarkdownRemark.frontmatter.author': 'AuthorsYaml' 8 | }, 9 | plugins: [ 10 | // Adding various source folders to the GraphQL layer. 11 | { 12 | resolve: 'gatsby-source-airtable', 13 | options: { 14 | apiKey: 'YOUR_API_KEY', 15 | baseId: 'YOUR_BASE_ID', 16 | tableName: 'CMS', 17 | tableView: 'published', 18 | queryName: '' 19 | } 20 | }, 21 | { 22 | resolve: `gatsby-source-filesystem`, 23 | options: { 24 | name: `pages`, 25 | path: `${__dirname}/src/pages/` 26 | } 27 | }, 28 | { 29 | resolve: `gatsby-source-filesystem`, 30 | options: { 31 | name: `data`, 32 | path: `${__dirname}/src/data/` 33 | } 34 | }, 35 | { 36 | resolve: `gatsby-source-filesystem`, 37 | options: { 38 | name: `images`, 39 | path: `${__dirname}/src/assets/images/` 40 | } 41 | }, 42 | { 43 | resolve: `gatsby-plugin-google-analytics`, 44 | options: { 45 | trackingId: `` 46 | } 47 | }, 48 | 'gatsby-transformer-remark', 49 | 'gatsby-transformer-json', 50 | 'gatsby-transformer-yaml', 51 | 'gatsby-plugin-sharp', 52 | 'gatsby-transformer-sharp', 53 | 'gatsby-plugin-offline', 54 | 'gatsby-plugin-emotion', 55 | 'gatsby-plugin-react-next', 56 | { 57 | resolve: 'gatsby-plugin-typography', 58 | options: { 59 | pathToConfigModule: 'src/utils/typography.js' 60 | } 61 | } 62 | ] 63 | }; 64 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const parseFilepath = require('parse-filepath'); 2 | const path = require('path'); 3 | const slash = require('slash'); 4 | 5 | exports.modifyWebpackConfig = ({ config, stage }) => { 6 | switch (stage) { 7 | case 'develop': 8 | config.preLoader('eslint-loader', { 9 | test: /\.(js|jsx)$/, 10 | exclude: /node_modules/ 11 | }); 12 | 13 | break; 14 | } 15 | return config; 16 | }; 17 | 18 | exports.onCreateNode = ({ node, boundActionCreators, getNode }) => { 19 | const { createNodeField } = boundActionCreators; 20 | if (node.internal.type === 'MarkdownRemark') { 21 | const fileNode = getNode(node.parent); 22 | const parsedFilePath = parseFilepath(fileNode.relativePath); 23 | 24 | const slug = `/${parsedFilePath.dir}`; 25 | createNodeField({ node, name: 'slug', value: slug }); 26 | } 27 | }; 28 | 29 | exports.createPages = ({ graphql, boundActionCreators }) => { 30 | const { createPage } = boundActionCreators; 31 | return new Promise((resolve, reject) => { 32 | const blogPostTemplate = path.resolve( 33 | 'src/templates/blog-post-template.js' 34 | ); 35 | resolve( 36 | graphql( 37 | ` 38 | { 39 | allAirtable { 40 | edges { 41 | node { 42 | slug 43 | } 44 | } 45 | } 46 | } 47 | ` 48 | ).then(result => { 49 | if (result.error) { 50 | reject(result.error); 51 | } 52 | 53 | result.data.allAirtable.edges.forEach(edge => { 54 | createPage({ 55 | path: `${edge.node.slug}`, 56 | component: slash(blogPostTemplate), 57 | context: { 58 | slug: edge.node.slug 59 | } 60 | }); 61 | }); 62 | }) 63 | ); 64 | }); 65 | }; 66 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-hampton-theme", 3 | "author": "David Landry ", 4 | "version": "0.0.1", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "dependencies": { 8 | "emotion": "^8.0.8", 9 | "emotion-server": "^8.0.8", 10 | "feather-icons": "^3.3.0", 11 | "gatsby": "^1.9.76", 12 | "gatsby-image": "^1.0.13", 13 | "gatsby-link": "^1.6.21", 14 | "gatsby-plugin-emotion": "^1.1.8", 15 | "gatsby-plugin-google-analytics": "^1.0.10", 16 | "gatsby-plugin-offline": "^1.0.10", 17 | "gatsby-plugin-react-next": "^1.0.4", 18 | "gatsby-plugin-sharp": "^1.6.9", 19 | "gatsby-plugin-typography": "^1.7.19", 20 | "gatsby-source-airtable": "^0.0.6", 21 | "gatsby-source-filesystem": "^1.5.5", 22 | "gatsby-transformer-json": "^1.0.11", 23 | "gatsby-transformer-remark": "^1.7.17", 24 | "gatsby-transformer-sharp": "^1.6.10", 25 | "gatsby-transformer-yaml": "^1.5.11", 26 | "gh-pages": "^1.1.0", 27 | "normalize.css": "^7.0.0", 28 | "prop-types": "^15.6.0", 29 | "react-burger-menu": "^2.2.3", 30 | "react-emotion": "^8.0.8", 31 | "react-icons": "^2.2.7", 32 | "remark-html": "^7.0.0", 33 | "styled-system": "^1.0.8", 34 | "unified": "^7.0.0" 35 | }, 36 | "scripts": { 37 | "dev": "node_modules/.bin/gatsby develop", 38 | "build": "node_modules/.bin/gatsby build", 39 | "deploy": "gatsby build --prefix-paths && gh-pages -d public", 40 | "test": "jest", 41 | "test:watch": "jest --watch", 42 | "prettify": "prettier --write '{./,__{tests,mocks}__}/**/*.+(js|jsx)'" 43 | }, 44 | "jest": { 45 | "transform": { 46 | ".(js|jsx)": "babel-jest" 47 | }, 48 | "testRegex": "(\\.(test|spec))\\.(jsx|js)$", 49 | "testPathIgnorePatterns": [ 50 | "/node_modules/", 51 | "/.cache/" 52 | ], 53 | "moduleFileExtensions": [ 54 | "jsx", 55 | "js" 56 | ], 57 | "collectCoverage": true, 58 | "coverageReporters": [ 59 | "lcov", 60 | "text", 61 | "html" 62 | ] 63 | }, 64 | "devDependencies": { 65 | "enzyme": "^3.1.0", 66 | "enzyme-adapter-react-16": "^1.0.2", 67 | "enzyme-to-json": "^3.1.4", 68 | "eslint": "^4.9.0", 69 | "eslint-config-airbnb": "^16.1.0", 70 | "eslint-config-prettier": "^2.6.0", 71 | "eslint-loader": "^1.9.0", 72 | "eslint-plugin-import": "^2.7.0", 73 | "eslint-plugin-jsx-a11y": "^6.0.2", 74 | "eslint-plugin-prettier": "^2.3.1", 75 | "eslint-plugin-react": "^7.4.0", 76 | "jest": "^21.2.1", 77 | "prettier": "1.7.4" 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/assets/images/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Airtable/airtable-gatsbyjs-blog/3e201641583d16ba0187bd4eb7f8fd72ba5cf019/src/assets/images/about.jpg -------------------------------------------------------------------------------- /src/assets/images/duck_avatar.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Airtable/airtable-gatsbyjs-blog/3e201641583d16ba0187bd4eb7f8fd72ba5cf019/src/assets/images/duck_avatar.jpeg -------------------------------------------------------------------------------- /src/components/Buttons/index.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'react-emotion'; 2 | 3 | const colors = { 4 | primary: 'black', 5 | secondary: 'rgba(0, 96, 193, 0.25)' 6 | }; 7 | 8 | const buttonBasic = css` 9 | width: 100%; 10 | padding: 0.5rem 1.25rem; 11 | border-radius: 5px; 12 | border: 2px solid ${colors.secondary}; 13 | `; 14 | 15 | const buttonPrimary = css` 16 | ${buttonBasic}; 17 | background-color: ${colors.secondary}; 18 | color: ${colors.primary}; 19 | transition: all 0.3s ease; 20 | 21 | &:hover { 22 | background-color: transparent; 23 | color: ${colors.secondary}; 24 | cursor: pointer; 25 | } 26 | `; 27 | 28 | const buttonSecondary = css` 29 | ${buttonBasic}; 30 | background-color: transparent; 31 | color: ${colors.secondary}; 32 | transition: all 0.3s ease; 33 | 34 | &:hover { 35 | background-color: ${colors.secondary}; 36 | color: ${colors.primary}; 37 | cursor: pointer; 38 | } 39 | `; 40 | 41 | const ButtonPrimary = styled.button` 42 | ${buttonPrimary}; 43 | `; 44 | 45 | export const ButtonSecondary = styled.button` 46 | ${buttonSecondary}; 47 | `; 48 | 49 | export default ButtonPrimary; 50 | -------------------------------------------------------------------------------- /src/components/Footer/__snapshots__/footer.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`renders correctly 1`] = ` 4 |
7 | 18 | 28 | 37 | 38 |
39 |

40 | Gatbsythemes.com starter 41 |

42 |
43 | 44 | 45 | 54 | 55 |
    58 |
  • 59 | 62 | Home 63 | 64 |
    • 65 |
  • 66 | 69 | Privacy Policy 70 | 71 |
    • 72 |
  • 73 | 76 | Terms of Service 77 | 78 |
    • 79 |
80 | 81 | 82 | 91 | 92 | 158 | 159 | 160 | 161 | 162 | 172 |

173 | Copyright © 2017 Gatbsythemes.com starter. All rights reserved. 174 |

175 | 176 |
177 | `; 178 | -------------------------------------------------------------------------------- /src/components/Footer/footer.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import toJson from 'enzyme-to-json'; 4 | import Footer from './index'; 5 | import enzymeconf from '../../utils/enzyme'; 6 | 7 | it('renders correctly', () => { 8 | const tree = shallow(