Merge pull request #90 from govau/develop

Tests new files, rework slack formatting, 404 pages

package.json

@@ -63,15 +63,16 @@
 		"@gov.au/skip-link": "latest",
 		"@gov.au/tags": "latest",
 		"@gov.au/text-inputs": "latest",
-		"autoprefixer": "^9.4.2",
 		"@slack/client": "^4.8.0",
+		"autoprefixer": "^9.4.2",
 		"cfonts": "^2.3.0",
 		"color-string": "^1.5.3",
 		"escape-html": "^1.0.3",
 		"express": "^4.16.4",
 		"gradient-string": "^1.2.0",
 		"helmet": "^3.15.0",
 		"node-sass": "^4.10.0",
+		"postcss": "^7.0.7",
 		"postcss-cli": "^6.0.1"
 	},
 	"devDependencies": {

src/index.js

@@ -13,7 +13,7 @@ const Fs = require( 'fs' );
 const Settings = require( './settings' );
 const GenerateHTML = require( './html' );
 const Cli = require( './cli' );
-const { SendSlackMessage, ColorMapToString, ParseRequestPath } = require( './slack' );
+const SendChameleonMessage = require( './slack' );
 
 
 // We are using express for our server
@@ -40,9 +40,9 @@ App.get( `${ Settings.endpoint }*`, async ( request, response ) => {
 		Settings.path.templates,
 	);
 
-	// Notify Slack! 
-	if ( process.env.VCAP_SERVICES ) {
-		SendSlackMessage( `_Karma-Karma-Karma-Chameleon!_ \nGenerating \`${ParseRequestPath( request.path )}\` template using... ${ColorMapToString( request.query )}` );
+	// Notify Slack!
+	if( process.env.VCAP_SERVICES ) {
+		SendChameleonMessage( request.path, request.query );
 	}
 
 	// Send back the HTML to the user
@@ -53,7 +53,10 @@ App.get( `${ Settings.endpoint }*`, async ( request, response ) => {
 // Wildcard endpoint to capture all requests other than /chameleon
 App.get( '*', ( request, response ) => {
 	Fs.readFile( 'assets/html/404.html', 'utf-8', ( error, data ) => {
-		if ( error ) { console.error ( error ) };
+		if( error ) {
+			console.error ( error );
+		}
+
 		response.send( data );
 	});
 });

src/slack.js

@@ -2,78 +2,121 @@
  * slack.js - ♥ Heartbeat messages to slack
  */
 
-const { IncomingWebhook } = require('@slack/client');
+
+// Depedencies
+const { IncomingWebhook } = require( '@slack/client' );
 const ColorString = require( 'color-string' );
 
+
 /**
- * Send a slack message to #chameleon
+ * SendSlackMessage - Send a slack message to #chameleon
+ *
  * @param {string} message - Message to send to Slack
  */
 const SendSlackMessage = ( message ) => {
-	const envVars = process.env.VCAP_SERVICES 
-		? JSON.parse( process.env.VCAP_SERVICES ) 
+	const envVars = process.env.VCAP_SERVICES
+		? JSON.parse( process.env.VCAP_SERVICES )
 		: {};
 
-	if ( Object.keys( envVars ).length > 0 ) {
-		const URL = envVars[ 'user-provided' ][ 0 ].credentials.SLACK_WEBHOOKS[ 0 ].url
+	if( Object.keys( envVars ).length > 0 ) {
+		const URL = envVars[ 'user-provided' ][ 0 ].credentials.SLACK_WEBHOOKS[ 0 ].url;
 		const SlackWebhook = new IncomingWebhook( URL );
-		
+
 		SlackWebhook.send( message, ( error, response ) => {
-			if ( error ) {
+			if( error ) {
 				console.error( 'Error:', error );
-			} 
+			}
 			else {
 				console.log( 'Slack message sent: ', response );
 			}
 		});
 	}
-}
+};
 
 
 /**
- * Generate a string of colours from an express.js request.query
- * e.g 'action: red, background: black'
- * @param {object} request - Express.js request.query
+ * QueryToHex - Get hex values of colours
+ *
+ * @param   {object} query  - Query parameters in URL
+ *
+ * @returns {object}        - Sends back an object with hexadecimals
  */
-const ColorMapToString = ( requestQuery ) => {
-	let darkColors = ``;
-	let defaultColors = ``;
-
-	if ( Object.keys( requestQuery ).length > 0 ) {
-		for ( const [ key, value ] of Object.entries( requestQuery ) ) {
-			if ( key.includes( 'dark' ) || key.includes( 'Dark' ) ) {
-				darkColors += `\n\`${key}\`: ${ColorString.to.hex( ColorString.get.rgb( value ) )}`
-			}
-			else {
-				defaultColors += `\n\`${key}\`: ${ColorString.to.hex( ColorString.get.rgb( value ) )}`
+const QueryToHexString = ( query ) => {
+	let hexString = '';
+
+	// For each item in query
+	Object.entries( query )
+		.forEach( ( [ colorName, color ] ) => {
+			const rgbColor = ColorString.get.rgb( color );
+
+			// If a valid colour add it to object and return hex value
+			if( rgbColor ) {
+				const hexColor = ColorString.to.hex( rgbColor );
+				hexString += `\`${ colorName }\`: ${ hexColor }\n`;
 			}
-		}
-
-		if ( darkColors ) {
-			return `${defaultColors}\n*Dark Palette:*${darkColors}`;
-		}
-		else {
-			return `${defaultColors}`;
-		}
-	}
-	else {
-		return "the default palette."
+		});
+
+	return hexString;
+};
+
+
+/**
+ * GetTemplateFromURL - Return the template name given a request.path
+ *
+ * @param   {string} url - Express.js request.path string
+ *
+ * @returns {string}     - The template
+ */
+const GetTemplateFromURL = ( url ) => {
+	const baseUrl = url.split( '/' )[ 2 ];
+
+	// If it is not the home page
+	if( baseUrl && baseUrl !== '' ) {
+		return baseUrl;
 	}
-}
+
+	return 'homepage';
+};
+
 
 /**
- * Return the template name given a request.path
- * @param {string} requestPath - Express.js request.path string
+ * GenerateChameleonMessage - Creates a formatted message
+ *
+ * @param   {string} url   - The url that hit the API
+ * @param   {object} query - The queries that hit the API
+ *
+ * @returns {string}       - The formatted message
  */
-const ParseRequestPath = ( requestPath ) => {
-	if ( requestPath.split( '/' ).length == 2 || requestPath.split( '/' )[2] == '' ) {
-		return 'homepage'
+const GenerateChameleonMessage = ( url, query ) => {
+	let message = '---\n_Karma-Karma-Karma-Chameleon!_\n\n';
+
+	if( url ) {
+		const template = GetTemplateFromURL( url );
+		message += `Generating *${ template }* page template\n\n`;
 	}
-	else {
-		return requestPath.split( '/' )[2]
+
+	if( query !== {}) {
+		message += QueryToHexString( query );
 	}
-}
 
+	return message;
+};
+
+
+/**
+ * SendChameleonMessage - Send a slack message to #chameleon
+ *
+ * @param {string} url   - The url that hit the API
+ * @param {object} query - The queries that hit the API
+ */
+const SendChameleonMessage = ( url, query ) => {
+	const message = GenerateChameleonMessage( url, query );
+	SendSlackMessage( message );
+};
+
+
+module.exports = SendChameleonMessage;
+module.exports.GenerateChameleonMessage = GenerateChameleonMessage;
 module.exports.SendSlackMessage = SendSlackMessage;
-module.exports.ColorMapToString = ColorMapToString;
-module.exports.ParseRequestPath = ParseRequestPath;
+module.exports.QueryToHexString = QueryToHexString;
+module.exports.GetTemplateFromURL = GetTemplateFromURL;

src/style.js

@@ -10,6 +10,30 @@ const Postcss = require( 'postcss' );
 const ColorString = require( 'color-string' );
 
 
+/**
+ * Autoprefix - Automatically adds autoprefixes to a css file
+ *
+ * @param  {string} css - The file to be prefixed
+ *
+ * @return {string}     - Prefixed css as a string
+ */
+const Autoprefix = css => new Promise( ( resolve, reject ) => {
+	// Run autoprefixer with uikit helper.js settings
+	Postcss( [ Autoprefixer({
+		browsers: [ 'last 2 versions', 'ie 8', 'ie 9', 'ie 10' ],
+	}) ] )
+		.process( css, { from: undefined })
+		.then( ( prefixed ) => {
+			prefixed
+				.warnings()
+				.forEach( warningMessage => console.warn( warningMessage.toString() ) );
+
+			resolve( prefixed.css );
+		})
+		.catch( error => reject( error ) );
+});
+
+
 /**
  * CreateStyles - Creates a HTML style tag with generated css
  *
@@ -49,9 +73,9 @@ const CreateStyles = async ( query, data, variables ) => {
 		// If there are custom styles turn them into an inline <style> tag
 		if( customStyles ) {
 			const { css } = Sass.renderSync({ data: customStyles, outputStyle: 'compressed' });
-			
+
 			const prefixedCSS = await Autoprefix( css );
-			
+
 			styles = `<style>${ prefixedCSS }</style>`;
 		}
 
@@ -63,32 +87,6 @@ const CreateStyles = async ( query, data, variables ) => {
 	}
 };
 
-/**
- * Autoprefix - Automatically adds autoprefixes to a css file
- *
- * @param  {string} file - The file to be prefixed
- *
- * @return {string}     - Prefixed css as a string
- */
-const Autoprefix = ( css ) => {
-	return new Promise( ( resolve, reject ) => {
-
-		// Run autoprefixer with uikit helper.js settings
-		Postcss([ Autoprefixer({
-			browsers: [ 'last 2 versions', 'ie 8', 'ie 9', 'ie 10' ]
-		}) ])
-			.process( css, { from: undefined } )
-			.then( prefixed => {
-				prefixed
-					.warnings()
-					.forEach( warningMessage => console.warn( warningMessage.toString() ) );
-
-				resolve( prefixed.css );
-			})
-			.catch( error => reject( error ) );
-
-	})
-};
 
 module.exports = CreateStyles;
-module.exports.Autoprefix = Autoprefix;
+module.exports.Autoprefix = Autoprefix;