PHP code example of maxpertici / markup

1. Go to this page and download the library: Download maxpertici/markup library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

maxpertici / markup example snippets



MaxPertici\Markup\Markup;

// Simple element creation
$paragraph = new Markup(
    wrapper: '<p>%children%</p>',
    children: ['Hello, World!']
);
echo $paragraph->render();
// Output: <p>Hello, World!</p>

// Create with classes and attributes using Markup::make()
$div = Markup::make(
    tag: 'div',
    classes: ['container', 'text-center'],
    attributes: ['id' => 'main']
);
$div->append('Content here');

echo $div->render();
// Output: <div class="container text-center" id="main">Content here</div>

// Parse existing HTML with Markup::fromHtml()
$card = Markup::fromHtml(
    html: '<div class="card"><h2>Title</h2></div>'
);
$card->addClass('shadow')
     ->setAttribute('data-enhanced', 'true');

echo $card->render();
// Output: <div class="card shadow" data-enhanced="true"><h2>Title</h2></div>

// Card component
$card = new Markup(
    wrapper: '<div class="card">%children%</div>'
);
$card->children(
    new Markup(
        wrapper:'<h2 class="card-title">%children%</h2>',
        children: ['Card Title']
    ),
    new Markup(
        wrapper:'<p class="card-body">%children%</p>',
        children: ['Card content']
    )
);

echo $card->render();

$button = new Markup(
    wrapper: '<button class="%classes%" %attributes%>%children%</button>',
    wrapperClasses: ['btn', 'btn-primary'],
    wrapperAttributes: ['type' => 'submit', 'id' => 'submit-btn'],
    children: ['Submit']
);

echo $button->render();
// Output: <button class="btn btn-primary" type="submit" id="submit-btn">Submit</button>

// Modify classes and attributes
$button->addClass('btn-lg')
       ->removeClass('btn-primary')
       ->addClass('btn-secondary')
       ->setAttribute('disabled', 'true');

// Check classes
if ($button->hasClass('btn-secondary')) {
    echo "Button is secondary";
}

use MaxPertici\Markup\MarkupSlot;

// Define layout with slots
$layout = new Markup('<div class="layout">%children%</div>');
$layout->children(
    new MarkupSlot('header', '<header>%slot%</header>'),
    new MarkupSlot('content', '<main>%slot%</main>'),
    new MarkupSlot('footer', '<footer>%slot%</footer>')
);

// Fill the slots
$layout->slot('header', ['<h1>My Website</h1>'])
       ->slot('content', ['<p>Welcome!</p>'])
       ->slot('footer', ['<p>&copy; 2024</p>']);

echo $layout->render();

// Build a page structure
$page = Markup::make(
    tag: 'div',
    classes: ['page']
)->children(
    Markup::make(
        tag: 'header',
        classes: ['header']
    ),
    Markup::make(
        tag: 'main',
        classes: ['content']
    )->children(
        Markup::make(
            tag: 'p',
            classes: ['intro']
        )->append('Introduction text'),
        Markup::make(
            tag: 'p',
            classes: ['highlight']
        )->append('Important note')
    )
);

// Find elements using CSS selectors
$headers = $page->find()->css('.header')->get();
$paragraphs = $page->find()->css('main p')->get();
$highlighted = $page->find()->css('.highlight')->first();

// Modify found elements with collection methods
$page->find()->css('.intro')->get()
    ->each(fn($intro) => $intro->addClass('text-large'));

// Filter and transform
$page->find()->tag('p')->get()
    ->filter(fn($p) => $p->hasClass('intro'))
    ->each(fn($p) => $p->addClass('featured'));

// Conditional rendering
$card = Markup::make(
    tag: 'div',
    classes: ['card']
)->append('Regular content');
$isAdmin = true;

$card->when($isAdmin, function($markup) {
    $markup->append(
        Markup::make(
            tag: 'div',
            classes: ['admin-panel'])
        ->append('Admin tools')
    );
});

// Loop through data
$users = [
    ['name' => 'Alice', 'email' => '[email protected]'],
    ['name' => 'Bob', 'email' => '[email protected]'],
];

