search

themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.55k stars 715 forks source link

Wrote the blazor.NET integration guide and included starter repository #395 #639

Closed CatherineKiiru closed 11 months ago

CatherineKiiru commented 1 year ago

Describe your changes

Issue ticket number and link

395

tdashworth commented 1 year ago

@CatherineKiiru amazing work!

One suggestion would be to remove the bin/ and obj/ folders and add a .gitignore file.

tdashworth commented 1 year ago

Also thought I'd mention this repo with I discovered recently: https://github.com/Practical-ASP-NET/BlazorTailwindTemplate/blob/main/content/BlazorServer/Program.cs#L36C45-L36C45

It integrates npx tailwind into the project so you don't need two terminals :)

famda commented 1 year ago

This will not work with a blazor wasm project. This PR is using server prerendered components, which means that, the js from flowbite will execute after the html arrives to the browser. When using wasm, the flowbite components are rendered after the flowbite init functions run. So, it will need an interop layer that executes those init functions after.

CatherineKiiru commented 1 year ago

Hi @tdashworth I have removed the bin & obj folders - and added the gitignore file. About the npx tailwind integration, could you guide me on how to go about it? Considering there's a conflicting comment from Famda

tdashworth commented 1 year ago

This will not work with a blazor wasm project. This PR is using server prerendered components, which means that, the js from flowbite will execute after the html arrives to the browser. When using wasm, the flowbite components are rendered after the flowbite init functions run. So, it will need an interop layer that executes those init functions after.

Ah, fair enough. It was just an idea 😊

zoltanszogyenyi commented 1 year ago

Dear @CatherineKiiru,

Thank you for the contribution!

I would kindly ask you to create a separate repository for the starter project similar to how we did with the other guides:

That means that if we are to merge this PR we need to remove all of the Blazor components and files and only update the Blazor guide using the .md file - we can certainly write the guide on how to set it up and link to the starter kit.

I'll go ahead and create the repository and invite you there for contributing.

Here's the Blazor starter repo:

https://github.com/themesberg/tailwind-blazor-starter

Cheers, Zoltan

CatherineKiiru commented 1 year ago

Hi @zoltanszogyenyi I'll work on it.

CatherineKiiru commented 1 year ago

Dear @CatherineKiiru,

Thank you for the contribution!

I would kindly ask you to create a separate repository for the starter project similar to how we did with the other guides:

That means that if we are to merge this PR we need to remove all of the Blazor components and files and only update the Blazor guide using the .md file - we can certainly write the guide on how to set it up and link to the starter kit.

I'll go ahead and create the repository and invite you there for contributing.

Here's the Blazor starter repo:

https://github.com/themesberg/tailwind-blazor-starter

Cheers, Zoltan

Hi @zoltanszogyenyi The instructions are not quite clear. Should I add the starter repository or not and just add the readme in the Blazer starter repo? For now, I've added the readme and the repository just like the other guides you shared.

zoltanszogyenyi commented 11 months ago

Hey @CatherineKiiru,

The source files for the Blazor repo should be on a totally separate repository and this PR should only include the documentation. I've already removed the source files and I'll later check the starter repo.

Cheers, Zoltan

PS: sorry for taking so long to check the PR, I'm on it now!

zoltanszogyenyi commented 11 months ago

Hey @CatherineKiiru,

The PR is almost ready, but from the starter repository the Flowbite JS is not included and although the styles for the dropdown are applied, the functionality itself doesn't work as the JS is not present.

I've added the Flowbite CDN inside _Host.cshtml but the interactivity doesn't work.

Any ideas?

Cheers, Zoltan

zoltanszogyenyi commented 11 months ago

I've added the Flowbite CDN to the starter repo and also added a note about WASM support.

If anyone wants to tackle the init functions with interop layer, feel free to open a new PR.

Thanks, everyone!