tebogomas14/shell-leaderboard

Fork 0

generated from theradcoza/Laravel-Docker-Dev-Template

Files

tebogomas14 a88504357d Initial commit

2026-03-24 17:01:12 +00:00

6.5 KiB

Raw Permalink Blame History

Site Settings

Manage your site's appearance (logo, favicon, colors) from the admin panel.

Overview

Site settings are stored in the database using spatie/laravel-settings and managed via Filament.

Admin Location: /admin → Settings → Appearance

Available Settings

Setting	Type	Description
`site_name`	String	Site name (used in title, emails)
`logo`	Image	Header logo
`favicon`	Image	Browser favicon (32x32)
`primary_color`	Color	Primary brand color
`secondary_color`	Color	Secondary/accent color
`dark_mode`	Boolean	Enable dark mode toggle
`footer_text`	Text	Footer copyright text

Usage in Blade Templates

Helper Functions

{{-- Site name --}}
<h1>{{ site_name() }}</h1>

{{-- Logo with fallback --}}
@if(site_logo())
    <img src="{{ site_logo() }}" alt="{{ site_name() }}">
@else
    <span>{{ site_name() }}</span>
@endif

{{-- Favicon --}}
<link rel="icon" href="{{ site_favicon() }}">

{{-- Colors --}}
<div style="background: {{ primary_color() }}">Primary</div>
<div style="background: {{ secondary_color() }}">Secondary</div>

{{-- Get any setting --}}
{{ site_settings('footer_text') }}
{{ site_settings('dark_mode') ? 'Dark' : 'Light' }}

Site Head Component

Include in your layout's <head>:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    {{-- This adds title, favicon, and CSS variables --}}
    <x-site-head :title="$title ?? null" />
    
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

The component automatically:

Sets the page title with site name
Adds favicon link
Creates CSS custom properties for colors

CSS Custom Properties

After including <x-site-head />, these CSS variables are available:

:root {
    --primary-color: #3b82f6;
    --secondary-color: #64748b;
}

Use in your CSS:

.button {
    background-color: var(--primary-color);
}

.text-accent {
    color: var(--secondary-color);
}

Or with Tailwind arbitrary values:

<button class="bg-[var(--primary-color)] text-white">
    Click Me
</button>

Utility Classes

The component also creates utility classes:

<div class="bg-primary text-white">Primary background</div>
<div class="text-primary">Primary text</div>
<div class="border-primary">Primary border</div>

<div class="bg-secondary">Secondary background</div>
<button class="btn-primary">Styled Button</button>

Usage in PHP

use App\Settings\SiteSettings;

// Via dependency injection
public function __construct(private SiteSettings $settings)
{
    $name = $this->settings->site_name;
}

// Via helper
$name = site_settings('site_name');
$logo = site_logo();

// Via app container
$settings = app(SiteSettings::class);
$color = $settings->primary_color;

Customizing the Settings Page

Edit app/Filament/Pages/ManageSiteSettings.php:

Add New Settings

Add property to app/Settings/SiteSettings.php:

class SiteSettings extends Settings
{
    // ... existing properties
    public ?string $contact_email;
    public ?string $phone_number;
}

Create migration in database/settings/:

return new class extends SettingsMigration
{
    public function up(): void
    {
        $this->migrator->add('site.contact_email', null);
        $this->migrator->add('site.phone_number', null);
    }
};

Add to form in ManageSiteSettings.php:

Forms\Components\Section::make('Contact')
    ->schema([
        Forms\Components\TextInput::make('contact_email')
            ->email(),
        Forms\Components\TextInput::make('phone_number')
            ->tel(),
    ]),

Run migration: php artisan migrate

// In SiteSettings.php
public ?array $social_links;

// In migration
$this->migrator->add('site.social_links', []);

// In form
Forms\Components\Repeater::make('social_links')
    ->schema([
        Forms\Components\Select::make('platform')
            ->options([
                'facebook' => 'Facebook',
                'twitter' => 'Twitter/X',
                'instagram' => 'Instagram',
                'linkedin' => 'LinkedIn',
            ]),
        Forms\Components\TextInput::make('url')
            ->url(),
    ])
    ->columns(2),

Caching

Settings are cached automatically. Clear cache after direct database changes:

php artisan cache:clear

Or in code:

app(SiteSettings::class)->refresh();

File Storage

Logo and favicon are stored in storage/app/public/site/.

Make sure the storage link exists:

php artisan storage:link

Example: Complete Layout

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <x-site-head :title="$title ?? null" />

    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
    <div class="min-h-screen bg-gray-100">
        {{-- Header with logo --}}
        <header class="bg-white shadow">
            <div class="max-w-7xl mx-auto px-4 py-4">
                @if(site_logo())
                    <img src="{{ site_logo() }}" alt="{{ site_name() }}" class="h-10">
                @else
                    <span class="text-xl font-bold text-primary">{{ site_name() }}</span>
                @endif
            </div>
        </header>

        {{-- Content --}}
        <main>
            {{ $slot }}
        </main>

        {{-- Footer --}}
        <footer class="bg-gray-800 text-white py-8">
            <div class="max-w-7xl mx-auto px-4 text-center">
                {!! site_settings('footer_text') ?? '© ' . date('Y') . ' ' . site_name() !!}
            </div>
        </footer>
    </div>
</body>
</html>

Troubleshooting

Settings not updating

Clear cache: php artisan cache:clear
Check file permissions on storage directory

Logo not showing

Run php artisan storage:link
Check logo exists in storage/app/public/site/

Colors not applying

Make sure <x-site-head /> is in your layout's <head>
Check browser dev tools for CSS variable values

6.5 KiB Raw Permalink Blame History