@pixelated-tech/components 3.2.3 → 3.2.5

package/README.md

@@ -96,6 +96,11 @@ Components to help build websites quicker:
 1. Form Components and Form Builder
 1. Google Analytics, Map, and Search Integration
 1. Gravatar Card Integration
+1. Local Business JSON-LD Schema for SEO
+1. Website JSON-LD Schema for SEO
+1. Services JSON-LD Schema for SEO
+1. Recipe JSON-LD Schema for SEO
+1. BlogPosting JSON-LD Schema for SEO
 1. Page and Page Section Header Components
 1. Hubspot Calendar and Form Integration
 1. Instagram Image Fetch Integration

package/dist/components/carousel/carousel.css

@@ -146,6 +146,11 @@
     background-color: transparent;
 }
 
+.carousel-container .carousel-buttons button.carousel-button {
+	/* fix for buttonring microinteraction */
+	outline: none !important;
+}
+
 .carousel-arrow,
 .carousel-arrow-left, 
 .carousel-arrow-right {

package/dist/components/cms/contentful.items.components.js

@@ -215,7 +215,7 @@ export function ContentfulItemDetail(props) {
             }
         }
         fetchStuff();
-    }, []);
+    }, [props.entry_id, apiProps]);
     if (item && Object.keys(item) && Object.keys(item).length > 0) {
         const thisItem = { ...item };
         if (debug)

package/dist/components/cms/wordpress.components.js

@@ -7,17 +7,22 @@ import { getWordPressItems } from './wordpress.functions';
 import { Loading, ToggleLoading } from '../general/loading';
 import "./wordpress.css";
 // https://microformats.org/wiki/h-entry
-function decodeString(s) {
-    let temp = document.createElement('p');
-    temp.innerHTML = s;
-    const str = temp.textContent || temp.innerText;
-    temp = null;
-    return str;
+function decodeString(str) {
+    const textarea = { value: '' };
+    textarea.innerHTML = str;
+    return textarea.value || str;
 }
 export function BlogPostList(props) {
-    const { site, count } = props;
-    const [posts, setPosts] = useState([]);
+    const { site, count, posts: cachedPosts } = props;
+    const [posts, setPosts] = useState(cachedPosts ?? []);
     useEffect(() => {
+        // If posts are provided, use them directly without fetching
+        if (cachedPosts && cachedPosts.length > 0) {
+            const sorted = cachedPosts.sort((a, b) => ((a.date ?? '') < (b.date ?? '')) ? 1 : -1);
+            setPosts(sorted);
+            return;
+        }
+        // Otherwise, fetch from WordPress
         ToggleLoading({ show: true });
         (async () => {
             const data = (await getWordPressItems({ site, count })) ?? [];
@@ -25,7 +30,7 @@ export function BlogPostList(props) {
             setPosts(sorted);
             ToggleLoading({ show: false });
         })();
-    }, [site, count]);
+    }, [site, count, cachedPosts]);
     return (_jsxs(_Fragment, { children: [_jsx(Loading, {}), posts.map((post) => (_jsx(PageGridItem, { children: _jsx(BlogPostSummary, { ID: post.ID, title: post.title, date: post.date, excerpt: post.excerpt, URL: post.URL, categories: post.categories, featured_image: post.featured_image }) }, post.ID)))] }));
 }
 export function BlogPostSummary(props) {

package/dist/components/general/loading.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import "./loading.scss";
@@ -13,24 +14,24 @@ ToggleLoading.propTypes = {
     show: PropTypes.bool,
 };
 export function ToggleLoading(props) {
-    if (typeof window !== "undefined" && typeof document !== "undefined") {
-        const loadingElem = document.getElementById("loadingSpinner");
-        if (!loadingElem)
-            return;
-        if (props.show && props.show === true) {
+    if (typeof window === 'undefined' || typeof document === 'undefined')
+        return;
+    const loadingElem = document.getElementById("loadingSpinner");
+    if (!loadingElem)
+        return;
+    if (props.show === true) {
+        loadingElem.style.display = "inline-block";
+    }
+    else if (props.show === false) {
+        loadingElem.style.display = "none";
+    }
+    else {
+        // Toggle behavior
+        if (loadingElem.style.display === "none" || !loadingElem.style.display) {
             loadingElem.style.display = "inline-block";
-            return;
-        } // Show content
-        if (props.show && props.show === false) {
-            loadingElem.style.display = "none";
-            return;
-        } // Hide content
-        if (loadingElem && loadingElem.style.display === "none") {
-            loadingElem.style.display = "inline-block"; // Show content
         }
         else {
-            if (loadingElem)
-                loadingElem.style.display = "none"; // Hide content
+            loadingElem.style.display = "none";
         }
     }
 }

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

@@ -140,7 +140,7 @@ export function MenuAccordion(props) {
             document.removeEventListener('click', handleMenuClick);
         };
     }, []);
-    return (_jsx("div", { className: "accordionMenuWrapper accordionUp", children: _jsx("div", { className: "accordionMenu", id: "accordionMenu", children: _jsx(MenuAccordionGroup, { menuItems: menuItems, state: undefined }, "accordionRoot") }) }));
+    return (_jsx("div", { className: "accordionMenuWrapper accordionUp", suppressHydrationWarning: true, children: _jsx("div", { className: "accordionMenu", id: "accordionMenu", children: _jsx(MenuAccordionGroup, { menuItems: menuItems, state: undefined }, "accordionRoot") }) }));
 }
 /* ========== MENU GROUP ========== */
 MenuAccordionGroup.propTypes = {
@@ -158,17 +158,9 @@ MenuAccordionItem.propTypes = {
     target: PropTypes.string,
 };
 export function MenuAccordionItem(props) {
-    if (props.href && props.href.length > 0) {
-        if (props.target && props.target.length > 0) {
-            return (_jsx("li", { children: _jsx("a", { href: props.href, target: props.target, children: props.name }) }, "menu-item-" + props.name));
-        }
-        else {
-            return (_jsx("li", { children: _jsx("a", { href: props.href, children: props.name }) }, "menu-item-" + props.name));
-        }
-    }
-    else {
-        return (_jsx("li", { children: _jsx("a", { children: props.name }) }, "menu-item-" + props.name));
-    }
+    // Always render the same JSX structure to avoid hydration mismatch
+    // href will be undefined or an empty string, target might be undefined
+    return (_jsx("li", { children: _jsx("a", { href: props.href || undefined, target: props.target || undefined, children: props.name }) }, "menu-item-" + props.name));
 }
 /* ========== MENU BUTTON ========== */
 /*
@@ -177,7 +169,10 @@ https://www.unclebigbay.com/blog/building-the-world-simplest-hamburger-with-html
 MenuAccordionButton.propTypes = {};
 export function MenuAccordionButton() {
     function slideMobilePanel() {
-        window.moveMenu();
+        if (typeof window !== 'undefined' && window.moveMenu) {
+            window.moveMenu();
+        }
     }
-    return (_jsx("button", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, children: _jsx("span", { className: "hamburger text-outline", children: "|||" }) }));
+    // suppressHydrationWarning suppresses hydration mismatch warnings for this button
+    return (_jsx("button", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, suppressHydrationWarning: true, children: _jsx("span", { className: "hamburger text-outline", children: "|||" }) }));
 }

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

@@ -50,6 +50,10 @@
 	flex-basis: content; /* each item is its own size instead of auto */
 }
 
+.menu-item-hidden {
+	display: none;
+}
+
 .menu-item:hover {
 	background-color: var(--accent1-color);
 }

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import PropTypes from "prop-types";
@@ -26,6 +27,8 @@ export function MenuSimple(props) {
         return myItems;
     }
     function styleSelectedMenuItem() {
+        if (typeof window === 'undefined')
+            return;
         const menuitems = document.querySelectorAll('.menu-item a');
         const currentURL = window.location.href;
         menuitems.forEach((menuitem) => {
@@ -48,9 +51,11 @@ MenuSimpleItem.propTypes = {
     routes: PropTypes.array,
 };
 export function MenuSimpleItem(props) {
-    if (props.hidden)
-        return null;
-    return (_jsx("li", { className: 'menu-item', children: props.target
+    const classNames = ['menu-item'];
+    if (props.hidden) {
+        classNames.push('menu-item-hidden');
+    }
+    return (_jsx("li", { className: classNames.join(' '), 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/pagebuilder/components/SaveLoadSection.js

@@ -16,7 +16,7 @@ export function SaveLoadSection({ pageData, onLoad, apiEndpoint = '/api/pagebuil
     // Fetch list of saved pages on mount
     useEffect(() => {
         fetchPages();
-    }, []);
+    }, [apiEndpoint]);
     async function fetchPages() {
         try {
             const response = await fetch(`${apiEndpoint}/list`);

package/dist/components/seo/404.js

@@ -19,7 +19,7 @@ export function FourOhFour(props) {
         // const cloudinaryURL = getCloudinaryRemoteFetchURL({ url: images[randomIndex].img, product_env:"dlbon7tpq" });
         // setCloudinaryURL(cloudinaryURL);
         setImageURL(images[randomIndex].img);
-    }, []);
+    }, [images]);
     const config = usePixelatedConfig();
     if (randomIndex !== null && imageURL /* cloudinaryURL */ !== '') {
         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, 

package/dist/components/seo/schema-blogposting.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Converts WordPress REST API blog post to schema.org BlogPosting format
+ * @param post WordPress blog post
+ * @param includeFullContent Whether to include articleBody (true) or just description (false)
+ */
+export function mapWordPressToBlogPosting(post, includeFullContent = false) {
+    const decodeString = (s) => {
+        if (typeof document === 'undefined')
+            return s;
+        const temp = document.createElement('p');
+        temp.innerHTML = s;
+        return temp.textContent || temp.innerText || s;
+    };
+    const cleanContent = (content) => {
+        if (!content)
+            return '';
+        return decodeString(content).replace(/\[…\]/g, '').trim();
+    };
+    const description = cleanContent(post.excerpt);
+    const articleBody = includeFullContent ? cleanContent(post.content || '') : undefined;
+    const schema = {
+        '@context': 'https://schema.org',
+        '@type': 'BlogPosting',
+        headline: decodeString(post.title),
+        description: description || decodeString(post.title),
+        datePublished: post.date,
+        image: post.featured_image || post.post_thumbnail?.URL,
+        articleSection: Array.isArray(post.categories) && post.categories.length > 0
+            ? post.categories[0]
+            : 'Blog',
+        keywords: Array.isArray(post.categories) ? post.categories : [],
+    };
+    if (articleBody) {
+        schema.articleBody = articleBody;
+    }
+    if (post.modified) {
+        schema.dateModified = post.modified;
+    }
+    if (post.author) {
+        schema.author = {
+            '@type': 'Person',
+            name: post.author,
+        };
+    }
+    return schema;
+}
+export function SchemaBlogPosting({ post }) {
+    return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
+            __html: JSON.stringify(post),
+        } }));
+}
+export default SchemaBlogPosting;

package/dist/components/seo/schema-localbusiness.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LocalBusinessSchema({ name, streetAddress, addressLocality, addressRegion, postalCode, addressCountry = 'United States', telephone, url, logo, image, openingHours, description, email, priceRange, sameAs }) {
+    const schemaData = {
+        '@context': 'https://schema.org',
+        '@type': 'LocalBusiness',
+        name,
+        address: {
+            '@type': 'PostalAddress',
+            streetAddress,
+            addressLocality,
+            addressRegion,
+            postalCode,
+            addressCountry
+        },
+        telephone,
+        url,
+        ...(logo && { logo }),
+        ...(image && { image }),
+        ...(openingHours && { openingHours }),
+        ...(description && { description }),
+        ...(email && { email }),
+        ...(priceRange && { priceRange }),
+        ...(sameAs && sameAs.length > 0 && { sameAs })
+    };
+    return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(schemaData) } }));
+}
+export default LocalBusinessSchema;

package/dist/components/seo/schema-recipe.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function RecipeSchema({ recipe }) {
+    return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(recipe) } }));
+}
+export default RecipeSchema;

