Announcements Module

The Announcements module lets admins create site-wide banners that appear fixed at the top of every page, above the navigation. Banners support scheduling, per-audience visibility, and optional cookie-based dismissal.

What you get

• Announcement banner — fixed bar at the top of every page, above the nav
• Filament CRUD — create, edit, and delete announcements in the admin panel
• Rich text — bold, italic, underline, strike, links, and lists via the built-in editor
• Scheduling — set starts_at / ends_at to control when a banner is live
• Audience targeting — show on public pages, authenticated pages, or both
• Dismissal — cookie-based, SSR-safe. Once dismissed, the banner stays hidden for one year. No database writes.

Installation

composer require saucebase/announcements
composer dump-autoload
php artisan module:enable Announcements
php artisan module:migrate Announcements --seed
npm run build

Integration (required)

After enabling the module, two core files need to be updated to display the banner. Apply the provided patches:

git apply modules/Announcements/patches/types.patch
git apply modules/Announcements/patches/app-vue.patch
npm run build

Manual alternative

If you prefer to apply the changes manually, follow these two steps.

1. Add the Announcement type to your shared types

In resources/js/types/index.d.ts, import the Announcement type from the module and add the announcement? prop to PageProps:

import type { Announcement } from '@modules/Announcements/resources/js/types';

export type PageProps<
    T extends Record<string, unknown> = Record<string, unknown>,
> = T & {
    // ... existing props ...
    announcement?: Announcement | null;
};

2. Render the banner in App.vue

In resources/js/components/App.vue, import AnnouncementBanner and render it as the first element in the template:

<script setup lang="ts">
import AnnouncementBanner from '@modules/Announcements/resources/js/components/AnnouncementBanner.vue';
// ... existing imports ...
</script>

<template>
    <AnnouncementBanner />
    <!-- ... rest of template ... -->
</template>

Run npm run build (or restart npm run dev) after completing these steps.

Admin panel

Navigate to /admin → Announcements in the left navigation to manage banners.

Use the New announcement button to create one. The form includes a rich text editor for the banner content and toggles for visibility and scheduling.

Only one announcement is shown at a time — the most recently created active announcement within its schedule window.

Frontend behavior

The banner renders as a fixed indigo bar at the top of every page.

• show_on_frontend = false — hidden for guests
• show_on_dashboard = false — hidden for authenticated users
• Both enabled — shown to everyone

The banner is only displayed when is_active is true, starts_at is null or in the past, and ends_at is null or in the future. Evaluated on every request — no cron job needed.

When is_dismissable = true, a ✕ button appears in the banner. Clicking it sets an announcement_dismissed cookie (1-year expiry, no DB writes). A new announcement with a different ID will show again regardless of the dismissed cookie.

Configuration

Field	Default	Description
text	—	The announcement content. Supports rich text: bold, italic, underline, links, and lists
is_active	false	Whether the announcement is live
is_dismissable	false	Show a dismiss (✕) button to users
show_on_frontend	true	Display on public (unauthenticated) pages
show_on_dashboard	true	Display on authenticated pages (dashboard, etc.)
starts_at	null	Optional start time; banner hidden before this date
ends_at	null	Optional end time; banner hidden after this date

Testing

php artisan test --testsuite=Modules --filter=Announcements
npx playwright test --project="@Announcements*"