Docs conversion

[Freymaurer]

Hey! I use Feliz since for a lot of projects and wanted to contribute to the documentation, but nothing was working for me 😅

I checked the documentation project and saw that it was very complex with ~1400 lines of code for routing alone.

Combined with a comment i found, i came here with a suggestion.

Hi there @Darkle, apologies for the delay. I've merged your PR but the docs application is broken and needs an update. Probably an overhaul along with the changes to the CI. I will be fixing it as soon as time permits 🙏

Originally posted by @Zaid-Ajaj in https://github.com/Zaid-Ajaj/Feliz/issues/618#issuecomment-2184162297

Goal

My goal was using a well developed documentation framework, while displaying f# code and the resulting react components.

[!tip] Check out the PR #627 if you want to see it in action.

go to public and run npm run dev 🚀

Implementation

I forked this repo and set up a astro starlight documentation in the public folder.

[!note] Astro can render any frontend framework components (react, svelte, vue,...)

1. Create a f# project in public/src/components/fsharp.
2. Update npm run dev to include fable transpilation dotnet fable watch src/components/fsharp -e jsx --run astro dev
3. Add dependency to Feliz nuget package (the Feliz.fsproj did not work for me. There were transpilation errors vor Feliz.CompilerPlugins and i wanted to get some feedback before investigating any deeper issues)
4. Create POC react components in f# in public/src/components/fsharp
5. Add Feliz core documentation to public/src/docs/Feliz
6. Showcase code and component import for example in public/src/docs/Feliz/ReactApiSupport.mdx

import rawCounter from '/src/components/fsharp/Counter.fs?raw';
import {Counter} from '/src/components/fsharp/Counter.jsx';

<Code code={rawCounter} lang='fsharp'/>
<Counter client:only="react"/>

Advantages

• it just works™️ ; Astro works well and is highly customizable. Far less code to maintain. No routing logic, etc.
• Display actual code used for component next to the component. Feature changes/obsolete stuff gets caught easily.

Disadvantages

• No full f#?

Conclusion

The current documentation setup is very complicated and can create a entry barrier for new contributers. My suggestion offers an easy alternative to a full f# documentation project, reusing existing features from astro while focusing on f# components.