Update plugins to use Webpack Logger

next.config.js

@@ -5,17 +5,15 @@ const feed = require('./plugins/feed');
 const sitemap = require('./plugins/sitemap');
 const socialImages = require('./plugins/socialImages');
 
+// By enabling plugin debug logging, it will provide additional output details for
+// diagnostic purposes. Is disabled by default.
+// e.g., [feed, { debug: true }],
 module.exports = withPlugins([[indexSearch], [feed], [sitemap], [socialImages]], {
  // By default, Next.js removes the trailing slash. One reason this would be good
  // to include is by default, the `path` property of the router for the homepage
  // is `/` and by using that, would instantly create a redirect
 
  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_GRAPHQL_ENDPOINT: process.env.WORDPRESS_GRAPHQL_ENDPOINT,
  WORDPRESS_MENU_LOCATION_NAVIGATION: process.env.WORDPRESS_MENU_LOCATION_NAVIGATION || 'PRIMARY',

plugins/feed.js

@@ -3,8 +3,14 @@ const { getFeedData, generateFeed } = require('./util');
 
 const WebpackPluginCompiler = require('./plugin-compiler');
 
+class FeedPlugin extends WebpackPluginCompiler {
+ constructor(options = {}) {
+ super(options);
+ }
+}
+
 module.exports = function feed(nextConfig = {}) {
- const { env, outputDirectory, outputName, verbose = false } = nextConfig;
+ const { env, outputDirectory, outputName, debug } = nextConfig;
 
  const plugin = {
  name: 'Feed',
@@ -14,19 +20,33 @@ module.exports = function feed(nextConfig = {}) {
  generate: generateFeed,
  };
 
- const { WORDPRESS_GRAPHQL_ENDPOINT } = env;
+ // Reset properties to avoid shared configuration
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'outputDirectory')) nextConfig.outputDirectory = undefined;
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'outputName')) nextConfig.outputName = undefined;
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'debug')) nextConfig.debug = undefined;
 
