### JSON-LD Implementation Examples and Guides

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/README.md

Highlights the availability of JSON-LD implementation examples, validation guides for Google Rich Results compliance, SEO impact analysis, voice search optimization best practices, and troubleshooting for common issues.

```json-ld
Documentation Features:
- Schema Implementation Examples: Real-world code examples.
- Validation Testing Guide: Google Rich Results compliance.
- SEO Impact Analysis: Performance improvements with structured data.
- Voice Search Optimization: Schema.org best practices.
- Troubleshooting Guide: Common JSON-LD issues and solutions.
```

--------------------------------

### Environment Setup Script

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/child-theme-development-guide.md

This bash script outlines the initial steps for setting up a child theme directory structure for a web application. It includes navigating to the workspace, creating theme directories, and copying a theme configuration template.

```bash
# Navigate to workspace
cd /workspace

# Create child theme directory
mkdir -p {app}-themes/waboot-child

# Set up directory structure
mkdir -p {app}-themes/waboot-child/{templates/{atoms,molecules,organisms},css,js,images}

# Copy theme configuration template
cp templates/theme.xml {app}-themes/waboot-child/theme.xml
```

--------------------------------

### Run Accessibility Tests with Axe-CLI and Pa11y

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/child-theme-development-guide.md

Outlines commands to install and run accessibility testing tools like axe-cli and pa11y against web pages to ensure WCAG compliance.

```bash
# Install accessibility testing tools
npm install -g axe-cli
npm install -g pa11y

# Run accessibility tests
axe http://localhost/shop/
pa11y http://localhost/shop/
```

--------------------------------

### Validate CSS with Stylelint and CSSLint

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/child-theme-development-guide.md

Provides commands to install and run Stylelint and CSSLint for validating CSS files, ensuring code quality and adherence to standards.

```bash
# Install CSS validation tools
npm install -g stylelint
npm install -g csslint

# Validate CSS files
stylelint "css/**/*.css"
csslint css/waboot-child.css
```

--------------------------------

### JSON-LD Schema Validation Examples

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/json-ld-integration-guide.md

Demonstrates correct and incorrect JSON-LD structures for schema validation, highlighting missing required properties for 'Product' schema and providing correct examples.

```json
// ❌ Incorrect - Missing required properties
{
  "@type": "Product",
  "name": "Sample Product"
}

// ✅ Correct - All required properties included
{
  "@type": "Product",
  "name": "Sample Product",
  "image": "https://example.com/image.jpg",
  "description": "Product description",
  "offers": {
    "@type": "Offer",
    "price": "29.99",
    "priceCurrency": "USD"
  }
}
```

--------------------------------

### Theme Settings and Conditional Rendering

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/waboot/templates/layout.html

Demonstrates how to retrieve theme settings and apply conditional logic based on locale and other variables. Includes examples for layout, color schemes, header styles, logos, and preloading assets.

```smarty
{* RTL Styles for Right-to-Left Languages *}
{if $wa->getLocale() == 'ar' || $wa->getLocale() == 'he'}dir="rtl"{/if}>
    {* Theme Title and Meta *}
    {if $wa_title}{$wa_title|escape}{else}{$wa->shop->settings('name')}{/if}
    {* Canonical URL *}
    {if $canonical}{/if}
    {* Open Graph Meta Tags *}
    {if $og_image}{/if}
    {* Theme Settings Variables *}
    {$layout_type = $wa->theme()->settings('layout_type', 'wide')}
    {$color_scheme = $wa->theme()->settings('color_scheme', 'light')}
    {$header_style = $wa->theme()->settings('header_style', 'default')}
    {$logo = $wa->theme()->settings('logo')}
    {$preload_assets = $wa->theme()->settings('preload_assets', true)}
    {* Preload Critical Assets for Performance *}
    {if $preload_assets}
    {/if}
    {* Critical CSS - Bootstrap 5 Framework *}
    {* Theme Custom Styles *}
    {* BEM Utility Classes *}
    {* RTL Styles for Right-to-Left Languages *}
    {if $wa->getLocale() == 'ar' || $wa->getLocale() == 'he'}
    {/if}
    {* Dark Mode Styles *}
    {* Favicon and Touch Icons *}
    {* Additional Head Content from Apps *}
    {$wa->header()}
    {* Theme Color for Browser UI *}
```

--------------------------------

### Webasyst Navigation Function Equivalents

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/migration-guide.md

Maps WordPress navigation functions to Webasyst equivalents, covering menu display, search forms, pagination, and navigation links.

