zgordon/tabor-gatsby-theme

A port of the Tabor WordPress Theme over to Gatsby

Tabor Gatsby Theme

A port of the Tabor WordPress Theme over to Gatsby

Demo

Checkout the Tabor Theme Demo to see what the site looks like in action.

How to use this repo

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

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

# Install dependencies
yarn

# Start the site on http://localhost:8000
yarn workspace site develop

For Help

Please open an issue if you find one, this is a V1 and work in progress :)

tabor-gatsby-theme's Issues

Error menu.js

Menu not showing and generated error:

The GraphQL query from /Users/Sajib/tabor-gatsby-theme/packages/gatsby-theme-tabor/src/components/Menu.js failed.

Errors:
  Expected type MenuLocationEnum, found PRIMARY.

GraphQL request (3:5)
  2:   wpgraphql {
  3:     menuItems(where: {location: PRIMARY}) {
         ^
  4:       nodes {
  
Plugin:
  none
Query:
  query GET_MENU_ITEMS {
    wpgraphql {
      menuItems(where: {location: PRIMARY}) {
        nodes {
          ...MenuFields
          childItems {
            nodes {
              ...MenuFields
            }
          }
        }
      }
    }
  }
  
  fragment MenuFields on WPGraphQL_MenuItem {
    id
    label
    url
    connectedObject {
      __typename
    }
  }

How do i add the theme to wordpress?

How to use the theme using wordpress?

Compiling Error when fetching Menus

I installed my own WordPress, the WPGraphQL Plugin and added the WP URL to gatsby-config.js

When running yarn workspace site develop I get some errors and the compiling fails.

error GraphQL Error Expected type WPGraphQL_MenuLocationEnum, found PRIMARY.

  file: /Users/werbeagenten/Code/tabor-gatsby-theme/packages/gatsby-theme-tabor/src/components/Menu.js

   3 |     id
   4 |     label
   5 |     url
   6 |     connectedObject {
   7 |       __typename
   8 |     }
   9 |   }
  10 |
  11 |   query GET_MENU_ITEMS {
  12 |     wpgraphql {
> 13 |       menuItems(where: { location: PRIMARY }) {
     |                                    ^
  14 |         nodes {
  15 |           ...MenuFields
  16 |           childItems {
  17 |             nodes {
  18 |               ...MenuFields
  19 |             }
  20 |           }
  21 |         }
  22 |       }
  23 |     }

(node:10161) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:10161) DeprecationWarning: Resolver#doResolve: The type arguments (string) is now a hook argument (Hook). Pass a reference to the hook instead.
 ERROR  Failed to compile with 1 errors                                                                                          09:21:02

 error  in ../packages/gatsby-theme-tabor/src/components/Menu.js

Module Error (from ../node_modules/eslint-loader/index.js):

/Users/werbeagenten/Code/tabor-gatsby-theme/packages/gatsby-theme-tabor/src/components/Menu.js
  19:36  error  Expected type WPGraphQL_MenuLocationEnum, found PRIMARY  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)


 @ ../packages/gatsby-theme-tabor/src/components/Header.js 11:0-26 56:29-33
 @ ../packages/gatsby-theme-tabor/src/components/Layout.js
 @ ../packages/gatsby-theme-tabor/src/templates/posts/archive.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill ../node_modules/webpack-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

✖ ｢wdm｣:
ERROR in ../packages/gatsby-theme-tabor/src/components/Menu.js
Module Error (from ../node_modules/eslint-loader/index.js):

/Users/werbeagenten/Code/tabor-gatsby-theme/packages/gatsby-theme-tabor/src/components/Menu.js
  19:36  error  Expected type WPGraphQL_MenuLocationEnum, found PRIMARY  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)

 @ ../packages/gatsby-theme-tabor/src/components/Header.js 11:0-26 56:29-33
 @ ../packages/gatsby-theme-tabor/src/components/Layout.js
 @ ../packages/gatsby-theme-tabor/src/templates/posts/archive.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill ../node_modules/webpack-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.

Before switching from the wordPressUrl in gatsby-config.js to my own it worked well.
Do I need any special configuration in WordPress?

