@pixelated-tech/components 3.2.14 → 3.3.1

package/README.md

@@ -18,7 +18,7 @@
 <h3 align="center">Pixelated Components</h3>
 
   <p align="center">
-    A comprehensive React component library for modern web development, featuring CMS integrations, UI components, and SEO optimization tools.
+    A comprehensive React component library for modern web development, featuring CMS integrations, UI components, SEO optimization tools, and accessibility-first design.
     <br />
     <a href="https://github.com/brianwhaley/pixelated-components"><strong>Explore the docs »</strong></a>
     <br />
@@ -60,6 +60,27 @@ This is a library of components I have found useful to build web sites quickly.
 
 
 
+## ♿ Accessibility
+
+Pixelated Components is committed to creating inclusive web experiences. All components are built with accessibility in mind and include:
+
+- **WCAG 2.1 AA compliance** - Components meet web accessibility guidelines
+- **Keyboard navigation** - Full keyboard support for all interactive elements
+- **Screen reader support** - Proper ARIA labels, roles, and semantic HTML
+- **Focus management** - Clear focus indicators and logical tab order
+- **Color contrast** - High contrast ratios for text and interactive elements
+- **Semantic HTML** - Proper use of headings, landmarks, and structural elements
+
+### Accessibility Features
+- Automatic ARIA label generation
+- Focus trap management for modals and overlays
+- Skip links for keyboard users
+- Reduced motion support for users with vestibular disorders
+- High contrast mode compatibility
+
+
+
+
 ## 📦 Installation & Setup
 
 ### Requirements
@@ -93,54 +114,126 @@ npm install react react-dom prop-types
 
 This library is written in TypeScript and provides full type definitions. No additional setup required.
 
