@pixelated-tech/components 3.1.5 → 3.2.0

package/dist/components/menu/menu-accordion.css

@@ -7,6 +7,10 @@
 	/* background-color: rgba(255,255,255,0.7); */
 	/* display: none; */
 	/* display: inline; */
+
+	background-color: transparent;
+    border: none;
+
 	margin: 0px 10px 0px 0px;
 	padding: 5px;
 	text-align: center;
@@ -18,6 +22,29 @@
 	border-radius: 5px;
 }
 
+
+.panelMenuButton .hamburger{
+    /* the tricks */
+	/* display: block; */
+	/* display inline-block is fine too */
+   	-webkit-transform: scaleX(1.5);
+   	-moz-transform: scaleX(1.5);
+   	-o-transform: caleX(1.5); 
+   	transform: scaleX(1.5);
+	writing-mode: vertical-lr;
+    /* optional */
+    font-size: 8pt;
+    cursor: pointer;
+    font-weight: 900;
+    color: #CCC;
+	padding-top: 5px;
+
+}
+/* hamburger hover style */
+/* .accordionMenu .hamburger:hover {
+    color: #FFC75F;
+} */
+
 @media screen and (max-width: 480px) {
 	.panelMenuButton {
 		display: inline;
@@ -128,27 +155,6 @@
     /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
 }
 
-
-.panelMenuButton .hamburger{
-    /* the tricks */
-	display: block;
-   	-webkit-transform: scaleX(1.75);
-   	-moz-transform: scaleX(1.75);
-   	-o-transform: caleX(1.75); 
-   	transform: scaleX(1.75);
-	writing-mode: vertical-lr;
-	transform: scaleX(1.75);
-    /* optional */
-    font-size: 8pt;
-    cursor: pointer;
-    font-weight: 900;
-    color: #CCC;
-}
-/* hamburger hover style */
-/* .accordionMenu .hamburger:hover {
-    color: #FFC75F;
-} */
-
 /* ===== LEVEL 2 ===== */
 
 .accordionMenu > ul > ul {

package/dist/components/menu/menu-accordion.js

@@ -179,5 +179,5 @@ export function MenuAccordionButton() {
     function slideMobilePanel() {
         window.moveMenu();
     }
-    return (_jsx("div", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, children: _jsx("span", { className: "hamburger textOutline", children: "|||" }) }));
+    return (_jsx("button", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, children: _jsx("span", { className: "hamburger text-outline", children: "|||" }) }));
 }

package/dist/components/menu/menu-simple.css

@@ -10,11 +10,11 @@
 	--accent2-color: #EEE;	
 }
 
