Update specification diagram to show spec snippet

[oliviergoulet5]

We need to update the specification diagram to show snippets on hover/click.

[oliviergoulet5]

@ivargrimstad Would you be open to adding a state or status front matter parameter to the spec markdown files to indicate when a spec is under development? That would let us keep the title clean and avoid embedding "(under development)" directly in it.

Right now, I have to rely on a regex replacement to strip that text out, and I'm not sure how consistently it's applied across the specs. Using front matter would also allow us to better leverage Hugo's content management features for filtering, grouping, among other things.

e.g.

title: "Jakarta Data"
spec_state: "complete" # acceptable values: "in-progress", "complete", "deprecated"

To avoid potential conflicts with theme-level parameters in the future, we could also namespace it with a spec_ prefix, for example spec_status or spec_state.

This is not a blocker.

[oliviergoulet5]

Hi @shabnammayel @excentrickristy

Here is the implementation of the specification diagram: https://deploy-preview-2494--jakartaee.netlify.app/#jakarta-ee-platform-pane

Click the "View specifications" button.

I have updated the diagram to show the popovers as shown in the redesigned specification page: https://www.figma.com/design/gQHIeqY26IUD2AOdAEDwkP/Jakarta-EE--Webdev-Implementation-?node-id=3033-1350&t=RSs6LnM1le6yECxH-0

[shabnammayel]

I had a call with @oliviergoulet5 to provide some context and feedback. We don't need the windows for EE 11 spec image, it should be for the version free image.