Merge branch 'master' into master+social-image

Author: colbyfayock

.all-contributorsrc

@@ -59,6 +59,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "thedavedavies",
+      "name": "Dave",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2972436?v=4",
+      "profile": "https://highaltitude.io/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.prettierignore

@@ -40,4 +40,6 @@ yarn.lock
 .prettierignore
 .gitignore
 
-public
+public
+
+.all-contributorsrc

README.md

@@ -1,7 +1,7 @@
 # Next.js WordPress Starter
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Scaling WordPress with the power of [Next.js](https://nextjs.org/) and the static web!
@@ -20,7 +20,7 @@ npx create-next-app -e https://github.com/colbyfayock/next-wordpress-starter
 
 Add an `.env.local` file to the root with the following:
 ```
-WORDPRESS_HOST="http://wordpressite.com"
+WORDPRESS_GRAPHQL_ENDPOINT="http://wordpressite.com/graphql"
 ```
 
 ## 🚀 Getting Started
@@ -57,7 +57,7 @@ This project makes use of WPGraphQL to query WordPress with GraphQL. In order to
 Create a new file locally called `.env.local` and add the following:
 
 ```bash
-WORDPRESS_HOST="[host]"
+WORDPRESS_GRAPHQL_ENDPOINT="[WPGraphQL Endpoint]"
 ```
 
 Replace `[host]` with your the home URL of your WordPress instance.
@@ -113,17 +113,19 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://colbyfayock.com/newsletter"><img src="https://avatars2.githubusercontent.com/u/1045274?v=4" width="100px;" alt=""/><br /><sub><b>Colby Fayock</b></sub></a><br /><a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=colbyfayock" title="Code">💻</a> <a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=colbyfayock" title="Documentation">📖</a></td>
-    <td align="center"><a href="http://www.kevincunningham.co.uk"><img src="https://avatars3.githubusercontent.com/u/8320213?v=4" width="100px;" alt=""/><br /><sub><b>Kevin Cunningham</b></sub></a><br /><a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=doingandlearning" title="Code">💻</a></td>
-    <td align="center"><a href="http://guilleangulo.me"><img src="https://avatars0.githubusercontent.com/u/50624358?v=4" width="100px;" alt=""/><br /><sub><b>Guillermo Angulo</b></sub></a><br /><a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=GuilleAngulo" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.heinsnyman.co.za"><img src="https://avatars0.githubusercontent.com/u/22816814?v=4" width="100px;" alt=""/><br /><sub><b>Hein Snyman</b></sub></a><br /><a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=HeinSnyman" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/grische"><img src="https://avatars0.githubusercontent.com/u/2787581?v=4" width="100px;" alt=""/><br /><sub><b>Grische</b></sub></a><br /><a href="#tool-grische" title="Tools">🔧</a></td>
-    <td align="center"><a href="https://github.com/jatin-rathee"><img src="https://avatars0.githubusercontent.com/u/44899844?v=4" width="100px;" alt=""/><br /><sub><b>Jatin Rathee</b></sub></a><br /><a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=jatin-rathee" title="Code">💻</a></td>
+    <td align="center"><a href="https://colbyfayock.com/newsletter"><img src="https://avatars2.githubusercontent.com/u/1045274?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Colby Fayock</b></sub></a><br /><a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=colbyfayock" title="Code">💻</a> <a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=colbyfayock" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://www.kevincunningham.co.uk"><img src="https://avatars3.githubusercontent.com/u/8320213?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kevin Cunningham</b></sub></a><br /><a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=doingandlearning" title="Code">💻</a></td>
+    <td align="center"><a href="http://guilleangulo.me"><img src="https://avatars0.githubusercontent.com/u/50624358?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Guillermo Angulo</b></sub></a><br /><a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=GuilleAngulo" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.heinsnyman.co.za"><img src="https://avatars0.githubusercontent.com/u/22816814?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hein Snyman</b></sub></a><br /><a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=HeinSnyman" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/grische"><img src="https://avatars0.githubusercontent.com/u/2787581?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Grische</b></sub></a><br /><a href="#tool-grische" title="Tools">🔧</a></td>
+    <td align="center"><a href="https://github.com/jatin-rathee"><img src="https://avatars0.githubusercontent.com/u/44899844?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jatin Rathee</b></sub></a><br /><a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=jatin-rathee" title="Code">💻</a></td>
+    <td align="center"><a href="https://highaltitude.io/"><img src="https://avatars.githubusercontent.com/u/2972436?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dave</b></sub></a><br /><a href="https://github.com/colbyfayock/next-wordpress-starter/commits?author=thedavedavies" title="Code">💻</a></td>
   </tr>
 </table>
 
-<!-- markdownlint-enable -->
+<!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

next.config.js

@@ -13,7 +13,12 @@ module.exports = withPlugins([[indexSearch], [feed], [sitemap], [socialImages]],
 
   trailingSlash: true,
 
+  // By enabling verbose logging, it will provide additional output details for
+  // diagnostic purposes. By default is set to false.
+  //verbose: true,
+
   env: {
     WORDPRESS_HOST: removeLastTrailingSlash(process.env.WORDPRESS_HOST),
+    WORDPRESS_GRAPHQL_ENDPOINT: removeLastTrailingSlash(process.env.WORDPRESS_GRAPHQL_ENDPOINT),
   },
 });

