PHP code example of hudsxn / canvas

    
        
<?php
require_once('vendor/autoload.php');

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

    

hudsxn / canvas example snippets

// Slow: Creates new string buffer each time
$html .= '<div>';
$html .= $content;
$html .= '</div>';

// Fast: O(1) array append operations
$sourceCode[] = '<div>';
$sourceCode[] = $content;
$sourceCode[] = '</div>';
// Join once at the end: implode('', $sourceCode)

$page->enableCsp()
     ->allowScriptFrom("'self'", 'https://cdn.example.com')
     ->allowStyleFrom("'self'")
     ->blockAllMixed()
     ->forceHttps();

$page->setTitle('Page Title')
     ->setMeta('description', 'Page description')
     ->setSeo('og:image', 'https://example.com/image.jpg')
     ->setSeo('twitter:card', 'summary_large_image')
     ->noIndex(); // Staging environment

$root = new Node('div', ['class' => 'container']);
$root->addChild(new Node('h1', ['text' => 'Welcome']))
     ->addChild(new Node('p', ['text' => 'Content']));

// Search the tree
$button = $root->getChildByName('Button');
$primary = $root->getChildWhereProp('variant', 'primary');

$canvas = new Canvas('layouts/app', [
    'title' => 'My Page',
    'theme' => 'dark'
]);

// Change templates dynamically
if ($isMobile) {
    $canvas->setTemplate('layouts/mobile');
}

$page = new Page($canvas);
$page->setTitle('Welcome')
     ->setLocale('en-US')
     ->setCharset('UTF-8')
     ->enableCsp()
     ->forceHttps()
     ->noCache();

class BladeRenderer implements CanvasPageRenderer
{
    public function generateHtml(Page $page, array &$sourceCode): void
    {
        $canvas = $page->getCanvas();
        $html = view($canvas->getTemplate(), [
            'page' => $page,
            'canvas' => $canvas
        ])->render();
        
        $sourceCode[] = $html;
    }
}

$response = new Response($renderer, $page);
$response->setCompressionLevel(6)
         ->setStatusCode(200)
         ->addHeader('X-Custom-Header', 'value')
         ->send();

// Set multiple flags efficiently
$page->noIndex()->noFollow()->noCache();

// Fast flag checking internally
if (($flags & Page::NO_CACHE) === Page::NO_CACHE) {
    // Apply no-cache headers
}

$page->enableCsp()
     ->allowScriptFrom("'self'", 'https://cdn.jsdelivr.net')
     ->allowStyleFrom("'self'", "'unsafe-inline'")
     ->allowImageFrom('https:', 'data:')
     ->allowConnectTo("'self'", 'https://api.example.com')
     ->blockAllMixed()
     ->

$page->forceHttps();
// Generates: Strict-Transport-Security: max-age=31536000; 

use Hudsxn\Canvas\Renderers\SinglePageApplicationRenderer;

$renderer = new SinglePageApplicationRenderer();
$renderer->setJsUrl('/dist/app.js')
         ->setCssUrl('/dist/app.css')
         ->setMountElement('app')
         ->setStateVariable('__PAGE_STATE__');

$page = new Page($canvas);
$page->setTitle('My SPA')
     ->setMeta('description', 'A React application')
     ->enableCsp()
     ->allowScriptFrom("'self'");

$response = new Response($renderer, $page);
$response->send();

// Vendor + App splitting
$renderer->setJsUrls([
    '/dist/vendor.js',
    '/dist/app.js'
])->setCssUrls([
    'https://fonts.googleapis.com/css2?family=Inter',
    '/dist/app.css'
]);

$html = $response->render();
file_put_contents("dist/page-{$id}.html", $html);

use Hudsxn\Canvas\Objects\{Canvas, Page, Node};
use Hudsxn\Canvas\Response;

