@awesomeness-js/server 1.1.10 → 1.1.13

package/tests/fixtures/site-and-components/components/app/simple/_.css

@@ -0,0 +1,151 @@
+/* ================================
+   Awesomeness App Simple - NAV ONLY
+   ================================ */
+
+.awesomeness-app-simple-main {
+    opacity: 1;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    min-height: 100%;
+  	margin: 0 auto;
+	padding-top: 65px; /* account for fixed nav bar */
+}
+
+.awesomeness-app-simple-main.withFullScreenHero {
+	padding-top: 0px; /* account for fixed nav bar */
+}
+
+.awesomeness-app-simple-navBar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 65px;
+	z-index: 5;
+}
+
+/* NEW: interior wrapper */
+.awesomeness-app-simple-navBar-interior{
+	margin: 0 auto;
+	height: 65px;
+	padding: 0 16px;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.awesomeness-app-simple-logo{
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	white-space: nowrap;
+	user-select: none;
+}
+
+.awesomeness-app-simple-top-navItems{
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	height: 100%;
+}
+
+.awesomeness-app-simple-nav-item{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: 65px;
+	padding: 0 14px;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+/* Menu button */
+.awesomeness-app-simple-menu-button{
+	margin-left: auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: 65px;
+	padding: 0 12px;
+	cursor: pointer;
+	-webkit-tap-highlight-color: transparent;
+	font-size: 1.2em;
+	cursor: pointer;
+}
+
+/* Backdrop (z-index 2) */
+.awesomeness-app-simple-menu-backdrop{
+	position: fixed;
+	inset: 0;
+	z-index: 2;
+	}
+
+/* Phone slide-down menu (z-index 3) */
+.awesomeness-app-simple-phone-menu{
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 4;
+
+	transform: translate3d(0, -100%, 0);
+	transition: transform 220ms ease;
+
+	padding-top: 65px;
+	padding-bottom: 30px;
+}
+
+/* open state */
+.awesomeness-app-simple-phone-menu.is-open{
+	transform: translate3d(0, 0, 0);
+}
+
+/* Menu rows */
+.awesomeness-app-simple-phone-menu a,
+.awesomeness-app-simple-phone-menu .awesomeness-app-simple-nav-item{
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	width: 100%;
+	height: 56px;
+	padding: 0 16px;
+}
+
+
+.awesomeness-app-simple-nav-item span {
+	position: relative;
+	display: inline-block;
+	padding-bottom: 4px;
+}
+
+.awesomeness-app-simple-nav-item span::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	bottom: 0;
+
+	height: 2px;
+	width: 100%;
+
+	background: currentColor;
+
+	transform: scaleX(0);
+	transform-origin: right center;
+
+	transition: transform 420ms ease !important;
+}
+
+.awesomeness-app-simple-nav-item:hover span::after {
+	transform: scaleX(1);
+	transform-origin: left center;
+}
+
+.awesomeness-app-simple-nav-item span::after {
+	transition: transform 420ms cubic-bezier(.2,.8,.2,1);
+}

package/tests/fixtures/site-and-components/components/app/simple/index.js

@@ -0,0 +1,170 @@
+import ui from '#ui';
+
+export default ({
+	replaceApp = true,
+	navItems = [],
+	logo = 'AwesomenessJS.com',
+	fancyNavUnderline = true,
+	maxWidth = null,
+	navMaxWidth = null,
+} = {}) => {
+
+	console.log({ navMaxWidth });
+
+	let $app = ui.app.vanilla({ replaceApp });
+
+	const themeProps = ui.theme();
+
+	const $topNavBar = $(`<div class="awesomeness-app-simple-navBar ${themeProps.text.secondary}"></div>`)
+		.appendTo($app);
+
+	const $navBarInterior = $(`<div class="awesomeness-app-simple-navBar-interior"></div>`)
+		.appendTo($topNavBar);
+
+
+	if(navMaxWidth){
+
+		$navBarInterior.css('max-width', `${navMaxWidth}px`);
+	
+	}
+
+	const $logo = $(`<div class="awesomeness-app-simple-logo ${themeProps.text.accent}--hover">${logo}</div>`)
+		.appendTo($navBarInterior)
+		.on('click', () => {
+
+			window.location.href = '/';
+		
+		});
+
+	const $topNavItems = $(`<div class="hidden-t hidden-p awesomeness-app-simple-top-navItems"></div>`)
+		.appendTo($navBarInterior);
+
+	const $main = $(`<div id="main" class="awesomeness-app-simple-main ${themeProps.surface.base}"></div>`)
+		.appendTo($app);
+
+	if(maxWidth){
+
+		$main.css('max-width', `${maxWidth}px`);
+	
+	}
+
+	const $menuNav = $(`<i class="ico-menu awesomeness-app-simple-menu-button hidden-xl hidden-d ${themeProps.text.secondary} ${themeProps.text.accent}--hover"></i>`)
+		.appendTo($navBarInterior);
+
+	const $phoneMenu = $(`<div class="awesomeness-app-simple-phone-menu hidden-xl hidden-d ${themeProps.surface.base} ${themeProps.text.secondary} ${themeProps.text.accent}--hover pt65"></div>`);
+
+	
+	if(navItems.length > 0){
+		
+		const $navItemsContainer = $(`<div class="flex gap-10 height-65"></div>`)
+			.appendTo($topNavItems);
+
+		navItems.forEach((item) => {
+
+			let thisFancyNavUnderline = fancyNavUnderline;
+
+			if(!item.name && item.ico) {
+
+				item.name = `<i class="ico-${item.ico}"></i>`;
+				thisFancyNavUnderline = false;
+			
+			}
+
+
+			const itemContent = thisFancyNavUnderline ? `<span class="underline">${item.name}</span>` : item.name;
+
+			const $link = ui.link({
+				link: item.url,
+			}).appendTo($navItemsContainer)
+				.addClass(`flex justify-center align-center`);
+
+			const $item = $(`<div class="awesomeness-app-simple-nav-item ${themeProps.text.secondary} ${themeProps.text.accent}--hover">${itemContent}</div>`)
+				.appendTo($link);
+
+			
+			$link.clone(true).appendTo($phoneMenu);
+
+		});
+
+	}
+
+	// Put this after you create $menuNav and $phoneMenu
+
+	let menuOpen = false;
+
+	// Ensure phone menu is in the DOM
+	$phoneMenu.appendTo($app);
+
+	// Backdrop (z-index 2)
+	const $menuBackdrop = $('<div class="awesomeness-app-simple-menu-backdrop clearfix hidden"></div>')
+		.appendTo($app);
+
+	// icon swap helpers
+	const setMenuIconOpen = () => {
+
+		$menuNav.removeClass('ico-menu').addClass('ico-x');
+
+	};
+
+	const setMenuIconClosed = () => {
+
+		$menuNav.removeClass('ico-x').addClass('ico-menu');
+
+	};
+
+	// open/close
+	const openMenu = () => {
+
+		if (menuOpen) return;
+		menuOpen = true;
+
+		$menuBackdrop.removeClass('hidden'); // show backdrop
+		$phoneMenu.addClass('is-open');      // slide down
+		setMenuIconOpen();
+
+	};
+
+	const closeMenu = () => {
+
+		if (!menuOpen) return;
+		menuOpen = false;
+
+		$phoneMenu.removeClass('is-open');   // slide up
+		$menuBackdrop.addClass('hidden');    // hide backdrop
+		setMenuIconClosed();
+
+	};
+
+	const toggleMenu = () => (menuOpen ? closeMenu() : openMenu());
+
+	// button click
+	$menuNav.on('click', (e) => {
+
+		e.preventDefault();
+		toggleMenu();
+
+	});
+
+	// backdrop click closes
+	$menuBackdrop.on('click', (e) => {
+
+		e.preventDefault();
+		closeMenu();
+
+	});
+
+	// clicking a link closes
+	$phoneMenu.on('click', 'a', () => closeMenu());
+
+	// defensive: if items aren't anchors
+	$phoneMenu.find('.awesomeness-app-simple-nav-item').on('click', () => closeMenu());
+
+	ui.scrollSpy.top({
+		threshold: 120,
+		className: themeProps.surface.base,
+		$applyTo: $topNavBar
+	});
+	
+	return $app;
+
+};

package/tests/fixtures/site-and-components/components/app/start.js

@@ -0,0 +1,165 @@
+import ui from '#ui';
+
+export default function startApp({
+	data = {},
+	style = 'simple',
+	theme = {
+		name: 'light',
+		neutralColor: 'zinc',
+		accentColor: 'cyan',
+		customColors: {},
+	},
+	navItems = [],
+	logo = null,
+	styleConfig = {
+	},
+	postSetupHook = null,
+	home = null,
+}) {
+
+	if(!ui.app[style]){
+
+		throw new Error(`App style ${style} not found`);
+
+	}
+
+	app.theme = theme;
+
+	if(theme.customColors){
+
+		$.each(theme.customColors, (name, hexValue) => {
+
+			let inputColor;
+			let anchorShade = 600;
+
+			if(typeof hexValue === 'string'){
+
+				inputColor = hexValue;
+
+			} else if(typeof hexValue === 'object' && hexValue !== null){
+
+				inputColor = hexValue.inputColor;
+				anchorShade = hexValue.anchorShade || anchorShade;
+
+			}
+
+			ui.colors.custom({
+				inputColor: inputColor,
+				anchorShade: 600,
+				name
+			});
+
+		});
+
+	}
+
+	// create HTML first
+	// could be done in parts broken down in the scripts folder
+	var $body = $('body');
+
+	$body.empty();
+
+	var $app = $('<div id="app"></div>').appendTo($body);
+	
+	ui.app[style]({
+		logo,
+		navItems,
+		...styleConfig
+	});
+
+	app.$app = $app;
+
+	if(postSetupHook && typeof postSetupHook === 'function'){
+
+		postSetupHook({ $app });
+	
+	}
+
+
+	const $main = ui.app.cleanMain();
+
+
+	if(
+		data?.goToPage
+		&& data.goToPage != 'start'
+	){
+
+		let place = app.pages;
+		const trimmedPlace = data.goToPage.replace(/^\/+|\/+$/g, '');
+		const placeParts = trimmedPlace.split('/');
+
+		for(const part of placeParts){
+
+			if(!place[part]){
+
+				place[part] = {};
+			
+			}
+
+			place = place[part];
+		
+		}
+
+		if(place.init){
+
+			if(data.goToPage == "_md"){
+
+				// state management
+				app.state.create({
+					title: data?.pageData?.metadata?.title ?? '👋',
+					url: data?.pageData?.metadata?.url ?? data?.origLocation ?? '/' + data.goToPage,
+				});
+
+			} else {
+
+				// state management
+				app.state.create({
+					title: place?.about?.title ?? '👋',
+					url: place?.about?.url ?? data?.origLocation ?? '/' + data.goToPage,
+				});
+
+			}
+			
+			place.init(data.pageData);
+			
+		} else {
+
+			console.warn('No page found for', data);
+
+			if(data.errorFetchingPage?.code){
+
+				ui.statusPage(data.errorFetchingPage?.code).appendTo($app);
+
+			} else {
+
+				ui.statusPage(401).appendTo($app);
+
+			}
+
+
+		}
+
+		
+	} else {
+
+		if(home && typeof home === 'function'){
+
+			home({
+				$app,
+				data,
+				$main 
+			});
+
+		}
+
+	}
+
+
+	setTimeout(function(){
+
+		app.initialScroll();
+
+	}, 10);
+
+
+}

package/tests/fixtures/site-and-components/components/app/vanilla/_.css

@@ -0,0 +1 @@
+/* nothing */

package/tests/fixtures/site-and-components/components/app/vanilla/index.js

@@ -0,0 +1,27 @@
+import ui from '#ui';
+
+export default ({
+	replaceApp = true
+} = {}) => {
+
+	let $app;
+
+	if (replaceApp) {
+
+		$app = $('#app');
+		$app.empty().addClass('awesomeness-app-simple');
+	
+	} else {
+
+		$app = $('<div class="awesomeness-app-simple"></div>');
+
+	}
+
+	const themeProps = ui.theme();
+
+	$app.addClass(themeProps.surface.base);
+	$('body').addClass(themeProps.surface.base);
+	
+	return $app;
+
+};

package/tests/fixtures/site-and-components/components/card/index.js

@@ -0,0 +1,88 @@
+export default function card() {
+
+	const $card = ui.cardMain();
+	const mountRef = ui.cardMount.mount();
+	
+	const items = [
+		{
+			id: "itm-1",
+			title: "First",
+			score: 11 
+		},
+		{
+			id: "itm-2",
+			title: "Second",
+			score: 27 
+		},
+		{
+			id: "itm-3",
+			title: "Third",
+			score: 42 
+		},
+		{
+			id: "itm-4",
+			title: "Fourth",
+			score: 31 
+		},
+		{
+			id: "itm-5",
+			title: "Fifth",
+			score: 18 
+		},
+		{
+			id: "itm-6",
+			title: "Sixth",
+			score: 54 
+		},
+		{
+			id: "itm-7",
+			title: "Seventh",
+			score: 39 
+		},
+		{
+			id: "itm-8",
+			title: "Eighth",
+			score: 23 
+		},
+	];
+
+	const grouped = items.reduce((acc, item) => {
+
+		const bucket = item.score >= 40 ? "high" : item.score >= 25 ? "medium" : "low";
+
+		acc[bucket] = acc[bucket] || [];
+		acc[bucket].push(item);
+
+		return acc;
+	
+	}, {});
+
+	const sorted = [ ...items ].sort((a, b) => b.score - a.score);
+	const topThree = sorted.slice(0, 3);
+
+	const details = {
+		count: items.length,
+		topThree,
+		grouped,
+		mountRef,
+		signature: `${topThree.map((item) => item.id).join("|")}:${items.length}`,
+	};
+
+	if (details.count > 5) {
+
+		ui.cardMain();
+	
+	}
+
+	if (details.topThree.length === 3) {
+
+		ui.cardMount.mount();
+	
+	}
+
+	return {
+		$card,
+		details,
+	};
+
+}

package/tests/fixtures/site-and-components/components/cardMain/index.js

@@ -0,0 +1,86 @@
+export default function() {
+
+	const items = [
+		{
+			id: "itm-1",
+			title: "First",
+			score: 11 
+		},
+		{
+			id: "itm-2",
+			title: "Second",
+			score: 27 
+		},
+		{
+			id: "itm-3",
+			title: "Third",
+			score: 42 
+		},
+		{
+			id: "itm-4",
+			title: "Fourth",
+			score: 31 
+		},
+		{
+			id: "itm-5",
+			title: "Fifth",
+			score: 18 
+		},
+		{
+			id: "itm-6",
+			title: "Sixth",
+			score: 54 
+		},
+		{
+			id: "itm-7",
+			title: "Seventh",
+			score: 39 
+		},
+		{
+			id: "itm-8",
+			title: "Eighth",
+			score: 23 
+		},
+	];
+
+	const grouped = items.reduce((acc, item) => {
+
+		const bucket = item.score >= 40 ? "high" : item.score >= 25 ? "medium" : "low";
+
+		acc[bucket] = acc[bucket] || [];
+		acc[bucket].push(item);
+
+		return acc;
+	
+	}, {});
+
+	const sorted = [ ...items ].sort((a, b) => b.score - a.score);
+	const topThree = sorted.slice(0, 3);
+
+	const details = {
+		count: items.length,
+		topThree,
+		grouped,
+		mountRef,
+		signature: `${topThree.map((item) => item.id).join("|")}:${items.length}`,
+	};
+
+	if (details.count > 5) {
+
+		ui.cardMain();
+	
+	}
+
+	if (details.topThree.length === 3) {
+
+		ui.cardMount.mount();
+	
+	}
+
+	return {
+		$card,
+		details,
+	};
+
+
+}