PHP code example of melasistema / hyde-layouts-manager

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

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

    

melasistema / hyde-layouts-manager example snippets

@php($title = 'Home')

@extends(config('hyde-layouts-manager.layouts.' . config('hyde-layouts-manager.default_layout') . '.app', 'hyde::layouts.app'))

@section('content')
// page content
@endsection

@

'layouts' => [
    'melasistema' => [
        'app' => 'hyde-layouts-manager::layouts.melasistema.app',
        'page' => 'hyde-layouts-manager::layouts.melasistema.page',
        'post' => 'hyde-layouts-manager::layouts.melasistema.post',
        'styles' => 'vendor/hyde-layouts-manager/css/melasistema/app.css',
        'scripts' => 'vendor/hyde-layouts-manager/js/melasistema/app.js',
    ],
],

{!! app('layout.manager')->renderComponent('flowbite.hero-sections.jumbotron', [
    'styleKey' => 'default',
    'settings' => [
        'applyContentMaxWidth' => true,
        'showPrimaryButton' => false,
        'showSecondaryButton' => false,
        'padding' => 'py-8 md:py-32 px-0 md:px-16',
        'bgImageUrl' => asset('hyde-hat-jumbotron.png'),
        'darkBgImageUrl' => asset('hyde-hat-jumbotron.png'),
        'bgImageAdditionalClasses' => 'bg-contain bg-no-repeat',
        'headingType' => 'h2',
        'headingTextFontFamily' => 'secondary',
        'headingText' => 'Whatever it is your\'re
            <span class="text-purple-500 text-8xl">style</span>,
            <br>we\'ve got you covered!' ,
        'headingTextAlign' => 'right',
        'subHeadingText' => 'Save <span class="text-purple-500">presets</span>,
            <span class="text-purple-500">override</span> with ease, and design
            <span class="text-purple-500">without limits</span>.',
        'subHeadingTextFontFamily' => 'subheading',
        'subHeadingTextAlign' => 'right',
        'subHeadingTextExtraClasses' => 'pt-8',
    ]
]) !!}

'components' => [
    'flowbite' => [
        'carousel' => [
            'default-slider' => [ // Preset identifier for the component
                'view' => 'hyde-layouts-manager::components.flowbite.carousel.default-slider', // Blade view path
                'styles' => [ // Define different style presets
                    'default' => [ // Default style preset
                        'config' => [
                            'layout' => [ // Layout options for the component
                                'showIndicators' => true,   // Show slide indicators
                                'showControls' => true,     // Show next/previous controls
                                'rounded' => false,         // Enable/disable rounded corners
                            ],
                            'settings' => [], // Additional settings for customization
                            'images' => [ // Default images for the carousel
                                'hyde-layouts-manager/carousel/example/carousel-1.svg',
                                'hyde-layouts-manager/carousel/example/carousel-2.svg',
                                'hyde-layouts-manager/carousel/example/carousel-3.svg',
                                'hyde-layouts-manager/carousel/example/carousel-4.svg',
                                'hyde-layouts-manager/carousel/example/carousel-5.svg',
                            ],
                        ]
                    ],
                ]
            ],
        ],
    ],
],

    php hyde layouts:list
    

    php hyde package-json:merge
    

    php hyde tailwind:merge
    

