@pixelated-tech/components 3.2.4 → 3.2.6

package/README.md

@@ -82,6 +82,7 @@ To get a local copy up and running follow these simple example steps.
 
 Components to help build websites quicker:
 1. Centralized 404 Error Page
+1. Accordion Component
 1. Buzzword Bingo Cards
 1. Page Callouts
 1. Image Carousel - Page, Header, and Simple
@@ -96,6 +97,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/callout/callout.js

@@ -86,11 +86,29 @@ export function CalloutHeader({ title, url, target }) {
 /* ========== CALLOUT BUTTON ========== */
 CalloutButton.propTypes = {
     title: PropTypes.string.isRequired,
-    url: PropTypes.string,
+    url: PropTypes.string.isRequired,
     target: PropTypes.string
 };
+/* export function CalloutButton( { title, url, target } : CalloutButtonType) {
+    return (
+        <div className="callout-button">
+            { (url)
+                ? <button type="button" className="callout-button"><a href={url || ""} target={target || ""} rel={target=="_blank" ? "noopener noreferrer" : ""}>{title}</a></button>
+                : null
+            }
+        </div>
+    );
+} */
 export function CalloutButton({ title, url, target }) {
+    const handleClick = () => {
+        if (target === '_blank') {
+            window.open(url, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            window.location.href = url;
+        }
+    };
     return (_jsx("div", { className: "callout-button", children: (url)
-            ? _jsx("button", { type: "button", className: "callout-button", children: _jsx("a", { href: url || "", target: target || "", rel: target == "_blank" ? "noopener noreferrer" : "", children: title }) })
+            ? _jsx("button", { type: "button", className: "callout-button", onClick: handleClick, children: title })
             : null }));
 }

package/dist/components/callout/callout.scss

@@ -142,10 +142,17 @@
     /* cursor: pointer */
 }
 
-.callout .callout-button a {
-    display: inline-block;
+.callout .callout-button button:hover { 
+	color: #369;
+	text-decoration: underline;
+	cursor: pointer;
 }
 
+
+/* .callout .callout-button a {
+    display: inline-block;
+} */
+
 /* ========================================
 =============  BOXED CALLOUT  =============
 ======================================== */

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

@@ -135,7 +135,7 @@ export function ContentfulListItem(props) {
                             ? _jsx(ContentfulItemHeader, { url: itemURL, target: itemURLTarget, title: thisItem.fields.title })
                             : _jsx(ContentfulItemHeader, { title: thisItem.fields.title }) }), _jsxs("div", { className: "contentful-item-details grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.sys.id] }), _jsxs("div", { children: [_jsx("b", { children: "UPC ID: " }), thisItem.fields.id] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.fields.quantity] }), _jsxs("div", { children: [_jsx("b", { children: "Brand / Model: " }), thisItem.fields.brand, " ", thisItem.fields.model] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.fields.date] })] }), _jsx("div", { className: "contentful-item-price", children: itemURL
                             ? _jsxs("a", { href: itemURL, target: itemURLTarget, rel: "noreferrer", children: ["$", thisItem.fields.price, " USD"] })
-                            : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsxs("div", { className: "contentful-itemAddToCart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.sys.id }), _jsx(AddToCartButton, { handler: AddToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id })] })] })] }));
+                            : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsxs("div", { className: "contentful-item-addtocart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.sys.id }), _jsx(AddToCartButton, { handler: AddToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id })] })] })] }));
 }
 /* ========== CONTENTFUL ITEM HEADER ========== */
 ContentfulItemHeader.propTypes = {
@@ -235,7 +235,7 @@ export function ContentfulItemDetail(props) {
                             ? _jsx(ContentfulItemHeader, { url: itemURL, title: thisItem.fields.title })
                             : _jsx(ContentfulItemHeader, { title: thisItem.fields.title }) }), _jsx("br", {}), _jsx("div", { className: "contentful-item-photo-carousel grid-s1-e7", children: _jsx(Carousel, { cards: cards, draggable: true, imgFit: "contain" }) }), _jsxs("div", { className: "grid-s7-e13", children: [_jsx("div", { className: "contentful-item-details grid12", children: _jsx("div", { dangerouslySetInnerHTML: { __html: thisItem.fields.description.replace(/(<br\s*\/?>\s*){2,}/gi, '') } }) }), _jsx("br", {}), _jsxs("div", { className: "contentful-item-details grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.sys.id] }), _jsxs("div", { children: [_jsx("b", { children: "UPC ID: " }), thisItem.fields.id] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.fields.quantity] }), _jsxs("div", { children: [_jsx("b", { children: "Brand / Model: " }), thisItem.fields.brand, " ", thisItem.fields.model] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.fields.date] }), _jsx("br", {})] }), _jsx("div", { className: "contentful-item-price", children: itemURL
                                     ? _jsxs("a", { href: itemURL, target: itemURLTarget, rel: "noreferrer", children: ["$", thisItem.fields.price, " USD"] })
-                                    : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsx("div", { className: "contentful-itemAddToCart", children: _jsx(AddToCartButton, { handler: AddToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id }) })] })] }) }));
+                                    : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsx("div", { className: "contentful-item-addtocart", children: _jsx(AddToCartButton, { handler: AddToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id }) })] })] }) }));
     }
     else {
         return (_jsx(_Fragment, { children: _jsx("div", { id: "contentful-items", className: "contentful-items", children: _jsx("div", { className: "centered", children: "Loading..." }) }) }));

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 = document.createElement('textarea');
+    textarea.innerHTML = str;
+    return textarea.value;
 }
 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/accordion.css

