Essentials

Blade Components

All available Blade components for building your blog frontend.

All components are publishable. Run php artisan vendor:publish --tag=filament-blog-views to customize.

SEO Components

Meta Tags

Renders Open Graph, Twitter Card, and article meta tags in <head>.

@push('head')
    <x-blog::meta-tags :post="$post" />
@endpush

Renders: og:title, og:description, og:type, og:image, article:published_time, article:author, article:section, twitter:card, twitter:title, twitter:image, canonical

Structured Data

Renders JSON-LD BlogPosting schema with publisher and breadcrumb data.

<x-blog::structured-data :post="$post" />

Renders: @type: BlogPosting with headline, description, datePublished, dateModified, author, publisher (from config), articleSection, articleBody, and image.

Renders RSS <link> tag in <head>. Only renders if blog.feed route exists and feed is enabled in config.

@push('head')
    <x-blog::feed-link />
@endpush

Feed

Renders full RSS 2.0 XML. Use in your feed route view:

{{-- resources/views/blog/feed.blade.php --}}
<x-blog::feed :posts="$posts" />

UI Components

Post Card

Displays a post in a listing. Shows category badge, date, title, excerpt, and featured image thumbnail.

<x-blog::post-card :post="$post" />

Post Header

Renders category badge, title, author name, published date, and estimated read time.

<x-blog::post-header :post="$post" />

Post Body

Renders featured image and markdown content in a Tailwind prose container with dark mode support.

<x-blog::post-body :post="$post" />

Shows related posts section. Only renders if the collection is not empty.

<x-blog::related-posts :posts="$relatedPosts" />

Category Badge

Displays a category pill. Links to category page if blog.category route exists.

<x-blog::category-badge :category="$post->category" />
<x-blog::category-badge :category="$post->category" :linked="false" />

Preview Banner

Sticky amber banner for draft previews. Pushes noindex meta tag.

<x-blog::preview-banner :post="$post" :editUrl="$editUrl" />