Initial Commit

.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  "env": {
+    "browser": true,
+    "es6": true,
+  },
+  "plugins": [
+    "react",
+  ],
+  "globals": {
+    "graphql": false,
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true,
+    },
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+public
+.gatsby-context.js
+.DS_Store
+.intermediate-representation/
+.cache/
+yarn.lock

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "semi": false,
+  "singleQuote": true
+}

.travis.yml

@@ -0,0 +1,15 @@
+language: node_js
+
+os:
+  - linux
+  - osx
+
+node_js:
+  - "node"
+  - "lts/*"
+  - "7"
+  - "8"
+
+script:
+  - npm install
+  - npm run lint

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,68 @@
+# Gatsby + Cosmic
+
+![gatsby-blog-cosmicjs](https://cdn.cosmicjs.com/fe5196f0-42c2-11ea-8d10-df553329919a-gatsby-blog-cosmic.png "The index page of the starter blog")
+
+> This repo contains an example blog website that is built with [Gatsby](https://www.gatsbyjs.org/), and [Cosmic](https://www.cosmicjs.com).
+
+> [See live demo hosted on Netlify](https://gatsby-blog-cosmicjs.netlify.com/)
+
+> Uses the [Cosmic Gatsby Source Plugin](https://www.npmjs.com/package/gatsby-source-cosmicjs)
+
+## Prerequisites
+
+- Node (I recommend using v8.2.0 or higher)
+- [Gatsby CLI](https://www.gatsbyjs.org/docs/)
+
+## Install
+
+``` bash
+# Make sure that you have the Gatsby CLI program installed
+npm install --global gatsby-cli
+
+# run from your CLI
+gatsby new gatsby-example-blog https://github.com/cosmicjs/gatsby-blog-cosmicjs
+```
+In `gatsby-config.js` you need to add configuration for your Cosmic Bucket
+
+``` javascript
+{
+  resolve: 'gatsby-source-cosmicjs',
+  options: {
+    bucketSlug: '', /* Find this in Your Bucket > Settings > Basic Settings after logging in at https://app.cosmicjs.com/login */
+    objectTypes: ['posts', 'settings'], /* Object types to fetch */
+    apiAccess: {
+      read_key: '', /* Find this in Your Bucket > Settings > API Access after logging in at https://app.cosmicjs.com/login */
+    },
+    localMedia: true /* Optional. If you want to enable local image for Gatsby Image */
+  }
+},
+```
+
+Then
+
+``` bash
+# Then you can run it by
+cd gatsby-example-blog
+npm run develop
+```
+
+## Enable content auto refresh
+To enable content auto refresh, open another terminal window and run the following command:
+```
+npm run poll-content
+```
+This will poll the content in your Bucket for any updates and automatically refresh it in your blog during development. Learn more about refreshing content in the [Gatsby docs](https://www.gatsbyjs.com/docs/refreshing-content/).
+
+## Deploy to Netlify
+You can deploy to Netlify in a few steps using their CLI. Run the following commands from the root folder.
+```
+npm i -g netlify-cli
+netlify deploy
+```
+
+#### Set your Environment Variables in Netlify
+In the Netlify dashboard, set your environment variables located in <i>Site Settings > Build and Deploy > Environment</i>. Find your Cosmic Bucket keys located in <i>Bucket > Basic Settings</i> after <a href="https://app.cosmicjs.com/login">logging in</a>.
+```
+COSMIC_BUCKET=<your-bucket-slug>
+COSMIC_READ_KEY=<your-bucket-read-key>
+```

gatsby-config.js

@@ -0,0 +1,42 @@
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
+
+module.exports = {
+  plugins: [
+    `gatsby-plugin-offline`,
+    `gatsby-plugin-react-helmet`,
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/src/pages`,
+        name: 'pages',
+      },
+    },
+    {
+      resolve: 'gatsby-source-cosmicjs',
+      options: {
+        bucketSlug: process.env.COSMIC_BUCKET,
+        objectTypes: ['posts','settings'],
+        apiAccess: {
+          read_key: process.env.COSMIC_READ_KEY,
+        },
+        localMedia: true
+      }
+    },
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        //trackingId: `ADD YOUR TRACKING ID HERE`,
+      },
+    },
+    {
+      resolve: 'gatsby-plugin-typography',
+      options: {
+        pathToConfigModule: 'src/utils/typography',
+      },
+    },
+  ],
+}

gatsby-node.js

@@ -0,0 +1,55 @@
+const each = require('lodash/each')
+const Promise = require('bluebird')
+const path = require('path')
+
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage } = actions
+  const indexPage = path.resolve('./src/pages/index.js')
+  createPage({
+    path: `posts`,
+    component: indexPage,
+  })
+
+  return new Promise((resolve, reject) => {
+    const blogPost = path.resolve('./src/templates/blog-post.js')
+    resolve(
+      graphql(
+        `
+          {
+            allCosmicjsPosts(sort: { fields: [created], order: DESC }, limit: 1000) {
+              edges {
+                node {
+                  slug,
+                  title
+                }
+              }
+            }
+          }
+        `
+      ).then(result => {
+        if (result.errors) {
+          console.log(result.errors)
+          reject(result.errors)
+        }
+
+        // Create blog posts pages.
+        const posts = result.data.allCosmicjsPosts.edges;
+
+        each(posts, (post, index) => {
+          const next = index === posts.length - 1 ? null : posts[index + 1].node;
+          const previous = index === 0 ? null : posts[index - 1].node;
+
+          createPage({
+            path: `posts/${post.node.slug}`,
+            component: blogPost,
+            context: {
+              slug: post.node.slug,
+              previous,
+              next,
+            },
+          })
+        })
+      })
+    )
+  })
+}