Add embed route for puzzles with zen mode enforced

[ssrihari4102]

In response to #11337 , @JBaker05 and I created a route, controller, and view for embedding puzzles. Much of the controller and view was recycled from the controller and view for the existing puzzles page. After this, we developed a way to enforce zen mode for this route so that many of the extraneous elements that one would not want to see on the embedded version of this page will not be visible. The following is a screen recording of how the iframe behaves locally:
https://user-images.githubusercontent.com/59403072/204429083-0452b0be-91e1-4dc1-a871-ded2dd5b9919.mov

We are looking for some feedback on the work we have done so far, particularly with regards to the route, controller, and view for the embed endpoint. Moreover, we understand that while this works locally, we will need to set the x-frame-options of this route to SAMEORIGIN in order for this to work in production. Additionally, while zen mode masks many of the extraneous elements, it might not be the preferred method for handling this, so we would appreciate guidance in the form of a general plan and/or code pointers on how to handle this more robustly by modifying CSS and/or TS files. For instance, such a method could remove the black bars at the top and bottom of the view as seen in the above recording.

[ornicar]

I'm not sure to understand what the use case of this is.

Is it to embed a single puzzle? Or a puzzle session where the player goes from a puzzle to another?

[ssrihari4102]

Good point. I think the intended purpose was to just embed a single puzzle. However, I believe the general approach we used (e.g. recycling the existing puzzles endpoint) wouldn't work for that?