npm - mod-build - Versions diffs - 4.0.0-alpha.19f → 4.0.0-alpha.20 - Mend

mod-build 4.0.0-alpha.19f → 4.0.0-alpha.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/package.json +1 -1
package/siteconfig.js +23 -3
package/src/pages/{index.html → index.hbs} +3 -2
package/src/scripts/utils.js +0 -1
package/src/scripts/vendor/+.js +5 -0
package/src/styles/partials/+.css +9 -0
package/src/templates/components/head.html +8 -12
package/template.js +595 -1
package/vite.config.js +3 -4

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mod-build",
-  "version": "4.0.0-alpha.19f",
+  "version": "4.0.0-alpha.20",
   "description": "Share components for S3 sites.",
   "type": "module",
   "scripts": {

package/siteconfig.js CHANGED Viewed

@@ -1,3 +1,23 @@
-export const siteData = () => {
-	return {};
-};
+/**
+ * Site-specific information that can be used
+ * inside HTML template using Handlebars
+ */
+export let siteData = () => {
+	return {
+		primary_trade: 'Home Warranty',
+		service: 'home_warranty',
+		gtm_container_ID: 'GTM-PZGPJR6',
+		qs_gtm_container_ID: 'GTM-PZGPJR6',
+		email: 'support@bestcompany.com',
+		email_unsub: 'unsubscribe@bestcompany.com',
+		domain: 'bestcompany.com',
+		company_name: 'BestCompany',
+		website_name: 'BestCompany.com',
+		useCDN: true,
+		isWhiteLabel: true,
+		isQSPage: true,
+		useAccessibleConfig: true,
+		isVite: true,
+		pathSubdirectory: 'src/'
+	};
+};

package/src/pages/{index.html → index.hbs} RENAMED Viewed

@@ -4,9 +4,10 @@
     {{ fileInclude 'src/templates/components/head.html'
       page = this
       path = 'home'
-    }}
-  </head>
+    }}
+  </head>
   <body>