// Build the tree
$canvas = new Canvas('layouts/default');
$canvas->addChild(new Node('Header', ['logo' => 'logo.png']))
       ->addChild(new Node('Main', ['content' => 'Welcome!']))
       ->addChild(new Node('Footer'));

// Configure the page
$page = new Page($canvas);
$page->setTitle('Welcome to My Site')
     ->setMeta('description', 'A great website')
     ->enableCsp()
     ->allowScriptFrom("'self'")
     ->forceHttps();

// Render and send
$renderer = new MyRenderer();
$response = new Response($renderer, $page);
$response->send();

use Hudsxn\Canvas\Objects\{Canvas, Page};
use Hudsxn\Canvas\Renderers\SinglePageApplicationRenderer;
use Hudsxn\Canvas\Response;

// Create your page structure
$canvas = new Canvas('spa-app');
$canvas->addChild(new Node('Dashboard', ['userId' => 123]));

$page = new Page($canvas);
$page->setTitle('My React App')
     ->setMeta('viewport', 'width=device-width, initial-scale=1')
     ->enableCsp()
     ->allowScriptFrom("'self'", 'https://cdn.example.com')
     ->allowStyleFrom("'self'");

// Configure the SPA renderer
$renderer = new SinglePageApplicationRenderer();
$renderer->setJsUrl('/dist/app.js')
         ->setCssUrl('/dist/app.css');

// Send the response
$response = new Response($renderer, $page);
$response->send();

use Hudsxn\Canvas\Contracts\CanvasPageRenderer;
use Hudsxn\Canvas\Objects\Page;

class MyRenderer implements CanvasPageRenderer
{
    public function generateHtml(Page $page, array &$sourceCode): void
    {
        $canvas = $page->getCanvas();
        
        $sourceCode[] = '<!DOCTYPE html>';
        $sourceCode[] = '<html lang="' . $page->getLocale() . '">';
        $sourceCode[] = '<head>';
        $sourceCode[] = '<meta charset="' . $page->getCharset() . '">';
        $sourceCode[] = '<title>' . htmlspecialchars($page->getTitle()) . '</title>';
        
        // Render meta tags
        foreach ($page->getMetaTags() as $name => $content) {
            $sourceCode[] = '<meta name="' . $name . '" content="' . htmlspecialchars($content) . '">';
        }
        
        $sourceCode[] = '</head>';
        $sourceCode[] = '<body>';
        
        // Render canvas children
        foreach ($canvas->getChildren() as $node) {
            $sourceCode[] = $this->renderNode($node);
        }
        
        $sourceCode[] = '</body>';
        $sourceCode[] = '</html>';
    }
    
    private function renderNode($node): string
    {
        // Your component rendering logic
        return '<div>' . $node->getName() . '</div>';
    }
}

$renderer = new SinglePageApplicationRenderer();

// Asset configuration
$renderer->setJsUrl('/dist/app.js');              // Single JS file
$renderer->setJsUrls([...]);                      // Multiple JS files
$renderer->setCssUrl('/dist/app.css');            // Single CSS file
$renderer->setCssUrls([...]);                     // Multiple CSS files

// Customization
$renderer->setMountElement('root');               // Change mount point
$renderer->setStateVariable('INITIAL_STATE');     // Change state variable
$renderer->

// Production build with vendor splitting
$renderer = new SinglePageApplicationRenderer();
$renderer->setJsUrls([
    'https://cdn.example.com/vendor.js',
    'https://cdn.example.com/app.js'
])->setCssUrls([
    'https://fonts.googleapis.com/css2?family=Inter',
    'https://cdn.example.com/app.css'
])->setMountElement('react-root')
  ->setStateVariable('APP_DATA');

// Configure CSP for external resources
$page->enableCsp()
     ->allowScriptFrom("'self'", 'https://cdn.example.com')
     ->allowStyleFrom("'self'", 'https://fonts.googleapis.com')
     ->allowFontFrom('https://fonts.gstatic.com');