```APIDOC
Navigation Function Mapping:

WordPress Function | Webasyst Equivalent | Description
-------------------|-------------------|-------------
`wp_nav_menu()` | `{wa_navigation}` | Display navigation menu
`get_search_form()` | `{include file="search.html"}` | Include search form
`paginate_links()` | Custom pagination logic | Display pagination
`next_post_link()` | `{$next_product.url}` | Next item link
`previous_post_link()` | `{$prev_product.url}` | Previous item link
```

--------------------------------

### Validate JavaScript with ESLint and JSHint

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/child-theme-development-guide.md

Details commands for installing and executing ESLint and JSHint to validate JavaScript files, promoting code consistency and error detection.

```bash
# Install JavaScript testing tools
npm install -g eslint
npm install -g jshint

# Validate JavaScript files
eslint js/waboot-*.js
jshint js/waboot-*.js
```

--------------------------------

### Webasyst Template Function Equivalents

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/migration-guide.md

Maps common WordPress template functions to their Webasyst equivalents, facilitating the transition of template logic and output rendering.

```APIDOC
Template Function Mapping:

WordPress Function | Webasyst Equivalent | Description
-------------------|-------------------|-------------
`get_header()` | `{include file="header.html"}` | Include header template
`get_footer()` | `{include file="footer.html"}` | Include footer template
`wp_head()` | `{$wa->shop->header()}` | Output head metadata
`wp_footer()` | `{$wa->shop->footer()}` | Output footer scripts
`the_title()` | `{$product.name|escape}` | Display title/name
`the_content()` | `{$product.description}` | Display content/description
`get_permalink()` | `{$wa_app_url}product/{$product.url}/` | Get item URL
`has_post_thumbnail()` | `{if $product.image}` | Check for featured image
`the_post_thumbnail()` | `<img src="{$product.image.url_crop}">` | Display featured image
```

--------------------------------

### Install Waboot Theme Package

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/theme-documentation.md

Commands to download, extract, and set file permissions for the Waboot theme package within the Webasyst directory structure. Ensures the theme files are accessible and executable.

```bash
chmod -R 755 wa-apps/shop/themes/waboot/
```

--------------------------------

### Install Site Theme (Parent Theme)

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/README.md

Installs the parent Site theme, which serves as the base for all child themes in the Waboot system. This theme is automatically available within the Site app settings once installed.

```bash
# Site theme serves as parent for all child themes
# Ensure Site app is installed and active
# Theme automatically available in Site app settings
```

--------------------------------

### HTML Heading Atom Example

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/site-app-migration-plan.md

Provides an example of a Heading Atom, used for semantic text structure. It shows how to define the heading level, content text, and apply custom CSS classes.

```html
{include file="atoms/heading.html" 
    level="h1" 
    text="Welcome to Our Site" 
    class="hero-title"}
```

--------------------------------

### Webasyst Data Access Function Equivalents

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/migration-guide.md

Maps WordPress data access functions to Webasyst equivalents for retrieving settings, user information, and cart contents.

```APIDOC
Data Access Function Mapping:

WordPress Function | Webasyst Equivalent | Description
-------------------|-------------------|-------------
`get_option()` | `{$wa->shop->settings()}` | Get settings
`get_theme_mod()` | `{$wa->theme()->settings()}` | Get theme settings
`wp_get_current_user()` | `{$wa->getUser()}` | Get current user
`is_user_logged_in()` | `{$wa->getUser()->isAuth()}` | Check authentication
`get_cart_contents()` | `{$wa->getStorage('shop/cart')}` | Get cart contents
```

--------------------------------

### JavaScript Performance Testing with Lighthouse

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/site-app-migration-plan.md

Example of using Lighthouse to measure web page performance metrics like LCP and FCP, and assess asset optimization.

```javascript
// Lighthouse performance testing
describe('Site App Performance', () => {
    test('Homepage loads within 3 seconds', async () => {
        const metrics = await lighthouse('/');
        expect(metrics.lcp).toBeLessThan(3000);
        expect(metrics.fcp).toBeLessThan(1500);
    });
    
    test('Assets are properly optimized', async () => {
        const metrics = await lighthouse('/');
        expect(metrics.performance).toBeGreaterThan(90);
    });
});
```

--------------------------------

### Waboot Custom JavaScript Example

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/theme-documentation.md

Example JavaScript snippet showing how to integrate custom logic using Alpine.js within the Waboot theme. It demonstrates creating a custom Alpine.js store for managing application state or interactions.

```javascript
// Example: Custom product interactions
document.addEventListener('alpine:init', () => {
    Alpine.store('customStore', {
        // Your custom Alpine.js store
    });
});
```

--------------------------------

### Component Documentation Template Structure (Markdown)

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/site-app-migration-plan.md