+    {{ log this }}
     {{#header}}
 			{{ fileInclude 'src/accessible-components/header/header.html'
         header = this

package/src/scripts/utils.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import fs from "node:fs";
-import merge from "lodash.merge";
 import { seasons } from "../data/seasons.js";
 import gulpHandlebarsFileInclude from "gulp-handlebars-file-include";

package/src/scripts/vendor/+.js ADDED Viewed

@@ -0,0 +1,5 @@
+import './google-tag-manager-head.js'
+import './heap-addeventproperties-identify.js'
+import './heap-tracking.js'
+import './heap-vwo.js'
+import './visual-website-optimizer.js'

package/src/styles/partials/+.css ADDED Viewed

@@ -0,0 +1,9 @@
+@import "_contact-us.scss";
+@import "_google-address-autocomplete.scss";
+@import "_mixins.scss";
+@import "_modal-pages.scss";
+@import "_modernize-colors.scss";
+@import "_qs-footer.scss";
+@import "_quote-footer-v1.scss";
+@import "_quote-footer-v2.scss";
+@import "_quote-footer-v3.scss";

package/src/templates/components/head.html CHANGED Viewed

@@ -1,20 +1,16 @@
 <!-- an example of the head component for v4.0.0 -->
 <meta charset="UTF-8" />
-<link rel="icon" type="image/svg+xml" href="/{{#if page.headConfig.faviconPath}}{{page.headConfig.faviconPath}}{{else}}favicon.svg"{{/if}} />
+<link rel="icon" type="image/svg+xml" href="{{#if page.headConfig.faviconPath}}{{page.headConfig.faviconPath}}{{else}}favicon.svg"{{/if}} />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<!-- assets links afterBegin -->
-{{#if page.headConfig.useModAnalytics}}
-	<script src="https://{{this.resourceDomain}}/quote/resources/mod-alytics/modalytics.min.js" {{#if page.headConfig.deferModAnalytics}}defer{{/if}} {{#if page.headConfig.asyncModAnalytics}}async{{/if}}></script>
+{{#if this.page.headConfig.useModAnalytics}}
+	<script src="https://{{this.page.nodeEnv}}/quote/resources/mod-alytics/modalytics.min.js" {{#if page.headConfig.deferModAnalytics}}defer{{/if}} {{#if page.headConfig.asyncModAnalytics}}async{{/if}}></script>
 {{/if}}
-<!-- Include vwo setup -->
-{{#xif "this.page.headConfig.vwoSetup.vwoPathArray.indexOf(this.path) > -1" }}
+{{#xif "this.page.headConfig.vwoSetup.vwoPathArray.includes(this.path)" }}
 	<link rel="preconnect" href="https://dev.visualwebsiteoptimizer.com">
-	<!-- Do not double hit our analytical resources (Heap/Google Analytics) if the page is going to be redirected by a VWO a/b test-->
-	<script src="{{ resolveAlias '@/scripts/vendor/visual-website-optimizer.js'}}"></script>
+	<script type="module" src="../scripts/vendor/visual-website-optimizer.js"></script>
 {{else}}
-	<script src="{{ resolveAlias '@/scripts/url-cleaner.js'}}"></script>
+	<script type="module" src="../scripts/url-cleaner.js'"></script>
 {{/xif}}
 {{#unless page.headConfig.disableRobots}}
@@ -48,13 +44,13 @@
 <!-- site title -->
 <title>
-	{{#if page.headConfig.inverseTitle}}
+	{{#if this.headConfig.inverseTitle}}
 		{{#unless page.headConfig.hideTitleCompanyName}}{{company_name}} | {{/unless}}
 		{{#if this.pageTitle}}
 			{{this.pageTitle}}
 		{{else}}
 			{{#if page.headConfig.title}}
-				{{page.headConfig.title}}
+				{{this.headConfig.title}}
 			{{/if}}
 		{{/if}}
 	{{else}}

package/template.js CHANGED Viewed

@@ -3,5 +3,599 @@
  * inside HTML templates using Handlebars
  */
 export const templateData = () => {
-	return {};
+	return {
+		page: {
+			headConfig: {
+				hideTitleCompanyName: true,
+				title: 'Testttt',
+				description: 'test test test',
+				keywords: '',
+				faviconPath: '/images/favicon.ico',
+				inverseTitle: true,
+				useDynamicGtm: true,
+				useModAnalytics: true,
+				disableOgTags: true,
+				noBsBaseStyles: true,
+				vwoSetup: {
+					vwoPathArray: ['none']
+				}
+			},
+			footAssetsConfig: {
+				disableJquery: true,
+				disableFormJs: true,
+				disableExpandCollapse: true,
+				includeCallRailJs: true,
+			},
+			cssThemes: [
+				'best-company',
+				'best-company-default',
+				'best-company-thankyou-sorry'
+			]
+		},
+		footer: {
+			attributes: {
+				class: 'footer--best-company',
+				data: {
+					'hide-contractor': ''
+				}
+			}
+		},
+		header: {
+			logo: {
+				picture: {
+					img: {
+						attributes: {
+							src: '/src/assets/images/logo/logo.svg',
+							alt: 'Company Name'
+						}
+					}
+				}
+			},
+			callRail: {
+				mobileText: '<span class="hidden visible-sm-up">Call&nbsp;</span>(555) 555-5555',
+				phoneNumber: '5555555555'
+			}
+		},
+		hero: {
+			formTemplateInclude: 'src/templates/_partials/form.html',
+			title: {
+				text: 'Lorem ipsum dolor sit amet.'
+			},
+			subtitle: {
+				text: ''
+			},
+			callRail: {
+				text: 'or call (555) 555-5555 '
+			},
+			/* gradient + graphic option: */
+			background: {},
+			picture: {
+				img: {
+					attributes: {
+						src: '/src/assets/images/hero/hero.png',
+						alt: ''
+					}
+				}
+			}
+			/* full-width background image option */
+			// background: {
+			// 	includeOverlay: true,
+			// 	picture: {
+			// 		img: {
+			// 			attributes: {
+			// 				class: 'hero__background-image',
+			// 				alt: '',
+			// 				src: '/images/hero/hero-background-full.jpg'
+			// 			}
+			// 		}
+			// 	}
+			// }
+		},
+		progressbar: {
+			attributes: {
+				class: 'text-align-center'
+			},
+			includeStepCount: true
+		},
+		steps: {
+			template: 'src/accessible-components/steps/steps.html',
+			carouselOptions: {
+				attributes: {
+					id: 'swiperForm',
+					class: 'swiper--form swiper--dynamic-step-height',
+					role: 'group',
+					tabindex: '0',
+					aria: {
+						label: 'Multi-Step Form',
+						describedby: 'steps-description'
+					}
+				},
+				description: 'Use the buttons on each slide (Go, Next, or Back) or click Enter to move throughout the form steps. Use tab to navigate between input fields. On the final step, the form information will be submitted. When your results load, you will be redirected  to a new web page.'
+			},
+			items: [
+				{
+					attributes: {
+						data: {
+							'step-name': 'zip'
+						}
+					},
+					stepContent: {
+						title: {
+							text: 'What is your zip code?'
+						},
+						fields: [
+							{
+								attributes: {
+									name: 'zip',
+									class: 'form-input--border-bottom-only'
+								}
+							}
+						],
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Next Step'
+						}
+					}
+				},
+				{
+					attributes: {
+						data: {
+							'step-name': 'OwnHome'
+						}
+					},
+					stepContent: {
+						fields: [
+							{
+								fieldType: 'radio',
+								radioOptionType: 'group',
+								attributes: {
+									id: 'OwnHome'
+								},
+								legend: {
+									text: 'Do you own or rent your home?'
+								},
+								options: [
+									{
+										attributes: {
+											name: 'OwnHome',
+											id: 'YesOwnHome',
+											value: 'Yes',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Own'
+									},
+									{
+										attributes: {
+											name: 'OwnHome',
+											id: 'NoRentHome',
+											value: 'No',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Rent'
+									}
+								],
+								errorMessage: 'Professionals need this info to generate a quote.'
+							}
+						],
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Next Step'
+						}
+					}
+				},
+				{
+					attributes: {
+						data: {
+							'step-name': 'ElectricBill'
+						}
+					},
+					stepContent: {
+						fields: [
+							{
+								label: {
+									attributes: {
+										class: 'step__title',
+										for: 'ElectricBill'
+									},
+									text: 'What‘s your monthly electric bill?'
+								},
+								fieldType: 'select',
+								attributes: {
+									class: 'select--border-bottom-only',
+									name: 'ElectricBill',
+									id: 'ElectricBill'
+								},
+								options: [
+									{
+										attributes: {
+											value: '',
+											disabled: ''
+										},
+										text: 'Please Select'
+									},
+									{
+										attributes: {
+											value: '$300+'
+										},
+										text: '$300+'
+									},
+									{
+										attributes: {
+											value: '$200 - $300'
+										},
+										text: '$200 - $300'
+									},
+									{
+										attributes: {
+											value: '$100 - $200',
+											selected: ''
+										},
+										text: '$100 - $200'
+									},
+									{
+										attributes: {
+											value: 'Under $100'
+										},
+										text: 'Under $100'
+									}
+								],
+								errorMessage: 'Professionals need this info to generate a quote.'
+							}
+						],
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Next Step'
+						}
+					}
+				},
+				{
+					attributes: {
+						data: {
+							'step-name': 'MultipleCheckMarks'
+						}
+					},
+					stepContent: {
+						fields: [
+							{
+								fieldType: 'checkbox-group',
+								legend: {
+									text: 'What are you most concerned about?',
+									disclaimer: 'Check all that apply.'
+								},
+								options: [
+									{
+										attributes: {
+											name: 'MultipleCheckMarks',
+											value: 'Falling',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Falling'
+									},
+									{
+										attributes: {
+											name: 'MultipleCheckMarks',
+											value: 'Medical Emergency',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Medical Emergency'
+									},
+									{
+										attributes: {
+											name: 'MultipleCheckMarks',
+											value: 'Allergy Attack',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Allergy Attack'
+									},
+									{
+										attributes: {
+											name: 'MultipleCheckMarks',
+											value: 'Other',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Other'
+									}
+								],
+								errorMessage: 'Professionals need this info to generate a quote.'
+							}
+						],
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Next Step'
+						}
+					}
+				},
+				{
+					attributes: {
+						data: {
+							'step-name': 'UtilityProvider'
+						}
+					},
+					stepContent: {
+						fields: [
+							{
+								fieldType: 'select',
+								label: {
+									attributes: {
+										class: 'step__title',
+										for: 'UtilityProvider'
+									},
+									text: 'Who is your current utility provider?'
+								},
+								attributes: {
+									class: 'select--border-bottom-only',
+									name: 'UtilityProvider',
+									id: 'UtilityProvider'
+								},
+								options: [
+									{
+										text: 'Other',
+										value: 'Other'
+									}
+								]
+							}
+						],
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Next Step'
+						}
+					}
+				},
+				{
+					attributes: {
+						class: 'step--last',
+						data: {
+							'step-name': 'personalInfo'
+						}
+					},
+					stepContent: {
+						fields: [
+							{
+								formGroup: {
+									attributes: {
+										class: 'form-group--flex-50'
+									}
+								},
+								attributes: {
+									name: 'firstName',
+									class: 'form-input--border-bottom-only'
+								}
+							},
+							{
+								formGroup: {
+									attributes: {
+										class: 'form-group--flex-50'
+									}
+								},
+								attributes: {
+									name: 'lastName',
+									class: 'form-input--border-bottom-only'
+								}
+							},
+							{
+								attributes: {
+									name: 'email',
+									class: 'form-input--border-bottom-only'
+								}
+							},
+							{
+								attributes: {
+									name: 'homePhone',
+									class: 'form-input--border-bottom-only'
+								}
+							},
+							{
+								attributes: {
+									name: 'address',
+									class: 'form-input--border-bottom-only'
+								},
+								labelInInput: 'Street Address'
+							},
+							{
+								formGroup: {
+									attributes: {
+										class: 'form-group--flex-33'
+									}
+								},
+								fieldType: 'input',
+								attributes: {
+									class: 'form-input--border-bottom-only',
+									name: 'visualCity',
+									disabled: '',
+									value: ''
+								},
+								labelInInput: 'City'
+							},
+							{
+								formGroup: {
+									attributes: {
+										class: 'form-group--flex-33'
+									}
+								},
+								fieldType: 'input',
+								attributes: {
+									class: 'form-input--border-bottom-only',
+									name: 'visualState',
+									disabled: '',
+									value: ''
+								},
+								labelInInput: 'State'
+							},
+							{
+								formGroup: {
+									attributes: {
+										class: 'form-group--flex-33'
+									}
+								},
+								attributes: {
+									name: 'zip1',
+									class: 'form-input--border-bottom-only'
+								}
+							},
+							{
+								fieldType: 'input',
+								attributes: {
+									name: 'city',
+									type: 'hidden',
+									value: ''
+								}
+							},
+							{
+								fieldType: 'input',
+								attributes: {
+									name: 'state',
+									type: 'hidden',
+									value: ''
+								}
+							}
+						],
+						tcpa: {
+							placement: 'below-cta'
+						},
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Get Quote'
+						}
+					}
+				}
+			]
+		},
+		featuredBlock: {
+			title: {
+				attributes: {
+					class: 'text-align-center'
+				},
+				text: 'About [ Company Name ]'
+			},
+			columns: [
+				{
+					attributes: {
+						class: 'hidden visible-lg-up'
+					},
+					picture: {
+						img: {
+							attributes: {
+								src: '/src/assets/images/logo/logo.svg',
+								alt: '',
+								loading: 'lazy'
+							}
+						}
+					},
+					button: {
+						tag: 'a',
+						attributes: {
+							class: 'btn--secondary',
+							href: 'tel:5555555555'
+						},
+						text: 'Call (555) 555-5555'
+					}
+				},
+				{
+					description: {
+						text: 'Vivamus gravida facilisis arcu, eu vestibulum massa molestie eget. Curabitur sollicitudin justo quis dignissim iaculis. Donec venenatis ullamcorper odio, vel placerat sem porttitor at. Maecenas in enim suscipit, elementum est eget, dignissim ipsum. Nam nec orci id enim congue viverra quis eget dui.'
+					}
+				},
+				{
+					attributes: {
+						class: 'visible-sm-down hidden visible-md'
+					},
+					picture: {
+						img: {
+							attributes: {
+								src: '/src/assets/images/logo/logo.svg',
+								alt: '',
+								loading: 'lazy'
+							}
+						}
+					},
+					button: {
+						tag: 'a',
+						attributes: {
+							class: 'btn--secondary',
+							href: 'tel:5555555555'
+						},
+						text: 'Call (555) 555-5555'
+					}
+				}
+			]
+		},
+		reviews: {
+			title: {
+				text: 'What People Are Saying'
+			},
+			items: [
+				{
+					starRating: '50',
+					showRatingNextToAuthor: true,
+					reviewText: 'Duis dui odio, eleifend ac mauris cursus, feugiat mollis felis. Praesent sit amet justo pharetra, tristique purus nec, accumsan leo. Donec viverra, nunc in efficitur sagittis, tortor magna venenatis ante, vel vestibulum sem ex sit amet est. Quisque efficitur, purus eget congue porttitor, dui metus egestas erat, eu auctor quam mi ac metus.',
+					excludeQuotes: true,
+					authorName: 'Lorem Ipsum',
+					date: 'Month Day, Year',
+					location: 'City, State'
+				},
+				{
+					starRating: '50',
+					showRatingNextToAuthor: true,
+					reviewText: 'Donec imperdiet vitae arcu vel dictum. Mauris tempus elit nec orci tempus, non egestas odio semper. Duis laoreet venenatis neque eget euismod. Duis dapibus et orci ac facilisis.',
+					excludeQuotes: true,
+					authorName: 'Lorem Ipsum',
+					date: 'Month Day, Year',
+					location: 'City, State'
+				},
+				{
+					starRating: '50',
+					showRatingNextToAuthor: true,
+					reviewText: 'Suspendisse dapibus felis ut diam egestas, ac tristique sapien laoreet. Maecenas pellentesque vel odio vitae egestas. Vestibulum posuere viverra luctus. Ut ornare ut ligula non accumsan. Etiam hendrerit ex sit amet turpis pretium rhoncus sit amet non est.',
+					excludeQuotes: true,
+					authorName: 'Lorem Ipsum',
+					date: 'Month Day, Year',
+					location: 'City, State'
+				}
+			]
+		},
+		matched: {
+			icon: '/images/icons/tick.svg',
+			heading: 'Thank you!',
+			subheading: 'A representative will contact you shortly.',
+			call: {
+				icon: '/images/icons/call.svg',
+				text: 'To get help immediately, please call:',
+				phone: '5555555555'
+			}
+		},
+		unmatched: {
+			icon: '/images/icons/error.svg',
+			heading: 'Whoops, something&nbsp;<br class="visible-sm-down">went wrong...',
+			subheading: 'A representative will contact you shortly.',
+			call: {
+				icon: '/images/icons/call.svg',
+				text: 'To get help immediately, please call:',
+				phone: '5555555555'
+			}
+		}
+	};
 };

package/vite.config.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import handlebars from '@vituum/vite-plugin-handlebars'
 import vituum from 'vituum'
-import gulpHandlebarsFileInclude from 'gulp-handlebars-file-include'
 import eslint from 'vite-plugin-eslint'
 import path from 'node:path'
 import { defaultSettings } from './src/data/config.js'
@@ -30,15 +29,15 @@ export default defineConfig((config) => ({
 		viteStaticCopy({
 			targets: [
 				{
-					src: path.resolve(__dirname, './src/resources'),
+					src: './src/resources',
 					dest: './'
 				},
 				{
-					src: path.resolve(__dirname, './src/fonts'),
+					src: './src/fonts',
 					dest: './'
 				},
 				{
-					src: path.resolve(__dirname, './src/videos'),
+					src: './src/videos',
 					dest: './'
 				},
 			],