+ const { WORDPRESS_GRAPHQL_ENDPOINT } = env;
  return Object.assign({}, nextConfig, {
  webpack(config, options) {
  if (config.watchOptions) {
  config.watchOptions.ignored.push(path.join('**', plugin.outputDirectory, plugin.outputName));
  }
 
+ if (debug) {
+ const regex = new RegExp(plugin.name);
+ if (config.infrastructureLogging === undefined) {
+ config.infrastructureLogging = {
+ debug: [regex],
+ };
+ } else {
+ config.infrastructureLogging.debug.push(regex);
+ }
+ }
+
  config.plugins.push(
- new WebpackPluginCompiler({
+ new FeedPlugin({
  url: WORDPRESS_GRAPHQL_ENDPOINT,
  plugin,
- verbose,
  })
  );
 

plugins/plugin-compiler.js

@@ -1,46 +1,46 @@
 const path = require('path');
 
-const { createApolloClient, createFile, terminalColor, removeLastTrailingSlash } = require('./util');
+const { createApolloClient, createFile, removeLastTrailingSlash } = require('./util');
 
 class WebpackPlugin {
  constructor(options = {}) {
  this.options = options;
  }
 
  async index(compilation, options) {
- const { url, plugin, verbose = false } = options;
+ const { url, plugin } = options;
+ const logger = compilation.getInfrastructureLogger(plugin.name);
 
  try {
  plugin.outputLocation = path.join(plugin.outputDirectory, plugin.outputName);
-
- verbose && console.log(`[${plugin.name}] Compiling file ${plugin.outputLocation}`);
+ logger.log(`Compiling file ${plugin.outputLocation}`);
 
  const hasUrl = typeof url === 'string';
 
  if (!hasUrl) {
  throw new Error(
- `[${plugin.name}] Failed to compile: Please check that WORDPRESS_GRAPHQL_ENDPOINT is set and configured in your environment. WORDPRESS_HOST is no longer supported by default.`
+ `Failed to compile: Please check that WORDPRESS_GRAPHQL_ENDPOINT is set and configured in your environment. WORDPRESS_HOST is no longer supported by default.`
  );
  }
 
  const apolloClient = createApolloClient(removeLastTrailingSlash(url));
 
- const data = await plugin.getData(apolloClient, plugin.name, verbose);
+ const data = await plugin.getData(apolloClient, logger);
 
- const file = plugin.generate(data);
+ const file = plugin.generate(data, logger);
 
  if (file !== false) {
- await createFile(file, plugin.name, plugin.outputDirectory, plugin.outputLocation, verbose);
+ await createFile(file, plugin.outputDirectory, plugin.outputLocation, logger);
  }
 
  //If there is an aditional action to perform
  if (plugin.postcreate) {
- plugin.postcreate(plugin);
+ await plugin.postcreate(plugin, logger);
  }
 
- !verbose && console.log(`Successfully created: ${terminalColor(plugin.outputName, 'info')}`);
+ logger.info(`Successfully created: ${plugin.outputName}`);
  } catch (e) {
- console.error(`${terminalColor(e.message, 'error')}`);
+ logger.error(e.message);
  }
  }
 

plugins/search-index.js

@@ -3,8 +3,19 @@ const { getAllPosts, generateIndexSearch } = require('./util');
 
 const WebpackPluginCompiler = require('./plugin-compiler');
 
+class SearchIndexPlugin extends WebpackPluginCompiler {
+ constructor(options = {}) {
+ super(options);
+ }
+}
+
 module.exports = function indexSearch(nextConfig = {}) {
- const { env, outputDirectory, outputName, verbose = false } = nextConfig;
+ const { env, outputDirectory, outputName, debug } = nextConfig;
+
+ // Reset properties to avoid shared configuration
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'outputDirectory')) nextConfig.outputDirectory = undefined;
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'outputName')) nextConfig.outputName = undefined;
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'debug')) nextConfig.debug = undefined;
 
  const plugin = {
  name: 'SearchIndex',
@@ -22,11 +33,21 @@ module.exports = function indexSearch(nextConfig = {}) {
  config.watchOptions.ignored.push(path.join('**', plugin.outputDirectory, plugin.outputName));
  }
 
+ if (debug) {
+ const regex = new RegExp(plugin.name);
+ if (config.infrastructureLogging === undefined) {
+ config.infrastructureLogging = {
+ debug: [regex],
+ };
+ } else {
+ config.infrastructureLogging.debug.push(regex);
+ }
+ }
+
  config.plugins.push(
- new WebpackPluginCompiler({
+ new SearchIndexPlugin({
  url: WORDPRESS_GRAPHQL_ENDPOINT,
  plugin,
- verbose,
  })
  );
 

plugins/sitemap.js

@@ -3,8 +3,19 @@ const { getSitemapData, generateSitemap, generateRobotsTxt } = require('./util')
 
 const WebpackPluginCompiler = require('./plugin-compiler');
 
+class SitemapPlugin extends WebpackPluginCompiler {
+ constructor(options = {}) {
+ super(options);
+ }
+}
+
 module.exports = function sitemap(nextConfig = {}) {
- const { env, outputDirectory, outputName, verbose = false } = nextConfig;
+ const { env, outputDirectory, outputName, debug } = nextConfig;
+
+ // Reset properties to avoid shared configuration
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'outputDirectory')) nextConfig.outputDirectory = undefined;
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'outputName')) nextConfig.outputName = undefined;
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'debug')) nextConfig.debug = undefined;
 
  const plugin = {
  name: 'Sitemap',
@@ -23,11 +34,21 @@ module.exports = function sitemap(nextConfig = {}) {
  config.watchOptions.ignored.push(path.join('**', plugin.outputDirectory, plugin.outputName));
  }
 
+ if (debug) {
+ const regex = new RegExp(plugin.name);
+ if (config.infrastructureLogging === undefined) {
+ config.infrastructureLogging = {
+ debug: [regex],
+ };
+ } else {
+ config.infrastructureLogging.debug.push(regex);
+ }
+ }
+
  config.plugins.push(
- new WebpackPluginCompiler({
+ new SitemapPlugin({
  url: WORDPRESS_GRAPHQL_ENDPOINT,
  plugin,
- verbose,
  })
  );
 

plugins/socialImages.js

@@ -5,16 +5,27 @@ const { getAllPosts, mkdirp } = require('./util');
 
 const WebpackPluginCompiler = require('./plugin-compiler');
 
+class SocialImagesPlugin extends WebpackPluginCompiler {
+ constructor(options = {}) {
+ super(options);
+ }
+}
+
 const pkg = require('../package.json');
 
 module.exports = function sitemap(nextConfig = {}) {
  const {
  env,
  outputDirectory = `./public${nextConfig.env.OG_IMAGE_DIRECTORY}`,
  outputName = '[slug].png',
- verbose = false,
+ debug,
  } = nextConfig;
 
+ // Reset properties to avoid shared configuration
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'outputDirectory')) nextConfig.outputDirectory = undefined;
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'outputName')) nextConfig.outputName = undefined;
+ if (Object.prototype.hasOwnProperty.call(nextConfig, 'debug')) nextConfig.debug = undefined;
+
  const width = 1012;
  const height = 506;
  const padding = 50;