'navigation' => [  
    'brand' => [  
        'type' => 'custom', // Accepted values: 'text', 'image', 'custom' 
        'url' => '/',  
        'lightLogo' => 'media/hyde-layouts-manager/logo/logo-navigation-light.png', // Path to the light logo 
        'darkLogo' => 'media/hyde-layouts-manager/logo/logo-navigation-dark.png', // Path to the dark logo 
        'logoHeight' => 'h-10', // Adjust the logo height (e.g., 'h-10' for height 2.5rem) 
    ],  
    'navbarLink' => [  
        'color' => 'text-gray-700', // Normal state link color 
        'darkColor' => 'text-gray-400', // Dark theme link color 
        'hoverColor' => 'text-purple-500', // Hover state link color 
        'darkHoverColor' => 'text-purple-500', // Dark theme hover color 
    ],  
],`

'navigation' => [
    'cta' => [
        'enabled' => true, // Set to false to disable the CTA button
        'text' => 'Get Started', // Button text
        'textColor' => 'text-white', // Text color for the CTA button
        'url' => 'https://github.com/melasistema/hydephp-layouts-manager', // URL to redirect
        'urlTarget' => '_blank', // Define the link's target (_blank for a new tab)
        'bgColor' => 'bg-purple-500', // Background color for the CTA button
        'darkBgColor' => 'bg-purple-500', // Dark theme background color
        'hoverBgColor' => 'bg-purple-800', // Hover state background color
        'darkHoverBgColor' => 'bg-purple-800', // Dark theme hover color
        'focusRingColor' => 'ring-purple-800', // Focus ring color
        'darkFocusRingColor' => 'ring-purple-800', // Dark theme focus ring color
        'extraClasses' => 'focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-4 py-2 text-center', // Extra classes for styling
    ],
],

'navigation' => [
    'social' => [
        'enabled' => true, // Enable or disable the social media icons section
        'platforms' => [
            'github' => [
                'enabled' => true, // Enable GitHub link
                'url' => 'https://github.com/melasistema', // Link to your GitHub profile
                'icon' => '<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"><path d="M16,2.345c7.735,0,14,6.265,14,14-.002,6.015-3.839,11.359-9.537,13.282..."></path></svg>',
                'iconColor' => 'text-gray-700', // Light theme icon color
                'darkIconColor' => 'text-white', // Dark theme icon color
            ],
            'linkedin' => [
                'enabled' => true, // Enable LinkedIn link
                'url' => 'https://www.linkedin.com/in/luca-visciola/', // Link to your LinkedIn profile
                'icon' => '<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"><path d="M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889..."></path></svg>',
                'iconColor' => 'text-gray-700', // Light theme icon color
                'darkIconColor' => 'text-white', // Dark theme icon color
            ],
            'facebook' => [
                'enabled' => false, // Disable Facebook link
                'url' => 'https://facebook.com', // Facebook URL
                'icon' => '<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"><path d="M16,2c-7.732,0-14,6.268-14,14..."></path></svg>',
                'iconColor' => 'text-gray-700',
                'darkIconColor' => 'text-white',
            ],
        ],
    ],
],

'footer' => [
    'view' => 'vendor.hyde-layouts-manager.layouts.melasistema.footer', // Path to the Blade view for the footer
    'default' => [
        'bgColor' => 'bg-white', // Light theme background color for the footer
        'darkBgColor' => 'dark:bg-gray-800', // Dark theme background color
        'textColor' => 'text-gray-900', // Light theme text color
        'darkTextColor' => 'dark:text-white', // Dark theme text color
        'description' => 'Manage your layouts and reusable components with ease.', // Footer description text
        'links' => [
            [
                'title' => 'GitHub', // Footer link title
                'url' => 'https://github.com/melasistema/hydephp-layouts-manager', // Link URL
            ],
            [
                'title' => 'About Me',
                'url' => 'https://github.com/melasistema',
            ],
        ],
    ],
],

bash
php hyde vendor:publish --provider="Melasistema\HydeLayoutsManager\HydeLayoutsManagerServiceProvider" --tag="hyde-layouts-manager-config"

javascript
const defaultTheme =  =  'class',
    content: [
        './_pages/**/*.blade.php',
        './resources/views/**/*.blade.php',
        './vendor/hyde/framework/resources/views/**/*.blade.php',
        ...HydeLayoutsManagerConfig.content,
    ],
    safelist: [
        ...HydeLayoutsManagerConfig.safelist
    ],
    theme: {
        extend: {
            typography: {},
            colors: {},
            ...HydeLayoutsManagerConfig.theme.extend,
        },
    },

    plugins: [
        

bash
php hyde tailwind:merge

bash
php hyde package-json:merge

bash
php hyde vendor:publish --provider="Melasistema\HydeLayoutsManager\HydeLayoutsManagerServiceProvider" --tag="hyde-layouts-manager-views"

json
{
  "layouts": {
    "melasistema": {
      "use_google_fonts": true,
      "families": {
        "primary": "Nunito Sans:wght@400;600;700",
        "secondary": "Poppins:wght@500;600;700",
        "display": "Fredoka:wght@400;600",
        "heading": "Nunito:wght@600;700",
        "subheading": "Karla:wght@400;600",
        "accent": "Pacifico:wght@400",
        "code": "Fira Code:wght@400;500",
        "small": "Raleway:wght@400;600",
        "special": "Indie Flower:wght@400"
      },
      "typography_mapping": {
        "h1": "display",
        "h2": "heading",
        "h3": "subheading",
        "h4": "subheading",
        "h5": "secondary",
        "h6": "secondary",
        "p": "primary",
        "small": "small",
        "code": "code",
        "blockquote": "accent",
        "label": "secondary",
        "button": "heading",
        "special": "special"
      },
      "custom_css": {}
    }
  }
}