staticfuse / create-gatsby-theme-publisher Goto Github PK

View Code? Open in Web Editor NEW

22.0 3.0 6.0 656 KB

Use this to create a new Gatsby site with the Publisher theme.

JavaScript 100.00%

create-gatsby-theme-publisher's Introduction

Create Gatsby WordPress Publisher Theme

A Gatsby starter that has the Gatsby Theme Publisher installed and preconfigured.

For a full tutorial, please see our article on headless WordPress with Gatsby.

Example Sites

These sites all use the Publisher theme with WordPress as the backend.

Prequisites

Overview

Clone this repo: git clone https://github.com/staticfuse/create-gatsby-theme-publisher.git
cd into the folder cd create-gatsby-theme-publisher (You can change the project folder name, and theme name in package.json)
Install dependencies yarn
Install WPGraphQL plugin on your WordPress site
Configure your site options in gatsby-config.js Explanation of the options is below
Start the demo site gatsby develop
Add your logo and customize the theme
Publish to Netlify or any static host.

Adding Gatsby WordPress Theme Publisher to an existing Gatsby site

yarn add @staticfuse/gatsby-theme-publisher or npm install @staticfuse/gatsby-theme-publisher
In your gatsby-config.js :

module.exports = {
  siteMetadata: {
    title: 'Static Fuse',
    description: 'Headless WordPress with Gatsby FTW.',
    author: 'Scott and Justin',
    twitter: '@staticfuse',
    siteUrl: `https://staticfuse.com`,
  },
  plugins: [
    {
      resolve: `@staticfuse/gatsby-theme-publisher`,
      options: {
        starterPages: true, // add a customizable home, about, and contact page
        mailChimpEndpoint: 0, // https://www.gatsbyjs.org/packages/gatsby-plugin-mailchimp/#mailchimp-endpoint
        dynamicComments: 1, // enable comments
        gaTrackingId: 0, // google analytics tracking
        wordPressUrl: `https://mywpinstall.com`, // The url of your WordPress install
        blogURI: '/blog' // The page to display your posts
      },
    },
  ],
}

Publisher Theme Options

For theme options, customization, and more, please view the main readme file here.

create-gatsby-theme-publisher's People

Contributors

Stargazers

Watchers

Forkers

bilgisen filipmedak alexabruck techexpresslive masonjarnold cactuspmc

create-gatsby-theme-publisher's Issues

<a> child of <a>

Likely due to the logo.js shadowing component.

[DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated

Cloned create-gatsby-theme-publisher and ran yarn followed by gatsby develop.

Received following error after "success building schema - 0.412s":

"(node:15936) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated"

Don't thing this breaks anything, more of an FYI.

TypeError: Cannot read property 'childImageSharp' of undefined

I seem to be running into a problem in node_modules/@staticfuse/gatsby-theme-publisher/src/components/PostEntryMedia.js:36. The only way I can seem to get past his is if I comment out the img code

`<Img

36 | fluid={post.featuredImage.imageFile.childImageSharp.fluid}
37 | alt={post.title}
38 | />`

The GraphQL queries in node_modules/@staticfuse / gatsby-theme-publisher do not seem to work for my site out of the box. I needed to add the child element nodes to both featuredImage and author. Otherwise I get errors like Cannot query field sourceUrl, etc. I made changes in src/components/NextPost.js, and PostGrid.js to get around this problem. I don't know if this is something specific to my site or a change in WordPress.

See below for graphql code I changed to get featuredImage working (I did the same thing with author):

query GET_POSTS { wpgraphql { posts(first: 10000000) { nodes { title id uri featuredImage { sourceUrl imageFile { childImageSharp { fixed(height: 75) { base64 tracedSVG aspectRatio width height src srcSet srcWebp srcSetWebp originalName } } } } } } } }

query GET_POSTS { wpgraphql { posts(first: 10000000) { nodes { title id uri featuredImage { node { sourceUrl imageFile { childImageSharp { fixed(height: 75) { base64 tracedSVG aspectRatio width height src srcSet srcWebp srcSetWebp originalName } } } } } } } } }

URLs for blog posts have double slashes

Let's assume I have a WP post named cool-post, then Staticfuse will not generate a page with the URL /blog/cool-post/ but /blog//cool-post//

I think this is related to this change in the wp-graphql api

An unexpected error occurred: "expected hoisted manifest for \"@staticfuse/gatsby-theme-publisher#gatsby#gatsby-link#gatsby\"".

Hello, I've tried to install the theme on my Ubuntu 18 and did get this error from below 👇

Did you encounter this error as well?

TypeError: Cannot read property 'hasNextPage' of null

Ran git clone https://github.com/staticfuse/create-gatsby-theme-publisher, changed the gatsby-config.js to use my site: http://gatsby.liquidchurch.com/ and ran gatsby develop. Receiving the error as seen in the title of this issue.

The full error is below:

ERROR #11321 PLUGIN

"@staticfuse/gatsby-theme-publisher" threw an error while >running the createPages lifecycle:

Cannot read property 'hasNextPage' of null

TypeError: Cannot read property 'hasNextPage' of null

createTags.js:37
[create-gatsby-theme-publisher]/[@staticfuse]/gatsby-theme-publisher/create/createTags.js:37:23

task_queues.js:97 processTicksAndRejections
internal/process/task_queues.js:97:5

createTags.js:51 async module.exports
[create-gatsby-theme-publisher]/[@staticfuse]/gatsby-theme-publisher/create/createTags.js:51:3

gatsby-node.js:21 async Object.exports.createPages
[create-gatsby-theme-publisher]/[@staticfuse]/gatsby-theme-publisher/gatsby-node.js:21:3

failed createPages - 1.376s

This issue occurs if there are no tags existing in the WP install. It can be rectified by adding a tag to the WP install, would be nice to also see the error handled in code as well.

error Found incompatible module

error @staticfuse/[email protected]: The engine "node" is incompatible with this module. Expected version ">=10.16". Got "10.15.3"
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Error #11321 Plugin Cannot read property 'nodes' of null

Using a git clone from today (4/8/20), running yarn, and then gatsby develop results in the following error:

NOTE: This only occurs with one of the sites I've tried using this theme for, the other one works fine, no errors...unsure what is causing an issue in this one site.

ERROR #11321 PLUGIN

"@staticfuse/gatsby-theme-publisher" threw an error while running the createPages lifecycle:

Cannot read property 'nodes' of null

TypeError: Cannot read property 'nodes' of null

createPages.js:96
[create-gatsby-theme-publisher]/[@staticfuse]/gatsby-theme-publisher/create/createPages.js:96:13

runMicrotasks

task_queues.js:97 processTicksAndRejections
internal/process/task_queues.js:97:5

createPages.js:89 async fetchPages
[create-gatsby-theme-publisher]/[@staticfuse]/gatsby-theme-publisher/create/createPages.js:89:5

createPages.js:157 async module.exports
[create-gatsby-theme-publisher]/[@staticfuse]/gatsby-theme-publisher/create/createPages.js:157:19

gatsby-node.js:23 async Object.exports.createPages
[create-gatsby-theme-publisher]/[@staticfuse]/gatsby-theme-publisher/gatsby-node.js:23:3

Failed createPages

This was preceded by "USER TOTAL: 5" and followed by "success createPagesStatefully - 0.077s"

I think this caused the static pages that are dynamically created for this site and not sourced from WP to fail (as they return 404's).

Add stuff from /demo theme

Add theme.js file and shadowed components from here: https://github.com/staticfuse/gatsby-theme-publisher/tree/master/demo