mod-build 4.0.0 → 4.0.1-beta.2

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 4.0.1
+
+- Clean up some plugins into separate files
+- Add footAssetsConfig to additionalAssets
+
 ## 4.0.0-beta.5
 
 - Updated the `transformIndexHtml` hook to use the `writeBundle` hook in the ViteConfig.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mod-build",
-  "version": "4.0.0",
+  "version": "4.0.1-beta.2",
   "description": "Share components for S3 sites.",
   "type": "module",
   "scripts": {

package/src/scripts/default/index.js

@@ -0,0 +1,9 @@
+import { loadAdditionalAssets } from "./additional-assets.js";
+import { useDynamicGtm } from './use-dynamic-gtm.js';
+import { updateFooterLinkPaths } from "./update-link-paths.js";
+
+export const globals = (config) => {
+	useDynamicGtm(config);
+	loadAdditionalAssets(config);
+	updateFooterLinkPaths();
+}

package/src/scripts/default/update-link-paths.js

@@ -1,3 +1,5 @@
+import { observeMutations } from "../utils.js";
+
 const updateFooterModalPaths = () => {
 	const footerModalLinks = document.querySelectorAll('.footer__links a');
 	footerModalLinks.forEach((link) => {
@@ -13,19 +15,11 @@ const updateFooterModalPaths = () => {
 	});
 };
 
-export const waitForFooterLinks = () => {
-	const observer = new MutationObserver((mutationsList) => {
-		for (const mutation of mutationsList) {
-			if (mutation.type === 'childList') {
-				const footerLinks = document.querySelector('.footer__links');
-				if (footerLinks) {
-					observer.disconnect();
-					updateFooterModalPaths();
-					break;
-				}
-			}
+export const updateFooterLinkPaths = () => {
+	observeMutations(document.body, () => {
+		const updatedFooterLinks = document.querySelector('.footer__links');
+		if (updatedFooterLinks) {
+			updateFooterModalPaths();
 		}
 	});
-
-	observer.observe(document.body, { childList: true, subtree: true });
 };

package/src/scripts/default/use-dynamic-gtm.js

@@ -1,11 +1,10 @@
 
 export const useDynamicGtm = (config) => {
 	const { page } = config;
-
 	if (page.headConfig.useDynamicGtm || typeof window.isQSPage === 'undefined') {
-	import('@/scripts/has-qs-params.js').then((qs) => {
-		qs.default();
-		window.gtm_container_ID = window.isQSPage ? config.qs_gtm_container_ID : config.gtm_container_ID;
-	});
+		import('@/scripts/has-qs-params.js').then((qs) => {
+			qs.default();
+			window.gtm_container_ID = window.isQSPage ? config.qs_gtm_container_ID : config.gtm_container_ID;
+		});
 	}
 }

package/src/scripts/plugins.js

@@ -0,0 +1,109 @@
+import fs from "node:fs";
+import { defaultSettings } from "../data/config.js";
+import footer from '../data/footer.js';
+import { handlebarsHelpers } from "./utils.js";
+import gulpHandlebarsFileInclude from "gulp-handlebars-file-include";
+import merge from "lodash.merge";
+import { glob } from 'glob'
+
+export const STATIC_COPY_TARGETS = [
+	{
+		src: './src/resources/templates',
+		dest: './resources/'
+	},
+	{
+		src: './src/fonts',
+		dest: './'
+	},
+	{
+		src: './src/videos',
+		dest: './'
+	},
+	{
+		src: './src/accessible-components/carousel/carousel.min.js',
+		dest: './accessible-components/carousel'
+	},
+	{
+		src: './src/accessible-components/expand-collapse/expand-collapse.min.js',
+		dest: './accessible-components/expand-collapse'
+	},
+	{
+		src: './src/accessible-components/progress-bar/progress-bar.min.js',
+		dest: './accessible-components/progress-bar'
+	},
+];
+
+export const updateConfig = async (config) => {
+	const { isLocal, nodeEnv, buildPath } = defaultSettings;
+	// eslint-disable-next-line no-unused-vars
+	let tempConfigExists;
+
+	let mergedConfig = { 
+		...config,
+		...footer(config),
+		...{ isLocal, nodeEnv, buildPath }
+	};
+
+	const checkForTempConfig = () => {
+		return new Promise((resolve) => {
+			tempConfigExists = fs.existsSync(`src/.tmp/config.json`);
+	
+			const configData = fs.readFileSync('src/.tmp/config.json', 'utf8');
+			const parsedConfig = JSON.parse(configData);
+			mergedConfig = merge(parsedConfig, mergedConfig);
+
+			resolve();
+		});
+	};
+
+	return {
+		name: 'update-config',
+		async configResolved({ configFileDependencies }) {
+			await checkForTempConfig();
+
+			configFileDependencies.forEach((file) => {
+				if (file.endsWith('siteconfig.js') || file.endsWith('template.js')) {
+					console.log('siteconfig or template changed');
+					try {
+						// overwrite the config file with new data
+						fs.writeFileSync('src/.tmp/config.json', JSON.stringify(mergedConfig, null, 2));
+					} catch (error) {
+						console.error(`Error reading config file: ${error}`);
+					}
+				}
+			});
+		},
+		configureServer() {
+			gulpHandlebarsFileInclude(mergedConfig, { handlebarsHelpers, maxRecursion: 500 });
+		},
+		buildStart() {
+			gulpHandlebarsFileInclude(mergedConfig, { handlebarsHelpers, maxRecursion: 500 });
+			fs.writeFileSync('src/.tmp/config.json', JSON.stringify(mergedConfig, null, 2));
+		}
+	}
+}
+
+export const replaceSrcPaths = (config) => {
+	return {
+		name: 'replace-src-paths',
+		writeBundle: async () => {
+			const files = glob.sync(defaultSettings.distFolder + '/**/index.html');
+			for (const file of files) {
+				let html = await fs.promises.readFile(file, 'utf-8');
+				let updatedHtml = '';
+
+				if (config.pathSubdirectory && config.pathSubdirectory.length > 0) {
+					updatedHtml = html
+						.replace(/(src|data-load)="\/?src\//g, `$1="${config.pathSubdirectory}`)
+						.replace(/(src|srcset|data-load|href)="\/?assets\//g, `$1="${config.pathSubdirectory}assets/`)
+						.replace(/(src|data-load|href)="\/?resources\//g, `$1="${config.pathSubdirectory}resources/`)
+				} else {
+					updatedHtml = html.replace(/(src|data-load)="\/?src\//g, '$1="/');
+				}
+
+				await fs.promises.writeFile(file, updatedHtml);
+			}
+		},
+		apply: 'build',
+	}
+}

package/src/scripts/utils.js

@@ -1,9 +1,5 @@
-import fs from "node:fs";
 import { seasons } from "../data/seasons.js";
-import { defaultSettings } from "../data/config.js";
-import footer from '../data/footer.js';
 import gulpHandlebarsFileInclude from "gulp-handlebars-file-include";
-import merge from "lodash.merge";
 
 export function getFileFromURL(url) {
 	return url.split('/').pop();
@@ -171,52 +167,16 @@ export const handlebarsHelpers = [
 	}		
 ]
 
-export const updateConfig = async (config) => {
-	const { isLocal, nodeEnv, buildPath } = defaultSettings;
-	// eslint-disable-next-line no-unused-vars
-	let tempConfigExists;
-
-	let mergedConfig = { 
-		...config,
-		...footer(config),
-		...{ isLocal, nodeEnv, buildPath }
-	};
-
-	const checkForTempConfig = () => {
-		return new Promise((resolve) => {
-			tempConfigExists = fs.existsSync(`src/.tmp/config.json`);
-	
-			const configData = fs.readFileSync('src/.tmp/config.json', 'utf8');
-			const parsedConfig = JSON.parse(configData);
-			mergedConfig = merge(parsedConfig, mergedConfig);
-
-			resolve();
-		});
-	};
-
-	return {
-		name: 'update-config',
-		async configResolved({ configFileDependencies }) {
-			await checkForTempConfig();
-
-			configFileDependencies.forEach((file) => {
-				if (file.endsWith('siteconfig.js') || file.endsWith('template.js')) {
-					console.log('siteconfig or template changed');
-					try {
-						// overwrite the config file with new data
-						fs.writeFileSync('src/.tmp/config.json', JSON.stringify(mergedConfig, null, 2));
-					} catch (error) {
-						console.error(`Error reading config file: ${error}`);
-					}
-				}
-			});
-		},
-		configureServer() {
-			gulpHandlebarsFileInclude(mergedConfig, { handlebarsHelpers, maxRecursion: 500 });
-		},
-		buildStart() {
-			gulpHandlebarsFileInclude(mergedConfig, { handlebarsHelpers, maxRecursion: 500 });
-			fs.writeFileSync('src/.tmp/config.json', JSON.stringify(mergedConfig, null, 2));
+export const observeMutations = (target, callback) => {
+	const observer = new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (mutation.type === 'childList') {
+				callback();
+				observer.disconnect();
+				break;
+			}
 		}
-	}
-}
+	});
+
+	observer.observe(target, { childList: true, subtree: true });
+};

package/tasks/serve.js

@@ -3,7 +3,7 @@ import grabSharedScripts from './grab-shared-scripts.js';
 import grabCdn from './grab-cdn.js';
 import grabFormHelpers from './grab-form-helpers.js';
 import templates from './templates.js';
-import { updateConfig } from '../src/scripts/utils.js';
+import { updateConfig } from '../src/scripts/plugins.js';
 
 export async function startModBuild(config) {
 	await grabCdn(config);

package/vite.config.js

@@ -4,10 +4,8 @@ import eslint from 'vite-plugin-eslint'
 import { defaultSettings } from './src/data/config.js'
 import { defineConfig } from 'vite'
 import { startModBuild } from './tasks/serve.js'
-import { updateConfig } from './src/scripts/utils.js'
+import { updateConfig, replaceSrcPaths, STATIC_COPY_TARGETS } from './src/scripts/plugins.js'
 import { viteStaticCopy } from 'vite-plugin-static-copy'
-import { glob } from 'glob'
-import fs from "node:fs";
 
 export default defineConfig((config) => ({
 	build: {
@@ -27,32 +25,7 @@ export default defineConfig((config) => ({
 		}),
 		updateConfig(config),
 		viteStaticCopy({
-			targets: [
-				{
-					src: './src/resources/templates',
-					dest: './resources/'
-				},
-				{
-					src: './src/fonts',
-					dest: './'
-				},
-				{
-					src: './src/videos',
-					dest: './'
-				},
-				{
-					src: './src/accessible-components/carousel/carousel.min.js',
-					dest: './accessible-components/carousel'
-				},
-				{
-					src: './src/accessible-components/expand-collapse/expand-collapse.min.js',
-					dest: './accessible-components/expand-collapse'
-				},
-				{
-					src: './src/accessible-components/progress-bar/progress-bar.min.js',
-					dest: './accessible-components/progress-bar'
-				},
-			],
+			targets: STATIC_COPY_TARGETS,
 		}),
 		{
 			...eslint(),
@@ -66,28 +39,7 @@ export default defineConfig((config) => ({
 			apply: 'serve',
 			enforce: 'post'
 		},
-		{
-			name: 'replace-src-paths',
-			writeBundle: async () => {
-				const files = glob.sync(defaultSettings.distFolder + '/**/index.html');
-				for (const file of files) {
-					let html = await fs.promises.readFile(file, 'utf-8');
-					let updatedHtml = '';
-
-					if (config.pathSubdirectory && config.pathSubdirectory.length > 0) {
-						updatedHtml = html
-							.replace(/(src|data-load)="\/?src\//g, `$1="${config.pathSubdirectory}`)
-							.replace(/(src|data-load|href)="\/?assets\//g, `$1="${config.pathSubdirectory}assets/`)
-							.replace(/(src|data-load|href)="\/?resources\//g, `$1="${config.pathSubdirectory}resources/`)
-					} else {
-						updatedHtml = html.replace(/(src|data-load)="\/?src\//g, '$1="/');
-					}
-
-					await fs.promises.writeFile(file, updatedHtml);
-				}
-			},
-			apply: 'build',
-		}
+		replaceSrcPaths(config),
 	],
 	define: {
 		'process.env': process.env

package/src/accessible-components/button/_button.scss

@@ -1,308 +0,0 @@
-$button-border-radius: 2px !default;
-$button-cursor: pointer !default;
-$button-display: inline-block !default;
-$button-font-family: $base-font-family !default;
-$button-font-size: 1.25rem !default;
-$button-font-size-desktop: $button-font-size !default;
-$button-font-style: normal !default;
-$button-font-weight: 700 !default;
-$button-height: 50px !default;
-$button-height-desktop: $button-height !default;
-$button-letter-spacing: 0 !default;
-$button-line-height: 1.05 !default;
-$button-margin: 10px 0 !default;
-$button-padding: 15px 30px !default;
-$button-position: relative !default;
-$button-text-align: center !default;
-$button-text-decoration: none !default;
-$button-text-transform: uppercase !default;
-$button-transition: color .15s ease-in-out, background-color .15s ease-in-out, border .15s ease-in-out !default;
-$button-width: 100% !default;
-$button-z-index: 0 !default;
-
-$back-button-align-items: center !default;
-$back-button-background-color: transparent !default;
-$back-button-border: 0 !default;
-$back-button-border-radius: 0 !default;
-$back-button-color: $color-charcoal4 !default;
-$back-button-display: flex !default;
-$back-button-initial-display: none !default;
-$back-button-font-size: .875rem !default;
-$back-button-font-weight: 400 !default;
-$back-button-height: auto !default;
-$back-button-line-height: $button-line-height !default;
-$back-button-margin: 10px 0 0 !default;
-$back-button-padding: 2px 5px !default;
-$back-button-margin-desktop: $back-button-margin !default;
-$back-button-padding-desktop: $back-button-padding !default;
-$back-button-hover-background-color: transparent !default;
-$back-button-hover-color: darken($back-button-color, 10%) !default;
-$back-button-icon-font-size: 90% !default;
-$back-button-icon-margin-right: 4px !default;
-
-$back-button-focus-outline: 1px solid rgba($back-button-color, .5) !default;
-$back-button-focus-outline-offset: 2px !default;
-
-$button-primary-background-color: $color-a11y-default-button !default;
-$button-primary-border: 0 !default;
-$button-primary-color: $color-white !default;
-$button-primary-font-family: $button-font-family !default;
-$button-primary-max-width: 100% !default;
-$button-primary-hover-background-color: $color-a11y-default-button-hover !default;
-$button-primary-hover-border: $button-primary-border !default;
-$button-primary-hover-color: $color-white !default;
-
-$button-secondary-background-color: $button-primary-background-color !default;
-$button-secondary-border: $button-primary-border !default;
-$button-secondary-color: $button-primary-color !default;
-$button-secondary-font-family: $button-font-family !default;
-$button-secondary-font-size: $button-font-size !default;
-$button-secondary-font-size-desktop: $button-secondary-font-size !default;
-$button-secondary-font-style: $button-font-style !default;
-$button-secondary-height: $button-height !default;
-$button-secondary-height-desktop: $button-secondary-height !default;
-$button-secondary-max-width: 100% !default;
-$button-secondary-padding: $button-padding !default;
-$button-secondary-text-transform: $button-text-transform !default;
-$button-secondary-hover-background-color: $button-primary-hover-background-color !default;
-$button-secondary-hover-border: $button-primary-hover-border !default;
-$button-secondary-hover-color: $button-primary-hover-color !default;
-
-$button-icon-position: absolute !default;
-$button-icon-font-family: 'modicons-fill' !default;
-$button-icon-font-size: .875rem !default;
-$button-icon-bottom: unset !default;
-$button-icon-left: unset !default;
-$button-icon-right: 15px !default;
-$button-icon-top: 50% !default;
-$button-icon-transform: translateY(-50%) !default;
-
-$button-spinner-default-easing: cubic-bezier(.4, .1, .5, 1);
-$button-spinner-default-border-color: $button-primary-background-color !default;
-$button-spinner-default-border-right-color: $color-white !default;
-$button-spinner-default-border-top-color: $button-spinner-default-border-right-color !default;
-
-$button-spinner-primary-border-color: $button-primary-background-color !default;
-$button-spinner-primary-border-right-color: $color-white !default;
-$button-spinner-primary-border-top-color: $button-spinner-default-border-right-color !default;
-
-$button-spinner-secondary-border-color: $button-secondary-background-color!default;
-$button-spinner-secondary-border-right-color: $color-white !default;
-$button-spinner-secondary-border-top-color: $button-spinner-default-border-right-color !default;
-
-@keyframes spinnerAnim {
-	from { transform: rotate(0deg); }
-	to { transform: rotate(360deg); }
-}
-
-.btn {
-	border-radius: $button-border-radius;
-	cursor: $button-cursor;
-	display: $button-display;
-	font-family: $button-font-family;
-	font-size: $button-font-size;
-	font-style: $button-font-style;
-	font-weight: $button-font-weight;
-	height: $button-height;
-	letter-spacing: $button-letter-spacing;
-	line-height: $button-line-height;
-	margin: $button-margin;
-	padding: $button-padding;
-	position: $button-position;
-	text-align: $button-text-align;
-	text-decoration: $button-text-decoration;
-	text-transform: $button-text-transform;
-	transition: $button-transition;
-	width: $button-width;
-	z-index: $button-z-index;
-
-	&__spinner {
-		display: block;
-		margin: 0 auto;
-		height: 20px;
-		left: 50%;
-		opacity: 0;
-		position: absolute;
-		top: 50%;
-		transform: translate(-50%, -50%);
-		transition: opacity .1s $button-spinner-default-easing;
-		visibility: hidden;
-		width: 20px;
-
-		&::before {
-			content: '';
-			display: inline-block;
-			height: 100%;
-			vertical-align: middle;
-		}
-
-		&::after {
-			animation: spinnerAnim 1.5s linear infinite;
-			border: 4px solid darken($button-spinner-default-border-color, 20);
-			border-radius: 50%;
-			border-right-color: $button-spinner-default-border-right-color;
-			border-top-color: $button-spinner-default-border-top-color;
-			content: '';
-			display: block;
-			height: 100%;
-			left: 0;
-			position: absolute;
-			top: 0;
-			width: 100%;
-		}
-	}
-
-	&__icon {
-		bottom: $button-icon-bottom;
-		font-family: $button-icon-font-family;
-		font-size: $button-icon-font-size;
-		left: $button-icon-left;
-		position: $button-icon-position;
-		right: $button-icon-right;
-		top: $button-icon-top;
-		transform: $button-icon-transform;
-	}
-
-	&--back {
-		align-items: $back-button-align-items;
-		background-color: $back-button-background-color;
-		border: $back-button-border;
-		border-radius: $back-button-border-radius;
-		color: $back-button-color;
-		cursor: $button-cursor;
-		display: $back-button-initial-display;
-		font-size: $back-button-font-size;
-		font-family: $button-font-family;
-		font-weight: $back-button-font-weight;
-		height: $back-button-height;
-		line-height: $back-button-line-height;
-		margin: $back-button-margin;
-		padding: $back-button-padding;
-		transition: $button-transition;
-
-		i {
-			font-size: $back-button-icon-font-size;
-			margin-right: $back-button-icon-margin-right;
-		}
-
-		&:focus {
-			outline: $back-button-focus-outline;
-			outline-offset: $back-button-focus-outline-offset;
-		}
-	}
-
-	&--primary {
-		background-color: $button-primary-background-color;
-		border: $button-primary-border;
-		color: $button-primary-color;
-		font-family: $button-primary-font-family;
-		max-width: $button-primary-max-width;
-
-		.btn__spinner {
-			&::after {
-				border: 4px solid darken($button-spinner-primary-border-color, 20);
-				border-right-color: $button-spinner-primary-border-right-color;
-				border-top-color: $button-spinner-primary-border-top-color;
-			}
-		}
-	}
-
-	&--secondary {
-		background-color: $button-secondary-background-color;
-		border: $button-secondary-border;
-		color: $button-secondary-color;
-		font-family: $button-secondary-font-family;
-		font-size: $button-secondary-font-size;
-		font-style: $button-secondary-font-style;
-		height: $button-secondary-height;
-		max-width: $button-secondary-max-width;
-		padding: $button-secondary-padding;
-		text-transform: $button-secondary-text-transform;
-
-		.btn__spinner {
-			&::after {
-				border: 4px solid darken($button-spinner-secondary-border-color, 20);
-				border-right-color: $button-spinner-secondary-border-right-color;
-				border-top-color: $button-spinner-secondary-border-top-color;
-			}
-		}
-	}
-
-	&--loading {
-		cursor: wait;
-
-		.btn__text {
-			visibility: hidden;
-		}
-
-		.btn__spinner {
-			opacity: 1;
-			visibility: visible;
-		}
-	}
-}
-
-.form--loading {
-	.btn {
-		cursor: wait;
-
-		&__text {
-			visibility: hidden;
-		}
-
-		&__spinner {
-			opacity: 1;
-			visibility: visible;
-		}
-	}
-}
-
-.form-in-progress {
-	.btn--back {
-		display: $back-button-display;
-	}
-}
-
-@include breakpoint-md {
-	.btn {
-		font-size: $button-font-size-desktop;
-		height: $button-height-desktop;
-
-		&--back {
-			margin: $back-button-margin-desktop;
-			padding: $back-button-padding-desktop;
-
-			&:hover,
-			&:active,
-			&:focus {
-				background-color: $back-button-hover-background-color;
-				color: $back-button-hover-color;
-			}
-		}
-
-		&--primary {
-			&:hover,
-			&:active,
-			&:focus {
-				background-color: $button-primary-hover-background-color;
-				border: $button-primary-hover-border;
-				color: $button-primary-hover-color;
-			}
-
-		}
-
-		&--secondary {
-			font-size: $button-secondary-font-size-desktop;
-			height: $button-secondary-height-desktop;
-
-			&:hover,
-			&:active,
-			&:focus {
-				background-color: $button-secondary-hover-background-color;
-				border: $button-secondary-hover-border;
-				color: $button-secondary-hover-color;
-			}
-
-		}
-	}
-}

package/src/accessible-components/button/back-button.html

@@ -1,8 +0,0 @@
-<button class="btn--back back-btn{{#if class}} {{class}}{{/if}}" data-btn="back" type="button">
-	<i class="{{#if icon}}{{icon}}{{else}}icon-caret-left{{/if}}"></i>
-	{{#if iconOnly}}
-		<span class="visually-hidden">Back</span>
-	{{else}}
-		Back
-	{{/if}}
-</button>

package/src/accessible-components/button/button.html

@@ -1,17 +0,0 @@
-{{#xif 'this.button.tag && this.button.tag === "a"'}}
-<a class="btn{{#xif 'this.button.attributes && this.button.attributes.class || this.class'}}{{#if this.button.attributes.class}} {{this.button.attributes.class}}{{/if}}{{#if this.class}} {{this.class}}{{/if}}{{/xif}}" {{{addAttributes this.button 'class'}}}>
-{{else}}
-<button class="btn{{#xif 'this.button.attributes && this.button.attributes.class'}} {{this.button.attributes.class}}{{/xif}}" {{{addAttributes this.button 'class'}}}>
-{{/xif}}
-	<span class="btn__text">{{{this.button.text}}}</span>
-	{{#if this.button.icon}}
-		<i class="btn__icon{{#xif 'this.button.icon.attributes && this.button.icon.attributes.class'}} {{this.button.icon.attributes.class}}{{/xif}}" {{{addAttributes this.button.icon 'class'}}}></i>
-	{{/if}}
-{{#xif 'this.button.tag && this.button.tag === "a"'}}
-</a>
-{{else}}
-	{{#unless this.button.hideSpinner}}
-		<span class="btn__spinner"></span>
-	{{/unless}}
-</button>
-{{/xif}}