Merge pull request #74 from shgysk8zer0/patch/updates

Fix importing polyfills in `md5.js`

.github/workflows/super-linter.yml

@@ -88,7 +88,7 @@ jobs:
           # Valate Languages - Uncomment to Enable
           # JS/TS/JSON Disabled until ESLint in super-linter is updated
           VALIDATE_HTML: true
-          VALIDATE_CSS: true
+          # VALIDATE_CSS: true
           # VALIDATE_JAVASCRIPT_ES: true
           # VALIDATE_JAVASCRIPT_STANDARD: true
           # VALIDATE_JSON: true

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v1.0.9] - 2024-09-19
+
+### Added
+- Add `safeExecute` function in `utility.js`
+
+### Fixed
+- Do not import polyfills in `md5.js` (duplicate policy conflicts)
+
 ## [v1.0.8] - 2024-09-17
 
 ### Added

md5.js

@@ -1,5 +1,3 @@
-import '@shgysk8zer0/polyfills';
-
 const K = new Uint32Array([
 	0xd76aa478, 0xe8c7b756, 0x242070db, 0xc1bdceee,
 	0xf57c0faf, 0x4787c62a, 0xa8304613, 0xfd469501,
@@ -25,6 +23,7 @@ const s = [
 	4, 11, 16, 23, 4, 11, 16, 23, 4, 11, 16, 23, 4, 11, 16, 23,
 	6, 10, 15, 21, 6, 10, 15, 21, 6, 10, 15, 21, 6, 10, 15, 21
 ];
+
 const a0 = 0x67452301;
 const b0 = 0xefcdab89;
 const c0 = 0x98badcfe;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shgysk8zer0/kazoo",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "private": false,
   "type": "module",
   "description": "A JavaScript monorepo for all the things!",

test/css/index.css

@@ -8,6 +8,15 @@
 	box-sizing: inherit;
 }
 
+:popover-open {
+	border: none;
+}
+
+:popover-open::backdrop {
+	background-color: rgba(0, 0, 0, 0.7);
+	backdrop-filter: blur(4px);
+}
+
 body {
 	display: grid;
 	margin: 0;

test/index.html

@@ -4,7 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="color-scheme" content="light dark" />
-		<meta http-equiv="Content-Security-Policy-Resport-Only" content="
+		<meta http-equiv="Content-Security-Policy-Report-Only" content="
 			default-src 'self';
 			base-uri 'self';
 			manifest-src 'self';
@@ -71,11 +71,9 @@
 				}
 			}
 		</script>
-		<script type="application/javascript" defer="" referrerpolicy="no-referrer" crossorigin="anonymous"
-			integrity="sha384-uaVA9Le/fIJMMUrQHZyGJ+aAH3EdIhOLxPl+cuBCvvZBltVoc+Kemy4t8KLX3/aF"
-			src="https://unpkg.com/@shgysk8zer0/[email protected]/all.min.js" fetchpriority="high"></script>
+		<script type="application/javascript" defer="" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-CP/nVh8lHR1uyEXUkbQ4YZijSR9xfxvXCVxsFVsWs1FjURa8jEqvpz0c3VL8Rw0e" src="https://unpkg.com/@shgysk8zer0/[email protected]/all.min.js" fetchpriority="auto"></script>
 		<script type="module" src="./js/policy.js" referrerpolicy="no-referrer"></script>
-		<script type="module" src="./js/index.js" referrerpolicy="no-referrer" integrity="sha256-p0PliQygKghFPrLCBwXWgQHQFkJBIO0kqxHkqT/S03g="></script>
+		<script type="module" src="./js/index.js" referrerpolicy="no-referrer" integrity="sha256-UuBtqeX4dV+EKTn/48Csr8FfLuM2EMrbeAhbUaPqkSE="></script>
 		<link rel="stylesheet" href="./css/index.css" referrerpolicy="no-referrer" media="all" />
 		<link rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer" integrity="sha384-Uhn9VRzdRxBVYRT2aPFl8ECva7znqyZwWiqpE3v4GTBe8y2XrpwTWZtU1U5vujcN" media="not (prefers-color-scheme: dark)" href="https://unpkg.com/[email protected]/styles/github.css" fetchpriority="low">
 		<link rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer" integrity="sha384-s+/XrBtU6QDoYle5GTN5r/bD998lHLNZbk0ywd2wxEgwwxx64zJpPP2Lu2kSyZsK" media="(prefers-color-scheme: dark)" href="https://unpkg.com/[email protected]/styles/github-dark.css" fetchpriority="low" />
@@ -86,6 +84,15 @@
 		<header id="header"></header>
 		<nav id="nav"></nav>
 		<main id="main">
+			<form id="grav">
+				<fieldset>
+					<legend>Gravatar Test</legend>
+					<label for="email">Email Address</label>
+					<input type="email" name="email" id="email" placeholder="[email protected]" required="" />
+				</fieldset>
+				<button type="submit">Submit</button>
+				<button type="reset">Reset</button>
+			</form>
 			<div data-template="./lorem.html"></div>
 			<form id="contact">
 				<input type="text" name="subject" id="subject" placeholder="Subject" />

test/js/index.js

@@ -1,9 +1,10 @@
 import { createElement } from '../../elements.js';
 import { getJSON, getHTML } from '../../http.js';
-import { html, attr, each } from '../../dom.js';
+import { html, attr, each, on } from '../../dom.js';
 import { animate } from '../../animate.js';
 import { createYouTubeEmbed } from '../../youtube.js';
 import { createSVGFile } from '../../svg.js';
+import { createGravatar } from '../../gravatar.js';
 import * as icons from '../../icons.js';
 import { whenIntersecting } from '../../intersect.js';
 import { isPrime } from '../../math.js';
@@ -25,6 +26,33 @@ registerLanguage('bash', bash);
 registerLanguage('xml', xml);
 registerLanguage('html', xml);
 
+on('#grav', 'submit', async event => {
+	event.preventDefault();
+	const data = new FormData(event.target);
+	const img = await createGravatar(data.get('email'), {
+		size: 512,
+		animation: {
+			keyframes: [
+				{ opacity: 0, transform: 'scale(0)' },
+				{ opacity: 1, transform: 'none' },
+			],
+			duration: 300,
+			easing: 'ease-in-out',
+		},
+		events:{
+			toggle(event) {
+				if (event.newState === 'closed') {
+					event.target.remove();
+				}
+			}
+		}
+	});
+
+	img.popover = 'auto';
+	document.body.append(img);
+	img.showPopover();
+});
+
 fetchMarkdown('../../README.md').then(frag => {
 	const readme = document.createElement('div');
 	readme.id = 'readme-popover';

utility.js

@@ -458,3 +458,20 @@ export const ucFirst = str => str.toString().substring(0, 1).toUpperCase() + str
 export async function filterKeys(obj, keys) {
 	return Object.fromEntries(Object.entries(obj).filter(([key]) => keys.includes(key)));
 }
+
+/**
+ * Safely executes a callback function and returns a tuple of [result, error].
+ *
+ * @param {Function} cb - The callback function to execute.
+ * @returns {Promise<[any, Error|null]>} A promise that resolves with a tuple `[result|null, Error|null]`.
+ *          The tuple is frozen to ensure immutability.
+ */
+export async function safeExecute(cb) {
+	if (! (cb instanceof Function)) {
+		return Object.freeze(null, new TypeError('Callback is not a function.'));
+	} else {
+		return Promise.try(cb)
+			.then(result => Object.freeze([result, null]))
+			.catch(err => Object.freeze([null, err]));
+	}
+}