@@ -0,0 +1,114 @@
+/* ========================================
+=====    ACCORDION COMPONENT       =====
+======================================== */
+
+.accordion {
+	margin: 0;
+	padding: 0;
+}
+
+.accordion-item {
+	margin-bottom: 0.5rem;
+	border: 1px solid #e1e5e9;
+	border-radius: 4px;
+	background: #fff;
+}
+
+.accordion-title {
+	cursor: pointer;
+	padding: 1rem;
+	font-size: 1rem;
+	font-weight: 600;
+	color: #1a202c;
+	background: none;
+	border: none;
+	width: 100%;
+	text-align: left;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	transition: background-color 0.2s ease;
+}
+
+.accordion-title:hover {
+	background-color: #f7fafc;
+}
+
+.accordion-title:focus {
+	outline: 2px solid #3182ce;
+	outline-offset: -2px;
+	background-color: #f7fafc;
+}
+
+/* Hide default triangle and add custom one */
+.accordion-title::before {
+	content: '▶';
+	font-size: 0.75rem;
+	color: #718096;
+	transition: transform 0.2s ease;
+	flex-shrink: 0;
+}
+
+details[open] .accordion-title::before {
+	content: '🔽';
+	transform: rotate(0deg);
+}
+
+/* Remove default marker */
+.accordion-title::-webkit-details-marker,
+.accordion-title::marker {
+	display: none;
+}
+
+.accordion-title h3 {
+	margin: 0;
+	font-size: inherit;
+	font-weight: inherit;
+	color: inherit;
+	flex: 1;
+}
+
+.accordion-content {
+	padding: 1rem;
+	border-top: 1px solid #e1e5e9;
+	background-color: #f7fafc;
+}
+
+.accordion-content p {
+	margin: 0 0 1rem 0;
+}
+
+.accordion-content p:last-child {
+	margin-bottom: 0;
+}
+
+/* Animation for smooth expand/collapse */
+.accordion-content {
+	animation: accordionSlideDown 0.3s ease-out;
+}
+
+details[open] .accordion-content {
+	animation: accordionSlideDown 0.3s ease-out;
+}
+
+@keyframes accordionSlideDown {
+	from {
+		opacity: 0;
+		transform: translateY(-10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+	.accordion-content {
+		animation: none;
+	}
+
+	.accordion-title::before {
+		transition: none;
+	}
+}

package/dist/components/general/accordion.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import './accordion.css';
+Accordion.propTypes = {
+    items: PropTypes.arrayOf(PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+    })).isRequired,
+};
+export function Accordion({ items }) {
+    return (_jsx("div", { className: "accordion", children: items?.map((item, index) => (item ? (_jsxs("details", { className: "accordion-item", children: [_jsx("summary", { className: "accordion-title", children: _jsx("h3", { id: `accordion-header-${index}`, children: item.title }) }), _jsx("div", { className: "accordion-content", role: "region", "aria-labelledby": `accordion-header-${index}`, children: typeof item.content === 'string' ? (_jsx("p", { children: item.content })) : (item.content) })] }, index)) : null)) }));
+}

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
@@ -86,14 +87,10 @@ export function MenuExpando(props) {
     }, []);
     function generateMenuItems() {
         const myItems = [];
-        console.log('MenuExpando props.menuItems:', props.menuItems);
-        console.log('Is array?', Array.isArray(props.menuItems));
         // Handle both object format (name: href) and array format (with name/path properties)
         if (Array.isArray(props.menuItems)) {
             // Array format like MenuAccordion
-            console.log('Processing as array, length:', props.menuItems.length);
             for (const item of props.menuItems) {
-                console.log('Item:', item);
                 if (item.routes && item.routes.length > 0) {
                     // Item has nested routes - create expandable submenu
                     myItems.push(_jsx("li", { children: _jsxs("details", { className: "menuExpandoNested", children: [_jsx("summary", { children: _jsx("a", { href: item.path, children: item.name }) }), _jsx("ul", { children: item.routes.map((route) => (_jsx(MenuExpandoItem, { name: route.name, href: route.path }, route.name))) })] }) }, item.name));
@@ -106,12 +103,10 @@ export function MenuExpando(props) {
         }
         else {
             // Object format
-            console.log('Processing as object');
             for (const itemKey in props.menuItems) {
                 myItems.push(_jsx(MenuExpandoItem, { name: itemKey, href: props.menuItems[itemKey] }, itemKey));
             }
         }
-        console.log('Generated items count:', myItems.length);
         return myItems;
     }
     return (_jsx("div", { className: "menuExpando", id: "menuExpando", children: _jsxs("details", { className: "menuExpandoWrapper", id: "menuExpandoWrapper", ref: detailsRef, children: [_jsx("summary", {}), _jsx("ul", { ref: ulRef, children: generateMenuItems() })] }) }));

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.css

@@ -104,6 +104,14 @@
     height: auto;
     margin: 5px auto;
 }
+
+.pixCartButton:hover,
+.pixCart .pixCartButton:hover,
+#pixCartButton.pixCartButton:hover {
+    color: #369;
+	text-decoration: underline;
+}
+
 #pixCartButton.pixCartButton {
     width: 80px;
     min-width: 80px;
@@ -115,6 +123,8 @@
 
 
 
+
+
 input[readonly] {
   border: none;
   background-color: transparent;

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