npm - @awesomeness-js/server - Versions diffs - 1.1.7 → 1.1.8 - Mend

@awesomeness-js/server 1.1.7 → 1.1.8

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 (62) hide show

package/index.js +101 -101
package/package.json +1 -1
package/src/koa/routeRequest.js +87 -26
package/example-site/example.awesomenessjs.com/components/example/index.js +0 -3
package/example-site/example.awesomenessjs.com/components/notCommonExample/_.css +0 -1
package/example-site/example.awesomenessjs.com/components/notCommonExample/index.js +0 -3
package/ui/README.md +0 -438
package/ui/awesomeness-ui.instructions.md +0 -156
package/ui/build.js +0 -119
package/ui/commonComponent.test.js +0 -27
package/ui/components/blogPost/all.css +0 -371
package/ui/components/blogPost/headerImage.js +0 -153
package/ui/components/blogPost/index.js +0 -45
package/ui/components/blogPost/marked.js +0 -74
package/ui/components/blogPost/md.js +0 -73
package/ui/components/blogPost/parseAwesomeness.jQuery.js +0 -47
package/ui/components/blogPost/readme.md +0 -8
package/ui/components/colors/README.md +0 -65
package/ui/components/colors/dynamic.css +0 -1884
package/ui/components/colors/dynamic.css.js +0 -135
package/ui/components/colors/dynamic.css.php +0 -79
package/ui/components/colors/example.js +0 -133
package/ui/components/colors/index.js +0 -65
package/ui/components/colors/map.js +0 -13
package/ui/components/colors/random.js +0 -17
package/ui/components/colors/tailwind-colors.css +0 -247
package/ui/components/insertIntoList/insertIntoList.jquery.js +0 -150
package/ui/components/statusPage/index.css +0 -120
package/ui/components/statusPage/index.js +0 -39
package/ui/components/tag/category.js +0 -8
package/ui/components/tag/index.js +0 -33
package/ui/components/tag/list.js +0 -42
package/ui/components/tag/map.js +0 -64
package/ui/components/tag/tagMap.css +0 -60
package/ui/components/tag/tags.css +0 -20
package/ui/core/css/_normalize.css +0 -57
package/ui/core/css/dynamic/flex.js +0 -36
package/ui/core/css/dynamic/grid.js +0 -185
package/ui/core/css/dynamic/shortcuts.js +0 -48
package/ui/core/css/dynamic/spacing.js +0 -61
package/ui/core/css/dynamic/text.js +0 -80
package/ui/core/css/dynamic/width.js +0 -75
package/ui/core/css/dynamic.js +0 -40
package/ui/core/js/app/api.js +0 -143
package/ui/core/js/app/init.js +0 -88
package/ui/core/js/app/initDarkMode.js +0 -26
package/ui/core/js/app/initialScroll.js +0 -28
package/ui/core/js/app/meta/update/components.js +0 -65
package/ui/core/js/app/meta/update/pages.js +0 -86
package/ui/core/js/app/metaUpdates.js +0 -10
package/ui/core/js/app/page.js +0 -319
package/ui/core/js/app/resize.js +0 -52
package/ui/core/js/app/state/back.js +0 -16
package/ui/core/js/app/state/create.js +0 -50
package/ui/core/js/app/state/get.js +0 -5
package/ui/core/js/app/state/init.js +0 -25
package/ui/core/js/app.js +0 -41
package/ui/core/js/jquery-3.7.1.min.js +0 -2
package/ui/core/public/app.css +0 -1
package/ui/core/public/app.js +0 -975
package/ui/core/public/favicon.ico +0 -0
package/ui/core/public/index.html +0 -40

package/ui/README.md DELETED Viewed