I'm running WordPress 5.2 with WPGraphQL 0.3.01.
I also tried the latest WPGraphQL Pre-release 0.3.3 from github.

Static page as default instead of post archive

Thanks for the great theme! Just started with Gatsby and got the following two questions:

1. How do I display a static page as the default page, instead of the posts archive? I can change posts/archive.js to update the current default page (https://localhost:8000/), but I would rather think that should be the responsibility of a file in the pages/ directory?
2. Can I actually get the default static page defined in the Wordpress backend (Settings -> Reading -> Your homepage displays) from the WPGraphQL? Or do I currently need to hardcode which page should be the default for the Gatsby frontend?

Dependencies and requirements

Very nice project and it works against the demo site. However it's otherwise quite hard to setup without knowing which versions of WPGraphQL is required and if there are any constraint in terms of data (beyond what any WP install brings in)

Currently my build fails as follows:

success onPreBootstrap — 0.010 s
error Plugin gatsby-source-graphql returned an error


  GraphQLError: Syntax Error: Expected Name, found }

  - gatsby-node.js:82 Object.<anonymous>
    [g-tabor]/[gatsby-source-graphql]/gatsby-node.js:82:31

  - Generator.next


warning The gatsby-source-graphql plugin has generated no Gatsby nodes. Do you need it?
success source and transform nodes — 0.108 s
success building schema — 0.102 s
error Plugin gatsby-theme-tabor returned an error


  TypeError: Cannot destructure property `wpgraphql` of 'undefined' or 'null'.

  - createPosts.js:112 graphql.then
    *****/g-tabor/packages/gatsby-theme-tabor/create/createPosts.    js:112:11

  - util.js:16 tryCatcher
    [g-tabor]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [g-tabor]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [g-tabor]/[bluebird]/js/release/promise.js:569:18

  - promise.js:606 Promise._settlePromiseCtx
    [g-tabor]/[bluebird]/js/release/promise.js:606:10

  - async.js:142 _drainQueueStep
    [g-tabor]/[bluebird]/js/release/async.js:142:12

  - async.js:131 _drainQueue
    [g-tabor]/[bluebird]/js/release/async.js:131:9

  - async.js:147 Async._drainQueues
    [g-tabor]/[bluebird]/js/release/async.js:147:5

  - async.js:17 Immediate.Async.drainQueues
    [g-tabor]/[bluebird]/js/release/async.js:17:14


success createPages — 0.134 s
success createPagesStatefully — 0.033 s
success onPreExtractQueries — 0.000 s
success update schema — 0.123 s
error GraphQL Error Unknown type "WPGraphQL_MenuItem".

  file: *****/packages/gatsby-theme-tabor/src/components/Menu.js

   1 |
>  2 |   fragment MenuFields on WPGraphQL_MenuItem {
     |                          ^
   3 |     id
   4 |     label
   5 |     url
   6 |     connectedObject {
   7 |       __typename
   8 |     }
   9 |   }
  10 |
  11 |   query GET_MENU_ITEMS {
  12 |     wpgraphql {

success extract queries from components — 0.098 s

Missing Sytlesheet error

This might be a noob question but I am getting the missign Stylesheet error even when i upload the folder through FTP.

Something to add to the readme

1. According to package.json the site should be started with yarn workspace site develop instead of yarn workspace starter develop
2. If someone wants to use this Gatsby theme with their own WordPress instance, then they need to change the menu location here Menu.js#L19 to one of the locations registered by WordPress to prevent a compilation error when running yarn workspace site develop

register_nav_menus(
  array(
    'menu-1' => __( 'Primary', 'twentynineteen' ),
    'footer' => __( 'Footer Menu', 'twentynineteen' ),
    'social' => __( 'Social Links Menu', 'twentynineteen' ),
  )
);

Locations available here: MENU_1, FOOTER, SOCIAL

Great work folks! I'll keep using it and report any issues if there's any.

Pagination on Category and Tag archives

First of all thank you for this great project! Just started with Gatsby and headless WordPress and I noticed something.

The categories and archives pages are missing pagination. Is there a simple way to fix that ?

I'm thinking about creating an array of categoryPages for each category like in createPosts.js