@awesomeness-js/server 1.0.2 → 1.1.0

package/example-site/example.awesomenessjs.com/pages/blog/js/init.js

@@ -0,0 +1,242 @@
+import ui from '#ui';
+
+app.pages.wisdom.init = (data) => {
+
+	if(data){
+
+		app.pages.wisdom.data = data; 
+
+	} 
+
+	ui.cleanMain();
+
+	if(data.tag){
+
+		app.pages.wisdom.tag(data.tag);
+		
+		return;
+	
+	}
+
+
+	const $introContainer = $(`<div class="grid center p30"></div>`).appendTo(app.$main);
+	const $intro = $(`<div class="max-width-800"></div>`).appendTo($introContainer);
+
+	const $title = $(`<h1 class="mtb50 text-center mb10">I know <em>some</em> stuff...</h1>`).appendTo($intro);
+	const $subtitle = $(`<p class="text-xl ptb20">
+			... but, I'm not <b><u>the</u> expert</b> on anything;
+			I try to cite people smarter than me whenever possible. 
+			I have a degree in Aeronautical 
+	</p>`).appendTo($intro);
+
+	const $readMore = $(`<a class="link">... read more</a>`).appendTo($subtitle).click(()=>{
+
+		$readMore.remove();
+
+		$(`<span>
+			Science with Minors in Business and Law and MBA with a specialization in Finance,
+			but honestly most of what I know I've learned from experience,
+			making dumb mistakes, asking questions and learning from people 
+			<a class="link text-600" href="/shout-outs">smarter than me</a>.
+			<br/><br/>
+			Being a pilot for example — 
+			I'm a certified flight instructor and used to fly private jets — 
+			you don't need a degree to fly a plane,
+			but you do need to learn a lot of stuff to do it safely.
+			But legally, and in all reality, you learn from other pilots (instructors)
+			who may or may not have any degree and straight up just know how to fly.
+			<br/><br/>
+			One thing I learned after spending $230,0000 on my education is that
+			<a class="link" href="/do-I-need-college">you don't need a degree</a> to be "successful" or become an expert in something.
+			<br/><br/>
+			Most of the things I know, 
+			I can point your to 
+			<a class="link" href="/shout-outs">YouTube videos</a>, 
+			<a class="link" href="/shout-outs">podcasts</a> and 
+			<a class="link" href="/library">books</a>
+			that will teach better than your would-be professor.
+			<em>Most "good" professors have their own YouTube channels or podcasts anyway</em>.
+			<br/><br/>
+			I hope this site eventually becomes a resource like that.
+			<br/><br/>
+			I'm not 100% anti-college, but I'm 100% have an specific goal,
+			like networking, or becoming a Rocket Scientist, or Doctor, etc.
+			in mind before spending a penny.
+			<br/><br/>
+			All that said, <b>I've learned a few things</b> over the years that I think are worth sharing.
+			Most of what I write about are things people ask me about frequently, 
+			things I wish I knew when I was starting out,
+			or <b>important lessons I want my kids to know</b> when they grow up.
+			<br/><br/>
+		</span>`).appendTo($subtitle);
+
+	
+	});
+
+	
+
+	const $categories = $('<div class="mt50 plr35"></div>').appendTo(app.$main);
+	const $catHeader = $('<h2 class="mb15">Browse by Popular Topics</h2>').appendTo($categories);
+
+	const $catList = $('<div class=""></div>').appendTo($categories);
+
+	const tagsWithImages = [ ... data.tags ].filter((tag) =>{
+
+		return tag.image ?? false;
+
+	});
+
+	tagsWithImages.push({
+		name: "All Posts",
+		image: "/tools/images/tags/all.webp",
+		count: data.posts.length
+	});
+
+	tagsWithImages.sort((a, b) => b.count - a.count);
+
+	console.log(tagsWithImages);
+
+	// floating-box
+	const $carousel = ui.carousel({
+		items: tagsWithImages,
+		print: (item, index) => {
+
+			const $topic = $(`<div class="blog-topic cursor-pointer"></div>`);
+						
+			const $image = $(`<div class="blog-topic-image"></div>`)
+				.appendTo($topic)
+				.css({
+					'background-image': `url(${item.image})`
+				});
+
+			const $words = $(`<div class="p20"></div>`).appendTo($topic);
+
+			const $title = $(`<div class="text-500 text-m text-natural-700"><span>${item.name}</span></div>`).appendTo($words);
+			const $count = $(`<span class="text-300 text-s text-natural-400 ml10">(${item.count})</span>`).appendTo($title);
+
+			$topic.click(() => {
+
+				if(item.name === 'All Posts'){
+
+					$list.trigger('search', '');
+					
+				} else {
+
+					$list.trigger('search', 'category: ' + item.name);
+
+				}
+
+			
+			});
+
+			return $topic;
+
+		}
+	}).appendTo($catList);
+
+
+	// post 1
+	const $mainPostContainer = $(`<div class="ptb50 max-width-1200 width100 justify-self-center"></div>`).appendTo(app.$main);
+
+
+	ui.posts.preview2(data.posts[0]).click((e)=>{
+
+		e.preventDefault();
+		e.stopPropagation();
+
+		app.page(data.posts[0].url);
+			
+	}).appendTo($mainPostContainer);
+
+
+	const $top = $(`<div class="p40"></div>`).appendTo(app.$main);
+
+	const $categoryCloud = ui.categoryCloud({
+		data: data.tags,
+		limit: 20,
+		search: data.tags.length > 20,
+		colorMap: app.pages.wisdom.colors,
+		callback: (name) => {
+
+			$list.trigger('search', 'category: ' + name);
+        
+		}
+	}).appendTo($top);
+
+
+
+	const $mainPosts = $('<div class="plr20-p plr40 max-width-1200 width100 justify-self-center"></div>').appendTo(app.$main);
+			
+
+	
+	ui.posts.preLoadImages(data.posts);	
+
+
+	const $list = ui.list({
+		data: data.posts,
+		autoLoad: true,
+		listClass: 'grid-1 gap-25 gap-50-d gap-100-xl',
+		searchInputClass: 'text-xl',
+		placeholder: 'Search posts by title, subtitle, or tag...',
+		animationStyle: 'rotateIn',
+		searchCallback: (val) => {
+
+			// scroll to $list
+			$list[0].scrollIntoView({ behavior: 'smooth' });
+
+		},
+		searchFn: ({
+			item: post, 
+			val 
+		}) => {
+
+
+			if(!val){
+
+				return true; 
+
+			}
+
+
+			const v = String((val ?? '')).toLowerCase().trim();
+
+			const isCategory = v.startsWith('category: ');
+
+			if(isCategory){
+
+				const categorySearch = v.slice(9).trim(); // remove 'category: '
+
+				const winner = !!categorySearch
+				&& Array.isArray(post.tags)
+				&& post.tags.some((tag) => String(tag).toLowerCase().trim().includes(categorySearch));
+
+				return winner;
+
+			}
+
+			return (
+				post.title.toLowerCase().includes(v) ||
+				(post.subtitle && post.subtitle.toLowerCase().includes(v)) ||
+				post.tags.some((tag) => String(tag).toLowerCase().trim().includes(v))
+			);
+		
+		},
+		printFn: (post) => {
+
+			return ui.posts.preview2(post).click((e) => {
+
+				e.preventDefault();
+				e.stopPropagation();
+
+				app.page(post.url);
+			
+			});
+		
+		},
+		limit: 3
+	}).appendTo($mainPosts).addClass('pt80');
+			
+
+
+
+};

