doc: Add cheat sheet

[mcmah309]

From: #460

Adds the mermaid block discussed in https://discord.com/channels/899851952891002890/1345102987953180836

You can copy and paste the graph code into https://mermaid.live/edit for a visual representation, if you don't want to view build the docsite.

[mcmah309]

@ealmloff Any chance this can get a look over before the next release?

[ealmloff]

@ealmloff Any chance this can get a look over before the next release?

The information looks correct, but the diagram itself is very large which makes it difficult to read especially on mobile. I'm also not sure "hooks" are a useful category to explain dioxus apis. Hooks introduce additional requirements about when you can call the function, but they don't have a uniform API. For example, use_geolocation and use_server_future have very little in common. When I think of someone new coming to dioxus, I would expect them to look for how they can do asynchronous work in dioxus or how you can get your location in dioxus instead of looking for hooks and going down from there.

I do think the diagram is useful, it just might be a bit too broad in it's current form. What do you think about splitting up the diagram into smaller sections that could fit into guides like the managing state or component lifecycle guides?

[mcmah309]

the diagram itself is very large which makes it difficult to read especially on mobile

Did you try in on mobile? Zooming and panning should be working on mobile.

I'm also not sure "hooks" are a useful category to explain dioxus apis.

Though the title of the cheat sheet is "State and Hooks Cheat Sheet" there is no single category "hooks". Hooks being an essential part of the dioxus api, I fully believe including hooks is helpful and I have used this as a reference multiple times to find various hooks for my needs.

For example, use_geolocation and use_server_future have very little in common.

Right, that is why use_geolocation and use_server_future are in different parts of the graph. In fact they only share the root as a common ancestor.

When I think of someone new coming to dioxus, I would expect them to look for how they can do asynchronous work in dioxus or how you can get your location in dioxus instead of looking for hooks and going down from there.

I would not say this graph is the first stop when coming to dioxus. As with cheat sheets, it is a reference guide for finding the various state interactions and hooks available to solve the problem at hand. That said, the graph traversal is by use case, not "hooks and going down from there".

I do think the diagram is useful, it just might be a bit too broad in it's current form. What do you think about splitting up the diagram into smaller sections that could fit into guides like the managing state or component lifecycle guides?

I personally prefer the current form. As it is comprehensive and derived from a single root question (included in the diagram) "Which scope does your state or utility belong to?" and then expanded on. Which allows an exploratory way of discovering a way to solve your problem with Dioxus.

[mcmah309]

@ealmloff thoughts on the above?

[ealmloff]

the diagram itself is very large which makes it difficult to read especially on mobile

Did you try in on mobile? Zooming and panning should be working on mobile.

Yes, the page looks like this on mobile. You can zoom, but it is impossible to read with the default layout

I personally prefer the current form. As it is comprehensive and derived from a single root question (included in the diagram) "Which scope does your state or utility belong to?" and then expanded on. Which allows an exploratory way of discovering a way to solve your problem with Dioxus.

That might make sense to divide the state movement (use_context and Global) APIs, but that seems like an odd starting point for many of the utility hooks. If I am looking for a use_debounce hook that debounces a global shortcut where should I look? I want the state to be be global, but there aren't any paths to use_debounce in global state or shared state. In practice, I would combine the utility use_debounce hook with the use_context hook or Global struct.

[Copilot]

Pull Request Overview

This PR adds a cheat sheet documentation page to the Dioxus docsite as requested in issue #460. The cheat sheet provides a comprehensive reference of Dioxus hooks organized by scope and use case.

• Adds a new MermaidBlock component for displaying interactive Mermaid diagrams
• Creates a comprehensive cheat sheet documenting Dioxus hooks categorized by scope and functionality
• Updates the layout structure to better accommodate the new documentation content

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/docsite/src/components/learn.rs	Simplifies layout structure by removing unnecessary flex wrapper div
packages/docs-router/src/lib.rs	Adds MermaidBlock component with pan/zoom functionality for interactive diagrams
packages/docs-router/src/doc_examples/mod.rs	Exports the new MermaidBlock component for use in documentation
packages/docs-router/assets/mermaid_block.css	Adds styling for Mermaid diagram blocks
docs-src/0.7/src/guides/cheat_sheet.md	Creates comprehensive cheat sheet documentation with categorized hooks
docs-src/0.7/src/SUMMARY.md	Adds cheat sheet to the documentation navigation
README.md	Updates development instructions with Tailwind CSS setup requirements

[mcmah309]

Changed to use regular markdown. Might be easier to suggest edits now or just merge and make any changes you deem appropriate. Either way I find it really useful having all the useful hooks in one place. Master is failing build and I couldn't build locally either to view though.

As discussed on discord, there may be a better long term solution, but this should be helpful for now