The homepage code snippet does not match the demo

[frol]

This snippet:

docsite/snippets/homepage.rs

Lines 1 to 9 in a97cd40

	fn app(cx: Scope) -> Element {
	let mut count = use_state(&cx, || 0);
	cx.render(rsx!(
	h1 { "High-Five counter: {count}" }
	button { onclick: move |_| count += 1, "Up high!" }
	button { onclick: move |_| count -= 1, "Down low!" }
	))
	}

Does not match the actual implementation and thus it raises some questions from the new-comers:

docsite/src/components/homepage/hero.rs

Lines 46 to 81 in a97cd40

	code { class: "language-rust line-numbers", [include_str!("../../../snippets/homepage.rs")] }
	}
	}
	}
	InteractiveHeader {}
	}
	})
	}
	pub fn InteractiveHeader(cx: Scope) -> Element {
	let mut count = use_state(&cx, || 0);
	cx.render(rsx!{
	div {
	class: "flex flex-col items-center px-10 rounded mt-6 mb-2 pt-4 mr-auto hidden lg:block lg:ml-2" ,
	background_color: "hsl(220, 13%, 18%)",
	div { class: "pb-3 text-white text-center w-44",
	h1 { "Counter: {count}" }
	}
	div { class: "flex flex-col items-center",
	button {
	class: "inline-flex items-center text-white bg-green-500 border-0 py-1 px-4 focus:outline-none hover:bg-gray-600",
	onclick: move |_| count += 1,
	"Up high!"
	}
	img { class: "h-12 mx-4 my-4", src: "https://rustacean.net/assets/rustacean-flat-gesture.png" }
	button {
	class: "inline-flex items-center text-white bg-red-500 border-0 py-1 px-4 focus:outline-none hover:bg-gray-600",
	onclick: move |_| count -= 1,
	"Down low!"
	}
	}
	}
	})
	}

• The text is different
• There is Ferris img
• The style is different

[rMazeiks]

I'm conflicted on this. On one hand, you've got a point. Presenting the output of different code feels like "cheating" and will lead many users to think they're not looking at a real example.

On the other hand, it's hard to have both a pretty-looking example and some pretty-looking code.

As a possible compromise, we could:

• Get rid of the image
• Get rid of all classes
• Use external CSS to select the elements

Then, the component code would be the same as the displayed code, and the result would still look good. Thoughts?

[azzamsa]

What if we leave the component and displayed code as is, then create a new example with the exact implementation (text, ferris, style) and add a comment in the component code telling about the location of the actual code.