-.menuWrapper {
+.menu-wrapper {
 	height: 100%;
 }
 
-.menuWrapper, .menuWrapper * {
+.menu-wrapper, .menu-wrapper * {
 	display: flex;
 	flex-direction: row;
 	flex-basis: 100%;
@@ -39,7 +39,7 @@
 	text-decoration: none;
 }
 
-.menuItem {
+.menu-item {
 	border: 1px solid white;
 	background: none;
 	width: auto;
@@ -50,15 +50,15 @@
 	flex-basis: content; /* each item is its own size instead of auto */
 }
 
-.menuItem:hover {
+.menu-item:hover {
 	background-color: var(--accent1-color);
 }
 
-.menuItem:not(:first-child) {
+.menu-item:not(:first-child) {
 	border-left: 2px solid var(--primary-color);
 }
 
-.menuItem a {
+.menu-item a {
 	/* this is the button */
 	background-color: var(--accent1-color);
 	font-weight: bold;
@@ -67,10 +67,10 @@
 	text-align: center;
 }
 
-.menuItem a.selected {
+.menu-item a.selected {
 	background-color: var(--secondary-color);
 }
 
-.menuItem a:hover {
+.menu-item a:hover {
 	background-color: var(--accent2-color);
 }

package/dist/components/menu/menu-simple.js

@@ -26,7 +26,7 @@ export function MenuSimple(props) {
         return myItems;
     }
     function styleSelectedMenuItem() {
-        const menuitems = document.querySelectorAll('.menuItem a');
+        const menuitems = document.querySelectorAll('.menu-item a');
         const currentURL = window.location.href;
         menuitems.forEach((menuitem) => {
             if (menuitem.href === currentURL) {
@@ -37,7 +37,7 @@ export function MenuSimple(props) {
     useEffect(() => {
         styleSelectedMenuItem();
     }, []);
-    return (_jsx("div", { className: "menuWrapper", children: _jsx("div", { className: "menu", id: "menu", children: _jsx("ul", { children: generateMenuItems() }) }) }));
+    return (_jsx("div", { className: "menu-wrapper", children: _jsx("div", { className: "menu", id: "menu", children: _jsx("ul", { children: generateMenuItems() }) }) }));
 }
 /* ========== MENU ITEM ========== */
 MenuSimpleItem.propTypes = {
@@ -50,7 +50,7 @@ MenuSimpleItem.propTypes = {
 export function MenuSimpleItem(props) {
     if (props.hidden)
         return null;
-    return (_jsx("li", { className: 'menuItem', children: props.target
+    return (_jsx("li", { className: 'menu-item', children: props.target
             ? _jsx("a", { href: props.path || undefined, target: props.target, children: props.name })
             : _jsx("a", { href: props.path || undefined, children: props.name }) }));
 }

package/dist/components/nerdjoke/nerdjoke.js

@@ -1,95 +1,103 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { getXHRData, generateURL } from '../utilities/api';
-import './nerdjoke.css';
-import '../../css/pixelated.grid.scss';
-/*
-TODO: #21 NerdJoke Component - Convert to TypeScript
-*/
+import { useCallback, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { getXHRData, generateURL } from "../utilities/api";
+import "../../css/pixelated.grid.scss";
+import "./nerdjoke.css";
 const debug = false;
-export class NerdJoke extends Component {
-    constructor(props) {
-        super(props);
-        this.TIME_LIMIT = 15;
-        this.timePassed = 0;
-        this.timePaused = false;
-        this.timeLeft = this.TIME_LIMIT;
-        this.timerInterval = null;
-        this.jokeInterval = null;
-        this.state = {
-            joke: {
-                question: '',
-                answer: ''
-            }
-        };
-    }
-    loadJoke = () => {
+const TIME_LIMIT = 15;
+NerdJoke.propTypes = {};
+export function NerdJoke( /* props: NerdJokeType */) {
+    const [joke, setJoke] = useState({ question: "", answer: "" });
+    const timerIntervalRef = useRef(null);
+    const jokeIntervalRef = useRef(null);
+    const timePassedRef = useRef(0);
+    const timePausedRef = useRef(false);
+    const timeLeftRef = useRef(TIME_LIMIT);
+    const formatTimeLeft = useCallback((time) => {
+        if (debug)
+            console.log("Formatting Time Left");
+        const minutes = Math.floor(time / 60);
+        const seconds = time % 60;
+        const formattedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+        return `${minutes}:${formattedSeconds}`;
+    }, []);
+    const updateTimerDisplay = useCallback(() => {
+        if (debug)
+            console.log("Updating Timer Display");
+        const label = document.getElementById("jokeTimerLabel");
+        if (label) {
+            label.innerHTML = formatTimeLeft(timeLeftRef.current);
+        }
+        const elapsedPath = document.getElementById("jokeTimerPathElapsed");
+        if (elapsedPath) {
+            const myWidth = (((1 / TIME_LIMIT) * timeLeftRef.current) * 100) + "%";
+            elapsedPath.style.width = myWidth;
+        }
+    }, [formatTimeLeft]);
+    const loadJoke = useCallback(() => {
         if (debug)
             console.log("Loading Joke");
-        this.timePassed = 0;
-        this.timeLeft = this.TIME_LIMIT;
-        this.timerInterval = null;
-        clearInterval(this.jokeInterval);
-        this.jokeInterval = setInterval(() => {
-            if (!this.timePaused) {
-                this.loadJoke();
+        timePassedRef.current = 0;
+        timeLeftRef.current = TIME_LIMIT;
+        timerIntervalRef.current = null;
+        if (jokeIntervalRef.current) {
+            clearInterval(jokeIntervalRef.current);
+        }
+        jokeIntervalRef.current = setInterval(() => {
+            if (!timePausedRef.current) {
+                loadJoke();
             }
-        }, this.TIME_LIMIT * 1000);
-        const myURL = 'https://vvqyc1xpw6.execute-api.us-east-2.amazonaws.com/prod/nerdjokes?';
-        const myURLProps = { command: '%2Fnerdjokes', text: 'getjokejson' };
-        const myMethod = 'GET';
+        }, TIME_LIMIT * 1000);
+        const myURL = "https://vvqyc1xpw6.execute-api.us-east-2.amazonaws.com/prod/nerdjokes?";
+        const myURLProps = { command: "%2Fnerdjokes", text: "getjokejson" };
+        const myMethod = "GET";
         getXHRData(generateURL(myURL, myURLProps), myMethod, (jokeData) => {
             const myJokeData = jokeData;
-            this.setState({ joke: myJokeData });
+            setJoke(myJokeData);
         });
-    };
-    formatTimeLeft(time) {
-        if (debug)
-            console.log("Formatting Time Left");
-        const minutes = Math.floor(time / 60);
-        let seconds = time % 60;
-        if (seconds < 10) {
-            seconds = `0${seconds}`;
-        }
-        return `${minutes}:${seconds}`;
-    }
-    ;
-    startTimer() {
+    }, []);
+    const startTimer = useCallback(() => {
         if (debug)
             console.log("Starting Timer");
-        this.timerInterval = setInterval(() => {
-            if (!this.timePaused) {
-                this.timePassed = this.timePassed += 1;
-                this.timeLeft = this.TIME_LIMIT - this.timePassed + 1;
-                const myWidth = (((1 / this.TIME_LIMIT) * this.timeLeft) * 100) + '%';
-                document.getElementById('jokeTimerLabel').innerHTML = this.formatTimeLeft(this.timeLeft);
-                document.getElementById('jokeTimerPathElapsed').style.width = myWidth;
+        if (timerIntervalRef.current) {
+            clearInterval(timerIntervalRef.current);
+        }
+        timerIntervalRef.current = setInterval(() => {
+            if (!timePausedRef.current) {
+                timePassedRef.current += 1;
+                timeLeftRef.current = TIME_LIMIT - timePassedRef.current + 1;
+                updateTimerDisplay();
             }
         }, 1000);
-    }
-    ;
-    pauseTimer() {
+    }, [updateTimerDisplay]);
+    const pauseTimer = () => {
         if (debug)
             console.log("Pausing Timer");
-        this.timePaused = !this.timePaused;
-    }
-    ;
-    componentDidMount() {
-        if (debug)
-            console.log("Component is Mounted");
-        this.loadJoke();
-        this.startTimer();
-    }
-    render() {
-        return (_jsx("div", { className: "nerdJoke", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e5", children: _jsx("div", { className: "left", children: _jsx(JokeButton, { clickFunction: this.pauseTimer, buttonText: "Pause ||  / Play >" }) }) }), _jsx("div", { className: "grid-s9-e13", children: _jsx("div", { className: "right", children: _jsx(JokeButton, { clickFunction: this.loadJoke, buttonText: "Next Joke ->" }) }) }), _jsx("div", { className: "jokeTimer grid-s1-e13", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e11", children: _jsx("svg", { className: "jokeTimerSvg", xmlns: "http://www.w3.org/2000/svg", children: _jsx("rect", { id: "jokeTimerPathElapsed" }) }) }), _jsx("div", { className: "grid-s11-e13 center", id: "jokeTimerLabel", children: this.formatTimeLeft(this.timeLeft) })] }) }), _jsxs("div", { className: "jokeText grid-s1-e13", children: [_jsxs("div", { children: [_jsx("span", { className: "label", children: "Q: " }), _jsxs("span", { className: "question", children: [" ", this.state.joke.question, " "] })] }), _jsxs("div", { children: [_jsx("span", { className: "label", children: "A: " }), _jsxs("span", { className: "answer", children: [" ", this.state.joke.answer, " "] })] })] })] }) }));
-    }
-}
-/* ========== JOKE BUTTON ========== */
-function JokeButton(props) {
-    return (_jsx("div", { className: 'jokeButton', onClick: props.clickFunction, children: props.buttonText }));
+        timePausedRef.current = !timePausedRef.current;
+    };
+    useEffect(() => {
+        loadJoke();
+        startTimer();
+        return () => {
+            if (timerIntervalRef.current) {
+                clearInterval(timerIntervalRef.current);
+            }
+            if (jokeIntervalRef.current) {
+                clearInterval(jokeIntervalRef.current);
+            }
+        };
+    }, [loadJoke, startTimer]);
+    return (_jsx("div", { className: "nerdJoke", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e5", children: _jsx("div", { className: "left", children: _jsx(JokeButton, { clickFunction: pauseTimer, buttonText: "Pause ||  / Play >" }) }) }), _jsx("div", { className: "grid-s9-e13", children: _jsx("div", { className: "right", children: _jsx(JokeButton, { clickFunction: loadJoke, buttonText: "Next Joke ->" }) }) }), _jsx("div", { className: "jokeTimer grid-s1-e13", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e11", children: _jsx("svg", { className: "jokeTimerSvg", xmlns: "http://www.w3.org/2000/svg", children: _jsx("rect", { id: "jokeTimerPathElapsed" }) }) }), _jsx("div", { className: "grid-s11-e13 center", id: "jokeTimerLabel", children: formatTimeLeft(timeLeftRef.current) })] }) }), _jsxs("div", { className: "jokeText grid-s1-e13", children: [_jsxs("div", { children: [_jsx("span", { className: "label", children: "Q: " }), _jsxs("span", { className: "question", children: [" ", joke.question, " "] })] }), _jsxs("div", { children: [_jsx("span", { className: "label", children: "A: " }), _jsxs("span", { className: "answer", children: [" ", joke.answer, " "] })] })] })] }) }));
 }
 JokeButton.propTypes = {
     clickFunction: PropTypes.func.isRequired,
-    buttonText: PropTypes.string.isRequired
+    buttonText: PropTypes.string.isRequired,
 };
+function JokeButton(props) {
+    /* <div className="jokeButton" onClick={props.clickFunction}>
+            {props.buttonText}
+        </div> */
+    return (_jsx("button", { className: "jokeButton", onClick: props.clickFunction, children: props.buttonText }));
+}

package/dist/components/pagebuilder/components/PageBuilderUI.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { PageSectionHeader } from '../../general/headers';
+import { PageSectionHeader } from '../../general/semantic';
 import { usePageBuilder } from '../lib/usePageBuilder';
 import { ComponentSelector } from '../components/ComponentSelector';
 import { ComponentPropertiesForm } from '../components/ComponentPropertiesForm';

package/dist/components/pagebuilder/components/PageEngine.js

@@ -53,22 +53,29 @@ export function PageEngine(props) {
         }
         // Edit mode: Wrap with hover effect and action buttons
         const isSelected = selectedPath === currentPath;
+        const handleMouseEnter = (currentTarget, event) => {
+            if (event.target === event.currentTarget || !currentTarget.querySelector('.pagebuilder-component-wrapper:hover')) {
+                document.querySelectorAll('.pagebuilder-component-wrapper.hover-active').forEach(el => {
+                    el.classList.remove('hover-active');
+                });
+                currentTarget.classList.add('hover-active');
+            }
+            event.stopPropagation();
+        };
+        const handleMouseLeave = (currentTarget, event) => {
+            const relatedTarget = (event.relatedTarget || event.relatedTarget);
+            if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
+                currentTarget.classList.remove('hover-active');
+            }
+        };
         return (_jsxs("div", { className: `pagebuilder-component-wrapper ${isSelected ? 'selected' : ''}`, onMouseOver: (e) => {
-                if (e.target === e.currentTarget || !e.currentTarget.querySelector('.pagebuilder-component-wrapper:hover')) {
-                    // Remove hover-active from all wrappers
-                    document.querySelectorAll('.pagebuilder-component-wrapper.hover-active').forEach(el => {
-                        el.classList.remove('hover-active');
-                    });
-                    // Add to current
-                    e.currentTarget.classList.add('hover-active');
-                }
-                e.stopPropagation();
+                handleMouseEnter(e.currentTarget, e);
             }, onMouseOut: (e) => {
-                const relatedTarget = e.relatedTarget;
-                // Only remove if leaving to somewhere outside this wrapper entirely
-                if (!e.currentTarget.contains(relatedTarget)) {
-                    e.currentTarget.classList.remove('hover-active');
-                }
+                handleMouseLeave(e.currentTarget, e);
+            }, onFocus: (e) => {
+                handleMouseEnter(e.currentTarget, e);
+            }, onBlur: (e) => {
+                handleMouseLeave(e.currentTarget, e);
             }, children: [element, _jsxs("div", { className: "pagebuilder-actions", children: [_jsxs("div", { className: "move-buttons", children: [_jsx("button", { className: "move-btn move-up", onClick: (e) => {
                                         e.stopPropagation();
                                         onMoveUp?.(currentPath);

package/dist/components/pagebuilder/lib/componentMap.js

@@ -1,16 +1,16 @@
-import { PageHeader, PageSectionHeader } from "../../general/headers";
+import { PageTitleHeader, PageSectionHeader } from "../../general/semantic";
 import { Callout } from "../../callout/callout";
-import { PageSection, GridItem, FlexItem } from "../../general/layout";
+import { PageSection, PageGridItem, PageFlexItem } from "../../general/semantic";
 /**
  * Component registry and constants
  */
 export const componentMap = {
-    "Page Header": PageHeader,
+    "Page Title Header": PageTitleHeader,
     "Page Section Header": PageSectionHeader,
     "Callout": Callout,
     "Page Section": PageSection,
-    "Grid Item": GridItem,
-    "Flex Item": FlexItem,
+    "Grid Item": PageGridItem,
+    "Flex Item": PageFlexItem,
 };
 export const layoutComponents = [
     'Page Section',

package/dist/components/pagebuilder/lib/componentMetadata.js

@@ -7,7 +7,7 @@
  * runtime values for form generation.
  */
 import { variants, shapes, layouts, directions } from "../../callout/callout";
-import { layoutTypes, autoFlowValues, flexDirections, flexWraps, justifyContentValues, alignItemsValues } from "../../general/layout";
+import { layoutTypes, autoFlowValues, flexDirections, flexWraps, justifyContentValues, alignItemsValues } from "../../general/semantic";
 export const componentMetadata = {
     'Callout': {
         variant: {

package/dist/components/seo/404.css

@@ -1,25 +1,25 @@
 
-.fofBodyContainer {
+.fof-body-container {
     width: 100%;
     margin: 0 auto;
 }
 
-.fofBodyContainer h1 {
+.fof-body-container h1 {
     font-size: 2em;
 }
 
-.fofImageContainer {
+.fof-image-container {
     width: 80%;
     margin: 0 auto;
 }
 
-.fofImageContainer .fofImageWrapper {
+.fof-image-container .fof-image-wrapper {
     width: 100%;
     margin: 0 auto;
     overflow: hidden;
     text-align: center;
 }
 
-.fofImageContainer .fofImageWrapper img {
+.fof-image-container .fof-image-wrapper img {
     margin: 0 auto;
 }

package/dist/components/seo/404.js

@@ -2,9 +2,9 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect } from "react";
 import PropTypes from 'prop-types';
 // import { getCloudinaryRemoteFetchURL } from "../cms/cloudinary";
-import "./404.css";
 import { SmartImage } from "../cms/cloudinary.image";
 import { usePixelatedConfig } from "../config/config.client";
+import "./404.css";
 FourOhFour.propTypes = {
     images: PropTypes.array.isRequired,
 };
@@ -22,7 +22,7 @@ export function FourOhFour(props) {
     }, []);
     const config = usePixelatedConfig();
     if (randomIndex !== null && imageURL /* cloudinaryURL */ !== '') {
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "fofBodyContainer", children: [_jsxs("h1", { className: "centered textOutline", children: ["404 - ", images[randomIndex].text] }), _jsx("div", { className: "centeredbutton", children: _jsx("a", { href: "/", target: "_self", rel: "noopener noreferrer", children: "Go Home" }) })] }), _jsx("div", { className: "fofImageContainer", children: _jsx("div", { className: "fofImageWrapper", children: _jsx(SmartImage, { src: imageURL, 
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "fof-body-container", children: [_jsxs("h1", { className: "centered text-outline", children: ["404 - ", images[randomIndex].text] }), _jsx("div", { className: "centered-button", children: _jsx("a", { href: "/", target: "_self", rel: "noopener noreferrer", children: "Go Home" }) })] }), _jsx("div", { className: "fof-image-container", children: _jsx("div", { className: "fof-image-wrapper", children: _jsx(SmartImage, { src: imageURL, 
                             // src={cloudinaryURL} 
                             title: "Page Not Found - " + images[randomIndex].description, alt: "Page Not Found - " + images[randomIndex].description, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }) })] }));
     }

package/dist/components/seo/googlemap.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 // https://developers.google.com/maps/documentation/embed/embedding-map
 GoogleMaps.propTypes = {
+    title: PropTypes.string,
     width: PropTypes.string,
     height: PropTypes.string,
     frameBorder: PropTypes.string,
@@ -11,5 +12,5 @@ GoogleMaps.propTypes = {
     parameters: PropTypes.string,
 };
 export function GoogleMaps(props) {
-    return (_jsx("div", { className: "gmap", suppressHydrationWarning: true, children: _jsx("iframe", { width: props.width || "600", height: props.height || "400", frameBorder: props.frameBorder || "0", style: props.style || { border: 0 }, referrerPolicy: "no-referrer-when-downgrade", src: `https://www.google.com/maps/embed/v1/${props.map_mode}?key=${props.api_key}&${props.parameters}`, allowFullScreen: true }) }));
+    return (_jsx("div", { className: "gmap", suppressHydrationWarning: true, children: _jsx("iframe", { title: props.title || "Google Map", width: props.width || "600", height: props.height || "400", frameBorder: props.frameBorder || "0", style: props.style || { border: 0 }, referrerPolicy: "no-referrer-when-downgrade", src: `https://www.google.com/maps/embed/v1/${props.map_mode}?key=${props.api_key}&${props.parameters}`, allowFullScreen: true }) }));
 }

package/dist/components/seo/googlesearch.css

@@ -1,4 +1,14 @@
 
+/* ========================================
+===========  GENERAL SEARCH    ============
+======================================== */
+
+#page-search {
+	min-height: 50px;
+}
+
+
+
 /* ========================================
 ============  GOOGLE SEARCH    ============
 ======================================== */
@@ -21,6 +31,7 @@ input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:
 
 input.gsc-input {
 	font-size: 1.0em !important;
+	background: none !important;
 }
 
 .gsc-control-cse {

package/dist/components/seo/metadata.components.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+// https://gist.github.com/whitingx/3840905
+generateMetaTags.propTypes = {
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    keywords: PropTypes.string.isRequired,
+    site_name: PropTypes.string.isRequired,
+    email: PropTypes.string.isRequired,
+    origin: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    image: PropTypes.string.isRequired,
+    image_height: PropTypes.string.isRequired,
+    image_width: PropTypes.string.isRequired,
+    favicon: PropTypes.string.isRequired,
+};
+export function generateMetaTags(props) {
+    const { title, description, keywords, site_name, email, origin, url, image, image_height, image_width, favicon } = props;
+    return (_jsxs(_Fragment, { children: [_jsx("title", { children: title }), _jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { httpEquiv: "content-type", content: "text/html; charset=UTF-8" }), _jsx("meta", { httpEquiv: 'Expires', content: '0' }), _jsx("meta", { httpEquiv: 'Pragma', content: 'no-cache' }), _jsx("meta", { httpEquiv: 'Cache-Control', content: 'no-cache' }), _jsx("meta", { name: "application-name", content: site_name }), _jsx("meta", { name: "author", content: site_name + ", " + email }), _jsx("meta", { name: 'copyright', content: site_name }), _jsx("meta", { name: "creator", content: site_name }), _jsx("meta", { name: "description", content: description }), _jsx("meta", { name: "keywords", content: keywords }), _jsx("meta", { name: 'language', content: 'EN' }), _jsx("meta", { name: 'owner', content: site_name }), _jsx("meta", { name: "publisher", content: site_name }), _jsx("meta", { name: 'rating', content: 'General' }), _jsx("meta", { name: 'reply-to', content: email }), _jsx("meta", { name: "robots", content: "index, follow" }), _jsx("meta", { name: 'url', content: url }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0, shrink-to-fit=no" }), _jsx("meta", { property: "og:description", content: description }), _jsx("meta", { property: 'og:email', content: email }), _jsx("meta", { property: "og:image", content: image }), _jsx("meta", { property: "og:image:height", content: image_height }), _jsx("meta", { property: "og:image:width", content: image_width }), _jsx("meta", { property: "og:locale", content: "en_US" }), _jsx("meta", { property: "og:site_name", content: site_name }), _jsx("meta", { property: "og:title", content: title }), _jsx("meta", { property: "og:type", content: "website" }), _jsx("meta", { property: "og:url", content: url }), _jsx("meta", { itemProp: "name", content: site_name }), _jsx("meta", { itemProp: "url", content: url }), _jsx("meta", { itemProp: "description", content: description }), _jsx("meta", { itemProp: "thumbnailUrl", content: image }), _jsx("meta", { property: "twitter:domain", content: new URL(origin).hostname }), _jsx("meta", { property: "twitter:url", content: url }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "twitter:creator", content: site_name }), _jsx("meta", { name: "twitter:description", content: description }), _jsx("meta", { name: "twitter:image", content: image }), _jsx("meta", { name: "twitter:image:height", content: image_height }), _jsx("meta", { name: "twitter:image:width", content: image_width }), _jsx("meta", { name: "twitter:title", content: title }), _jsx("link", { rel: "author", href: origin }), _jsx("link", { rel: "canonical", href: url }), _jsx("link", { rel: "icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "shortcut icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "manifest", href: "/manifest.webmanifest" }), _jsx("link", { rel: "preconnect", href: "https://images.ctfassets.net/" }), _jsx("link", { rel: "preconnect", href: "https://res.cloudinary.com/" }), _jsx("link", { rel: "preconnect", href: "https://farm2.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm6.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm8.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm66.static.flickr.com" })] }));
+}
+setClientMetadata.propTypes = {
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    keywords: PropTypes.string.isRequired,
+};
+export function setClientMetadata(props) {
+    const { title, description, keywords } = props;
+    document.title = title;
+    (document.querySelector("meta[property='og:title']"))?.setAttribute('content', title);
+    (document.querySelector("meta[name='description']"))?.setAttribute('content', description);
+    (document.querySelector("meta[property='og:description']"))?.setAttribute('content', description);
+    (document.querySelector("meta[itemprop='description']"))?.setAttribute('content', description);
+    (document.querySelector("meta[name='keywords']"))?.setAttribute('content', keywords);
+}
+;

package/dist/components/seo/metadata.js

@@ -63,38 +63,6 @@ export function getAllRoutes(routes, key) {
     traverse(routes);
     return result;
 }
-import fs from 'fs';
-import path from 'path';
-export function getAllImages() {
-    // const imagePaths: ImageInfo[] = [];
-    const imagePaths = [];
-    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.webp'];
-    const publicDir = './public';
-    function walk(currentDir) {
-        fs.readdirSync(currentDir).forEach(file => {
-            const filePath = path.join(currentDir, file);
-            const fileStat = fs.statSync(filePath);
-            if (fileStat.isDirectory()) {
-                walk(filePath); // Recursive call for subdirectories
-            }
-            else {
-                if (fs.statSync(filePath).isFile() && (imageExtensions.some(ext => file.endsWith(ext)))) {
-                    // Found an image!
-                    // const imageURL = `/${filePath.replace('./public/', '')}`; // Construct URL
-                    // Add to your image data list (e.g., { url: imageURL, alt: "description" })
-                    const relativePath = path.relative(publicDir, filePath).replace(/\\/g, '/');
-                    const fullPath = `/${relativePath}`;
-                    // imagePaths.push({loc: fullPath});
-                    imagePaths.push(fullPath);
-                }
-            }
-        });
-    }
-    ;
-    walk(publicDir);
-    // return JSON.stringify(imagePaths);
-    return imagePaths;
-}
 export const getMetadata = (routes, key = "name", value = "Home") => {
     // const allRoutes = getAllRoutes(routes, "routes");
     // const foundObject = allRoutes.find((obj: { [x: string]: string; }) => obj && Object.prototype.hasOwnProperty.call(obj, key) && obj[key as keyof typeof obj] === value);
@@ -116,22 +84,6 @@ export const getMetadata = (routes, key = "name", value = "Home") => {
         return metadata;
     }
 };
-export const setClientMetadata = ({ title, description, keywords }) => {
-    document.title = title;
-    (document.querySelector("meta[property='og:title']"))?.setAttribute('content', title);
-    (document.querySelector("meta[name='description']"))?.setAttribute('content', description);
-    (document.querySelector("meta[property='og:description']"))?.setAttribute('content', description);
-    (document.querySelector("meta[itemprop='description']"))?.setAttribute('content', description);
-    (document.querySelector("meta[name='keywords']"))?.setAttribute('content', keywords);
-};
-export const setServerMetadata = ({ key, value }) => {
-    const myMetaData = getMetadata({ key, value });
-    return {
-        title: myMetaData.title,
-        description: myMetaData.description,
-        keywords: myMetaData.keywords
-    };
-};
 export function getAccordionMenuData(myRoutes) {
     const menuItems = myRoutes.map((thisRoute) => (thisRoute.routes
         ? { [thisRoute.name]: thisRoute.routes.map((subRoute) => ({ [subRoute.name]: subRoute.path })) }