@@ -26,69 +37,73 @@ module.exports = function sitemap(nextConfig = {}) {
  outputDirectory,
  outputName,
  getData: getAllPosts,
- generate: ({ posts = [] }) => {
- // Make sure our directory exists before outputting the files
-
- mkdirp(outputDirectory);
-
- posts.forEach((post) => {
- const { title, slug } = post;
-
- const canvas = new fabric.StaticCanvas(null, {
- width,
- height,
- backgroundColor: 'white',
- });
+ generate: ({ posts = [] }, logger) => {
+ try {
+ // Make sure our directory exists before outputting the files
+ mkdirp(outputDirectory);
 
- const headlineWidth = (width / 3) * 2;
- const headlineHeight = height - padding * 2 - footerHeight;
-
- const headline = new fabric.Textbox(title, {
- left: (width - headlineWidth) / 2,
- top: height / 2 - footerHeight,
- originY: 'center',
- width: headlineWidth,
- height: headlineHeight,
- fill: '#303030',
- fontFamily: 'Arial',
- fontWeight: 600,
- fontSize: 60,
- lineHeight: 1,
- textAlign: 'center',
- });
+ posts.forEach((post) => {
+ const { title, slug } = post;
 
- canvas.add(headline);
+ const canvas = new fabric.StaticCanvas(null, {
+ width,
+ height,
+ backgroundColor: 'white',
+ });
 
- const homepage = pkg.homepage && pkg.homepage.replace(/http(s)?:\/\//, '');
+ const headlineWidth = (width / 3) * 2;
+ const headlineHeight = height - padding * 2 - footerHeight;
 
- if (homepage) {
- const website = new fabric.Textbox(homepage, {
- left: 0,
- top: height - padding / 2 - footerHeight,
- width,
- height: footerHeight,
+  const headline = new fabric.Textbox(title, {
+  left: (width - headlineWidth) / 2,
+ top: height / 2 - footerHeight,
+ originY: 'center',
+ width: headlineWidth,
+ height: headlineHeight,
  fill: '#303030',
  fontFamily: 'Arial',
  fontWeight: 600,
- fontSize: 30,
+ fontSize: 60,
+ lineHeight: 1,
  textAlign: 'center',
  });
 
- canvas.add(website);
- }
+ canvas.add(headline);
+
+ const homepage = pkg.homepage && pkg.homepage.replace(/http(s)?:\/\//, '');
+
+ if (homepage) {
+ const website = new fabric.Textbox(homepage, {
+ left: 0,
+ top: height - padding / 2 - footerHeight,
+ width,
+ height: footerHeight,
+ fill: '#303030',
+ fontFamily: 'Arial',
+ fontWeight: 600,
+ fontSize: 30,
+ textAlign: 'center',
+ });
 
- canvas.renderAll();
+ canvas.add(website);
+ }
 
- const outputPath = path.join(outputDirectory, outputName.replace('[slug]', slug));
- const out = fs.createWriteStream(outputPath);
- const stream = canvas.createPNGStream();
+ canvas.renderAll();
 
- stream.on('data', function (chunk) {
- out.write(chunk);
+ const outputPath = path.join(outputDirectory, outputName.replace('[slug]', slug));
+ const out = fs.createWriteStream(outputPath);
+ const stream = canvas.createPNGStream();
+
+ stream.on('data', function (chunk) {
+ out.write(chunk);
+ });
  });
- });
 
- return false;
+ logger.log(`File generated`);
+ return false;
+ } catch (e) {
+ throw new Error(`Failed to generate: ${e.message}`);
+ }
  },
  };
 
@@ -100,11 +115,21 @@ module.exports = function sitemap(nextConfig = {}) {
  config.watchOptions.ignored.push(path.join('**', plugin.outputDirectory, plugin.outputName));
  }
 
+ if (debug) {
+ const regex = new RegExp(plugin.name);
+ if (config.infrastructureLogging === undefined) {
+ config.infrastructureLogging = {
+ debug: [regex],
+ };
+ } else {
+ config.infrastructureLogging.debug.push(regex);
+ }
+ }
+
  config.plugins.push(
- new WebpackPluginCompiler({
+ new SocialImagesPlugin({
  url: WORDPRESS_GRAPHQL_ENDPOINT,
  plugin,
- verbose,
  })
  );