Components

Components are reusable building blocks for your pages.

Creating a Component

Create a V file in the components/ directory:

// components/callout.v
module components

pub struct Callout {
pub:
    type_   string  // info, warning, success, error
    content string
}

pub fn (c Callout) render() string {
    icon := match c.type_ {
        'info' { '💡' }
        'warning' { '⚠️' }
        'success' { '✅' }
        'error' { '🚨' }
        else { 'ℹ' }
    }
    return '<div class="callout callout-${c.type_}">
        <span class="callout-icon">${icon}</span>
        <div class="callout-content">${c.content}</div>
    </div>'
}

Using Components

Use components in your .vdx files with HTML-like syntax:

<Callout type_="info">
This is an informational message.
</Callout>

Component Structure

Every component needs:

1. A struct with public fields for props
2. A render() method that returns HTML string

pub struct ComponentName {
pub:
    prop1   string
    prop2   int = 10  // Default value
    content string    // Children content
}

pub fn (c ComponentName) render() string {
    return '<div>...</div>'
}

Built-in Components

Velt projects come with these components:

Children Content

Content between tags becomes the content field:

<Callout type_="info">
This text becomes the content field.
</Callout>

The content is automatically parsed as Markdown.

Styling Components

Add CSS for your components in assets/style.css:

.callout {
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.callout-info {
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
}

.callout-warning {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #f59e0b;
}

Best Practices

• Keep components focused - One component, one purpose
• Use semantic HTML - Accessibility matters
• Default values - Provide sensible defaults for optional props
• Document your components - Add comments explaining usage