@pixelated-tech/components 3.2.12 → 3.2.14

package/README.COMPONENTS.md

@@ -44,6 +44,7 @@ This guide provides detailed API documentation and usage examples for all Pixela
 - [GoogleMap](#googlemap)
 - [GoogleSearch](#googlesearch)
 - [JSON-LD Schemas](#json-ld-schemas)
+- [Manifest](#manifest)
 - [MetadataComponents](#metadatacomponents)
 
 ### Shopping Cart
@@ -881,11 +882,16 @@ import { SaveLoadSection } from '@pixelated-tech/components';
 
 Structured data components for SEO.
 
+**Configuration**: The LocalBusiness and Website schema components can use `siteInfo` data from the routes JSON file as fallback values when props are not explicitly provided. This allows for centralized site-wide configuration of business/website information.
+
 #### LocalBusiness
 
+Generates LocalBusiness JSON-LD structured data. When props are not provided, falls back to `siteInfo` configuration from routes JSON.
+
 ```tsx
 import { LocalBusinessSchema } from '@pixelated-tech/components';
 
+// With explicit props
 <LocalBusinessSchema
   name="My Business"
   address={{
@@ -896,6 +902,19 @@ import { LocalBusinessSchema } from '@pixelated-tech/components';
   }}
   telephone="(555) 123-4567"
 />
+
+// Or with siteinfo object (recommended)
+<LocalBusinessSchema
+  siteInfo={siteInfoData}
+  streetAddress="123 Main St"
+  addressLocality="City"
+  addressRegion="State"
+  postalCode="12345"
+/>
+
+// Or with minimal props (uses siteInfo fallbacks)
+<LocalBusinessSchema />
+```
 ```
 
 #### Recipe
@@ -941,9 +960,12 @@ import { ServicesSchema } from '@pixelated-tech/components';
 
 #### Website
 
+Generates Website JSON-LD structured data. When props are not provided, falls back to `siteInfo` configuration from routes JSON.
+
 ```tsx
 import { WebsiteSchema } from '@pixelated-tech/components';
 
+// With explicit props
 <WebsiteSchema
   name="My Website"
   url="https://example.com"
@@ -953,6 +975,22 @@ import { WebsiteSchema } from '@pixelated-tech/components';
     logo: "https://example.com/logo.png"
   }}
 />
+
+// Or with siteinfo object (recommended)
+<WebsiteSchema
+  siteInfo={siteInfoData}
+  potentialAction={{
+    '@type': 'SearchAction',
+    target: {
+      '@type': 'EntryPoint',
+      urlTemplate: 'https://example.com/search?q={search_term}'
+    }
+  }}
+/>
+
+// Or with minimal props (uses siteInfo fallbacks)
+<WebsiteSchema />
+```
 ```
 
 #### BlogPosting
@@ -1057,6 +1095,52 @@ import { GoogleSearch } from '@pixelated-tech/components';
 | `apiKey` | `string` | - | Google API key |
 | `placeholder` | `string` | `'Search...'` | Search input placeholder |
 
+### Manifest
+
+Generates a complete PWA manifest from siteinfo configuration. This component centralizes PWA manifest generation and ensures consistency across sites.
+
+```tsx
+import { Manifest } from '@pixelated-tech/components';
+
+// Basic usage with siteinfo
+export default function manifest() {
+  return Manifest({ siteInfo: myRoutes.siteInfo });
+}
+
+// With custom properties for site-specific overrides
+export default function manifest() {
+  return Manifest({ 
+    siteInfo: myRoutes.siteInfo,
+    customProperties: {
+      orientation: 'portrait',
+      categories: ['business', 'productivity'],
+      lang: 'en-US'
+    }
+  });
+}
+```
+
+#### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `siteInfo` | `SiteInfo` | - | Site configuration object from routes.json |
+| `customProperties` | `Partial<MetadataRoute.Manifest>` | `{}` | Optional custom manifest properties to override defaults |
+
+#### Generated Properties
+
+The component automatically generates these manifest properties from `siteInfo`:
+
+- `name` & `short_name`: From `siteInfo.name`
+- `description`: From `siteInfo.description`
+- `theme_color`: From `siteInfo.theme_color`
+- `background_color`: From `siteInfo.background_color`
+- `display`: From `siteInfo.display`
+- `homepage_url`: From `siteInfo.url`
+- `developer`: Object with `name` and `url` from siteInfo
+- `icons`: Array with favicon configuration
+- `author`: From `siteInfo.author` (non-standard property)
+- `default_locale`: From `siteInfo.default_locale`
+
 ### MetadataComponents
 
 Dynamic meta tag injection for SEO.
@@ -1312,7 +1396,19 @@ import { NerdJoke } from '@pixelated-tech/components';
 
 ### PixelatedClientConfigProvider Setup
 
-For components that use external services, wrap your app with the configuration provider:
+The PixelatedClientConfigProvider enables components to access centralized configuration data. Configuration can be loaded from environment variables or a `routes.json` file in your project.
+
+**Config Consumers:**
+- **LocalBusinessSchema & WebsiteSchema**: Use `siteInfo` for fallback business/website data
+- **CloudinaryImage & SmartImage**: Use `cloudinary` for image optimization settings
+- **WordPress**: Use `wordpress` for API connections
+- **ContentfulItems**: Use `contentful` for CMS integration
+- **eBay**: Use `ebay` for store integration
+- **Flickr**: Use `flickr` for photo gallery integration
+- **GoogleAnalytics**: Use `googleAnalytics` for tracking
+- **HubSpot**: Use `hubspot` for CRM integration
+- **PayPal**: Use `paypal` for payment processing
+- **Proxy**: Use `proxy` for API proxy settings
 
 ```tsx
 // app/layout.tsx (Next.js 13+ App Router)
@@ -1327,15 +1423,63 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <PixelatedClientConfigProvider config={{
+          // Site-wide business/website information (used by schema components)
+          siteInfo: {
+            name: 'Your Business Name',
+            description: 'Your business description',
+            url: 'https://yourwebsite.com',
+            email: 'contact@yourwebsite.com',
+            telephone: '(555) 123-4567',
+            address: {
+              streetAddress: '123 Main St',
+              addressLocality: 'City',
+              addressRegion: 'State',
+              postalCode: '12345',
+              addressCountry: 'United States'
+            },
+            openingHours: 'Mo-Fr 09:00-18:00'
+          },
+          // Image optimization
           cloudinary: {
             product_env: 'production',
             baseUrl: 'https://res.cloudinary.com/your-account',
             transforms: 'f_auto,q_auto,w_auto'
           },
+          // CMS integrations
           wordpress: {
             site: 'your-blog.wordpress.com'
           },
-          // Add other service configurations as needed
+          contentful: {
+            spaceId: 'your-space-id',
+            accessToken: 'your-access-token',
+            environment: 'master'
+          },
+          // E-commerce
+          ebay: {
+            appId: 'your-app-id',
+            globalId: 'EBAY-US'
+          },
+          paypal: {
+            sandboxPayPalApiKey: 'your-sandbox-key',
+            payPalApiKey: 'your-production-key'
+          },
+          // Analytics & CRM
+          googleAnalytics: {
+            id: 'GA-XXXXXXXXX'
+          },
+          hubspot: {
+            portalId: 'your-portal-id',
+            formId: 'your-form-id'
+          },
+          // Media services
+          flickr: {
+            api_key: 'your-flickr-api-key',
+            user_id: 'your-user-id'
+          },
+          // API proxy
+          proxy: {
+            proxyURL: 'https://proxy.pixelated.tech/prod/proxy?url='
+          }
         }}>
           {children}
         </PixelatedClientConfigProvider>
@@ -1345,52 +1489,6 @@ export default function RootLayout({
 }
 ```
 
-### Cloudinary Configuration
-
-```tsx
-const cloudinaryConfig = {
-  product_env: 'production',           // Environment identifier
-  baseUrl: 'https://res.cloudinary.com/your-account',  // Your Cloudinary URL
-  transforms: 'f_auto,q_auto,w_auto'   // Default transformations
-};
-```
-
-### WordPress Configuration
-
-```tsx
-const wordpressConfig = {
-  site: 'your-blog.wordpress.com',     // WordPress site URL
-  apiVersion: '1.1'                    // API version (optional)
-};
-```
-
-### Contentful Configuration
-
-```tsx
-const contentfulConfig = {
-  spaceId: 'your-space-id',            // Contentful space ID
-  accessToken: 'your-access-token',    // Contentful access token
-  environment: 'master'                // Contentful environment
-};
-```
-
-### Other Service Configurations
-
-```tsx
-const config = {
-  calendly: {
-    username: 'your-calendly-username'
-  },
-  hubspot: {
-    portalId: 'your-portal-id',
-    formId: 'your-form-id'
-  },
-  instagram: {
-    accessToken: 'your-access-token'
-  }
-};
-```
-
 ---
 
 ## TypeScript Support

package/README.md

@@ -168,106 +168,11 @@ npm run storybook
 **Access locally at:** `http://localhost:6006`
 
 
-
-## 🧪 Testing
-
-### Overview
-
-**Current Status**: ✅ 2,184 tests passing across 59 test files (7 skipped)
-
-| Metric | Value |
-|--------|-------|
-| Test Files | 59 |
-| Total Tests | 2,184 |
-| Skipped Tests | 7 |
-| Coverage (Statements) | 79.26% |
-| Coverage (Lines) | 82.73% |
-| Coverage (Functions) | 84.73% |
-| Coverage (Branches) | 67.19% |
-| Test Framework | Vitest 4.x |
-| Testing Library | @testing-library/react + jsdom |
-
-### Quick Start
-
-```bash
-npm run test              # Watch mode
-npm run test:ui          # Interactive UI dashboard
-npm run test:coverage    # Generate coverage reports
-npm run test:run         # Single run (for CI)
-```
-
-### Component Coverage
-
-**52 of 52 Frontend Components + 2 Utility Modules Fully Tested (100%)**
-
-#### Component Coverage (Sorted by Statement Coverage)
-- **sitemap.ts**: 100% statements 
-- **google.reviews.functions.ts**: 100% statements
-- **googlesearch.tsx**: 100% statements
-- **formvalidations.tsx**: 100% statements
-- **tiles.tsx**: 100% statements
-- **markdown.tsx**: 100% statements
-- **buzzwordbingo.tsx**: 100% statements
-- **timeline.tsx**: 100% statements
-- **config.server.tsx**: 100% statements
-- **modal.tsx**: 100% statements
-- **google.reviews.components.tsx**: 100% statements
-- **recipe.tsx**: 98.8% statements
-- **sidepanel.tsx**: 97.5% statements
-- **resume.tsx**: 94.38% statements
-- **callout.tsx**: 93.75% statements
-- **contentful.delivery.ts**: 92.5% statements
-- **css.tsx**: 91.42% statements
-- **functions.ts**: 90.9% statements
-- **config.client.tsx**: 90% statements
-- **api.ts**: 87.5% statements
-- **loading.tsx**: 85.71% statements
-- **table.tsx**: 84.48% statements
-- **cloudinary.ts**: 83.33% statements
-- **shoppingcart.functions.ts**: 81.69% statements
-- **carousel.tsx**: 76.19% statements
-- **nerdjoke.tsx**: 70.58% statements
-- **menu-accordion.tsx**: 68.13% statements
-- **carousel.tsx**: 58.49% statements
-- **config.ts**: 55.17% statements
-
-### Test Configuration
-
-**Coverage Summary (latest run)**:
-- **Statements**: 79.26%
-- **Lines**: 82.73%
-- **Functions**: 84.73%
-- **Branches**: 67.19%
-
-**Coverage Targets** (configured in `vitest.config.ts`):
-- **Statements**: 70% threshold
-- **Lines**: 70% threshold
-- **Functions**: 70% threshold
-- **Branches**: 60% threshold
-
-**Coverage Thresholds in vitest.config.ts**:
-- Lines: 70% threshold
-- Functions: 70% threshold
-- Branches: 60% threshold
-- Statements: 70% threshold
-
-**Test Environment**: jsdom with @testing-library/react  
-**Test Pattern**: Data-focused validation + behavioral testing
-
-### Tools & Dependencies
-
-| Tool | Purpose |
-|------|---------|
-| Vitest 4.x | Test runner |
-| @testing-library/react | Component testing utilities |
-| jsdom | DOM environment for tests |
-| v8 | Coverage reporting |
-
-
 <!-- ROADMAP -->
 ## Roadmap
 
 ### New Components
+- [ ] **IN PROGRESS** - Testimonial Block (Nextdoor/Yelp/Google): ingest review feeds + render carousel/grid.
 - [ ] **ON HOLD** LinkedIn Recommendations Integration (Not possible with current LinkedIn API)
 - [ ] **ON HOLD** eBay Feedback Integration - requires user OAuth login
 - [ ] **ON HOLD** Yelp Recommendations integration (Cost Prohibitive)
@@ -277,7 +182,8 @@ npm run test:run         # Single run (for CI)
 - [ ] Buffer Integration (or Sendible, Sprout Social, Hootsuite)
 - [ ] Zapier Integration
 - [ ] Hero Banner: headline, subtext, CTA, background image/video, overlay.
-- [ ] **IN PROGRESS** - Testimonial Block (Nextdoor/Yelp/Google): ingest review feeds + render carousel/grid.
+- [ ] Accessibility Enhancer: wrapper component that automatically improves accessibility across Pixelated sites by adding ARIA labels, roles, and states to existing components. Includes color contrast checking, keyboard navigation helpers, and alt-text suggestions for images.
+- [ ] SEO Dashboard with AI Integration: component that analyzes site content, suggests optimizations, integrates with AI for meta descriptions and keyword research.
 
 ### CI / CD Improvements
 - [ ] Add CI workflow to run tests and lints on pull requests.
@@ -298,8 +204,15 @@ npm run test:run         # Single run (for CI)
 - [ ] **GoogleReviews Component**: Add API key to config provider instead of hardcoding.
 - [ ] **Instagram Component**: Add accessToken and userId to config provider for centralized API credentials.
 
-
-
+### SSR Fixes
+- [ ] **cloudinary.image.tsx** (`SmartImage`): Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
+- [ ] **wordpress.components.tsx** (`BlogPostList`, etc.): Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts  
+- [ ] **pagebuilder/form/formcomponents.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
+- [ ] **cms/hubspot.components.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
+- [ ] **cms/gravatar.components.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
+- [ ] **structured/recipe.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
+- [ ] **structured/timeline.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
+- [ ] **structured/markdown.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
 
 See the [open issues](https://github.com/brianwhaley/pixelated-components/issues) for a full list of proposed features (and known issues).
 
@@ -344,7 +257,7 @@ Distributed under the MIT License. See `LICENSE.txt` for more information.
 <!-- CONTACT -->
 ## Contact
 
-Your Name - [@brianwhaley](https://twitter.com/@brianwhaley) - brian.whaley@gmail.com
+Brian Whaley - [@brianwhaley](https://twitter.com/@brianwhaley) - brian.whaley@gmail.com
 
 Project Link: [https://github.com/brianwhaley/pixelated-components](https://github.com/brianwhaley/pixelated-components)
 
@@ -353,6 +266,123 @@ Project Link: [https://github.com/brianwhaley/pixelated-components](https://gith
 
 
 
+## 🧪 Testing
+
+### Overview
+
+**Current Status**: ✅ 2,210 tests passing across 65 test files
+
+| Metric | Value |
+|--------|-------|
+| Test Files | 65 |
+| Total Tests | 2,210 |
+| Coverage (Statements) | 77.92% |
+| Coverage (Lines) | 81.09% |
+| Coverage (Functions) | 81.27% |
+| Coverage (Branches) | 67.31% |
+| Test Framework | Vitest 4.x |
+| Testing Library | @testing-library/react + jsdom |
+
+### Quick Start
+
+```bash
+npm run test              # Watch mode
+npm run test:ui          # Interactive UI dashboard
+npm run test:coverage    # Generate coverage reports
+npm run test:run         # Single run (for CI)
+```
+
+### Component Coverage
+
+**Component Coverage Summary**
+
+#### Component Coverage (Sorted by Statement Coverage)
+- **config.server.tsx**: 100% statements
+- **modal.tsx**: 100% statements
+- **accordion.tsx**: 100% statements
+- **tiles.tsx**: 100% statements
+- **googlesearch.tsx**: 100% statements
+- **formvalidations.tsx**: 100% statements
+- **buzzwordbingo.tsx**: 100% statements
+- **timeline.tsx**: 100% statements
+- **markdown.tsx**: 100% statements
+- **ComponentPropertiesForm.tsx**: 100% statements
+- **ComponentSelector.tsx**: 100% statements
+- **ComponentTree.tsx**: 100% statements
+- **schema-localbusiness.tsx**: 100% statements
+- **schema-recipe.tsx**: 100% statements
+- **schema-services.tsx**: 100% statements
+- **schema-website.tsx**: 100% statements
+- **google.reviews.functions.ts**: 100% statements
+- **sidepanel.tsx**: 97.5% statements
+- **config.ts**: 96.55% statements
+- **google.reviews.components.tsx**: 95.83% statements
+- **schema-blogposting.tsx**: 95.23% statements
+- **recipe.tsx**: 94.59% statements
+- **resume.tsx**: 94.38% statements
+- **contentful.delivery.ts**: 92.5% statements
+- **css.tsx**: 91.42% statements
+- **functions.ts**: 90.9% statements
+- **config.client.tsx**: 90% statements
+- **menu-expando.tsx**: 90.12% statements
+- **cloudinary.ts**: 83.33% statements
+- **form.tsx**: 83.2% statements
+- **shoppingcart.functions.ts**: 81.69% statements
+- **callout.tsx**: 80% statements
+- **microinteractions.tsx**: 80% statements
+- **sitemap.ts**: 76.05% statements
+- **manifest.tsx**: 75% statements
+- **carousel.tsx**: 71.69% statements
+- **nerdjoke.tsx**: 69.44% statements
+- **menu-accordion.tsx**: 68.13% statements
+- **semantic.tsx**: 63.51% statements
+- **flickr.ts**: 51.42% statements
+- **PageEngine.tsx**: 48% statements
+- **SaveLoadSection.tsx**: 84.84% statements
+- **table.tsx**: 84.48% statements
+- **loading.tsx**: 85.71% statements
+- **socialcard.tsx**: 29.5% statements
+- **PageBuilderUI.tsx**: 26.66% statements
+
+### Testing Next Steps
+
+#### Integration Testing Gaps
+- [ ] **Cross-component interactions** - Test how components work together (e.g., forms with validation, carousels with loading states)
+- [ ] **Form validation edge cases** - Test URL validation, required fields, and complex validation rules under various conditions
+- [ ] **CMS API integrations** - Test API failures, rate limiting, authentication errors, and network timeouts
+- [ ] **Responsive design breakpoints** - Test component behavior across different screen sizes and device types
+- [ ] **Accessibility (a11y) compliance** - Test keyboard navigation, screen reader compatibility, and ARIA attributes
+
+### Test Configuration
+
+
+**Coverage Targets** (configured in `vitest.config.ts`):
+- **Statements**: 70% threshold
+- **Lines**: 70% threshold
+- **Functions**: 70% threshold
+- **Branches**: 60% threshold
+
+**Coverage Thresholds in vitest.config.ts**:
+- Lines: 70% threshold
+- Functions: 70% threshold
+- Branches: 60% threshold
+- Statements: 70% threshold
+
+**Test Environment**: jsdom with @testing-library/react  
+**Test Pattern**: Data-focused validation + behavioral testing
+
+### Tools & Dependencies
+
+| Tool | Purpose |
+|------|---------|
+| Vitest 4.x | Test runner |
+| @testing-library/react | Component testing utilities |
+| jsdom | DOM environment for tests |
+| v8 | Coverage reporting |
+
+
+
+
 
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->

package/dist/components/callout/callout.scss

@@ -149,9 +149,6 @@
 }
 
 
-/* .callout .callout-button a {
-    display: inline-block;
-} */
 
 /* ========================================
 =============  BOXED CALLOUT  =============

package/dist/components/cms/flickr.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { generateURL } from '../utilities/api';
 import { mergeDeep } from '../utilities/functions';
 const defaultFlickr = {
     flickr: {
@@ -57,7 +56,14 @@ export function GetFlickrData(props) {
         flickrConfig = mergeDeep(flickrConfig, props.flickr);
     }
     const flickr = flickrConfig;
-    const myURL = generateURL(flickr.baseURL, flickr.urlProps);
+    // Build URL with query parameters
+    let myURL = flickr.baseURL;
+    let queryParams = '';
+    Object.keys(flickr.urlProps).forEach((prop) => {
+        const value = flickr.urlProps[prop];
+        queryParams += (queryParams.length === 0) ? prop + '=' + value : '&' + prop + '=' + value;
+    });
+    myURL += queryParams;
     const fetchFlickrData = async () => {
         try {
             const response = await fetch(myURL);

package/dist/components/cms/google.reviews.components.js

@@ -50,5 +50,5 @@ export function GoogleReviewsCard(props) {
     if (error) {
         return (_jsx("div", { className: "google-reviews-card", children: _jsxs("p", { className: "error", children: ["Error: ", error] }) }));
     }
-    return (_jsxs("div", { className: "google-reviews-card", children: [_jsx("h3", { children: place?.name || 'Reviews' }), place?.formatted_address && (_jsx("p", { className: "address", children: place.formatted_address })), reviews.length === 0 ? (_jsx("p", { className: "no-reviews", children: "No reviews found." })) : (_jsx("ul", { children: reviews.map((r, i) => (_jsxs("li", { children: [_jsxs("div", { className: "review-header", children: [r.profile_photo_url && (_jsx("img", { src: r.profile_photo_url, alt: r.author_name, className: "profile-photo" })), _jsxs("div", { children: [_jsx("div", { className: "author-name", children: r.author_name }), _jsxs("div", { className: "rating", children: ['★'.repeat(r.rating), '☆'.repeat(5 - r.rating), " ", r.rating, "/5", r.relative_time_description && _jsxs("span", { children: [" \u00B7 ", r.relative_time_description] })] })] })] }), r.text && _jsx("div", { className: "review-text", children: r.text })] }, i))) })), place && (_jsx("a", { href: `https://search.google.com/local/writereview?placeid=${place.place_id}`, target: "_blank", rel: "noopener noreferrer", className: "write-review", children: "Write a review on Google \u2192" }))] }));
+    return (_jsxs("div", { className: "google-reviews-card", children: [_jsx("h3", { children: place?.name || 'Reviews' }), place?.formatted_address && (_jsx("p", { className: "address", children: place.formatted_address })), reviews.length === 0 ? (_jsx("p", { className: "no-reviews", children: "No reviews found." })) : (_jsx("ul", { children: reviews.map((r, i) => (_jsxs("li", { children: [_jsxs("div", { className: "review-header", children: [r.profile_photo_url && (_jsx("div", { className: "profile-photo-container", children: _jsx("img", { src: r.profile_photo_url, alt: r.author_name, className: "profile-photo" }) })), _jsxs("div", { children: [_jsx("div", { className: "author-name", children: r.author_name }), _jsxs("div", { className: "rating", children: ['★'.repeat(r.rating), '☆'.repeat(5 - r.rating), " ", r.rating, "/5", r.relative_time_description && _jsxs("span", { children: [" \u00B7 ", r.relative_time_description] })] })] })] }), r.text && _jsx("div", { className: "review-text", children: r.text })] }, i))) })), place && (_jsx("a", { href: `https://search.google.com/local/writereview?placeid=${place.place_id}`, target: "_blank", rel: "noopener noreferrer", className: "write-review", children: "Write a review on Google \u2192" }))] }));
 }

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

@@ -45,7 +45,7 @@ export function BlogPostSummary(props) {
     const myCategoryImages = Object.entries(props.categories).map(([category, index]) => [category.trim().toLowerCase().replace(/[ /]+/g, '-'), index]).sort();
     const config = usePixelatedConfig();
     const myExcerpt = decodeString(props.excerpt).replace(/\[…\]/g, '<a href="' + props.URL + '" target="_blank" rel="noopener noreferrer">[…]</a>');
-    return (_jsx("div", { className: "blog-post-summary", children: _jsxs("article", { className: "h-entry", children: [_jsx("h2", { className: "p-name", children: _jsx("a", { className: "u-url blog-post-url", href: props.URL, target: "_blank", rel: "noopener noreferrer", children: decodeString(props.title) }) }), _jsxs("div", { className: "dt-published", children: ["Published: ", new Date(props.date).toLocaleDateString()] }), props.featured_image ? (_jsxs("div", { className: "article-body row-12col", children: [_jsx("div", { className: "article-featured-image grid-s1-e4", children: _jsx(SmartImage, { className: "u-photo", src: props.featured_image, alt: decodeString(props.title), title: decodeString(props.title), style: { borderRadius: '20px' }, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }), _jsx("div", { className: "article-excerpt grid-s4-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) })] })) :
+    return (_jsx("div", { className: "blog-post-summary", children: _jsxs("article", { className: "h-entry", children: [_jsx("h2", { className: "p-name", children: _jsx("a", { className: "u-url blog-post-url", href: props.URL, target: "_blank", rel: "noopener noreferrer", children: decodeString(props.title) }) }), _jsxs("div", { className: "dt-published", children: ["Published: ", new Date(props.date).toLocaleDateString()] }), props.featured_image ? (_jsxs("div", { className: "article-body row-12col", children: [_jsx("div", { className: "article-featured-image grid-s1-e4", children: _jsx(SmartImage, { className: "u-photo", src: props.featured_image, alt: decodeString(props.title), title: decodeString(props.title), style: {}, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }), _jsx("div", { className: "article-excerpt grid-s4-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) })] })) :
                     _jsx("div", { className: "article-excerpt grid-s1-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) }), props.showCategories !== false && (_jsxs("div", { children: ["Categories:", myCategoryImages.map(([categoryImg, index]) => (_jsx("span", { className: "p-category", children: _jsx(SmartImage, { src: `/images/icons/${categoryImg}.png`, title: String(categoryImg), alt: String(categoryImg), cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }, categoryImg + "-" + index)))] }))] }) }, props.ID));
 }
 export function BlogPostCategories(props) {

package/dist/components/cms/wordpress.css

@@ -44,6 +44,13 @@
         hyphens: auto;
     }
 
+	.article-featured-image img {
+		/* border-radius: 20px; */
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
 }
 
     .blog-post-summary .p-category img,

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

@@ -136,6 +136,12 @@ export function MenuExpandoButton() {
         if (details)
             details.open = !details.open;
     }
-    return (_jsx("div", { className: "menuExpandoButton", id: "menuExpandoButton", onClick: handleMenuExpandoButtonClick, children: _jsx("img", { src: "/images/icons/mobile-menu2.png", title: "Mobile Menu", alt: "Mobile Menu" }) }));
+    function handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleMenuExpandoButtonClick(event);
+        }
+    }
+    return (_jsx("div", { className: "menuExpandoButton", id: "menuExpandoButton", onClick: handleMenuExpandoButtonClick, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-label": "Toggle mobile menu", children: _jsx("img", { src: "/images/icons/mobile-menu2.png", title: "Mobile Menu", alt: "Mobile Menu" }) }));
 }
 MenuExpandoButton.propTypes = {};

package/dist/components/nerdjoke/nerdjoke.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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;
@@ -36,7 +35,7 @@ export function NerdJoke( /* props: NerdJokeType */) {
             elapsedPath.style.width = myWidth;
         }
     }, [formatTimeLeft]);
-    const loadJoke = useCallback(() => {
+    const loadJoke = useCallback(async () => {
         if (debug)
             console.log("Loading Joke");
         timePassedRef.current = 0;
@@ -52,11 +51,18 @@ export function NerdJoke( /* props: NerdJokeType */) {
         }, 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;
-            setJoke(myJokeData);
-        });
+        try {
+            const url = myURL + "command=" + myURLProps.command + "&text=" + myURLProps.text;
+            const response = await fetch(url);
+            if (!response.ok)
+                throw new Error(`HTTP error! status: ${response.status}`);
+            const jokeData = await response.json();
+            setJoke(jokeData);
+        }
+        catch (error) {
+            console.error('Failed to fetch joke:', error);
+            // Optionally set a fallback joke or handle error
+        }
     }, []);
     const startTimer = useCallback(() => {
         if (debug)

package/dist/components/pagebuilder/components/ComponentPropertiesForm.js

@@ -7,7 +7,7 @@ import { FormEngine } from '../form/form';
  * Shows FormEngine when component is selected, placeholder otherwise
  */
 ComponentPropertiesForm.propTypes = {
-    editableComponent: PropTypes.object.isRequired,
+    editableComponent: PropTypes.object,
     onSubmit: PropTypes.func.isRequired,
 };
 export function ComponentPropertiesForm({ editableComponent, onSubmit }) {