Frontend Views

Blog Home Page

Blog Post View

Blog Series

Admin Panel

Posts List

Post Editor

Settings Page

Dashboard Widgets

Interactive Demo

Drag & Drop Images

Skip tutorial and series content

php artisan blogr:install --skip-tutorials --skip-series

### Manual Installation (Advanced)

If you prefer to configure everything manually or need more control, follow these detailed steps:

#### 1. Install Alpine.js

```bash
npm install alpinejs

Then add Alpine.js to your resources/js/app.js:

import Alpine from 'alpinejs'

window.Alpine = Alpine

// Theme Switcher Component (required for light/dark/auto mode)
Alpine.data('themeSwitch', () => ({
    theme: localStorage.getItem('theme') || 'auto',
    
    init() {
        this.applyTheme();
        
        // Watch for system preference changes when in auto mode
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
            if (this.theme === 'auto') {
                this.applyTheme();
            }
        });
    },
    
    setTheme(newTheme) {
        this.theme = newTheme;
        localStorage.setItem('theme', newTheme);
        this.applyTheme();
    },
    
    applyTheme() {
        const isDark = this.theme === 'dark' || 
                      (this.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
        
        if (isDark) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    }
}));

Alpine.start()

2. Configure Tailwind CSS v4 for dark mode

Add the dark mode variant to your resources/css/app.css:

@import 'tailwindcss';

@plugin "@tailwindcss/typography";

/* Add these @source directives to include Blogr views */
@source '../../vendor/happytodev/blogr/resources/views/**/*.blade.php';
@source '../views/vendor/blogr/**/*.blade.php';

/* Configure dark mode with class strategy */
@variant dark (.dark &);

⚠️ Important: The @variant dark (.dark &); line is required for the theme switcher to work with Tailwind CSS v4.

3. Publish configuration and migrations

php artisan vendor:publish --provider="Happytodev\Blogr\BlogrServiceProvider"

4. Run migrations

php artisan migrate

5. Add BlogrPlugin to your AdminPanelProvider

1. Publish configuration and migrations

php artisan vendor:publish --provider="Happytodev\Blogr\BlogrServiceProvider"
php artisan migrate

2. Install Alpine.js

npm install alpinejs

Add to resources/js/app.js:

import Alpine from 'alpinejs'
window.Alpine = Alpine

// Theme Switcher Component
Alpine.data('themeSwitch', () => ({
    theme: localStorage.getItem('theme') || 'auto',
    init() { this.applyTheme(); },
    setTheme(newTheme) {
        this.theme = newTheme;
        localStorage.setItem('theme', newTheme);
        this.applyTheme();
    },
    applyTheme() {
        const isDark = this.theme === 'dark' || 
                      (this.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
        document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
    }
}));

Alpine.start()

3. Configure Tailwind CSS v4

Add to resources/css/app.css:

@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@source '../../vendor/happytodev/blogr/resources/views/**/*.blade.php';
@source '../views/vendor/blogr/**/*.blade.php';

@variant dark (.dark &);

4. Register BlogrPlugin

Edit app/Providers/Filament/AdminPanelProvider.php:

use Happytodev\Blogr\BlogrPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([BlogrPlugin::make()])
        ->profile(\Happytodev\Blogr\Filament\Pages\Auth\EditProfile::class);
}

5. Build assets

npm run build

// config/blogr.php

// Route configuration
'route' => [
    'prefix' => 'blog', // Change to '' for homepage
    'middleware' => ['web'],
],

// Multilingual
'locales' => [
    'enabled' => true,
    'default' => 'en',
    'available' => ['en', 'fr', 'es', 'de'],
],

// SEO
'seo' => [
    'site_name' => 'My Blog',
    'default_title' => 'Blog',
    'og' => [
        'image' => '/images/og-default.jpg',
        'image_width' => 1200,
        'image_height' => 630,
    ],
],

// Theming
'colors' => [
    'primary' => '#FA2C36',
],

// Posts per page
'posts_per_page' => 10,

Creating Posts:

• Markdown editor with live preview
• TL;DR summaries
• Custom slugs
• Featured images (drag & drop)
• Categories & tags
• Publication scheduling

Translations:

• Add translations via Repeater in admin
• Each translation has independent:
  • Title, slug, content
  • SEO meta tags
  • Categories & tags
• Automatic language detection

Setup:

1. Create series: Admin → Blog Series → New
2. Add translations (title, description, SEO)
3. Assign posts to series with position ordering

Frontend Components:

{{-- Series navigation (prev/next) --}}
<x-blogr::series-navigation :post="$post" />

{{-- Complete series list --}}
<x-blogr::series-list :series="$series" :currentPost="$post" />

{{-- Series badge --}}
<x-blogr::series-badge :post="$post" />

URL: /blog/series/{slug}

Enable CMS:

// config/blogr.php
'cms' => [
    'enabled' => true,
    'prefix' => '', // Leave empty for /about, or set to 'page' for /page/about
],

Create Static Pages:

1. Admin → CMS → Pages CMS → New
2. Set slug (e.g., about, contact)
3. Choose template:
   • Default: Standard page with sidebar
   • Full Width: Wide content area
   • Sidebar Left/Right: Custom layouts
4. Add translations (title, content, SEO)
5. Publish the page

Block System:

Build pages using pre-designed blocks:

// Available blocks
- Hero Section (title, subtitle, CTA, background)
- Features Grid (icon, title, description)
- Testimonials (author, quote, avatar)
- Call-to-Action (button, background)
- Content Block (rich text, Markdown)
- Image Gallery
- Contact Form

Set as Homepage:

1. Create a CMS page
2. Toggle "Page d'accueil" (Homepage)
3. Configure in config/blogr.php:

'homepage' => [
    'type' => 'cms', // 'blog' or 'cms'
],

Reserved Slugs: These slugs are protected and cannot be used:

• blog, feed, author, category, tag, series
• admin, login, logout, register, dashboard
• api, assets, storage, vendor

URL Examples:

• About page: /about or /en/about (with locales)
• Contact: /contact or /fr/contact
• Custom prefix: /page/about (if prefix = 'page')

Enable in Settings:

• Admin → Blogr Settings → Multilingual
• Toggle "Enable Localized Routes"
• Set default locale and available locales

URLs:

• Enabled: /{locale}/blog/{slug} (e.g., /fr/blog/mon-article)
• Disabled: /blog/{slug} (translation via relationships)

Components:

{{-- Language switcher --}}
<x-blogr::language-switcher 
    current-route="blog.show" 
    :route-parameters="['slug' => $post->slug]" 
/>

{{-- Hreflang SEO tags --}}
<x-blogr::hreflang-tags 
    current-route="blog.show" 
    :route-parameters="['slug' => $post->slug]" 
/>

Export Data:

1. Admin → Blogr Settings → Backup tab
2. Choose format (JSON or ZIP with media)
3. Download backup file

Import Data:

php artisan blogr:import backup.zip

What's included:

• Posts, series, categories, tags
• All translations
• Media files (images, avatars)
• Relationships preserved

Self-Service Profile:

• Click user avatar → Edit Profile
• Upload avatar (auto-cropped)
• Write bio (Markdown supported)
• Update password

Author Bio Component:

{{-- Full bio box --}}
<x-blogr::author-bio :author="$post->user" />

{{-- Compact inline --}}
<x-blogr::author-bio :author="$post->user" :compact="true" />

Configuration:

'author_profile' => ['enabled' => true],
'author_bio' => [
    'enabled' => true,
    'position' => 'bottom', // top, bottom, both
    'compact' => false,
],

Per-Post SEO:

• Meta title & description
• Keywords
• Custom OG image
• Auto-generated Schema.org markup

Global SEO:

'seo' => [
    'site_name' => env('APP_NAME'),
    'default_title' => 'Blog',
    'twitter_handle' => '@yourhandle',
    'og' => [
        'type' => 'website',
        'image' => '/images/og-default.jpg',
    ],
    'structured_data' => [
        'enabled' => true,
        'organization' => [
            'name' => 'My Blog',
            'logo' => 'https://yoursite.com/logo.png',
        ],
    ],
],

Available Feeds:

• Main: /{locale}/blog/feed
• Category: /{locale}/blog/feed/category/{slug}
• Tag: /{locale}/blog/feed/tag/{slug}

Configuration:

'rss' => [
    'enabled' => true,
    'limit' => 20,
    'cache_ttl' => 3600, // 1 hour
],

CSS Variables:

:root {
    --blogr-primary: #FA2C36;
    --blogr-category: #3B82F6;
    --blogr-tag: #10B981;
}

Dark Mode:

• Auto-detection via system preference
• Manual toggle (light/dark/auto)
• Configured via Alpine.js component

Customization Points:

• Card colors & borders
• TOC positioning (center, left, right sidebar)
• Publication date display
• Tag positioning (top/bottom)
• Heading permalinks (symbol, spacing, visibility)