Building a "Latest News" Section

Pull dynamic content (like Blog Posts) into a page using the Relationship Block — the standard pattern for "Latest News" or "Featured Products" sections.

What we are building

A section on the homepage that automatically displays the three most recent blog posts as cards.

---

Step 1: Register the Query Source

Before the block can see your posts, you must register the "Post" model as a source.

1. Allow-list the model in config/kompass.php:

   'query_source_models' => [
       'posts' => \Secondnetwork\Kompass\Models\Post::class,
   ],

2. Log in to the Admin Dashboard.
3. Navigate to Admin > Query Sources.
4. Click Add Source.
   • Label: Latest Posts
   • Model: posts
   • Item View: relations.post-card (We will create this next).
   • Wrapper Class: grid grid-cols-1 md:grid-cols-3 gap-6
5. Save the source.

Step 2: Create the Item View

Define how a single post looks in the list. Create a new file at: resources/views/components/relations/post-card.blade.php

@props(['record', 'url' => null])

<div class="flex flex-col overflow-hidden rounded-lg shadow-lg border border-gray-100">
    @if($record->thumbnails)
        <div class="flex-shrink-0">
            <x-image :id="$record->thumbnails" class="h-48 w-full object-cover" />
        </div>
    @endif
    
    <div class="flex flex-1 flex-col justify-between bg-white p-6">
        <div class="flex-1">
            <p class="text-sm font-medium text-blue-600">
                {{ $record->created_at->format('M d, Y') }}
            </p>
            <a href="{{ $url }}" class="mt-2 block">
                <p class="text-xl font-semibold text-gray-900">{{ $record->title }}</p>
            </a>
        </div>
    </div>
</div>

Props Convention

The $record prop receives the Eloquent model instance. The $url prop is the resolved public URL for that item — pass it directly to your anchor tag.

Step 3: Add the Block to your Homepage

1. Go to Pages and edit your "Home" page.
2. Add a Relationship block.
3. In the settings:
   • Source: Latest Posts
   • Mode: Automatic
   • Order by: created_at
   • Limit: 3
4. Save the page.

Step 4: The Result

Navigate to your homepage. Your three latest blog posts render as cards. As you publish new posts, the list updates automatically.

Summary

1. Allow-list the model in config.
2. Define a Source in the Admin.
3. Create a Blade View for the item.
4. Place the block and enjoy dynamic content.