mod-build 3.6.75-beta.2 → 4.0.0-alpha.2

package/package.json

@@ -1,79 +1,29 @@
 {
   "name": "mod-build",
-  "version": "3.6.75-beta.2",
+  "version": "4.0.0-alpha.2",
   "description": "Share components for S3 sites.",
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "serve": "node --max-old-space-size=4096 gulp grab-shared-scripts"
+    "dev": "export NODE_ENV=qa.modernize.com IS_LOCAL=true && vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
-  "author": "",
-  "license": "ISC",
   "dependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/register": "^7.0.0",
-    "bootstrap-sass": "^3.4.3",
-    "browser-sync": "^2.18.6",
-    "del": "^3.0.0",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
-    "gulp-babel": "^8.0.0",
-    "gulp-buffer": "0.0.2",
-    "gulp-clean-css": "^3.0.4",
-    "gulp-concat": "^2.6.1",
-    "gulp-cssmin": "^0.1.7",
-    "gulp-csso": "^3.0.0",
-    "gulp-eslint": "^5.0.0",
-    "gulp-eslint-threshold": "^0.1.1",
-    "gulp-filter": "^5.0.0",
+    "@rollup/plugin-inject": "^5.0.5",
+    "axios": "^1.6.2",
+    "del": "^7.1.0",
+    "eslint": "^8.55.0",
+    "gulp": "^4.0.2",
     "gulp-handlebars-file-include": "^1.0.0",
     "gulp-hash": "^4.2.2",
-    "gulp-htmlmin": "^3.0.0",
-    "gulp-if": "^2.0.2",
-    "gulp-imagemin": "^3.2.0",
-    "gulp-insert": "^0.5.0",
-    "gulp-load-plugins": "^0.10.0",
-    "gulp-minify": "0.0.14",
-    "gulp-mocha-phantomjs": "^0.12.1",
-    "gulp-plumber": "^1.1.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.5.4",
-    "gulp-rev": "^7.1.2",
-    "gulp-rev-all": "^0.9.7",
-    "gulp-rev-delete-original": "^0.2.3",
-    "gulp-rev-replace": "^0.4.3",
-    "gulp-sass": "^5.1.0",
-    "gulp-sass-lint": "^1.3.2",
-    "gulp-sass-variables": "^1.2.0",
-    "gulp-size": "^2.1.0",
-    "gulp-sourcemaps": "^2.6.0",
+    "gulp-replace": "^1.1.4",
     "gulp-tap": "^2.0.0",
-    "gulp-uglify": "^2.1.2",
-    "gulp-useref": "^5.0.0",
-    "husky": "^1.3.1",
-    "imagemin-mozjpeg": "^7.0.0",
-    "imagemin-webp": "^5.1.0",
-    "jquery": "^3.2.1",
-    "lodash": "^4.17.15",
-    "lodash.merge": "^4.6.2",
-    "nouislider": "^10.1.0",
-    "path": "^0.12.7",
-    "request": "^2.88.0",
-    "run-sequence": "^2.2.1",
-    "sass": "^1.49.9",
-    "should": "^11.2.1",
-    "vinyl-source-stream": "^2.0.0",
-    "webpack-stream": "^5.2.1"
-  },
-  "resolutions": {
-    "graceful-fs": "4.2.3"
-  },
-  "husky": {
-    "hooks": {
-      "pre-push": "gulp sass-lint && gulp js-lint-husky"
-    }
-  },
-  "overrides": {
-    "graceful-fs": "^4.2.9"
+    "husky": "^8.0.3",
+    "jquery": "^3.7.1",
+    "sass": "^1.69.5",
+    "vite": "^5.0.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-handlebars": "^1.6.0",
+    "vite-plugin-static-copy": "^1.0.0"
   }
 }

package/siteconfig.js

