@awesomeness-js/server 1.0.1 → 1.1.0

package/ui/commonComponent.test.js

@@ -0,0 +1,27 @@
+import componentDependencies from '../src/componentDependencies.js';
+import { expect, test } from 'vitest';
+
+test('component test', () => {
+ 
+	const test = componentDependencies([ '_example' ],{
+		showDetails: true
+	});
+
+	expect(test._example.js).toBeDefined();
+	expect(test._example.js).toContain('ui._example');
+	expect(test._example.css).toBeDefined();
+	expect(test._example.js_details).toBeDefined();
+	expect(test._example.css_details).toBeDefined();
+
+	const test2 = componentDependencies([ 'notCommonExample' ],{
+		showDetails: false,
+		customLocation: `./sites/demo.awesomenessjs.com/components`,
+	});
+
+	expect(test2.notCommonExample.js).toBeDefined();
+	expect(test2.notCommonExample.js).toContain('ui.notCommonExample');
+	expect(test2.notCommonExample.css).toBeDefined();
+	expect(test2.notCommonExample.js_details).toBeUndefined();
+	expect(test2.notCommonExample.css_details).toBeUndefined();
+
+});

package/ui/components/blogPost/all.css

@@ -0,0 +1,371 @@
+.blogPost {
+  display: grid;
+  grid-template-columns: 1fr;      /* single column */
+  justify-items: stretch;          /* <— critical */
+  align-items: stretch;            /* optional */
+  width: 100%;
+  margin-inline: auto;             /* center the 800px box */
+  min-width: 0;                    /* avoid overflow issues */
+}
+
+.blogPost h2 {
+	text-transform: inherit;
+	font-size: 1.5em;
+	margin-top: 50px;
+}
+
+.blogPost .break {
+	width: 100%;
+	display: block;
+}
+
+
+.blogPost h3 {
+	font-weight: 300;
+	text-transform: inherit;
+	letter-spacing: 1.3px;
+	text-align: left;
+	color: #777;
+	margin-top: 0px;
+	font-size: 1.1em;
+	margin-bottom: 20px;
+}
+
+.blogPost p {
+	font-size: 1.2em;
+	line-height: 2em;
+	color: #404040;
+}
+
+.blogPost blockquote {
+	background-color: #e6e6e6;
+	margin: 0;
+	padding: 15px 25px;
+	color: #343434;
+	border-radius: 10px;
+}
+
+
+.blogPost blockquote p {
+	font-size: 1.1em;
+	line-height: 1.8 em;
+	margin: 5px;
+}
+
+.blogPost a {
+	color: #0a99ff;
+	text-decoration: none;
+	font-weight: 500;
+	cursor: pointer;
+}
+
+.blogPost a:hover {
+	text-decoration: underline;
+}
+
+.blogPost table {
+	width: 100%;
+	border-collapse: collapse;
+	margin: 25px 0;
+	font-size: 1em;
+	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+.blogPost tr {
+	margin-bottom: 15px;
+}
+
+.blogPost th {
+	text-align: left;
+	padding: 13px 15px;
+	background-color: #dedede;
+	color: #333;
+	font-weight: 600;
+}
+
+.blogPost th:first-child {
+	border-top-left-radius: 6px;
+}
+
+.blogPost th:last-child {
+	border-top-right-radius: 6px;
+}
+
+.blogPost td {
+	padding: 13px 15px;
+	border-bottom: 1px solid #e6e6e6;
+	color: #555;
+	font-weight: 400;
+}
+
+.blogPost ol,
+.blogPost ul {
+	margin: 20px 0;
+	padding-left: 1.5em;
+	font-size: 1em;
+	color: #555;
+	line-height: 1.6;
+}
+
+/* Ordered list numbers */
+.blogPost ol {
+	list-style-type: decimal;
+}
+
+/* Unordered list bullets */
+.blogPost ul {
+	list-style-type: disc;
+}
+
+/* List items */
+.blogPost li {
+	margin-bottom: 8px;
+}
+
+/* List items */
+.blogPost ul li ul {
+	margin-top: 5px;
+}
+
+/* List items */
+.blogPost ul li ul li {
+	margin-bottom: 8px;
+	list-style: circle;
+	font-size: 0.9em;
+	margin-top: 0px;
+}
+
+/* Nested lists get lighter style */
+.blogPost ol ol,
+.blogPost ul ul {
+	margin: 20px 0;
+	font-size: 1em;
+	color: #555;
+	line-height: 1.6;
+	font-size: 1.1em;
+	padding-left: 30px;
+}
+
+.blogPost ol li::marker {
+	font-weight: 600;
+	/* optional: make numbers bolder */
+	padding-right: 10px;
+	/* adds space after number */
+}
+
+.blogPost-header-image {
+    position: relative;
+    min-height: 500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    color: var(--white);
+    background-size: cover;
+    background-position: center;
+    overflow: hidden; /* ensures overlay stays contained */
+	padding-bottom: 5%;
+	margin-bottom: 25px;
+	min-height: 700px;
+}
+
+.app-size-p .blogPost-header-image { min-height: 400px; }
+
+.app-size-d .blogPost-header-image { min-height: 800px; }
+.app-size-xl .blogPost-header-image { min-height: 800px; }
+
+.blogPost-header-image::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+   background: linear-gradient(
+        rgba(0, 0, 0, 0.0) 0%,
+        rgba(0, 0, 0, 0.4) 35%,
+        rgba(0, 0, 0, 0.4) 65%,   
+        rgba(0, 0, 0, 0.0) 100%     
+    );
+    z-index: 0;
+}
+
+
+.blogPost-header-image > * {
+    position: relative;
+    z-index: 1; /* keeps text above the dark overlay */
+}
+
+.blogPost-title{
+	font-weight: 700;
+	font-size: 3em;
+	margin-bottom: 10px;
+	padding: 0px 50px;
+}
+
+.blogPost-subTitle{
+	font-weight: 300;
+	font-size: 1.6em;
+	margin-bottom: 15px;
+	text-transform: none;
+	color: var(--white);
+	padding: 0px 50px;
+}
+
+.app-size-p .blogPost-subTitle{
+	font-size: 1.2em;
+}
+
+
+.blogPost-catDateTime {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    font-size: 1.05em;
+    color: var(--stone-100);
+    margin-bottom: 20px;
+    letter-spacing: 1px;
+}
+
+.blogPost-catDateTime > * {
+	display: inline;
+}
+
+.blogPost-category {
+	cursor: pointer;
+	text-transform: capitalize;
+}
+
+.app-size-p .blogPost-catDateTime {
+	flex-direction: column;
+	margin-top: 45px;
+}
+
+
+.app-size-p .blogPost-catDateTime > * {
+	display: flex;
+}
+
+.blogPost-category:hover {
+	font-weight: 500;
+}
+
+.blogPost-catDateTime-separator {
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	background-color: var(--stone-100);
+	flex-shrink: 0;
+	margin: 0px 5px;
+}
+
+.app-size-p .blogPost-catDateTime-separator {
+	display: none;
+}
+
+.blogPost-author {
+	display: flex;
+	align-items: center; /* vertically centers image and text */
+	gap: 10px; /* replaces margin-right for cleaner spacing */
+	font-size: 1em;
+	color: var(--white);
+	font-weight: 300;
+	margin-top: 25px;
+	padding-bottom: 40px;
+}
+
+.app-size-p .blogPost-author {
+	flex-direction: column;
+	padding-bottom: 100px;
+}
+
+.app-size-p .blogPost-author-name  {
+    display: block;
+    margin-bottom: 10px;
+}
+
+.blogPost-author-name {
+    font-weight: 500;
+    margin-right: 10px;
+    font-size: 1.1em;
+    letter-spacing: 0.03em;
+}
+.blogPost-author-image {
+	margin-right: 10px;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	background-color: var(--white);
+	background-size: cover;
+	background-position: center;
+	flex-shrink: 0; /* keeps it from squishing */
+}
+
+.blogPost-next-reads h2,
+.blogPost-next-reads h3 {
+    margin-bottom: 10px;
+}
+
+.blogPost-next-reads li {
+    border: solid 1px var(--stone-200);
+    border-radius: 5px;
+	cursor: pointer;
+}
+
+.blogPost-next-reads li:hover {
+	background-color: var(--blue-100);
+	border-color: var(--blue-300);
+	font-weight: 500;
+}
+
+.blogPost-next-reads li a {
+	font-weight: 400;
+	display: block;
+    padding: 10px;
+}
+
+.blogPost-next-reads li a:hover,
+.blogPost-tags-list .blogPost-tag:hover a {
+	text-decoration: none;
+}
+
+.blogPost-next-reads ul {
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+}
+
+
+.blogPost-tags-list {
+    position: absolute;
+    bottom: 25px;
+    font-size: 0.8em;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-wrap: wrap;
+	justify-content: center;
+	padding: 0px 20px;
+}
+
+.blogPost-tag {
+    border: solid 1px var(--stone-200);
+    cursor: pointer;
+    padding: 5px 10px;
+	white-space: nowrap;
+	transition: all 200ms;
+}
+
+.blogPost-tag:hover {
+	color: var(--black);
+	background-color: var(--white);
+}
+
+.blogPost img {
+	max-width: 100%;
+	min-width: 100%;
+	border-radius: 8px;
+	margin: 20px 0px;
+}

