feat: image generator

config/plugins/withImageGenerator/index.js

@@ -0,0 +1,43 @@
+const path = require('path');
+const withLatex = (nextConfig = {}) => {
+  return Object.assign({}, nextConfig, {
+    webpack(config, options) {
+      const {isServer, dev} = options;
+      let outputPath = '';
+      if (isServer && dev) {
+        outputPath = "../";
+      } else if (isServer) {
+        outputPath = "../../";
+      }
+      config.module.rules.push({
+        test: /\.png.yml$/,
+        use: [{
+          loader: 'file-loader', 
+          options: {
+
+            publicPath: `${nextConfig.assetPrefix || nextConfig.basePath || ''}/_next/static/images/`,
+            outputPath: `${outputPath}static/images/`,
+            name: (name) => {
+              const fileName = path.basename(name);
+              const parts = fileName.split('.');
+              parts.pop();
+              const ext = parts.pop();
+
+              return `${parts.join('.')}.[hash].${ext}`;
+            },
+            esModule: nextConfig.esModule || false,
+          },
+        }, {
+          loader: require.resolve('./webpack.js'),
+        }],
+      });
+      if (typeof nextConfig.webpack === "function") {
+        return nextConfig.webpack(config, options);
+      }
+
+      return config;
+    },
+  });
+}
+
+module.exports = withLatex;

config/plugins/withImageGenerator/webpack.js

@@ -0,0 +1,16 @@
+require('reflect-metadata');
+require('@babel/register')({
+  extensions: [".es6", ".es", ".jsx", ".js", ".mjs", ".ts"],
+});
+const { generateImage } = require('../../../src/images');
+
+module.exports = function (source) {
+  var callback = this.async();
+  const location = this.resourcePath;
+  generateImage(source, location)
+    .then((canvas) => {
+      const buffer = canvas.toBuffer('image/png', {})
+      callback(null, buffer);
+    })
+    .catch(callback);
+}