package.json

@@ -21,24 +21,24 @@
     "*": "yarn format:nopath"
   },
   "dependencies": {
-    "@apollo/client": "^3.2.5",
+    "@apollo/client": "^3.3.7",
     "canvas": "^2.6.1",
     "date-fns": "^2.16.1",
     "dotenv": "^8.2.0",
-    "fuse.js": "^6.4.2",
+    "fuse.js": "^6.4.6",
     "graphql": "^15.4.0",
     "he": "^1.2.0",
     "loader-utils": "^2.0.0",
     "next": "9.5.5",
-    "next-compose-plugins": "^2.2.0",
+    "next-compose-plugins": "^2.2.1",
     "parameterize": "^1.0.0",
     "path": "^0.12.7",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^3.11.0",
     "rss": "^1.2.2",
-    "sass": "^1.27.0",
+    "sass": "^1.32.5",
     "style.css": "^1.0.0"
   },
   "devDependencies": {

plugins/feed.js

@@ -1,10 +1,10 @@
 const path = require('path');
 const { getFeedData, generateFeed } = require('./util');
 
-const WebpackPlugin = require('./plugin-compiler');
+const WebpackPluginCompiler = require('./plugin-compiler');
 
 module.exports = function feed(nextConfig = {}) {
-  const { env, outputDirectory, outputName } = nextConfig;
+  const { env, outputDirectory, outputName, verbose = false } = nextConfig;
 
   const plugin = {
     name: 'Feed',
@@ -14,7 +14,7 @@ module.exports = function feed(nextConfig = {}) {
     generate: generateFeed,
   };
 
-  const { WORDPRESS_HOST } = env;
+  const { WORDPRESS_GRAPHQL_ENDPOINT, WORDPRESS_HOST } = env;
 
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
@@ -23,9 +23,11 @@ module.exports = function feed(nextConfig = {}) {
       }
 
       config.plugins.push(
-        new WebpackPlugin({
+        new WebpackPluginCompiler({
           host: WORDPRESS_HOST,
+          url: WORDPRESS_GRAPHQL_ENDPOINT,
           plugin,
+          verbose,
         })
       );
 

plugins/plugin-compiler.js

@@ -1,34 +1,52 @@
 const path = require('path');
 
-const { createApolloClient, createFile } = require('./util');
+const { createApolloClient, createFile, terminalColor } = require('./util');
+
+const DEFAULT_GRAPHQL_PATH = '/graphql';
 
 class WebpackPlugin {
   constructor(options = {}) {
     this.options = options;
   }
 
   async index(compilation, options) {
-    const { host, plugin } = options;
+    const { url, host, plugin, verbose = false } = options;
+    let endpoint = url;
 
-    plugin.outputLocation = path.join(plugin.outputDirectory, plugin.outputName);
+    if (!endpoint && host) {
+      endpoint = `${host}${DEFAULT_GRAPHQL_PATH}`;
+    }
 
-    console.log(`[${plugin.name}] Compiling file ${plugin.outputLocation}`);
+    try {
+      plugin.outputLocation = path.join(plugin.outputDirectory, plugin.outputName);
 
-    if (typeof host !== 'string') {
-      throw new Error(`[${plugin.name}] Failed to compile: invalid host type ${typeof host}`);
-    }
+      verbose && console.log(`[${plugin.name}] Compiling file ${plugin.outputLocation}`);
+
+      const hasUrl = typeof url === 'string';
+      const hasHost = typeof host === 'string';
+
+      if (!hasUrl && !hasHost) {
+        throw new Error(
+          `[${plugin.name}] Failed to compile: Please check that either WORDPRESS_GRAPHQL_ENDPOINT or WORDPRESS_HOST is set and configured properly.`
+        );
+      }
+
+      const apolloClient = createApolloClient(endpoint);
 
-    const apolloClient = createApolloClient(host);
+      const data = await plugin.getData(apolloClient, plugin.name, verbose);
 
-    const data = await plugin.getData(apolloClient, plugin.name);
+      const file = plugin.generate(data);
 
-    const file = plugin.generate(data);
+      await createFile(file, plugin.name, plugin.outputDirectory, plugin.outputLocation, verbose);
 
-    await createFile(file, plugin.name, plugin.outputDirectory, plugin.outputLocation);
+      //If there is an aditional action to perform
+      if (!!plugin.postcreate) {
+        plugin.postcreate(plugin);
+      }
 
-    //If there is an aditional action to perform
-    if (!!plugin.postcreate) {
-      plugin.postcreate(plugin);
+      !verbose && console.log(`Successfully created: ${terminalColor(plugin.outputName, 'info')}`);
+    } catch (e) {
+      console.error(`${terminalColor(e.message, 'error')}`);
     }
   }
 

plugins/search-index.js

@@ -1,10 +1,10 @@
 const path = require('path');
 const { getAllPosts, generateIndexSearch } = require('./util');
 
-const WebpackPlugin = require('./plugin-compiler');
+const WebpackPluginCompiler = require('./plugin-compiler');
 
 module.exports = function indexSearch(nextConfig = {}) {
-  const { env, outputDirectory, outputName } = nextConfig;
+  const { env, outputDirectory, outputName, verbose = false } = nextConfig;
 
   const plugin = {
     name: 'SearchIndex',
@@ -14,7 +14,7 @@ module.exports = function indexSearch(nextConfig = {}) {
     generate: generateIndexSearch,
   };
 
-  const { WORDPRESS_HOST } = env;
+  const { WORDPRESS_GRAPHQL_ENDPOINT, WORDPRESS_HOST } = env;
 
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
@@ -23,9 +23,11 @@ module.exports = function indexSearch(nextConfig = {}) {
       }
 
       config.plugins.push(
-        new WebpackPlugin({
+        new WebpackPluginCompiler({
           host: WORDPRESS_HOST,
+          url: WORDPRESS_GRAPHQL_ENDPOINT,
           plugin,
+          verbose,
         })
       );
 

plugins/sitemap.js

@@ -1,10 +1,10 @@
 const path = require('path');
 const { getSitemapData, generateSitemap, generateRobotsTxt } = require('./util');
 
-const WebpackPlugin = require('./plugin-compiler');
+const WebpackPluginCompiler = require('./plugin-compiler');
 
 module.exports = function sitemap(nextConfig = {}) {
-  const { env, outputDirectory, outputName } = nextConfig;
+  const { env, outputDirectory, outputName, verbose = false } = nextConfig;
 
   const plugin = {
     name: 'Sitemap',
@@ -15,7 +15,7 @@ module.exports = function sitemap(nextConfig = {}) {
     postcreate: generateRobotsTxt,
   };
 
-  const { WORDPRESS_HOST } = env;
+  const { WORDPRESS_GRAPHQL_ENDPOINT, WORDPRESS_HOST } = env;
 
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
@@ -24,9 +24,11 @@ module.exports = function sitemap(nextConfig = {}) {
       }
 
       config.plugins.push(
-        new WebpackPlugin({
+        new WebpackPluginCompiler({
           host: WORDPRESS_HOST,
+          url: WORDPRESS_GRAPHQL_ENDPOINT,
           plugin,
+          verbose,
         })
       );