+### Reference Implementation
+
+For a complete working example of Pixelated Components in action, check out the [pixelated-admin](https://github.com/brianwhaley/pixelated-admin) project. This admin interface demonstrates:
+
+- **Component Integration**: Real-world usage of all major components
+- **Configuration Management**: Dynamic site configuration with ConfigBuilder
+- **Page Building**: Visual page construction with PageBuilderUI
+- **Authentication**: NextAuth.js integration for secure admin access
+- **Deployment Ready**: Production-ready setup with HTTPS and optimized builds
 
+```bash
+# Clone the reference implementation
+git clone https://github.com/brianwhaley/pixelated-admin.git
+cd pixelated-admin
+npm install
+npm run dev
+```
 
-## 🧩 Component Categories
+Visit `http://localhost:3006` to explore the admin interface and see components in action.
 
 ### General Components
 Reusable UI components for common patterns:
 - **Accordion** - Expandable content sections using native `<details>` elements
 - **Callout** - Flexible content highlight blocks with image support
-- **Modal** - Dialog overlays and popups
+- **CSS** - Dynamic CSS utilities and styling helpers
+- **Image** - Advanced image component with lazy loading and optimization
 - **Loading** - Progress indicators and loading states
-- **Panel** - Content containers with various layouts
+- **MicroInteractions** - Subtle animations and interaction effects
+- **Modal** - Dialog overlays and popups
+- **Semantic** - Semantic HTML structure components
+- **SidePanel** - Slide-out panel component for additional content
+- **Table** - Data display and table components
 
 ### CMS Integration
 Headless CMS and content management components:
 - **WordPress** - Blog post integration and display with automatic Photon CDN URL processing
-- **Contentful** - Headless CMS components and utilities
+- **Contentful** - Headless CMS components and utilities with delivery and management APIs
 - **PageBuilder** - Dynamic page construction from JSON
 - **PageEngine** - Advanced page rendering with Contentful integration
 
 ### UI Components
 User interface and interaction components:
 - **Carousel** - Image and content sliders (Hero, Reviews, Portfolio)
-- **Forms** - Form builder and validation components
+- **Forms** - Form builder, validation, and emailer components
+- **FormBuilder** - Advanced form construction and configuration
+- **FormComponents** - Individual form field components and utilities
+- **FormEngine** - Form rendering and processing engine
 - **Menu** - Navigation components (Simple, Accordion, Expando)
-- **Tables** - Data display and table components
+- **Tab** - Tabbed interface component for organizing content
 - **Tiles** - Image grid and tile layouts
 
+### Development Tools
+Components for development, configuration, and site building:
+- **ComponentPropertiesForm** - Form for editing component properties
+- **ComponentSelector** - Component selection interface
+- **ComponentTree** - Visual component hierarchy display
+- **ConfigBuilder** - Interactive configuration builder for site settings, metadata, routes, and visual design tokens
+- **PageBuilderUI** - User interface for page building
+- **SaveLoadSection** - Save and load functionality for configurations
+
 ### SEO & Schema
 Search engine optimization and structured data:
+- **404** - Custom 404 error page component
+- **GoogleAnalytics** - Google Analytics integration
+- **GoogleMap** - Interactive Google Maps component
+- **GoogleSearch** - Google Custom Search integration
 - **JSON-LD** - Structured data schemas (LocalBusiness, Recipe, BlogPosting, etc.)
+- **Manifest** - Web app manifest generation
 - **MetaTags** - Dynamic meta tag injection
+- **SchemaBlogPosting** - Blog post structured data
+- **SchemaLocalBusiness** - Local business structured data
+- **SchemaRecipe** - Recipe structured data
+- **SchemaServices** - Services structured data
+- **SchemaWebsite** - Website structured data
 - **Sitemap** - XML sitemap generation
 - **Social Cards** - Open Graph and Twitter card generation
+- **BuzzwordBingo** - Interactive buzzword bingo game
+- **Markdown** - Markdown rendering component
+- **Recipe** - Recipe display component
+- **Resume** - Resume/CV display component
+- **Timeline** - Timeline visualization component
 
 ### Third-Party Integrations
 External service integrations:
 - **Calendly** - Scheduling and appointment booking
 - **Cloudinary** - Image optimization and delivery
+- **GoogleReviews** - Google business reviews integration
+- **Gravatar** - User avatar integration
 - **HubSpot** - CRM and marketing automation
-- **PayPal** - Payment processing
 - **Instagram** - Social media image integration
 - **Flickr** - Photo sharing integration
-- **Gravatar** - User avatar integration
-- **Google** - Analytics, Maps, and Search integration
+- **PayPal** - Payment processing
+- **ShoppingCart** - E-commerce shopping cart functionality
 - **eBay** - Store listings and shopping cart
 - **NerdJokes** - Entertainment content integration
+- **Yelp** - Business reviews and ratings
 
 
+## 🎨 Visual Design Configuration
+
+The ConfigBuilder now includes a **Visual Design** tab that allows users to configure visual design tokens such as colors, fonts, spacing, and other design system variables. These tokens are stored in the `routes.json` file under the `visualdesign` object and can be used throughout your application for consistent theming.
+
+### Features:
+- **Color Management**: Primary, secondary, accent colors with color picker inputs
+- **Typography**: Font family and base font size settings
+- **Spacing & Layout**: Border radius, box shadows, transitions
+- **Form-Based Editing**: User-friendly form interface powered by FormEngine
+- **JSON Storage**: Design tokens stored as flattened key-value pairs in routes.json
+
+### Usage:
+```tsx
+import { ConfigBuilder } from '@pixelated-tech/components';
+
+function MyConfigPage() {
+  return <ConfigBuilder />;
+}
+```
+
+The visual design tokens can be accessed in your components via the config context or directly from the routes.json file.
+
 
 ## � Quick Start
 
@@ -182,7 +275,7 @@ npm run storybook
 - [ ] Buffer Integration (or Sendible, Sprout Social, Hootsuite)
 - [ ] Zapier Integration
 - [ ] Hero Banner: headline, subtext, CTA, background image/video, overlay.
-- [ ] 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.
+- [ ] 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, alt-text suggestions for images, and automated accessibility audits.
 - [ ] SEO Dashboard with AI Integration: component that analyzes site content, suggests optimizations, integrates with AI for meta descriptions and keyword research.
 
 ### CI / CD Improvements
@@ -197,22 +290,35 @@ npm run storybook
 - [ ] find a better solution than to generate image via build script in amplify for json for sitemap creation
 - [ ] **SocialCards Component**: Fix state initialization to track prop changes properly.
 - [ ] **Modal Component**: Clarify content source pattern (accepts both `modalContent` and `children`).
-- [ ] **Form Components**: Fix validation state reset when input props change.
 - [ ] **Carousel Component**: Fix active card state reset when `props.cards` changes.
 - [ ] **NerdJoke Component**: Add props to useEffect dependencies if endpoint becomes configurable.
 - [ ] **GoogleReviews Component**: Add carousel/grid display modes.
 - [ ] **GoogleReviews Component**: Add API key to config provider instead of hardcoding.
 - [ ] **Instagram Component**: Add accessToken and userId to config provider for centralized API credentials.
+- [ ] **Critters Integration**: Explore adding critters CSS inlining tool for improved page load performance and critical CSS optimization.
+
+### Platform Enhancements
+- [ ] **Project Scaffolding CLI**: Interactive CLI tool that generates complete Next.js projects with pixelated-components pre-configured, including routes.json, layout.tsx, package.json, and basic page structure
+- [ ] **Template Marketplace**: Pre-built industry-specific templates (restaurant, law firm, contractor, etc.) that users can clone and customize
+- [ ] **Configuration Wizard**: Step-by-step setup wizard that collects business info, generates site configuration, and creates initial content structure
+- [ ] **Centralized Site Manager**: Web dashboard for managing multiple pixelated sites, with bulk updates, version control, and deployment status monitoring
+- [ ] **Site Health Monitoring**: Automated monitoring dashboard that checks site performance, broken links, SEO scores, and security vulnerabilities across all sites
+- [ ] **Content Migration Tools**: Automated importers for WordPress, Squarespace, Wix, and other platforms to migrate content to pixelated sites
+- [ ] **A/B Testing Framework**: Built-in experimentation system for testing different layouts, content, and CTAs with automatic winner selection
+- [ ] **Personalization Engine**: Dynamic content delivery based on user behavior, location, and preferences
+- [ ] **Hot Module Replacement for Configs**: Live preview of configuration changes without full rebuilds
+- [ ] **Automated Dependency Updates**: Smart update system that tests component changes across all sites before deployment
+- [ ] **Rollback System**: One-click rollback to previous versions with automatic database and asset restoration
+- [ ] **Performance Budget Tracker**: Automated monitoring of Core Web Vitals with alerts when sites exceed performance budgets
+- [ ] **ConfigBuilder SEO Enhancement**: Upgrade ConfigBuilder with AI-powered meta description generation, keyword optimization suggestions, and automated schema markup
+- [ ] **Conversion Funnel Builder**: Visual funnel creation with automated tracking, A/B testing, and optimization recommendations
+- [ ] **Automated Security Scanner**: Regular security audits with vulnerability detection and automated fixes
+- [ ] **GDPR Compliance Toolkit**: Automated cookie consent, data mapping, and privacy policy generation
+- [ ] **API Gateway**: Unified API management for connecting to CRM, email marketing, payment processors, and other business tools
+- [ ] **Webhook Automation**: Event-driven automation for form submissions, new content, user registrations, and business workflows
+- [ ] **Third-Party Sync Engine**: Bidirectional sync with tools like HubSpot, Mailchimp, QuickBooks, and project management systems
+- [ ] **Documentation Auto-Generator**: Automatically generated API docs, component usage guides, and deployment instructions
 
-### 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).
 
@@ -270,16 +376,16 @@ Project Link: [https://github.com/brianwhaley/pixelated-components](https://gith
 
 ### Overview
 
-**Current Status**: ✅ 2,210 tests passing across 65 test files
+**Current Status**: ✅ 2,246 tests passing across 67 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 Files | 67 |
+| Total Tests | 2,246 |
+| Coverage (Statements) | 76.11% |
+| Coverage (Lines) | 78.91% |
+| Coverage (Functions) | 77.95% |
+| Coverage (Branches) | 66.58% |
 | Test Framework | Vitest 4.x |
 | Testing Library | @testing-library/react + jsdom |
 
@@ -297,52 +403,60 @@ npm run test:run         # Single run (for CI)
 **Component Coverage Summary**
 
 #### Component Coverage (Sorted by Statement Coverage)
+- **tiles.tsx**: 100% statements
+- **google.reviews.functions.ts**: 100% statements
 - **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
+- **modal.tsx**: 100% statements
+- **tab.tsx**: 100% statements
 - **ComponentPropertiesForm.tsx**: 100% statements
 - **ComponentSelector.tsx**: 100% statements
 - **ComponentTree.tsx**: 100% statements
+- **formvalidations.tsx**: 100% statements
+- **componentMetadata.tsx**: 100% statements
+- **googlesearch.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
+- **buzzwordbingo.tsx**: 100% statements
+- **markdown.tsx**: 100% statements
+- **timeline.tsx**: 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
+- **schema-blogposting.tsx**: 95.24% 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
+- **css.tsx**: 91.43% statements
+- **functions.ts**: 90.91% statements
 - **menu-expando.tsx**: 90.12% statements
+- **config.client.tsx**: 90% statements
+- **loading.tsx**: 85.71% statements
+- **SaveLoadSection.tsx**: 84.85% statements
+- **table.tsx**: 84.48% statements
+- **ConfigBuilder.tsx**: 83.52% statements
 - **cloudinary.ts**: 83.33% statements
+- **formcomponents.tsx**: 83.33% statements
 - **form.tsx**: 83.2% statements
-- **shoppingcart.functions.ts**: 81.69% statements
+- **shoppingcart.functions.ts**: 81.7% statements
 - **callout.tsx**: 80% statements
 - **microinteractions.tsx**: 80% statements
-- **sitemap.ts**: 76.05% statements
+- **cloudinary.image.tsx**: 78.57% statements
+- **sitemap.ts**: 76.06% statements
 - **manifest.tsx**: 75% statements
-- **carousel.tsx**: 71.69% statements
+- **carousel.tsx**: 71.7% statements
 - **nerdjoke.tsx**: 69.44% statements
 - **menu-accordion.tsx**: 68.13% statements
 - **semantic.tsx**: 63.51% statements
-- **flickr.ts**: 51.42% statements
+- **componentMap.tsx**: 60% statements
+- **propTypeIntrospection.tsx**: 60% statements
+- **wordpress.functions.ts**: 51.43% 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
+- **componentGeneration.tsx**: 38.89% statements
+- **socialcard.tsx**: 29.51% statements
+- **PageBuilderUI.tsx**: 26.67% statements
 
 ### Testing Next Steps
 

package/dist/components/cms/cloudinary.image.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { usePixelatedConfig } from "../config/config.client";

package/dist/components/general/sidepanel.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import './sidepanel.css';
-export default function SidePanel({ isOpen, onClose, onToggle, position = 'left', width = '300px', showOverlay = true, showTab = false, tabIcon, tabLabel, children, className = '' }) {
+export default function SidePanel({ isOpen, onClose, onToggle, position = 'left', width = '300px', showOverlay = true, showTab = false, tabIcon /* = "≡" */, tabLabel, children, className = '' }) {
     const portalRootRef = useRef(null);
     const wrapperRef = useRef(null);
     const [hasMounted, setHasMounted] = useState(false);

package/dist/components/general/tab.css

@@ -0,0 +1,105 @@
+/* Tab Component Styles */
+
+.tab-container {
+  display: flex;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+  height: 100%;
+}
+
+.tab-top {
+  flex-direction: column;
+}
+
+.tab-bottom {
+  flex-direction: column-reverse;
+}
+
+.tab-left {
+  flex-direction: row;
+}
+
+.tab-right {
+  flex-direction: row-reverse;
+}
+
+.tab-headers {
+  display: flex;
+  background-color: #f5f5f5;
+}
+
+.tab-top .tab-headers,
+.tab-bottom .tab-headers {
+  flex-direction: row;
+  width: 100%;
+}
+
+.tab-left .tab-headers,
+.tab-right .tab-headers {
+  flex-direction: column;
+  height: 100%;
+}
+
+.tab-header {
+  padding: 10px 20px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.tab-top .tab-header,
+.tab-bottom .tab-header {
+  border-right: 1px solid #ddd;
+  border-bottom: none;
+}
+
+.tab-left .tab-header,
+.tab-right .tab-header {
+  border-right: none;
+  border-bottom: 1px solid #ddd;
+  height: auto;
+  padding: 20px 10px;
+}
+
+.tab-left .tab-header {
+  transform: rotate(-90deg);
+}
+
+.tab-right .tab-header {
+  transform: rotate(90deg);
+}
+
+.tab-header:last-child {
+  border-right: none;
+}
+
+.tab-top .tab-header:last-child,
+.tab-bottom .tab-header:last-child {
+  border-right: none;
+}
+
+.tab-left .tab-header:last-child,
+.tab-right .tab-header:last-child {
+  border-bottom: none;
+}
+
+.tab-header:hover {
+  background-color: #e0e0e0;
+}
+
+.tab-header.active {
+  background-color: #fff;
+  font-weight: bold;
+}
+
+.tab-content {
+  flex: 1;
+  padding: 20px;
+  background-color: #fff;
+  min-height: 200px;
+  overflow: auto;
+}

package/dist/components/general/tab.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import './tab.css';
+const TabItemPropTypes = {
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired, //
+    content: PropTypes.node.isRequired,
+};
+// type TabItemType = InferProps<typeof TabItemPropTypes>;
+Tab.propTypes = {
+    tabs: PropTypes.arrayOf(PropTypes.shape(TabItemPropTypes).isRequired).isRequired,
+    orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+    defaultActiveTab: PropTypes.string,
+    onTabChange: PropTypes.func,
+};
+export function Tab({ tabs, orientation = 'top', defaultActiveTab, onTabChange }) {
+    const [activeTab, setActiveTab] = useState(defaultActiveTab || tabs[0]?.id || '');
+    const handleTabClick = (tabId) => {
+        setActiveTab(tabId);
+        onTabChange?.(tabId);
+    };
+    const activeContent = tabs.find(tab => tab.id === activeTab)?.content;
+    const tabClass = `tab-container tab-${orientation}`;
+    return (_jsxs("div", { className: tabClass, children: [_jsx("div", { className: "tab-headers", children: tabs.map(tab => (_jsx("button", { className: `tab-header ${activeTab === tab.id ? 'active' : ''}`, onClick: () => handleTabClick(tab.id), children: tab.label }, tab.id))) }), _jsx("div", { className: "tab-content", children: activeContent })] }));
+}

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

@@ -24,6 +24,15 @@
 
 
 .panelMenuButton .hamburger{
+    cursor: pointer;
+   	font-family: Verdana;
+	font-size: 1.5rem;
+    color: #CCC;
+
+}
+
+.panelMenuButton .hamburger2{
+	/* 3 lines instead of unicode hamburger (U+2261) */
     /* the tricks */
 	/* display: block; */
 	/* display inline-block is fine too */
@@ -40,6 +49,7 @@
 	padding-top: 5px;
 
 }
+
 /* hamburger hover style */
 /* .accordionMenu .hamburger:hover {
     color: #FFC75F;

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

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './menu-accordion.css';
+const hamburgerIcon = "≡"; /* (U+2261) */ /* ||| */
 function generateMenuItems({ menuData, state = "hide" }) {
     const myItems = [];
     let index = 0;
@@ -174,5 +175,5 @@ export function MenuAccordionButton() {
         }
     }
     // 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: "|||" }) }));
+    return (_jsx("button", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, suppressHydrationWarning: true, children: _jsx("span", { className: "hamburger text-outline", children: hamburgerIcon }) }));
 }

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

@@ -3,13 +3,6 @@
 ============  SIMPLE MENU   ============
 ======================================== */
 
-:root {
-	--primary-color: #369;
-	--secondary-color: #BCD;
-	--accent1-color: #CCC;
-	--accent2-color: #EEE;	
-}
-
 .menu-wrapper {
 	height: 100%;
 }

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

@@ -1,23 +1,4 @@
-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,