Provides a template structure for documenting individual components. It outlines sections for description, usage, parameters, examples, CSS classes, accessibility, and browser support.

```markdown
# Component Name

## Description
Brief description of the component and its purpose.

## Usage
```html
{include file="path/to/component.html" 
    param1="value1" 
    param2="value2"}
```

## Parameters
| Parameter | Type | Default | Required | Description |
|-----------|------|---------|----------|-------------|
| param1    | string | "" | Yes | Description of param1 |
| param2    | boolean | false | No | Description of param2 |

## Examples
### Basic Usage
### With Variants
### Accessibility Features

## CSS Classes
- `.component-class` - Main component class
- `.component-class--modifier` - Modifier class

## Accessibility
- ARIA labels used
- Keyboard navigation support
- Screen reader compatibility

## Browser Support
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
```

--------------------------------

### Webasyst E-commerce Function Equivalents

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/migration-guide.md

Maps WordPress/WooCommerce e-commerce functions to their Webasyst counterparts, including product retrieval, price formatting, cart, and checkout URLs.

```APIDOC
E-commerce Function Mapping:

WordPress/WooCommerce | Webasyst Equivalent | Description
----------------------|-------------------|-------------
`wc_get_products()` | `{$products.products}` | Get product list
`wc_get_product()` | `{$product}` | Get single product
`wc_price()` | `{wa_currency($product.price)}` | Format price
`woocommerce_breadcrumb()` | Custom breadcrumb template | Display breadcrumbs
`woocommerce_output_product_data_tabs()` | Custom tab implementation | Product detail tabs
`wc_get_cart_url()` | `{$wa_app_url}cart/` | Cart page URL
`wc_get_checkout_url()` | `{$wa_app_url}checkout/` | Checkout page URL
```

--------------------------------

### HTML Button Atom Example

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/site-app-migration-plan.md

Demonstrates the usage of a reusable Button Atom component within a templating system. It shows how to pass parameters like type, variant, text, and an icon.

```html
{include file="atoms/button.html" 
    type="submit" 
    variant="primary" 
    text="Subscribe" 
    icon="fas fa-envelope"}
```

--------------------------------

### Development Setup Bash Commands

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/README.md

Provides essential bash commands to clone the repository, navigate into the project directory, and notes on setting up the Webasyst development environment. It also highlights the dependency on the Site app and the importance of validating JSON-LD.

```bash
git clone https://github.com/adgooroo/wp-wa-migration.git
cd wp-wa-migration
# Install in Webasyst development environment
# Ensure Site app is installed as parent theme dependency
# Validate JSON-LD with schema testing tools
```

--------------------------------

### Bash Version Control Commands

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/theme-documentation.md

Demonstrates basic Git commands for initializing a repository, staging changes, committing, and creating branches for managing project versions and development workflows.

```bash
# Initialize git repository
git init
git add .
git commit -m "Initial Waboot theme commit"

# Track changes
git add -A
git commit -m "Update product template styling"

# Create branches for major changes
git checkout -b feature/new-homepage-design
```

--------------------------------

### Copy and Set Permissions for Webasyst Child Theme

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/child-theme-development-guide.md

Copies the child theme directory to the Webasyst installation and sets appropriate read/write/execute permissions for the theme files. This ensures the theme is correctly placed and accessible within the Webasyst application structure.

```bash
# Copy child theme to Webasyst installation
cp -r {app}-themes/waboot-child/ /path/to/webasyst/wa-apps/{app}/themes/

# Set proper permissions
chmod -R 755 /path/to/webasyst/wa-apps/{app}/themes/waboot-child/
```

--------------------------------

### HTML Image Optimization: Responsive Images

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/migration-guide.md

Illustrates the use of responsive images in HTML with `srcset`, `sizes`, and `loading="lazy"` attributes for improved performance and user experience across different devices and network conditions.

```html
<!-- Responsive images -->
<img src="{$product.image.url_thumb}" 
     srcset="{$product.image.url_thumb} 300w,
             {$product.image.url_crop} 600w,
             {$product.image.url_original} 1200w"
     sizes="(max-width: 768px) 300px,
            (max-width: 1200px) 600px,
            1200px"
     loading="lazy"
     alt="{$product.name|escape}">
```

--------------------------------

### Responsive Design with Media Queries

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/migration-guide.md

Illustrates a mobile-first responsive design strategy using Bootstrap's grid system and custom media queries. It shows how font sizes are adjusted for different screen breakpoints (mobile, tablet, desktop).