package/dist/components/seo/schema-services.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export function ServicesSchema({ provider, services }) {
+    const serviceObjects = services.map(service => ({
+        '@type': 'Service',
+        name: service.name,
+        description: service.description,
+        ...(service.url && { url: service.url }),
+        ...(service.image && { image: service.image }),
+        ...(service.areaServed && { areaServed: service.areaServed }),
+        provider: {
+            '@type': 'LocalBusiness',
+            name: provider.name,
+            url: provider.url,
+            ...(provider.logo && { logo: provider.logo }),
+            ...(provider.telephone && { telephone: provider.telephone }),
+            ...(provider.email && { email: provider.email })
+        }
+    }));
+    return (_jsx(_Fragment, { children: serviceObjects.map((service, idx) => (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify({
+                    '@context': 'https://schema.org',
+                    ...service
+                }) } }, idx))) }));
+}
+export default ServicesSchema;

package/dist/components/seo/schema-website.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function WebsiteSchema({ name, url, description, potentialAction }) {
+    const schemaData = {
+        '@context': 'https://schema.org',
+        '@type': 'WebSite',
+        name,
+        url,
+        ...(description && { description }),
+        ...(potentialAction && { potentialAction })
+    };
+    return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(schemaData) } }));
+}
+export default WebsiteSchema;