$list = Markup::make(tag: 'ul');
$list->each($users, function($user, $index, $markup) {
    $markup->append(
        Markup::make(tag: 'li')
        ->append("{$user['name']} - {$user['email']}")
    );
});

echo $list->render();

use MaxPertici\Markup\MarkupFlow;

$nav = new Markup(
    wrapper: '<ul>%children%</ul>',
    childrenWrapper: '<li>%child%</li>',
    children: [
        'Home',
        'About',
        new MarkupFlow([
            'Products',
            new Markup(
                wrapper: '<ul>%children%</ul>',
                children: [
                    '<li>Electronics</li>',
                    '<li>Clothing</li>',
                    '<li>Books</li>',
                ]
            ),
        ]),
        'Contact',
    ]
);

echo $nav->render();

use MaxPertici\Markup\Markup;

// Fetch and parse HTML
$html = file_get_contents('https://example.com/blog');
$page = Markup::fromHtml(html: $html);

// Find articles and process with collection methods
$articles = $page->find()->tag('article')->get();

$articles->each(function($article) {
    // Get title and excerpt
    $title = $article->find()->tag('h2')->first();
    $excerpt = $article->find()->tag('p')->first();

    if ($title) {
        echo "Title: " . $title->text() . "\n";
    }
    if ($excerpt) {
        echo "Excerpt: " . $excerpt->text() . "\n";
    }
    echo "---\n";
});

// Get only featured articles
$featured = $page->find()->tag('article')->get()
    ->filter(fn($article) => $article->hasClass('featured'));

// Extract all titles
$titles = $page->find()->tag('article')->get()
    ->map(fn($article) => $article->find()->tag('h2')->first())
    ->filter(fn($title) => $title !== null)
    ->map(fn($title) => $title->text());

// Take first 5 articles and enhance them
$page->find()->tag('article')->get()
    ->take(5)
    ->each(fn($article) => $article->addClass('featured-item'));

echo $page->render();

// Create elements with Markup::make()
$div = Markup::make(
    tag: 'div',
    classes: ['container'],
    attributes: ['id' => 'main']
);
$div->append('Content here');

// Or use MarkupFactory directly
$div = MarkupFactory::create(
    tag: 'div',
    classes: ['container'],
    attributes: ['id' => 'main']
);

// Parse HTML with Markup::fromHtml()
$markup = Markup::fromHtml(html: '<div class="box">Content</div>');
$markup->addClass('shadow');

// Or use MarkupFactory directly
$markup = MarkupFactory::fromHtml(html: '<div class="box">Content</div>');

// Use predefined elements with enums
use MaxPertici\Markup\Elements\HtmlTag;

$button = MarkupFactory::fromElement(
    element: HtmlTag::BUTTON,
    children: ['Click me'],
    classes: ['btn', 'btn-primary']
);

$page->find()->css('.section')->get();              // by class
$page->find()->css('div')->get();                   // by tag
$page->find()->css('#hero')->first();               // by ID
$page->find()->css('[role="main"]')->get();         // by attribute
$page->find()->css('nav li.active')->get();         // combined
$page->find()->css('.header > nav')->get();         // direct child
$page->find()->css('nav:has(li.active)')->get();    // has pseudo-class

// Filter elements
$featured = $page->find()->tag('article')->get()
    ->filter(fn($article) => $article->hasClass('featured'));

// Map and transform
$titles = $page->find()->tag('h2')->get()
    ->map(fn($title) => $title->text());

// Take subset
$first5 = $page->find()->tag('p')->get()->take(5);

// Iterate with each
$page->find()->css('.card')->get()
    ->each(fn($card) => $card->addClass('enhanced'));

// Chain methods
$page->find()->tag('article')->get()
    ->filter(fn($article) => $article->hasClass('published'))
    ->take(10)
    ->each(fn($article) => $article->addClass('featured'));

use MaxPertici\Markup\Contracts\MarkupElementInterface;

enum BootstrapComponent implements MarkupElementInterface {
    case CARD;
    case BUTTON_PRIMARY;
    case ALERT_SUCCESS;
    // ... implement