@pixelated-tech/components 3.2.4 → 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/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/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/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;
                 }
             }