zgordon/twentynineteen-gatsby-theme

A port of the Twenty Nineteen WordPress Theme over to Gatsby

Twenty Nineteen Gatsby Theme

A port of the Twenty Nineteen WordPress Theme over to Gatsby. Check out the demo site.

This repo contains the source code for a site using the above Gatsby theme.

How to use this repo

# Clone the repo
git clone https://github.com/zgordon/twentynineteen-gatsby-theme.git

# Move into the new directory
cd twentynineteen-gatsby-theme

# Install dependencies
yarn

# Start the site on http://localhost:8000
yarn start

If this is your first time using Yarn workspaces, check out the docs.

Links and further reading

• https://gatsbywpthemes.com/
• https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/
• https://javascriptforwp.com/porting-the-twenty-nineteen-wordpress-theme-to-gatsby/
• https://wordpress.tv/2018/02/26/jason-bahl-wpgraphql-interacting-with-wordpress-data-in-a-new-way/

Team members

• https://twitter.com/zgordon
• https://twitter.com/muhsinlk
• https://twitter.com/jasonbahl
• https://twitter.com/hussain_thaj

twentynineteen-gatsby-theme's Issues

Date archives aren't created

Following the steps from the readme, everything goes perfectly according to plan. I noticed that although Author, Category, and Tag archives exist, Date archives (e.g. /2019/02) don't exist, and the date links reference an unknown site (http://localhost/mtwoblog.com/).

Setup Instructions

Hi, How do I get this running? I like the idea and would like to test it out.

styled-components? 💅

Are you open (for this theme or a next one) to using CSS-in-JS?

Some ideas behind it: https://mxstbr.com/thoughts/css-in-js/
I personally love styled-components, but there are many alternatives!

You could definitely say goodbye to your table of contents 😉

twentynineteen-gatsby-theme/packages/gatsby-theme-twentynineteen/src/style.scss

Lines 1 to 3 in 391d1e0

	/*--------------------------------------------------------------
	>>> TABLE OF CONTENTS:
	----------------------------------------------------------------

[issue] WPGraphQL_MenuItem / FetchError reason: self signed certificate

I'm new to this, but I will post here in case this trips anyone else up. When I ran:

yarn workspace starter develop

I received various errors related to communicating with WPGraphQL:

error Plugin gatsby-source-graphql returned an error
	FetchError: request to https://mysite.local/graphql failed, reason: self signed certificate
...
error Plugin gatsby-theme-twentynineteen returned an error
	TypeError: Cannot destructure property `wpgraphql` of 'undefined' or 'null'.
...
error GraphQL Error Unknown type "WPGraphQL_MenuItem".
...

As noted by the first error and despite the cert being trusted on my Mac, Node didn't like my self-signed certificate (which was generated via Local by Flywheel), so I had to add this to packages/gatsby-theme-twentynineteen/gatsby-node.js:

process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0

After that, it compiled fine. 🤘

Feature image support

HI
Great work here.
Is it possible to add feature image support for both home and in the blog?
The demo didnt show any of these.
If possible kindly add it or add instructions on how to set it up or add it in a different branch.

AhMazing. Also, confusing errors

First, thanks for this great resource for learning Gatsby and headless WordPress. I really appreciate it. It works flawlessly when I use the default WP URL.

When I switch the URL over to my existing WP site (with WPGraphQL already installed) and yarn workspace starter develop it chugs through all of the posts no problem, but then seems to choke on pages, specifically at the createPagesfetch page 1 of pages... portion of events.

error Plugin gatsby-theme-twentynineteen returned an error


  TypeError: Cannot read property 'uri' of null
  
  - createPages.js:134 allPages.map.page
    .../twentynineteen-gatsby-theme/packages/gatsby-theme-twentynineteen/utils/createPages.js:134:43
  
  - Array.map
  
  - createPages.js:133 fetchPages.then.allPages
    .../twentynineteen-gatsby-theme/packages/gatsby-theme-twentynineteen/utils/createPages.js:133:16
  

I would assume that's because of either a protected post, or some corrupt data in my poor old database that has been through its share of abuse.

It then appears to continue to chug along for a few successful commands, before erroring out harder:

success createPages — 21.011 s
success createPagesStatefully — 0.074 s
success onPreExtractQueries — 0.001 s
success update schema — 0.531 s
warning There are conflicting field types in your data. GraphQL schema will omit those fields.
SitePage.context.categories.nodes[]:
 - type: object
   value: [Object: null prototype] { name: 'trinity', slug: 'trinity' }
   source: c55ab679-495e-5d92-9671-1c927e8b636b
SitePage.context.prev.categories.nodes[]:
 - type: object
   value: [Object: null prototype] { name: 'trinity', slug: 'trinity' }
   source: c55ab679-495e-5d92-9671-1c927e8b636b
SitePage.context.next.categories.nodes[]:
 - type: object
   value: [Object: null prototype] { name: 'trinity', slug: 'trinity' }
   source: c55ab679-495e-5d92-9671-1c927e8b636b
SitePage.context.nodes[].categories.nodes[]:
 - type: object
   value: [Object: null prototype] { name: 'trinity', slug: 'trinity' }
   source: c55ab679-495e-5d92-9671-1c927e8b636b
error Type categories must define one or more fields.

Type categories_2 must define one or more fields.

Type categories_3 must define one or more fields.

Type categories_4 must define one or more fields.


  Error: Type categories must define one or more fields.
  Type categories_2 must define one or more fields.
  Type categories_3 must define one or more fields.
  Type categories_4 must define one or more fields.

It sputters once or twice after that before fully failing with

error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. error Command failed.

Any help is appreciated.

error GraphQL Error Unknown type "WPGraphQL_MenuItem"

When I ran:

yarn workspace starter develop

I received various errors related to communicating with WPGraphQL:

error Plugin gatsby-source-graphql returned an error
FetchError: request to https://mysite.local/graphql failed, reason: self signed certificate
...
error Plugin gatsby-theme-twentynineteen returned an error
TypeError: Cannot destructure property wpgraphql of 'undefined' or 'null'.
...
error GraphQL Error Unknown type "WPGraphQL_MenuItem".
...

Initial thoughts on this super awesome thing :)

I wanted to share a few first impressions trying this and reading Muhammad's excellent post.

1. This is awesome. I got it setup with the example site with no problem.

2. Prefixing yarn workspace in commands is kind of annoying. I put commands in the root package.json to handle it for me

  "scripts" : {
    "develop" : "yarn workspace starter develop",
    "build" : "yarn workspace starter build",
    "start": "yarn workspace starter start"
  }

3. I wish I didn't have to edit the theme. Yes, that's my engrained WordPress instincts, but think about this.

• Use Lerna to publish the /packages/gatsby-theme-twentynineteen and /packages/components packages to npm. I can put in a PR for this.
• Make the templates directories extensible so I can change the partials out from my dare I say child theme.

4. For some reason, one page can not be created.

I think this means it can not import joshpress.net/josh - not sure why.

It seams like throwing a timeout error and moving on would be better. Maybe a log of what did not import.