@caweb/cli 1.2.0 → 1.3.0

package/{lib/configs.js → configs/docker-compose.js}

@@ -1,78 +1,47 @@
 /**
  * External dependencies
  */
-import path from 'node:path';
-import fs from 'fs-extra';
-import yaml from 'js-yaml';
+import path from 'path';
+import fs from 'fs';
 import getHostUser from '@wordpress/env/lib/get-host-user.js';
+import yaml from 'js-yaml';
+import os from 'os';
 
 /**
- * Promisified dependencies
+ * Internal Dependencies
  */
-const { writeFile } = fs.promises;
-
-const localPath = path.resolve( path.join(process.cwd(), 'node_modules/@caweb/cli/package.json') )
-const pkg = JSON.parse( await fs.readFile(localPath) );
 
 /**
- * Build .wp-env.json
+ * Generate config.yml
  * 
- * @param {boolean} bare   True if excluding any CAWeb Configurations.
- * @param {boolean} multisite   True if converting to multisite.
- * @param {boolean} plugin   True if root directory is a plugin.
- * @param {boolean} theme   True if root directory is a theme.
+ * @param {string}  workDirectoryPath Path to the work directory located in ~/.wp-env.
  * 
- * @returns object
+ * @returns void
  */
-const buildWPEnvConfig = (bare, multisite, plugin, theme) => {
-    let themes = [];
-    let plugins = [];
-
-    let config = {
-        core: `WordPress/WordPress#${pkg.config.WP_VER}`,
-        phpVersion: `${pkg.config.PHP_VER}`,
-        config: {
-            ...pkg.config.DEFAULTS
-        }
-    }
-
-    // if not bare then include our theme.
-    if( ! bare ){
-        themes.push('CAWebPublishing/CAWeb')
-    }
-
-    // if root directory is a theme
-    if( theme ){
-        themes.push( '.' );
-    }
+async function generateCLIConfig(workDirectoryPath){
+    let yml = {
+        path: '/var/www/html',
+        apache_modules: ['mod_rewrite']
+    };
     
-    // if is multisite
-    if( multisite ){
-        config.config['WP_ALLOW_MULTISITE'] = true;
+    let { homedir } = os.userInfo();
+	
+    // add any ssh hosts to the config
+    if( fs.existsSync( path.join( homedir, '.ssh', 'config' )) ){
+			
+		let ssh_hosts = fs.readFileSync(path.join( homedir, '.ssh', 'config' )).toString().match(/Host\s+(.*)[^\n\r]/g);
 
-        // set CAWeb as Default Theme if it was downloaded
-        if( ! bare ){
-            config.config['WP_DEFAULT_THEME'] = 'CAWeb';
-        }
-    }
+		ssh_hosts.forEach((host) => {
+			let s = host.replace(/Host\s+/, '');
 
-    // if root directory is a plugin
-    if( plugin ){
-        plugins.push( '.' );
-    }
-
-    // add plugins if sources were added
-    if( plugins.length ){
-        config['plugins'] = plugins;
-    }
+			yml[`@${s}`] = { ssh: s};
+		})
+	}
 
-    // add themes if sources were added
-    if( themes.length ){
-        config['themes'] = themes;
-    }
 
-    return config;
-    
+    fs.writeFileSync(
+        path.join(workDirectoryPath, 'config.yml'),
+        yaml.dump(yml));
 }
 
 /**
@@ -81,8 +50,8 @@ const buildWPEnvConfig = (bare, multisite, plugin, theme) => {
  * @param {string}  workDirectoryPath Path to the work directory located in ~/.wp-env.
  * @returns object
  */
-const buildDockerComposeConfig = (workDirectoryPath) => {
-	const {name} = getHostUser();
+export default function dockerConfig ( workDirectoryPath ) {
+    const {name} = getHostUser();
     
     // generate cli config file for cli containers.
     generateCLIConfig(workDirectoryPath);
@@ -175,27 +144,5 @@ const buildDockerComposeConfig = (workDirectoryPath) => {
     }
 
     return dockerConfig;
-}
-
-/**
- * Generate config.yml
- * 
- * @param {string}  workDirectoryPath Path to the work directory located in ~/.wp-env.
- * 
- * @returns void
- */
-async function generateCLIConfig(workDirectoryPath){
-    const yml = {
-        path: '/var/www/html',
-        apache_modules: ['mod_rewrite']
-    };
-
-    await writeFile(
-        path.join(workDirectoryPath, 'config.yml'),
-        yaml.dump(yml));
-}
-
-export {
-    buildWPEnvConfig,
-    buildDockerComposeConfig
+    
 }

package/configs/webpack.config.js

@@ -0,0 +1,119 @@
+/**
+ * WebPack Configuration for California Department of Technology
+ * 
+ * Utilizes WordPress Scripts Webpack configuration as base.
+ * s 
+ * @link https://webpack.js.org/configuration/
+ */
+
+/**
+ * External dependencies
+ */
+import baseConfig from '@wordpress/scripts/config/webpack.config.js';
+import path from 'path';
+import fs from 'fs';
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+
+/**
+ * Internal dependencies
+ */
+import SiteGenerator from '../gen/site-generator.js';
+
+// fallback to env variable
+let isProduction = "production" === process.env.NODE_ENV;
+
+// because we use WordPress default WebPack config 
+// 'mode' is defined by process.env.NODE_ENV
+// some of the webpack cli flags are ignored
+// so let's make some corrections.
+let corrections = {};
+
+process.argv.splice( 2 ).forEach(element => {
+    // if flag
+    if( element.startsWith( '--' ) ){
+      let splitterIndex = element.indexOf( '=' );
+      let flag = element.substring(2, splitterIndex );
+      let value = element.substring( splitterIndex + 1 );
+
+      // if flag is a webpack flag add corrections.
+      switch( flag ){
+        case 'mode':
+          // if cli arg was passed use that value
+          isProduction = "production" === value;
+
+          corrections[flag] = value
+          break
+      }
+      
+    }
+   
+});
+
+
+// update the WordPress default webpack rules with ours.
+baseConfig.module.rules.forEach((rule, i) => {
+  const r = new RegExp(rule.test).toString();
+
+  // WordPress adds a hash to asset file names we remove that hash
+  if( r === new RegExp(/\.(bmp|png|jpe?g|gif|webp)$/i).toString() ){
+    baseConfig.module.rules[i].generator = {
+      filename: 'images/[name][ext]'
+    }
+  }
+  if( r  === new RegExp(/\.(woff|woff2|eot|ttf|otf)$/i).toString() ){
+    baseConfig.module.rules[i].generator = {
+      filename: 'fonts/[name][ext]'
+    }
+  }
+  // SVG rules
+  if( r  === new RegExp(/\.svg$/).toString()  ){
+        // we don't want SVG to be inline move them to fonts folder
+        if( 'asset/inline' === rule.type ){
+          baseConfig.module.rules[i].type = 'asset/resource';
+          baseConfig.module.rules[i].generator = {
+            filename: 'fonts/[name][ext]'
+          };
+        }
+  }
+})
+
+// Our Webpack Configuration.
+let webpackConfig = {
+  ...baseConfig,
+  target: 'browserslist',
+  devtool: false,
+  output: {
+    ...baseConfig.output,
+    publicPath: `/`,
+    clean: false
+  },
+  plugins: [
+    ...baseConfig.plugins,
+    new MiniCssExtractPlugin(
+      {
+        linkType: "text/css",
+        filename: '[name].css'
+      }
+    )
+  ],
+  module: {
+    rules: [
+      ...baseConfig.module.rules,
+      {
+        test: /\.html$/,
+        loader: 'handlebars-loader'
+      }
+    ]
+  },
+  performance: {
+    maxAssetSize: 500000,
+    maxEntrypointSize: 500000
+  }
+};
+
+if( ! isProduction ){
+  SiteGenerator( webpackConfig );
+}
+
+export default webpackConfig;

package/configs/wp-env.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+import fs from 'fs';
+
+/**
+ * Internal Dependencies
+ */
+import {
+    projectPath
+} from '../lib/helpers.js';
+
+const localFile = path.join(projectPath, 'package.json');
+const pkg = JSON.parse( fs.readFileSync(localFile) );
+
+/**
+ * Build .wp-env.json
+ * 
+ * @param {boolean} bare   True if excluding any CAWeb Configurations.
+ * @param {boolean} multisite   True if converting to multisite.
+ * @param {boolean} plugin   True if root directory is a plugin.
+ * @param {boolean} theme   True if root directory is a theme.
+ * 
+ * @returns object
+ */
+export default function wpEnvConfig ( bare, multisite, plugin, theme ) {
+    let themes = [];
+    let plugins = [];
+
+    let config = {
+        core: `WordPress/WordPress#${pkg.config.WP_VER}`,
+        phpVersion: `${pkg.config.PHP_VER}`,
+        config: {
+            ...pkg.config.DEFAULTS
+        }
+    }
+
+    // if not bare then include our theme.
+    if( ! bare ){
+        themes.push('CAWebPublishing/CAWeb')
+    }
+
+    // if root directory is a theme
+    if( theme ){
+        themes.push( '.' );
+    }
+    
+    // if is multisite
+    if( multisite ){
+        config.config['WP_ALLOW_MULTISITE'] = true;
+
+        // set CAWeb as Default Theme if it was downloaded
+        if( ! bare ){
+            config.config['WP_DEFAULT_THEME'] = 'CAWeb';
+        }
+    }
+
+    // if root directory is a plugin
+    if( plugin ){
+        plugins.push( '.' );
+    }
+
+    // add plugins if sources were added
+    if( plugins.length ){
+        config['plugins'] = plugins;
+    }
+
+    // add themes if sources were added
+    if( themes.length ){
+        config['themes'] = themes;
+    }
+
+    return config;
+    
+}

package/gen/parser.js

@@ -0,0 +1,166 @@
+/**
+ * External dependencies
+ */
+import fs from 'fs';
+import path from 'path';
+import { HTMLToJSON } from 'html-to-json-parser';
+import jsdom from 'jsdom';
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Path Directory Locations
+ * - appPath - Project Application Path
+ * - srcPath - Project Application Src Path
+ * - publicPath - Project Application Public Path
+ * - dataPath - Project Application Data Path
+ */
+const appPath = path.resolve(process.cwd());
+const srcPath = path.join( appPath, 'src');
+const dataPath = path.join( srcPath, 'data');
+const assetsPath = path.join( srcPath, 'assets');
+
+const fallbackPath = path.join( appPath, 'node_modules', '@cdt', 'template');
+
+/**
+ * Generate Pages
+ *
+ * @async
+ * @param {Object} siteData Data to use when creating pages
+ * @returns {string}
+ */
+async function generatePages(siteData){
+
+  // we start with a blank html and schema
+  let page = '<html><html>';
+  let schema = {};
+
+  // if src/index.html exists
+  if(fs.existsSync(path.join(srcPath, 'index.html'))){
+
+    // get index path file location
+    page = path.join(srcPath, 'index.html')
+      
+    // generate page schema
+    schema = await convertHTMLtoJson(page, false);
+
+    // read contents of index file, we strip any newlines
+    //page = fs.readFileSync( page ).toString().replace(/\n[\s]+/g,'');
+  }
+
+  // convert page to jsdom object
+  let dom = new jsdom.JSDOM( page );
+  
+  // if we should be using the template
+  if( process.env.CDT_TEMPLATE ){
+
+    // read contents of template index file, we strip any newlines
+    page = fs.readFileSync( path.join(fallbackPath, 'src', 'index.html') ).toString().replace(/\n[\s]+/g,'');
+      
+    // create template jsdom object
+    let templateDom = new jsdom.JSDOM( page );
+    
+    // colorscheme
+    let colorCSS = path.join(fallbackPath, 'build', 'oceanside.css');
+    let colorJS = path.join(fallbackPath, 'build', 'oceanside.js');
+
+    dom.window.document.querySelector('head').append(
+      `<link rel="stylesheet" type="text/css" href="${colorCSS}">`
+    );
+
+
+    // update template dom by appending contents of existing dom body
+    // after the header 
+    templateDom.window.document.querySelector('header').append(
+      dom.window.document.querySelector('body')
+    );
+
+    // update existing dom with templated changes.
+    dom = new jsdom.JSDOM( templateDom.window.document.documentElement.outerHTML);
+  }
+  
+  // generate any data attributes
+  populateDataAttrs( dom, siteData, schema );
+  
+  return dom.window.document.documentElement.outerHTML;
+
+}
+
+
+/**
+ * Populate data-cagov attributes with siteData
+ * 
+ * @param {jsdom.JSDOM} dom HTML 
+ * @param {Object} siteData
+ * @param {Object} schema
+ */
+function populateDataAttrs(dom, siteData, schema){
+  for( const [attr, data] of Object.entries(siteData) ){
+    // if attribute isn't in the schema don't do anything
+    if( ! schema.data || ! Object.keys(schema.data).includes(attr) ){
+      continue;
+    }
+
+    // any data- attributes should be prefixed with cagov
+    // get any elements with the appropriate data- attr 
+    let elements = dom.window.document.querySelectorAll(`[data-cagov-${attr}]`);
+
+    // if the data is an array|object pass as data
+    let value = Array.isArray(data) || 'object' === typeof data  ? JSON.stringify( data ) : data;
+
+    elements.forEach(element => {
+      element.setAttribute(`data-cagov-${attr}`, value);
+    });
+
+  }
+}
+
+
+/**
+ * Generates a page schema including any data attributes in src/data/index.json
+ *
+ * @async
+ * @param {*} file
+ * @param {boolean} [write=true]
+ * @param {string} [outputPath='']
+ * @returns {unknown}
+ */
+async function convertHTMLtoJson( file, write = true, outputPath = '' ){
+      if( fs.existsSync( file )){
+        let template = fs.readFileSync( file ).toString().replace(/\n[\s]+/g,'');
+        let markup = await HTMLToJSON(template, false )
+          
+        let data = fs.existsSync( path.join(dataPath, 'index.json') ) ?
+          JSON.parse( fs.readFileSync( path.join(dataPath, 'index.json') ) ) : {};
+
+        // remove any examples data
+        delete data.examples;
+
+        let schema = {
+          title: "California Department of Technology Schema",
+          $schema: "http://json-schema.org/2019-09/schema",
+          $id: "https://json-schema.org/draft/2019-09/schema",
+          type: "object",
+          description: "California Department of Technology Schema",
+          data,
+          markup,
+        };
+
+        // Write schema file.
+        if( write ){
+          fs.writeFileSync(
+            path.join(outputPath, 'schema.json'),
+              JSON.stringify( schema, null, 4 )
+          );
+        }else{
+          return schema;
+        }
+        
+      }
+}
+
+export {
+  generatePages
+};

package/gen/site-generator.js

@@ -0,0 +1,111 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+import fs from 'fs';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import jsdom from 'jsdom';
+import { fileURLToPath } from 'url';
+
+/**
+ * Internal dependencies
+ */
+import {
+  generatePages
+} from './parser.js';
+
+import {
+  projectPath,
+  appPath
+} from '../lib/helpers.js';
+
+const srcPath = path.join( appPath, 'src');
+const dataPath = path.join( srcPath, 'data');
+const assetsPath = path.join( srcPath, 'assets');
+
+// default meta used for site generation when no meta is passed
+const meta = {
+  "Author": "CAWebPublishing",
+  "Description": "State of California",
+  "Keywords": "California,government",
+  "viewport": "width=device-width, initial-scale=1.0, minimum-scale=1.0"
+}
+
+
+/**
+ * Returns an object containing all data from site.json and src/data/examples.json
+ *
+ * @returns {Object}
+ */
+function getSiteData(){
+
+  // grab any sample data if it exists.
+  let sample = fs.existsSync( path.join(dataPath, 'examples.json') ) ? JSON.parse( fs.readFileSync( path.join(dataPath, 'examples.json') ) ) : {};
+  
+  // grab any site data if it exists.
+  let site = fs.existsSync( path.join(appPath, 'site.json') ) ? JSON.parse( fs.readFileSync( path.join(appPath, 'site.json') ) ) : {};
+  
+  // merge datasets together
+  let siteData = {
+    ...sample,
+    ...site
+  };
+  
+  return siteData;
+}
+
+export default (webpackConfig) => {
+  // we only proceed if and index.html exists
+  if( ! fs.existsSync( path.join( srcPath, 'index.html' )) ){
+    return;
+  }
+
+  // we only want to display errors and warnings
+  webpackConfig.stats = 'errors-warnings';
+
+  // get site data
+  let siteData = getSiteData();
+
+  // if favicon doesn't exist use fallback asset.
+  let favicon = fs.existsSync(path.join(assetsPath, 'images', 'favicon.ico')) ?
+    path.join(assetsPath, 'images', 'favicon.ico') :
+    path.join(projectPath, 'assets', 'favicon.ico') ;
+
+  let defaultPage = {
+    minify: false,
+    favicon,
+    meta: siteData.meta || meta,
+  }
+
+  // add html
+  webpackConfig.plugins = [
+    ...webpackConfig.plugins,
+    new HtmlWebpackPlugin({
+      filename: path.join( process.cwd(), 'public', 'index.html'),
+      template: path.join(srcPath, 'index.html'),
+      //templateContent: generatePages(siteData),
+      title: 'Test Site',
+      ...defaultPage
+    })
+  ]
+
+  // add devServer
+  webpackConfig.devServer = {
+    devMiddleware: {
+      writeToDisk: true,
+    },
+    hot: false,
+    allowedHosts: 'auto',
+    host: 'localhost',
+    port: 9000,
+    compress: true,
+    proxy: {
+      '/public': {
+        pathRewrite: {
+          '^/build': '',
+        },
+      },
+    },
+  }  
+
+};

package/lib/admin.js

@@ -32,7 +32,7 @@ export default async function generateOverridesMD() {
 		}
 	}
 
-	await fs.writeFileSync(
+	fs.writeFileSync(
 		path.join(process.cwd(), 'docs', 'OVERRIDES.MD'),
 		output.join('\n')
 	);