danielmahon / gatsby-starter-procyon Goto Github PK

View Code? Open in Web Editor NEW

86.0 6.0 23.0 6.7 MB

An opinionated Gatsby starter designed for trash-eating pandas.

Home Page: https://gatsby-starter-procyon.netlify.com

License: MIT License

JavaScript 99.37% CSS 0.63%

reactjs gatsby netlify graphcms draft-js apollo material-ui starter boilerplate

gatsby-starter-procyon's Introduction

gatsby-starter-procyon

An opinionated Gatsby starter designed for trash-eating pandas.

View Demo - https://gatsby-starter-procyon.netlify.com/
Click "Login" in the footer to enable client-side editing.
Email: [email protected] Password: demo
You'll get an error when trying to save changes to remote, but you get the idea...

View the NetlifyCMS version on the netlifycms branch:
https://github.com/danielmahon/gatsby-starter-procyon/tree/netlifycms

Features

Gatsby + ReactJS (server side rendering)
GraphCMS Headless CMS via gatsby-source-graphcms
DraftJS (in-place) Medium-like Editing
Apollo GraphQL (client-side)
Local caching between builds
Material-UI (layout, typography, components, etc)
Styled-Components™-like API via Material-UI
Netlify Deployment Friendly
Netlify Identity Authentication (enables editing)
Versionist automated deployment and CHANGELOG (forked until #115)
Automatic rebuilds with GraphCMS and Netlify web hooks
PWA (Progressive Web App)
Google Fonts
Trash Panda Approved*

Coming Soon™

Enhanced styled API supporting React.forwardRef and props
Dynamic page and section creation
Example on how to use Markdown AST to render components
Transactional emails
Contact form and message management
Links to sites that used gatsby-starter-procyon

For an overview of the project structure please refer to the Gatsby documentation - Building with Components.

Install

Make sure that you have the Gatsby CLI program installed:

npm install --global gatsby-cli

And run from your CLI:

gatsby new gatsby-starter-procyon https://github.com/danielmahon/gatsby-starter-procyon
cd gatsby-starter-procyon

Setup GraphCMS

Create an account at GraphCMS.
Create a new project using the blog template.
Add at least one "Blog Post" to the CMS, be sure to fill out the title, coverImage, content and slug. These are required for the initial Gatsby build.
Create .env.development and .env.production in the root folder and add the following environmental variables with your token and endpoint:

GATSBY_GRAPHQLCMS_ENDPOINT=
GATSBY_GRAPHQLCMS_TOKEN=

Then you can run it by:

npm start

Navigate to https://localhost:5000 in your browser.

Deploy

Automatic versioning, deployment and CHANGELOG

This starter supports automatic versioning and CHANGELOG generation based on your git commits via versionist. Link your GitHub repo to Netlify to include automatic deployments.

First, create a GitHub repo and link it to Netlify:
https://www.netlify.com/docs/continuous-deployment/.

# Initialize your repo
git init
# Add all files not in .gitignore
git add -A
# Create your first commit
git commit -m "Initial commit"
# Sets your remote origin to your GitHub repo
git remote add origin https://github.com/[username]/[repo-name].git
# Set your local master to track origin/master
git branch -u origin/master
# Push your first release
npm run release:patch
# 0.0.1 -> 0.0.2
# You can also increment by minor or major versions
# npm run release:minor
# npm run release:major

Make more changes...

git commit -m "Made something do something"
npm run release:patch
# 0.0.2 -> 0.0.3

Setup Netlify Identity

There is a "Login" link in the site footer that launches the Netlify Identity Widget. The first time it opens it should ask you for your Netlify site's domain. Paste that in then you will be able to sign-up or login. I recommend starting with the simple email sign-up for local development.

DraftJS Client-Side CMS Editing

Go to a blog post page and make sure you are logged in. Click inside the main post's content and start editing! You should see a "reset" and "save" button to the bottom-right of the content. Clicking save will use Apollo to update your GraphCMS content and if you setup web-hooks between GraphCMS and Netlify it will also trigger a rebuild of your static site! In the meantime Apollo will locally cache your changes so you will continue to see your changes until you refresh the site (which clears the cache). When the rebuild is done you can refresh the page and see the updated content.

Questions

Q: Why... this?
A: Well, I wanted to rebuild some small client marketing sites using the same tech I am currently using for web(native) apps, like ReactJS. Gatsby seemed cool, Netlify makes it easy, and I wanted in-place editing like Medium™. So I created a proof-of-concept and I was surprised it worked.

Q: You're an idiot and this is 💩
A: Thanks, and I welcome all creative criticism.

Q: What's Procyon? Why Trash Pandas?
A: Look it up and because.

Todo

Lots of stuff. Check issues in the future.

gatsby-starter-procyon's People

Contributors

Stargazers

Watchers

gatsby-starter-procyon's Issues

TypeError: Only absolute URLs are supported

When I run npm start for the first time the gatsby-source-graphcms plugin returns an error.

"Source and transform nodes" loads forever in the terminal as well. I'm not sure if the two are related.

I'm new to gatsby and coding in general so I'm not having any luck fixing this. Any help would be appreciated. Thank you.

Edit entire blog post

Is there a way to have the logged in user be able to edit the title and image along with the actual post? All I see is the ability to edit the main content.

Webpack error: Document is not defined

gatsby build throws:

WebpackError: document is not defined
  
  - netlify-identity.js:1 u
    ~/netlify-identity-widget/build/netlify-identity.js:1:80288
  
  - netlify-identity.js:1 Object.init
    ~/netlify-identity-widget/build/netlify-identity.js:1:82197
  
  - index.js:66 new App
    src/layouts/index.js:66:21
  
  - ReactCompositeComponent.js:295 ReactCompositeComponentWrapper._constructComponentWithoutOwner
    ~/react-dom/lib/ReactCompositeComponent.js:295:1
  
  - ReactCompositeComponent.js:282 ReactCompositeComponentWrapper._constructComponent
    ~/react-dom/lib/ReactCompositeComponent.js:282:1
  
  - ReactCompositeComponent.js:185 ReactCompositeComponentWrapper.mountComponent
    ~/react-dom/lib/ReactCompositeComponent.js:185:1
  
  - ReactReconciler.js:43 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:43:1
  
  - ReactMultiChild.js:234 ReactDOMComponent.mountChildren
    ~/react-dom/lib/ReactMultiChild.js:234:1
  
  - ReactDOMComponent.js:657 ReactDOMComponent._createContentMarkup
    ~/react-dom/lib/ReactDOMComponent.js:657:1
  
  - ReactDOMComponent.js:524 ReactDOMComponent.mountComponent
    ~/react-dom/lib/ReactDOMComponent.js:524:1

Fix font "flashing" on page load

Npm start error

Npm start shows the following error:
error Plugin gatsby-source-graphcms returned an error
TypeError: Only absolute URLs are supported

My dependencies:

Node v8.9.4
Npm v5.8.0

Deploy to Netlify

Any idea on what I'm doing wrong here?

Netlify Deployment details:

5:00:03 PM: TypeError: Only absolute URLs are supported
5:00:03 PM:
5:00:03 PM: - index.js:1268 getNodeRequestOptions
5:00:03 PM: [repo]/[node-fetch]/lib/index.js:1268:9
5:00:03 PM:
5:00:03 PM: - index.js:1352
5:00:03 PM: [repo]/[node-fetch]/lib/index.js:1352:19
5:00:03 PM:
5:00:03 PM: - debuggability.js:303 Promise._execute
5:00:03 PM: [repo]/[bluebird]/js/release/debuggability.js:303:9
5:00:03 PM:
5:00:03 PM: - promise.js:483 Promise._resolveFromExecutor
5:00:03 PM: [repo]/[bluebird]/js/release/promise.js:483:18
5:00:03 PM:
5:00:03 PM: - promise.js:79 new Promise
5:00:03 PM: [repo]/[bluebird]/js/release/promise.js:79:10
5:00:03 PM:
5:00:03 PM: - index.js:1349 Object.fetch
5:00:03 PM: [repo]/[node-fetch]/lib/index.js:1349:9
5:00:03 PM:
5:00:03 PM: - node-ponyfill.js:9 Object.fetch
5:00:03 PM: [repo]/[cross-fetch]/dist/node-ponyfill.js:9:20
5:00:03 PM:
5:00:03 PM: - index.js:104 GraphQLClient.
5:00:03 PM: [repo]/[graphql-request]/dist/src/index.js:104:46
5:00:03 PM:
5:00:03 PM: - index.js:40 step
5:00:03 PM: [repo]/[graphql-request]/dist/src/index.js:40:23
5:00:03 PM:
5:00:03 PM: - index.js:21 Object.next
5:00:03 PM: [repo]/[graphql-request]/dist/src/index.js:21:53
5:00:04 PM:
5:00:04 PM: - index.js:15
5:00:04 PM: [repo]/[graphql-request]/dist/src/index.js:15:71
5:00:04 PM:
5:00:04 PM: - es6-promise.js:458 initializePromise
5:00:04 PM: [repo]/[es6-promise]/dist/es6-promise.js:458:5
5:00:04 PM:
5:00:04 PM: - es6-promise.js:874 new Promise
5:00:04 PM: [repo]/[es6-promise]/dist/es6-promise.js:874:33
5:00:04 PM:
5:00:04 PM: - index.js:11 __awaiter
5:00:04 PM: [repo]/[graphql-request]/dist/src/index.js:11:12
5:00:04 PM:
5:00:04 PM: - index.js:94 GraphQLClient.request
5:00:04 PM: [repo]/[graphql-request]/dist/src/index.js:94:16
5:00:04 PM:
5:00:04 PM: - gatsby-node.js:37 Object.
5:00:04 PM: [repo]/[gatsby-source-graphcms]/gatsby-node.js:37:44
5:00:04 PM:
5:00:04 PM:
5:00:04 PM: Caching artifacts
5:00:04 PM: Started saving node modules
5:00:04 PM: Finished saving node modules
5:00:04 PM: Started saving yarn cache
5:00:04 PM: Finished saving yarn cache
5:00:04 PM: Started saving pip cache
5:00:04 PM: Finished saving pip cache
5:00:04 PM: Started saving emacs cask dependencies
5:00:04 PM: Finished saving emacs cask dependencies
5:00:04 PM: Started saving maven dependencies
5:00:04 PM: Finished saving maven dependencies
5:00:04 PM: Started saving boot dependencies
5:00:04 PM: Finished saving boot dependencies
5:00:04 PM: Started saving go dependencies
5:00:04 PM: Finished saving go dependencies
5:00:04 PM: Cached node version v8.11.1
5:00:04 PM: Error running command: Build script returned non-zero exit code: 1
5:00:04 PM: Failing build: Failed to build site
5:00:04 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
5:00:04 PM: Finished processing build request in 49.745890283s

Error: Cannot query field "allPosts" or "allAuthors" on type "Query"

When I run npm start for the first time after setting up the .env.development and .env.production files I get the following error:

Any idea of what the problem could be? I haven't messed around with the GraphQL query.

Question about setting up ENV variables

From email:

"Having some fun with your starter. Wanted to make sure I was using graphcms correctly. I'm on step 4 and I don’t think I'm doing adding is correctly."

I would start by checking your gatsby-config.js file and make sure you are passing the correct variables, should look something like this:

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  siteMetadata: {
    title: 'Gatsby Starter Procyon',
    shortName: 'Procyon',
    description:
      'An opinionated Gatsby starter designed for trash-eating pandas.',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-source-graphcms',
      options: {
        endpoint: process.env.GATSBY_GRAPHQLCMS_ENDPOINT,
        token: process.env.GATSBY_GRAPHQLCMS_TOKEN,
        // Get all remote data
        query: `{
          allPosts {
            id
            slug
            title
            content
            dateAndTime
            coverImage {
              handle
            }
          }
          allAuthors {
            id
            name
            bibliography
            avatar {
              handle
            }
          }
        }`,
      },
    },
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        get name() {
          return module.exports.siteMetadata.title;
        },
        get short_name() {
          return module.exports.siteMetadata.shortName;
        },
        start_url: '/',
        background_color: '#fafafa',
        theme_color: '#212121',
        display: 'minimal-ui',
        icon: 'src/images/icon.png',
      },
    },
    'gatsby-plugin-offline',
    'gatsby-plugin-react-next',
    'gatsby-plugin-netlify',
  ],
};

Notice how you need to import that variables first with:

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

The browser will have access to ANY env variable prefixed with GATSBY_. But you need to explicitly import them into gatsby-config.js

Also your .env.development file should look similar to the following:

GATSBY_GRAPHQLCMS_ENDPOINT="https://api.graphcms.com/simple/v1/your-project"
GATSBY_GRAPHQLCMS_TOKEN="euidy03gd93..."

image load time

Seems to be taking much longer to load images. I changed to SVG but still some lag. Do you recommend taking advantage of the image plugins? @danielmahon