@caweb/a11y-webpack-plugin 1.0.9 → 1.1.1

package/aceconfig.js

@@ -35,10 +35,10 @@ export default {
     ],
     failLevels: failLevels.filter(e=>e),
     reportLevels: reportLevels.filter(e=>e),
-    outputFilename: 'a11y',
-    outputFolder: "public",
+    outputFilename: 'reports',
+    outputFolder: "/audits/a11y",
     outputFormat: [
-        'html'
+        'html', 'json'
     ],
     outputFilenameTimestamp: false
 }

package/index.js

@@ -14,6 +14,11 @@ import deepmerge from 'deepmerge';
 import chalk from 'chalk';
 import { fileURLToPath, URL } from 'url';
 
+/**
+ * Internal dependencies
+ */
+import { landingPage, reporter } from './reporter.js';
+
 // default configuration
 import {default as DefaultConfig} from './aceconfig.js';
 
@@ -22,138 +27,157 @@ const boldGreen = chalk.bold.green;
 const boldBlue = chalk.bold.hex('#03a7fc');
 const currentPath = path.dirname(fileURLToPath(import.meta.url));
 
+const pluginName = 'CAWebA11yWebpackPlugin';
+
 // IBM Accessibility Checker Plugin
 class A11yPlugin {
     config = {}
 
     constructor(opts = {}) {
-      // outputFolder must be resolved
-      if( opts.outputFolder ){
-        opts.outputFolder = path.join(process.cwd(), opts.outputFolder);
+      // the default publicPath is always the outputFolder
+      DefaultConfig.publicPath = DefaultConfig.outputFolder;
+
+      // the default output folder is always relative to the current working directory.
+      DefaultConfig.outputFolder = path.join( process.cwd(), DefaultConfig.outputFolder );
+
+      // if opts.outputFolder is defined
+      if( opts.outputFolder && ! path.isAbsolute(opts.outputFolder)  ){
+        opts.publicPath = opts.outputFolder;
+
+        // we join the current working directory with the opts.outputFolder
+        opts.outputFolder = path.join( process.cwd(), opts.outputFolder );
       }
-      this.config = deepmerge(
-        DefaultConfig, 
-        {
-          outputFolder: path.join(currentPath, DefaultConfig.outputFolder)
-        },
-        opts
-      );
+      
+      this.config = deepmerge(DefaultConfig, opts);
     }
 
+    
     apply(compiler) {
       const staticDir = {
         directory: this.config.outputFolder,
+        publicPath: encodeURI(this.config.publicPath).replace(':', ''),
         watch: true
       }
 
-      let { devServer, output } = compiler.options;
-      let hostUrl = 'localhost' === devServer.host ? `http://${devServer.host}`: devServer.host;
-      let hostPort = devServer.port;
+      let { devServer } = compiler.options;
+      let auditUrl = `${devServer.server}://${devServer.host}:${devServer.port}`;
+      let nodeModulePath = encodeURI(this.config.publicPath).replace(':', '') + '/node_modules';
+      let pathRewrite = {};
+      pathRewrite[`^${nodeModulePath}`] = '';
+      
+      let proxy = {
+        context: [ nodeModulePath ],
+        target: auditUrl,
+        pathRewrite,
+      };
+
+      // we add the proxy to the devServer
+      if( Array.isArray(devServer.proxy) ){
+        devServer.proxy.push(proxy)
+      }else{
+        devServer.proxy = [].concat(devServer.proxy, proxy );
+      }
 
-      if( hostPort && 80 !== hostPort )
-      {
-          hostUrl = `${hostUrl}:${hostPort}`;
+      // add our static directory to the devServer
+      if( Array.isArray(devServer.static) ){
+        devServer.static.push(staticDir)
+      }else{
+        devServer.static = [].concat(devServer.static, staticDir );
       }
 
       // if dev server allows for multiple pages to be opened
       // add outputFilename.html to open property.
       if( Array.isArray(devServer.open) ){
-        devServer.open.push(`${hostUrl}/${this.config.outputFilename}.html`)
+        devServer.open.push(`${staticDir.publicPath}/${this.config.outputFilename}.html`)
       }else if( 'object' === typeof devServer.open && Array.isArray(devServer.open.target) ){
-        devServer.open.target.push(`${hostUrl}/${this.config.outputFilename}.html`)
+        devServer.open.target.push(`${staticDir.publicPath}/${this.config.outputFilename}.html`)
       }
 
-      // add our static directory 
-      if( Array.isArray(devServer.static) ){
-        devServer.static.push(staticDir)
-      }else{
-        devServer.static = [].concat(devServer.static, staticDir );
-      }
-      
-      // Wait for configuration preset plugins to apply all configure webpack defaults
-      compiler.hooks.initialize.tap('IBM Accessibility Plugin', () => {
+      // we always make sure the output folder exists
+      fs.mkdirSync( staticDir.directory, { recursive: true } );
+
+      // Hot Module Replacement
+      if( compiler?.options?.devServer?.hot ){
+        // we create a blank file for the hot update to compile on our page.
+        // this is required for the hot-update to work.
+        fs.writeFileSync(
+          path.join(staticDir.directory, `a11y.update.js`),
+          `` // required for hot-update to compile on our page, blank script for now
+        );
+
+        // we add the entry to the dependency factory during compilation
         compiler.hooks.compilation.tap(
-          "IBM Accessibility Plugin",
+          pluginName,
           (compilation, { normalModuleFactory }) => {
             compilation.dependencyFactories.set(
               EntryDependency,
               normalModuleFactory
             );
-          }
-        );
 
-        const { entry, options, context } = {
-          entry: path.join( this.config.outputFolder, 'a11y.update.js'),
-          options: {
-            name: 'a11y.update'
-          },
-          context: 'a11y'
-        };
-
-        const dep = new EntryDependency(entry);
-        dep.loc = {
-          name: options.name
-        };
-        if( ! fs.existsSync(path.resolve(this.config.outputFolder))){
-          fs.mkdirSync( path.resolve(this.config.outputFolder), {recursive: true} );
-        }
-        
-        fs.writeFileSync(
-          path.join(this.config.outputFolder, `a11y.update.js`),
-          `` // required for hot-update to compile on our page, blank script for now
+          }
         );
 
-
-        compiler.hooks.thisCompilation.tap('IBM Accessibility Plugin',
-          /**
-           * Hook into the webpack compilation
-           * @param {Compilation} compilation
-           */
-          (compilation) => {
-            
-            compiler.hooks.make.tapAsync("IBM Accessibility Plugin", (compilation, callback) => {
-              
-              compilation.addEntry(
-              context,
-              dep, 
-              options, 
-              err => {
-                callback(err);
-              });
+        // we add the entry before the compilation ends
+        compiler.hooks.make.tapAsync(
+          pluginName, 
+          (compilation, callback) => {
+            const { entry, options, context } = {
+            entry: path.join( staticDir.directory, 'a11y.update.js'),
+            options: {
+              name: 'a11y.update'
+            },
+            context: 'a11y'
+          };
+
+          const dep = new EntryDependency(entry);
+          dep.loc = {
+            name: options.name
+          };
+          
+          compilation.addEntry(
+            context,
+            dep, 
+            options, 
+            err => {
+              callback(err);
             });
+          });
+      }
 
-        });
-
+      compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+        // We can audit the html files now that the compilation is done.
+        // we hook into the done hook to run the accessibility checker.
         compiler.hooks.done.tapAsync(
-          'IBM Accessibility Plugin',
-          /**
-           * Hook into the process assets hook
-           * @param {any} _
-           * @param {(err?: Error) => void} callback
-           */
+          pluginName,
           (stats, callback) => {
-              
+
             console.log(`<i> ${boldGreen('[webpack-dev-middleware] Running IBM Accessibility scan...')}`);
 
-            let result = this.a11yCheck('auto' === output.publicPath ? output.path : output.publicPath, this.config );
+            // we check the compilers output.publicPath
+            // if it is not set, we scan the output.path as the publicPath
+            let result = this.a11yCheck(
+              ! compiler.options.output.publicPath || 
+              'auto' === compiler.options.output.publicPath ? 
+                compiler.options.output.path : 
+                compiler.options.output.publicPath,
+              this.config 
+            );
 
-            if( result ){
-              // we have to inject the a11y.update.js file into the head in order for the webpack-dev-server scripts to load.
-              let pageContent = fs.readFileSync(path.join(staticDir.directory, `${this.config.outputFilename}.html`))
+            // if( result ){
+            //   // we have to inject the a11y.update.js file into the head in order for the webpack-dev-server scripts to load.
+            //   // let pageContent = fs.readFileSync(path.join(staticDir.directory, `${this.config.outputFilename}.html`))
               
-              fs.writeFileSync(
-                path.join(staticDir.directory, `${this.config.outputFilename}.html`),
-                pageContent.toString().replace('</head>', `<script src="./a11y.update.js"></script>\n</head>`)
-              )
-            }
+            //   // fs.writeFileSync(
+            //   //   path.join(staticDir.directory, `${this.config.outputFilename}.html`),
+            //   //   pageContent.toString().replace('</head>', `<script src="./a11y.update.js"></script>\n</head>`)
+            //   // )
+            // }
 
-            console.log(`<i> ${boldGreen('[webpack-dev-middleware] IBM Accessibilty Report can be viewed at')} ${ boldBlue(new URL(`${hostUrl}/${this.config.outputFilename}.html`).toString())  }`);
+            console.log(`<i> ${boldGreen('[webpack-dev-middleware] IBM Accessibilty Report can be viewed at')} ${ boldBlue(new URL(`${auditUrl}/${staticDir.publicPath}/${this.config.outputFilename}.html`).toString())  }`);
 
-            callback();
         });
-       
-    });
-    
+      })
+      
     }
 
     /**
@@ -184,6 +208,12 @@ class A11yPlugin {
       outputFilenameTimestamp
     }){
 
+
+      let htmlOutput = outputFormat && outputFormat.includes('html');
+
+      // we remove the html output since we generate our own html based on the json output.
+      // outputFormat = outputFormat.filter(o => 'html' !== o );
+      
       let acheckerArgs = [
         '--ruleArchive',
         ruleArchive,
@@ -202,25 +232,11 @@ class A11yPlugin {
         url
       ];
     
-      let isValid = false;
-
-      if( fs.existsSync( url ) ){
-          if( fs.statSync(url).isDirectory() &&  path.join( url, 'index.html') ){
-              url = path.join( url, 'index.html')
-          }
-          isValid = true;
-      }else{
-          isValid = 'localhost' === new URL(url).hostname || isUrl( url )
-      }
+      let isValid = fs.existsSync( url ) || 'localhost' === new URL(url).hostname || isUrl( url );
+      let isDirectory = fs.existsSync( url ) && fs.statSync(url).isDirectory();
 
       if( isValid ){
-        let originalFileName =  `${fs.existsSync( url ) ?
-          path.resolve(url).replace(':', '_') :
-          url.replace(/http[s]+:\/\//, '')}.html`;
-        let originalJsonFileName =  `${fs.existsSync( url ) ?
-            path.resolve(url).replace(':', '_') :
-            url.replace(/http[s]+:\/\//, '')}.json`;
-
+       
         let outputDir = path.resolve('.',  outputFolder );
 
         let {stderr, stdout}  = spawn.sync( 
@@ -236,27 +252,71 @@ class A11yPlugin {
         }
         
         if( stdout && stdout.toString()){
-          let reportedFile =  path.join(outputDir, originalFileName );
-          let reportedJSon =  path.join(outputDir, originalJsonFileName );
+          let auditIndex = [];
+
+          // we iterate thru the output directory in reverse order,
+          // this way we can remove any empty directories at the end, since files are cycled first.
+          fs.readdirSync(outputDir, {recursive: true}).reverse().forEach( file => {
+            // process each json file file
+            if( fs.statSync(path.join(outputDir, file)).isFile() ){
+              if ( file.startsWith('summary_') ){
+                // remove the summary files
+                fs.rmSync( path.join(outputDir, file) )
+                return;
+              }
+
+              let oldName = file;
+              let newName = file;
+
+              // remove the original output directory from the file name
+              newName = isDirectory ? file.replace(url.replace(':', '_'), '') : file;
+              
+              newName = newName.replace(/^\\/, '');
 
-          // if output file name option was passed
-          if( outputFilename ){
+              // for some reason .html files have an extra .html in the name
+              newName = newName.endsWith('.html.html') ? newName.replace('.html.html', '.html') : newName;
+              
+              // if the new name is not the same as the old name.
+              if( newName !== file ){
+                // rename the file
+                fs.renameSync(
+                  path.join(outputDir, oldName ), 
+                  path.join(outputDir, newName) );
+              }
+
+              // we add the file to the audit index
+              if( ! auditIndex.includes(newName) && newName.endsWith('.html') ){
+                auditIndex.push( newName );
+              }
+              
+              // if we are generating html output, we need to generate the html file.
+              if( htmlOutput ){
+                // let jsonObj = JSON.parse(fs.readFileSync(path.join(outputDir, newName)));
 
-              reportedFile =  path.join( outputDir, `${outputFilename}.html` );
-              reportedJSon =  path.join( outputDir, `${outputFilename}.json` );
+                // we generate the html file
+                // reporter( jsonObj, { outputFolder, outputFilename: newName.replace(/\.json$/, '') } );
+              }
+            
+            }else if ( fs.statSync(path.join(outputDir, file)).isDirectory() ){
+              // process each directory
+              // delete any empty directories.
+              if( 0 === fs.readdirSync(path.join(outputDir, file)).length  ){
+                // remove the directory
+                fs.rmSync(path.join(outputDir, file), {recursive: true});
+              }
+            }
 
-              // rename the output files
-              fs.renameSync(path.join(outputDir, originalFileName), reportedFile );
-              fs.renameSync(path.join(outputDir, originalJsonFileName), reportedJSon );
+          });
 
-              // delete any empty directories.
-              fs.rmSync( path.join(outputDir, originalFileName.split(path.sep).shift()), {recursive: true} )
-          }
+          // we generate the landing page.
+          landingPage( auditIndex, {outputFolder, outputFilename} );
 
+          // we generate the .
           if( 'a11y' === process.argv[2] ){
-              console.log( reportedFile )
+              // console.log( reportedFile )
           }else{
-              return reportedFile;
+            return true;
+              // return reportedFile;
           }
         }
       }else{

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@caweb/a11y-webpack-plugin",
-  "version": "1.0.9",
+  "version": "1.1.1",
   "description": "CAWebPublishing Webpack Plugin to run Accessibility Scans",
   "type": "module",
   "main": "index.js",
   "files": [
     "aceconfig.js",
     "index.js",
+    "reporter.js",
     "README.md"
   ],
   "scripts": {
@@ -38,5 +39,8 @@
   "devDependencies": {
     "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4"
+  },
+  "peerDependencies": {
+    "@caweb/template": "^1.0.2"
   }
 }

package/reporter.js

@@ -0,0 +1,390 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+import fs from 'fs';
+import HandleBars from 'handlebars';
+import htmlFormat from 'html-format';
+
+import endsWith from '@caweb/webpack/helpers/logic/endsWith.js';
+
+
+const templateDir = path.resolve( 'node_modules', '@caweb', 'template' );
+
+let templatePartials = {
+  'header': 'semantics/header.html',
+  'footer': 'semantics/footer.html',
+  'utilityHeader': 'semantics/utility-header.html',
+  'branding': 'semantics/branding.html',
+  'mobileControls': 'semantics/mobile-controls.html',
+  'navHeader': 'semantics/nav-header.html',
+  'navFooter': 'semantics/nav-footer.html',
+  'alert': 'components/alert/alert.html',
+  'searchForm': 'forms/search.html'
+}
+
+let sortedReport = {
+  errors: [],
+  warnings: [],
+  info: []
+};
+
+let title = `IBM Accessibility Equal Access Toolkit: Accessibility Checker Report`;
+
+
+/**
+ * Process data
+ * 
+ * Data Object
+ * {
+ *  functions,
+ *  options,
+ *  errors,
+ *  globals,
+ *  unused,
+ *  member,
+ *  file
+ * }
+ */
+function addBreakdown({
+  functions,
+  options,
+  errors,
+  implieds,
+  globals,
+  unused,
+  member,
+  file
+}){
+  let functionList = [];
+  let errorList = [];
+  let unusedList = [];
+
+  /**
+   * Process function data
+   * 
+   * Function Data Object
+   * {
+   *  name,
+   *  param,
+   *  line,
+   *  character,
+   *  last,
+   *  lastcharacter,
+   *  metrics {
+   *    complexity,
+   *    parameters,
+   *    statements
+   *  }
+   * }
+   */
+  if( functions ){
+    functions.forEach(({ name, param, line, character, metrics }) => {
+      let { complexity, parameters, statements } = metrics;
+
+      functionList.push(
+        '<li>',
+        `<p><b>Name:</b> ${name}</p>`,
+        param && param.length ? `<p><b>Parameters:</b> ${param}</p>` : '',
+        `<p><b>Line:</b> ${line}</p>`,
+        `<p><b>Col:</b> ${character}</p>`,
+        `<p><b>Metrics:</b></p>`,
+        '<ul>',
+        `<li><b>Cyclomatic Complexity Number:</b> ${complexity}</li>`,
+        `<li><b>Arguments:</b> ${parameters}</li>`,
+        `<li><b>Statements:</b> ${statements}</li>`,
+        '</ul>',
+        '</li>'
+      )
+    })
+  }
+
+
+  /**
+   * Process error data
+   * 
+   * Error Data Object
+   * {
+   *  id,
+   *  raw,
+   *  code,
+   *  evidence,
+   *  line,
+   *  character,
+   *  scope,
+   *  a,
+   *  b,
+   *  c,
+   *  d,
+   *  reason
+   * }
+   */
+  if( errors ){
+    errors.forEach(({reason, evidence, line, character}) => {
+      errorList.push(
+        '<li>',
+        `<p><b>Reason:</b> ${reason}</p>`,
+        `<p><b>Evidence:</b> ${evidence}</p>`,
+        `<p><b>Line:</b> ${line}</p>`,
+        `<p><b>Col:</b> ${character}</p>`,
+        '</li>'
+      )
+    })
+  }
+
+  /**
+   * Unused Data
+   * {
+   *  name,
+   *  line,
+   *  character
+   * }
+   */
+  if( unused ){
+    unused.forEach(({name, line, character}) => {
+      unusedList.push(
+        '<li>',
+        `<p><b>Name:</b> ${name}</p>`,
+        `<p><b>Line:</b> ${line}</p>`,
+        `<p><b>Col:</b> ${character}</p>`,
+        '</li>'
+      )
+    })
+  }
+
+  return `<section id="${file.replace(/[\\:\.]/g, '-').toLowerCase()}" class="mb-5 border border-2">
+    <div class="bg-light p-4"><h4>File: <a href="file://${file}" target="_blank" class="fst-italic fs-md text-break">${file}</a></h4></div>
+    <div class="p-4">
+    <h5>Functions: <span class="bg-light rounded-circle p-2">${functions.length}</span></h5>
+    ${ functionList.length ? `<ol>${functionList.join('\n')}</ol>` : ''}
+    <h5>Errors: <span class="bg-light rounded-circle p-2">${errors ? errors.length : 0}</span></h5>
+    ${ errorList.length ? `<ol>${errorList.join('\n')}</ol>` : '' }
+    <h5>Unused: <span class="bg-light rounded-circle p-2">${unused ? unused.length : 0}</span></h5>
+    ${ unusedList.length ? `<ol>${unusedList.join('\n')}</ol>` : '' }
+    </div>
+    </section>`;
+}
+
+function initHandleBars(){
+  // Register partials.
+  Object.entries(templatePartials).forEach(([p, f]) => HandleBars.registerPartial(p, fs.readFileSync(path.resolve(templateDir, f )).toString() ) );
+
+  
+  // Register custom helpers.
+  HandleBars.registerHelper('endsWith', endsWith )
+
+  return HandleBars.compile(fs.readFileSync(path.resolve(templateDir, 'patterns', 'index.html')).toString() )
+
+}
+
+/**
+ * JSHint Reporter
+ * 
+ * @param {*} results 
+ * @param {*} data 
+ * @param {*} opts 
+ */
+function reporter(data, opts){
+  let output = [];
+  
+  let {
+    outputFolder, 
+    outputFilename
+  } = opts;
+
+  let {counts, startScan, URL } = data?.summary;
+
+  let totalIssues = (counts?.violation || 0) + 
+    (counts?.potentialviolation || 0) + 
+    (counts?.recommendation || 0) + 
+    (counts?.potentialrecommendation || 0) + 
+    (counts?.manual || 0);
+  let totalViolations = counts?.violation || 0;
+  let totalReviewsNeeded = counts?.potentialviolation || 0;
+  let totalRecommendations = (counts?.recommendation || 0) + 
+    (counts?.potentialrecommendation || 0) + 
+    (counts?.manual || 0);
+
+  // currentStatus is the total number of elements minus 
+  // the number of elementsViolationReview minus the recommendations
+  // all divided by the total number of elements
+  let currentStatus = (
+    (counts?.elements || 0) - 
+    ( (counts?.elementsViolationReview || 0) - (counts?.recommendation || 0) )
+  ) / (counts?.elements || 0);
+
+  let violationIcon = '<span class="ca-gov-icon-close-line text-danger align-bottom mx-2"></span>';
+  let reviewIcon = '<span class="ca-gov-icon-warning-triangle text-warning align-bottom mx-2"></span>';
+  let recommendationIcon = '<span class="ca-gov-icon-info text-primary align-bottom mx-2"></span>';
+
+  output.push(
+    '<div class="container">', // open container
+    '<div class="row">', // open row
+    '<div class="col-12">', // open column
+    `<h1 class="page-title my-4">${title}</h1>`,
+    '</div>', // end col-12
+    '</div>', // end row
+    '<div class="row">', // open row
+    '<div class="col-3">', // open column 3
+    `<p>${ new Date(startScan).toLocaleString() }</p>`,
+    '<strong>Scanned page:</strong>',
+    `<p class="text-break">${ URL }</p>`,
+    '</div>', // end col-3
+    '<div class="col-9">', // open column 9
+    '<div class="d-flex p-4" style="background-color: #e8daff; border: 1px solid #8a3ffc">', // open div
+    '<div class="w-25">', // open div
+    '<p class="fw-bold">Current status</p>',
+    `<strong class="fs-1">${Math.ceil(currentStatus * 100)}%</strong>`,
+    '<p>Percentage of elements with no detected violations or items to review</p>',
+    '</div>', // end div
+    '<div class="ps-4 w-75">', // open div
+    '<p>This report summarizes automated tests and is generated by <a href="https://www.ibm.com/able/toolkit/tools/#develop" target="_blank">IBM Equal Access Tools</a>. You have to perform additional manual tests to complete accessibility assessments. Use the <a href="https://ibm.com/able/toolkit" target="_blank">IBM Equal Access Toolkit</a> to guide you.</p>',
+    '<p class="mb-0">More resources:</p>',
+    '<ul class="list-group list-group-flush">',
+    '<li class="list-group-item bg-transparent p-0 border-0"><a href="https://www.ibm.com/able/toolkit/develop/overview/#unit-testing" target="_blank">Quick unit test for developers</a></li>',
+    '<li class="list-group-item bg-transparent p-0 border-0"><a href="https://www.ibm.com/able/toolkit/verify/overview" target="_blank">Full accessibility test process</a></li>',
+    '</ul>',
+    '</div>', // end div
+    '</div>', // end div
+    '<div class="d-flex my-4">', // open div
+    '<div class="flex-grow-1 cursor-pointer border border-2 p-2 me-2">', // open div
+    `<strong>Violations${violationIcon}</strong>`,
+    `<strong class="fs-1 d-block">${totalViolations}</strong>`,
+    '<span>Accessibility failures that need to be corrected</span>',
+    '</div>', // end div
+    '<div class="flex-grow-1 cursor-pointer border border-2 p-2 me-2">', // open div
+    `<strong>Needs review${reviewIcon}</strong>`,
+    `<strong class="fs-1 d-block">${totalReviewsNeeded}</strong>`,
+    '<span>Issues that may not be a violation; manual review is needed</span>',
+    '</div>', // end div
+    '<div class="flex-grow-1 cursor-pointer border border-2 p-2 me-2">', // open div
+    `<strong>Recommendations${recommendationIcon}</strong>`,
+    `<strong class="fs-1 d-block">${totalRecommendations}</strong>`,
+    '<span>Opportunities to apply best practices to further improve accessibility</span>',
+    '</div>', // end div
+    '</div>', // end div
+    '<div class="d-flex">', // open div
+    // '<select>', // open select
+    // '<option value="review"><span class="ca-gov-icon-warning-triangle text-warning align-bottom me-2"></span>Needs review</option>', // option
+    // '<option value="recommendations"><span class="ca-gov-icon-info text-primary align-bottom me-2"></span>Recommendations</option>', // option
+    // '<option value="rules"><span class="ca-gov-icon-close-line text-danger align-bottom me-2"></span>Violations</option>', // option
+    // '</select>', // end select
+    `<p class="ms-auto me-2">${violationIcon}${totalViolations}</p>`,
+    `<p class="mx-2">${reviewIcon}${totalReviewsNeeded}</p>`,
+    `<p class="mx-2">${recommendationIcon}${totalRecommendations}</p>`,
+    `<p></p>`,
+    `<p class="ms-5">${totalIssues} issues found</p>`,
+    '</div>', // end div
+    '</div>', // end col-9
+    '</div>', // end row
+    '<div class="row">', // open row
+    '<div class="col-12">', // open column
+    '<table class="table">', // open table
+    '<thead>', // open thead
+    '<th>Issues</th>', // th
+    '<th>Element roles</th>', // th
+    '<th>Requirements</th>', // th
+    '<th>Rules</th>', // th
+    '</thead>', // end thead
+    '<tbody>', // open tbody
+    ...data?.results?.map( result => {
+      if( 'pass' === result.level ){
+        return null; // we skip the passed results
+      }
+
+      let icon = recommendationIcon;
+
+      if( 'violation' === result.level ){
+        icon = violationIcon;
+      }else if( 'potentialviolation' === result.level ){
+        icon = reviewIcon;
+      }
+
+      return `<tr><td>${icon}</td><td>${result.path.aria}</td><td>${result.category}</td><td>${result.ruleId}</td></tr>`
+    }).filter(Boolean),
+    '</tbody>', // end tbody
+    '</table>', // end table
+    '</div>', // end col-12
+    '</div>', // end row
+    '</div>', // end container
+  )
+
+  HandleBars.registerPartial('index', output.join('\n') );
+
+  let template = initHandleBars();
+
+  fs.mkdirSync( outputFolder, {recursive: true} );
+
+
+  // we generate the outputFilename
+  fs.writeFileSync(
+    path.join(outputFolder, outputFilename),
+    htmlFormat(
+      template({
+        title,
+        scheme: 'oceanside',
+        assets: [ 
+        fs.existsSync( path.join(outputFolder, 'a11y.update.js' ) ) ? 
+          'a11y.update.js' : '' // if the hot module update file exists, add it
+        ].filter(Boolean)
+      }),
+      "  ".repeat(4), 250
+    )
+  );
+}
+
+function landingPage(data, opts ){
+  let output = [];
+    
+  let {
+    outputFolder, 
+    outputFilename
+  } = opts;
+
+  
+  output.push(
+    `<div class="container"><div class="row"><div class="col-12"><h1 class="page-title my-4">${title} for ${process.cwd().split('\\').pop()}</h1></div></div></div>`,
+    '<div class="container"><div class="row"><div class="col-12">',
+    '<table class="table"><thead><tr><th>Page Auditted</th><th>Audit</th></thead><tbody>',
+    ...data.sort().map(file => {
+      // remove the .json extension from the file name
+      file = file.replace(/\.json$/, '');
+
+      return `<tr><td><a href="/${file}" target="_blank">/${file}</a></td><td><a href="${file}" target="_blank">${file}</a></td></tr>`
+    }),
+    '</tbody></table>',
+    '</div></div></div>'
+  )
+
+  HandleBars.registerPartial('index', output.join('\n') );
+
+  let template = initHandleBars();
+
+  fs.mkdirSync( outputFolder, {recursive: true} );
+  
+  // we generate the outputFilename
+  fs.writeFileSync(
+    path.join(outputFolder, `${outputFilename}.html`),
+    htmlFormat(
+      template({
+        title: `${title} for ${process.cwd().split('\\').pop()}`,
+        scheme: 'oceanside',
+        assets: [ 
+        fs.existsSync( path.join(outputFolder, 'a11y.update.js' ) ) ? 
+          'a11y.update.js' : '' // if the hot module update file exists, add it
+        ].filter(Boolean)
+      }),
+      "  ".repeat(4), 250
+    )
+  );
+
+}
+
+function capitalCase(str){
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+export {
+  reporter,
+  landingPage
+}