Add Blade component support for logo customization

README.md

@@ -235,6 +235,7 @@ return [
     'logo' => [
         'type' => env('LEMME_LOGO_TYPE', 'view'),
         'view' => env('LEMME_LOGO_VIEW', 'lemme::partials.logo'),
+        'component' => env('LEMME_LOGO_COMPONENT', null),
         'image' => env('LEMME_LOGO_IMAGE', null),
         'text' => env('LEMME_LOGO_TEXT', null),
         'alt' => env('LEMME_LOGO_ALT', 'Logo'),
@@ -246,22 +247,23 @@ return [
 
 ### Logo Customization
 
-You can fully customize the logo displayed in the header. Choose one of three rendering modes via the config file or environment variables.
+You can fully customize the logo displayed in the header. Choose one of four rendering modes via the config file or environment variables.
 
-> Recommended: Use the `view` (Blade partial) option. It's the most flexible and future‑proof approach because you can:
+> Recommended: Use the `component` (Blade component) or `view` (Blade partial) option. These are the most flexible and future‑proof approaches because you can:
 > - Swap light/dark variants conditionally
 > - Add accessible markup (ARIA labels, screen-reader text)
 > - Inject dynamic data (app version, beta badge, etc.)
 > - Reuse shared components / Tailwind classes
 > - Evolve the logo without changing `.env` variables
 >
-> The `image` and `text` modes are intentionally lightweight shortcuts, but most projects should create and use a Blade partial.
+> The `image` and `text` modes are intentionally lightweight shortcuts, but most projects should create and use a Blade component or partial.
 
-| Type  | Env Setting                   | Required Extra Vars                 | Description                            |
-|-------|-------------------------------|--------------------------------------|----------------------------------------|
-| view  | `LEMME_LOGO_TYPE=view`        | `LEMME_LOGO_VIEW` (optional)         | Renders a Blade view (default partial) |
-| image | `LEMME_LOGO_TYPE=image`       | `LEMME_LOGO_IMAGE` (path or URL)     | Outputs an `<img>` tag                 |
-| text  | `LEMME_LOGO_TYPE=text`        | `LEMME_LOGO_TEXT` (string)           | Simple text logo                       |
+| Type      | Env Setting                      | Required Extra Vars                    | Description                              |
+|-----------|----------------------------------|----------------------------------------|------------------------------------------|
+| component | `LEMME_LOGO_TYPE=component`      | `LEMME_LOGO_COMPONENT` (component name)| Renders a Blade component                |
+| view      | `LEMME_LOGO_TYPE=view`           | `LEMME_LOGO_VIEW` (optional)           | Renders a Blade view (default partial)  |
+| image     | `LEMME_LOGO_TYPE=image`          | `LEMME_LOGO_IMAGE` (path or URL)       | Outputs an `<img>` tag                   |
+| text      | `LEMME_LOGO_TYPE=text`           | `LEMME_LOGO_TEXT` (string)             | Simple text logo                         |
 
 Common optional variables:
 
@@ -272,6 +274,12 @@ LEMME_LOGO_CLASSES="h-6 w-auto"        # Extra classes applied to root element
 
 Examples:
 
+Blade component logo:
+```
+LEMME_LOGO_TYPE=component
+LEMME_LOGO_COMPONENT=branding.logo
+```
+
 Image logo:
 ```
 LEMME_LOGO_TYPE=image

config/lemme.php

@@ -137,9 +137,10 @@
     |
     | Configure how the logo in the documentation layout is rendered.
     | Supported types:
-    | - view  : renders a Blade view (default existing partial)
-    | - image : renders an <img> tag (provide image path relative to public/ or full URL)
-    | - text  : renders plain text inside a <span>
+    | - view      : renders a Blade view (default existing partial)
+    | - component : renders a Blade component
+    | - image     : renders an <img> tag (provide image path relative to public/ or full URL)
+    | - text      : renders plain text inside a <span>
     |
     | You can override via env vars, e.g.:
     |   LEMME_LOGO_TYPE=image
@@ -150,6 +151,7 @@
     'logo' => [
         'type' => env('LEMME_LOGO_TYPE', 'view'),
         'view' => env('LEMME_LOGO_VIEW', 'lemme::partials.logo'),
+        'component' => env('LEMME_LOGO_COMPONENT', null),
         'image' => env('LEMME_LOGO_IMAGE', null),
         'text' => env('LEMME_LOGO_TEXT', null),
         'alt' => env('LEMME_LOGO_ALT', 'Logo'),

resources/views/docs.blade.php

@@ -85,6 +85,13 @@ class="lg:hidden relative flex size-6 items-center justify-center rounded-md tra
                             @include('lemme::partials.logo')
                         @endif
                         @break
+                    @case('component')
+                        @if(!empty($logo['component']))
+                            <x-dynamic-component :component="$logo['component']" />
+                        @else
+                            @include('lemme::partials.logo')
+                        @endif
+                        @break
                     @case('view')
                     @default
                         @include($logo['view'] ?? 'lemme::partials.logo')

tests/LogoRenderingTest.php

@@ -0,0 +1,46 @@
+<?php
+
+use Illuminate\Support\Facades\View;
+
+it('renders logo using component type when configured', function () {
+    // Mock a simple component
+    View::addNamespace('test', __DIR__.'/stubs/views');
+
+    config()->set('lemme.logo', [
+        'type' => 'component',
+        'component' => 'test::logo-component',
+        'view' => 'lemme::partials.logo',
+        'image' => null,
+        'text' => null,
+        'alt' => 'Logo',
+        'classes' => 'h-6 text-black dark:text-white',
+    ]);
+
+    $logo = config('lemme.logo');
+
+    expect($logo['type'])->toBe('component');
+    expect($logo['component'])->toBe('test::logo-component');
+});
+
+it('falls back to default view when component is empty', function () {
+    config()->set('lemme.logo', [
+        'type' => 'component',
+        'component' => '', // empty component
+        'view' => 'lemme::partials.logo',
+        'image' => null,
+        'text' => null,
+        'alt' => 'Logo',
+        'classes' => 'h-6 text-black dark:text-white',
+    ]);
+
+    $logo = config('lemme.logo');
+
+    expect($logo['type'])->toBe('component');
+    expect($logo['component'])->toBe('');
+});
+
+it('supports component configuration via environment variable', function () {
+    config()->set('lemme.logo.component', 'my-custom.logo-component');
+
+    expect(config('lemme.logo.component'))->toBe('my-custom.logo-component');
+});

tests/stubs/views/components/logo-component.blade.php

@@ -0,0 +1 @@
+<div class="test-logo-component">Test Logo Component</div>