Filament•3w ago

Filament Docs; original code.

There's a process for automatically generating the doc-assets for use in the astro docs. It involves creating the actual Filament form used, rendering it, then Playwrite is used to take the actual screenshot that's used in the AutoScreenshot component. I'm looking for where the original Filament code is stored.

Solution:

So for example this here: https://github.com/filamentphp/filament/blob/3.x/docs-assets/app/app/Livewire/TablesDemo.php#L1227

Jump to solution

18 Replies

Dennis Koch•3w ago

https://github.com/filamentphp/filament/tree/3.x/docs-assets/app

GitHub

filament/docs-assets/app at 3.x · filamentphp/filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

Matthew•3w ago

Oh sorry. We were talking about screenshots before and Is sort of missed the code part 😅 I think its done here: https://github.com/filamentphp/filament/blob/3.x/docs-assets/app/app/Livewire/TablesDemo.php

GitHub

filament/docs-assets/app/app/Livewire/TablesDemo.php at 3.x · filam...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

Matthew•3w ago

At least the table part

IllizianOP•3w ago

ah ha... so:

<AutoScreenshot name="tables/summaries" alt="Table with summaries" version="3.x" />

<AutoScreenshot name="tables/summaries" alt="Table with summaries" version="3.x" />

is here https://github.com/filamentphp/filament/blob/3.x/docs-assets/app/app/Livewire/TablesDemo.php#L1227

Solution

Matthew•3w ago

So for example this here: https://github.com/filamentphp/filament/blob/3.x/docs-assets/app/app/Livewire/TablesDemo.php#L1227

Matthew•3w ago

Ahahah yeah

IllizianOP•3w ago

legend

IllizianOP•3w ago

thanks both

Matthew•3w ago

so summaries() is converted to tables/summaries

IllizianOP•3w ago

all of this, was trying to work out how to do this haha

IllizianOP•3w ago

LOL! Which is the second entry on TextColumn doc :Picardfacepalm: ....

Dennis Koch•3w ago

It's called a "BADGE" 😅 Btw. you know the demo? https://demo.filamentphp.com/ The code is here: https://github.com/filamentphp/demo

IllizianOP•3w ago

For some reason I was looking for a Badge column, and then I assumed it was an Icon. I'm blaming Monday :modCheck:

IllizianOP•3w ago

https://tenor.com/bDNWE.gif

Tenor

IllizianOP•3w ago

let's just say.... I was aware? that's beautiful. No-one share that with my PM haha :allTheThings:

Matthew•3w ago

@Dennis Koch COuld you help with smth please? Im working on some final things on this PR. Whats left is generating the screenshots. What Ive done so far: 1) Cloned the branch locally, run npm run build and composer install 2) Under app/ I also ran npm run build and composer install and php artisan filament:assets 3) Under docs-assets/app/app/Livewire/Forms/FieldsDemo.php I added my Slider class. For example:

Group::make()
    ->id('sliderSimple')
    ->extraAttributes([
        'class' => 'p-16 max-w-xl',
    ])
    ->schema([
        Slider::make('sliderSimple')
            ->label('Slider'),
    ]),

Group::make()
    ->id('sliderSimple')
    ->extraAttributes([
        'class' => 'p-16 max-w-xl',
    ])
    ->schema([
        Slider::make('sliderSimple')
            ->label('Slider'),
    ]),

4) Under docs-assets/screenshots/schema.js I also added the path:

'forms/fields/slider/simple': {
    url: 'forms/fields',
    selector: '#sliderSimple',
    viewport: {
        width: 1920,
        height: 640,
        deviceScaleFactor: 3,
    },
},

'forms/fields/slider/simple': {
    url: 'forms/fields',
    selector: '#sliderSimple',
    viewport: {
        width: 1920,
        height: 640,
        deviceScaleFactor: 3,
    },
},

5) When I run the laravel server, I see all groups under in http://localhost:8000/forms/fields, but the Slider field is empty! The slider works fine locally Am I missing a step?

Dennis Koch•3w ago

I have no idea. Sorry.

Matthew•3w ago

It's oke thank you anyways. I will ratrace my commits, and see if I broke something Maybe something changed internally within filament

Gaming

Programming

Filament Docs; original code.

Did you find this page helpful?