package/ui/components/blogPost/headerImage.js

@@ -0,0 +1,153 @@
+// awesomeness import 'tag'
+
+export default ({
+	mdContent,
+	metadata,
+	tagBase = '/tag'
+}) => {
+
+	const $headerImage = $(`<div class="blogPost-header-image"></div>`)
+		.css({ 'background-image': `url(${metadata.image})` });
+
+
+	const $catDateTime = $(`<div class="blogPost-catDateTime"></div>`)
+		.appendTo($headerImage);
+
+
+	if(!metadata.category && metadata?.tags.length > 0){
+
+		metadata.category = metadata.tags[0];
+	
+	}
+
+	if(metadata.category){
+
+		$(`<a href="${tagBase}/${metadata.category}"><div class="blogPost-category">${metadata.category}</div></a>`)
+			.appendTo($catDateTime);
+
+		// add •
+		$(`<div class="blogPost-catDateTime-separator"></div>`)
+			.appendTo($catDateTime);
+	
+	}
+
+	if(metadata.published){
+
+		// make EST default
+
+		let tz = metadata.timezone || 'America/New_York';
+
+		const [ y, m, d ] = metadata.published.split('-').map(Number);
+
+		// Create date in local time (NOT UTC)
+		const date = new Date(y, m - 1, d);
+
+		const options = {
+			year: 'numeric',
+			month: app && app.size && app.size.view !== 'p' ? 'long' : 'short',
+			day: 'numeric',
+			timeZone: tz
+		};
+
+		const formattedDate = date.toLocaleDateString(undefined, options);
+
+		$(`<div class="blogPost-published">${formattedDate}</div>`)
+			.appendTo($catDateTime);
+
+		
+		// add •
+		$(`<div class="blogPost-catDateTime-separator"></div>`)
+			.appendTo($catDateTime);
+	
+	}
+
+	if(!metadata.readTime && mdContent){
+	
+		const wordsPerMinute = 200;
+		const words = mdContent.trim().split(/\s+/).length;
+		const readTime = Math.ceil(words / wordsPerMinute);
+
+		metadata.readTime = readTime;
+
+	}
+
+	if(metadata.readTime){
+
+		$(`<div class="blogPost-readTime"><i class="ico-clock"></i> ${metadata.readTime} min read</div>`)
+			.appendTo($catDateTime);
+	
+	} else {
+
+		console.warn('Read time could not be calculated for blog post:', {
+			metadata,
+			mdContent
+		});
+
+	}
+	
+
+	const $title = $(`<h1 class="blogPost-title"><a target="_blank" href="${metadata.url}">${metadata.title}</a></h1>`)
+		.appendTo($headerImage);
+
+	if(metadata.subTitle){
+
+		$(`<h2 class="blogPost-subTitle">${metadata.subTitle}</h2>`)
+			.appendTo($headerImage);
+		
+	}
+
+
+	if(metadata.author){
+
+		let image;
+
+		let authorName = metadata.author.url ? `<a class="blogPost-author-name" href="${metadata.author.url}" target="_blank" rel="noopener">${metadata.author.name}</a>` : metadata.author.name;
+
+		if(metadata.author.title){
+
+			authorName += `${metadata.author.title}`;
+		
+		}
+
+
+		const $author = $(`<div class="blogPost-author"><span>${authorName}</span></div>`)
+			.appendTo($headerImage);
+
+		if(metadata.author.image){
+
+			image = $(`<div class="blogPost-author-image"></div>`)
+				.css({ 'background-image': `url(${metadata.author.image})` })
+				.prependTo($author);
+				
+		
+		}
+
+	}
+
+
+	if(metadata.tags){
+
+		const $tagsList = $(`<div class="blogPost-tags-list"></div>`)
+			.appendTo($headerImage);
+
+		metadata?.tags?.forEach((tag) => {
+
+			const link = ui.tag.category(tag);
+
+			const $tag = $(`<a href="${tagBase}/${link}"><div class="blogPost-tag ${metadata.tagColor ? metadata.tagColor : ''}">${tag}</div></a>`)
+				.appendTo($tagsList)
+				.on('click', (e) => {
+
+					e.stopPropagation();
+					e.preventDefault();
+					app.page(`${tagBase}/${link}`);
+
+				});
+
+		});
+
+	}
+
+	return $headerImage;
+
+};

package/ui/components/blogPost/index.js

@@ -0,0 +1,45 @@
+export default (post) => {
+
+	let $out = $('<div class="blogPost"></div>');
+
+	if(!post || !post.sections){
+
+		$out.html('hmmm.... something is wrong with this post');
+		
+		return $out;
+	
+	}
+
+	post.sections.forEach((section) => {
+
+		if(
+			typeof ui.blogPost[section.type] !== 'function'
+			&& !typeof section.custom === 'function'
+		){
+
+			console.log(`blogPost section type "${section.type}" not found (not custom either...)`, section);
+
+			return;
+
+		}
+
+		const $sectionContainer = $(`<div class="blogPost-section"></div>`)
+			.appendTo($out);
+
+		const $sectionContent = ui.blogPost[section.type](section.data);
+
+		if(!$sectionContent){
+
+			console.log(`blogPost section type "${section.type}" returned no content`, section);
+
+			return;
+
+		}
+
+		$sectionContent.appendTo($sectionContainer);
+
+	});
+
+	return $out;
+
+};