@@ -0,0 +1,38 @@
+export let siteData = {
+	primary_trade: 'Medical Alerts',
+	service: 'alerts_medical', // required to fetch the correct tcpa blurb
+	gtm_container_ID: 'GTM-TBJV3H', // e.g. GTM-N23VMDW
+	qs_gtm_container_ID: 'GTM-TBJV3H',
+	email: 'support@emedicalalerts.com', // e.g.  // e.g. support@homesolarsurvey.com
+	email_unsub: 'unsubscribe@emedicalalerts.com', // e.g. unsubscribe@homesolarsurvey.com
+	domain: 'emedicalalerts.com', // e.g. homesolarsurvey.com
+	company_name: 'eMedicalAlerts', // e.g. Home Solar Survey
+	website_name: 'eMedicalAlerts.com', // e.g. HomeSolarSurvey.com
+	useCDN: true,
+	isWhiteLabel: true,  
+	isQSPage: true, 
+	useAccessibleConfig: true 
+};
+ 
+export function setSiteData(newSiteData) {
+	siteData = newSiteData;
+} 
+ 
+export const defaultSettings = {
+	tmpFolder: '.tmp', 
+	srcFolder: 'src',
+	browserSyncServeFolders: ['.tmp', 'src', 'node_modules/mod-style-bootstrap/src', 'node_modules/mod-base/src'],
+	distFolder: 'dist',
+	fontsSubfolder: 'fonts',
+	imagesSubfolder: 'images', 
+	stylesSubfolder: 'styles',  
+	scriptsSubfolder: 'scripts',
+	scriptsCompiledFolder: 'scripts/compiled',
+	templatesSubfolder: 'templates', 
+	dataSubfolder: 'data',  
+	modBuild: '',  
+	resourceDomain: process.env.IS_LOCAL ? 'qa.modernize.com' : 'modernize.com',
+	nodeEnv: process.env.NODE_ENV,
+	isLocal: process.env.IS_LOCAL || import.meta?.env?.DEV,
+	buildPath: process.env.BUILD_PATH
+}

package/src/data/footer.js

@@ -0,0 +1,117 @@
+/* contains data for qs-footer and quote-footer */
+export default function(siteData) {
+	let trade = '';
+	if (siteData?.contractor_trade) {
+		trade = `&trade=${siteData.contractor_trade}`;
+	} else if (siteData?.primary_trade) {
+		trade = `&trade=${siteData.primary_trade.replace(/[\s]+|_/g, '-').toLowerCase()}`;
+	}
+
+	const footerKey = siteData.isQSPage ? 'qsFooterData' : 'quoteFooterData';
+
+	const qsLinks = [
+		{
+			name: 'About',
+			url: '/about/',
+			modal: true,
+			company: true
+		},
+		{
+			name: 'Privacy Notice',
+			url: '/privacy/',
+			modal: true
+		},
+		{
+			name: 'Affiliates',
+			url: 'https://modernize.com/contact?publisher',
+			modal: false
+		},
+		{
+			name: 'Terms of Use',
+			url: '/terms/',
+			modal: true
+		},
+		{
+			name: 'Contact Us',
+			url: '/contact-us/',
+			modal: true
+		},
+		{
+			name: 'California - Do not sell my info',
+			url: 'https://privacy-central.securiti.ai/#/dsr/983cfd4b-c36a-4601-89e9-b651e5a05708',
+			modal: false
+		}
+	]
+
+	const quoteLinks = [
+		{
+			url: 'about',
+			text: 'About Us',
+			modal: true
+		},
+		{
+			url: 'terms',
+			text: 'Terms of Use',
+			modal: true
+		},
+		{
+			url: 'privacy',
+			text: 'Privacy Policy',
+			modal: true
+		},
+		{
+			url: 'https://modernize.com/contact?publisher',
+			text: 'I\'m a publisher',
+			modal: false,
+			target: '_blank'
+		}
+	]
+
+	const quoteSpecific = {
+		capchaDisclosure: {
+			text: 'This site is protected by reCAPTCHA and the Google',
+			privacy: {
+				text: 'Privacy Policy',
+				url: 'https://policies.google.com/privacy'
+			},
+			terms: {
+				text: 'Terms of Service',
+				url: 'https://policies.google.com/terms'
+			}
+		},
+		privacyLinks: [
+			{
+				text: 'California Privacy',
+				anchor: 'ccpa',
+				modal: true
+			},
+			{
+				text: 'New York Privacy',
+				anchor: 'nyna',
+				modal: true
+			},
+			{
+				text: 'Do Not Sell My Personal Information',
+				anchor: 'uspi',
+				modal: true
+			}
+		],
+	}
+
+	const data = {
+		[footerKey]: {
+			links: [
+				...siteData.isQSPage ? qsLinks : quoteLinks,
+			],
+			copyright: `${siteData.isQSPage ? 'QuinStreet, Inc.' : ''} All Rights Reserved.`,
+			contractor: {
+				text: 'Are you a contractor?',
+				linkText: 'Join Our Contractor Network',
+				link: 'https://modernize.com/pro/register/leads/?utm_campaign=quinstreet-referral' + trade
+			},
+			...siteData.isQSPage ? null : quoteSpecific,
+		}
+	}
+
+	return data;
+}