@@ -1,438 +0,0 @@
-# Awesomeness UI
-Awesomeness UI is a utility-first CSS framework focused on responsive, dynamic layouts using a consistent, JS-driven class generator. It replaces traditional media queries with intuitive `app-size-*` modifiers.
-**Awesomeness UI** is a utility-first CSS framework focused on creating **responsive, grid-based layouts** using predictable, reusable class names. It avoids media queries by using automatically applied screen-size classes.
----
-## 📐 Responsive Foundation
-Your layout responds to screen size using `app-size-*` classes:
-```html
-<body class="app-size-p">
-	<div id="app"></div>
-</body>
-```
-These classes (`app-size-p`, `app-size-t`, etc.) are added dynamically based on the screen width, so you can target styles like this:
-```html
-<div class="grid-1-p grid-2-t grid-4-d grid-6-xl">...</div>
-```
-**Size keys:**
-- `p` → phone
-- `t` → tablet
-- `d` → desktop
-- `xl` → extra large
----
-## 🧩 Core Class System
-Here’s a breakdown of the key layout utilities:
-### 🧱 `grid-*`
-Defines how many equal-width columns a container has.
-```html
-<div class="grid-3">...</div>
-```
-Responsive:
-```html
-<div class="grid-1-p grid-2-t grid-4-d grid-4-xl">...</div>
-<div class="grid-3 grid-1-p"> three on all except phone </div>
-```
----
-### ↔️ `span-*`
-Defines how many columns a child should span.
-```html
-<div class="span-2">Spans 2 columns</div>
-```
-Also available:
-- `.span-full` → spans full width
-- `.row-span-*` → spans rows
-- `.row-span-full` → full-height span
-Responsive variant:
-```html
-<div class="span-1-p span-2-t span-3-d">...</div>
-```
----
-### 🔄 `justify-*`
-Controls horizontal alignment **inside grid containers**.
-```css
-.justify-center     → center content
-.justify-start      → left-align
-.justify-end        → right-align
-.justify-between    → space-between
-.justify-around     → space-around
-.justify-evenly     → space-evenly
-```
-```html
-<div class="justify-center-p justify-end-d">...</div>
-```
----
-### ↕️ `align-*`
-Controls vertical alignment (applies to grid items).
-```css
-.align-center       → vertically center items
-.align-start        → align top
-.align-end          → align bottom
-.align-stretch      → stretch to fill
-.align-baseline     → align text baseline
-```
----
-### 🎯 `start-*`, `end-*`
-Control where grid items begin or end:
-```css
-.start-2     → grid-column-start: 2
-.end-4       → grid-column-end: 4
-.row-start-1 → grid-row-start: 1
-.row-end-3   → grid-row-end: 3
-```
-Responsive:
-```html
-<div class="start-1-p start-3-d">...</div>
-```
----
-### 🔢 `order-*`
-Controls item order inside a flex/grid container.
-```html
-<div class="order-1">First</div>
-<div class="order-2">Second</div>
-```
-Responsive:
-```html
-<div class="order-1-p order-3-d">...</div>
-```
----
-### 📏 `gap-*`, `gap-x-*`, `gap-y-*`
-Spacing between grid rows and columns.
-```css
-.gap-10     → gap: 10px
-.gap-x-20   → column-gap: 20px
-.gap-y-5    → row-gap: 5px
-```
-Responsive:
-```html
-<div class="gap-4-p gap-10-d">...</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.
-## Core
-location: /awesomeness-ui/core
-The core folder is what it takes to load a super minimalistic Awesomeness UI
-Available tools
-## Components
-location: /awesomeness-ui/components
-Each folder within this directory is a `component`
-#### Rules
-- Each component should have a unique name
-- Each component can have any number of files and folders
-- Each js file should export default a single function
-- Each component "should" have an `index.js` file at the root level
-   - It does not need to, such as a css only component or jQuery plugin
-#### Component Dependencies
-Components can depend on other components.
-To use a component in another component, you can import it like this:
-```js
-// awesomeness import 'card';
-// awesomeness import 'insertIntoList';
-```
-This will import the `card` and `insertIntoList` components.
-All of its css, functions / methods, IIFs / jQuery plugins and sub-components will be available at the expected namespace.
-```js
-const $list = $(`<div class="example-list"></div>`)
-	.appendTo('body');
-const $card = ui.card();
-$card.insertIntoList($list);
-```
----
-### JS
-The functions will be available in the browser at the `ui` namespace
-```js
-ui._example()
-```
----
-#### Basic Components
-index.js files are available at the root level of the component namespace
-[/awesomeness-ui/components/_example/index.js](/awesomeness-ui/components/example/index.js)
-```js
-ui._example()
-```
-other files will be available at the component namespace
-[/awesomeness-ui/components/_example/grid.js](/awesomeness-ui/components/example/grid.js)
-```js
-ui._example.grid()
-```
----
-#### Complex Components
-complex components can have any number of sub folders
-[/awesomeness-ui/components/example/subComponent/index.js](/awesomeness-ui/components/example/subComponent/index.js)
-```js
-ui._example.subComponent()
-```
-sub components can have any number of files
-[/awesomeness-ui/components/example/subComponent/simpleTest.js](/awesomeness-ui/components/example/subComponent/simpleTest.js)
-```js
-ui._example.subComponent.deep.simpleTest()
-```
-:warning: **Name Conflicts**
-If you have multiple files with the same name in a component, they will conflict. Example:
-```
-awesomeness-ui/components/test/someMethod.js
-awesomeness-ui/components/test/someMethod/index.js
-```
----
-#### IIFs
-IIFs will not be available on `ui` but will be executed immediately when received in browser
-This works well for **jQuery plugins** and loading **3rd party libraries**
-[/awesomeness-ui/components/example/jQuery_example.js](/awesomeness-ui/components/example/example.jQuery.js)
----
-### CSS
-:warning: All CSS is available globally.
-Do not **pollute** the global namespace.
-Prefix all classes with the component name.
-e.g.,
-```css
-.componentName-container {
-	background-color: red;
-	color: white;
-}
-.componentName-button {
-	background-color: blue;
-	color: white;
-}
-```
-*Files names do not matter you can name them whatever you want*
----
-## PAGES
-Pages can be located anywhere your router expects a `/pages/` directory.
-Each page is a folder containing the following
-```
-your-site/
-└── pages/
-    └── example/
-        ├── _info.js
-        ├── getData.js
-        ├── js/
-        │   └── init.js
-        └── css/
-            └── example.css
-```
-#### /_info.js
-_info.js exports an object used by the router to determine what it needs to send back, and who can interact with it.
-the `components` array allows the page to pull, and load each component prior to rendering any page content.
-```js
-export default {
-	version: 1,
-	name: '',
-	description: '',
-	permissions: [ '*' ],
-	components: [
-		'heroWordsOverText'
-	]
-};
-```
-#### /getData.js
-```js
-export default async function getData(awesomenessRequest) {
-	const {
-		data, // payload sent by the client
-		user // user information - set by the server
-	} = awesomenessRequest;
-	// do payload cleaning and validation here
-	// do user validation here
-	// return data to the client
-	return { page: 'template' };
-}
-```
-#### /scripts/init.js
-example:
-```js
-app.pages.examplePage.init = function(responseFromGetData){
-	// do stuff with data
-	// state management
-	app.state.create({
-		title: 'Example Page',
-		url: '/example-page',
-		reload:function(){ app.page('examplePage'); }
-	});
-	// do stuff with the DOM
-};
-```
-#### /css/example.css
-Optionally, you can add a css file to the page.
-Ideally, you should use component who have their own css files, but if you need to add a page specific css file, you can do so here.
-```css
-.example-page {
-	background-color: red;
-	color: white;
-}
-```

package/ui/awesomeness-ui.instructions.md DELETED Viewed

@@ -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 DELETED Viewed

@@ -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;