package/example-site/example.awesomenessjs.com/pages/blog/js/tag.js

@@ -0,0 +1,111 @@
+import ui from '#ui';
+
+app.pages.wisdom.tag = (tag) => {
+
+	ui.cleanMain();
+
+	const tagWord = tag.replaceAll('-', ' ');
+
+	// capitalize first letter of each word
+	const tagTitle = tagWord.replace(/\b\w/g, (c) => c.toUpperCase());
+
+	// state management
+	app.state.create({
+		title: `Wisdom | ${tagTitle}`,
+		url: `/wisdom/${tag}`,
+	});
+
+	ui.breadcrumbs({
+		data: [
+			{ '/wisdom': 'Wisdom' },
+			{ [`/wisdom/${tag}`]: tagTitle }
+		],
+		color: 'cyan',
+		callback:(item)=>{
+
+			app.page(item.url);
+		
+		}
+	}).appendTo(app.$main);
+
+	const $mainPosts = $(`<div class="p20-p p40 w100 max-width-1200 m0a"></div>`)
+		.appendTo(app.$main);
+
+	const { data } = app.pages.wisdom;
+
+	const limitedData = data.posts.filter((post) => {
+
+		return Array.isArray(post.tags)
+			&& post.tags.some((tagItem) => String(tagItem).toLowerCase().trim() === tagWord.toLowerCase().trim());
+	
+	});
+
+	const $top = $('<div class="mt20 mb70 text-center"></div>').appendTo($mainPosts);
+
+	$(`<h1>${tagTitle}</h1>`).appendTo($top);
+	$(`<h2 class="mb20">${limitedData.length} posts</h2>`).appendTo($top);
+
+	const $list = ui.list({
+		data: limitedData,
+		autoLoad: true,
+		listClass: ' grid-1 gap-100',
+		searchInputClass: 'mb40 text-xl',
+		placeholder: `Search ${tagWord}`,
+		animationStyle: 'rotateIn',
+		searchFn: ({
+			item: post, 
+			val 
+		}) => {
+	
+			if(!val){
+	
+				return true; 
+	
+			}
+	
+			const v = String((val ?? '')).toLowerCase().trim();
+	
+			const isCategory = v.startsWith('category: ');
+	
+			if(isCategory){
+	
+				const categorySearch = v.slice(9).trim(); // remove 'category: '
+	
+				const winner = !!categorySearch
+					&& Array.isArray(post.tags)
+					&& post.tags.some((tag) => String(tag).toLowerCase().trim().includes(categorySearch));
+	
+				return winner;
+	
+			}
+	
+			return (
+				post.title.toLowerCase().includes(v) ||
+					(post.subtitle && post.subtitle.toLowerCase().includes(v)) ||
+					post.tags.some((tag) => String(tag).toLowerCase().trim().includes(v))
+			);
+			
+		},
+		printFn: (post) => {
+	
+			return ui.posts.preview2(post).click(()=>{
+	
+				app.page(post.url);
+				
+			});
+			
+		},
+		limit: 3
+	}).appendTo($mainPosts);
+
+	ui.posts.preLoadImages(limitedData);	
+
+
+	limitedData.forEach((post) => {
+
+		post.style = 'header-image';
+		post.image = post.image;
+	
+	});
+
+};

