Git Product home page Git Product logo

gatsby-starter-procyon's Introduction

gatsby-starter-procyon

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

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

  1. Create an account at GraphCMS.
  2. Create a new project using the blog template.
  3. 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.
  4. 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

Deploy to Netlify

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

danielmahon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

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.
screen shot 2018-07-20 at 3 10 51 pm

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

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.