package/dist/components/shoppingcart/shoppingcart.components.js

@@ -245,7 +245,7 @@ export function AddToCartButton(props) {
     useEffect(() => {
         const myContent = _jsxs("div", { className: "centered", children: [_jsx("br", {}), _jsx("br", {}), "Item ", props.itemID, " has been added to your cart.", _jsx("br", {}), _jsx("br", {}), GoToCartButton({ href: "/cart", itemID: props.itemID }), _jsx("br", {}), _jsx("br", {})] });
         setModalContent(myContent);
-    }, []);
+    }, [props.itemID]);
     function handleClick(e) {
         props.handler(props.item);
         handleModalOpen(e.nativeEvent, "-" + props.itemID);

package/dist/components/structured/buzzwordbingo.js

@@ -18,7 +18,7 @@ export function BuzzwordBingo(props) {
     const [bingoWords, setBingoWords] = useState([]);
     useEffect(() => {
         setBingoWords(getBingoWords(buzzwords, 24));
-    }, []);
+    }, [buzzwords]);
     return (_jsxs("div", { className: "bingoCard rowfix-5col", children: [myBingoHeaders.map((word) => (_jsx(BingoHeader, { word: word }, word))), bingoWords.map((word) => (_jsx(BingoBox, { word: word }, word)))] }));
 }
 BingoHeader.propTypes = {

package/dist/components/structured/recipe.css

@@ -27,7 +27,7 @@
 
 /* https://microformats.org/wiki/h-recipe */
 
-.h-recipe { font-size: 12px; }
+.h-recipe { --do-nothing: true; }
 .h-recipe p { margin: 0px !important; }
 .h-recipe.p-name {
     background-color: #F9F9F9;

package/dist/components/structured/recipe.js

@@ -4,6 +4,55 @@ import PropTypes from 'prop-types';
 import { SmartImage } from '../cms/cloudinary.image';
 import { usePixelatedConfig } from '../config/config.client';
 import './recipe.css';
+export function mapSchemaRecipeToDisplay(schemaRecipe) {
+    // Parse ISO 8601 duration and convert to readable format
+    function parseDuration(iso8601) {
+        if (!iso8601 || iso8601 === 'PT0M')
+            return '';
+        const regex = /PT(?:(\d+)H)?(?:(\d+)M)?/;
+        const match = iso8601.match(regex);
+        if (!match)
+            return iso8601;
+        const hours = match[1] ? parseInt(match[1]) : 0;
+        const minutes = match[2] ? parseInt(match[2]) : 0;
+        if (hours > 0 && minutes > 0) {
+            return `${hours} hour${hours > 1 ? 's' : ''} ${minutes} minutes`;
+        }
+        else if (hours > 0) {
+            return `${hours} hour${hours > 1 ? 's' : ''}`;
+        }
+        else if (minutes > 0) {
+            return `${minutes} minutes`;
+        }
+        return '';
+    }
+    // Extract author name
+    const authorName = typeof schemaRecipe.author === 'string'
+        ? schemaRecipe.author
+        : schemaRecipe.author?.name || '';
+    // Convert instructions from HowToStep format to plain text
+    const instructions = Array.isArray(schemaRecipe.recipeInstructions)
+        ? schemaRecipe.recipeInstructions.map((instruction) => typeof instruction === 'string' ? instruction : instruction.text || '')
+        : [];
+    // Combine cook and prep times for display
+    let displayDuration = '';
+    if (schemaRecipe.totalTime) {
+        displayDuration = parseDuration(schemaRecipe.totalTime);
+    }
+    return {
+        name: schemaRecipe.name || '',
+        photo: schemaRecipe.image || '',
+        summary: schemaRecipe.description || '',
+        author: authorName,
+        published: schemaRecipe.datePublished || '',
+        duration: displayDuration,
+        yield: schemaRecipe.recipeYield || '',
+        ingredients: schemaRecipe.recipeIngredient || [],
+        instructions,
+        category: schemaRecipe.recipeCategory ? [schemaRecipe.recipeCategory] : [],
+        license: schemaRecipe.license || ''
+    };
+}
 /* ========== RECIPE BOOK ========== */
 RecipeBook.propTypes = {
     recipeData: PropTypes.shape({
@@ -25,9 +74,10 @@ export function RecipeBook(props) {
             myElems[category] = [];
             for (const recipeKey in recipeBookItems) {
                 const recipe = recipeBookItems[recipeKey];
-                const cats = recipe.properties.category;
-                if (cats.includes(category)) {
-                    myElems[category].push(recipe);
+                const outputRecipe = mapSchemaRecipeToDisplay(recipe);
+                const recipeCat = outputRecipe.category;
+                if (recipeCat.includes(category)) {
+                    myElems[category].push(outputRecipe);
                 }
             }
         }
@@ -41,7 +91,7 @@ export function RecipeBook(props) {
             myElems.push(_jsx(RecipeCategory, { id: cID, className: 'h-recipe-category', category: category, showOnly: showOnlyCat }, cID));
             for (const recipeKey in recipeElems[category]) {
                 const recipe = recipeElems[category][recipeKey];
-                const cats = recipe.properties.category;
+                const cats = recipe.category;
                 const rID = cID + '-r' + (parseInt(recipeKey, 10) + 1);
                 if (cats.includes(category)) {
                     myElems.push(_jsx(RecipeBookItem, { id: rID, recipeData: recipe, showOnly: showOnlyRecipe }, rID));
@@ -92,8 +142,7 @@ RecipeBookItem.propTypes = {
 };
 export function RecipeBookItem(props) {
     const config = usePixelatedConfig();
-    const recipeData = props.recipeData;
-    const recipe = recipeData.properties;
+    const recipe = props.recipeData;
     const ingredients = recipe.ingredients.map((ingredient, iKey) => _jsx("li", { className: "p-ingredient", children: ingredient }, iKey));
     const instructions = recipe.instructions.map((instruction, iKey) => _jsx("li", { className: "p-instruction", children: instruction }, iKey));
     /* ? <img className='u-photo' src={recipe.photo} title={recipe.name} alt={recipe.name} /> */
@@ -124,9 +173,10 @@ export function RecipePickList(props) {
             const recipeDataItems = recipeData.items;
             for (const recipeKey in recipeDataItems) {
                 const recipe = recipeDataItems[recipeKey];
-                const cats = recipe.properties.category;
+                const outputRecipe = mapSchemaRecipeToDisplay(recipe);
+                const cats = outputRecipe.category;
                 if (cats.includes(category)) {
-                    myOpts.push(_jsx("option", { value: cID + '-r' + rID, children: recipe.properties.name }, cID + '-r' + rID));
+                    myOpts.push(_jsx("option", { value: cID + '-r' + rID, children: outputRecipe.name }, cID + '-r' + rID));
                     rID += 1;
                 }
             }
@@ -143,7 +193,7 @@ export function RecipePickList(props) {
     }
     useEffect(() => {
         setRecipeOptions(generateMyOptions());
-    }, []);
+    }, [props.recipeData, props.recipeCategories]);
     return (_jsx("form", { children: _jsx("select", { id: "recipe-list", name: "recipe-list", onChange: recipeListChanged, children: recipeOptions }) }));
 }
 /* ========== RECIPE BACK TO TOP ========== */

package/dist/components/structured/socialcard.js

@@ -293,7 +293,7 @@ export function SocialCards(props) {
             }
         };
         generateSocialCards();
-    }, []);
+    }, [props.sources]);
     if (state.loading) {
         return (_jsx(SocialCardsLoading, {}));
     }