[Request]: Add a class to the documentation content div

gavinhewitt commented 4 months ago

What happened?

I would like to request to have a class/hook added to the documentation div so it can be targeted. For instance, I'd like to use Tailwind's prose class to format text, but the only option now is to targetfi-page, which affects all parts of the page.

It's the div that starts with

<div x-data
    x-init="
let anchors = document.querySelectorAll('.gu-kb-anchor');
...

How to reproduce the bug

Yes

Package Version

latest

PHP Version

latest

Laravel Version

latest

Which operating systems does with happen with?

No response

Notes

No response

lukas-frey commented 4 months ago

Good point, I'll add it. I'm not sure how the prose class works under the hood though and I'm afraid it will get overwritten by the classes that the package adds itself.

I honestly didn't know there was anything like the prose class in tailwind, could have saved me from trying to style it manually. :D

Maybe it's worth considering using it as a default.

gavinhewitt commented 4 months ago

Good point, I'll add it. I'm not sure how the prose class works under the hood though and I'm afraid it will get overwritten by the classes that the package adds itself.

I added in the vendor package as a test and it looks good.

I honestly didn't know there was anything like the prose class in tailwind, could have saved me from trying to style it manually. :D

:-D

Maybe it's worth considering using it as a default.

It would require users to have the tailwind typography plugin installed. Other than that it's a great default.

lukas-frey commented 4 months ago

Yes, but isn't typography a prerequisite already for Filament anyways?

I know that when installing Filament Forms separetely, you need to install tailwind typography: https://filamentphp.com/docs/3.x/forms/installation#installing-tailwind-css

So I guess it's the same for Panels.

gavinhewitt commented 4 months ago

Yes, but isn't typography a prerequisite already for Filament anyways?

I know that when installing Filament Forms separetely, you need to install tailwind typography: https://filamentphp.com/docs/3.x/forms/installation#installing-tailwind-css

So I guess it's the same for Panels.

I commented without checking first so you're probably right ;-)

gavinhewitt commented 4 months ago

I added in the vendor package as a test and it looks good.

Not entirely true. At first glance it looks ok but actually the markdown extensions are in the way which results in spacings etc to be incorrect :-(

lukas-frey commented 4 months ago

I added in the vendor package as a test and it looks good.

Not entirely true. At first glance it looks ok but actually the markdown extensions are in the way which results in spacings etc to be incorrect :-(

Yeah, but by default there wouldn't be any styling, I added those. So if using prose by default (I'll have to try tomorrow) works, I'll just remove all styling except for the more specific blocks such as Markers and Code blocks maybe (because I add a copy to clipboard button and the Language Name to it)

gavinhewitt commented 4 months ago

What it looks like with the classes disabled:

iAmKevinMcKee commented 4 months ago

Prose can be nice, but I also find the width of the standard prose class to be too narrow. I would typically want to use something like prose prose-2xl or something like that. So would be great if the plugin can allow you to add classes directly.

Also would be good to set a manual class so if someone wants to write standard CSS to target the doc body, they can do that as well.

lukas-frey commented 4 months ago

Good points, I'll be adding "empty" gu-kb- classes everywhere so people can override these themselves.

And also, I'm probably going to need some help with moving to prose. I've temporarily removed all my stylings from the markdown and added the prose class, but the resulting content looks like this:

Which doesn't look good tbh. The big gap between h1 and h2 shouldn't be there, as mentioned in their live demo.

gavinhewitt commented 4 months ago

Which doesn't look good tbh. The big gap between h1 and h2 shouldn't be there, as mentioned in their live demo.

Which demo is that? I'm looking at https://tailwindcss-typography.vercel.app/ but there's no stacked H1 H2 there. I see a gap here too but maybe that's how it's supposed to be?

gavinhewitt commented 4 months ago

Which doesn't look good tbh. The big gap between h1 and h2 shouldn't be there, as mentioned in their live demo.

Which demo is that? I'm looking at https://tailwindcss-typography.vercel.app/ but there's no stacked H1 H2 there. I see a gap locally too but maybe that's how it's supposed to be?

gavinhewitt commented 4 months ago

Demo on Tailwind play (https://play.tailwindcss.com/umBcTQU2x3?layout=preview):

Looks like the gap is supposed to be like that

lukas-frey commented 4 months ago

Demo on Tailwind play (https://play.tailwindcss.com/umBcTQU2x3?layout=preview):

Looks like the gap is supposed to be like that

The top margin wasn't removed, but maybe it's because I stacked three headings 🤔

lukas-frey commented 4 months ago

In version 1.3.0 there is a gu-kb-article class on the main article div. Also you can add custom classes using:

use Guava\FilamentKnowledgeBase\Filament\Panels\KnowledgeBasePanel;

KnowledgeBasePanel::configureUsing(
    fn(KnowledgeBasePanel $panel) => $panel
        ->articleClass('max-w-2xl')
);

GuavaCZ / filament-knowledge-base