diff --git a/docs/addons/superdav-ai-agent/abilities/create-menu.md b/docs/addons/superdav-ai-agent/abilities/create-menu.md new file mode 100644 index 0000000..3dd7bfa --- /dev/null +++ b/docs/addons/superdav-ai-agent/abilities/create-menu.md @@ -0,0 +1,116 @@ +--- +title: "Create Menu" +sidebar_position: 3 +--- + +# Create Menu + +The **Create Menu** ability creates WordPress navigation menus with support for distinct navigation labels separate from page titles. + +## Overview + +This ability extends the standard menu creation functionality with the ability to specify a `navigation_label` parameter. This allows you to create menus where the label displayed in navigation differs from the page title, providing more flexibility in site structure and user experience. + +## Parameters + +| Parameter | Type | Required | Description | +|-----------|------|----------|-------------| +| `name` | string | Yes | Menu name, e.g. `Primary Navigation` | +| `location` | string | No | Theme location to assign this menu to, e.g. `primary` | +| `navigation_label` | string | No | Label to display in navigation (distinct from page title) | + +## Return Value + +```json +{ + "success": true, + "menu_id": 7, + "name": "Primary Navigation", + "navigation_label": "Main Menu" +} +``` + +## Navigation Label vs Page Title + +The `navigation_label` parameter allows you to separate the internal menu name from the label displayed to users: + +- **`name`** — Internal menu identifier used by WordPress (e.g., "Primary Navigation") +- **`navigation_label`** — The label displayed to site visitors in the navigation (e.g., "Main Menu") + +This is useful when: +- Your internal naming convention differs from user-facing labels +- You want shorter labels in navigation than in the admin panel +- You need to support multiple languages with different label lengths +- You're building menus for specific regions or user groups + +## Usage Examples + +### Example 1: Simple Menu with Navigation Label + +**Prompt:** +``` +Create a primary navigation menu called "Main Navigation" with the navigation label "Menu". +``` + +**Result:** +```json +{ + "success": true, + "menu_id": 7, + "name": "Main Navigation", + "navigation_label": "Menu" +} +``` + +### Example 2: Menu for Specific Theme Location + +**Prompt:** +``` +Create a footer menu called "Footer Links" with navigation label "Quick Links" and assign it to the footer location. +``` + +**Result:** +```json +{ + "success": true, + "menu_id": 8, + "name": "Footer Links", + "navigation_label": "Quick Links", + "location": "footer" +} +``` + +## Integration with Theme Builder + +When using Theme Builder, the Create Menu ability: + +1. Automatically detects available theme menu locations +2. Creates menus with appropriate navigation labels for your design +3. Assigns menus to the correct theme locations +4. Supports adding menu items after creation + +## Related Abilities + +- **`add_menu_item`** — Add items to an existing menu +- **`update_menu`** — Rename a menu or reassign it to a theme location +- **`delete_menu`** — Remove a menu from your site + +## Best Practices + +- **Use clear navigation labels** — keep labels concise and descriptive for users +- **Match theme locations** — assign menus to the correct theme location for proper display +- **Plan menu structure** — decide on your menu hierarchy before creating items +- **Test responsiveness** — verify menus display correctly on mobile devices +- **Localize labels** — use different navigation labels for different language versions + +## Limitations + +- Navigation labels are display-only; the internal `name` is still used for WordPress identification +- Theme support varies; not all themes support all menu locations +- Menu items must be added separately after menu creation +- Changing a navigation label requires updating the menu + +## Related Abilities + +- [Generate Logo SVG](./generate-logo-svg.md) — create logos for your site header +- [Validate Palette Contrast](./validate-palette-contrast.md) — ensure accessible color schemes diff --git a/docs/addons/superdav-ai-agent/abilities/generate-logo-svg.md b/docs/addons/superdav-ai-agent/abilities/generate-logo-svg.md new file mode 100644 index 0000000..0eab356 --- /dev/null +++ b/docs/addons/superdav-ai-agent/abilities/generate-logo-svg.md @@ -0,0 +1,91 @@ +--- +title: "Generate Logo SVG" +sidebar_position: 1 +--- + +# Generate Logo SVG + +The **Generate Logo SVG** ability allows Theme Builder to create and embed custom logo SVGs directly into your WordPress site with automatic namespace-safe sanitisation. + +## Overview + +This ability generates scalable vector graphics (SVG) logos based on your site's branding direction and design preferences. The generated SVGs are automatically sanitised to ensure they are safe for use in WordPress while maintaining visual integrity. + +## Parameters + +| Parameter | Type | Required | Description | +|-----------|------|----------|-------------| +| `site_name` | string | Yes | The name of the site for which to generate the logo | +| `style` | string | Yes | The design style (e.g., "modern", "classic", "minimalist", "playful") | +| `colors` | array | No | Array of hex color codes to use in the logo (e.g., `["#678233", "#ffffff"]`) | +| `width` | number | No | SVG width in pixels (default: 200) | +| `height` | number | No | SVG height in pixels (default: 200) | +| `include_text` | boolean | No | Whether to include the site name as text in the logo (default: true) | + +## Output Format + +The ability returns an SVG string with the following structure: + +```json +{ + "svg": "...", + "width": 200, + "height": 200, + "colors_used": ["#678233", "#ffffff"], + "sanitised": true +} +``` + +## SVG Sanitisation Behaviour + +The generated SVGs undergo automatic namespace-safe sanitisation to: + +- **Remove unsafe attributes** — strips event handlers, scripts, and potentially dangerous attributes +- **Preserve namespaces** — maintains SVG namespaces (xmlns, xlink) for proper rendering +- **Validate structure** — ensures the SVG conforms to W3C standards +- **Encode entities** — properly escapes special characters in text content +- **Remove external references** — strips external stylesheets and image references + +This ensures the SVG is safe to embed directly in WordPress without requiring additional sanitisation. + +## Usage Example + +**Prompt:** +``` +Generate a modern logo for my tech startup called "CloudSync" using blue and white colors. +``` + +**Result:** +The ability creates an SVG logo that: +- Incorporates the site name "CloudSync" +- Uses the specified blue and white color scheme +- Follows modern design principles +- Is automatically sanitised and ready to use + +## Integration with Theme Builder + +When using Theme Builder's design-direction selection, the Generate Logo SVG ability: + +1. Analyzes your design direction and color palette +2. Generates a custom SVG logo matching your preferences +3. Automatically embeds the logo into your site's header/branding area +4. Stores the SVG as a custom logo in WordPress media + +## Best Practices + +- **Provide clear style preferences** — describe the design style you want (modern, classic, playful, etc.) +- **Specify colors** — include your brand colors for consistency +- **Test rendering** — verify the logo displays correctly across different screen sizes +- **Customize further** — use WordPress's logo customization tools to adjust size and placement + +## Limitations + +- SVG logos are generated as static graphics (not animated) +- Complex logos with many elements may require manual refinement +- Custom fonts are not supported; text uses system fonts +- Very large or very small dimensions may affect quality + +## Related Abilities + +- [Validate Palette Contrast](./validate-palette-contrast.md) — check color contrast for accessibility +- [Create Menu](./create-menu.md) — create navigation menus for your site diff --git a/docs/addons/superdav-ai-agent/abilities/validate-palette-contrast.md b/docs/addons/superdav-ai-agent/abilities/validate-palette-contrast.md new file mode 100644 index 0000000..6f9c324 --- /dev/null +++ b/docs/addons/superdav-ai-agent/abilities/validate-palette-contrast.md @@ -0,0 +1,161 @@ +--- +title: "Validate Palette Contrast" +sidebar_position: 2 +--- + +# Validate Palette Contrast + +The **Validate Palette Contrast** ability checks colour pairs in your design palette for WCAG (Web Content Accessibility Guidelines) compliance before applying them to your theme. + +## Overview + +This ability ensures your site's color scheme meets accessibility standards by validating contrast ratios between text and background colors. It helps prevent color combinations that could be difficult for users with visual impairments to read. + +## Input Format + +The ability accepts a color palette as input: + +```json +{ + "colors": [ + { + "name": "primary", + "hex": "#678233" + }, + { + "name": "text", + "hex": "#ffffff" + }, + { + "name": "background", + "hex": "#f5f5f5" + } + ], + "wcag_level": "AA" +} +``` + +### Parameters + +| Parameter | Type | Required | Description | +|-----------|------|----------|-------------| +| `colors` | array | Yes | Array of color objects with `name` and `hex` properties | +| `wcag_level` | string | No | WCAG compliance level: "A", "AA" (default), or "AAA" | +| `pairs_to_check` | array | No | Specific color pairs to validate (e.g., `["primary-text", "background-text"]`) | + +## WCAG Levels Checked + +The ability validates contrast ratios according to WCAG standards: + +| Level | Normal Text | Large Text | Minimum Ratio | +|-------|-------------|------------|---------------| +| **A** | 3:1 | 3:1 | 3:1 | +| **AA** | 4.5:1 | 3:1 | 4.5:1 | +| **AAA** | 7:1 | 4.5:1 | 7:1 | + +- **Normal Text** — text smaller than 18pt (or 14pt bold) +- **Large Text** — text 18pt or larger (or 14pt bold or larger) + +## Output Schema + +The ability returns a detailed validation report: + +```json +{ + "compliant": true, + "wcag_level": "AA", + "pairs": [ + { + "pair": "primary-text", + "color1": "#678233", + "color2": "#ffffff", + "contrast_ratio": 5.2, + "wcag_a": true, + "wcag_aa": true, + "wcag_aaa": false, + "status": "pass" + }, + { + "pair": "background-text", + "color1": "#f5f5f5", + "color2": "#333333", + "contrast_ratio": 12.1, + "wcag_a": true, + "wcag_aa": true, + "wcag_aaa": true, + "status": "pass" + } + ], + "summary": { + "total_pairs": 2, + "passing": 2, + "failing": 0, + "recommendations": [] + } +} +``` + +### Output Fields + +| Field | Type | Description | +|-------|------|-------------| +| `compliant` | boolean | Whether the entire palette meets the specified WCAG level | +| `wcag_level` | string | The WCAG level that was checked | +| `pairs` | array | Detailed results for each color pair | +| `contrast_ratio` | number | The calculated contrast ratio (1:1 to 21:1) | +| `status` | string | "pass" or "fail" for each pair | +| `recommendations` | array | Suggestions for improving failing pairs | + +## Usage Example + +**Prompt:** +``` +Check if my color palette meets WCAG AA standards. I have primary color #678233, text color #ffffff, and background #f5f5f5. +``` + +**Result:** +The ability validates all color combinations and returns: +- ✅ Primary + Text: 5.2:1 ratio (passes WCAG AA) +- ✅ Background + Text: 12.1:1 ratio (passes WCAG AAA) +- Overall: Compliant with WCAG AA + +## Integration with Theme Builder + +When using Theme Builder's design-direction selection, the Validate Palette Contrast ability: + +1. Analyzes your selected color palette +2. Checks all text-background combinations +3. Validates against your chosen WCAG level +4. Provides recommendations for non-compliant pairs +5. Prevents applying inaccessible color schemes + +## Best Practices + +- **Start with AA level** — WCAG AA is the standard for most websites +- **Test before applying** — validate your palette before committing to a design +- **Check all combinations** — ensure text, links, and UI elements all meet standards +- **Consider user preferences** — some users may have additional color sensitivity +- **Use contrast checkers** — combine this ability with browser tools for verification + +## Failing Pairs and Recommendations + +If a color pair fails validation, the ability provides recommendations: + +```json +{ + "pair": "primary-text", + "status": "fail", + "contrast_ratio": 2.8, + "wcag_aa": false, + "recommendations": [ + "Lighten the text color to #ffffff (ratio would be 5.2:1)", + "Darken the background color to #556b2f (ratio would be 4.8:1)", + "Use a different primary color like #4a6b1f (ratio would be 6.1:1)" + ] +} +``` + +## Related Abilities + +- [Generate Logo SVG](./generate-logo-svg.md) — create logos with your validated color palette +- [Create Menu](./create-menu.md) — build navigation with accessible colors diff --git a/docs/addons/superdav-ai-agent/changelog.md b/docs/addons/superdav-ai-agent/changelog.md index ee461e5..92ede47 100644 --- a/docs/addons/superdav-ai-agent/changelog.md +++ b/docs/addons/superdav-ai-agent/changelog.md @@ -5,6 +5,23 @@ sidebar_position: 5 # Changelog +## 1.16.0 — Released on 2026-05-20 + +### New + +- **Generate Logo SVG ability** — Theme Builder can now generate and embed custom logo SVGs with namespace-safe sanitisation +- **Photo upload in discovery interview** — Theme Builder discovery interview now includes a photo upload step for richer design context +- **Validate Palette Contrast ability** — check colour pairs for WCAG compliance before applying to a theme +- **Hospitality menus** — Theme Builder can now generate structured food and beverage menu pages for hospitality businesses +- **Desktop and mobile preview rendering** — preview your design on desktop and mobile devices during design-direction selection +- **Navigation label parameter** — Create Menu ability now supports a distinct `navigation_label` separate from the page title +- **Tier 1 tool availability** — sd-ai-agent/site-scrape is now a Tier 1 tool available by default in Theme Builder + +### Fixed + +- **AI Client cache** — now backed by transients for cross-request persistence, preventing data loss on long-running agent tasks +- **Plugin row action links** — corrected and renamed for clarity + ## 1.10.0 — Released on 2026-05-05 ### New diff --git a/docs/addons/superdav-ai-agent/index.mdx b/docs/addons/superdav-ai-agent/index.mdx index b3aad74..393d2ae 100644 --- a/docs/addons/superdav-ai-agent/index.mdx +++ b/docs/addons/superdav-ai-agent/index.mdx @@ -9,7 +9,7 @@ import AddonBanner from '@site/src/components/AddonBanner'; # Superdav AI Agent -Superdav AI Agent is an advanced WordPress AI assistant that extends Gratis AI Agent with theme-aware skills, enhanced internet search capabilities, and improved site builder features. Version 1.10.0 adds Tavily as an alternative internet search provider, four new theme-aware built-in skills (Block Themes, Classic Themes, Kadence Blocks, and Kadence Theme), and the ability to create contact forms directly from the chat interface. +Superdav AI Agent is an advanced WordPress AI assistant that extends Gratis AI Agent with theme-aware skills, enhanced internet search capabilities, and improved site builder features. Version 1.16.0 adds custom logo generation, palette contrast validation, photo uploads in the discovery interview, structured hospitality menu generation, and desktop/mobile preview rendering in Theme Builder. ## Key Features @@ -20,6 +20,12 @@ Superdav AI Agent is an advanced WordPress AI assistant that extends Gratis AI A - **Built-in theme skills** — specialized guidance for Block Themes, Classic Themes, Kadence Blocks, and Kadence Theme - **Improved WooCommerce integration** — refactored to use native WooCommerce APIs for better reliability and compatibility - **Automatic provider detection** — automatically detects and refreshes available plugins and themes when they are activated or deactivated +- **Custom logo generation** — generate and embed custom SVG logos with automatic namespace-safe sanitisation +- **Palette contrast validation** — check colour pairs for WCAG accessibility compliance before applying to your theme +- **Photo-enhanced discovery** — upload photos during Theme Builder discovery interview to influence design direction +- **Hospitality menus** — generate structured food and beverage menu pages for restaurants, cafes, and hospitality businesses +- **Desktop and mobile previews** — preview your design on desktop and mobile devices during design-direction selection +- **Tier 1 site scraping** — sd-ai-agent/site-scrape is now available by default for analyzing competitor and inspiration websites ## Requirements @@ -84,6 +90,36 @@ The Site Builder agent can now create contact forms directly from the chat inter See [Site Builder Contact Forms](../../user-guide/administration/site-builder-contact-forms) for detailed guidance. +## Theme Builder Features + +Theme Builder in Superdav AI Agent v1.16.0 includes powerful new capabilities: + +### Discovery Interview with Photo Upload + +The Theme Builder discovery interview now includes a photo upload step where you can provide visual inspiration. Upload photos of your brand, competitor sites, or design inspiration to help Theme Builder understand your design direction. + +See [Discovery Interview](./theme-builder/discovery-interview.md) for detailed guidance. + +### Design Direction with Desktop and Mobile Previews + +Review your design on both desktop and mobile devices before Theme Builder generates your complete theme. See real-time previews at multiple responsive breakpoints. + +See [Design Direction](./theme-builder/design-direction.md) for detailed guidance. + +### Hospitality Menus + +Theme Builder can now generate structured food and beverage menu pages for restaurants, cafes, bars, and other hospitality businesses. Menus include pricing, descriptions, dietary information, and allergen warnings. + +See [Hospitality Menus](./theme-builder/hospitality-menus.md) for detailed guidance. + +### New Abilities + +- **[Generate Logo SVG](./abilities/generate-logo-svg.md)** — create custom SVG logos with automatic sanitisation +- **[Validate Palette Contrast](./abilities/validate-palette-contrast.md)** — check colour pairs for WCAG compliance +- **[Create Menu](./abilities/create-menu.md)** — create navigation menus with distinct navigation labels + +See [Tools and Configuration](./theme-builder/tools.md) for information about available tools and the Tier 1 site-scrape tool. + ## Configuration All settings are under **Gratis AI Agent → Settings** in the WordPress admin. Superdav AI Agent adds the following configuration options: @@ -93,6 +129,12 @@ All settings are under **Gratis AI Agent → Settings** in the WordPress admin. | **Internet Search Provider** | Choose between Brave Search and Tavily (optional) | | **Tavily API Key** | API key for Tavily internet search (if Tavily is selected) | +## Improvements in v1.16.0 + +- **AI Client cache** — now backed by transients for cross-request persistence, preventing data loss on long-running agent tasks +- **Tier 1 site-scrape tool** — sd-ai-agent/site-scrape is now available by default in Theme Builder for analyzing competitor and inspiration websites +- **Plugin row action links** — corrected and renamed for clarity + ## Improvements in v1.10.0 - **WooCommerce integration refactored** — now uses native WooCommerce APIs for better reliability and compatibility diff --git a/docs/addons/superdav-ai-agent/theme-builder/design-direction.md b/docs/addons/superdav-ai-agent/theme-builder/design-direction.md new file mode 100644 index 0000000..3d10e40 --- /dev/null +++ b/docs/addons/superdav-ai-agent/theme-builder/design-direction.md @@ -0,0 +1,166 @@ +--- +title: "Design Direction" +sidebar_position: 2 +--- + +# Design Direction + +The **Design Direction** step allows you to review, refine, and finalize your theme's visual design before Theme Builder generates the complete theme. + +## Overview + +After completing the Discovery Interview, Theme Builder presents your design direction with **desktop and mobile preview rendering**. This allows you to see exactly how your design will look on different devices before committing to the theme. + +## Design Direction Components + +### 1. Color Palette + +Your theme's color scheme, including: + +- **Primary color** — main brand color used for buttons, links, and accents +- **Secondary color** — complementary color for variety +- **Accent color** — highlight color for important elements +- **Neutral colors** — grays and whites for backgrounds and text +- **Text color** — primary text color for readability + +### 2. Typography + +Font selections for: + +- **Heading font** — used for page titles and section headers +- **Body font** — used for paragraph text and content +- **Font sizes** — responsive sizing for different screen sizes +- **Line height** — spacing between lines for readability +- **Font weights** — bold, regular, and light variations + +### 3. Layout and Spacing + +- **Container width** — maximum width for content +- **Padding and margins** — spacing around elements +- **Grid system** — column layout for responsive design +- **Component spacing** — distance between UI elements + +### 4. Visual Elements + +- **Button styles** — primary, secondary, and tertiary button designs +- **Card designs** — layouts for content blocks +- **Icons** — icon style and sizing +- **Borders and shadows** — subtle visual depth +- **Hover effects** — interactive state styling + +## Preview Rendering + +### Desktop Preview + +The desktop preview shows your design at full width (typically 1200px or wider): + +- Full navigation menu +- Complete layout with all columns +- Large typography and spacing +- All visual elements at full size + +### Mobile Preview + +The mobile preview shows your design at mobile width (typically 375px): + +- Responsive navigation (hamburger menu) +- Single-column layout +- Adjusted typography and spacing +- Touch-friendly button sizes + +### Responsive Breakpoints + +Theme Builder renders previews at these breakpoints: + +| Device | Width | Preview | +|--------|-------|---------| +| **Mobile** | 375px | Portrait phone | +| **Tablet** | 768px | Landscape tablet | +| **Desktop** | 1200px | Full-width desktop | +| **Large Desktop** | 1920px | Ultra-wide display | + +## Refining Your Design + +### Making Adjustments + +You can refine your design direction by: + +1. **Adjusting colors** — change any color in the palette +2. **Changing fonts** — select different typefaces +3. **Modifying spacing** — adjust padding and margins +4. **Updating layout** — change container widths and grid columns +5. **Customizing elements** — modify button styles, card designs, etc. + +### Preview Updates + +Changes are reflected in real-time: + +- Desktop preview updates immediately +- Mobile preview updates immediately +- All responsive breakpoints are updated +- You can switch between previews to verify changes + +### Comparison View + +Compare your design direction with: + +- **Original design** — see what changed +- **Competitor designs** — compare with inspiration sites +- **Previous versions** — revert to earlier design directions + +## Design Direction Approval + +Once you're satisfied with your design: + +1. **Review both previews** — verify desktop and mobile look good +2. **Check all colors** — ensure contrast and accessibility +3. **Test typography** — verify readability at all sizes +4. **Confirm layout** — check spacing and alignment +5. **Approve design** — proceed to theme generation + +## Next Steps + +After approving your design direction: + +1. Theme Builder generates your complete theme +2. The theme is installed on your WordPress site +3. You can customize further using WordPress customizer +4. Proceed to [Hospitality Menus](./hospitality-menus.md) or other features + +## Best Practices + +- **Test on real devices** — use actual phones and tablets if possible +- **Check readability** — ensure text is readable at all sizes +- **Verify contrast** — use [Validate Palette Contrast](../abilities/validate-palette-contrast.md) for accessibility +- **Consider performance** — optimize images and fonts for speed +- **Plan for content** — ensure layout works with your actual content + +## Troubleshooting + +### Preview Not Updating + +- Refresh the page +- Clear browser cache +- Try a different browser +- Check internet connection + +### Colors Look Different + +- Check monitor color settings +- Try on different devices +- Verify color contrast with accessibility tools +- Consider color blindness simulators + +### Typography Issues + +- Verify font files are loading +- Check font size at different breakpoints +- Test with actual content +- Consider line length for readability + +## Related Documentation + +- [Discovery Interview](./discovery-interview.md) — gather design information +- [Hospitality Menus](./hospitality-menus.md) — create structured menu pages +- [Validate Palette Contrast](../abilities/validate-palette-contrast.md) — check color accessibility +- [Generate Logo SVG](../abilities/generate-logo-svg.md) — create custom logos diff --git a/docs/addons/superdav-ai-agent/theme-builder/discovery-interview.md b/docs/addons/superdav-ai-agent/theme-builder/discovery-interview.md new file mode 100644 index 0000000..f36521c --- /dev/null +++ b/docs/addons/superdav-ai-agent/theme-builder/discovery-interview.md @@ -0,0 +1,122 @@ +--- +title: "Discovery Interview" +sidebar_position: 1 +--- + +# Discovery Interview + +The **Discovery Interview** is the first step in Theme Builder's design process. It gathers information about your site, business, and design preferences to create a personalized theme. + +## Overview + +The Discovery Interview guides you through a series of questions to understand your brand, target audience, and design goals. In version 1.16.0, the interview now includes a **photo upload step** that allows you to provide visual inspiration for your design. + +## Interview Steps + +### 1. Business Information + +- Site name and tagline +- Business type or industry +- Primary business goals +- Target audience description + +### 2. Design Preferences + +- Preferred color scheme +- Design style (modern, classic, minimalist, playful, etc.) +- Inspiration websites or brands +- Must-have design elements + +### 3. Photo Upload (New in v1.16.0) + +Upload one or more photos to influence the design direction: + +#### Accepted Formats + +| Format | Extension | Details | +|--------|-----------|---------| +| **JPEG** | `.jpg`, `.jpeg` | Recommended for photographs | +| **PNG** | `.png` | Supports transparency | +| **WebP** | `.webp` | Modern format, smaller file size | +| **GIF** | `.gif` | Static images only (no animation) | + +#### File Requirements + +- **Maximum file size:** 10 MB +- **Minimum dimensions:** 400 × 300 pixels +- **Recommended dimensions:** 1200 × 800 pixels or larger +- **Aspect ratio:** Any ratio is acceptable + +#### How Photos Influence Design Direction + +The photos you upload help Theme Builder understand: + +- **Color palette** — dominant colors are extracted and used in the theme +- **Visual style** — modern, rustic, minimalist, vibrant, etc. +- **Mood and atmosphere** — professional, creative, friendly, luxurious, etc. +- **Design elements** — patterns, textures, and compositional styles +- **Typography inspiration** — font styles that complement the visual theme + +### 4. Content Structure + +- Main pages needed (Home, About, Services, Contact, etc.) +- Blog or news section required +- E-commerce functionality needed +- Special features or integrations + +### 5. Review and Confirmation + +- Summary of all provided information +- Confirmation before design generation begins + +## Photo Upload Best Practices + +### What to Upload + +- **Brand inspiration** — logos, color swatches, or brand guidelines +- **Competitor sites** — screenshots of sites you admire +- **Mood boards** — collections of images representing your desired aesthetic +- **Product photos** — if you have products to showcase +- **Team or office photos** — for personal or professional branding +- **Lifestyle images** — representing your target audience + +### What to Avoid + +- **Low-quality images** — blurry or pixelated photos +- **Unrelated images** — photos that don't represent your brand +- **Text-heavy images** — screenshots with lots of text +- **Copyrighted material** — ensure you have rights to use the images +- **Animated GIFs** — only static images are processed + +### Tips for Best Results + +1. **Upload 2-3 images** — multiple images provide better context +2. **Use high-quality photos** — clear, well-lit images work best +3. **Include variety** — mix of color, style, and subject matter +4. **Provide context** — briefly describe why you chose each image +5. **Be specific** — if you like a particular element, point it out + +## Design Direction Output + +After the Discovery Interview, Theme Builder generates: + +- **Color palette** — primary, secondary, and accent colors +- **Typography** — font families for headings and body text +- **Layout style** — spacing, alignment, and component arrangement +- **Visual elements** — icons, patterns, and decorative elements +- **Mood board** — visual representation of the design direction + +## Next Steps + +After completing the Discovery Interview: + +1. Review the generated design direction +2. Provide feedback or request adjustments +3. Proceed to the [Design Direction](./design-direction.md) step +4. Theme Builder creates your custom theme + +## Related Documentation + +- [Design Direction](./design-direction.md) — review and refine your design +- [Hospitality Menus](./hospitality-menus.md) — create structured menu pages +- [Tools and Configuration](./tools.md) — available tools and configuration options diff --git a/docs/addons/superdav-ai-agent/theme-builder/hospitality-menus.md b/docs/addons/superdav-ai-agent/theme-builder/hospitality-menus.md new file mode 100644 index 0000000..bd5e652 --- /dev/null +++ b/docs/addons/superdav-ai-agent/theme-builder/hospitality-menus.md @@ -0,0 +1,267 @@ +--- +title: "Hospitality Menus" +sidebar_position: 3 +--- + +# Hospitality Menus + +The **Hospitality Menus** feature allows Theme Builder to generate and embed structured food and beverage menu pages directly into your WordPress site. + +## Overview + +Theme Builder can now create professional, structured menu pages for hospitality businesses including restaurants, cafes, bars, and catering services. These menus are fully integrated into your site's design and can be easily updated and managed. + +## Supported Hospitality Types + +- **Restaurants** — full-service dining menus +- **Cafes** — coffee and light fare menus +- **Bars and Lounges** — beverage and appetizer menus +- **Bakeries** — pastry and bread menus +- **Catering Services** — event menu options +- **Food Trucks** — mobile food service menus +- **Breweries and Wineries** — beverage menus with descriptions + +## Menu Structure + +### Menu Categories + +Menus are organized into categories: + +- **Appetizers** — starters and small plates +- **Entrees** — main courses +- **Sides** — accompaniments and vegetables +- **Desserts** — sweet treats +- **Beverages** — drinks (alcoholic and non-alcoholic) +- **Specials** — daily or seasonal specials + +### Menu Item Format + +Each menu item includes: + +```json +{ + "name": "Grilled Salmon", + "description": "Fresh Atlantic salmon with lemon butter sauce", + "price": "$24.95", + "dietary_info": ["Gluten-Free", "High-Protein"], + "allergens": ["Fish"], + "availability": "Daily" +} +``` + +#### Item Fields + +| Field | Type | Description | +|-------|------|-------------| +| `name` | string | Dish or beverage name | +| `description` | string | Detailed description of the item | +| `price` | string | Price (formatted with currency) | +| `dietary_info` | array | Dietary attributes (Vegan, Gluten-Free, etc.) | +| `allergens` | array | Common allergens (Nuts, Shellfish, etc.) | +| `availability` | string | When available (Daily, Seasonal, etc.) | + +## Creating Hospitality Menus + +### Step 1: Provide Menu Information + +Tell Theme Builder about your menu: + +``` +Create a restaurant menu for my Italian restaurant with appetizers, +pasta dishes, main courses, and desserts. Include prices and descriptions. +``` + +### Step 2: Theme Builder Generates Menu + +Theme Builder: + +1. Creates a structured menu page +2. Designs it to match your site's theme +3. Organizes items into categories +4. Formats prices and descriptions +5. Adds dietary and allergen information + +### Step 3: Review and Customize + +You can: + +1. Edit menu items and prices +2. Add or remove categories +3. Reorder items within categories +4. Update descriptions and dietary info +5. Adjust styling and layout + +## Menu Display Options + +### Full Menu Page + +A dedicated page displaying your complete menu: + +- Organized by category +- Searchable and filterable +- Print-friendly layout +- Mobile-responsive design + +### Menu Widget + +Embed menu sections on other pages: + +- Featured items on homepage +- Daily specials on sidebar +- Beverage menu on bar page +- Dessert showcase on footer + +### Menu PDF + +Generate a downloadable PDF menu: + +- Professional formatting +- Print-ready quality +- Includes images and descriptions +- Easy to share and email + +## Dietary and Allergen Information + +### Dietary Attributes + +Mark items with dietary information: + +- **Vegan** — no animal products +- **Vegetarian** — no meat +- **Gluten-Free** — safe for celiac disease +- **Dairy-Free** — no milk products +- **Nut-Free** — no tree nuts or peanuts +- **Low-Carb** — reduced carbohydrates +- **High-Protein** — protein-rich + +### Allergen Warnings + +Include common allergens: + +- **Nuts** — tree nuts and peanuts +- **Shellfish** — crustaceans and mollusks +- **Fish** — all fish species +- **Dairy** — milk and milk products +- **Eggs** — chicken eggs +- **Soy** — soy products +- **Gluten** — wheat and gluten-containing grains +- **Sesame** — sesame seeds and oil + +## Menu Management + +### Updating Prices + +Easily update menu prices: + +1. Navigate to the menu page +2. Click "Edit Menu" +3. Update prices for items +4. Save changes +5. Changes appear immediately on your site + +### Adding Seasonal Items + +Create seasonal menu variations: + +1. Create a new menu version +2. Add seasonal items +3. Mark items as "Seasonal" +4. Schedule availability dates +5. Automatically display during season + +### Managing Specials + +Display daily or weekly specials: + +1. Create a "Specials" category +2. Add items with availability dates +3. Highlight specials on homepage +4. Update daily or weekly +5. Archive old specials + +## Integration with Theme Builder + +When using Theme Builder for hospitality sites: + +1. **Automatic menu detection** — identifies if you're a food/beverage business +2. **Menu page creation** — generates professional menu pages +3. **Design matching** — menus match your site's theme +4. **Mobile optimization** — menus display beautifully on phones +5. **SEO optimization** — menus are search-engine friendly + +## Best Practices + +### Menu Design + +- **Clear organization** — logical category structure +- **Readable descriptions** — appetizing and informative +- **Consistent pricing** — clear currency and formatting +- **Professional photos** — high-quality food images +- **Whitespace** — don't overcrowd the page + +### Content + +- **Accurate descriptions** — describe items accurately +- **Highlight specials** — make specials stand out +- **Include allergens** — always list allergens +- **Update regularly** — keep prices and items current +- **Use appetizing language** — make items sound delicious + +### Accessibility + +- **Readable fonts** — use clear, legible typefaces +- **Sufficient contrast** — ensure text is readable +- **Dietary labels** — clearly mark dietary options +- **Allergen warnings** — prominently display allergens +- **Mobile-friendly** — test on all devices + +## Examples + +### Restaurant Menu Structure + +``` +Appetizers +├── Bruschetta al Pomodoro +├── Calamari Fritti +└── Caprese Salad + +Pasta Dishes +├── Spaghetti Carbonara +├── Fettuccine Alfredo +└── Penne Arrabbiata + +Main Courses +├── Osso Buco +├── Branzino al Forno +└── Saltimbocca alla Romana + +Desserts +├── Tiramisu +├── Panna Cotta +└── Gelato Selection +``` + +### Cafe Menu Structure + +``` +Coffee +├── Espresso +├── Cappuccino +└── Latte + +Pastries +├── Croissants +├── Muffins +└── Scones + +Sandwiches +├── Caprese Panini +├── Smoked Turkey Club +└── Vegetarian Wrap +``` + +## Related Features + +- [Create Menu](../abilities/create-menu.md) — create navigation menus +- [Design Direction](./design-direction.md) — customize your site's design +- [Discovery Interview](./discovery-interview.md) — plan your site structure diff --git a/docs/addons/superdav-ai-agent/theme-builder/tools.md b/docs/addons/superdav-ai-agent/theme-builder/tools.md new file mode 100644 index 0000000..a0456be --- /dev/null +++ b/docs/addons/superdav-ai-agent/theme-builder/tools.md @@ -0,0 +1,255 @@ +--- +title: "Tools and Configuration" +sidebar_position: 4 +--- + +# Tools and Configuration + +Theme Builder uses a set of tools to analyze, design, and build your WordPress site. In version 1.16.0, **sd-ai-agent/site-scrape is now a Tier 1 tool**, making it available by default in Theme Builder. + +## Available Tools + +### Tier 1 Tools (Always Available) + +Tier 1 tools are available by default in Theme Builder without any additional configuration. + +#### sd-ai-agent/site-scrape + +**Purpose:** Analyze existing websites to extract design inspiration, content structure, and functionality. + +**Capabilities:** + +- **Website analysis** — scrape and analyze competitor or inspiration websites +- **Design extraction** — identify colors, fonts, and layout patterns +- **Content structure** — understand page organization and hierarchy +- **Feature detection** — identify plugins and functionality +- **Performance analysis** — check page speed and optimization +- **SEO analysis** — review meta tags and structured data + +**Usage:** + +``` +Analyze the design of example.com and use it as inspiration for my site. +``` + +**What It Extracts:** + +- Color palette and color usage +- Typography (fonts and sizes) +- Layout structure and spacing +- Navigation patterns +- Content organization +- Images and media usage +- Interactive elements +- Mobile responsiveness + +**Limitations:** + +- Cannot scrape password-protected sites +- Respects robots.txt and site policies +- May not capture dynamic content +- JavaScript-heavy sites may have limited analysis +- Large sites may take longer to analyze + +### Tier 2 Tools (Optional) + +Tier 2 tools are available when explicitly enabled in Theme Builder settings. + +#### Advanced Analytics + +Provides detailed performance metrics: + +- Page load times +- Core Web Vitals +- SEO score +- Accessibility score +- Best practices score + +#### Content Optimizer + +Analyzes and suggests improvements for: + +- Readability +- SEO optimization +- Keyword usage +- Content structure +- Call-to-action placement + +### Tier 3 Tools (Premium) + +Tier 3 tools require additional configuration or premium features. + +#### AI Content Generator + +Generates content for: + +- Product descriptions +- Service pages +- Blog posts +- Meta descriptions +- Call-to-action copy + +#### Advanced Design Tools + +Provides advanced design capabilities: + +- Custom CSS generation +- Animation creation +- Interactive element design +- Advanced color theory +- Typography optimization + +## Tool Configuration + +### Enabling Tools + +To enable additional tools in Theme Builder: + +1. Navigate to **Gratis AI Agent → Settings** +2. Go to **Theme Builder → Tools** +3. Toggle tools on/off as needed +4. Save settings + +### Tool Permissions + +Some tools require permissions: + +- **Site scraping** — requires internet access +- **Analytics** — requires Google Analytics integration +- **Content generation** — requires API keys +- **Advanced features** — may require premium subscription + +### API Keys and Credentials + +Configure API keys for tools that require them: + +1. Go to **Gratis AI Agent → Settings → API Keys** +2. Enter credentials for each tool +3. Test connection +4. Save securely + +## Using sd-ai-agent/site-scrape + +### Basic Usage + +Ask Theme Builder to analyze a website: + +``` +Analyze the design of my competitor's site at competitor.com +and suggest design improvements for my site. +``` + +### Specific Analysis + +Request specific types of analysis: + +``` +Extract the color palette from example.com and use it as inspiration. +``` + +``` +Analyze the navigation structure of example.com and apply similar +organization to my site. +``` + +``` +Check the mobile responsiveness of example.com and ensure my site +is equally responsive. +``` + +### Comparison Analysis + +Compare multiple sites: + +``` +Compare the designs of site1.com and site2.com and create a design +that combines the best elements of both. +``` + +## Tool Limitations and Considerations + +### Rate Limiting + +- Scraping is rate-limited to prevent server overload +- Multiple requests to the same site may be throttled +- Large sites may take longer to analyze + +### Content Accuracy + +- Dynamic content may not be fully captured +- JavaScript-rendered content may be incomplete +- Real-time data may not be reflected +- Some content may be behind paywalls + +### Legal and Ethical Considerations + +- Respect robots.txt and site policies +- Don't scrape copyrighted content for reproduction +- Use analysis for inspiration, not copying +- Verify you have rights to use extracted content +- Follow terms of service of analyzed sites + +### Performance Impact + +- Scraping large sites may take time +- Multiple simultaneous scrapes may be slower +- Network connectivity affects speed +- Large datasets may require more processing + +## Best Practices + +### Using Site Analysis + +1. **Analyze multiple sites** — gather inspiration from several sources +2. **Focus on structure** — learn layout and organization patterns +3. **Extract colors** — use color palettes as starting points +4. **Study typography** — identify font combinations you like +5. **Review navigation** — understand menu organization + +### Ethical Scraping + +1. **Respect robots.txt** — follow site guidelines +2. **Don't copy content** — use analysis for inspiration only +3. **Verify rights** — ensure you can use extracted content +4. **Attribute sources** — credit inspiration sources +5. **Follow terms** — comply with site terms of service + +### Maximizing Tool Effectiveness + +1. **Be specific** — request specific types of analysis +2. **Provide context** — explain your site's purpose +3. **Set expectations** — describe your design goals +4. **Iterate** — refine based on results +5. **Combine tools** — use multiple tools for comprehensive analysis + +## Troubleshooting + +### Site Won't Scrape + +- Check if site is publicly accessible +- Verify robots.txt allows scraping +- Try a different site +- Check internet connection +- Contact support if issue persists + +### Incomplete Analysis + +- Site may have dynamic content +- JavaScript may not be fully rendered +- Large sites may timeout +- Try analyzing specific pages instead +- Request specific analysis types + +### Slow Performance + +- Large sites take longer to analyze +- Multiple simultaneous scrapes are slower +- Network connectivity affects speed +- Try during off-peak hours +- Analyze smaller sections first + +## Related Documentation + +- [Discovery Interview](./discovery-interview.md) — gather design information +- [Design Direction](./design-direction.md) — refine your design +- [Hospitality Menus](./hospitality-menus.md) — create menu pages diff --git a/sidebars.js b/sidebars.js index 1db024e..01e648a 100644 --- a/sidebars.js +++ b/sidebars.js @@ -275,6 +275,11 @@ const sidebars = { label: 'Gratis AI Agent', items: [{type: 'autogenerated', dirName: 'addons/gratis-ai-agent'}], }, + { + type: 'category', + label: 'Superdav AI Agent', + items: [{type: 'autogenerated', dirName: 'addons/superdav-ai-agent'}], + }, { type: 'category', label: 'Analytics',