@awesomeness-js/server 1.1.7 → 1.1.9

package/ui/awesomeness-ui.instructions.md

@@ -1,156 +0,0 @@
----
-name: "Awesomeness UI HTML Instructions"
-description: "Instructions for generating HTML using the Awesomeness UI utility-first CSS system."
-applyTo: "awesomeness-ui/components/**/*.js"
----
-# HTML Generation with Custom Utility Classes
-
-You are generating HTML using a custom utility-first CSS system (similar to Tailwind CSS). The system provides classes for layout, spacing, positioning, text, alignment, and responsive design.
-
----
-
-## 📦 General Guidelines
-
-- **Class Structure:** Use utility classes directly in `class` attributes. Do **not** write raw CSS or `<style>` tags.
-- **Responsiveness:** Wrap responsive styles in containers with `.app-size-{size}`:
-  - `xl` = extra-large
-  - `d` = desktop
-  - `t` = tablet
-  - `p` = phone
-
----
-
-## 🧱 Utility Class Reference (Quick)
-
-### ✅ Grid & Layout
-- `.grid`, `.grid-{n}`, `.grid-rows-{n}`
-- `.span-{n}`, `.row-span-{n}`, `.start-{n}`, `.end-{n}`
-- `.gap-{px}`, `.gap-x-{px}`, `.gap-y-{px}`
-
-### ✅ Alignment
-- Justify: `.justify-center`, `.justify-between`, etc.
-- Align: `.align-start`, `.align-stretch`, etc.
-- Self: `.justify-self-center`, `.grid.center`, etc.
-
-### ✅ Spacing
-- Margin: `.m{px}`, `.mt{px}`, `.mlr{px}`, etc.
-- Padding: `.p{px}`, `.ptb{px}`, `.pr{px}`, etc.
-
-### ✅ Sizing
-- `.width{percent}`, `.height{percent}`
-- `.width-{px}`, `.max-height-{px}`, `.span{1-12}`
-
-### ✅ Text
-- Align: `.text-center`, `.text-right`
-- Weight: `.text-300`, `.text-900`
-- Size: `.text-xs`, `.text-xl`, `.text-xxxl`
-
-### ✅ Position
-- `.absolute`, `.relative`, `.sticky`, `.fl`, `.fr`
-
-### ✅ Responsive Variants
-All classes may have a `-{size}` variant scoped under `.app-size-{size}` container:
-```html
-<div class="app-size-p">
-  <div class="text-center-p p20-p">Mobile Friendly</div>
-</div>
-```
-
-
----
-## 🎨 Dynamic Color Utilities
-
-This system auto-generates utility classes for applying color styles using predefined CSS variables (`--colorName-shade`), supporting background, border, and text colors.
-
-### ✅ Class Patterns
-
-Each utility follows this pattern:
-
-```
-.{prefix}-{color}-{shade}
-.{prefix}-{color}-{shade}--hover:hover
-```
-
-Where:
-- `{prefix}` = `bg`, `border`, or `text`
-- `{color}` = one of the supported color names (see below)
-- `{shade}` = one of the supported shades (e.g., `100`, `500`, `950`)
-
-### ✨ Examples
-
-```html
-<div class="bg-blue-500 text-white border-blue-700">Primary</div>
-<div class="bg-gray-100--hover hoverable-box">Hover Me</div>
-```
-
-### 🎨 Available Color Names
-
-```
-red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky,
-blue, indigo, violet, purple, fuchsia, pink, rose,
-slate, gray, zinc, neutral, stone
-```
-
-### 🌗 Shades
-
-```
-50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
-```
-
-### 🖤 Black and White
-
-```html
-<div class="bg-black text-white border-white">Dark Card</div>
-```
-
-### 🧠 Notes
-
-- All colors use CSS variables, such as `--blue-500`, so you can theme or dark-mode easily.
-- `--hover` suffix variants enable hover state styling directly via class names.
-
-
-### Example Prompt
-
-Generate HTML for a responsive product grid. It should:
-
-Display as 4 cards per row on desktop, 2 per row on tablet, and 1 per row on phone
-
-Each card includes:
-
-Product image
-
-Title (bold, large text)
-
-Description (smaller gray text)
-
-Price (medium weight, prominent color)
-
-“Add to Cart” button with hover effect
-
-Apply appropriate spacing, alignment, and sizing
-
-### Example Response 
-
-```html
-<div class="grid grid-1-p grid-2-t grid-4-d gap-20 p40">
-  <!-- Card -->
-  <div class="bg-white border-gray-200 p20">
-    <img src="https://via.placeholder.com/300x200" class="width-100 mb10" alt="Product">
-    <div class="text-xl text-900 mb5">Product Title</div>
-    <div class="text-sm text-gray-600 mb10">Short product description goes here.</div>
-    <div class="text-md text-blue-700 text-500 mb15">$29.99</div>
-    <button class="bg-blue-500 text-white p10 bg-blue-600--hover">Add to Cart</button>
-  </div>
-
-  <!-- Repeat as needed -->
-  <div class="bg-white border-gray-200 p20">
-    <img src="https://via.placeholder.com/300x200" class="width-100 mb10" alt="Product">
-    <div class="text-xl text-900 mb5">Another Product</div>
-    <div class="text-sm text-gray-600 mb10">Another short description.</div>
-    <div class="text-md text-blue-700 text-500 mb15">$39.99</div>
-    <button class="bg-blue-500 text-white p10 bg-blue-600--hover">Add to Cart</button>
-  </div>
-
-  <!-- Add more cards as needed -->
-</div>
-```