package/example-site/example.awesomenessjs.com/pages/examples/_info.js

@@ -0,0 +1,9 @@
+export default {
+	version: 1,
+	name: '',
+	description: '',
+	permissions: [ '*' ],
+	components: [
+		"bannerCallToAction"
+	]
+};

package/example-site/example.awesomenessjs.com/pages/examples/css/footer.css

@@ -0,0 +1,6 @@
+.footer {
+	width: 100%;
+	background-color: #000;
+	min-height: 420px;
+	color: #fff
+}

package/example-site/example.awesomenessjs.com/pages/examples/css/intro.css

@@ -0,0 +1,67 @@
+.introPage{
+  background-image: url('/tools/images/awesomeness.webp');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 50% 50%;
+}
+
+.landing-area {
+  overflow: auto;
+  position: relative;
+  width: 40%;
+  text-align: center;
+  color: #fff;
+}
+
+.app-size-xl .landing-area { width: 60%; }
+.app-size-d .landing-area { width: 60%; }
+.app-size-t .landing-area { width: 70%; }
+.app-size-p .landing-area { width: 95%; }
+
+.landing-area h1{
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.landing-area h2{
+  margin-bottom: 10px;
+  font-weight: 300;
+  font-size: 1.4em;
+  text-transform: capitalize;
+  color: #fff;
+}
+
+.landing-area button {
+  width: 46%;
+  margin: 2%;
+}
+
+.landing-area button i{
+  text-align: center;
+  font-size: 2em;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-bottom: 23px;
+  right:auto;
+}
+
+.landing-area .a-button {
+  background-color: #fff;
+  color: #13408d;
+}
+
+.landing-area .b-button {
+  background-color: #13408d;
+  color: #fff;
+}
+
+.divider{
+  width: 50%;
+  height: 1px;
+  display: block;
+  margin-left: 25%;
+  background-color: #fff;
+  margin: 19px 25%;
+}

package/example-site/example.awesomenessjs.com/pages/examples/css/nav.css

@@ -0,0 +1,221 @@
+.main-nav {
+  background-color: #010816;
+  overflow: auto;
+  z-index: 3;
+  position: absolute;
+  width: 100%;
+  top: 62px;
+}
+
+.main{
+    padding-top: 137px;
+}
+
+.nav-container {
+  background-color: #010816;
+  color: #fff;
+  opacity: 1;
+  position: fixed;
+  right: 0;
+  top: -63px;
+  transition: all 420ms;
+  width: 100%;
+  z-index: 3;
+}
+
+.nav-container.showExtra{
+  top:0px;
+}
+
+.nav-logo {
+  cursor: pointer;
+  float: left;
+  font-size: 2em;
+  font-weight: 600;
+  height: 75px;
+  padding-top: 15px;
+  text-align: center;
+  width: 300px;
+}
+
+.nav-list {
+  float: right;
+  height: 75px;
+  margin: 0px;
+  padding: 25px 45px 25px 0px;
+}
+
+.app-size-p .nav-list,
+.app-size-t .nav-list{
+  width: 100%;
+  height: inherit;
+  padding-top: 0px;
+  display: none;
+}
+.app-size-p .nav-list.active,
+.app-size-t .nav-list.active{
+  display: block;
+}
+
+
+.app-size-p .nav-list li,
+.app-size-t .nav-list li{
+  width: 100%;
+  height: inherit;
+  text-align: right;
+  padding: 10px;
+}
+
+
+.nav-list li {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-bottom: solid 1px #00000000;
+  cursor: pointer;
+  display: block;
+  float: left;
+  font-size: 1.3em;
+  font-weight: 300;
+  margin-left: 30px;
+  padding-bottom: 3px;
+  transition: all 420ms;
+  position: relative;
+}
+
+.nav-list li:hover,
+.nav-sub-list li:hover,
+.nav-button:hover,
+.nav-logo:hover{
+  color:#ffab55;
+}
+
+.app-size-xl .nav-list li.active,
+.app-size-d .nav-list li.active{
+  border-bottom: solid 1px #0858e1;
+}
+
+.app-size-t .nav-list li,
+.app-size-p .nav-list li{
+  padding-right:45px;
+}
+
+.nav-button {
+  cursor: pointer;
+  float: right;
+  height: 75px;
+  padding: 19px 12px 19px 0px;
+  text-align: center;
+  width: 60px;
+  display: none;
+  font-size: 2.3em;
+}
+
+.app-size-p .nav-button,
+.app-size-t .nav-button{
+  display: block;
+}
+
+
+.nav-top {
+  position: absolute;
+  z-index: 3;
+  top: 0px;
+  width:100%;
+  display: block;
+  overflow: auto;
+  font-size: .85em;
+  padding: 13px 32px 13px 0px;
+  background-color: #0858e1;
+}
+
+.app-size-p .nav-top,
+.app-size-p .nav-call-to-action {
+  padding-right: 15px;
+}
+.app-size-p .nav-action{
+  padding-left: 15px;
+}
+
+
+.nav-action{
+  float: right;
+  background-color: #d92c2c;
+  padding: 10px 40px 10px 25px;
+  position: relative;
+  cursor: pointer;
+  transition: all 420ms;
+}
+.nav-action:hover{
+  background-color:#053587;
+}
+
+.nav-action i {
+    font-size: 1em;
+    float: right;
+    position: absolute;
+    top: 12px;
+    right: 13px;
+}
+.nav-call-to-action{
+  float: right;
+  padding: 10px 25px 10px 0px;
+}
+
+.nav-sub-list{
+  transition: all 420ms;
+  display: block;
+  width: 100%;
+  overflow: auto;
+  background-color:#182a4d;
+  margin-bottom: 0px;
+  top: 0px;
+  position: absolute;
+  padding-right: 10px;
+}
+
+.nav-sub-list li{
+  cursor: pointer;
+  z-index: 0;
+  transition: all 420ms;
+  display: inline-block;
+  overflow: auto;
+  background-color: #182a4d;
+  float: left;
+  padding: 20px 22px;
+}
+
+.nav-sub-list.active{
+  top: 120px;
+}
+
+.app-size-t .nav-sub-list,
+.app-size-p .nav-sub-list{
+  top: -235px;
+}
+
+.app-size-t .nav-sub-list li,
+.app-size-p .nav-sub-list li{
+  padding-right: 50px;
+  text-align: right;
+  width: 100%;
+}
+
+.app-size-p .nav-sub-list.active,
+.app-size-t .nav-sub-list.active{
+  top: 415px;
+}
+
+.app-size-p .nav-list li i,
+.app-size-t .nav-list li i {
+  position: absolute;
+  right: 4px;
+  top: 14px;
+}
+
+.nav-list li i {
+  position: relative;
+}

package/example-site/example.awesomenessjs.com/pages/examples/getData.js

@@ -0,0 +1,8 @@
+export default async function start(awesomenessRequest){
+
+	return {
+		yupp: 'were here',
+		v2: true
+	};
+
+}

package/example-site/example.awesomenessjs.com/pages/examples/js/init.js

@@ -0,0 +1,15 @@
+app.pages.examples.init = function(data, options){
+
+	app.pages.examples.updateState();
+
+	const $app = $('#app');
+
+	$app.empty();
+
+	console.log('here');
+
+	let $page = $('<div id="page-examples"></div>')
+		.appendTo($app);
+
+
+};

package/example-site/example.awesomenessjs.com/pages/examples/js/updateState.js

@@ -0,0 +1,14 @@
+app.pages.examples.updateState = function(){
+
+	// set initial
+	history.replaceState(0,'Awesomeness PWA', '/examples');
+	document.title = 'Awesomeness | Vanilla JS to build PWAs';
+
+	var startData = {};
+
+	startData.title = 'Awesomeness | Vanilla JS to build PWA';
+	startData.url = '/examples';
+
+	app.state.state[0] = startData;
+
+};

package/example-site/example.awesomenessjs.com/pages/start/_info.js

@@ -0,0 +1,11 @@
+export default {
+	version: 1,
+	name: '',
+	description: '',
+	permissions: [ '*' ],
+	components: [
+		"onResize",
+		"_example",
+		"notCommonExample"
+	]
+};

package/example-site/example.awesomenessjs.com/pages/start/css/footer.css

@@ -0,0 +1,6 @@
+.footer {
+	width: 100%;
+	background-color: #000;
+	min-height: 420px;
+	color: #fff
+}