package/src/data/seasons.js

@@ -1,8 +1,6 @@
-var seasons = {
-	"warmerWeather": {
-		"firstDay": "04-14",
-		"lastDay": "09-25"
+export const seasons = {
+	'warmerWeather': {
+		'firstDay': '04-14',
+		'lastDay': '09-25'
 	}
-}
-
-module.exports = seasons;
+}

package/src/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    {{ fileInclude 'src/templates/components/head.html' 
+      page = this
+      path = 'home'
+    }}   
+  </head> 
+  <body>
+    {{#header}}
+		{{ fileInclude 'src/accessible-components/header/header.html'
+			header = this
+		}}
+	{{/header}}
+    <h1>Hello</h1> 
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

package/src/main.js

@@ -0,0 +1,45 @@
+import './styles/home.scss';
+import { templateData } from '../template.js';
+import { defaultSettings, siteData } from '../siteconfig.js';
+
+const { page } = templateData();
+
+if (page.headConfig.useDynamicGtm || typeof window.isQSPage === 'undefined') {
+  import('./scripts/has-qs-params.js').then((qs) => {
+	qs.default();
+	window.gtm_container_ID = window.isQSPage ? siteData.qs_gtm_container_ID : siteData.gtm_container_ID;
+  });
+}
+
+const { additionalAssets } = page.headConfig;
+if (additionalAssets) {
+	const { afterBegin, beforeEnd } = additionalAssets;
+
+	if (afterBegin || beforeEnd) {
+		let additionalHeadAssets = [];
+		if (afterBegin) {
+			additionalHeadAssets.push(...afterBegin);
+		}
+		if (beforeEnd) {
+			additionalHeadAssets.push(...beforeEnd);
+		}
+	
+		additionalHeadAssets.forEach((asset) => {
+			const { type, src, isLocal, localSrc, useModCdn, defer, async } = asset;
+			if (type === 'script') {
+				const script = document.createElement(type);
+				script.src = (isLocal ? localSrc : (useModCdn ? `https://${defaultSettings.resourceDomain}/${src}` : src));
+				script.async = async;
+				script.defer = defer;
+				document.head.appendChild(script);
+			}
+		
+			if (type === 'style') {
+				const link = document.createElement('link');
+				link.rel = 'stylesheet';
+				link.href = (isLocal ? localSrc : (useModCdn ? `https://${defaultSettings.resourceDomain}/${src}` : src));
+				document.head.appendChild(link);
+			}
+		});
+	}	
+}

package/src/scripts/has-qs-params.js

@@ -1,6 +1,7 @@
 /** Load GTM tag dynamically MOD vs QS by checking the quad parameters on URL **/
-window.isQSPage = window.location.href.includes('quadlink') || (
-    window.location.href.includes('CLK') &&
-    window.location.href.includes('CCID') &&
-    window.location.href.includes('QTR')
-);
+export const searchParams = new URLSearchParams(window.location.search);
+export const qsParams = ['CLK', 'CCID', 'QTR', 'quadlink'];
+
+export default function() {
+	return window.isQSPage = qsParams.some(param => searchParams.has(param))
+}

package/src/scripts/url-cleaner.js

@@ -1,7 +1,7 @@
-// On page load if hash has an ampersan all text after is removed, if there's a hash with only 'q + number' format we replace history without hash
-var hash = window.location.hash;
+// On page load if hash has an ampersand all text after is removed, if there's a hash with only 'q + number' format we replace history without hash
+let hash = window.location.hash;
 if (hash.indexOf('&') > -1) {
-    window.location.hash = hash = hash.split('&')[0];
+	window.location.hash = hash = hash.split('&')[0];
 }
 if (/^#q\d$/.test(hash)) {
 	history.replaceState(null, '', window.location.href.split('#')[0]);

package/src/scripts/utils.js

@@ -0,0 +1,178 @@
+import { seasons } from "../data/seasons.js";
+import { defaultSettings } from "../../siteconfig.js";
+import gulpHandlebarsFileInclude from "gulp-handlebars-file-include";
+
+export function getFileFromURL(url) {
+	return url.split('/').pop();
+}
+
+export function getActiveSeasons() {
+	const today = new Date();
+	const year = today.getFullYear();
+	const activeSeason = [];
+
+	for (const key in seasons) {
+		if (Object.prototype.hasOwnProperty.call(seasons, key)) {
+			const seasonName = key;
+			const dateRanges = seasons[key];
+			const startDate = new Date(`${Object.values(dateRanges)[0]}-${year}`);
+			const endDate = new Date(`${Object.values(dateRanges)[1]}-${year}`);
+
+			if (startDate < today && today < endDate) {
+				activeSeason.push(seasonName);
+			}
+		}
+	}
+
+	return activeSeason;
+}
+
+function handlebarsX(expression, context) {
+	const result = (function() {
+		try {
+			return new Function(expression);
+		}
+		catch (e) {
+			console.warn(
+				'• Expression: {{x \'' + expression + '\'}}\n'
+				+ '• JS-Error: ', e, '\n'
+			+ '• Context: ',
+				context
+			);
+		}
+	}).call(context);
+
+	return result;
+}
+
+export const handlebarsHelpers = [
+	// Run any js line
+	{
+		name: 'x',
+		fn: function(expression, options) {
+			return handlebarsX(expression, this, options);
+		}
+	},
+	// Run any js line and check if it is true
+	{
+		name: 'xif',
+		fn: function(expression, options) {
+			return handlebarsX(expression, this, options) ? options.fn(this) : options.inverse(this);
+		}
+	},
+	// Reverse array
+	{
+		name: 'reverseArray',
+		fn: function(expression) {
+			expression.reverse();
+		}
+	},
+	// Check if one var equals to another
+	{
+		name: 'equals',
+		fn: function(v1, v2, block) {
+			if (v1 === v2) {
+				return block.fn(this);
+			}
+		}
+	},
+	// Convert string to uppercase
+	{
+		name: 'uppercase',
+		fn: function(expression) {
+			return 'string' === typeof expression ? expression.toUpperCase() : '';
+		}
+	},
+	// Convert deferred styles string to links
+	{
+		name: 'deferredStyles',
+		fn: function(str) {
+			var urls = str.split(';'),
+				links = [];
+
+			urls.forEach(function(url) {
+				links.push('<link href="' + url + '" rel="stylesheet" type="text/css" />');
+			});
+
+			return links.join('');
+		}
+	},
+	// Format Phone number like type1 : xxx-xxx-xxxx OR type2 : (xxx) xxx-xxxx
+	{
+		name: 'formatPhoneNo',
+		fn: function(expression, type) {
+			var mask = /(\d{3})(\d{3})(\d{,4})?/;
+			var newValues;
+			if (type === 'type1') {
+				newValues = '$1-$2-$3';
+			} else {
+				newValues = '($1) $2-$3';
+			}
+			return expression.replace(mask, newValues);
+		}
+	},
+	// It will take the json object & variable name to assign the object & return it in the script tag
+	{
+		name: 'jsonVarScriptTag',
+		fn: function(json, variable) {
+			var check = (typeof json === 'object') && (typeof variable === 'string' && variable);
+			return check ? '<script>' + 'var ' + variable + '=' + JSON.stringify(json) + '</script>' : '';
+		}
+	},
+	// It will take & return json object
+	{
+		name: 'json',
+		fn: function(json) {
+			return JSON.stringify(json);
+		}
+	},
+	// Adding increment of 1 to value
+	{
+		name: 'inc',
+		fn: function(index) {
+			index++;
+			return index;
+		}
+	},
+	// Loop to go through and add each attribute defined in the attributes: {} object
+	{
+		name: 'addAttributes',
+		fn: function(obj) {
+			var output = '';
+			var ignoreKeys = Array.prototype.slice.call(arguments, 1, -1);
+
+			for (var key in obj.attributes) {
+				if (ignoreKeys.indexOf(key) === -1) {
+					if (typeof obj.attributes[key] !== 'object') {
+						output += key + '="' + obj.attributes[key] + '" ';
+					} else if (key === 'data') {
+						for (var dataKey in obj.attributes[key]) {
+							output += 'data-' + dataKey + '="' + obj.attributes[key][dataKey] + '" ';
+						}
+					} else if (key === 'aria') {
+						for (var ariaKey in obj.attributes[key]) {
+							output += 'aria-' + ariaKey + '="' + obj.attributes[key][ariaKey] + '" ';
+						}
+					} 
+				}
+			}
+			return output.trim();
+		}
+	},
+	{
+		name: 'resolveAlias',
+		fn: function(input) {
+			if (input.includes('@')) {
+				const resolvedValue = defaultSettings.modBuild || '';
+				return input.replace('@', resolvedValue);
+			}
+			return input;
+		}
+	},
+	{
+		name: 'fileInclude',
+		fn: function(input) {
+			return gulpHandlebarsFileInclude(input);
+		}
+	}		
+]

package/src/styles/home.scss

@@ -0,0 +1 @@
+// an example SCSS file to import

package/src/templates/_partials/scripts/deferred-styles.html

@@ -1,16 +1,16 @@
-	<noscript id="deferred-styles">
-		{{{deferredStyles deferredStyleUrls}}}
-	</noscript>
-	<script>
-		var loadDeferredStyles = function() {
-			var addStylesNode = document.getElementById("deferred-styles");
-			var replacement = document.createElement("div");
-			replacement.innerHTML = addStylesNode.textContent;
-			document.body.appendChild(replacement)
-			addStylesNode.parentElement.removeChild(addStylesNode);
-		};
-		var raf = requestAnimationFrame || mozRequestAnimationFrame ||
-			webkitRequestAnimationFrame || msRequestAnimationFrame;
-		if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
-		else window.addEventListener('load', loadDeferredStyles);
-	</script>
+<noscript id="deferred-styles">
+	{{{deferredStyles deferredStyleUrls}}}
+</noscript>
+<script>
+	const loadDeferredStyles = function() {
+		let addStylesNode = document.getElementById("deferred-styles");
+		let replacement = document.createElement("div");
+		replacement.innerHTML = addStylesNode.textContent;
+		document.body.appendChild(replacement)
+		addStylesNode.parentElement.removeChild(addStylesNode);
+	};
+	const raf = requestAnimationFrame || mozRequestAnimationFrame ||
+		webkitRequestAnimationFrame || msRequestAnimationFrame;
+	if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
+	else window.addEventListener('load', loadDeferredStyles);
+</script>

package/src/templates/_partials/scripts/vwo-redirect-callback.html

@@ -1,49 +1,47 @@
 <script>
-{{ fileInclude 'node_modules/mod-build/src/scripts/has-qs-params.js' }}
-{{ fileInclude 'node_modules/mod-build/src/scripts/url-cleaner.js' }}
-{{ fileInclude 'node_modules/mod-build/src/scripts/vendor/visual-website-optimizer.js' }}
-
-(function(VWO_HARD_TIMEOUT) {
-	window._vwo_evq = window._vwo_evq || [];
-	var queue = window._vwo_evq;
-	for (var i = 0; i < queue.length; i++) {
-		if (queue[i][0] === 'rD') {
-			window.willRedirectionOccur = true;
-			break;
-		}
-	}
-	var _vwoOldPush = window._vwo_evq.push;
-	window._vwo_evq.push = function() {
-		var eventData = arguments[0],
-			willRedirectionOccur;
-		if (eventData[0] === 'rD') {
-			willRedirectionOccur = eventData[1];
-			// It will be set to true if a redirection is going to be done by VWO.
-			window.willRedirectionOccurByVWO = willRedirectionOccur;
+	{{ fileInclude 'node_modules/mod-build/src/scripts/vendor/visual-website-optimizer.js' }}
+	
+	(function(VWO_HARD_TIMEOUT) {
+		window._vwo_evq = window._vwo_evq || [];
+		var queue = window._vwo_evq;
+		for (var i = 0; i < queue.length; i++) {
+			if (queue[i][0] === 'rD') {
+				window.willRedirectionOccur = true;
+				break;
+			}
 		}
-		_vwoOldPush.apply(window._vwo_evq, [].slice.call(arguments));
-	};
-	var hardLimitTimedout = false;
-
-	function tryNonVWOTracking() {
-		if ((window._vwo_code && (window._vwo_code.finished() || window._vwo_code.libExecuted)) || hardLimitTimedout) {
-			if (!window.willRedirectionOccurByVWO) {
-				clearTimeout(hardLimitTimer);
-				try {
-					// flag to call Modalytics.initHeapVwo() method in site level js
-					window.initHeapVwo = true;
-				} catch (e) {}
-				return;
+		var _vwoOldPush = window._vwo_evq.push;
+		window._vwo_evq.push = function() {
+			var eventData = arguments[0],
+				willRedirectionOccur;
+			if (eventData[0] === 'rD') {
+				willRedirectionOccur = eventData[1];
+				// It will be set to true if a redirection is going to be done by VWO.
+				window.willRedirectionOccurByVWO = willRedirectionOccur;
+			}
+			_vwoOldPush.apply(window._vwo_evq, [].slice.call(arguments));
+		};
+		var hardLimitTimedout = false;
+	
+		function tryNonVWOTracking() {
+			if ((window._vwo_code && (window._vwo_code.finished() || window._vwo_code.libExecuted)) || hardLimitTimedout) {
+				if (!window.willRedirectionOccurByVWO) {
+					clearTimeout(hardLimitTimer);
+					try {
+						// flag to call Modalytics.initHeapVwo() method in site level js
+						window.initHeapVwo = true;
+					} catch (e) {}
+					return;
+				}
 			}
+			setTimeout(function() {
+				tryNonVWOTracking()
+			}, 500)
 		}
-		setTimeout(function() {
-			tryNonVWOTracking()
-		}, 500)
-	}
-
-	var hardLimitTimer = setTimeout(function() {
-		hardLimitTimedout = true;
-	}, VWO_HARD_TIMEOUT);
-	tryNonVWOTracking();
-})(5000 /*MAXIMUM TIME IN SECONDS IN WHICH CODE WILL EXECUTE ANYWAY*/ );
-</script>
+	
+		var hardLimitTimer = setTimeout(function() {
+			hardLimitTimedout = true;
+		}, VWO_HARD_TIMEOUT);
+		tryNonVWOTracking();
+	})(5000 /*MAXIMUM TIME IN SECONDS IN WHICH CODE WILL EXECUTE ANYWAY*/ );
+	</script>