package/ui/build.js

@@ -1,119 +0,0 @@
-import { writeFileSync, readFileSync } from 'fs';
-import { join } from 'path';
-import { build, getAllFiles, combineFiles } from '@awesomeness-js/utils';
-import { dynamicCSS } from './core/css/dynamic.js';
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-import cssnano from 'cssnano';
-import postcss from 'postcss';
-
-async function minifyCSS(cssString) {
-
-	try {
-
-		// Process the CSS using PostCSS and cssnano plugin
-		const result = await postcss([ cssnano ]).process(cssString, { from: undefined });
-
-		return result.css; // The minified CSS
-
-	} catch (error) {
-
-		console.error('Error minifying CSS:', error);
-		
-		return null;
-
-	}
-
-}
-
-
-async function buildUI(){
-	
-	const __filename = fileURLToPath(import.meta.url);
-	const __dirname = dirname(__filename);
-	const coreDir = join(__dirname, 'core');
-	
-
-	await build({
-		src: './awesomeness-ui/components',
-		dest: './ui-intellisense.js',
-		dts: false,
-		fileTypes: [ 'js' ],
-		ignore: [
-			'*.iif.js',
-			'*.jquery.js',
-			'*.jQuery.js',
-			'*.test.js',
-			'*.css',
-			'*.css.js'
-		]
-	});
-
-
-	const cssBuilds = getAllFiles('.', {
-		dir: './awesomeness-ui/components',
-		fileTypes: [
-			'css.js'
-		]
-	});
-
-
-	if(cssBuilds.length > 0){
-
-		await Promise.all(cssBuilds.map(async (file) => {
-
-			try {
-
-				const { cssBuild } = await import(`../${file}`);
-
-				await cssBuild();
-
-			} catch (e) {
-
-				console.error(`Error importing CSS build file: ${file}`, e);
-				
-				return;
-			
-			}
-
-		
-		}));
-
-	}
-
-
-	// must be done in order
-	let js = `
-/**
- * This file is auto-generated by Awesomeness UI build script.
- * It consolidates UI functions for use in the application.
- * Do not edit manually.
- */
-window.ui = {};
-
-`;
-
-	js += readFileSync(join(coreDir, 'js', 'jquery-3.7.1.min.js'), 'utf8');
-	js += "\n " + readFileSync(join(coreDir, 'js', 'app.js'), 'utf8');
-	js += "\n " + combineFiles(join(coreDir, 'js', 'app'), 'js');
-
-	writeFileSync(join(coreDir, 'public', 'app.js'), js);
-
-	let css = "";
-
-	css += combineFiles(join(coreDir, 'css'), 'css');
-
-	css += "\n";
-
-	// dynamic css
-	css += dynamicCSS();
-
-	const cssMini = await minifyCSS(css);
-
-	writeFileSync(join(coreDir, 'public', 'app.css'), cssMini);
-
-	return true;
-
-}
-
-export default buildUI;

package/ui/commonComponent.test.js

@@ -1,27 +0,0 @@
-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

@@ -1,371 +0,0 @@
-.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;
-}