make puzzles embeddable via iframe #11337
Comments
|
I would like that feature too! |
|
I would like to work on this. @benediktwerner I noticed you mentioned there is an API endpoint to get a puzzle in lichess-org/api#183. Do you have any code or documentation pointers on where I could get started on making a proper embed page for puzzles? Also, I still need to play around with this myself but I was wondering what the main issues that exist if one were to currently replace the src field in the iframe with the aforementioned endpoint (is it just the cross origin issue mentioned by @ericries?). |
|
The API endpoint returns puzzles as JSON. It's entirely unrelated to iframe embeds. It just can get you the puzzle data to make your own "embed"/puzzle widget. Closer would be using the actual puzzle page from the website, but besides the "cross origin issue" (really, the main issue is surely the Similar embeddable endpoints do exist for studys, games, etc. which can be used as reference:
But ofc it needs to integrate the stuff from the puzzle endpoint instead. |
|
Please let me know if I can help. I think the plan of taking one of the existing embeds (maybe study is closest?) and replacing the contents with the puzzle logic is sound. FWIW, as a workaround, I built my own HTML/javascript version that pulls data from the puzzle API and the massive puzzle CSV to produce something that looks a lot like lichess. But I would much rather replace all that jank with a proper iframe. |
|
I'm working on this issue with @JBaker05 for a college project. We have setup our dev environments and started looking through the code pointers above. Our understanding is that we first need to create an embed route for the puzzles page which simply returns the puzzles page as it is. After this, we can write custom CSS for the embed route so it strips away extraneous elements, such as navigation. We are not sure if we need to explicitly set the x-frame-options to SAMEORIGIN for our embed page or if that will be handled by default? In general, we were not able to determine where this setting is configurable based on the codebase and previous discussions in the discord. |
|
I am happy to help with that when you get that far. I managed to find and
change the x-frame-options setting when I was testing different
configurations before. I think you will be able to simplify the puzzle page
logic quite a bit, but your instinct is right:
1. create a new embed_puzzle route
2. clone the puzzle page entirely and see that it works normally
3. change the x-frame-options to make it embeddable (but ugly)
4. strip away pieces of logic and presentation one at a time, always
testing that it still works as you go
One thing to look at is "zen mode" - when I did my experiments I found this
helped a lot. it hides almost everything you want hidden for an embed
anyway. So once you learn how the zen mode javascript works, you'll be
pretty close to knowing what logic can be safely removed.
…On Sun, Nov 13, 2022 at 3:08 PM Srihari Srinivasan ***@***.***> wrote:
I'm working on this issue with @JBaker05 <https://github.com/JBaker05>
for a college project. We have setup our dev environments and started
looking through the code pointers above. Our understanding is that we first
need to create an embed route for the puzzles page which simply returns the
puzzles page as it is. After this, we can write custom CSS for the embed
route so it strips away extraneous elements, such as navigation.
We are not sure if we need to explicitly set the x-frame-options to
SAMEORIGIN for our embed page or if that will be handled by default? In
general, we were not able to determine where this setting is configurable
based on the codebase and previous discussions in the discord.
—
Reply to this email directly, view it on GitHub
<#11337 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACKSLRS4OK3FARQQTKPDTMDWIFYFJANCNFSM557ODTYA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
We have locally created a Puzzle.embed endpoint and controller based off of the ones for Puzzle.show. After doing this, we tested that it has the same functionality as the existing endpoint by creating an HTML page that has an iframe with our local embed endpoint as its src. For the view, we are trying to figure out how to control the CSS so we can strip away the same elements as zen mode does. Namely, we're struggling to figure out how the CSS for zen mode becomes active when you turn on zen mode. Do either of you have any thoughts on working on the view, especially with regards to zen mode? |
|
Hey @ericries and @benediktwerner. We were wondering if we could get some general feedback and advice on next steps for the above PR? In the PR description we discussed what we think went well and what still needs to be worked on for the PR to be merged. We understand that the needs of the repository as a whole take precedence; however, we were hoping to get some advice relatively soon since the deadline for our assignment is a week or so away and we would like to make as much progress on the issue as possible before then. |
|
Are you able to log into the lichess discord server? I've found that a
great place to ask for advice and help
…On Wed, Nov 30, 2022 at 6:04 PM Srihari Srinivasan ***@***.***> wrote:
Hey @ericries <https://github.com/ericries> and @benediktwerner
<https://github.com/benediktwerner>. We were wondering if we could get
some general feedback and advice on next steps for the above PR? In the PR
description we discussed what we think went well and what still needs to be
worked on for the PR to be merged. We understand that the needs of the
repository as a whole take precedence; however, we were hoping to get some
advice relatively soon since the deadline for our assignment is a week or
so away and we would like to make as much progress on the issue as possible
before then.
—
Reply to this email directly, view it on GitHub
<#11337 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACKSLRQRH3ZCNJOHJVDEN53WLABSFANCNFSM557ODTYA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
Thanks for getting back to me! Yes I'm in the server. However, I only have access to the dev-onboarding channel. Also, since you two are somewhat familiar with this issue I figured I'd ask here first. |
|
Happy to help if I can
…On Wed, Nov 30, 2022 at 6:08 PM Srihari Srinivasan ***@***.***> wrote:
Thanks for getting back to me! Yes I'm in the server. However, I only have
access to the dev-onboarding channel. Also, since you two are somewhat
familiar with this issue I figured I'd ask here first.
—
Reply to this email directly, view it on GitHub
<#11337 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACKSLRUB73MTZZJZL7SROVTWLACDDANCNFSM557ODTYA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
Among people who regularly give onboarding advice, benedikt (1vader on discord) is probably a good one to bounce your embedding ideas off of. Also - friendly heads up re lichess discord - avoid pinging maintainers in non-emergency cases it won't speed up response. |
|
Sorry, I haven't really been following GitHub much the last few weeks. Zen mode definitely doesn't seem like the way to go here. We just want to directly remove all that stuff. The main way to get rid of most of that is to use More fundamentally though, as Thibault mentioned in the Draft PR, it does seem kinda unclear what exactly this is supposed to do. Is it an embed of a single puzzle or can you continue playing puzzles after another? |
|
Speaking as a potential customer of the feature, a single-use puzzle view
would be ideal. Imagine wanting to embed a specific puzzle into a blog post
so you could comment on it or discuss it.
I agree re: Zen mode. I think it’s useful as a way for a new person to the
code base to see which elements are essential to the main view and which
are not. It’s clearly better to remove the elements rather than hide them
…On Fri, Dec 9, 2022 at 9:26 AM Benedikt Werner ***@***.***> wrote:
Sorry, I haven't really been following GitHub much the last few weeks.
Zen mode definitely doesn't seem like the way to go here. We just want to
directly remove all that stuff. The main way to get rid of most of that is
to use views.html.base.embed instead of views.html.base.layout in the
view.
More fundamentally though, as Thibault mentioned in the Draft PR, it does
seem kinda unclear what exactly this is supposed to do. Is it an embed of a
single puzzle or can you continue playing puzzles after another?
—
Reply to this email directly, view it on GitHub
<#11337 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACKSLRUJTYGE4KBSS4Z755LWMNTTZANCNFSM557ODTYA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
On many occasions I try to make an entry on my blog about tactical patterns and in fact I need to be able to put some puzzles that can be solved within my blog. |
Currently, analysis boards, live games, and the puzzle of the day are available to embed via iframe. Other pages are blocked from embedding because of the Cross-Origin-Opener-Policy header (set in LilaController.scala)
other open-source projects (such as chessli, which integrates lichess with Anki) have to work around this limitation by using another website's puzzle viewer embedded in an iframe. It would be much better to be able to use the lichess puzzle viewer (which is way better)
for what it's worth, other similar sites don't have such a restrictive content policy. for example, the thing that originally got me down this rabbit hole was using Anki to study puzzles in go/baduk, using the open-source online-go.org and Anki. because they do not have a restrictive content policy, their existing puzzle pages work nicely embedded in iframes. I recognize that their scale and significance is different from lichess, I just thought that was an interesting datapoint.
The text was updated successfully, but these errors were encountered: