Forem: Andréia Bohner

Arctic Nord Theme for Filament PHP

Andréia Bohner — Sun, 09 Feb 2025 17:47:20 +0000

The Filament PHP ecosystem just got a fresh new look! I'm excited to introduce the Nord Theme for Filament PHP. This beautifully designed theme features both light and dark modes and is inspired by the popular Nord color palette.
If you're looking for a clean, stylish, and visually soothing user interface for your Filament applications, this theme is your perfect match! ❄️ ⛄

Why the Nord Theme?

Nord is a beloved color palette derived from the icy blues, snowy tones of the Arctic and the mesmerizing hues of the Aurora Borealis. Designed for optimal readability and minimal eye strain, it blends Nordic aesthetics with cool, calming, and balanced dimmed pastel tones making it a ideal choice for a modern and elegant UI.

This is the Filament Nord theme custom gray palette used to match the Nord's Polar Night and Snow Storm colors:

Installation

Getting started with the Filament Nord Theme is simple. You can install it via Composer:

composer require andreia/filament-nord-theme

To install the theme's required JS libraries (the forms, typography TailwindCSS plugins, and also postcss and autoprefixer) and create the postcss.config.js file if it not exists yet, run:

php artisan filament-nord-theme:install

Add a new item to the input array of your vite.config.js file:

'vendor/andreia/filament-nord-theme/resources/css/theme.css'

Compile the assets with:

npm run build

use Andreia\FilamentNordTheme\FilamentNordThemePlugin;

$panel
  ->plugin(FilamentNordThemePlugin::make())

You are all set!

Theme Preview

Here's a preview of what the Filament demo project looks like with the Nord Theme applied:

Screenshots

Every detail is carefully thought out to create a eye-comfortable, and clean feeling.

You can check more screenshots on my blog.

Give it a try and let me know your thoughts! You can find the project on GitHub: Filament Nord Theme.

Happy theming! 💛 ✨

Filament PHP Blade UI Components Visually Explained

Andréia Bohner — Tue, 18 Jun 2024 16:52:23 +0000

In addition to the awesome full-stack components that Filament PHP provides, some UI components are also available to be used independently on your Blade view files.

I've been working on creating references to easily visualize these Blade UI components.
You can check them all out on my blog: https://andreia.github.io

I hope they've come in handy for your projects! :)

How to Extend a Filament Resource

Andréia Bohner — Sun, 07 Apr 2024 22:00:00 +0000

Introduction

In this article, we'll walk through how to extend a plugin resource, as well as other Filament resources.

Checking the Plugin's Configuration

Let's say we installed a plugin that registers resources, for example, the Filament Authentication Log, and we want to extend the available AuthenticationLogResource.php resource to add some customizations in our application.

To start with, we need to check whether the plugin enables us to configure its resources. We can take a look at the plugin's config file to see if we can locate a "resources" key or something similar that specifies the original resource(s):

// config/filament-authentication-log.php

'resources' => [
    'AutenticationLogResource' => \Tapp\FilamentAuthenticationLog\Resources\AuthenticationLogResource::class,
],

And on the plugin's class (the class used to interact with a panel configuration file), we can check that the resources registered are the ones defined on the config file:

e.g.: /src/FilamentAuthenticationLogPlugin.php

public function register(Panel $panel): void
{
    $panel
        ->resources(
            config('filament-authentication-log.resources')
        );
}

Now that we have confirmed that the plugin provides this configuration, let's extend the resource!

Extending the Plugin Resource

We are ready to write our own AuthenticationLogResource.php resource that extends the plugin's resource! We can write it in our project's Filament resource directory (app/Filament/Resources):

namespace App\Filament\Resources;

use Tapp\FilamentAuthenticationLog\Resources\AuthenticationLogResource as BaseAuthenticationLogResource;

class AuthenticationLogResource extends BaseAuthenticationLogResource
{
    // your custom code here
}

If you haven't yet, you can now publish the plugin's configuration file so we would be able to instruct Filament to use our custom resource. Below is an example using our local App\Filament\Resources\AuthenticationLogResource class we've just written in the project's config/filament-authentication-log.php file:

'resources' => [
    'AutenticationLogResource' => \App\Filament\Resources\AuthenticationLogResource::class,
],

Also, we can add the respective create, edit, list, and view pages (if they are used) on our local project. Here's an example for the list page:

namespace App\Filament\Resources\AuthenticationLogResource\Pages;

use Filament\Resources\Pages\ListRecords;

class ListAuthenticationLogs extends ListRecords
{
    // ...
}

There's just one more thing left: in the project's custom resource class, we need to override the getPages() method to use our page instead of the plugin's:

use App\Filament\Resources\AuthenticationLogResource\Pages;

public static function getPages(): array
{
    return [
        'index' => Pages\ListAuthenticationLogs::route('/'),
    ];
}

Great! Our new resource class should now be used.

This same technique can be applied to extend other Filament resources as well.

Feel free to ping me here or on my social networks if you have any questions, suggestions, or are using this technique. I'd love to hear from you! :)

Happy coding and see you next time!

Tiny Tip: Open a Wire Elements Modal from a Filament table action

Andréia Bohner — Fri, 21 Jul 2023 16:42:28 +0000

You can open a Wire Elements Modal from an action using $livewire (the current Livewire component instance) to emit the openModal event, like so:

https://filamentphp.com/tricks/open-a-wire-elements-modal-from-a-filament-table-action

Cheat Sheet for Uppy File Uploader

Andréia Bohner — Mon, 17 Jul 2023 02:46:22 +0000

Uppy is a complete open source JavaScript uploader library with several features:

Fetch files from local or several remote sources,
Upload files using S3, S3 multipart, XHR for regular uploads to a HTTP server, Tus for resumable uploads, Transloadit for all kinds of processing,
Resumable file uploads,
Complete User Interface,
Translated to several languages,
File editing, compression, thumbnail generation, and more!

This cheat sheet compiles all the Uppy functionalities so you can use it as a handy quick reference.

Download for free: https://github.com/andreia/uppy-cheat-sheet/blob/main/uppy_cheat_sheet_v1.pdf

And if you use the PHP Laravel Framework and you're looking for Blade components for Uppy or if you looking to uploading files directly to S3 using multipart upload we've got you covered:

Package for Multipart Uploads using Laravel, AWS S3, and Uppy
Blade Uppy components
PHP uploader classes coming soon :)

Linux Cheat Sheet: Save the command output to a file

Andréia Bohner — Sun, 13 Mar 2022 01:38:58 +0000

Full size

Quick Tip: 302, 303, or 307? Which HTTP response status code should be used to redirect?

Andréia Bohner — Mon, 09 Aug 2021 01:42:04 +0000

Quick Tip on Redirecting:

Reference:
https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#:~:text=Note:%20RFC%201945%20and,expected%20of%20the%20client

OMGit! Git Commands Quick Reference

Andréia Bohner — Sat, 03 Apr 2021 22:57:18 +0000

I created a repository dedicated to collect Git commands that I find useful along the way of my development adventures:

https://github.com/andreia/OMGit

I hope you find something useful on it :)

A command I recently learned that you can use to time travel on your local Git repository:

git reset --hard HEAD@{10.minutes.ago}

If you have a Git command to share I would love to hear about it!