```css
/* Mobile first */
.waboot__hero-title {
    font-size: 2.5rem;
}

/* Tablet */
@media (min-width: 768px) {
    .waboot__hero-title {
        font-size: 3rem;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .waboot__hero-title {
        font-size: 4rem;
    }
}
```

--------------------------------

### Install Shop-Script Child Theme

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/README.md

Copies the Shop-Script child theme into the Webasyst shop themes directory. This theme is designed for e-commerce functionality and requires the Shop app to be installed. Permissions are set to ensure proper execution.

```bash
# Copy shop child theme (when development complete)
cp -r shop-themes/waboot-child/ /path/to/webasyst/wa-apps/shop/themes/
chmod -R 755 /path/to/webasyst/wa-apps/shop/themes/waboot-child/
```

--------------------------------

### CSS Optimization: Efficient Selectors and Animations

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/migration-guide.md

Demonstrates CSS best practices for performance, focusing on using efficient selectors like class names and optimizing animations with properties like 'transition' and 'will-change'.

```css
/* Use efficient selectors */
.waboot__nav-link { /* Good: class selector */ }
nav ul li a { /* Avoid: complex descendant selectors */ }

/* Optimize animations */
.waboot__product-card {
    transition: transform 0.3s ease;
    will-change: transform; /* Optimize for animations */
}
```

--------------------------------

### Waboot Custom CSS Example

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/theme-documentation.md

Example CSS snippet demonstrating how to apply custom styles to the Waboot theme, including overriding CSS variables for primary and secondary colors and setting background images for hero sections.

```css
/* Example customizations */
:root {
    --waboot-primary: #your-brand-color;
    --waboot-secondary: #your-secondary-color;
}

.waboot__hero {
    background-image: url('your-hero-image.jpg');
}
```

--------------------------------

### Alert Messages Display

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/waboot/templates/layout.html

Iterates through messages and displays their text content. This is typically used for showing user feedback, errors, or notifications.

```smarty
{* Alert Messages *}
{if $messages}
{foreach $messages as $message}
{$message.text}
{/foreach}
{/if}
```

--------------------------------

### JavaScript Accessibility Testing with Axe-core

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/site-app-migration-plan.md

Example of using axe-core and Puppeteer to perform accessibility audits on web pages, checking for WCAG compliance and keyboard navigation.

```javascript
// axe-core accessibility testing
describe('Site App Accessibility', () => {
    test('Homepage meets WCAG 2.2 AA standards', async () => {
        await page.goto('/');
        const results = await new AxePuppeteer(page).analyze();
        expect(results.violations).toHaveLength(0);
    });
    
    test('Contact page is keyboard navigable', async () => {
        await page.goto('/contact');
        await page.keyboard.press('Tab');
        const focusedElement = await page.evaluate(() => document.activeElement.tagName);
        expect(focusedElement).toBe('INPUT');
    });
});
```

--------------------------------

### HTML/JavaScript: Script Loading Order for Alpine.js

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/docs/migration-guide.md

Highlights the importance of script loading order for JavaScript frameworks like Alpine.js, showing the correct way to include the script with the `defer` attribute to prevent 'not working' errors.

```html
<!-- Alpine.js must be loaded with defer -->
<script src="{$wa_theme_url}js/vendor/alpine.min.js" defer></script>
```

--------------------------------

### Contact Section with Call to Action

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/site-app/themes/default/templates/pages/home.html

Renders a contact section with a prominent heading and supporting text, followed by two call-to-action buttons ('Contact Us' and 'View Portfolio') to guide user engagement.

```templating
{include file="atoms/heading.html" level="h2" text="Ready to Get Started?" class="text-white mb-4" }

Contact us today to discuss your project requirements and see how we can help.

{include file="atoms/button.html" text="Contact Us" url="/contact/" variant="light" size="lg" } {include file="atoms/button.html" text="View Portfolio" url="/portfolio/" variant="outline-light" size="lg" }
```

--------------------------------

### Product Schema Markup (JSON-LD)

Source: https://github.com/adgooroo/wa-wp-atomic-migration/blob/main/waboot/templates/layout.html

Implements structured data for product information using JSON-LD format. This helps search engines understand product details like name, price, availability, and brand, improving SEO.

```json-ld
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "{$product.name|escape}",
  "description": "{$product.summary|escape}",
  "image": "{if $product.image}{$product.image.url_big}{/if}",
  "brand": {
    "@type": "Brand",
    "name": "{$wa->shop->settings('name')}"
  },
  "offers": {
    "@type": "Offer",
    "price": "{$product.price}",
    "priceCurrency": "{$wa->shop->currency()}",
    "availability": "{if $product.count > 0}https://schema.org/InStock{else}https://schema.org/OutOfStock{/if}"
  }
}
```